/* ATI Tracker v2 (staging) — same token set as v1 so the two dashboards read as
   one tool during cutover. Do not fork the palette here; if a token changes it
   changes in /style.css and gets copied across. */

:root {
  --bg: #0f1720;
  --panel: #17212c;
  --panel-2: #1e2a37;
  --border: #2b3a48;
  --text: #e6edf3;
  --text-dim: #93a4b3;
  --accent: #3b9dff;
  --green: #2ecc71;
  --amber: #f5a623;
  --red: #e74c3c;
  --gold: #d9b45b;
  --radius: 8px;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  /* Staging stripe. Cheap, permanent, and visible before anything else paints —
     nobody should mistake this page for the live tracker. */
  border-top: 3px solid var(--amber);
}

.screen { min-height: 100vh; }

/* Focus rings must survive every custom control below — the stage dots are the
   primary interaction and they are keyboard-driven. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ─── Login ─────────────────────────────────────────────────────────────── */
#login-screen { display: flex; align-items: center; justify-content: center; }
.login-box {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px;
  width: 340px;
}
.login-box h1 { margin: 0 0 4px; font-size: 20px; }
.login-box .sub { color: var(--text-dim); font-size: 13px; margin: 0 0 20px; }
.login-box form { display: flex; flex-direction: column; gap: 12px; }
.login-box input {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 12px;
  border-radius: var(--radius);
  font-size: 14px;
}
.error { color: var(--red); font-size: 13px; min-height: 18px; margin: 8px 0 0; }

/* ─── Topbar ────────────────────────────────────────────────────────────── */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.topbar-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.topbar-left h1 { font-size: 18px; margin: 0; }
.topbar-right { display: flex; align-items: center; gap: 14px; }

.chip-staging {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 4px;
  background: var(--amber);
  color: #1a1205;
  white-space: nowrap;
}

.badge {
  font-size: 11px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 20px;
  background: var(--panel-2);
  color: var(--text-dim);
  border: 1px solid var(--border);
  white-space: nowrap;
}
.badge.edit { color: var(--green); border-color: var(--green); }
.badge.read { color: var(--amber); border-color: var(--amber); }

.v1-link {
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
  border: 1px solid var(--accent);
  padding: 6px 10px;
  border-radius: var(--radius);
  white-space: nowrap;
}
.v1-link:hover { background: rgba(59,157,255,0.12); }

.topbar-nav { display: flex; gap: 6px; flex-wrap: wrap; }
.nav-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-dim);
  padding: 8px 14px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 14px;
}
.nav-btn.active { background: var(--panel-2); color: var(--text); border-color: var(--border); }

.btn-link { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 13px; }
.btn-link:hover { color: var(--text); }

main { padding: 20px; max-width: 1400px; margin: 0 auto; }
h2 { font-size: 17px; margin: 0 0 14px; }

/* ─── Buttons ───────────────────────────────────────────────────────────── */
.btn-primary, .btn-secondary, .btn-danger {
  border: none;
  border-radius: var(--radius);
  padding: 9px 16px;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-secondary { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); }
.btn-danger { background: transparent; color: var(--red); border: 1px solid var(--red); }
.btn-secondary:disabled { opacity: 0.4; cursor: default; }

/* ─── Panels ────────────────────────────────────────────────────────────── */
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
}
.panel h3 { margin: 0 0 12px; font-size: 14px; color: var(--text-dim); }
.panel-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.panel-head h3 { margin: 0; }

/* Alert panels get a 3px left rail plus a tinted border so they read as alerts
   at a glance rather than as another neutral card. */
.panel.alert-red {
  border-color: var(--red);
  border-left: 4px solid var(--red);
  background: linear-gradient(to right, rgba(231,76,60,0.07), var(--panel) 240px);
}
.panel.alert-red h3 { color: var(--red); }
.panel.alert-amber {
  border-color: var(--amber);
  border-left: 4px solid var(--amber);
  background: linear-gradient(to right, rgba(245,166,35,0.07), var(--panel) 240px);
}
.panel.alert-amber h3 { color: var(--amber); }
/* Cleared state: same panel, green, so "nothing open" is a positive signal and
   not an empty box that looks like a loading failure. */
.panel.alert-clear {
  border-color: var(--green);
  border-left: 4px solid var(--green);
  background: var(--panel);
}
.panel.alert-clear h3 { color: var(--green); }

.hint { font-size: 12px; color: var(--text-dim); margin: 8px 0 0; }
.big-num { font-size: 34px; font-weight: 700; line-height: 1; }
.ok-line { color: var(--green); font-size: 14px; margin: 0; }

/* ─── Stat tiles ────────────────────────────────────────────────────────── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.stat-tile {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
}
.stat-tile .num { font-size: 26px; font-weight: 700; line-height: 1.1; }
.stat-tile .label { font-size: 12px; color: var(--text-dim); margin-top: 6px; }
.stat-tile.warn { border-color: var(--amber); }
.stat-tile.warn .num { color: var(--amber); }
.stat-tile.bad { border-color: var(--red); }
.stat-tile.bad .num { color: var(--red); }

/* ─── Progress bars ────────────────────────────────────────────────────── */
.target-wrap { margin-top: 16px; }
.target-label { font-size: 13px; color: var(--text-dim); margin-bottom: 6px; }
.bar-track {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  height: 12px;
  overflow: hidden;
}
.bar-fill { height: 100%; background: var(--green); border-radius: 20px; }
.bar-fill.accent { background: var(--accent); }

.bar-row {
  display: grid;
  grid-template-columns: 110px 1fr 92px;
  gap: 10px;
  align-items: center;
  font-size: 13px;
  padding: 3px 0;
}
.bar-row .bar-num { color: var(--text-dim); font-size: 12px; text-align: right; }

/* ─── Funnel ────────────────────────────────────────────────────────────── */
.funnel {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.funnel-stage {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 10px;
  text-align: center;
  min-width: 96px;
  flex: 1 1 96px;
}
.funnel-stage .num { font-size: 22px; font-weight: 700; }
.funnel-stage .label { font-size: 11px; color: var(--text-dim); margin-top: 4px; }
/* The connector fill shows carry-through from one stage to the next, so a
   pinch point in the pipeline shows up as a short bar. */
.funnel-link { flex: 0 1 34px; min-width: 18px; height: 6px; background: var(--panel-2); border-radius: 20px; overflow: hidden; }
.funnel-link-fill { height: 100%; background: var(--accent); }

.chip-row { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  font-size: 12px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4px 10px;
  color: var(--text-dim);
}
.chip b { color: var(--text); }

/* ─── Alert lists ───────────────────────────────────────────────────────── */
.alert-list { display: flex; flex-direction: column; gap: 8px; }
.alert-item {
  background: var(--panel-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  font-size: 13px;
}
.alert-item .who { font-weight: 600; }
.alert-item .where { color: var(--text-dim); font-size: 12px; margin-left: 6px; }
.alert-item .what { margin-top: 6px; color: var(--text); line-height: 1.45; }
.alert-item.dim { opacity: 0.55; }
.sub-list-label { font-size: 12px; color: var(--text-dim); margin: 14px 0 6px; }
.copied-note { font-size: 12px; color: var(--green); margin-left: 8px; }

/* ─── Tables ────────────────────────────────────────────────────────────── */
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.toolbar input, .toolbar select {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 10px;
  border-radius: var(--radius);
  font-size: 13px;
  font-family: inherit;
}
.toolbar input[type="search"] { flex: 1 1 180px; min-width: 140px; }

/* Horizontal overflow is contained here so the page itself never scrolls
   sideways at 390px. */
.table-scroll {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 9px 12px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
th { color: var(--text-dim); font-weight: 600; background: var(--panel); }
tbody tr:last-child td { border-bottom: none; }
.mini-table td, .mini-table th { padding: 5px 8px; }
td.wrap { white-space: normal; min-width: 240px; }
.t-name { font-weight: 600; }
.t-slug { display: block; color: var(--text-dim); font-size: 11px; font-weight: 400; }

.legend { font-size: 12px; color: var(--text-dim); margin: 0 0 10px; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }

.pager { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }

a { color: var(--accent); }
a.tlink { font-size: 12px; }

/* ─── Stage dots ────────────────────────────────────────────────────────── */
.stage-dots { display: flex; gap: 6px; align-items: center; }
.dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--panel-2);
  padding: 0;
  vertical-align: middle;
}
.dot.done { background: var(--green); border-color: var(--green); }
.dot.current { background: var(--amber); border-color: var(--amber); }
.dot.later { background: transparent; border-color: var(--text-dim); opacity: 0.55; }
/* Only the <button> variant is clickable; the read tier renders <span>s, which
   carry no cursor and no hover so there is no phantom affordance. */
button.dot { cursor: pointer; }
button.dot:hover { box-shadow: 0 0 0 3px rgba(59,157,255,0.35); }
button.dot.done { cursor: default; }
button.dot.done:hover { box-shadow: none; }
button.dot.pending { opacity: 0.4; }

/* ─── Completeness strip ───────────────────────────────────────────────── */
.cstrip { display: flex; gap: 4px; align-items: center; }
.cbox {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 2px;
  border: 1px solid var(--text-dim);
  vertical-align: middle;
}
.cbox.on { background: var(--accent); border-color: var(--accent); }
.cbox.off { background: transparent; opacity: 0.6; }

/* ─── Row flags ─────────────────────────────────────────────────────────── */
.flag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  border-radius: 4px;
  padding: 2px 6px;
  margin-right: 4px;
  border: 1px solid;
}
.flag-s { color: var(--gold); border-color: var(--gold); background: rgba(217,180,91,0.12); }
.flag-c { color: var(--red); border-color: var(--red); background: rgba(231,76,60,0.14); }
.flag-w { color: var(--amber); border-color: var(--amber); background: rgba(245,166,35,0.14); }

/* ─── Inline gate errors ───────────────────────────────────────────────── */
/* Lives in its own <tr> directly under the row it belongs to, so the refusal
   reads as "this row, this reason" and cannot be mistaken for a page-level
   message. Never an alert() — the user has to be able to read, copy and act on
   the gate text while still looking at the row. */
.gate-row td { padding: 0; border-bottom: 1px solid var(--border); }

/* Both the gate box and the detail panel sit inside the horizontally scrolling
   table, so without a cap they inherit the full table width (~880px) and a
   390px reader would have to scroll right to read the very message they need.
   Pinning to the container's left edge and capping to the viewport keeps the
   text next to the row it belongs to at every width. */
.gate-errors, .detail-panel {
  position: sticky;
  left: 0;
  max-width: calc(100vw - 56px);
}

.gate-errors {
  margin: 0 12px 12px;
  border: 1px solid var(--red);
  border-left: 4px solid var(--red);
  border-radius: var(--radius);
  background: rgba(231,76,60,0.10);
  padding: 10px 12px;
  white-space: normal;
}
.gate-errors .gate-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.gate-errors ul { margin: 8px 0 0; padding-left: 18px; }
.gate-errors li { font-size: 13px; line-height: 1.5; margin-bottom: 6px; }
.gate-errors .gate-dismiss { margin-top: 4px; }

/* ─── Audio controls ───────────────────────────────────────────────────── */
/* Play/pause and elapsed time only — no seek, no volume, no speed, no download.
   The signed URL is never in the DOM, so there is nothing here to copy. */
.aplay { display: inline-flex; align-items: center; gap: 7px; }
.acell { display: inline-flex; align-items: center; gap: 7px; }

.abtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font-size: 10px;
  line-height: 1;
  font-family: inherit;
}
.abtn:hover { background: rgba(59,157,255,0.16); }
.abtn.playing { background: var(--accent); color: #fff; }
.abtn.loading { opacity: 0.6; cursor: default; }
.abtn:disabled { cursor: default; }
.abtn .aglyph { pointer-events: none; }

/* Fixed width and tabular figures so the row does not twitch every tick. */
.atime {
  font-size: 11px;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  min-width: 62px;
}
.aerr {
  font-size: 11px;
  color: var(--red);
  white-space: normal;
  max-width: 200px;
  display: inline-block;
}
.aerr:empty { display: none; }

.vmark {
  font-size: 10px;
  color: var(--text-dim);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 4px;
  flex: 0 0 auto;
}

/* Multi-stop rows keep the table narrow and defer to the detail panel. */
.astops {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 20px;
  padding: 4px 10px;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}
.astops:hover { border-color: var(--accent); color: var(--accent); }
.astops .caret { color: var(--text-dim); font-size: 10px; }
.astops:hover .caret { color: var(--accent); }

/* Per-stop list inside the detail panel. */
.stop-list { list-style: none; margin: 0; padding: 0; }
.stop-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.stop-row:last-child { border-bottom: none; }
.stop-n {
  flex: 0 0 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-size: 11px;
}
.stop-title { flex: 1 1 auto; min-width: 0; word-break: break-word; }
.stop-row .aplay { flex: 0 0 auto; margin-left: auto; }

/* ─── Row detail / edit panel ──────────────────────────────────────────── */
/* The whole data row is a click target for opening the panel, so it has to look
   like one. The <button> in the name cell is the keyboard/AT route to the same
   action and is styled to disappear into the cell. */
tr[data-id] { cursor: pointer; }
tr[data-id]:hover { background: var(--panel-2); }
tr[data-id].open { background: var(--panel-2); }

.row-toggle {
  display: flex;
  align-items: baseline;
  gap: 7px;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  color: inherit;
  font: inherit;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}
.row-toggle .caret { color: var(--text-dim); font-size: 11px; line-height: 1.4; }
.row-toggle:hover .caret { color: var(--accent); }
.row-toggle-text { white-space: normal; }

/* Table cells are nowrap by default; the panel is prose and form controls, so
   it opts back into normal wrapping and stacks instead of scrolling sideways. */
.detail-row td { padding: 0; white-space: normal; }
.detail-panel {
  margin: 0 12px 12px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius);
  background: var(--panel-2);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.detail-section h4 {
  margin: 0 0 10px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}
.hint-inline { text-transform: none; letter-spacing: 0; font-weight: 400; }

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 6px 20px;
}
.dl { display: flex; gap: 8px; font-size: 13px; align-items: baseline; }
.dt { color: var(--text-dim); flex: 0 0 132px; font-size: 12px; }
.dd { flex: 1 1 auto; word-break: break-word; }
.ok-tick { color: var(--green); }
.bad-tick { color: var(--red); font-weight: 600; }
.stage-audit td, .stage-audit th { white-space: nowrap; }

/* ─── Panel edit controls ──────────────────────────────────────────────── */
.edit-section { border-top: 1px solid var(--border); padding-top: 16px; }
.field { display: block; font-size: 12px; color: var(--text-dim); margin-bottom: 12px; }
.field-note {
  display: block;
  font-size: 12px;
  color: var(--text-dim);
  font-weight: 400;
  line-height: 1.45;
  margin: 4px 0 6px;
}
.field-note em { color: var(--text); font-style: normal; font-weight: 600; }
.detail-panel textarea,
.detail-panel select {
  width: 100%;
  max-width: 640px;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 10px;
  border-radius: var(--radius);
  font-size: 13px;
  font-family: inherit;
}
.detail-panel textarea { resize: vertical; }
.detail-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }

.check-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: var(--text);
  margin-bottom: 14px;
  max-width: 640px;
  cursor: pointer;
}
.check-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: var(--accent);
  flex: 0 0 auto;
}
.check-row .field-note { margin: 3px 0 0; }

/* ─── Queue ─────────────────────────────────────────────────────────────── */
.badge-fix {
  display: inline-block;
  background: var(--red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 4px;
  margin-bottom: 6px;
}
tr.needs-fix { background: rgba(231,76,60,0.08); }
.fix-text { white-space: normal; font-size: 12px; line-height: 1.45; max-width: 420px; }

/* ─── Sponsors ──────────────────────────────────────────────────────────── */
tr.row-amber { background: rgba(245,166,35,0.10); }
tr.row-red { background: rgba(231,76,60,0.12); }
.form-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.form-row label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; color: var(--text-dim);
  flex: 1 1 150px; min-width: 140px;
}
.form-row label.wide { flex-basis: 100%; }
.form-row input, .form-row select, .form-row textarea, select.status-select {
  background: var(--panel-2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 10px;
  border-radius: var(--radius);
  font-size: 13px;
  font-family: inherit;
}
.form-row textarea { width: 100%; resize: vertical; }
select.status-select { padding: 4px 8px; font-size: 12px; }

/* ─── Narrow screens ───────────────────────────────────────────────────── */
@media (max-width: 560px) {
  main { padding: 14px; }
  .topbar { padding: 10px 14px; }
  .topbar-nav { order: 3; width: 100%; }
  .nav-btn { padding: 7px 10px; font-size: 13px; }
  .bar-row { grid-template-columns: 84px 1fr 74px; }
  .funnel-link { display: none; }
  .funnel-stage { min-width: 76px; flex: 1 1 76px; }

  /* The panel stacks to one column and the label/value pairs go vertical, so
     nothing in it widens the table's scroll container at 390px. */
  .detail-panel { margin: 0 8px 10px; padding: 12px; gap: 14px; }
  .detail-grid { grid-template-columns: 1fr; }
  .dl { flex-direction: column; gap: 1px; }
  .dt { flex: 0 0 auto; }

  /* The stop rows wrap instead of squeezing the title to nothing; the control
     drops to its own line and stays left-aligned under the title. */
  .stop-row { flex-wrap: wrap; }
  .stop-title { flex: 1 1 140px; }
  .stop-row .aplay { margin-left: 32px; }
  .atime { min-width: 56px; }
  .aerr { max-width: 100%; }
}

/* Production build marker. Same shape as .chip-staging but neutral — the
   staging chip is a warning ("you are not on the real thing"), whereas on
   production the chip is just telling you which dashboard you are on, with
   /v1/ still one click away. */
.chip-version {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--panel-2);
  color: var(--text-dim);
  border: 1px solid var(--border);
  vertical-align: middle;
}

/* Named stage-4 ear-check on Andy's queue. Visually distinct from the
   correction badge: a correction is "this was wrong", an ear-check is "this is
   the thing to listen for". Both can be present at once, so they must not read
   as the same alert. */
.badge-ear {
  display: inline-block;
  margin-top: 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 2px 7px;
  border-radius: 3px;
  background: var(--accent);
  color: #06131f;
}
.ear-text {
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text);
  border-left: 3px solid var(--accent);
  padding: 5px 0 5px 9px;
  max-width: 46ch;
}

/* ─── Andy's queue on a phone ──────────────────────────────────────────────
   The queue was a 592px table inside a 375px scroll container. The page never
   scrolled sideways, which is what the earlier mobile check measured — but the
   Audio column sat off-screen, so the Listen button, the entire reason Andy
   opens this screen, was reachable only by discovering you can swipe the table.
   A control you have to find by accident is not a control.

   So on narrow screens the queue stops being a table and becomes stacked cards:
   each row's cells go full-width and label themselves from data-label, and the
   play control sits in the flow where a thumb lands. Same markup, no JS change. */
@media (max-width: 560px) {
  #queue-table, #queue-table thead, #queue-table tbody,
  #queue-table tr, #queue-table td { display: block; width: 100%; }

  /* The header row is meaningless once cells are stacked — each cell carries
     its own label instead. */
  #queue-table thead { display: none; }

  #queue-table tr {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--panel);
    padding: 12px;
    margin-bottom: 12px;
  }
  #queue-table td {
    border: none;
    padding: 4px 0;
    white-space: normal;
  }
  /* Skip the label on the title cell — it is self-evidently the title, and the
     name is already the visual anchor of the card. */
  #queue-table td[data-label]:not([data-label="Title"])::before {
    content: attr(data-label);
    display: block;
    font-size: 10px;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 2px;
  }
  #queue-table td[data-label="Audio"] { padding-top: 10px; }

  /* Tap targets. The project's own standard is 44px; the play button was 26px
     and the nav buttons 31px. */
  #queue-table .abtn { min-width: 44px; min-height: 44px; }
  .nav-btn { min-height: 44px; padding: 10px 12px; }
}