/*
 * The video page's own pieces, and a few small components that ride with it:
 * the seven-step progress, the panels and their groups, the transcript with
 * notes and "Take it out", Before/After on the player, the delivery title and
 * chapters, the history of accepted changes, and the Look picker.
 *
 * Built only from the shared tokens (styles.css :root; Volare's values in
 * css/looks.css). Type is the four roles (--type-title / -section / -body /
 * -meta, plus --type-body-strong); weight is --fw-body or --fw-strong.
 *
 * One surface per region: on this page the player, the transcript and the
 * secondary information are three panels. Inside a panel, groups are set off
 * by space and one hairline, never a card of their own.
 */

/* Shown only in the Volare look (halftone canvases, the masked logo). */
html:not([data-look="volare"]) .look-only { display: none !important; }

/* ---------- Panels and groups ---------- */
html[data-look] .card.rv-panel, .card.rv-panel { padding: 0; display: grid; }
.rv-panel > :not(:first-child) { border-top: 1px solid var(--line); }
.rv-panel > :empty { display: none; }
/* a panel with nothing in it yet (no title and chapters, YouTube not answered) takes no room */
.rv-panel:not(:has(> :not(:empty))) { display: none; }
.rv-group { display: grid; gap: var(--gap-head); padding: var(--pad-card); min-width: 0; }
.rv-group-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3) var(--s4); flex-wrap: wrap; }
.rv-group-text { display: grid; gap: var(--s1); min-width: 0; flex: 1 1 14rem; }
.rv-group-text h2 { font: var(--type-section); letter-spacing: var(--track-title); color: var(--ink-strong); text-wrap: balance; }
.rv-group-text p { font: var(--type-meta); color: var(--muted); max-width: var(--measure); text-wrap: pretty; }
.rv-group-head > .btn { flex: none; }
/* Details fold at the foot of a panel: the same hairline as a group, the same inset. */
.rv-panel > .ws-details { margin: 0; padding: 0 var(--pad-card); }

/* ---------- Progress: seven steps ---------- */
.stepper--7 { grid-template-columns: repeat(7, 1fr); }
.stepper--3 { grid-template-columns: repeat(3, 1fr); }

.vsteps { list-style: none; margin: 0; padding: 0; display: grid; }
.vstep {
  position: relative; display: flex; align-items: center; gap: var(--s3);
  min-height: 2.5rem; font: var(--type-body); color: var(--muted);
}
.vstep + .vstep::before {
  content: ''; position: absolute; left: calc(0.875rem - 1px); top: -0.375rem; height: 0.75rem; width: 2px;
  background: var(--mist);
}
.vstep.is-done + .vstep::before { background: var(--st-done-dot); }
.vstep-dot {
  position: relative; z-index: 1; flex: none;
  display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%;
  background: var(--tile); border: 1.5px solid var(--mist); color: var(--twilight);
}
.vstep.is-done { color: var(--ink); }
.vstep.is-done .vstep-dot { background: var(--st-done-dot); border-color: var(--st-done-dot); color: var(--pearl); }
.vstep.is-active .vstep-dot { background: var(--ink-900); border-color: var(--ink-900); color: var(--pearl); box-shadow: 0 0 0 4px var(--st-busy-bg); }
.vstep.is-active .vstep-label,
.vstep.is-waiting .vstep-label,
.vstep.is-stopped .vstep-label { color: var(--ink-strong); font-weight: var(--fw-strong); }
.vstep.is-waiting .vstep-dot { background: var(--st-attn-bg); border-color: var(--st-attn-dot); color: var(--dk-tx-st-attn, var(--st-attn)); }
.vstep.is-stopped .vstep-dot { background: var(--st-fail-bg); border-color: var(--st-fail-dot); color: var(--dk-tx-st-fail, var(--st-fail)); }
.vsteps + .status-line { margin-top: var(--s4); }
#procDetail:empty { display: none; }
.ws-proc-notes { display: grid; gap: var(--s1); margin-top: var(--s3); }
.ws-proc-notes .field-note { margin: 0; }
.ws-stop { margin-top: var(--s4); }

/* The step's long-wait block sits in the band the drawing leaves clear at the foot of the stage. The drawing is
   the moving part, so the block's own band of dots stays out. */
.player-stage--art > .ws-work { position: absolute; left: var(--s4); right: var(--s4); bottom: var(--s2); padding: 0; gap: 0; }
.player-stage--art > .ws-work .wstate-title { font: var(--type-meta); font-weight: var(--fw-strong); }
.player-stage--art > .ws-work .wstate-text { gap: 0; }
.player-stage--art > .ws-work .wstate-field { display: none; }
html[data-look="volare"] .player-stage--art > .ws-work .wstate-title { color: var(--v-salt); }
html[data-look="volare"] .player-stage--art > .ws-work .wstate-detail { color: var(--v-salt-60); }
.ws-work .wstate-detail:empty { display: none; }

/* ---------- Review layout ----------
   Player first and wide; the transcript is the rail beside it. On a narrow
   screen both columns dissolve into one list in reading order: player,
   Approve / Undo, transcript, title and chapters, thumbnails. The player's
   order is below every other item's, so a card with no order of its own
   (thumbnails, the raw-take note, anything added later) never lands above it
   at any width. */
.ws-grid.rv-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); }
.rv-player { display: grid; gap: var(--s2); min-width: 0; }
.rv-ba-note { font: var(--type-meta); color: var(--muted); padding-left: var(--s1); max-width: var(--measure); }
.rv-decide .field-note { flex: 1 1 14rem; }
@media (max-width: 1280px) { .ws-grid.rv-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); } }
@media (max-width: 1019px) {
  .ws-grid.rv-grid { grid-template-columns: minmax(0, 1fr); }
  .rv-grid > .rv-main, .rv-grid > .rv-side { display: contents; }
  .rv-grid .rv-player { order: -1; }
  .rv-grid .rv-decide { order: 2; }
  .rv-grid .rv-transcript { order: 3; }
  .rv-grid .rv-info { order: 4; }
  .rv-grid .trust-retention { order: 7; }
}
@media (max-width: 680px) {
  .rv-decide .btn { flex: 1 1 0; width: auto; }
  .rv-decide .field-note { flex-basis: 100%; }
}

/* ---------- Before / After on the player ---------- */
.player-stage .ba {
  position: absolute; left: var(--s3); top: var(--s3); z-index: 3;
  display: inline-flex; padding: 2px; border-radius: var(--r-xs);
  background: color-mix(in srgb, var(--ink-900) 72%, transparent);
}
.ba button {
  height: 1.75rem; padding: 0 var(--s3); border-radius: calc(var(--r-xs) - 2px);
  font: var(--type-meta); font-weight: var(--fw-strong); color: color-mix(in srgb, var(--pearl) 86%, transparent);
}
.ba button:hover { color: var(--pearl); }
.ba button[aria-pressed="true"] { background: var(--pearl); color: var(--ink-900); }
.ba button:disabled { opacity: 0.45; cursor: not-allowed; }
.ba button:focus-visible { outline: 2px solid var(--pearl); outline-offset: 1px; }

/* A note being applied: the player says so, with the step it is on, in the shared long-wait block. */
.rv-applying { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; padding: var(--s4); background: color-mix(in srgb, var(--ink-900) 45%, transparent); }
#rvApplying:empty, .rv-applying:empty { display: none; }
.rv-applying-card {
  display: grid; justify-items: center; gap: var(--s2); width: min(100%, 24rem); padding: var(--s2) var(--s4) var(--s4);
  border-radius: var(--r-sm); background: var(--tile); text-align: center;
}
.rv-applying-card .wstate { padding: var(--s3) 0 0; }
.rv-applying-card .wstate-field { height: 3.5rem; }
.rv-applying-card .rv-stop { justify-self: center; }

/* ---------- Transcript ---------- */
.rv-tgroup { padding-bottom: 0; }
.tlist {
  list-style: none; margin: 0 calc(-1 * var(--s2)); padding: 0;
  display: grid; gap: 0.125rem; align-content: start;
  max-height: 30rem; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin;
}
.tline { border-radius: var(--r-sm); }
.tline.is-sel { background: var(--accent-soft); }
.tline-main {
  display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--s2);
  width: 100%; padding: var(--s2); border-radius: var(--r-sm); text-align: left;
  font: var(--type-body); color: var(--ink);
}
.tline-main:hover { background: var(--hover-card); }
.tline.is-sel .tline-main:hover { background: transparent; }
.tline-tc { padding-top: 0.125rem; font: var(--type-meta); color: var(--muted); font-variant-numeric: var(--nums-tabular); }
.tline.is-now .tline-tc { color: var(--ink-strong); font-weight: var(--fw-strong); }
.tline.is-cut .tline-tx { text-decoration: line-through; color: var(--muted); }
.tline-acts {
  display: none; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2);
  padding: 0 var(--s2) var(--s2) calc(2.5rem + var(--s4));
}
.tline.is-sel .tline-acts, .tline:hover .tline-acts, .tline:focus-within .tline-acts, .tline.is-cut .tline-acts { display: flex; }
.tline-act {
  display: inline-flex; align-items: center; gap: 0.375rem;
  height: 1.875rem; padding: 0 var(--s3); border-radius: var(--r-xs);
  background: var(--soft); color: var(--ink-strong);
  font: var(--type-meta); font-weight: var(--fw-strong); white-space: nowrap;
}
.tline-act:hover { background: var(--soft-hover); }
.tline-flag { font: var(--type-meta); font-weight: var(--fw-strong); color: var(--muted); }

/* A note keeps its own state in words: Waiting its turn, Volare is on it, Done. */
.tnotes { list-style: none; margin: 0; padding: 0 var(--s2) var(--s2) calc(2.5rem + var(--s4)); display: grid; gap: var(--s1); }
.tnote { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.125rem var(--s2); font: var(--type-meta); color: var(--ink); }
.tnote-state {
  flex: none; display: inline-flex; align-items: center; height: 1.375rem; padding: 0 var(--s2); border-radius: 0.6875rem;
  background: var(--st-idle-bg); color: var(--dk-tx-st-idle, var(--st-idle)); font: var(--type-meta); font-weight: var(--fw-strong); line-height: 1;
}
.tnote--working .tnote-state { background: var(--st-busy-bg); color: var(--dk-tx-st-busy, var(--st-busy)); }
.tnote--done .tnote-state { background: var(--st-done-bg); color: var(--dk-tx-st-done, var(--st-done)); }
.tnote--failed .tnote-state { background: var(--st-fail-bg); color: var(--dk-tx-st-fail, var(--st-fail)); }
.tnote-msg { flex-basis: 100%; font: var(--type-meta); color: var(--muted); }

/* The composer closes the transcript group: one hairline above it, the group's own inset. */
.rv-composer {
  display: grid; gap: var(--s2); margin: 0 calc(-1 * var(--pad-card));
  padding: var(--s4) var(--pad-card) var(--pad-card); border-top: 1px solid var(--line);
}
.rv-comp-label { font: var(--type-body-strong); color: var(--ink-strong); }
.rv-comp-label .muted { font: var(--type-meta); }
.rv-comp-quote {
  margin: 0; padding: var(--s2) var(--s3); border-radius: var(--r-sm); background: var(--accent-soft);
  font: var(--type-meta); color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rv-comp-quote[hidden] { display: none; }
.rv-composer.is-line .rv-comp-hint { display: none; }
.rv-comp-row { display: flex; gap: var(--s2); }
.rv-comp-row .input { flex: 1 1 auto; min-width: 0; }
.rv-comp-row .btn { flex: none; }
.rv-tgroup > .estate { padding-bottom: var(--pad-card); }

/* ---------- Graphics ---------- */
.rv-glist { gap: 0; margin: 0 calc(-1 * var(--s3)); }
.rv-g { display: grid; gap: var(--s1); padding: var(--s1) 0; }
.rv-g + .rv-g { border-top: 1px solid var(--line); }
.rv-g .tnotes { padding: 0 var(--s3); }
.rv-gnote { justify-self: start; margin-left: var(--s3); display: none; }
.rv-g.is-sel .rv-gnote, .rv-g:hover .rv-gnote, .rv-g:focus-within .rv-gnote { display: inline-flex; }
.rv-g.is-sel .gitem { background: var(--accent-soft); }
.rv-g.is-open .rv-gnote { display: none; }
.rv-gform { display: grid; gap: var(--s2); padding: var(--s1) var(--s3) var(--s2); }
.rv-gform[hidden] { display: none; }
/* Keep / Kill / Change: the verdict row under a graphic, shown with the other graphic actions */
.rv-gfb { display: none; flex-wrap: wrap; align-items: center; gap: var(--s1); margin-left: var(--s3); }
.rv-g.is-sel .rv-gfb, .rv-g:hover .rv-gfb, .rv-g:focus-within .rv-gfb, .rv-g.is-removed .rv-gfb { display: flex; }
.rv-gfb-said { color: var(--muted, inherit); font-size: var(--fs-sm, 0.875rem); }
.rv-g > .rv-gfb-said { margin: 0 var(--s3); }
.rv-g.is-removed .gitem { opacity: .55; text-decoration: line-through; }
.rv-gfform { display: grid; gap: var(--s2); padding: var(--s1) var(--s3) var(--s2); }
.rv-gfform[hidden] { display: none; }
/* The empty line shows only while the list has nothing in it. */
.rv-glist:not(:empty) + .rv-gempty { display: none; }
.rv-glist:empty { display: none; }
.rv-gempty.estate--row { padding: 0; }

/* ---------- Title and chapters ---------- */
.rv-facts { min-width: 0; }
.rv-title { margin-top: var(--s1); font: var(--type-body-strong); color: var(--ink-strong); max-width: var(--measure); text-wrap: balance; }
.rv-chap-label { margin-top: var(--s4); }
.rv-chapters { list-style: none; margin: var(--s2) 0 0; padding: 0; display: grid; gap: 0.125rem; }
.rv-chap {
  display: flex; gap: var(--s3); width: calc(100% + var(--s4)); margin-left: calc(-1 * var(--s2));
  padding: var(--s1) var(--s2); border-radius: var(--r-xs); text-align: left;
  font: var(--type-body); color: var(--ink);
}
.rv-chap:hover { background: var(--hover-card); }
.rv-chap-at { min-width: 2.75rem; color: var(--muted); font-variant-numeric: var(--nums-tabular); }
.rv-namecard, .rv-disclosure { margin-top: var(--s1); font: var(--type-body); color: var(--ink); max-width: var(--measure); }
.rv-namecard strong { font-weight: var(--fw-strong); }
@media (max-width: 680px) {
  #rvDelivery .rv-group-head { flex-direction: column; align-items: stretch; }
  #rvDelivery .rv-group-text { flex: none; }
  #rvDelivery .rv-group-head .btn { align-self: flex-start; }
}

/* ---------- What Volare changed ---------- */
.rv-history { list-style: none; margin: var(--s3) 0 0; padding: 0; display: grid; gap: var(--s2); max-width: var(--measure); }
.rv-history li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s3); font: var(--type-body); color: var(--ink); }
.rv-when { flex: none; font: var(--type-meta); color: var(--muted); font-variant-numeric: var(--nums-tabular); }
.rv-history + .field-note { margin-top: var(--s3); }
#rvHistory .summary-line { font: var(--type-body); color: var(--ink); max-width: var(--measure); }

/* ---------- Ready to download, preparing ---------- */
.export-back { margin-top: var(--s4); }
.ws-prep.wstate--card { justify-items: start; text-align: left; padding: 0; }
.ws-prep .wstate-field { width: min(100%, 16rem); height: 3.5rem; margin-left: calc(-1 * var(--s1)); }
.ws-prep .wstate-text { justify-items: start; }

/* ---------- Failed: the shared error block, then support's details ---------- */
.ws-solo > .estate--page { padding-top: var(--s5); padding-bottom: var(--s7); }
.ws-solo > .estate--page .estate-title { max-width: var(--measure); }
.ws-solo > .ws-details { max-width: var(--measure); }
.ws-support { margin-top: var(--s3); }

/* ---------- Needs input: a choice ---------- */
.bchoice { padding: var(--s2) 0; }
.rv-group .form { display: grid; gap: var(--s4); margin-top: 0; }

/* ---------- Search: a transcript hit ---------- */
.gs-row--line .gs-title { font: var(--type-meta); }
.gs-tc { color: var(--muted); font-variant-numeric: var(--nums-tabular); margin-right: var(--s1); }

/* ---------- Settings → Preferences → Look ---------- */
.looks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.look-opt {
  position: relative; display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4); border-radius: var(--r-sm);
  background: var(--tile); border: 1px solid var(--line); cursor: pointer;
}
.look-opt:hover { border-color: var(--line-2); }
.look-opt.is-on { border-color: var(--ink-900); box-shadow: inset 0 0 0 1px var(--ink-900); }
.look-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.look-opt:focus-within { outline: 2px solid var(--dk-tx-accent, var(--accent)); outline-offset: 2px; }
.look-swatch { flex: none; display: flex; overflow: hidden; border-radius: var(--r-xs); box-shadow: inset 0 0 0 1px var(--line-2); }
.look-swatch i { display: block; width: 0.875rem; height: 2.5rem; }
/* A swatch shows the other look's own colours, which no token of the current look holds, so they are literal. */
.look-swatch--volare i:nth-child(1) { background: var(--dk-b-eae6de, #EAE6DE); }
.look-swatch--volare i:nth-child(2) { background: #8799C3; }
.look-swatch--volare i:nth-child(3) { background: var(--dk-inv, #1F1F21); }
.look-swatch--classic i:nth-child(1) { background: var(--dk-b-f3f2f0, #F3F2F0); }
.look-swatch--classic i:nth-child(2) { background: var(--dk-b-cbd5e1, #CBD5E1); }
.look-swatch--classic i:nth-child(3) { background: #717E8F; }
.look-text { display: grid; gap: 0.125rem; min-width: 0; }
.look-text strong { display: flex; align-items: center; gap: var(--s2); font: var(--type-body-strong); color: var(--ink-strong); }
.look-text strong small { font: var(--type-meta); color: var(--muted); }
.look-text > small { font: var(--type-meta); color: var(--muted); }
@media (max-width: 680px) { .looks { grid-template-columns: 1fr; } }

/* The Archived filter only appears once something is archived; the pill's
   own display rule would otherwise beat [hidden]. */
.fpill[hidden] { display: none; }

/* A first-use empty state; the Volare look puts it on the halftone. */
.vgrid > .empty-art { grid-column: 1 / -1; }
.empty-eyebrow { margin-bottom: var(--s1); }

/* A toast may carry one action. */
.toast { display: flex; align-items: center; gap: var(--s3); }
.toast-act { font: var(--type-body-strong); color: var(--pearl); text-decoration: underline; text-underline-offset: 3px; }

/* Rename, in the confirmation dialog. */
.modal-field { margin-top: var(--s1); }
.modal-body:empty { display: none; }

/* The mark in the phone navigation sheet. */
.sheet-title { display: inline-flex; align-items: center; gap: var(--s2); }
.sheet-mark { width: 1.75rem; height: auto; }
.sheet-title .logo-mask { width: 26px; height: 26px; }

/* Phones: every control on the review screen is at least 40px to touch. */
@media (max-width: 680px) {
  .tline-act { height: 2.5rem; padding: 0 var(--s4); }
  .ba button { height: 2.5rem; padding: 0 var(--s4); }
  .rv-chap { min-height: 2.5rem; align-items: center; }
  .tline-main { min-height: 2.5rem; }
  .gitem { min-height: 2.5rem; }
}

/* A footnote under a claim (the turnaround's "*For a ten-minute recording."). */
.footnote { margin-top: 0.125rem; font: var(--type-meta); color: var(--muted); }

/* ---------- Practice-cut banner (workspace header; the .note component carries both looks) ---------- */
/* informs without dominating: one compact line under the title, sized to its text */
.ws-practice { width: fit-content; max-width: 100%; margin: var(--s2) 0 var(--s4); padding: var(--s2) var(--s3); gap: var(--s2); align-items: flex-start; }
.ws-practice .note-icon svg { width: 18px; height: 18px; margin-top: 1px; }
.ws-practice .note-title, .ws-practice .note-sub { display: inline; margin: 0; font: var(--type-meta); }
.ws-practice .note-title { margin-right: .25em; font-weight: var(--fw-strong); }

/* ---------- Ready to download, one column: player, then the download panel, then the rest ---------- */
@media (max-width: 1019px) {
  .rv-done > .ws-main { display: contents; }
  .rv-done > .ws-main > * { order: 1; margin-top: 0; }
  .rv-done > .ws-main > :first-child { order: -1; }
  .rv-done > .ws-side { order: 0; }
}

/* The raw-take date is housekeeping: a quiet line at the end of the column, not wedged between cards */
.ws-main > .trust-retention { order: 10; margin: 0; padding: 0 var(--s1); }
.rv-done > .ws-main > .trust-retention { order: 10; }

/* On YouTube: picker rows breathe like the other groups */
.yt-body { display: grid; gap: var(--s2); justify-items: start; }
.yt-body .select, .yt-body .select select { width: 100%; max-width: 32rem; }
.yt-body .form-actions { margin-top: var(--s1); align-items: center; }
.yt-body > .estate { padding: 0; }
.yt-linked { font: var(--type-body); color: var(--ink); }
.yt-linked strong { font-weight: var(--fw-strong); }

/* ---------- Transcript: fade the foot while more lines are below, so a line is never cut in half at the edge ---------- */
.tlist { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 2.25rem), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 2.25rem), transparent); }
.tlist.is-end { -webkit-mask-image: none; mask-image: none; }

/* ---------- A note on one line: a pop-over under that line. The box at the foot is for the whole video. ---------- */
.rv-composer.is-pop {
  position: fixed; z-index: 55; display: grid; gap: var(--s2); padding: var(--s3); margin: 0;
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  box-shadow: 0 1rem 2.5rem -0.75rem rgba(31, 31, 33, 0.4);
}
.rv-composer.is-pop::before { content: ''; position: absolute; left: 1.25rem; top: -6px; width: 10px; height: 10px; background: var(--card); border-left: 1px solid var(--line-2); border-top: 1px solid var(--line-2); transform: rotate(45deg); }
.rv-composer.is-pop.is-above::before { top: auto; bottom: -6px; transform: rotate(225deg); }
.rv-composer.is-pop #rvVideoNotes, .rv-composer.is-pop .rv-comp-hint { display: none; }
@media (max-width: 768px) {
  .rv-composer.is-pop { left: var(--s3) !important; right: var(--s3); top: auto !important; bottom: var(--s3); width: auto !important; }
  .rv-composer.is-pop::before { display: none; }
  /* Review on a phone: the player, Approve and Undo, the stats and the transcript are full-width blocks in one column. */
  .rv-grid .rv-player, .rv-grid .rv-decide, .rv-grid .rv-info, .rv-grid .rv-transcript, .rv-grid #rvKpis { width: 100%; min-width: 0; box-sizing: border-box; }
  .rv-grid .rv-player .card.player { width: 100%; }
  .rv-grid .rv-player .player-stage { width: 100%; aspect-ratio: 16 / 9; }
  .rv-grid .rv-decide { display: flex; flex-wrap: wrap; }
  .tlist { max-height: 22rem; }
}
/* Q2 polish: foot clearance and one-fact values never wrap. */
.tlist { padding-bottom: var(--s5); }
[data-file-facts], .field-value, .stat strong { white-space: nowrap; }
.fields > div:has([data-file-facts]) { min-width: max-content; }
.set-surface .field-value, .billing-page .field-value { white-space: normal; }

/* ---------- Post kit (Ready to download): four copyable parts and two files ---------- */
.rv-kit .rv-group-head { align-items: flex-start; }
.kit-files { display: flex; flex-wrap: wrap; gap: var(--s2); }
.kit-parts { display: grid; gap: var(--s5); min-width: 0; }
.kit-part { display: grid; gap: var(--s2); min-width: 0; }
.kit-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); }
.kit-head h3 { margin: 0; font: var(--type-body-strong); }
.kit-extra { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) auto; gap: var(--s2); align-items: baseline; font: var(--type-meta); }
.kit-extra-label { color: var(--muted); }
.kit-extra-text { overflow-wrap: anywhere; }
.kit-text { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 22rem; overflow: auto; padding: var(--s3); border: 1px solid var(--line); border-radius: var(--r-sm); font: var(--type-body); line-height: 1.55; }
@media (max-width: 599px) { .kit-extra { grid-template-columns: minmax(0, 1fr) auto; } .kit-extra-label { grid-column: 1 / -1; } }

/* Edit from words: Review's chat box (views.js reviewMode) */
.rv-chat-log { list-style: none; margin: 0 0 var(--s2); padding: 0; display: flex; flex-direction: column; gap: var(--s2); max-height: 28rem; overflow-y: auto; }
.rv-chat-log:empty { display: none; }
.rv-chat-msg { max-width: 85%; padding: var(--s2) var(--s3); border-radius: 12px; line-height: 1.45; }
.rv-chat-msg--me { align-self: flex-end; background: var(--accent-soft, var(--line)); }
.rv-chat-msg--volare { align-self: flex-start; background: var(--card); border: 1px solid var(--line-2); }
.rv-chat-more { margin: var(--s1) 0 0; padding-left: 1.1rem; color: var(--muted); font-size: .92em; }