/*
 * The video workspace: the title row, Processing, Needs your answer, Review, Approved / Export, Failed.
 * First what every look needs for the new markup (tokens only), then the Stage look matching
 * ui-b-stage proof 13-processing, 14-needs-your-answer, 16-review ... 27-approved-export, 29-ready-to-download, 35-failed
 * (README "Hairline is used only inside the Review workspace").
 */

/* ================================================================ *
 * ALL LOOKS — pieces that only the Stage look shows
 * ================================================================ */
html:not([data-look="stage"]) .ws-next,
html:not([data-look="stage"]) .rv-tabs,
html:not([data-look="stage"]) .rv-kpis,
html:not([data-look="stage"]) .rv-changes { display: none; }

/* ================================================================ *
 * STAGE — title row: back link, title, status chip, the Next line, more
 * ================================================================ */
html[data-look="stage"] body.app .page-head--ws { display: grid; gap: 4px; padding: 0; margin: 0 0 2px; }
html[data-look="stage"] .link--back { justify-self: start; font: 500 13px/1 var(--v-font); color: var(--s-ink-2); padding: 6px 10px 6px 6px; margin-left: -6px; border-radius: 8px; }
html[data-look="stage"] .link--back:hover { background: var(--dk-b-1f1f21a5, rgba(31, 31, 33, .05)); color: var(--s-ink); }
html[data-look="stage"] .ws-title-row { display: flex; align-items: center; flex-wrap: nowrap; gap: 12px; min-width: 0; }
html[data-look="stage"] .ws-title-row h1,
html[data-look="stage"] .ws-h1 { flex: 0 1 auto; min-width: 0; font: 500 18px/1.25 var(--v-font); letter-spacing: -.01em; padding: 0; margin: 0; }
html[data-look="stage"] .ws-title-input { font: 500 18px/1.3 var(--v-font); letter-spacing: -.01em; color: var(--s-ink); padding: 2px 4px; margin-left: -4px; border-radius: 8px; }
html[data-look="stage"] .ws-title-input:hover { background: var(--dk-b-1f1f21a4, rgba(31, 31, 33, .04)); }
html[data-look="stage"] .ws-title-input:focus { background: var(--dk-paper, #fff); box-shadow: inset 0 0 0 1px var(--s-peri), 0 0 0 3px rgba(135, 153, 195, .25); outline: none; }
html[data-look="stage"] .ws-next {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 0 auto; padding: 4px 14px 4px 4px; background: var(--dk-paper, #fff);
  font: 400 13px/1.3 var(--v-font); color: var(--s-ink); white-space: normal; overflow: visible; min-width: 0; flex: 0 1 auto; align-items: flex-start; border-radius: 18px;
  box-shadow: 0 1px 2px rgba(31, 31, 33, .04), 0 4px 12px rgba(31, 31, 33, .05);
}
html[data-look="stage"] .ws-next > span:not(.ws-next-tag) { min-width: 0; padding-top: 3px; overflow-wrap: anywhere; }
html[data-look="stage"] .ws-next-tag { flex: none; padding: 4px 9px; border-radius: 999px; background: var(--s-ink); color: var(--dk-oninv, #fff); font: 500 12px/1 var(--v-font); }
html[data-look="stage"] .ws-title-row .more-btn { margin-left: 0; width: 32px; height: 32px; border-radius: 50%; color: var(--s-ink-2); }
html[data-look="stage"] #wsSteps { margin: 0 0 2px; }
@media (max-width: 1100px) {
  html[data-look="stage"] .ws-title-row { flex-wrap: wrap; }
  html[data-look="stage"] .ws-title-row > .ws-h1 { flex-basis: auto; }
  html[data-look="stage"] .ws-next { margin-left: 0; order: 5; flex-basis: 100%; max-width: max-content; }
}

/* ================================================================ *
 * STAGE — the grids and panels
 * ================================================================ */
html[data-look="stage"] .ws-grid { gap: 14px; }
html[data-look="stage"] .ws-side,
html[data-look="stage"] .ws-main { gap: 14px; }
html[data-look="stage"] .card.rv-panel { padding: 0; border-radius: 18px; }
html[data-look="stage"] .rv-panel > :not(:first-child) { border-top-color: var(--s-hair); }
html[data-look="stage"] .rv-group { gap: 10px; padding: 18px 20px; }
html[data-look="stage"] .rv-group-text h2 { font: 500 15px/1.3 var(--v-font); letter-spacing: -.005em; }
html[data-look="stage"] .rv-group-text p { font: 400 12.5px/1.45 var(--v-font); color: var(--s-ink-2); }
html[data-look="stage"] .card.player { padding: 8px; border-radius: 18px; }
html[data-look="stage"] .player-stage { border-radius: 12px; }
html[data-look="stage"] .player-note,
html[data-look="stage"] .rv-ba-note,
html[data-look="stage"] .rv-keys { font: 400 12px/1.45 var(--v-font); color: var(--s-muted-3); }
html[data-look="stage"] .details > summary { font: 500 13px/1.3 var(--v-font); }
html[data-look="stage"] .status-line { font: 400 13px/1.5 var(--v-font); color: var(--s-ink); }
html[data-look="stage"] .ws-proc-notes .field-note,
html[data-look="stage"] .turnaround { font: 400 12px/1.45 var(--v-font); color: var(--s-ink-2); }

/* Processing: the seven steps as compact rows with a dot, the live one marked. */
html[data-look="stage"] #procSteps .vsteps { gap: 2px; }
html[data-look="stage"] .vstep { font: 400 13px/1.35 var(--v-font); color: var(--s-muted-3); }
html[data-look="stage"] .vstep.is-done { color: var(--s-ink-2); }
html[data-look="stage"] .vstep.is-active,
html[data-look="stage"] .vstep.is-waiting { color: var(--s-ink); font-weight: 500; }
html[data-look="stage"] .vstep-dot { width: 22px; height: 22px; }

/* Needs your answer: an amber eyebrow and choices as calm cards. */
html[data-look="stage"] .rv-group--ask { background: var(--dk-b-fffcf6, #FFFCF6); }
html[data-look="stage"] .rv-group--ask .rv-group-text::before {
  content: "Needs your answer"; display: inline-flex; align-items: center; gap: 6px; justify-self: start; margin-bottom: 4px;
  font: 500 12px/1 var(--v-font); color: var(--dk-tx-st-attn, var(--st-attn)); background: var(--st-attn-bg); border: 1px solid color-mix(in srgb, var(--st-attn-dot) 45%, transparent);
  padding: 5px 9px; border-radius: 999px;
}
html[data-look="stage"] .rv-group--ask .rv-group-text h2 { font: 500 15px/1.35 var(--v-font); }
html[data-look="stage"] .bchoice { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--dk-paper, #fff); box-shadow: inset 0 0 0 1px var(--s-line); cursor: pointer; }
html[data-look="stage"] .bchoice:has(input:checked) { box-shadow: inset 0 0 0 1.5px var(--s-ink); }
html[data-look="stage"] .bchoice input { accent-color: var(--s-ink); margin-top: 2px; }
html[data-look="stage"] .form-actions { gap: 8px; }

/* ================================================================ *
 * STAGE — Review: player, Approve, KPI strip; the rail with its black-thumb switch and hairline transcript
 * ================================================================ */
html[data-look="stage"] .ws-grid.rv-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 25rem); }
html[data-look="stage"] .rv-decide {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 14px 16px; border-radius: 18px; background: var(--dk-paper, #fff);
  box-shadow: 0 1px 2px rgba(31, 31, 33, .04), 0 4px 12px rgba(31, 31, 33, .05);
}
html[data-look="stage"] .rv-decide .btn { height: 36px; }
html[data-look="stage"] .rv-decide .field-note { font: 400 12px/1.45 var(--v-font); color: var(--s-ink-2); }
html[data-look="stage"] .rv-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); row-gap: 12px; margin: 0; padding: 16px 0; border-radius: 18px; background: var(--dk-paper, #fff);
  box-shadow: 0 1px 2px rgba(31, 31, 33, .04), 0 4px 12px rgba(31, 31, 33, .05);
}
html[data-look="stage"] .rv-kpis > div { display: grid; align-content: start; gap: 2px; padding: 0 18px; min-width: 0; }
html[data-look="stage"] .rv-kpis > div + div { border-left: 1px solid var(--s-hair); }
html[data-look="stage"] .rv-kpis dt { font: 400 12px/1.3 var(--v-font); color: var(--s-ink-2); }
html[data-look="stage"] .rv-kpis dd { margin: 0; font: 500 26px/1.2 var(--v-font); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--s-ink); }
html[data-look="stage"] .rv-kpis p { margin: 0; font: 400 12px/1.3 var(--v-font); color: var(--s-muted-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The rail: one region at a time, picked by the black-thumb switch; the note composer stays at its foot. */
html[data-look="stage"] .card.rv-panel.rv-transcript { display: flex; flex-direction: column; max-height: calc(100vh - 150px); position: sticky; top: 76px; overflow: hidden; }
html[data-look="stage"] .rv-transcript > .rv-tgroup { display: contents; }
html[data-look="stage"] .rv-transcript .rv-tabs { order: 0; flex: none; margin: 12px 14px 0; align-self: flex-start; }
html[data-look="stage"] .rv-tabs.seg { background: var(--dk-b-1f1f21a6, rgba(31, 31, 33, .06)); box-shadow: none; padding: 3px; border-radius: 999px; }
html[data-look="stage"] .rv-tabs .seg-opt { height: 28px; padding: 0 14px; font: 500 12.5px/1 var(--v-font); color: var(--s-ink-2); }
html[data-look="stage"] .rv-tabs .seg-opt.is-on { background: var(--s-ink); color: var(--dk-oninv, #fff); box-shadow: none; }
html[data-look="stage"] .rv-transcript .rv-tgroup > .rv-group-head { order: 1; flex: none; padding: 14px 20px 6px; }
html[data-look="stage"] .rv-transcript .tlist { order: 2; flex: 1 1 auto; min-height: 0; overflow-y: auto; margin: 0; padding: 0 12px 8px; max-height: none; }
html[data-look="stage"] .rv-transcript .rv-tgroup > .estate,
html[data-look="stage"] .rv-transcript .rv-tgroup > .card-empty { order: 2; padding: 12px 20px; }
html[data-look="stage"] .rv-transcript > .rv-graphics { order: 3; flex: 1 1 auto; min-height: 0; overflow-y: auto; border-top: 0; }
html[data-look="stage"] .rv-transcript > .rv-changes { order: 4; flex: 1 1 auto; min-height: 0; overflow-y: auto; border-top: 0; }
html[data-look="stage"] .rv-transcript .rv-composer { order: 10; flex: none; margin: 0; padding: 12px 16px 14px; border-top: 1px solid var(--s-hair); background: var(--dk-paper, #fff); }
html[data-look="stage"] .rv-transcript[data-tab="transcript"] > .rv-graphics,
html[data-look="stage"] .rv-transcript[data-tab="transcript"] > .rv-changes,
html[data-look="stage"] .rv-transcript[data-tab="graphics"] .rv-tgroup > .rv-group-head,
html[data-look="stage"] .rv-transcript[data-tab="graphics"] .tlist,
html[data-look="stage"] .rv-transcript[data-tab="graphics"] .rv-tgroup > .estate,
html[data-look="stage"] .rv-transcript[data-tab="graphics"] > .rv-changes,
html[data-look="stage"] .rv-transcript[data-tab="changes"] .rv-tgroup > .rv-group-head,
html[data-look="stage"] .rv-transcript[data-tab="changes"] .tlist,
html[data-look="stage"] .rv-transcript[data-tab="changes"] .rv-tgroup > .estate,
html[data-look="stage"] .rv-transcript[data-tab="changes"] > .rv-graphics { display: none; }

/* Hairline transcript table: tabular timestamps, quiet actions. */
html[data-look="stage"] .tline { border-bottom: 1px solid var(--s-hair); padding: 0; }
html[data-look="stage"] .tline-main { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; padding: 10px 8px; font: 400 13px/1.5 var(--v-font); text-align: left; }
html[data-look="stage"] .tline-tc { font: 400 12px/1.6 var(--v-font); color: var(--s-muted-3); font-variant-numeric: tabular-nums; }
html[data-look="stage"] .tline.is-now .tline-tc { color: var(--s-ink); font-weight: 500; }
html[data-look="stage"] .tline-acts { display: flex; gap: 6px; padding: 0 8px 10px 60px; }
html[data-look="stage"] .tline-act { height: 26px; padding: 0 10px; gap: 5px; font: 500 12px/1 var(--v-font); color: var(--s-ink-2); border-radius: 999px; }
html[data-look="stage"] .tline-act .i { width: 13px; height: 13px; }
html[data-look="stage"] .tline-flag { font: 500 12px/1 var(--v-font); letter-spacing: 0; color: var(--s-muted-3); text-transform: none; }
html[data-look="stage"] .tline.is-cut .tline-tx { text-decoration: line-through; text-decoration-color: var(--dk-t-1f1f21a35, rgba(31, 31, 33, .35)); }
html[data-look="stage"] .rv-comp-label { font: 500 12.5px/1.3 var(--v-font); }
html[data-look="stage"] .rv-comp-row { display: flex; gap: 8px; margin-top: 6px; }
html[data-look="stage"] .rv-comp-row .btn { flex: none; }
html[data-look="stage"] .rv-comp-hint { font: 400 12px/1.45 var(--v-font); color: var(--s-muted-3); margin-top: 6px; }

/* Graphics in the rail: hairline rows with the note and verdict buttons. */
html[data-look="stage"] .rv-g { padding: 10px 0; border-bottom: 1px solid var(--s-hair); }
html[data-look="stage"] .rv-g + .rv-g { border-top: 0; }
html[data-look="stage"] .gitem { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 4px 6px; border-bottom: 0; border-radius: 8px; text-align: left; }
html[data-look="stage"] .gitem-label { font: 500 13px/1.35 var(--v-font); color: var(--s-ink); }
html[data-look="stage"] .gitem-at { font: 400 12px/1.35 var(--v-font); color: var(--s-muted-3); font-variant-numeric: tabular-nums; }
html[data-look="stage"] .gitem-says { grid-column: 1 / -1; font: 400 12px/1.45 var(--v-font); color: var(--s-ink-2); }
html[data-look="stage"] .rv-gfb { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 6px 0; }
html[data-look="stage"] .rv-gnote { margin: 6px 0 0 6px; }
html[data-look="stage"] .rv-gfb-said { font: 400 12px/1.4 var(--v-font); color: var(--s-ink-2); }

/* Changes: what Volare changed, newest first, on hairlines. */
html[data-look="stage"] .summary-line { font: 400 13px/1.5 var(--v-font); color: var(--s-ink); }
html[data-look="stage"] .rv-history { margin: 6px 0 0; padding: 0; list-style: none; }
html[data-look="stage"] .rv-history li { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--s-hair); font: 400 13px/1.45 var(--v-font); }
html[data-look="stage"] .rv-when { font: 400 12px/1.45 var(--v-font); color: var(--s-muted-3); white-space: nowrap; }
/* Under the player the same history would be said twice: the rail's Changes tab holds it in this look. */
html[data-look="stage"] .rv-info .rv-historywrap { display: none; }
html[data-look="stage"] .rv-info > .rv-pkline:first-child,
html[data-look="stage"] .rv-info .rv-pkline { padding: 14px 18px; font: 400 13px/1.45 var(--v-font); border-top: 0; }

/* Before / After: a dark pill over the light player. */
html[data-look="stage"] .player-stage .ba { padding: 3px; gap: 2px; }
html[data-look="stage"] .ba button { height: 26px; padding: 0 12px; font: 500 12px/1 var(--v-font); }

/* Hold to confirm: the fill runs across the control while it is held (js/review-ux.js). */
html[data-look="stage"] [data-hold] { position: relative; overflow: hidden; isolation: isolate; }
html[data-look="stage"] [data-hold]::after {
  content: ""; position: absolute; inset: 0; z-index: -1; transform-origin: left center; transform: scaleX(0);
  background: rgba(196, 90, 80, .16); border-radius: inherit;
}
html[data-look="stage"] [data-hold].is-holding::after { transform: scaleX(1); transition: transform var(--hold-ms, 700ms) linear; }
html[data-look="stage"] [data-hold]:hover { color: var(--dk-tx-st-fail, var(--st-fail)); }

/* ================================================================ *
 * STAGE — Approved, preparing, ready to download; failed
 * ================================================================ */
html[data-look="stage"] .ws-steps.stepper--3 { margin: 4px 0 6px; }
html[data-look="stage"] .ws-steps .step { font: 400 12px/1.3 var(--v-font); }
html[data-look="stage"] .ws-steps .step .dot { width: 26px; height: 26px; }
html[data-look="stage"] .export-facts { gap: 10px 16px; padding-top: 10px; border-top: 1px solid var(--s-hair); }
html[data-look="stage"] .export-facts .field-label { font: 400 12px/1.3 var(--v-font); color: var(--s-ink-2); }
html[data-look="stage"] .export-facts .field-note { font: 500 13px/1.4 var(--v-font); color: var(--s-ink); }
html[data-look="stage"] .ws-export-actions { gap: 8px; }
html[data-look="stage"] .ws-solo { display: grid; gap: 14px; max-width: 760px; }
html[data-look="stage"] .ws-solo > .estate { background: var(--dk-paper, #fff); border-radius: 18px; padding: 28px; box-shadow: 0 1px 2px rgba(31, 31, 33, .04), 0 4px 12px rgba(31, 31, 33, .05); }
html[data-look="stage"] .ws-solo > .ws-details { background: var(--dk-paper, #fff); border-radius: 18px; padding: 14px 20px; box-shadow: 0 1px 2px rgba(31, 31, 33, .04), 0 4px 12px rgba(31, 31, 33, .05); }

/* Fixes after the first look. */
html[data-look="stage"] .ws-title-row > .ws-h1 { flex: 1 1 320px; }
html[data-look="stage"] .ws-title-input { width: 100%; }
html[data-look="stage"] .tline-act,
html[data-look="stage"] .rv-decide .btn,
html[data-look="stage"] .form-actions .btn { min-height: 0; }
html[data-look="stage"] .vstep { min-height: 0; padding: 5px 0; }
html[data-look="stage"] .vstep + .vstep::before { height: 10px; }

/* ================================================================ *
 * VIDEO PAGES (q2-polish): the Next line wraps; Review stacks under 1020px
 * ================================================================ */
html[data-look="stage"] .ws-next { white-space: normal; overflow: visible; text-overflow: clip; border-radius: 18px; align-items: flex-start; padding: 4px 14px 4px 4px; }
html[data-look="stage"] .ws-next-tag { margin-top: 0; }
html[data-look="stage"] .ws-next > span:not(.ws-next-tag) { min-width: 0; padding-top: 3px; overflow-wrap: anywhere; }
@media (max-width: 1019px) {
  html[data-look="stage"] .ws-grid.rv-grid { grid-template-columns: minmax(0, 1fr); }
  html[data-look="stage"] .card.rv-panel.rv-transcript { position: static; max-height: none; overflow: visible; }
  html[data-look="stage"] .rv-transcript .tlist,
  html[data-look="stage"] .rv-transcript > .rv-graphics,
  html[data-look="stage"] .rv-transcript > .rv-changes { overflow: visible; max-height: none; }
}
@media (max-width: 767px) {
  html[data-look="stage"] .rv-grid .card.player { width: 100%; box-sizing: border-box; }
  html[data-look="stage"] .rv-grid .player-stage { width: 100%; aspect-ratio: 16 / 9; height: auto; }
  html[data-look="stage"] .rv-grid .card,
  html[data-look="stage"] .rv-grid .rv-decide,
  html[data-look="stage"] .rv-grid .rv-kpis,
  html[data-look="stage"] .rv-grid .rv-panel { width: 100%; box-sizing: border-box; min-width: 0; }
  html[data-look="stage"] .rv-ba-note,
  html[data-look="stage"] .rv-keys { max-width: none; width: 100%; padding-left: 0; box-sizing: border-box; }
  html[data-look="stage"] .rv-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[data-look="stage"] .rv-kpis > div:nth-child(odd) { border-left: 0; }
  html[data-look="stage"] .tline-main { grid-template-columns: 40px minmax(0, 1fr); }
  html[data-look="stage"] .tline-tx { min-width: 0; overflow-wrap: break-word; word-break: normal; }
  html[data-look="stage"] .tline-acts { padding-left: 56px; flex-wrap: wrap; }
}