/* Voice. Every class here starts with vo.
   The pipeline card owns the top: what Claude is given, job by job. Below it the
   voice file and the skills read as documents, the checks done in code sit after
   them, and the test bench closes the loop. On a very wide screen the bench moves
   into a rail beside the files, so an edit and its test are side by side. */

.vo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; font-variant-numeric: tabular-nums lining-nums; }
.vo .section { margin-top: 0; }
.vo-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.vo-col { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; min-width: 0; }
@media (min-width: 1900px) {
  .vo-body { grid-template-columns: minmax(0, 1fr) 460px; }
  .vo-body > .vo-bench { position: sticky; top: 76px; max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px); overflow-y: auto; overscroll-behavior: contain; }
}

/* Section heads: title and one line under it, the action on the right. */
.vo .vo-head { align-items: flex-start; }
.vo-stack { display: grid; gap: 4px; min-width: 0; max-width: 72ch; }
.vo-stack .sub { font-size: 15px; }
/* Jump targets are not controls, so they take focus without a ring. */
.vo [tabindex="-1"]:focus { outline: none; }

/* ---------- Notices ---------- */
.vo-notes { display: grid; gap: 10px; }
.vo-note { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px 10px; padding: 12px 14px; border-radius: var(--r-md); background: var(--sunken); color: var(--ink); }
.vo-note[hidden] { display: none; }
.vo-note > .ic { flex: none; margin-top: 2px; color: var(--ink-3); }
.vo-note > span, .vo-note > p, .vo-note-body { flex: 1 1 240px; min-width: 0; }
.vo-note.is-warn { background: var(--amber-wash); }
.vo-note.is-warn > .ic { color: var(--amber-ink); }
.vo-note.is-ok { background: var(--green-wash); }
.vo-note.is-ok > .ic { color: var(--green-ink); }
.vo-note.is-info { background: var(--surface); box-shadow: var(--elev-1); }
.vo-note-body { display: grid; gap: 2px; }
.vo-note-t { font-weight: 600; }
.vo-note .vo-note-actions { margin: 6px 0 -4px -10px; }
.vo-saved { align-items: center; }
.vo-saved > .ic { margin-top: 0; }
.vo-saved .btn { flex: none; }

.vo-state { display: grid; }
.vo-loading { display: flex; align-items: center; gap: 10px; color: var(--ink-2); min-height: 40px; }
.vo-loading .spin { display: inline-grid; color: var(--ink-3); }

/* ---------- 1. What Claude is given ---------- */
.vo-hero { container-type: inline-size; }
.vo-claim { display: flex; align-items: flex-start; gap: 9px; width: fit-content; max-width: 100%; margin-bottom: 8px; padding: 10px 14px; border-radius: 10px; background: var(--green-wash); color: var(--ink); font-weight: 500; }
.vo-claim .ic { flex: none; margin-top: 2px; color: var(--green-ink); }
.vo-claim.is-warn { background: var(--amber-wash); }
.vo-claim.is-warn .ic { color: var(--amber-ink); }
.vo-jobs > li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 16px 0; border-top: var(--hair) solid var(--line-strong); }
.vo-jobs > li:first-child { border-top: 0; }
.vo-jobs > li:last-child { padding-bottom: 0; }
@container (min-width: 760px) {
  .vo-jobs > li { grid-template-columns: 210px minmax(0, 1fr); align-items: center; gap: 20px; }
}
.vo-job-name { font: 600 15px/1.35 var(--font); letter-spacing: -0.005em; }
.vo-chain { display: flex; flex-wrap: wrap; align-items: center; row-gap: 8px; min-width: 0; }
/* An arrow always leads its piece, so a line never ends on an arrow. */
.vo-chain > li { display: inline-flex; align-items: center; }
.vo-arrow { display: inline-grid; place-items: center; width: 28px; color: var(--ink-3); }
.vo-chip {
  appearance: none; border: 0; margin: 0; cursor: pointer; display: inline-flex; align-items: center;
  height: 32px; padding: 0 12px; border-radius: 8px; background: var(--surface); color: var(--ink);
  box-shadow: var(--ring); font: 500 14px/1 var(--font); white-space: nowrap;
  transition: background-color var(--duration-quick) var(--ease-out), box-shadow var(--duration-quick) var(--ease-out), color var(--duration-quick) var(--ease-out), transform var(--duration-micro) var(--ease-out);
}
.vo-chip:hover { background: var(--sunken); }
.vo-chip:active { transform: scale(var(--scale-small)); }
/* Shared by every job: the voice file and the humanizer. Same shade in every row. */
.vo-chip.is-shared { background: var(--primary-wash); box-shadow: inset 0 0 0 var(--hair) color-mix(in srgb, var(--primary) 34%, transparent); }
.vo-chip.is-shared:hover { background: color-mix(in srgb, var(--primary-wash) 84%, var(--primary)); }
/* The checks are code, not text Claude reads: a flat piece with no edge. */
.vo-chip.is-code { background: var(--sunken); box-shadow: none; color: var(--ink-2); }
.vo-chip.is-code:hover { color: var(--ink); box-shadow: var(--ring); }
.vo-chip.is-missing { cursor: default; background: var(--red-wash); box-shadow: none; color: var(--ink); }

/* ---------- Documents: the voice file and the skills ---------- */
.vo-voice { container-type: inline-size; }
.vo-read { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; align-items: start; }
@container (min-width: 880px) {
  .vo-read { grid-template-columns: minmax(0, 30.5rem) 232px; justify-content: space-between; }
}
.vo-doc { min-width: 0; max-width: 30.5em; font-size: 16px; line-height: 1.6; color: var(--ink); overflow-wrap: break-word; }
.vo-doc > * + * { margin-top: 0.85em; margin-top: 0.55lh; }
.vo-doc .vo-h1, .vo-doc .vo-h2, .vo-doc .vo-h3 { margin-bottom: 0; }
.vo-doc .vo-h1 { font: 600 22px/1.25 var(--font); letter-spacing: -0.016em; text-wrap: balance; }
.vo-doc .vo-h2 { font: 600 18px/1.3 var(--font); letter-spacing: -0.01em; text-wrap: balance; margin-top: 34px; }
.vo-doc .vo-h3 { font: 600 16px/1.4 var(--font); letter-spacing: -0.005em; margin-top: 26px; }
.vo-doc > .vo-h1 + *, .vo-doc > .vo-h2 + *, .vo-doc > .vo-h3 + * { margin-top: 8px; margin-top: 0.35lh; }
.vo-doc > :first-child { margin-top: 0; }
.vo-doc strong { font-weight: 600; }
.vo-doc ul, .vo-doc ol { padding-left: 1.35em; }
.vo-doc ul { list-style: disc; }
.vo-doc ol { list-style: decimal; }
.vo-doc ul ul { list-style: circle; }
.vo-doc li + li { margin-top: 0.4em; margin-top: 0.3lh; }
.vo-doc li > ul, .vo-doc li > ol { margin-top: 0.4em; margin-top: 0.3lh; }
.vo-doc li::marker { color: var(--ink-3); }
/* Code in the owner's text can be a long path. It wraps instead of pushing the page sideways. */
.vo-doc code { white-space: normal; overflow-wrap: anywhere; padding: 1px 5px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.vo-doc .vo-table { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 0 4px; }
.vo-doc .vo-table:focus-visible { outline-offset: 2px; }
.vo-doc table { font-size: 15px; line-height: 1.45; min-width: 460px; }
.vo-doc th, .vo-doc td { padding: 9px 14px 9px 0; vertical-align: top; }
.vo-doc thead th { white-space: normal; }
.vo-doc tbody td:first-child { white-space: nowrap; }
.vo-doc td code, .vo-doc th code { white-space: nowrap; overflow-wrap: normal; }

/* The voice file's parts, beside it on a wide card. */
.vo-toc { display: none; }
@container (min-width: 880px) {
  .vo-toc { display: block; position: sticky; top: 80px; }
}
.vo-toc-t { font: 600 14px/1.3 var(--font); color: var(--ink-2); padding: 0 0 8px 12px; }
.vo-toc ol { display: grid; gap: 1px; border-left: var(--hair) solid var(--line-strong); }
.vo-toc-link {
  appearance: none; border: 0; background: transparent; cursor: pointer; width: 100%; text-align: left;
  min-height: 32px; padding: 6px 10px 6px 12px; border-radius: 0 8px 8px 0; color: var(--ink-2); font: 400 14px/1.35 var(--font);
  transition: background-color var(--duration-quick) var(--ease-out), color var(--duration-quick) var(--ease-out);
}
.vo-toc-link:hover { background: var(--sunken); color: var(--ink); }

/* ---------- The editor ---------- */
.vo-editor { display: grid; gap: 12px; min-width: 0; }
.vo-ed-field { display: grid; gap: 6px; max-width: 84ch; }
.vo-ed-field .hint { max-width: 72ch; }
.vo-ed-field .vo-note { margin: 4px 0; }
.vo .vo-ed-text { field-sizing: content; min-height: 360px; padding: 14px 16px; font: 400 15px/1.65 var(--mono); tab-size: 2; resize: vertical; }
.vo .vo-ed-text[readonly] { background: var(--sunken); }
/* Pinned under the app header while the text runs long, so Save and any save error stay in view. */
.vo-ed-bar {
  position: sticky; top: 60px; z-index: 5; display: grid; gap: 8px;
  margin: 0 -6px; padding: 10px 6px 12px; background: var(--surface); border-bottom: var(--hair) solid var(--line-strong);
}
.vo-ed-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.vo-ed-status { margin: 0; }
.vo-ed-actions { gap: 8px; margin-left: auto; }
.vo-kbd { color: var(--ink-3); font-size: 14px; }
@media (pointer: coarse) { .vo-kbd { display: none; } }

/* ---------- Skills: a list and the open skill ---------- */
.vo-skills { container-type: inline-size; }
.vo-sk { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.vo-sk.is-split { grid-template-columns: clamp(268px, 30%, 340px) minmax(0, 1fr); margin: 0 -24px -24px; border-top: var(--hair) solid var(--line-strong); }
.vo-sk-list { display: grid; gap: 2px; align-content: start; min-width: 0; }
.vo-sk-li { min-width: 0; }
.vo-sk.is-split .vo-sk-list { padding: 10px; border-right: var(--hair) solid var(--line-strong); }
.vo-sk-item {
  appearance: none; border: 0; margin: 0; width: 100%; cursor: pointer; text-align: left; font: inherit; color: inherit;
  display: grid; gap: 6px; padding: 12px; border-radius: 12px; background: transparent;
  transition: background-color var(--duration-quick) var(--ease-out), box-shadow var(--duration-quick) var(--ease-out);
}
.vo-sk-item:hover { background: var(--sunken); }
.vo-sk-item[aria-pressed="true"] { background: var(--sunken); box-shadow: inset 0 0 0 1px var(--line-strong); }
.vo-sk-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.vo-sk-name { font-weight: 600; }
.vo-sk-top code { font-size: 14px; }
.vo-sk-desc { color: var(--ink-2); font-size: 14px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vo-sk-jobs { display: flex; flex-wrap: wrap; gap: 4px; }
.vo-sk-jobs .tag { height: auto; min-height: 24px; white-space: normal; background: var(--surface); box-shadow: var(--ring); }
.vo-sk-meta { color: var(--ink-3); }
.vo-sk-dirty { justify-self: start; }

.vo-sk-detail { display: grid; gap: 16px; align-content: start; min-width: 0; padding: 22px 24px 24px; }
.vo-sk-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; }
.vo-sk-title { display: grid; gap: 4px; min-width: 0; }
.vo-sk-title h3 { font-size: 20px; line-height: 1.25; letter-spacing: -0.016em; }
.vo-sk-lede { color: var(--ink-2); max-width: 64ch; }
.vo-facts { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 14px; }
.vo-facts > div { display: grid; gap: 1px; min-width: 0; }
.vo-facts dt { color: var(--ink-3); }
.vo-facts dd { color: var(--ink-2); font-weight: 500; }
.vo-sk-detail > .vo-doc { padding-top: 16px; border-top: var(--hair) solid var(--line-strong); }

/* Narrow: each skill opens under its own name. */
.vo-sk.is-stack .vo-sk-list { gap: 0; }
.vo-sk.is-stack .vo-sk-li + .vo-sk-li { border-top: var(--hair) solid var(--line-strong); }
.vo-sk.is-stack .vo-sk-item { margin: 4px -10px; width: calc(100% + 20px); padding: 12px 10px; }
.vo-sk.is-stack .vo-sk-top { padding-right: 32px; position: relative; }
.vo-sk-chev { position: absolute; right: 0; top: 0; display: inline-grid; color: var(--ink-3); transition: transform var(--duration-fast) var(--ease-smooth-out); }
.vo-sk-item[aria-expanded="true"] .vo-sk-chev { transform: rotate(180deg); }
.vo-sk-item[aria-expanded="true"] .vo-sk-desc { display: block; -webkit-line-clamp: unset; overflow: visible; }
.vo-sk.is-stack .vo-sk-detail { padding: 4px 0 20px; }
.vo-sk.is-stack .vo-sk-head { justify-content: flex-start; }

/* ---------- 4. Checks done in code ---------- */
.vo-checks { container-type: inline-size; }
.vo-lede code { white-space: normal; }
.vo-scope { display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--r-md); background: var(--sunken); max-width: 920px; }
.vo-scope > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
@container (min-width: 640px) {
  .vo-scope > div { grid-template-columns: 180px minmax(0, 1fr); gap: 16px; }
}
.vo-scope dt { font-weight: 600; padding-top: 2px; }
.vo-scope dd { display: grid; gap: 6px; color: var(--ink-2); }
.vo-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.vo-tags .tag { background: var(--surface); box-shadow: var(--ring); }
.vo-checks-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 24px; }
@container (min-width: 860px) {
  .vo-checks-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 44px; }
}
.vo-checks-part { display: grid; gap: 10px; align-content: start; min-width: 0; }
.vo-checks-part h3 .count { margin-left: 8px; color: var(--ink-3); font-weight: 500; }
.vo-rules > li { padding: 10px 0; border-top: var(--hair) solid var(--line-strong); max-width: 64ch; }
.vo-rules > li:first-child { border-top: 0; padding-top: 2px; }
.vo-banned { display: flex; flex-wrap: wrap; gap: 6px; }
.vo-banned > li { display: inline-flex; align-items: center; min-height: 28px; padding: 3px 9px; border-radius: 7px; background: var(--sunken); color: var(--ink-2); font-size: 14px; line-height: 1.3; box-shadow: inset 0 0 0 var(--hair) var(--line); }

/* ---------- 5. Test bench ---------- */
.vo-bench { container-type: inline-size; }
.vo-bench-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
@container (min-width: 860px) {
  .vo-bench-grid { grid-template-columns: minmax(0, 1.1fr) minmax(340px, 1fr); gap: 28px; }
  /* The draft stays in view beside a long result. */
  .vo-bench-main { position: sticky; top: 76px; }
}
.vo-bench-main { display: grid; gap: 14px; min-width: 0; align-content: start; }
.vo-bench-draft { display: grid; gap: 6px; }
.vo .vo-bench-text textarea { field-sizing: content; min-height: 220px; padding: 12px 14px; font-size: 16px; line-height: 1.55; }
.vo-countline { display: flex; justify-content: space-between; gap: 12px; color: var(--ink-3); font-size: 14px; }
.vo-bench-count { margin-left: auto; }
.vo-bench-meta { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
.vo-clear[hidden] { display: none; }
@container (max-width: 520px) {
  .vo-bench-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vo-bench-actions .btn { width: 100%; }
}

.vo-bench-side { min-width: 0; }
.vo-panel { display: grid; gap: 16px; align-content: start; min-width: 0; padding: 18px 20px 20px; border-radius: var(--r-md); background: var(--sunken); }
.vo-panel-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; min-height: 28px; }
.vo-panel-head h3 { font-size: 16px; }
.vo-elapsed { color: var(--ink-3); font-size: 14px; }
.vo-panel-lede { color: var(--ink-2); max-width: 52ch; }
.vo-panel .working { background: var(--surface); }
.vo-panel .vo-note { background: var(--amber-wash); }
.vo-panel .vo-note.is-ok { background: var(--green-wash); }
.vo-panel .sc { gap: 14px; }
.vo-panel .sc-grid { grid-template-columns: minmax(0, 1fr); gap: 0; max-width: none; }
.vo-panel .sc-grid li { min-height: 32px; }
.vo-panel .fixes { max-width: none; }
.vo-panel .fixes li { grid-template-columns: minmax(0, 1fr); }
.vo-panel .sc-line .muted { font-size: 14px; }

/* Empty and scoring: 9 empty tracks, the shape the scores will fill. */
.vo .eq.vo-ghost i { height: 100%; background: var(--line-strong); opacity: 0.7; }
.vo .eq.vo-ghost i:hover { opacity: 0.7; }
.vo .vo-ghost-list li { color: var(--ink-2); }
.vo .eq.vo-ghost.is-scan i { background: var(--ink-3); opacity: 1; transform-origin: bottom; animation: vo-scan 1.2s var(--ease-in-out) infinite; animation-delay: calc(var(--i, 0) * 90ms); }
@keyframes vo-scan { 0%, 100% { transform: scaleY(0.22); } 50% { transform: scaleY(1); } }

/* A fresh result settles in once. */
.vo-panel.is-fresh .eq i { animation: eq-up var(--duration-slow) var(--ease-bounce) both; animation-delay: calc(var(--i, 0) * 30ms); }
.vo-panel.is-fresh > * { animation: vo-settle var(--duration-medium) var(--ease-smooth-out) both; animation-delay: 80ms; }
.vo-panel.is-fresh > :nth-child(n + 4) { animation-delay: 160ms; }
@keyframes vo-settle { from { opacity: 0; transform: translateY(var(--distance-micro)); } }

.vo-rw { gap: 12px; }
.vo-rw-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.vo-rw-head h3 { font-size: 16px; }
.vo-rw-score { display: inline-flex; align-items: center; gap: 10px; }
.vo-rw-score .eq { height: 20px; gap: 3px; }
.vo-rw-score .eq i { width: 5px; border-radius: 2px; }
.vo-rw-avg { font: 600 18px/1 var(--font); }
.vo-rw .verdict { background: var(--surface); }
.vo-rw .rewrite-text { max-width: none; }
.vo-rw .vo-note.is-warn { background: var(--surface); }
/* A [NEED: ...] gap: a fact only you know, marked inside the text. */
.vo-need { padding: 1px 3px; border-radius: 4px; background: var(--amber-wash); color: var(--ink); font-weight: 600; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--amber) 55%, transparent); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ---------- Touch and narrow screens ---------- */
@media (pointer: coarse), (max-width: 960px) {
  .vo-chip { height: 44px; padding: 0 14px; }
  .vo-toc-link { min-height: 44px; }
  .vo .vo-ed-text { font-size: 16px; }
  .vo .vo-bench-text textarea { font-size: 16px; }
}
@media (max-width: 720px) {
  /* The editor bar stays pinned on a phone, so it keeps to 2 short rows: the status, then Cancel and Save side by side. */
  .vo-kbd { display: none; }
  .vo-ed-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .vo-ed-status > :nth-child(3) { display: none; }
  .vo-ed-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-left: 0; }
  .vo-ed-actions .btn { width: 100%; }
  .vo .vo-ed-text { min-height: 300px; padding: 12px; }
  .vo-arrow { width: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .vo .eq.vo-ghost.is-scan i { animation: none; transform: scaleY(0.6); }
}