Add card-style mobile layout

style.css

@@ -141,6 +141,27 @@ th[data-filter].filter-active::before {
 /* Short/full column header label swap (see responsive section) */
 .col-short { display: none; }
 
+/* Dim pill for inactive mobile status indicators */
+.pill-dim { background: rgba(255,255,255,.06); color: var(--muted); }
+
+/* Mobile card row — hidden on desktop, shown in responsive block */
+.mobile-row { display: none; }
+
+/* Tooltip for truncated mobile text */
+#mob-tooltip {
+  position: fixed;
+  z-index: 200;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: .35rem .65rem;
+  font-size: .8rem;
+  max-width: 80vw;
+  box-shadow: 0 2px 8px rgba(0,0,0,.4);
+  pointer-events: none;
+  color: var(--text);
+}
+
 /* ── Buttons ──────────────────────────────────────────────── */
 button {
   cursor: pointer;
@@ -193,6 +214,16 @@ th.sort-desc .sort-indicator::after { content: '▼'; }
 #tune-table tbody tr:nth-child(even) { background: rgba(255,255,255,.025); }
 #tune-table tbody tr:hover           { background: rgba(255,255,255,.055); }
 
+/* Truncating spans for Name + Source columns */
+.cell-trunc {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.cell-name-content   { max-width: min(22vw, 260px); }
+.cell-source-content { max-width: min(26vw, 200px); }
+
 .pill {
   display: inline-block;
   padding: .15rem .45rem;
@@ -349,20 +380,72 @@ fieldset.active .fs-body { display: contents; }
 
 /* ── Responsive ───────────────────────────────────────────── */
 @media (max-width: 600px) {
-  /* Header: let actions wrap onto a second line */
+  /* Header: wrap onto second line if needed */
   header { flex-wrap: wrap; }
   #header-actions { flex-wrap: wrap; }
 
-  /* Table: scroll horizontally instead of hiding columns */
-  #tune-table { width: max-content; min-width: 100%; }
+  /* Table: block layout so the card has a concrete width to truncate against */
+  #tune-table,
+  #tune-table tbody,
+  #tune-table tr  { display: block; width: 100%; }
+  #tune-table thead { display: none; }
+  #tune-table tr  { border-bottom: 1px solid var(--border); }
+  #tune-table td:not(.mobile-row) { display: none; }
+  .mobile-row     { display: block; padding: .45rem .6rem; }
 
-  /* Tighter cell padding on mobile */
-  #tune-table th,
-  #tune-table td { padding: .4rem .35rem; }
+  /* Line 1: Name (Source) … [Call][Rev][Lrn] */
+  .mob-line1 {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    gap: .4rem;
+  }
+  .mob-name-wrap {
+    display: flex;
+    align-items: baseline;
+    gap: .25rem;
+    flex: 1;
+    min-width: 0;
+  }
+  .mob-name {
+    font-weight: 600;
+    font-size: .82rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1 1 0;
+    min-width: 1.5rem;
+  }
+  .mob-source {
+    font-size: .75rem;
+    color: var(--muted);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 0 1 auto;
+    min-width: 1.5rem;
+  }
+  .mob-status { display: flex; gap: .2rem; align-items: center; flex-shrink: 0; }
+  .mob-pill   { font-size: .62rem; padding: .1rem .3rem; }
 
-  /* Short column headers: swap to abbreviated label on mobile */
-  .col-full  { display: none; }
-  .col-short { display: inline; }
+  /* Line 2: Instrument (Tuning) · Key [actions] */
+  .mob-line2 {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: .4rem;
+    margin-top: .25rem;
+  }
+  .mob-meta {
+    font-size: .72rem;
+    color: var(--muted);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    flex: 1;
+    min-width: 0;
+  }
+  .mob-actions { display: flex; gap: .2rem; flex-shrink: 0; }
 
   /* Modals: fullscreen */
   dialog {