@import url("/basis-flags.css");
/* Basis — Conversation data sample (/conversations).
   Rides the /audio shell stylesheet for tokens, nav, sky, footer. Everything
   here is the conversation card: one per row, the tape with a waveform strand
   per seat, label markers on the strands, the transcript under it. */

:root {
  --cat-flow: #2563eb;
  --cat-topic: #d97706;
  --cat-stance: #db2777;
  --cat-repair: #059669;
  --cat-other: #6b7280;
  --spk-a: #1f8fd8;
  --spk-b: #e05a7a;
  --spk-c: #2fb37f;
  --spk-d: #c99a2e;
  --spk-e: #8b5cf6;
  --spk-f: #f0913f;
  --wave-quiet: rgba(95, 119, 135, 0.28);
  --lane-bg: #f7fafc;
  --cut-hatch: rgba(95, 119, 135, 0.09);
}
:root[data-theme="dark"] {
  --spk-a: #4fb3f0;
  --wave-quiet: rgba(138, 160, 175, 0.26);
  --lane-bg: #0d1a24;
  --cut-hatch: rgba(138, 160, 175, 0.08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --spk-a: #4fb3f0;
    --wave-quiet: rgba(138, 160, 175, 0.26);
    --lane-bg: #0d1a24;
    --cut-hatch: rgba(138, 160, 175, 0.08);
  }
}

/* ---------- Section header ---------- */
.cv-clips-header.clips-header { max-width: none; margin: 34px 0 18px; }
.rank-note { color: var(--ink-soft); }
.cv-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 12px 0 0; font-size: 13.5px; color: var(--muted); }
.cv-legend-item { display: inline-flex; align-items: center; gap: 7px; }
.cv-legend-item i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); display: inline-block; }

/* ---------- The card ---------- */
#samples-mount { display: grid; }
#samples-mount > #samples-skeleton, #samples-list { grid-area: 1 / 1; min-width: 0; align-self: start; }
#samples-list { display: flex; flex-direction: column; gap: 26px; opacity: 0; transition: opacity 320ms ease; }
#samples-mount.is-ready #samples-list { opacity: 1; }
#samples-mount.is-ready #samples-skeleton { opacity: 0; visibility: hidden; pointer-events: none; }
#samples-mount.is-ready #samples-skeleton * { animation: none; }
#samples-list > .cv-card.is-arriving { animation: cv-card-arrive 320ms ease backwards; }
@keyframes cv-card-arrive { from { opacity: 0; } to { opacity: 1; } }
.cv-page-stage { position: relative; min-width: 0; overflow: clip; transition: height 320ms ease; }
.cv-page-stage:focus { outline: none; }
.cv-page-content, .cv-page-skeleton { display: flex; flex-direction: column; gap: 26px; }
.cv-page-content { position: absolute; top: 0; left: 0; right: 0; opacity: 0; transition: opacity 320ms ease; }
.cv-page-skeleton { transition: opacity 320ms ease, visibility 320ms; }
.cv-page-stage.is-ready .cv-page-content { opacity: 1; }
.cv-page-stage.is-ready .cv-page-skeleton { opacity: 0; visibility: hidden; }
.cv-page-stage.is-ready .cv-page-skeleton * { animation: none; }
.cv-page-stage.is-settled { overflow: visible; transition: none; }
.cv-page-stage.is-settled .cv-page-content { position: relative; }
.cv-retry-wrap { overflow-anchor: none; }
.cv-browse { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; color: var(--ink); }
.cv-browse[hidden] { display: none; }
.cv-card {
  border-radius: 22px; background: var(--card);
  box-shadow: 0 1px 2px rgba(20, 60, 90, 0.06), 0 0 0 1px var(--rule);
  padding: 26px 28px 22px; position: relative; container: conversation / inline-size;
  font-family: "Archivo", "Helvetica Neue", sans-serif;
}
.cv-card.is-playing { box-shadow: 0 1px 2px rgba(20, 60, 90, 0.06), 0 0 0 1.5px var(--accent); }
.cv-card.cv-card--label { padding: 0; border-radius: 0; box-shadow: none; background: transparent; }
.cv-card--label .cv-rankline { margin: 0; }
.cv-card--label .cv-lane-body, .cv-card--label .cv-lane-name { height: 48px; }
.cv-card--label .cv-transport { margin-top: 12px; }
.cv-card--label .cv-label-language { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; color: var(--muted); font-size: 13px; }
.cv-card button { font-family: inherit; }
.cv-mix-waveform[hidden], .cv-lane-name[hidden] { display: none; }
.cv-review-span { position: absolute; bottom: 1px; height: 7px; padding: 0; min-width: 3px; border: 0; border-radius: 2px; background: #d99727; opacity: .8; z-index: 4; cursor: pointer; }
.cv-review-span[data-kind="label"] { top: 0; bottom: 0; height: auto; background: rgb(217 151 39 / 18%); border: 1px solid rgb(217 151 39 / 75%); border-bottom-width: 3px; opacity: 1; }
.cv-review-span[data-kind="missing"], .cv-review-span[data-kind="muted"] { background: repeating-linear-gradient(135deg, #cb4d56 0 3px, #e99da5 3px 6px); }
.cv-review-span[data-kind="corrected"] { background: #258dd0; }
.cv-review-span:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.cv-react-card { display: grid; min-width: 0; }
.cv-react-card > div { grid-area: 1 / 1; min-width: 0; align-self: start; }
.cv-react-ready { animation: cv-card-arrive 320ms ease; }
/* Label excerpts have no heading/card chrome. Reserve their actual row count
   immediately, but only show the quiet placeholder when loading takes time. */
.cv-label-skeleton { animation: cv-label-loading 120ms ease 160ms both; }
@keyframes cv-label-loading { from { opacity: 0; } to { opacity: 1; } }
.cv-react-card--label .cv-react-ready { animation: none; }
.cv-label-wave-placeholder { position: absolute; inset: 17px 10px; border-radius: 3px; background: repeating-linear-gradient(90deg, var(--rule) 0 2px, transparent 2px 5px); opacity: .6; }
.cv-skeleton-language { width: 48px; height: 12px; }
.cv-label-skeleton .cv-skeleton-time { width: 64px; }
@media (prefers-reduced-motion: reduce) { .cv-label-skeleton { animation-duration: 0s; } }
.cv-playback-error { color: var(--ink-soft); font-size: 13px; margin: 12px 0 0; }
@media (prefers-reduced-motion: reduce) { .cv-react-ready { animation: none; } }
.cv-loading-status {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
#samples-skeleton { display: flex; flex-direction: column; gap: 26px; transition: opacity 320ms ease, visibility 320ms; }
#samples-skeleton[hidden] { display: none; }
.cv-player-skeleton { pointer-events: none; overflow: hidden; }
.cv-placeholder { background: color-mix(in srgb, var(--muted) 14%, transparent); border-radius: 6px; }
.cv-skeleton-meta { width: 220px; max-width: 55%; height: 12px; margin: 6px 0 20px; }
.cv-skeleton-play { width: 42px; height: 42px; border-radius: 50%; flex: none; }
.cv-skeleton-time { width: 90px; height: 12px; }
#samples-skeleton .cv-skeleton-pagination, .cv-page-skeleton .cv-skeleton-pagination { display: none; }
#samples-skeleton .cv-skeleton-title, .cv-page-skeleton .cv-skeleton-title { min-height: 2.4em; }
.cv-skeleton-title { display: flex; flex-direction: column; justify-content: center; gap: .38em; }
.cv-skeleton-title i { display: block; width: 88%; height: .62em; }
.cv-skeleton-title i:last-child { width: 54%; }
.cv-skeleton-mix { display: flex; align-items: center; gap: 4px; height: 22px; }
.cv-skeleton-mix i { width: 18px; height: 18px; border-radius: 50%; background: var(--rule); opacity: .6; }
.cv-skeleton-ruler { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 7px; box-sizing: border-box; }
.cv-skeleton-ruler i { width: 24px; height: 6px; border-radius: 3px; background: var(--rule); }
.cv-player-skeleton .cv-badge { opacity: .7; }
.cv-skeleton-lane { color: var(--spk); }
.cv-skeleton-wave {
  display: block; width: 100%; height: 100%; opacity: .55; transform-origin: center;
  animation: cv-wave-breathe 1800ms ease-in-out var(--wave-delay, 0s) infinite;
}
.cv-skeleton-lane::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 15%, color-mix(in srgb, var(--spk) 14%, transparent) 50%, transparent 85%);
  transform: translateX(-100%); animation: cv-wave-sweep 2400ms ease-in-out infinite;
}
.cv-skeleton-zoom { display: flex; gap: 5px; align-items: center; }
.cv-skeleton-zoom i { width: 24px; height: 24px; border-radius: 50%; background: var(--rule); opacity: .6; }
.cv-skeleton-zoom i:nth-child(2) { width: 20px; height: 6px; border-radius: 3px; }
.cv-skeleton-pagination.ex-arrows { margin-top: 12px; }
.cv-skeleton-arrow { width: 32px; height: 32px; border-radius: 50%; }
.cv-skeleton-count { width: 34px; height: 8px; }
.audio-conversation-player .cv-skeleton-pagination { display: none; }
.audio-conversation-stage.is-ready > .audio-conversation-skeleton .cv-skeleton-wave,
.audio-conversation-stage.is-ready > .audio-conversation-skeleton .cv-skeleton-lane::after { animation: none; }
.audio-conversation-stage.is-ready .cv-lane-body canvas { animation: cv-wave-settle 680ms cubic-bezier(.22, 1, .36, 1) backwards; }
.audio-conversation-stage.is-ready .cv-lane:nth-child(2) canvas { animation-delay: 60ms; }
.audio-conversation-stage.is-ready .cv-lane:nth-child(3) canvas { animation-delay: 120ms; }
@keyframes cv-wave-breathe { 0%, 100% { opacity: .42; transform: scaleY(.82); } 50% { opacity: .8; transform: scaleY(1); } }
@keyframes cv-wave-sweep { to { transform: translateX(100%); } }
@keyframes cv-wave-settle { from { opacity: .35; transform: scaleY(.78); } to { opacity: 1; transform: scaleY(1); } }

@media (prefers-reduced-motion: reduce) {
  #samples-skeleton, #samples-list, .cv-page-stage, .cv-page-content, .cv-page-skeleton { transition: none; }
  #samples-list > .cv-card.is-arriving, .cv-skeleton-wave, .cv-skeleton-lane::after { animation: none; }
  .cv-skeleton-lane::after { display: none; }
}
/* embedded in a landing box: the box is the surface */
.cv-card.is-embedded, .cv-card.is-embedded.is-playing { box-shadow: none; padding: 0; background: transparent; border-radius: 0; }
.cv-card.is-embedded .cv-title { font-size: clamp(20px, 2vw, 24px); }
.cv-card.is-embedded .cv-summary { font-size: 15px; }
/* On the landing the example is the title, the seats and the tape: no stats
   line above the title and no category chips — the label list is the
   /conversations page's, for people who want the details. */
.cv-card.is-embedded .cv-rankline, .cv-card.is-embedded .cv-cats, .cv-card.is-embedded .cv-label-toggle { display: none; }
/* ⚠️ …and the highlights line and the segment arrows with them. The landing's
   box is a card to LOOK at, not one to work through — it hid the reel these
   replaced for the same reason. The gold bands stay: they are the picture. */
.cv-card.is-embedded .cv-hl, .cv-card.is-embedded .cv-now { display: none; }
/* …and the REEL (2026-09-04). A showcase item carries whatever stretches the
   team picked, so the landing box would grow arrows — and that box is "title,
   seats, tape" by the owner's own trim. It opens on the whole conversation,
   which is what an example is. One line to reverse if the arrows are wanted
   there too. */
.cv-speakers[hidden] { display: none; }
.cv-head { display: flex; align-items: flex-start; gap: 22px; }
.cv-headmain { flex: 1 1 auto; min-width: 0; }
.cv-rankline { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 10px; }
.cv-rank {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 4px 10px; border-radius: 999px; background: var(--ink); color: var(--on-ink);
  font-family: "Archivo", sans-serif; font-variant-numeric: tabular-nums; font-size: 12px; letter-spacing: 0.06em;
}
.cv-rank b { font-size: 13px; }
.cv-rank.is-unranked { background: var(--panel); color: var(--muted); box-shadow: inset 0 0 0 1px var(--rule); }
.cv-meta { color: var(--muted); font-size: 14px; display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cv-meta .dot::before { content: "·"; margin-right: 10px; color: var(--rule); }
.cv-flags { display: inline-flex; align-items: center; gap: 5px; }
.cv-head > .cv-flags { flex: 0 0 auto; padding-top: 3px; }
.cv-country-flag { --flag-width: 25.2px; }
.cv-country-flag[hidden] { display: none; }
.cv-pop-country { display: flex; align-items: center; gap: 8px; }
.cv-title {
  font-family: var(--serif); font-weight: 600; font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.2; letter-spacing: -0.025em; margin: 0 0 10px;
}
.cv-title:first-letter { text-transform: uppercase; }
/* scores block, top right */
.cv-scores { flex: none; display: grid; grid-template-columns: auto 92px auto; gap: 6px 10px; align-items: center; min-width: 210px; padding-top: 4px; }
.cv-scores .k { font-size: 12px; color: var(--muted); letter-spacing: 0.02em; text-align: right; white-space: nowrap; }
.cv-scores .bar { height: 6px; border-radius: 999px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--rule); overflow: hidden; }
.cv-scores .bar i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 999px; transition: width 0.5s ease; }
.cv-scores .bar.is-none i { background: transparent; }
.cv-scores .v { font-family: "Archivo", sans-serif; font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--ink-soft); min-width: 30px; }
.cv-scores .v.is-none { color: var(--muted); font-size: 11.5px; }

.cv-summary { margin: 14px 0 0; font-size: 16px; line-height: 1.55; color: var(--ink-soft); max-width: 900px; }
.cv-summary.is-empty { color: var(--muted); font-style: italic; }

/* ---------- Speakers ---------- */
.cv-speakers { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 12px; }
.cv-spk {
  display: inline-flex; align-items: center; gap: 10px; padding: 6px 8px 6px 6px;
  border-radius: 999px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--rule);
  font-size: 13.5px; transition: opacity 0.2s ease, box-shadow 0.2s ease;
}
.cv-spk.is-muted { opacity: 0.45; }
.cv-spk.is-solo { box-shadow: inset 0 0 0 1.5px var(--spk); }
.cv-spk-dot {
  width: 24px; height: 24px; border-radius: 999px; background: var(--spk); color: #fff;
  display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none;
}
.cv-spk-flag { font-size: 17px; line-height: 1; }
.cv-spk-where { color: var(--ink); }
.cv-spk-demo { color: var(--muted); }
.cv-spk-btns { display: inline-flex; gap: 2px; margin-left: 2px; }
.cv-spk-btn {
  appearance: none; border: 0; background: transparent; color: var(--muted); cursor: var(--basis-cursor-pointer, pointer);
  padding: 0; line-height: 1; flex: none;
  width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center;
  transition: background 0.15s ease, color 0.15s ease;
}
.cv-spk-btn:hover { background: var(--highlight); color: var(--ink); }
.cv-spk-btn.is-on { background: var(--spk); color: #fff; }
.cv-spk-btn svg { display: block; }
.cv-spk-btn:disabled { opacity: 0.35; cursor: var(--basis-cursor-default, default); }
.cv-spk-notrack { font-size: 12px; color: var(--muted); font-style: italic; }

/* ---------- The tape ----------
   A fixed column of seat badges beside a horizontally scrollable strand
   column. Zoom widens `.cv-tape-inner` inside the scroller (1× = fit), so
   markers, cuts and the playhead keep their percentages. */
.cv-tape { min-width: 0; position: relative; user-select: none; display: flex; gap: 8px; }
.cv-tape-names { flex: none; width: 46px; display: flex; flex-direction: column; }
/* Both columns start below the same ruler and keep identical row spacing. */
.cv-tape-names-spacer, .cv-ruler { height: 34px; flex-shrink: 0; }
.cv-lane-name { height: 62px; margin: 4px 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.cv-badge {
  appearance: none; border: 0; padding: 0; line-height: 1; flex: none;
  width: 26px; height: 26px; border-radius: 999px; background: var(--spk); color: #fff;
  display: grid; place-items: center; font-size: 12px; font-weight: 700; cursor: help;
}
.cv-lane-name.is-muted .cv-badge { opacity: 0.35; }
.cv-badge-btns { display: inline-flex; gap: 2px; }
.cv-badge-btn.cv-spk-btn { width: 22px; height: 22px; }
.cv-badge-btn.cv-spk-btn svg { display: block; }
.cv-lane-name--room { height: 22px; }
.cv-badge--room { width: auto; height: auto; background: transparent; color: var(--muted); cursor: var(--basis-cursor-default, default); font-size: 10.5px; font-family: "Archivo", sans-serif; font-variant-numeric: tabular-nums; letter-spacing: 0.08em; font-weight: 400; }
.cv-tape-scroll { flex: 1 1 auto; min-width: 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.cv-tape-inner { position: relative; min-width: 100%; width: 100%; }
/* ⚠️ THE RULER CARRIES TWO ROWS, and it is 34px for that reason (owner,
   2026-09-04: "the number for the highlights covers the timestamp"). The
   highlight flags used to be laid over the SAME 18px band the tick labels sit
   in, so a flag near a tick simply covered it. Nothing above y=0 of
   `.cv-tape-inner` can be seen — the scroller clips it — so the room had to
   be made INSIDE the ruler: flags in the top 15px, times below them. */
.cv-ruler { position: relative; color: var(--muted); font-family: "Archivo", sans-serif; font-variant-numeric: tabular-nums; font-size: 10.5px; }
.cv-tick { position: absolute; top: 17px; transform: translateX(-50%); white-space: nowrap; }
.cv-tick::after { content: ""; position: absolute; left: 50%; top: 14px; width: 1px; height: 4px; background: var(--rule); }
/* Keep endpoint labels inside the tape while their tick marks stay on time. */
.cv-tick:first-child { transform: none; }
.cv-tick:first-child::after { left: 0; }
.cv-tick:last-child:not(:first-child) { transform: translateX(-100%); }
.cv-tick:last-child:not(:first-child)::after { left: 100%; }
.cv-lanes { position: relative; display: flex; flex-direction: column; }
.cv-lane { margin: 4px 0; }
.cv-lane-body { position: relative; height: 62px; border-radius: 10px; background: var(--lane-bg); box-shadow: inset 0 0 0 1px var(--rule); overflow: hidden; cursor: var(--basis-cursor-pointer, pointer); }
.cv-lane.is-muted .cv-lane-body canvas { opacity: 0.35; }
.cv-lane-body canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cv-cut {
  position: absolute; top: 0; bottom: 0; pointer-events: none;
  background: repeating-linear-gradient(135deg, var(--cut-hatch) 0 4px, transparent 4px 9px);
  border-left: 1px dashed var(--rule); border-right: 1px dashed var(--rule);
}
.cv-cut::after {
  content: "cut"; position: absolute; left: 50%; top: 4px; transform: translateX(-50%);
  font-family: "Archivo", sans-serif; font-variant-numeric: tabular-nums; font-size: 9.5px; letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase;
}
.cv-cut.is-narrow::after { display: none; }
.cv-marks { position: absolute; left: 0; right: 0; bottom: 4px; height: 9px; pointer-events: none; }
.cv-mark {
  position: absolute; top: 0; height: 9px; min-width: 4px; border-radius: 3px;
  background: var(--c); opacity: 0.85; pointer-events: auto; cursor: var(--basis-cursor-pointer, pointer);
  transition: transform 0.12s ease, opacity 0.12s ease;
}
.cv-mark:hover, .cv-mark.is-live { transform: scaleY(1.45); opacity: 1; box-shadow: 0 0 0 2px var(--card); z-index: 2; }
.cv-mark.is-low { opacity: 0.5; }
.cv-mark.is-hidden { display: none; }
/* The playhead: above every lane, cut and marker, with its own time badge.
   It used to sit under the lane bodies (drawn first, no z-index) — invisible. */
.cv-playhead {
  position: absolute; top: 0; bottom: 0; left: 0; width: 2px; z-index: 6;
  background: var(--accent); pointer-events: none; transform: translateX(-1px);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
}
:root[data-theme="dark"] .cv-playhead { box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.5); }
.cv-playhead::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 9px solid var(--accent);
}
.cv-playhead-time {
  position: absolute; top: 10px; left: 6px; padding: 2px 6px; border-radius: 6px;
  background: var(--accent); color: #fff; font-family: "Archivo", sans-serif; font-variant-numeric: tabular-nums; font-size: 10.5px; line-height: 1.2; white-space: nowrap;
}
.cv-playhead.is-right .cv-playhead-time { left: auto; right: 6px; }
.cv-lanes .cv-playhead, .cv-tape-inner .cv-playhead { display: none; }
.cv-card.is-started .cv-tape-inner .cv-playhead { display: block; }
/* seat-less labels (nobody attributed) ride a thin room band */
.cv-lane--room .cv-lane-body { height: 22px; background: transparent; box-shadow: none; cursor: var(--basis-cursor-default, default); }
.cv-lane--room .cv-marks { bottom: 6px; }

/* ---------- Transport ---------- */
.cv-transport { display: flex; align-items: center; gap: 14px; margin: 12px 0 0 54px; flex-wrap: wrap; }
.cv-position { display: inline-flex; align-items: center; gap: 12px; flex: none; }
.cv-zoom { display: inline-flex; align-items: center; gap: 4px; }
.cv-zoom-btn, .cv-label-toggle { box-sizing: border-box; height: 28px; }
.cv-zoom-btn {
  appearance: none; border: 0; cursor: var(--basis-cursor-pointer, pointer); width: 28px; border-radius: 999px;
  padding: 0; line-height: 1; flex: none;
  background: var(--panel); color: var(--ink); box-shadow: inset 0 0 0 1px var(--rule); display: grid; place-items: center;
}
.cv-zoom-btn:hover { background: var(--highlight); }
.cv-zoom-btn:disabled { opacity: 0.35; cursor: var(--basis-cursor-default, default); }
.cv-zoom-btn svg { display: block; }
.cv-zoom-label { font-family: "Archivo", sans-serif; font-variant-numeric: tabular-nums; font-size: 11.5px; color: var(--muted); min-width: 26px; text-align: center; cursor: help; }
/* Speed — drawn only when a host passes `rates` (the admin curation editor).
   Sized off the zoom controls beside it, so the transport reads as one row. */
.cv-rate { display: inline-flex; align-items: center; gap: 3px; }
.cv-rate-btn {
  appearance: none; border: 0; cursor: var(--basis-cursor-pointer, pointer); height: 24px; padding: 0 8px; border-radius: 999px;
  background: var(--panel); color: var(--muted); box-shadow: inset 0 0 0 1px var(--rule);
  font-family: "Archivo", sans-serif; font-variant-numeric: tabular-nums; font-size: 11.5px;
}
.cv-rate-btn:hover { color: var(--ink); }
.cv-rate-btn.is-on { background: var(--ink); color: var(--on-ink); box-shadow: none; }
.cv-play {
  appearance: none; border: 0; cursor: var(--basis-cursor-pointer, pointer); width: 42px; height: 42px; border-radius: 999px;
  padding: 0; line-height: 1;
  background: var(--ink); color: var(--on-ink); display: grid; place-items: center; flex: none;
  transition: transform 0.15s ease, background 0.15s ease;
}
.cv-play:hover { transform: scale(1.05); background: var(--accent); color: #fff; }
.cv-play svg { display: block; }
.cv-play .i-pause { display: none; }
.cv-card.is-playing .cv-play .i-pause { display: block; }
.cv-card.is-playing .cv-play .i-play { display: none; }
/* Pressed, and the audio has not caught up yet — the button says it is
   working, so a press that has made no noise yet does not read as a press
   that did nothing (owner, 2026-09-03: pressing again then PAUSED it). */
.cv-card.is-starting .cv-play { animation: cv-play-wait 1s ease-in-out infinite; }
@keyframes cv-play-wait { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { .cv-card.is-starting .cv-play { animation: none; opacity: 0.7; } }
/* The tape is dragged to scrub, so a horizontal drag is ours and a vertical
   one still scrolls the page. */
.cv-lane-body, .cv-ruler { touch-action: pan-y; }
.cv-time { font-family: "Archivo", sans-serif; font-variant-numeric: tabular-nums; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.cv-cats { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.cv-cat {
  appearance: none; cursor: var(--basis-cursor-pointer, pointer); border: 0; display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 10px; border-radius: 999px; background: var(--panel); color: var(--ink-soft);
  box-shadow: inset 0 0 0 1px var(--rule); font-size: 12.5px; transition: opacity 0.15s ease;
}
.cv-cat i { width: 9px; height: 9px; border-radius: 3px; background: var(--c); }
.cv-cat b { font-weight: 500; font-family: "Archivo", sans-serif; font-variant-numeric: tabular-nums; font-size: 11.5px; color: var(--muted); }
.cv-cat.is-off { opacity: 0.4; text-decoration: line-through; }

/* Labels share the tape's existing height and open up from the controls. */
.cv-workspace {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0fr); gap: 0;
  transition: grid-template-columns 360ms cubic-bezier(.22, 1, .36, 1), gap 360ms cubic-bezier(.22, 1, .36, 1);
}
.cv-workspace.has-labels { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
.cv-label-pane { min-width: 0; position: relative; overflow: hidden; opacity: 0; visibility: hidden; transform: translateY(18px); transition: opacity 240ms ease, transform 360ms cubic-bezier(.22, 1, .36, 1), visibility 360ms; }
.cv-workspace.has-labels .cv-label-pane { opacity: 1; visibility: visible; transform: translateY(0); }
.cv-label-list { position: absolute; inset: 0; overflow: auto; overscroll-behavior: contain; padding: 8px; border-radius: 14px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--rule); scrollbar-width: thin; }
.cv-label-toggle { appearance: none; display: inline-flex; align-items: center; justify-content: center; flex: none; gap: 8px; margin-left: auto; padding: 0 12px; border: 1px solid var(--rule); border-radius: 999px; background: transparent; color: var(--ink-soft); font: 500 13px/1.2 "Archivo", sans-serif; cursor: var(--basis-cursor-pointer, pointer); }
.cv-label-toggle:hover, .cv-label-toggle[aria-expanded="true"] { background: var(--panel); color: var(--ink); }
.cv-label-toggle svg { transition: transform 240ms ease; }
.cv-label-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.cv-card button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@container conversation (max-width: 700px) {
  .cv-workspace, .cv-workspace.has-labels { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .cv-label-pane { height: 0; transition: height 360ms cubic-bezier(.22, 1, .36, 1), opacity 240ms ease, transform 360ms ease, visibility 360ms; }
  .cv-workspace.has-labels .cv-label-pane { height: 240px; margin-top: 14px; }
  .cv-card .cv-transport { gap: 8px; margin-left: 0; }
  .cv-position { gap: 8px; }
  .cv-time { font-size: 11.5px; }
  .cv-label-toggle { padding: 0 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .cv-workspace, .cv-label-pane, .cv-label-toggle svg { transition: none; }
}

.cv-lab-row {
  appearance: none; border: 0; background: transparent; width: 100%; text-align: left; font-family: inherit; color: inherit;
  display: grid; grid-template-columns: 44px 12px minmax(0, 1fr); gap: 8px; align-items: baseline;
  padding: 6px 8px; border-radius: 8px; cursor: var(--basis-cursor-pointer, pointer); font-size: 13px;
}
.cv-lab-row:hover, .cv-lab-row.is-live { background: var(--card); }
.cv-lab-row.is-hidden { display: none; }
.cv-lab-t { font-family: "Archivo", sans-serif; font-variant-numeric: tabular-nums; font-size: 11.5px; color: var(--muted); }
.cv-lab-dot { width: 9px; height: 9px; border-radius: 3px; background: var(--c); align-self: center; }
.cv-lab-name { color: var(--ink); }
.cv-lab-sub { color: var(--muted); }
.cv-lab-quote { display: block; color: var(--muted); font-style: italic; font-size: 12.5px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cv-line { display: grid; grid-template-columns: 44px 26px minmax(0, 1fr); gap: 8px; padding: 5px 8px; border-radius: 8px; font-size: 14px; line-height: 1.45; cursor: var(--basis-cursor-pointer, pointer); }
.cv-line:hover, .cv-line.is-live { background: var(--card); }
.cv-line.is-cut { opacity: 0.5; }
.cv-line-t { font-family: "Archivo", sans-serif; font-variant-numeric: tabular-nums; font-size: 11.5px; color: var(--muted); padding-top: 3px; }
.cv-line-spk { width: 22px; height: 22px; border-radius: 999px; background: var(--spk); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 700; }
.cv-line-text { color: var(--ink); }
.cv-line-en { display: block; color: var(--muted); font-style: italic; font-size: 13px; }

/* ---------- Popover ---------- */
.cv-pop {
  position: fixed; z-index: 90; width: max-content; max-width: min(340px, calc(100vw - 16px));
  box-sizing: border-box; padding: 14px 16px; border-radius: 14px;
  /* Popovers mount on body, outside the embedded player's --rule tokens. */
  border: 1px solid color-mix(in srgb, var(--ink) 22%, var(--card));
  background: var(--card); color: var(--ink);
  box-shadow: 0 4px 12px rgba(14, 42, 58, 0.12), 0 16px 40px rgba(14, 42, 58, 0.22);
  font-family: "Archivo", "Helvetica Neue", sans-serif; font-size: 13px; line-height: 1.5; pointer-events: none;
}
.cv-pop--speaker { min-width: min(220px, calc(100vw - 16px)); }
.cv-pop--speaker .cv-pop-name { margin: 0 0 8px; font-size: 15px; font-weight: 600; }
.cv-pop--speaker .cv-pop-row + .cv-pop-row { margin-top: 6px; }
.cv-pop-name { font-size: 15px; margin: 4px 0 2px; }
.cv-pop-name span { color: var(--muted); }
.cv-pop-row { color: var(--ink-soft); }
.cv-pop-quote { margin: 8px 0 0; font-style: italic; color: var(--ink-soft); border-left: 2px solid var(--rule); padding-left: 10px; }
.cv-pop-note { margin: 6px 0 0; color: var(--muted); }
.cv-pop-meta { margin: 8px 0 0; font-family: "Archivo", sans-serif; font-variant-numeric: tabular-nums; font-size: 10.5px; color: var(--muted); letter-spacing: 0.04em; }

/* ---------- Retry / states ---------- */
.cv-retry-wrap { display: flex; justify-content: center; margin: 30px 0 10px; }
.cv-retry-wrap:has(> button[hidden]) { display: none; }
.cv-contact {
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  margin-top: 26px; padding: 34px 36px;
  background: color-mix(in srgb, var(--accent) 5%, var(--card));
}
.cv-contact[hidden] { display: none; }
.cv-contact-copy { max-width: 700px; }
.cv-contact h2 { margin: 0; font-size: clamp(24px, 2.8vw, 34px); font-weight: 600; line-height: 1.15; letter-spacing: -.035em; }
.cv-contact .reach-pill { flex: none; justify-content: center; padding: 13px 22px; font-size: 15px; }
@media (max-width: 640px) {
  .cv-contact { flex-direction: column; align-items: stretch; gap: 22px; padding: 26px 22px; }
}
.cv-retry {
  appearance: none; cursor: var(--basis-cursor-pointer, pointer); border: 0; padding: 12px 22px; border-radius: 999px;
  background: var(--ink); color: var(--on-ink); font-size: 15px; font-weight: 600;
  transition: transform 0.15s ease, background 0.15s ease;
}
.cv-retry:hover { background: var(--accent); color: #fff; transform: translateY(-1px); }
.cv-retry:disabled { opacity: 0.5; cursor: var(--basis-cursor-default, default); transform: none; }
.cv-skel { color: var(--muted); font-size: 14px; padding: 18px 0 6px 46px; }
.cv-error { color: var(--muted); font-size: 14px; margin: 10px 0 0; }
.cv-error button { appearance: none; border: 0; background: var(--panel); color: var(--ink); padding: 4px 10px; border-radius: 999px; cursor: var(--basis-cursor-pointer, pointer); margin-left: 8px; box-shadow: inset 0 0 0 1px var(--rule); }

@media (max-width: 900px) {
  .cv-head { flex-direction: column; gap: 12px; }
  .cv-scores { min-width: 0; }
}
@media (max-width: 640px) {
  .cv-card { padding: 20px 16px 18px; border-radius: 18px; }
  .cv-cats { margin-left: 0; }
}

/* ── the card is its best minutes ─────────────────────────────────────────
   The highlights are the thing you land on and the whole recording is one
   press away (owner, 2026-09-04). The tape above draws them in their own
   scale, so a 35 second stretch is a third of the card rather than 3% of it,
   and what it skips is a marked seam. A card nobody picked stretches for
   draws none of this. */
/* THE HIGHLIGHTS, QUIETLY — a line in the transport, not a banner over the
   tape (owner, 2026-09-04: "more subtle, if anything, even more subtle"). It
   replaced two large pills and a caption; the stretches themselves are the
   loudest thing about them now, and they are a wash. */
.cv-hl { display: inline-flex; align-items: center; gap: 2px; }
.cv-hl-all {
  appearance: none; border: 0; cursor: var(--basis-cursor-pointer, pointer); display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: 999px; background: transparent; color: var(--ink-soft);
  box-shadow: inset 0 0 0 1px var(--rule); font: 500 12.5px/1 inherit;
  transition: color .15s, box-shadow .15s, background-color .15s;
}
.cv-hl-all:hover { color: var(--ink); box-shadow: inset 0 0 0 1px #c8961a; }
.cv-hl-all[aria-pressed="true"] { color: var(--ink); background: #c8961a14; box-shadow: inset 0 0 0 1px #c8961a; }
.cv-hl-star { color: #c8961a; font-size: 11px; line-height: 1; }
.cv-hl-step {
  appearance: none; border: 0; background: none; cursor: var(--basis-cursor-pointer, pointer);
  color: var(--ink-soft); font-size: 13px; line-height: 1; padding: 4px 5px; border-radius: 6px;
}
.cv-hl-step:hover { color: var(--ink); }
/* One part selector, beside the language and duration. */
.cv-header-parts:empty { display: none; }
.cv-header-parts { position: relative; display: inline-flex; align-items: center; z-index: 10; }
.cv-part-trigger {
  appearance: none; display: inline-flex; align-items: center; gap: 7px; max-width: 100%;
  border: 0; border-radius: 8px; padding: 5px 8px; background: transparent; color: var(--muted);
  font: inherit; cursor: var(--basis-cursor-pointer, pointer);
}
.cv-part-trigger:hover, .cv-part-trigger[aria-expanded="true"] { color: var(--ink); background: var(--panel); }
.cv-part-trigger[aria-expanded="true"] > svg { transform: rotate(180deg); }
.cv-part-trigger[aria-disabled="true"] { opacity: .55; cursor: progress; }
.cv-part-menu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 148px; max-height: 240px;
  overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; padding: 6px;
  border: 1px solid var(--rule); border-radius: 14px; background: var(--card); color: var(--ink);
  box-shadow: 0 12px 32px rgba(20, 60, 90, .16); display: grid; gap: 2px;
}
.cv-part-menu[hidden] { display: none; }
.cv-part-option {
  appearance: none; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  width: 100%; min-height: 38px; border: 0; border-radius: 8px; padding: 9px 10px;
  background: transparent; color: var(--ink-soft); font: inherit; text-align: left;
  white-space: nowrap; cursor: var(--basis-cursor-pointer, pointer);
}
.cv-part-option:hover, .cv-part-option:focus-visible { background: var(--panel); color: var(--ink); }
.cv-card .cv-part-option:focus-visible { outline-offset: -2px; }
.cv-part-option[aria-checked="true"] { background: var(--highlight); color: var(--ink); font-weight: 600; }
.cv-part-option > svg { flex: none; color: var(--accent); visibility: hidden; }
.cv-part-option[aria-checked="true"] > svg { visibility: visible; }
.cv-card.is-swapping .cv-tape { opacity: .55; transition: opacity .12s; }
/* what is playing, in one line under the controls */
.cv-now { margin: 10px 0 0; font-size: 12px; color: var(--ink-soft); display: flex; align-items: center; gap: 6px; }
.cv-now.is-live { color: var(--ink); }
/* …and, on an ADMIN surface only, the star for the highlight it names. It is
   drawn only where a host passes `onStar`, so the public page never has one:
   that page is open to anyone and this mark writes to the curation doc. */
.cv-now-star {
  flex: none; border: 0; background: none; padding: 0 1px; line-height: 1;
  font-size: 14px; cursor: var(--basis-cursor-pointer, pointer); color: var(--ink-soft);
  transition: color .15s, transform .1s;
}
.cv-now-star:hover { color: #c8961a; transform: scale(1.12); }
.cv-now-star.is-on { color: #c8961a; }
.cv-now-star[hidden] { display: none; }
/* …and the ✕ beside it — a REQUEST to remove this highlight, never a removal,
   so it is drawn as a mark somebody made rather than as a destructive action. */
.cv-now-cut {
  flex: none; border: 0; background: none; padding: 0 1px; line-height: 1;
  font-size: 12px; cursor: var(--basis-cursor-pointer, pointer); color: var(--ink-soft);
  transition: color .15s, transform .1s;
}
.cv-now-cut:hover { color: #b91c1c; transform: scale(1.12); }
.cv-now-cut.is-on { color: #b91c1c; }
.cv-now-cut[hidden] { display: none; }

/* a collapsed seam: what this view is skipping, and how much of it */
.cv-cut.cv-skip {
  background: none; border-left: 1px dashed var(--rule); border-right: 1px dashed var(--rule);
  display: grid; place-items: center; overflow: hidden;
}
.cv-skip-n {
  font-size: 8.5px; letter-spacing: .02em; color: var(--ink-soft); opacity: .85;
  writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap;
}
/* a chosen stretch, marked where it really sits */
/* ⚠️ A FRAME, NOT A WASH. The fill sits ABOVE the strand canvas, so opacity
   tints the speech bars — the thing being judged — and measured against the
   lane the old 17% came to 1.30:1, where the bars are 6.38:1 and 3:1 is the
   floor for a perceivable element. Even 50% only reaches 2.47:1. So the mark
   is edges: a floor rail in the lane's free bottom 4px (the strand stops at
   y58 and `.cv-marks` ends there), and a post at each end, which is what
   reads when a highlight is 15px wide. The wash stays, faint, to tie the two
   posts together. */
/* ⚠️ A WASH, AND IT IS THE CONTROL. It was a filled band with three inset
   rails; the owner asked for "more subtle, if anything, even more subtle", and
   for pressing it to play that stretch — so the ink came off and the pointer
   went on. Hover is what says it is pressable; there is no other affordance,
   which is the point. */
.cv-gold {
  position: absolute; top: 0; bottom: 0; cursor: var(--basis-cursor-pointer, pointer); border-radius: 3px;
  background: color-mix(in srgb, #c8961a 8%, transparent);
  box-shadow: inset 0 -1.5px 0 0 color-mix(in srgb, #c8961a 55%, transparent);
  transition: background .15s, box-shadow .15s;
}
.cv-gold:hover {
  background: color-mix(in srgb, #c8961a 18%, transparent);
  box-shadow: inset 0 -1.5px 0 0 #c8961a;
}
.cv-gold.is-live {
  background: color-mix(in srgb, #c8961a 20%, transparent);
  box-shadow: inset 0 0 0 1.5px #c8961a;
}
/* while the run is playing them back to back, the set reads as one thing */
.cv-card.is-hlrun .cv-gold { background: color-mix(in srgb, #c8961a 16%, transparent); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .cv-gold,
  :root:not([data-theme="dark"]) .cv-gold.is-live { box-shadow:
    inset 0 -3px 0 0 #a87c10, inset 3px 0 0 0 #a87c10, inset -3px 0 0 0 #a87c10; }
}
/* ── the flags: WHICH highlight, and where ─────────────────────────────────
   ⚠️ THIS ROW NEVER PAINTED A PIXEL. It sat at `top: -21px` inside
   `.cv-tape-scroll { overflow-y: hidden }`, which has no top padding — so it
   was clipped to zero visible height on both surfaces, and since the admin
   opens in whole mode (where `paintNames` returned early) NEITHER surface
   had ever drawn a highlight's number. That is the whole of "it doesn't even
   show where my highlights are".
   Nothing above y=0 of `.cv-tape-inner` can be seen, so the flags live in the
   ruler band — 18px, which is exactly the height this row was already given.
   They carry their own backing so they read over a tick. */
.cv-hlnames { position: absolute; left: 0; right: 0; top: 0; height: 15px; z-index: 7; }
.cv-hlname {
  position: absolute; top: 0; height: 15px; display: flex; align-items: center;
  cursor: var(--basis-cursor-pointer, pointer); overflow: visible; white-space: nowrap;
}
.cv-hlname-n {
  flex: none; display: grid; place-items: center; width: 13px; height: 13px;
  border-radius: 999px; background: color-mix(in srgb, #c8961a 26%, transparent);
  color: var(--ink); font-size: 8.5px; font-weight: 700;
  transition: background .15s, color .15s;
}
.cv-hlname:hover .cv-hlname-n,
.cv-hlname.is-live .cv-hlname-n { background: #c8961a; color: #1a1204; }
/* A STARRED stretch says so on the tape — the whole reason the mark exists is
   to answer "which are the good areas" at a glance, from across the card. The
   number stays: the curation editor's rail lists the same stretches as ①②③
   and the flag is how a reader tells which is which. */
.cv-hlname-star { flex: none; margin-right: 2px; font-size: 9px; color: #c8961a; line-height: 1; }
.cv-hlname.is-starred .cv-hlname-n { background: #c8961a; color: #1a1204; }
/* A stretch somebody has asked to remove says so on the tape too — and a
   STARRED one still reads as starred, because the two are not exclusive and a
   disagreement is exactly what a reviewer needs to see. */
.cv-hlname.is-cut:not(.is-starred) .cv-hlname-star { color: #b91c1c; }
.cv-hlname.is-cut:not(.is-starred) .cv-hlname-n { background: color-mix(in srgb, #b91c1c 30%, transparent); }

/* ── a conversation's other segments, in the corner ────────────────────────
   One card is a CONVERSATION; its segments are slides of it; the highlights
   live inside a segment (owner, 2026-09-04). Three levels, each navigated
   where it belongs. A conversation the gates left in one piece has no arrows
   at all, which is most of the pool. */