/* ══ MIRA TRANSCRIBE · Speech to Text → Offline (batch) ══════════════════════
 * The recordings card with a row per recording, Logs → Recordings, the API
 * steps, and the transcript player (draft, then final). Drawn in the
 * model pages' language (models.css): grouped white cards, tinted fills,
 * the raised-pill selection, ink for actions. No new colours: a speaker's
 * colour is one of the console's own tokens, named by a swatch key so the
 * transcript document stores "green", never a hex.
 *
 * WHY EVERY PLAYER RULE STARTS `#content #trp`. models.css styles every
 * button on a model page with `.model-view #content button:not(…)` nine times
 * over, which outranks any class selector. Two ids say "this region draws its
 * own controls" once, instead of an !important on every property.
 *
 * Rule 2 holds here too: a speaker is a colour AND a name or initials, the
 * active line is a fill AND a rule, a row's state is a shape. */

/* ── speaker swatches ──────────────────────────────────────────────────── */
.asr-studio {
  --tr-green: var(--accent);
  --tr-ink: var(--c-ink);
  --tr-amber: var(--c-open);
  --tr-stone: var(--c-ink-3);
  --tr-mint: var(--accent-on-dark);
  --tr-sand: var(--c-open-on-dark);
  --tr-ash: var(--c-ink-4);
}
.asr-studio [data-color="green"] { --spk: var(--tr-green); --spk-on: var(--c-surface); }
.asr-studio [data-color="ink"] { --spk: var(--tr-ink); --spk-on: var(--c-surface); }
.asr-studio [data-color="amber"] { --spk: var(--tr-amber); --spk-on: var(--c-surface); }
.asr-studio [data-color="stone"] { --spk: var(--tr-stone); --spk-on: var(--c-surface); }
.asr-studio [data-color="mint"] { --spk: var(--tr-mint); --spk-on: var(--c-ink); }
.asr-studio [data-color="sand"] { --spk: var(--tr-sand); --spk-on: var(--c-ink); }
.asr-studio [data-color="ash"] { --spk: var(--tr-ash); --spk-on: var(--c-ink); }

/* ── Offline → Playground ─────────────────────────────────────────────── */
#content #trcard .dev-help { max-width: 62ch; }
/* The drop zone is the file input's label: a click anywhere picks files, a
 * file dropped anywhere is taken. Labels are small caps everywhere else in the
 * console; this one is a surface, so it says so. */
#content #trcard .tr-drop {
  display: flex; align-items: center; gap: 14px; margin: 16px 0 14px; padding: 18px;
  border: 1px dashed var(--ui-edge); border-radius: var(--ui-r-card); background: var(--ui-fill-2);
  cursor: pointer; text-transform: none; letter-spacing: 0; font: 400 13px/1.4 var(--sans); color: var(--c-ink-3);
  transition: background-color 140ms var(--ease-out), border-color 140ms var(--ease-out);
}
#content #trcard .tr-drop svg { flex: none; width: 26px; height: 26px; color: var(--c-ink-3); }
#content #trcard .tr-droptext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#content #trcard #trdropname { font: 600 14px/1.3 var(--sans); color: var(--c-ink); letter-spacing: -0.01em; }
#content #trcard #trdropmeta { font-size: 12.5px; color: var(--c-ink-3); }
#content #trcard .tr-drop:hover, #content #trcard .tr-drop.is-over { background: var(--ui-fill-3); border-color: var(--c-ink-4); }
#content #trcard .tr-drop.is-over { border-style: solid; border-color: var(--c-ink); }
#content #trcard .tr-drop.is-off { pointer-events: none; opacity: 0.55; }
#content #trcard .tr-drop:focus-within { outline: 2px solid var(--c-ink); outline-offset: 2px; }
#content #trcard .tr-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
#content #trcard .tr-fields input { width: 100%; }
#content #trcard .tr-opt { font-weight: 400; color: var(--c-ink-3); margin-left: 4px; }
#content #trcard .tr-go { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
#content #trcard #trsubmit { min-width: 128px; }
#content #trcard #trlimits { font-size: 12px; font-variant-numeric: tabular-nums; }

/* The rows: one per recording of this visit. A shape for its state (rule 2:
 * ○ to send, ◐ working, ● ready, ■ failed, – skipped), its name and length, a
 * thin bar while it works, then what is happening in words, with a clock. */
#content #trcard .tr-queue { margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--ui-sep); }
#content #trcard .tr-queuehead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  min-height: 18px; font: 600 12px/1.3 var(--sans); color: var(--c-ink-3); font-variant-numeric: tabular-nums; }
#content #trcard .tr-queuehead .linkbtn { min-height: 0; padding: 0; font-size: 12px; font-weight: 500; color: var(--c-ink-2); }
/* One grid for every row (subgrid), so names, bars and buttons line up down
 * the list whichever buttons a row has. */
#content #trcard .tr-items { list-style: none; margin: 4px 0 0; padding: 0; display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto; column-gap: 12px; }
#content #trcard .tr-item { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid;
  align-items: start; padding: 12px 0; border-top: 1px solid var(--ui-sep); }
#content #trcard .tr-item:first-child { border-top: 0; }
#content #trcard .tr-mark { box-sizing: border-box; width: 10px; height: 10px; margin-top: 4px; border-radius: 50%;
  border: 1.5px solid var(--c-ink-4); }
#content #trcard .tr-item:is([data-state="uploading"], [data-state="working"], [data-state="draft"]) .tr-mark {
  border-color: var(--c-ink); background: linear-gradient(90deg, var(--c-ink) 50%, transparent 50%); }
#content #trcard .tr-item[data-state="ready"] .tr-mark { border-color: var(--c-ink); background: var(--c-ink); }
#content #trcard .tr-item:is([data-state="failed"], [data-state="lost"]) .tr-mark { border-radius: 1px;
  border-color: var(--c-alarm); background: var(--c-alarm); }
#content #trcard .tr-item[data-state="skipped"] .tr-mark { height: 2px; margin-top: 8px; border: 0; border-radius: 1px;
  background: var(--c-ink-4); }
#content #trcard .tr-itemmain { min-width: 0; }
#content #trcard .tr-itemhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
#content #trcard .tr-itemname { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 600 13.5px/1.35 var(--sans); letter-spacing: -0.006em; color: var(--c-ink); }
#content #trcard .tr-item[data-state="skipped"] .tr-itemname { color: var(--c-ink-3); font-weight: 500; }
#content #trcard .tr-itemmeta { flex: none; font-size: 12px; color: var(--c-ink-3); font-variant-numeric: tabular-nums; }
#content #trcard .tr-bar { height: 4px; margin: 8px 0 2px; border-radius: 999px; background: var(--ui-fill); overflow: hidden; }
#content #trcard .tr-bar[hidden] { display: none; }
#content #trcard .tr-bar > i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--c-ink);
  transition: width 900ms linear; }
/* Past its estimate the bar holds, so it moves another way: still working. */
#content #trcard .tr-bar.is-long > i { background: linear-gradient(90deg, var(--c-ink) 30%, var(--c-ink-4) 50%, var(--c-ink) 70%);
  background-size: 300% 100%; animation: tr-still 2.4s linear infinite; }
@keyframes tr-still { from { background-position: 100% 0; } to { background-position: -50% 0; } }
#content #trcard .tr-itemline { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap;
  gap: 2px 12px; margin-top: 4px; font-size: 12.5px; line-height: 1.45; }
#content #trcard .tr-itemstatus { min-width: 0; color: var(--c-ink-2); }
#content #trcard .tr-item[data-state="draft"] .tr-itemstatus { color: var(--c-ink); }
#content #trcard .tr-item[data-state="skipped"] .tr-itemstatus { color: var(--c-ink-3); }
#content #trcard .tr-itemstatus.mark-bad { color: var(--c-alarm-ink); }
#content #trcard .tr-itemclock { flex: none; color: var(--c-ink-3); font-variant-numeric: tabular-nums; }
#content #trcard .tr-itemacts { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
#content #trcard .tr-itemacts .tr-open { min-height: 30px; padding: 6px 14px; border-radius: var(--ui-r-control);
  font: 600 12.5px/1 var(--sans); }
#content #trcard .tr-itemacts .ghost { min-height: 30px; padding: 6px 12px; }
#content #trcard .tr-itemacts .tr-topup { font: 600 12.5px/1 var(--sans); white-space: nowrap; }

/* An admin's workspace: whose recordings these are and whose wallet pays. */
#content .tr-wsbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 14px; }
#content .tr-wsbar[hidden] { display: none; }
#content .tr-wsbar label { font: 600 12.5px/1 var(--sans); color: var(--c-ink-2); }
#content .tr-wsbar select { min-height: 32px; min-width: 220px; max-width: 100%; padding: 5px 26px 5px 10px; font-size: 13px; }
#content .tr-wsbar .dev-help { margin: 0; }
#content #trcard .tr-x { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  min-height: 0; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--c-ink-3); }
#content #trcard .tr-x svg { width: 14px; height: 14px; }
#content #trcard .tr-x:hover { background: var(--ui-fill-2); color: var(--c-ink); }
#content #trcard .tr-queuenote { margin: 8px 0 0; padding-top: 10px; border-top: 1px solid var(--ui-sep);
  font-size: 12px; line-height: 1.5; color: var(--c-ink-3); }
#content #trcard .tr-queuenote[hidden] { display: none; }

/* What to expect: the same rhythm as Realtime's "Try saying". */
#content .tr-side .tr-expect { margin: 8px 0 14px; }
#content .tr-side .tr-expect > div { padding: 11px 0; border-top: 1px solid var(--ui-sep); }
#content .tr-side .tr-expect dt { font: 600 11.5px/1.2 var(--sans); color: var(--c-ink-3); }
#content .tr-side .tr-expect dd { margin: 5px 0 0; font-size: 13px; line-height: 1.55; color: var(--c-ink-2); }
#content #asroffpanel-playground .tr-side .linkbtn { min-height: 0; padding: 0; }

/* Offline → API: the two calls as numbered steps over their code. */
.model-view #content .tr-apistep { margin: 18px 0 0; font: 600 13px/1.3 var(--sans); letter-spacing: -0.006em; color: var(--c-ink); }
.model-view #content .tr-apifacts code { font-size: 12px; }

/* ── Offline → Logs → Recordings ───────────────────────────────────────── */
#content #trlogcard .tr-jobname { display: block; max-width: 260px; padding: 0; min-height: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; font: 500 13px/1.4 var(--sans); color: var(--c-ink); text-align: left;
  background: none; border: 0; }
#content #trlogcard .tr-jobname:hover { text-decoration: underline; text-underline-offset: 3px; }
#content #trlogcard .model-reqtext { color: var(--c-ink-3); font-size: 12px; }
#content #trlogcard :is(.tts-reqstate.is-waiting, .tts-reqstate.is-transcribing) { color: var(--c-open-ink); }

/* ══ THE PLAYER ═══════════════════════════════════════════════════════════
 * It takes the page: the title, the tabs and the panels step aside, and the
 * player is one window the height of the screen beside the test panel, which
 * does not move. Inside: a header, the deck (transport and the track view),
 * then the transcript with the speakers beside it — or above it, as chips,
 * when the window is narrow. */
.asr-studio.tr-open > .view-head,
.asr-studio.tr-open > .asr-modes,
.asr-studio.tr-open > .asr-mode { display: none !important; }
#content:has(.tr-open) { padding-bottom: 0; }

#content #trp {
  --lab-w: 116px; --lane-h: 20px; --ruler-h: 18px;
  position: relative; display: flex; flex-direction: column;
  height: calc(100vh - 32px - var(--banner-h, 0px));
  height: calc(100dvh - 32px - var(--banner-h, 0px));
  min-height: 520px; overflow: hidden;
  border-radius: var(--ui-r-panel); background: var(--c-surface); box-shadow: var(--ui-card);
  container-type: inline-size; container-name: trp;
}
#content #trp[hidden] { display: none; }
#content #trp:focus { outline: none; }

/* The shared reset for every control the player draws. */
#content #trp button { min-height: 0; padding: 0; border: 0; background: none; color: inherit;
  font: inherit; line-height: 1.2; border-radius: var(--ui-r-control); }
#content #trp button:disabled { opacity: 0.35; }
#content #trp label { text-transform: none; letter-spacing: 0; }

#content #trp .trp-head { flex: none; display: flex; align-items: center; gap: 12px; padding: 12px 14px 10px 10px; }
#content #trp .trp-back { display: inline-flex; align-items: center; gap: 3px; padding: 6px 10px 6px 4px;
  font: 500 13px/1 var(--sans); color: var(--c-ink-2); white-space: nowrap; }
#content #trp .trp-back svg { width: 17px; height: 17px; }
#content #trp .trp-back:hover { background: var(--ui-fill-2); color: var(--c-ink); }
#content #trp .trp-head h2 { flex: 1 1 auto; min-width: 0; margin: 0; padding-left: 10px;
  border-left: 1px solid var(--ui-sep); font: 600 15px/1.3 var(--sans); letter-spacing: -0.012em; color: var(--c-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* What this transcript cost the wallet: a fact beside the title, read, not pressed. */
#content #trp .trp-cost { flex: none; font: 500 12.5px/1 var(--sans); color: var(--c-ink-2); white-space: nowrap; }
#content #trp .trp-cost[hidden] { display: none; }
#content #trp .trp-acts { flex: none; display: flex; align-items: center; gap: 2px; }
#content #trp .trp-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  color: var(--c-ink-2); }
#content #trp .trp-icon svg { width: 17px; height: 17px; }
#content #trp .trp-icon:hover:not(:disabled) { background: var(--ui-fill-2); color: var(--c-ink); }
#content #trp .trp-export { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 7px 10px 7px 12px;
  background: var(--ui-fill-2); font: 500 12.5px/1 var(--sans); color: var(--c-ink); }
#content #trp .trp-export:hover, #content #trp .trp-export[aria-expanded="true"] { background: var(--ui-fill-3); }
#content #trp .trp-export svg { width: 14px; height: 14px; }

#content #trp .trp-note { flex: none; margin: 0 18px 10px; font-size: 12.5px; line-height: 1.5; color: var(--c-open-ink); }
#content #trp .trp-note[hidden] { display: none; }

/* A draft: the engine's single pass while it finishes the merge. Words and
 * times only (no speakers to show or edit yet), marked with the half-ring
 * the card uses for "still working". */
#content #trp.is-draft .trp-note { display: flex; align-items: center; gap: 8px; color: var(--c-ink-2); }
#content #trp.is-draft .trp-note::before { content: ""; flex: none; box-sizing: border-box; width: 10px; height: 10px;
  border-radius: 50%; border: 1.5px solid var(--c-ink); background: linear-gradient(90deg, var(--c-ink) 50%, transparent 50%); }
#content #trp.is-draft .trp-speakers, #content #trp.is-draft .trs-av, #content #trp.is-draft .trs-who,
#content #trp.is-draft .trp-keysedit { display: none; }
#content #trp.is-draft .trp-body { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "list"; }
#content #trp.is-draft .trs { grid-template-columns: minmax(0, 1fr); }
#content #trp.is-draft .trs-text { color: var(--c-ink-2); }
#content #trp.is-draft .trs.on .trs-text { color: var(--c-ink); }

#content #trp .trp-search { flex: none; display: flex; align-items: center; gap: 6px; margin: 0 14px 10px;
  padding: 3px 4px 3px 10px; border-radius: 10px; background: var(--ui-fill); }
#content #trp .trp-search[hidden] { display: none; }
#content #trp .trp-search > svg { flex: none; width: 15px; height: 15px; color: var(--c-ink-3); }
#content #trp .trp-search input { flex: 1 1 auto; min-width: 0; padding: 6px 4px; border: 0; background: none;
  box-shadow: none; font-size: 14px; }
#content #trp .trp-search input:focus { box-shadow: none; outline: none; }
#content #trp .trp-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
#content #trp .trp-count { flex: none; font-size: 12px; color: var(--c-ink-3); padding: 0 4px; }
#content #trp .trp-search .trp-icon { width: 28px; height: 28px; }
#content #trp .trp-search .trp-icon svg { width: 15px; height: 15px; }

/* ── the deck: transport, then the track view ──────────────────────────── */
#content #trp .trp-deck { flex: none; border-top: 1px solid var(--ui-sep); border-bottom: 1px solid var(--ui-sep);
  background: var(--c-paper); }
#content #trp .trp-transport { display: flex; align-items: center; gap: 6px; padding: 10px 14px 8px; }
#content #trp .trp-play { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--c-line-strong);
  background: var(--c-surface); color: var(--c-ink); display: flex; align-items: center; justify-content: center; }
#content #trp .trp-play.on { border-color: var(--c-ink); background: var(--c-ink); color: var(--c-paper); }
#content #trp .trp-skip { position: relative; width: 32px; height: 32px; display: inline-flex; align-items: center;
  justify-content: center; color: var(--c-ink-2); border-radius: 50%; }
#content #trp .trp-skip:hover:not(:disabled) { background: var(--ui-fill-2); color: var(--c-ink); }
#content #trp .trp-skip svg { width: 22px; height: 22px; }
#content #trp .trp-skip span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  padding-top: 1px; font: 700 8.5px/1 var(--sans); }
#content #trp .trp-clock { margin-left: 6px; font: 500 13px/1 var(--sans); color: var(--c-ink-3); white-space: nowrap; }
#content #trp .trp-clock b { font-weight: 600; color: var(--c-ink); }
#content #trp .trp-gap { flex: 1 1 auto; }
#content #trp .trp-ratewrap select { min-height: 30px; min-width: 74px; padding: 5px 26px 5px 10px; font-size: 12.5px;
  background-position: right 9px center; }
#content #trp .trp-zoom { display: inline-flex; align-items: center; gap: 0; margin-left: 4px; padding: 2px;
  border-radius: 9px; background: var(--ui-fill); }
#content #trp .trp-zoom .trp-icon { width: 26px; height: 26px; border-radius: 7px; }
#content #trp .trp-zoom .trp-icon svg { width: 14px; height: 14px; }
#content #trp .trp-zoom .trp-icon:hover:not(:disabled) { background: var(--c-surface); box-shadow: var(--ui-raise); }
#content #trp .trp-zoomlabel { min-width: 34px; text-align: center; font: 500 11.5px/1 var(--sans); color: var(--c-ink-2); }

#content #trp .trp-noaudio { display: flex; align-items: center; gap: 12px; margin: 0 14px 10px; padding: 8px 8px 8px 12px;
  border-radius: 10px; background: var(--ui-fill-2); font-size: 12.5px; line-height: 1.45; color: var(--c-ink-2); }
#content #trp .trp-noaudio[hidden] { display: none; }
#content #trp .trp-noaudio span { flex: 1 1 auto; }
#content #trp .trp-attach { flex: none; padding: 7px 12px; border-radius: var(--ui-r-control); background: var(--c-surface);
  box-shadow: var(--ui-raise); font: 500 12.5px/1 var(--sans); color: var(--c-ink); cursor: pointer; white-space: nowrap; }
#content #trp .trp-attach:focus-within { outline: 2px solid var(--c-ink); outline-offset: 2px; }

/* The track view. Labels in a fixed column; the canvas scrolls under them
 * when zoomed. Heights are shared through --lane-h so the two line up. */
#content #trp .trp-timeline { display: grid; grid-template-columns: var(--lab-w) minmax(0, 1fr); padding: 0 14px 12px; }
#content #trp .trp-lanelabels { min-width: 0; padding-right: 10px; }
#content #trp .trp-rulerpad { height: var(--ruler-h); }
#content #trp .trp-lanelabel { width: 100%; height: var(--lane-h); margin-bottom: 4px; display: flex; align-items: center;
  gap: 7px; font: 500 12px/1 var(--sans); color: var(--c-ink-2); text-align: left; cursor: pointer; }
#content #trp .trp-lanelabel:hover { color: var(--c-ink); }
#content #trp .trp-lanename { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#content #trp .trp-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--spk); }
#content #trp .trp-track { position: relative; min-width: 0; overflow-x: auto; overflow-y: hidden; cursor: pointer;
  touch-action: manipulation; border-radius: 8px; background: var(--c-surface); box-shadow: inset 0 0 0 1px var(--ui-sep);
  scrollbar-width: thin; scrollbar-color: var(--c-line-strong) transparent; user-select: none; -webkit-user-select: none; }
#content #trp .trp-track:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 2px; }
#content #trp .trp-canvas { position: relative; min-width: 100%; }
#content #trp .trp-ruler { position: relative; height: var(--ruler-h); border-bottom: 1px solid var(--ui-sep); }
#content #trp .trp-tick { position: absolute; top: 0; bottom: 0; padding: 4px 0 0 4px; border-left: 1px solid var(--ui-sep);
  font: 500 10px/1 var(--sans); color: var(--c-ink-3); white-space: nowrap; }
#content #trp .trp-lanes { padding: 4px 0 0; }
#content #trp .trp-lane { position: relative; height: var(--lane-h); margin-bottom: 4px; }
#content #trp .trp-lane::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px dashed var(--ui-sep); }
#content #trp .trb { position: absolute; top: 3px; bottom: 3px; border-radius: 3px; background: var(--spk); opacity: 0.72; }
#content #trp .trb.on { opacity: 1; box-shadow: 0 0 0 1.5px var(--c-surface), 0 0 0 3px var(--c-ink); z-index: 1; }
/* A segment with a search match carries a small amber diamond — a shape,
 * the console's "look here", not a second colour on the block. */
#content #trp .trb.hit::after { content: ""; position: absolute; left: 50%; top: -4px; width: 6px; height: 6px;
  border-radius: 1px; background: var(--c-open); transform: translateX(-50%) rotate(45deg); }
#content #trp .trp-playhead { position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--c-ink);
  pointer-events: none; z-index: 2; will-change: transform; }
#content #trp .trp-playhead::before { content: ""; position: absolute; top: 0; left: -4px; width: 10px; height: 7px;
  background: var(--c-ink); clip-path: polygon(0 0, 100% 0, 50% 100%); }

/* ── the transcript and the speakers ───────────────────────────────────── */
#content #trp .trp-body { position: relative; flex: 1 1 auto; min-height: 0; display: grid;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "spk" "list"; }
@container trp (min-width: 860px) {
  #content #trp .trp-body { grid-template-columns: minmax(0, 1fr) 236px; grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "list spk"; }
}
#content #trp .trp-list { grid-area: list; min-height: 0; overflow-y: auto; padding: 8px 10px 28px;
  scrollbar-width: thin; scrollbar-color: var(--c-line-strong) transparent; outline: none; }
#content #trp .trp-empty { margin: 32px 16px; color: var(--c-ink-3); font-size: 13px; text-align: center; }

#content #trp .trs { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 0 12px;
  padding: 10px 10px 10px 12px; border-radius: 12px; cursor: pointer; }
#content #trp .trs::before { content: ""; position: absolute; left: 3px; top: 12px; bottom: 12px; width: 3px;
  border-radius: 2px; background: transparent; }
#content #trp .trs:hover { background: var(--ui-fill-2); }
/* Where the audio is: a fill AND the speaker's rule down the left. */
#content #trp .trs.on { background: var(--c-sunk); }
#content #trp .trs.on::before { background: var(--spk); }
#content #trp .trs.editing { background: var(--c-sunk); cursor: default; }
#content #trp .trp-av { flex: none; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--spk); color: var(--spk-on); font: 600 11px/1 var(--sans); letter-spacing: 0; }
#content #trp .trs-av:hover { box-shadow: 0 0 0 2px var(--c-surface), 0 0 0 3.5px var(--c-ink-4); }
#content #trp .trs-main { min-width: 0; }
#content #trp .trs-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; min-height: 18px; }
#content #trp .trs-who { font: 600 13px/1.3 var(--sans); color: var(--c-ink); letter-spacing: -0.006em; }
#content #trp .trs-who:hover { text-decoration: underline; text-decoration-style: dotted; text-underline-offset: 3px; }
#content #trp .trs-time { font: 500 11.5px/1.3 var(--sans); font-variant-numeric: tabular-nums; color: var(--c-ink-3); border-radius: 4px; }
#content #trp .trs-time:hover { color: var(--c-ink); }
#content #trp .trs-edited { font-size: 11px; color: var(--c-ink-3); }
#content #trp .trs-edited::before { content: "● "; font-size: 7px; vertical-align: 1px; }
#content #trp .trs-text { margin-top: 3px; font-size: 15px; line-height: 1.7; color: var(--c-ink); white-space: pre-wrap;
  overflow-wrap: anywhere; border-radius: 6px; outline: none; }
#content #trp .trs-text mark { padding: 0 1px; border-radius: 2px; background: var(--c-open-bg); color: inherit;
  box-shadow: inset 0 -2px var(--c-open-line); }
#content #trp .trs-text mark.cur { background: var(--c-open-on-dark); box-shadow: 0 0 0 1.5px var(--c-open); }
#content #trp .trs.editing .trs-text { margin: 5px -9px 0; padding: 6px 8px; background: var(--c-surface); cursor: text;
  box-shadow: 0 0 0 1px var(--ui-edge), var(--ui-ring); }
#content #trp .trs-acts { display: flex; align-items: flex-start; gap: 4px; opacity: 0; transition: opacity 120ms var(--ease-out); }
#content #trp .trs:hover .trs-acts, #content #trp .trs:focus-within .trs-acts { opacity: 1; }
#content #trp .trs.editing .trs-acts { display: none; }
#content #trp .trs-act { padding: 5px 9px; border-radius: 7px; background: var(--ui-fill-2); font: 500 12px/1 var(--sans);
  color: var(--c-ink-2); white-space: nowrap; }
#content #trp .trs-act:hover:not(:disabled) { background: var(--ui-fill-3); color: var(--c-ink); }
#content #trp .trs-editbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
#content #trp .trs-edithint { flex: 1 1 220px; font-size: 11.5px; color: var(--c-ink-3); }
#content #trp .trs-editbar button { padding: 7px 12px; font: 600 12.5px/1 var(--sans); background: var(--c-ink); color: var(--c-paper); }
#content #trp .trs-editbar button.ghost { background: var(--ui-fill-2); color: var(--c-ink); font-weight: 500; }

/* The chat idiom, as in the call player: back to where the audio is. */
#content #trp .trp-follow { position: sticky; bottom: 12px; z-index: 3; display: block; width: fit-content; margin: 12px auto 0;
  padding: 7px 12px; border: 1px solid var(--c-line-strong); border-radius: var(--r-sm); background: var(--c-surface);
  font: 500 12px/1 var(--sans); color: var(--c-ink-2); }
#content #trp .trp-follow[hidden] { display: none; }
#content #trp .trp-follow:hover { color: var(--c-ink); border-color: var(--c-ink-4); }

#content #trp .trp-speakers { grid-area: spk; min-width: 0; display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid var(--ui-sep); overflow-x: auto; scrollbar-width: none; }
#content #trp .trp-speakers h3 { flex: none; margin: 0; font: 600 12px/1 var(--sans); color: var(--c-ink-3); letter-spacing: 0; }
#content #trp .trp-spklist { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; }
#content #trp .trp-spk { display: flex; align-items: center; gap: 8px; padding: 3px 12px 3px 3px; border-radius: 999px;
  background: var(--ui-fill-2); color: var(--c-ink); text-align: left; white-space: nowrap; }
#content #trp .trp-spk:hover, #content #trp .trp-spk[aria-expanded="true"] { background: var(--ui-fill-3); }
#content #trp .trp-spk .trp-av { width: 24px; height: 24px; font-size: 10px; }
#content #trp .trp-spkwords { display: flex; flex-direction: column; min-width: 0; }
#content #trp .trp-spkname { font: 500 13px/1.25 var(--sans); overflow: hidden; text-overflow: ellipsis; }
#content #trp .trp-spkmeta { display: none; font-size: 11.5px; line-height: 1.3; color: var(--c-ink-3); }
@container trp (min-width: 860px) {
  #content #trp .trp-speakers { flex-direction: column; align-items: stretch; gap: 8px; padding: 14px 12px;
    border-bottom: 0; border-left: 1px solid var(--ui-sep); overflow: auto; }
  #content #trp .trp-speakers h3 { padding: 0 6px; }
  #content #trp .trp-spklist { flex-direction: column; gap: 2px; }
  #content #trp .trp-spk { width: 100%; gap: 10px; padding: 7px 8px; border-radius: 10px; background: none; white-space: normal; }
  #content #trp .trp-spk .trp-av { width: 28px; height: 28px; font-size: 11px; }
  #content #trp .trp-spkname { white-space: nowrap; }
  #content #trp .trp-spkmeta { display: block; }
}

#content #trp .trp-wait { grid-area: list; align-self: center; padding: 48px 24px; text-align: center; }
#content #trp .trp-wait[hidden] { display: none; }
#content #trp .trp-waithead { margin: 0 0 6px; font: 600 15px/1.4 var(--sans); color: var(--c-ink); }
#content #trp .trp-waithead.mark-bad { color: var(--c-alarm-ink); }
#content #trp.is-waiting .trp-deck, #content #trp.is-waiting .trp-speakers, #content #trp.is-waiting .trp-list,
#content #trp.is-waiting .trp-keys, #content #trp.is-waiting .trp-acts, #content #trp.is-waiting .trp-search,
#content #trp.is-waiting .trp-note { display: none; }

#content #trp .trp-keys { flex: none; padding: 8px 16px 9px; border-top: 1px solid var(--ui-sep);
  font-size: 11px; color: var(--c-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── the floating surface ──────────────────────────────────────────────── */
#content #trp .trp-pop { position: absolute; z-index: 30; min-width: 220px; max-width: min(300px, calc(100% - 16px));
  padding: 6px; border-radius: 12px; background: var(--c-surface); box-shadow: var(--ui-float);
  animation: trp-pop-in 140ms var(--ease-out); transform-origin: top left; }
#content #trp .trp-pop[hidden] { display: none; }
@keyframes trp-pop-in { from { opacity: 0; transform: scale(0.98) translateY(-2px); } }
#content #trp .trp-pop hr { margin: 5px 6px; border: 0; border-top: 1px solid var(--ui-sep); }
#content #trp .trp-pophead { margin: 0; padding: 6px 10px 4px; font: 600 11.5px/1.2 var(--sans); color: var(--c-ink-3); }
#content #trp .trp-mi { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 7px;
  font: 400 13px/1.25 var(--sans); color: var(--c-ink); text-align: left; }
#content #trp .trp-mi:hover:not(:disabled), #content #trp .trp-mi:focus-visible { background: var(--ui-fill-2); outline: none; }
#content #trp .trp-mitext { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#content #trp .trp-misub { margin-left: auto; padding-left: 12px; font-size: 11.5px; color: var(--c-ink-3); white-space: nowrap; }
#content #trp .trp-mi[aria-checked="true"]::after { content: "✓"; margin-left: auto; font-weight: 600; }
#content #trp .trp-pop.is-editor { width: 280px; padding: 14px; }
#content #trp .trp-spked label, #content #trp .trp-newspk label, #content #trp .trp-fieldlab {
  display: flex; flex-direction: column; gap: 6px; font: 600 12px/1.2 var(--sans); color: var(--c-ink-3); }
#content #trp .trp-spked input, #content #trp .trp-newspk input { width: 100%; font-size: 14px; color: var(--c-ink); }
#content #trp .trp-fieldlab { margin-top: 14px; }
#content #trp .trp-swatches { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
#content #trp .trp-swatch { width: 24px; height: 24px; border-radius: 50%; background: var(--spk);
  box-shadow: inset 0 0 0 1px var(--ui-sep); }
#content #trp .trp-swatch[aria-checked="true"] { box-shadow: 0 0 0 2px var(--c-surface), 0 0 0 3.5px var(--c-ink); }
#content #trp .trp-merge { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-top: 14px;
  padding-top: 12px; border-top: 1px solid var(--ui-sep); }
#content #trp .trp-merge label { flex: 1 1 140px; }
#content #trp .trp-merge select { width: 100%; }
#content #trp .trp-merge button { padding: 8px 12px; background: var(--ui-fill-2); font: 500 12.5px/1 var(--sans); color: var(--c-ink); }
#content #trp .trp-merge button:hover { background: var(--ui-fill-3); }
#content #trp .trp-mergehint { flex-basis: 100%; margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--c-ink-3); }
#content #trp .trp-popfoot { display: flex; justify-content: flex-end; margin-top: 14px; }
#content #trp .trp-popfoot button, #content #trp .trp-newspk button[type="submit"] { padding: 8px 16px;
  background: var(--c-ink); color: var(--c-paper); font: 600 12.5px/1 var(--sans); }
#content #trp .trp-newspk { display: flex; align-items: flex-end; gap: 8px; padding: 8px; }
#content #trp .trp-newspk label { flex: 1 1 auto; }

/* ── narrower windows ──────────────────────────────────────────────────── */
@container trp (max-width: 620px) {
  #content #trp { --lab-w: 92px; }
  #content #trp .trp-zoomlabel { display: none; }
  #content #trp .trp-head h2 { font-size: 14px; }
}
@media (hover: none) {
  #content #trp .trs-acts { opacity: 1; }
  #content #trp .trp-keys, #content #trp .trs-edithint { display: none; }
}

/* ── phone ───────────────────────────────────────────────────────────────
 * The page's own scrolling middle carries the transcript; the deck sticks to
 * its top, so play, the clock and the lanes stay under the thumb while the
 * words scroll beneath. Lanes keep a dot instead of a name. */
@media (max-width: 760px) {
  #content #trcard .tr-fields { grid-template-columns: 1fr; }
  #content #trcard .tr-drop { padding: 16px 14px; }
  #content #trcard .tr-fields input { font-size: 16px; }
  /* A row's buttons drop under its words rather than squeezing them. */
  #content #trcard .tr-items { grid-template-columns: 10px minmax(0, 1fr); }
  #content #trcard .tr-itemacts { grid-column: 2; justify-content: flex-start; margin-top: 8px; }
  #content #trcard .tr-itemacts:empty { display: none; }

  #content #trp { --lab-w: 22px; --lane-h: 14px; --ruler-h: 16px;
    height: auto; min-height: 0; overflow: visible; border-radius: 0; background: none; box-shadow: none; }
  #content #trp .trp-head { padding: 0 0 8px; margin-left: -6px; }
  #content #trp .trp-head h2 { padding-left: 8px; }
  #content #trp .trp-back span { display: none; }
  #content #trp .trp-deck { position: sticky; top: -14px; z-index: 6; margin: 0 calc(-1 * var(--pad-x, 14px));
    padding-top: 2px; border-top: 0; background: var(--c-paper); }
  /* One row under the thumb: the timeline is the scrubber here, so the two
     skip buttons give their room to the clock and the speed. */
  #content #trp .trp-transport { gap: 6px; padding: 6px var(--pad-x, 14px) 8px; }
  #content #trp .trp-skip { display: none; }
  #content #trp .trp-clock { margin-left: 4px; font-size: 12.5px; }
  #content #trp .trp-ratewrap select { min-width: 64px; padding-right: 22px; font-size: 16px; }
  #content #trp .trp-zoomlabel { display: none; }
  #content #trp .trp-timeline { padding: 0 var(--pad-x, 14px) 10px; }
  #content #trp .trp-lanelabels { padding-right: 8px; }
  #content #trp .trp-lanename { display: none; }
  #content #trp .trp-noaudio { margin: 0 var(--pad-x, 14px) 10px; flex-wrap: wrap; }
  #content #trp .trp-search { margin: 0 0 10px; }
  #content #trp .trp-search input { font-size: 16px; }
  #content #trp .trp-body { display: block; }
  #content #trp .trp-speakers { margin: 0 calc(-1 * var(--pad-x, 14px)); padding: 10px var(--pad-x, 14px); }
  #content #trp .trp-list { overflow: visible; padding: 6px 0 20px; margin: 0 -8px; }
  #content #trp .trs { grid-template-columns: 28px minmax(0, 1fr); padding: 10px 8px 10px 10px; }
  #content #trp .trs-acts { grid-column: 2; display: none; margin-top: 8px; }
  #content #trp .trs.on .trs-acts, #content #trp .trs:focus-within .trs-acts { display: flex; opacity: 1; }
  #content #trp .trs.editing .trs-acts { display: none; }
  #content #trp .trs-text { font-size: 16px; }
  #content #trp .trs.editing .trs-text { margin: 5px 0 0; }
  #content #trp .trs-editbar { justify-content: flex-end; }
  #content #trp .trp-keys { display: none; }
  #content #trp .trp-pop { position: absolute; }
}

@media (prefers-reduced-motion: reduce) {
  #content #trcard .tr-drop, #content #trp .trs-acts, #content #trcard .tr-bar > i { transition: none; }
  #content #trcard .tr-bar.is-long > i { animation: none; }
  #content #trp .trp-pop { animation: none; }
}