/* t20 / v06p — Video Review.
   List view: grid of edit-version cards (sequences-style).
   Detail view: big player + Frame.io-style comments column.
   Both wrapped in the standard cream .view-page glass panel. */

.review-view--v2 {
  padding: 16px 20px 18px;
  gap: 14px;
  display: flex;
  flex-direction: column;
  /* Allow internal scrolling inside the detail body / cards grid. */
  overflow-x: hidden;
  overflow-y: auto;
}

/* ─── Shared empty states ───────────────────────────────────────── */
.review-view--v2 .review-empty {
  padding: 32px;
  text-align: center;
  color: var(--ink-muted);
  font-size: var(--fs-13);
  border: 1px dashed var(--card-border);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--cream) 40%, transparent);
}
.review-empty--err { color: var(--danger-ink); border-color: color-mix(in srgb, var(--danger-soft-2) 45%, transparent); background: color-mix(in srgb, var(--danger-soft-2) 6%, transparent); }
/* Edits / Presentations use the shared eyebrow/underline .tabs/.tab style
   (defined in shots.css) so they match every other page. This wrapper only adds
   the page spacing below the tab row. */
.review-tabs { margin-bottom: 16px; }
/* v07zz412 — Edits + Presentations shown together as two stacked panels (replaces the
   Edits/Presentations tab bar). Each panel has an eyebrow header; a deck/edit open takes
   over the page (the deck panel drops its chrome so the deck viewer fills). */
.review-view--v2 .review-panel { margin-bottom: 34px; }
.review-view--v2 .review-panel:last-child { margin-bottom: 0; }
.review-view--v2 .review-panel-head {
  font-size: var(--fs-12); font-weight: var(--fw-heavy); letter-spacing: var(--track-14); text-transform: uppercase;
  color: var(--ink, var(--ink-3)); padding-bottom: 10px; margin-bottom: 18px;
  border-bottom: 1px solid color-mix(in srgb, var(--card-border) 45%, transparent);
}
.review-view--v2 .review-panel--deck { margin: 0; }

/* ─── v07zz583 — admin-curated visibility + Sequences section ─────────────
   Only needs_review cards show by default; "Show all" reveals hidden ones
   greyed. Sequences (exports/sequences/) get their own section below Edits. */
.review-panel-head--row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.review-panel-head--seq { margin-top: 30px; }
.review-showall {
  background: transparent; border: 1px solid color-mix(in srgb, var(--umber-2) 30%, transparent); border-radius: var(--r-sm);
  color: var(--ink-muted, var(--ink-taupe-3)); font-size: var(--fs-11); font-weight: var(--fw-bold); letter-spacing: var(--track-06);
  text-transform: none; padding: 3px 10px; cursor: pointer; white-space: nowrap;
}
.review-showall:hover { background: color-mix(in srgb, var(--black) 5%, transparent); color: var(--ink, var(--ink-3)); }
.review-empty--quiet { padding: 10px 2px 16px; font-size: var(--fs-12-5); font-style: italic; opacity: 0.62; }
.review-card--hidden { opacity: 0.45; filter: saturate(0.55); }
.review-card--hidden:hover { opacity: 0.8; filter: saturate(0.9); }
.review-card-adminctl { position: absolute; top: 10px; right: 10px; display: flex; gap: 6px; z-index: 3; }
.rc-flagbtn {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--r-7);
  background: color-mix(in srgb, var(--shade-9) 66%, transparent); color: color-mix(in srgb, var(--white) 85%, transparent); cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--white) 18%, transparent);
  opacity: 0; transition: opacity var(--dur-1) ease, background var(--dur-1) ease;
}
.review-card:hover .rc-flagbtn, .rc-flagbtn:focus-visible { opacity: 1; }
.rc-flagbtn:hover { background: color-mix(in srgb, var(--shade-9) 90%, transparent); color: var(--white); }
.rc-flagbtn.is-on { color: color-mix(in srgb, var(--gold-17) 52%, var(--mix-light)); }

/* v07zz549 — "Updates" activity digest panel (top of the Review page). */
.review-view--v2 .review-updates .ru-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ru-head-title { flex: 0 0 auto; }
.ru-head .ru-toggle { display: inline-flex; border: 1px solid color-mix(in srgb, var(--card-border) 55%, transparent); border-radius: var(--r-sm); overflow: hidden; }
.ru-toggle-btn {
  font: inherit; font-size: var(--fs-11); font-weight: var(--fw-bold); letter-spacing: var(--track-04); text-transform: none;
  padding: 4px 12px; border: 0; background: transparent; color: var(--ink-muted); cursor: pointer; line-height: 1.6;
}
.ru-toggle-btn + .ru-toggle-btn { border-left: 1px solid color-mix(in srgb, var(--card-border) 55%, transparent); }
.ru-toggle-btn.is-on { background: var(--accent, var(--danger-soft-2)); color: var(--white); }
.ru-copy {
  margin-left: auto; font: inherit; font-size: var(--fs-11); font-weight: var(--fw-bold); letter-spacing: var(--track-03); text-transform: none;
  padding: 5px 13px; border-radius: var(--r-sm); border: 1px solid color-mix(in srgb, var(--card-border) 60%, transparent);
  background: color-mix(in srgb, var(--cream) 72%, transparent); color: var(--ink); cursor: pointer; white-space: nowrap;
}
.ru-copy:hover:not(:disabled) { background: var(--mix-light); }
.ru-copy:disabled { opacity: .45; cursor: default; }
.ru-copy.is-copied { background: color-mix(in srgb, var(--surface-forest-5) 89%, var(--mix-light)); border-color: color-mix(in srgb, var(--surface-forest-5) 89%, var(--mix-light)); color: var(--white); }
.ru-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: -6px 0 14px; }
.ru-chip {
  font: inherit; font-size: var(--fs-11); font-weight: var(--fw-bold); letter-spacing: var(--track-02);
  padding: 4px 10px; border-radius: var(--r-round); border: 1px solid color-mix(in srgb, var(--card-border) 50%, transparent);
  background: color-mix(in srgb, var(--cream) 55%, transparent); color: var(--ink-muted); cursor: pointer; white-space: nowrap;
}
.ru-chip:hover { background: var(--mix-light); color: var(--ink); }
.ru-chip.is-on { background: var(--accent, var(--danger-soft-2)); border-color: var(--accent, var(--danger-soft-2)); color: var(--white); }
.ru-chip-n { opacity: .7; font-weight: var(--fw-heavy); margin-left: 2px; }
.ru-chip.is-on .ru-chip-n { opacity: .95; }

.ru-list { display: flex; flex-direction: column; }
.ru-row { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: var(--r-panel); transition: background var(--dur-1) ease; }
.ru-row:hover { background: color-mix(in srgb, var(--cream) 60%, transparent); }
.ru-row + .ru-row { border-top: 1px solid color-mix(in srgb, var(--card-border) 22%, transparent); }
.ru-icon { flex: 0 0 26px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: var(--r-7); font-size: var(--fs-13); background: color-mix(in srgb, var(--card-border) 18%, transparent); color: var(--ink); }
.ru-row--hero_frame .ru-icon, .ru-row--hero_action .ru-icon { background: color-mix(in srgb, color-mix(in srgb, var(--gold-12) 96%, var(--mix-dark)) 22%, transparent); color: var(--ink-gold-4); }
.ru-row--video_wip .ru-icon { background: color-mix(in srgb, var(--blue-41) 18%, transparent); color: var(--blue-41-ink); }
.ru-row--status .ru-icon { background: color-mix(in srgb, color-mix(in srgb, var(--teal) 85%, var(--mix-dark)) 18%, transparent); color: color-mix(in srgb, var(--teal) 56%, var(--mix-dark)); }
.ru-row--note .ru-icon, .ru-row--comment .ru-icon { background: color-mix(in srgb, var(--purple-6) 16%, transparent); color: var(--ink-purple-5); }
.ru-main { flex: 1 1 auto; min-width: 0; }
.ru-label { font-size: var(--fs-13); font-weight: var(--fw-semi); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ru-meta { display: flex; align-items: center; gap: 8px; margin-top: 2px; font-size: var(--fs-11); color: var(--ink-muted); }
.ru-shot { font-weight: var(--fw-bold); letter-spacing: var(--track-02); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60%; }
.ru-actor { opacity: .8; white-space: nowrap; }
.ru-actor::before { content: "· "; }
.ru-when { margin-left: auto; opacity: .75; white-space: nowrap; }
.ru-open {
  flex: 0 0 auto; font: inherit; font-size: var(--fs-11); font-weight: var(--fw-bold); padding: 5px 12px; border-radius: var(--r-7);
  border: 1px solid color-mix(in srgb, var(--card-border) 60%, transparent); background: transparent; color: var(--ink); cursor: pointer;
  opacity: .82; transition: opacity var(--dur-1) ease, background var(--dur-1) ease;
}
.ru-row:hover .ru-open { opacity: 1; background: color-mix(in srgb, var(--cream) 95%, transparent); }
/* v07zz2xx — Presentations card matches the Edits card: a real first-slide
   thumbnail on top, then title + meta + actions below. (Was a cramped flex row
   with a giant red PDF icon that forced the title to "P.." and wrapped the date
   one character per line.) */
.rev-pres-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.rev-pres-card { display: flex; flex-direction: column; text-align: left; padding: 0; overflow: hidden; border-radius: var(--r-card); border: 1px solid var(--card-border); background: color-mix(in srgb, var(--mix-light) 60%, transparent); box-shadow: var(--shadow-card); cursor: pointer; font: inherit; color: inherit; transition: transform var(--dur-1) ease, box-shadow var(--dur-1) ease, border-color var(--dur-1) ease; }
.rev-pres-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px color-mix(in srgb, var(--shadow-ink) 18%, transparent); border-color: color-mix(in srgb, var(--gold-15) 60%, transparent); }
.rev-pres-thumb { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--shade-49); display: grid; place-items: center; }
.rev-pres-mini { position: absolute; inset: 0; }
.rev-pres-mini .pres-slide { width: 100%; aspect-ratio: 16 / 9; border-radius: 0; box-shadow: none; cursor: default; content-visibility: visible; pointer-events: none; }
.rev-pres-thumb-fallback { color: var(--white); opacity: 0.82; }
.rev-pres-ver-badge { position: absolute; top: 8px; left: 8px; z-index: 2; font-size: var(--fs-10); font-weight: var(--fw-heavy); letter-spacing: var(--track-04); padding: 2px 8px; border-radius: var(--r-round); background: color-mix(in srgb, var(--shade-10) 66%, transparent); color: var(--white); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.rev-pres-body { padding: 11px 14px 13px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.rev-pres-name { font-family: var(--font-display, "Bebas Neue"), sans-serif; font-size: var(--fs-18); letter-spacing: var(--track-01); color: var(--ink); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rev-pres-meta { font-size: var(--fs-11-5); color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rev-pres-cta { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.rev-pres-open { font-size: var(--fs-12); font-weight: var(--fw-bold); color: color-mix(in srgb, var(--ink-tan-deep) 91%, var(--mix-dark)); }
.rev-pres-pdf { flex: 0 0 auto; font-size: var(--fs-11-5); font-weight: var(--fw-semi); color: var(--ink-muted); text-decoration: none; padding: 3px 9px; border: 1px solid var(--card-border); border-radius: var(--r-round); }
.rev-pres-pdf:hover { color: var(--ink); border-color: color-mix(in srgb, var(--gold-deep) 60%, transparent); background: color-mix(in srgb, var(--hi-2) 70%, transparent); }
.review-empty--cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 48px 32px;
}
.review-empty-title {
  font-family: var(--font-display, "Bebas Neue"), sans-serif;
  font-size: var(--fs-22);
  letter-spacing: var(--track-02);
  color: var(--ink);
}
.review-empty-sub {
  max-width: 460px;
  font-size: var(--fs-13);
  color: var(--ink-muted);
  line-height: 1.5;
}
.review-seed-btn {
  margin-top: 8px;
  font: inherit;
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-04);
  padding: 8px 14px;
  border-radius: var(--r-round);
  border: 1px solid color-mix(in srgb, var(--leaf) 55%, transparent);
  background: color-mix(in srgb, var(--leaf) 18%, transparent);
  color: var(--ink);
  cursor: pointer;
}
.review-seed-btn:hover { background: color-mix(in srgb, var(--leaf) 35%, transparent); }

/* ─── LIST VIEW ─────────────────────────────────────────────────── */

.review-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.review-list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 0 4px 4px;
}
.review-list-title {
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-18);
  color: var(--ink-muted);
  text-transform: uppercase;
}
.review-list-count {
  font-size: var(--fs-11-5);
  color: var(--ink-muted);
  letter-spacing: var(--track-04);
}

.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.review-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  background: color-mix(in srgb, var(--cream-2) 65%, transparent);
  border: 1px solid var(--card-border);
  border-radius: var(--r-card);
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--dur-2) ease, border-color var(--dur-2) ease, box-shadow var(--dur-2) ease;
  font: inherit;
  color: inherit;
}
.review-card:hover {
  border-color: color-mix(in srgb, var(--gold-15) 65%, transparent);
  transform: translateY(-2px);
  box-shadow:
    0 6px 18px color-mix(in srgb, var(--shadow-ink) 16%, transparent),
    0 2px 6px color-mix(in srgb, var(--shadow-ink) 8%, transparent);
}
.review-card-thumb {
  position: relative;
  width: 100%;
  /* v06p — Match the project's aspect ratio (21:9 for Paradise
     Found's anamorphic edits, falls back to 16:9 for standard). */
  aspect-ratio: var(--project-aspect, 21 / 9);
  overflow: hidden;
  background-color: color-mix(in srgb, var(--tan-deep) 10%, transparent);
}
.review-card-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* v07zb — Hugo: previous version ran a 240 ms keyframe on mount,
     which completed BEFORE the poster frame had decoded — so the
     first card appeared empty for a beat, then snapped to the
     poster (no visible fade). New approach: stay opacity 0 until
     onSeeked adds the .is-ready class, then transition to opacity 1.
     The fade now lines up with the actual paint so the user sees
     the soft reveal. */
  opacity: 0;
  transition: opacity 280ms ease-out;
}
.review-card-video.is-ready {
  opacity: 1;
}
.review-card-version {
  position: absolute;
  top: 10px;
  left: 10px;
  font-family: var(--font-mono, "JetBrains Mono"), monospace;
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-04);
  padding: 4px 10px;
  border-radius: var(--r-round);
  background: color-mix(in srgb, var(--shade-13) 65%, transparent);
  color: var(--ink-on-dark);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.review-card-comments {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: var(--fs-10-5);
  letter-spacing: var(--track-04);
  padding: 4px 10px;
  border-radius: var(--r-round);
  background: color-mix(in srgb, var(--shade-13) 65%, transparent);
  color: var(--ink-on-dark);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.review-card-comments strong { color: var(--amber); font-weight: var(--fw-bold); }
.review-card-body {
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.review-card-eyebrow {
  font-size: var(--fs-10);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-18);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.review-card-title {
  font-family: var(--font-display, "Bebas Neue"), sans-serif;
  font-size: var(--fs-18);
  letter-spacing: var(--track-01);
  color: var(--ink);
  line-height: 1.1;
}
.review-card-meta {
  display: flex;
  gap: 8px;
  font-size: var(--fs-11-5);
  color: var(--ink-muted);
}
.review-card-by { font-style: italic; }

/* ─── DETAIL VIEW ───────────────────────────────────────────────── */

.review-detail {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.review-detail-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 4px 6px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--tan-deep) 18%, transparent);
}
.review-back-btn {
  font: inherit;
  font-size: var(--fs-12);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-04);
  padding: 6px 12px 6px 8px;
  border-radius: var(--r-round);
  border: 1px solid var(--card-border);
  background: color-mix(in srgb, var(--cream) 55%, transparent);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.review-back-btn:hover { background: color-mix(in srgb, var(--cream) 95%, transparent); }
.review-detail-titles { display: flex; flex-direction: column; gap: 2px; }
/* v07zz161 — inline rename / set-version editor for an edit. */
.review-meta-edit { display: flex; flex-direction: column; gap: 8px; }
.review-meta-edit-row { display: flex; gap: 8px; align-items: center; }
.review-meta-ver { width: 72px; flex-shrink: 0; }
.review-meta-title { flex: 1; min-width: 0; }
.review-meta-ver, .review-meta-title {
  font: inherit; font-size: var(--fs-14); padding: 6px 10px; border-radius: var(--r-sm);
  border: 1px solid var(--card-border); background: color-mix(in srgb, var(--cream) 90%, transparent); color: var(--ink);
}
.review-meta-ver:focus, .review-meta-title:focus { outline: 2px solid color-mix(in srgb, var(--leaf) 55%, transparent); outline-offset: 1px; }
.review-meta-edit-actions { display: flex; gap: 8px; }
.review-meta-save, .review-meta-cancel {
  font: inherit; font-size: var(--fs-12); font-weight: var(--fw-semi); cursor: pointer; padding: 5px 14px; border-radius: var(--r-sm);
}
.review-meta-save { border: 1px solid color-mix(in srgb, var(--leaf) 60%, transparent); background: color-mix(in srgb, var(--leaf) 18%, transparent); color: var(--ink); }
.review-meta-save:hover:not(:disabled) { background: color-mix(in srgb, var(--leaf) 30%, transparent); }
.review-meta-cancel { border: 1px solid var(--card-border); background: transparent; color: var(--ink-muted); }
.review-meta-save:disabled, .review-meta-cancel:disabled { opacity: 0.5; cursor: default; }
.review-meta-editbtn {
  width: 30px; height: 30px; border-radius: var(--r-sm); display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--card-border); background: color-mix(in srgb, var(--cream) 60%, transparent); color: var(--ink-muted);
}
.review-meta-editbtn:hover { color: var(--ink); border-color: color-mix(in srgb, var(--gold-deep) 60%, transparent); background: color-mix(in srgb, var(--hi-2) 80%, transparent); }
/* v07zz585 — Hugo: the reveal + download buttons in this toolbar (window.FileActionBtns,
   class .reveal-folder-btn) rendered as round 26px circles with a shadow, unlike the
   rounded-square .review-meta-editbtn "squargles" beside them. Match them EXACTLY. Scoped
   to .review-detail-tools so reveal buttons on image panels elsewhere are untouched.
   2-class specificity beats the base .reveal-folder-btn rule. */
.review-detail-tools .reveal-folder-btn {
  width: 30px; height: 30px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--cream) 60%, transparent); border: 1px solid var(--card-border);
  color: var(--ink-muted); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.review-detail-tools .reveal-folder-btn:hover {
  color: var(--ink); border-color: color-mix(in srgb, var(--gold-deep) 60%, transparent); background: color-mix(in srgb, var(--hi-2) 80%, transparent);
}
.review-detail-eyebrow {
  font-size: var(--fs-10-5);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-18);
  color: var(--ink-muted);
  text-transform: uppercase;
}
.review-detail-title {
  font-family: var(--font-display, "Bebas Neue"), sans-serif;
  font-size: var(--fs-24);
  letter-spacing: var(--track-01);
  color: var(--ink);
  line-height: 1.05;
}
.review-detail-sub { font-size: var(--fs-12); color: var(--ink-muted); }
.review-detail-tools {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.review-version-picker {
  font: inherit;
  font-size: var(--fs-12);
  font-weight: var(--fw-semi);
  padding: 6px 12px;
  border-radius: var(--r-round);
  border: 1px solid var(--card-border);
  background: color-mix(in srgb, var(--cream) 85%, transparent);
  color: var(--ink);
  cursor: pointer;
  max-width: 240px;
}

/* Body: video stage left, comments column right. The stage sizes
   itself to the project's aspect ratio (no longer stretches to
   fill the panel); the comments column matches the stage height
   and scrolls internally. */
.review-detail-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 14px;
  align-items: stretch;
}

/* ─── Video stage + custom toolbar ──────────────────────────────── */

/* The stage column holds the dark video frame on top and the custom
   toolbar (play, timecode, gold timeline, volume, fullscreen)
   directly below. The timeline sits in the cream panel, NOT inside
   the dark frame. */
.review-stage-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.review-stage {
  position: relative;
  width: 100%;
  /* v06p — aspect-ratio is set inline from the video's actual
     source dimensions on metadata load. Defaults to project
     aspect until metadata arrives. The video element fills the
     frame edge-to-edge — no internal padding. */
  background: var(--black);
  border-radius: var(--r-card);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--cream-3) 10%, transparent);
}
.review-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: var(--black);
  cursor: pointer;
  object-fit: cover;
}
/* v07zz372 — chosen cover sits over the stage until playback actually starts (no first-frame /
   resume-seek flicker). Rendered after <video> so it stacks above it; the play button is rendered
   after this, so it stays clickable on top. */
.review-cover-still {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: var(--black);
  object-fit: cover;
  cursor: pointer;
}

/* v07zz209 — A/B compare. The stage(s) live in a flex row. With one edit it's a
   single full-width stage (no layout change vs. before). In compare mode the row
   holds two equal-width stages side by side. */
.review-stage-row {
  display: flex;
  gap: 10px;
  min-width: 0;
  align-items: flex-start;
  /* v07zz373 — the stage caps its width (height ≤ 54vh) so it can't grow past the
     viewport on a big/full-screen browser; centre the leftover space. */
  justify-content: center;
}
.review-stage-row > .review-stage { flex: 1 1 0; min-width: 0; }
.review-compare {
  flex: 1 1 0;
  min-width: 0;
  position: relative;
}
.review-compare-stage {
  /* inherits .review-stage box; the <video controls> fills it */
}
.review-compare-stage .review-video { cursor: pointer; }   /* v07zz210 — click-to-play (native controls removed) */
/* Floating header over the compare stage: edit picker + exit button. Kept as an
   overlay so the compare video stays top-aligned with the primary one. */
.review-compare-head {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 14px;
  background: linear-gradient(to bottom, color-mix(in srgb, var(--shade-32) 72%, transparent), color-mix(in srgb, var(--shade-32) 0%, transparent));
  border-radius: 14px 14px 0 0;
  pointer-events: none;   /* let clicks pass to the video except on the controls */
}
.review-compare-pick,
.review-compare-close { pointer-events: auto; }
.review-compare-pick {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
  font: 600 11px/1.2 "Inter", system-ui, sans-serif;
  letter-spacing: var(--track-01);
  color: var(--ink-paper);
  background: color-mix(in srgb, var(--shade-31) 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--cream-3) 22%, transparent);
  border-radius: var(--r-sm);
  padding: 5px 8px;
  cursor: pointer;
}
.review-compare-pick:focus { outline: none; border-color: color-mix(in srgb, var(--cream-3) 50%, transparent); }
.review-compare-close {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-paper);
  background: color-mix(in srgb, var(--shade-31) 82%, transparent);
  border: 1px solid color-mix(in srgb, var(--cream-3) 22%, transparent);
  border-radius: var(--r-7);
  cursor: pointer;
}
.review-compare-close:hover { background: color-mix(in srgb, var(--shadow-ink) 92%, transparent); }
/* Centred play-button overlay shown when the video is paused.
   Soft warm circle so it doesn't fight the cream UI. */
.review-stage-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--cream-2) 90%, transparent);
  border: 1px solid color-mix(in srgb, var(--tan-deep) 50%, transparent);
  color: var(--ink, var(--ink-umber));
  cursor: pointer;
  display: grid;
  place-items: center;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  transition: transform var(--dur-2) ease, background var(--dur-2) ease;
  z-index: 2;
}
.review-stage-play:hover {
  background: var(--cream);
  transform: translate(-50%, -50%) scale(1.05);
}

/* v1076 — the pill a player shows while it reconnects after a server restart.
   Absolute, so the stage never changes size; at the top, because the burned-in shot
   number runs along the bottom of the frame. */
.review-stage-heal {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  padding: 5px 12px;
  border-radius: var(--r-round);
  background: color-mix(in srgb, var(--cream-2) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--tan-deep) 45%, transparent);
  color: var(--ink, var(--ink-umber));
  font-family: "Inter", system-ui, sans-serif;
  font-size: var(--fs-11);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-03);
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  backdrop-filter: blur(6px);
}

/* Toolbar sits below the dark frame in the cream panel. */
.review-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--cream-2) 65%, transparent);
  border: 1px solid var(--card-border);
  border-radius: var(--r-panel);
  flex-shrink: 0;
}
/* v07zz210 — Split toolbar for A/B compare. When NOT comparing the toolbar is a
   single flex row exactly as before (the single .review-toolbar-half stretches
   to fill, so nothing about the solo layout changes). When comparing, the
   toolbar holds TWO equal halves side by side, each aligned under its stage. */
.review-toolbar-half {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 0;
  min-width: 0;
}
.review-toolbar.with-compare { gap: 10px; align-items: stretch; }
.review-toolbar.with-compare .review-toolbar-half { flex: 1 1 0; min-width: 0; }
/* Thin divider between the two transports so they read as separate timelines. */
.review-toolbar.with-compare .review-toolbar-half.is-compare {
  border-left: 1px solid color-mix(in srgb, var(--tan-deep) 22%, transparent);
  padding-left: 10px;
}
.review-toolbar-play,
.review-toolbar-fs {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--cream) 85%, transparent);
  border: 1px solid var(--card-border);
  color: var(--ink);
  cursor: pointer;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: background var(--dur-1) ease;
}
.review-toolbar-play:hover,
.review-toolbar-fs:hover { background: color-mix(in srgb, var(--leaf) 20%, transparent); }
/* v1075 — the 1080p / 4K switch beside fullscreen: the same toolbar button, a fixed width so
   the label change never moves the toolbar. Gold when the full 4K master is playing. */
.review-toolbar-fs.review-quality-btn {
  width: 50px;
  padding: 0;
  border-radius: var(--r-round);             /* a pill, not the 28px circle's ellipse */
  font-size: var(--fs-10-5);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-04);
  font-variant-numeric: tabular-nums;
}
.review-toolbar-fs.review-quality-btn.is-on { background: color-mix(in srgb, var(--gold-12) 24%, transparent); color: color-mix(in srgb, var(--ink-tan-deep) 88%, var(--mix-dark)); }
/* v07zz177 — "Set cover" is an icon-only square button (same shape as the
   rename button); turns green briefly when the cover is saved. */
.review-meta-editbtn:disabled { opacity: 0.6; cursor: default; }
.review-cover-saved {
  color: color-mix(in srgb, var(--olive-4) 63%, var(--mix-dark)) !important;
  border-color: color-mix(in srgb, var(--ok) 70%, transparent) !important;
  background: color-mix(in srgb, var(--ok) 22%, transparent) !important;
}
.review-tc {
  font-family: var(--font-mono, "JetBrains Mono"), monospace;
  font-size: var(--fs-11-5);
  font-weight: var(--fw-semi);
  color: var(--ink);
  white-space: nowrap;
  min-width: 88px;
}
.review-tc-sep { margin: 0 4px; color: var(--ink-muted); }
/* v06p — Timeline restyled to mirror the topbar's project-deadline
   progress bar: 16px glass pill, cream backdrop with a full-width
   rainbow tint, and a VIVID green→amber→red gradient fill that's
   sized to the playhead. The full rainbow reads across the entire
   bar (Hugo: "gradient should be from start to finish, not from
   start to where the playhead is") because the track itself
   carries the colours at low opacity, with the fill overlaid in
   vivid form up to the current time. */
.review-progress {
  position: relative;
  flex: 1 1 0;
  height: 16px;
  border-radius: var(--r-round);
  border: 1px solid color-mix(in srgb, color-mix(in srgb, var(--umber-4) 67%, var(--mix-dark)) 22%, transparent);
  background:
    linear-gradient(to right,
      color-mix(in srgb, var(--signal-green) 18%, transparent) 0%,
      color-mix(in srgb, var(--signal-amber) 18%, transparent) 50%,
      color-mix(in srgb, var(--signal-red) 18%, transparent) 100%),
    color-mix(in srgb, color-mix(in srgb, var(--cream-6) 97%, var(--mix-light)) 65%, transparent);
  box-shadow:
    inset 0 1.5px 1.5px color-mix(in srgb, var(--shadow-ink) 40%, transparent),
    inset 0 -0.5px 0.5px color-mix(in srgb, var(--shadow-ink) 25%, transparent);
  cursor: pointer;
  overflow: visible;
  user-select: none;
}
.review-progress.is-scrubbing { cursor: grabbing; }
/* Fill: vivid rainbow with the same donut-style 3D shading the
   topbar uses, sized to the playhead via background-size trick so
   the right edge matches the track's faded colour at any
   position. */
.review-progress-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: var(--r-round);
  background:
    linear-gradient(to bottom,
      color-mix(in srgb, color-mix(in srgb, var(--leaf-bright) 15%, var(--mix-dark)) 45%, transparent) 0%,
      color-mix(in srgb, var(--mix-light) 12%, transparent) 55%,
      color-mix(in srgb, var(--mix-light) 45%, transparent) 100%),
    linear-gradient(to right, var(--signal-green) 0%, var(--signal-amber) 50%, var(--signal-red) 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: left center, left center;
  /* Stretch the colour gradient relative to current width so the
     right-edge tint always matches where the playhead is on the
     full-width rainbow underneath. */
  background-size:
    100% 100%,
    calc(100% * 100 / var(--review-fill-pct, 100)) 100%;
  opacity: 1;
  pointer-events: none;
  width: 0%;
  box-shadow: inset 0 -1px 0 color-mix(in srgb, color-mix(in srgb, var(--leaf-deep) 43%, var(--mix-dark)) 30%, transparent);
}
/* White glass top sheen — matches the topbar's pill style. */
.review-progress-fill::before {
  content: "";
  position: absolute;
  left: 4px; right: 4px;
  top: 2px;
  height: 4px;
  border-radius: var(--r-round);
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--mix-light) 95%, transparent) 0%,
    color-mix(in srgb, var(--mix-light) 55%, transparent) 45%,
    color-mix(in srgb, var(--mix-light) 0%, transparent) 100%);
  pointer-events: none;
}
.review-progress-fill::after {
  content: "";
  position: absolute;
  left: 6px; right: 6px;
  bottom: 1.5px;
  height: 3px;
  border-radius: var(--r-round);
  background: linear-gradient(to top,
    color-mix(in srgb, var(--mix-light) 45%, transparent) 0%,
    color-mix(in srgb, var(--mix-light) 12%, transparent) 60%,
    color-mix(in srgb, var(--mix-light) 0%, transparent) 100%);
  pointer-events: none;
}
/* Playhead handle — small cream pearl on the fill edge. */
.review-progress-handle {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--cream);
  border: 2px solid color-mix(in srgb, var(--shadow-ink) 55%, transparent);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--shadow-ink) 35%, transparent);
  pointer-events: none;
  transition: transform 80ms ease;
  z-index: 2;
}
.review-progress:hover .review-progress-handle,
.review-progress.is-scrubbing .review-progress-handle {
  transform: translate(-50%, -50%) scale(1.15);
}
/* Note markers — thin pins sitting astride the bar. Width
   shrunk to 5px (was 12px) per Hugo so they read as pins, not
   chunks. Height extended slightly beyond the bar so they're
   tappable without overlapping the playhead. */
.review-marker {
  position: absolute;
  top: -3px;
  width: 5px;
  height: 22px;
  margin-left: -2.5px;
  background: color-mix(in srgb, var(--gold-13) 71%, var(--mix-light));
  border: 1px solid color-mix(in srgb, var(--shadow-ink) 55%, transparent);
  border-radius: 2px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
  transition: transform var(--dur-1) ease, background var(--dur-1) ease;
  z-index: 3;
}
.review-marker:hover { transform: scaleY(1.10) scaleX(1.6); background: color-mix(in srgb, var(--gold-13) 43%, var(--mix-light)); }
.review-marker.is-current {
  background: color-mix(in srgb, var(--gold-13) 43%, var(--mix-light));
  transform: scaleY(1.10) scaleX(1.6);
  box-shadow: 0 0 0 2px color-mix(in srgb, color-mix(in srgb, var(--gold-13) 68%, var(--mix-light)) 55%, transparent), 0 1px 3px rgba(0, 0, 0, 0.30);
}
.review-marker.is-resolved { background: var(--olive-8); opacity: 0.65; }
.review-volume {
  flex-shrink: 0;
  width: 80px;
  accent-color: var(--olive-7);
}

/* ─── Comments column (Frame.io-style) ──────────────────────────── */
.review-side {
  display: flex;
  flex-direction: column;
  background: color-mix(in srgb, var(--cream) 55%, transparent);
  border: 1px solid var(--card-border);
  border-radius: var(--r-card);
  min-height: 0;
  overflow: hidden;
}
.review-side-head {
  flex-shrink: 0;
  padding: 12px 14px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--tan-deep) 18%, transparent);
}
.review-side-title {
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-18);
  color: var(--ink-muted);
  text-transform: uppercase;
}
.review-side-tabs {
  display: flex;
  gap: 4px;
}
.review-side-tab {
  flex: 1;
  font: inherit;
  font-size: var(--fs-11-5);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-02);
  padding: 7px 8px 9px;
  border: none;
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.review-side-tab:hover { color: var(--ink); }
.review-side-tab.is-active {
  color: var(--ink);
  border-bottom-color: var(--gold-12);
}
.review-side-tab-count {
  display: inline-block;
  min-width: 18px;
  padding: 1px 6px;
  border-radius: var(--r-round);
  background: color-mix(in srgb, var(--tan-deep) 16%, transparent);
  color: var(--ink);
  font-size: var(--fs-10);
  font-weight: var(--fw-bold);
  font-family: var(--font-mono, monospace);
}
.review-side-tab.is-active .review-side-tab-count {
  background: color-mix(in srgb, var(--gold-12) 30%, transparent);
}

.review-comments-scroll {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 12px 12px;
  scrollbar-gutter: stable;
}

/* Draft note composer */
.review-draft {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--gold-12) 55%, transparent);
  border-radius: var(--r-panel);
  background: color-mix(in srgb, var(--hi-3) 45%, transparent);
  margin-bottom: 10px;
}
.review-draft-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.review-draft-tc {
  font-family: var(--font-mono, monospace);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  color: var(--ink-tan-deep);
  padding: 3px 8px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--gold-12) 18%, transparent);
}
.review-draft-label {
  font-size: var(--fs-11);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-04);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.review-draft-input {
  font: inherit;
  font-size: var(--fs-12-5);
  line-height: 1.45;
  padding: 8px 10px;
  border-radius: var(--r-xs);
  border: 1px solid var(--card-border);
  background: color-mix(in srgb, var(--cream) 95%, transparent);
  color: var(--ink);
  outline: none;
  resize: vertical;
  min-height: 70px;
}
.review-draft-input:focus {
  border-color: color-mix(in srgb, var(--gold-12) 80%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold-12) 18%, transparent);
}
.review-draft-actions { display: flex; gap: 6px; justify-content: flex-end; }

/* Button styles shared by draft + reply forms + composer */
.review-btn-ghost,
.review-btn-primary {
  font: inherit;
  font-size: var(--fs-11-5);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-04);
  padding: 6px 12px;
  border-radius: var(--r-7);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--dur-1) ease, border-color var(--dur-1) ease;
}
.review-btn-ghost {
  background: transparent;
  color: var(--ink-muted);
  border-color: var(--card-border);
}
.review-btn-ghost:hover { color: var(--ink); background: color-mix(in srgb, var(--cream-2) 85%, transparent); }
.review-btn-primary {
  background: color-mix(in srgb, var(--leaf) 88%, transparent);
  color: var(--ink-cream);
  border-color: color-mix(in srgb, var(--olive-2) 95%, transparent);
}
.review-btn-primary:hover:not(:disabled) { background: var(--olive-2); }
.review-btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.review-btn-fullwidth { width: 100%; padding: 9px 12px; }

/* Comment list */
.review-comments {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.review-comments-empty {
  padding: 24px 12px;
  text-align: center;
  color: var(--ink-muted);
  font-size: var(--fs-12);
  font-style: italic;
  line-height: 1.6;
}
.review-comments-empty kbd {
  display: inline-block;
  padding: 1px 6px;
  margin: 0 2px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--tan-deep) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--tan-deep) 32%, transparent);
  font-size: var(--fs-10-5);
  font-family: var(--font-mono, monospace);
  font-style: normal;
  color: var(--ink);
}
.review-comment-thread { display: flex; flex-direction: column; gap: 6px; }
.review-comment {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--card-border);
  border-radius: var(--r-panel);
  background: color-mix(in srgb, var(--cream) 65%, transparent);
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease, box-shadow var(--dur-4) ease;
}
.review-comment:hover {
  background: color-mix(in srgb, var(--cream) 95%, transparent);
  border-color: color-mix(in srgb, var(--tan-deep) 45%, transparent);
}
/* v1074 — the note under the playhead (lit until the next note starts), refined after
   Hugo: "still too thick, and the non highlight part of the note is too dark ... the
   highlights doesnt seem to follow any light direction". ONE light, from the top-left:
   - ::before = a 1px gold ring laid exactly over the 1px border: light gold along the top,
     deepening a little towards the bottom (the side that faces away from the light), with
     one small white glint where the light strikes the top edge near the left;
   - ::after  = a light gold wash, brightest at the top, with a fine white bevel line just
     inside the top edge; it sits behind the text (isolation + z-index -1);
   - outside  = a soft warm glow and a faint shadow below.
   Both layers fade (opacity), the border stays 1px, so nothing moves. */
.review-comment {
  position: relative;
  isolation: isolate;               /* keeps the wash (z-index -1) inside this card */
  transition: background 200ms ease, border-color 200ms ease, box-shadow var(--dur-4) ease;
}
.review-comment::before {
  content: "";
  position: absolute;
  inset: -1px;                      /* exactly over the 1px border */
  border-radius: inherit;
  padding: 1px;                     /* ring width */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  background:
    radial-gradient(60px 6px at 22% 0, var(--mix-light) 0%, color-mix(in srgb, var(--mix-light) 0%, transparent) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--gold-10) 71%, var(--mix-light)) 0%, color-mix(in srgb, var(--gold-14) 87%, var(--mix-light)) 55%, color-mix(in srgb, var(--gold) 90%, var(--mix-dark)) 100%);
  opacity: 0;
  transition: opacity var(--dur-5) ease;
  pointer-events: none;
}
.review-comment::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  background: linear-gradient(180deg, color-mix(in srgb, color-mix(in srgb, var(--hi-2) 58%, var(--mix-light)) 98%, transparent), color-mix(in srgb, color-mix(in srgb, var(--hi-3) 89%, var(--mix-light)) 96%, transparent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
  opacity: 0;
  transition: opacity var(--dur-5) ease;
  pointer-events: none;
}
.review-comment.is-current {
  border-color: transparent;
  box-shadow: 0 0 12px color-mix(in srgb, color-mix(in srgb, var(--gold-3) 92%, var(--mix-dark)) 16%, transparent), 0 1px 2px color-mix(in srgb, color-mix(in srgb, var(--tan-deep) 87%, var(--mix-dark)) 8%, transparent);
}
.review-comment.is-current::before,
.review-comment.is-current::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .review-comment::before, .review-comment::after { transition: none; }
}
.review-comment.is-resolved { opacity: 0.55; }
.review-comment.is-resolved .review-comment-text { text-decoration: line-through; }
.review-comment-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ink-cream);
  font-size: var(--fs-10);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-04);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
}
.review-comment-avatar--reply { width: 24px; height: 24px; font-size: var(--fs-9); }
.review-comment-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-11);
  color: var(--ink-muted);
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.review-comment-author { font-weight: var(--fw-bold); color: var(--ink); font-size: var(--fs-12); }
.review-comment-tc-btn {
  font: inherit;
  font-family: var(--font-mono, monospace);
  font-size: var(--fs-10-5);
  font-weight: var(--fw-bold);
  padding: 2px 7px;
  border-radius: 4px;
  border: 1px solid color-mix(in srgb, var(--tan-deep) 30%, transparent);
  background: color-mix(in srgb, var(--cream-2) 85%, transparent);
  color: color-mix(in srgb, var(--ink-tan-deep) 81%, var(--mix-dark));
  cursor: pointer;
}
.review-comment-tc-btn:hover { background: var(--cream-2); border-color: color-mix(in srgb, var(--tan-deep) 55%, transparent); }
.review-comment-date { font-size: var(--fs-10-5); color: var(--ink-muted); }
.review-comment-resolved-tag {
  font-size: var(--fs-9-5);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-06);
  color: var(--ink-forest-5);
  text-transform: uppercase;
  background: color-mix(in srgb, var(--ok) 18%, transparent);
  border-radius: 4px;
  padding: 2px 6px;
}
.review-comment-text {
  font-size: var(--fs-12-5);
  line-height: 1.5;
  color: var(--ink);
  white-space: pre-wrap;
  word-wrap: break-word;
}
.review-comment-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.review-comment-action {
  font: inherit;
  font-size: var(--fs-10-5);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-04);
  text-transform: uppercase;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--ink-muted);
  cursor: pointer;
}
.review-comment-action:hover { color: var(--ink); text-decoration: underline; }
.review-comment-action--resolve { color: var(--ink-forest-5); }
.review-comment-action--resolve:hover { color: color-mix(in srgb, var(--ink-forest-5) 70%, var(--mix-dark)); }

/* Replies */
.review-replies {
  list-style: none;
  margin: 0 0 0 22px;
  padding: 0 0 0 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-left: 2px solid color-mix(in srgb, var(--tan-deep) 25%, transparent);
}
.review-comment--reply {
  grid-template-columns: 24px 1fr;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--cream) 50%, transparent);
  cursor: default;
}

/* Reply composer */
.review-reply-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 0 22px;
  padding: 8px 10px;
  background: color-mix(in srgb, var(--leaf) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--leaf) 45%, transparent);
  border-radius: var(--r-sm);
}
.review-reply-input {
  font: inherit;
  font-size: var(--fs-12);
  padding: 6px 8px;
  border-radius: var(--r-xs);
  border: 1px solid var(--card-border);
  background: color-mix(in srgb, var(--cream) 95%, transparent);
  resize: vertical;
  outline: none;
}
.review-reply-input:focus {
  border-color: color-mix(in srgb, var(--leaf) 70%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--leaf) 15%, transparent);
}
.review-reply-actions { display: flex; gap: 6px; justify-content: flex-end; }

/* Sticky "Add note at <TC>" button at the bottom of the column */
.review-side-composer {
  flex-shrink: 0;
  padding: 10px 12px;
  border-top: 1px solid color-mix(in srgb, var(--tan-deep) 18%, transparent);
  background: color-mix(in srgb, var(--cream-2) 55%, transparent);
}

/* ─── Other versions strip (below the body) ──────────────────── */

.review-other-versions {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.review-other-versions-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 0 4px;
}
.review-other-versions-title {
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-18);
  color: var(--ink-muted);
  text-transform: uppercase;
}
.review-other-versions-count {
  font-size: var(--fs-11);
  color: var(--ink-muted);
  font-family: var(--font-mono, monospace);
}
.review-other-versions-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 180px;
  gap: 10px;
  /* v1010 — always "scroll", never "auto": the scrollbar gutter is reserved even
     when the row is short, so showing/hiding versions can't change the row's
     height and push everything below it down. */
  overflow-x: scroll;
  padding: 4px 4px 8px;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--tan-deep) 40%, transparent) transparent;
}
.review-other-card {
  display: flex;
  flex-direction: column;
  text-align: left;
  background: color-mix(in srgb, var(--cream-2) 65%, transparent);
  border: 1px solid var(--card-border);
  border-radius: var(--r-panel);
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--dur-1) ease, border-color var(--dur-1) ease;
  font: inherit;
  color: inherit;
}
.review-other-card:hover {
  border-color: color-mix(in srgb, var(--gold-15) 65%, transparent);
  transform: translateY(-2px);
}
/* v07zz364 — the edit currently being viewed: gold highlight ring in the strip. */
.review-other-card.is-current {
  border-color: var(--gold-13);
  box-shadow: 0 0 0 2px var(--gold-13), 0 4px 14px color-mix(in srgb, var(--shade) 18%, transparent);
  cursor: default;
}
.review-other-card.is-current:hover { transform: none; }
.review-other-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: var(--project-aspect, 21 / 9);
  background-color: color-mix(in srgb, var(--tan-deep) 10%, transparent);
  overflow: hidden;
}
.review-other-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.review-other-version {
  position: absolute;
  top: 6px;
  left: 6px;
  font-family: var(--font-mono, monospace);
  font-size: var(--fs-10);
  font-weight: var(--fw-bold);
  padding: 2px 7px;
  border-radius: var(--r-round);
  background: color-mix(in srgb, var(--shade-13) 65%, transparent);
  color: var(--ink-on-dark);
  backdrop-filter: blur(4px);
}
.review-other-body {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.review-other-title {
  font-size: var(--fs-12-5);
  font-weight: var(--fw-semi);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.review-other-date {
  font-size: var(--fs-10-5);
  color: var(--ink-muted);
}

/* ─── Card delete affordance (list view) ─────────────────────── */

.review-card { position: relative; }
.review-card-main {
  display: flex;
  flex-direction: column;
  text-align: left;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  width: 100%;
}
.review-card-delete {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--shade-13) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--cream-3) 20%, transparent);
  color: var(--ink-cream);
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity var(--dur-2) ease, background var(--dur-2) ease;
  backdrop-filter: blur(4px);
}
.review-card:hover .review-card-delete { opacity: 0.92; }
.review-card-delete:hover { background: color-mix(in srgb, var(--danger-soft) 85%, transparent); }
.review-card-confirm {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--cream-2) 95%, transparent);
  border-radius: var(--r-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  z-index: 3;
}
.review-card-confirm-text {
  font-size: var(--fs-13);
  font-weight: var(--fw-semi);
  color: var(--ink);
}
.review-card-confirm-actions {
  display: inline-flex;
  gap: 8px;
}
.review-card-confirm-delete {
  font: inherit;
  font-size: var(--fs-11-5);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-04);
  padding: 6px 12px;
  border-radius: var(--r-7);
  background: color-mix(in srgb, var(--danger-soft) 88%, transparent);
  color: var(--ink-cream);
  border: 1px solid color-mix(in srgb, var(--danger-soft) 95%, transparent);
  cursor: pointer;
}
.review-card-confirm-delete:hover { background: var(--danger-soft); }

/* Responsive: stack the body on narrow screens. */
@media (max-width: 1100px) {
  .review-detail-body { grid-template-columns: 1fr; }
  .review-side { max-height: 420px; }
}

/* v07zz247 — Presentations cards now open the in-app deck review viewer when the
   deck carries a frozen snapshot. Card is a button; add the secondary PDF link. */
.rev-pres-card { cursor: pointer; }
.rev-pres-card.is-reviewable:hover { box-shadow: 0 6px 18px color-mix(in srgb, var(--gold) 22%, transparent); border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.rev-pres-ver { color: var(--red-23); font-weight: var(--fw-bold); }
.rev-pres-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }
.rev-pres-actions .rev-pres-open { color: var(--red-22); }
.rev-pres-pdf { font-size: var(--fs-11-5); font-weight: var(--fw-bold); color: color-mix(in srgb, var(--ink-tan-deep) 91%, var(--mix-dark)); text-decoration: none; padding: 4px 8px; border: 1px solid color-mix(in srgb, var(--gold-7) 40%, transparent); border-radius: var(--r-7); }
.rev-pres-pdf:hover { background: color-mix(in srgb, var(--gold-7) 12%, transparent); }

/* v07zz261 — deck type filter chips on the Presentations tab. Hidden until there's
   more than one deck type, so "show all" is the default and never an extra step. */
.review-pres-wrap { display: flex; flex-direction: column; }
.review-typebar { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }
.review-typechip { font: inherit; font-size: var(--fs-12); font-weight: var(--fw-semi); padding: 5px 13px; border-radius: var(--r-round); border: 1px solid color-mix(in srgb, var(--gold-7) 40%, transparent); background: color-mix(in srgb, var(--cream-2) 50%, transparent); color: color-mix(in srgb, var(--ink-tan-deep) 95%, var(--mix-light)); cursor: pointer; transition: background var(--dur-1) ease, color var(--dur-1) ease, border-color var(--dur-1) ease; }
.review-typechip:hover { border-color: color-mix(in srgb, var(--gold) 70%, transparent); color: color-mix(in srgb, var(--ink-umber-4) 83%, var(--mix-dark)); }
.review-typechip.is-on { background: var(--gold); border-color: var(--gold); color: var(--white); }

/* v07zz267 — cards FADE in on appear (cold load) instead of popping in. Transform +
   opacity only (compositor) so there's no layout shift. Applies to Edits + Decks. */
@keyframes reviewCardIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.review-card { animation: reviewCardIn 300ms ease both; }

/* v1010 — the film strip is now two rows: EDIT VERSIONS on top, SEQUENCES under
   it, with a toggle for versions the admin has hidden (needs_review = 0). */
.review-other-versions-head--sub {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft-2);
}
.review-hidden-toggle {
  margin-left: auto;
  font-size: var(--fs-10);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-10);
  text-transform: uppercase;
  color: var(--ink-muted);
  background: transparent;
  border: 1px solid var(--line-soft-3);
  border-radius: var(--r-round);
  padding: 3px 10px;
  cursor: pointer;
  transition: color var(--dur-1) ease, border-color var(--dur-1) ease, background var(--dur-1) ease;
}
.review-hidden-toggle:hover {
  color: var(--ink);
  border-color: var(--ink-muted);
  background: color-mix(in srgb, var(--black) 4%, transparent);
}
/* A hidden version, shown only while the toggle is on: greyed back so it reads
   as excluded without losing its thumbnail. */
.review-other-card.is-hidden-version .review-other-thumb { opacity: 0.42; }
.review-other-card.is-hidden-version .review-other-body  { opacity: 0.55; }
.review-other-card.is-hidden-version:hover .review-other-thumb,
.review-other-card.is-hidden-version:hover .review-other-body { opacity: 1; }
.review-other-card.is-hidden-version.is-current .review-other-thumb,
.review-other-card.is-hidden-version.is-current .review-other-body { opacity: 1; }
/* Placeholder card: holds the row's height open when every card in it is
   hidden, so toggling never moves anything below the strip. */
.review-other-card--empty {
  cursor: default;
  background: color-mix(in srgb, var(--cream-2) 30%, transparent);
  border-style: dashed;
  opacity: 0.60;
}
.review-other-card--empty:hover { transform: none; border-color: var(--card-border); }

/* v1014 — visible -10 / -5 / +5 / +10 skips either side of play. Markus asked
   for "a scroll forward and back button"; J/L already did +/-5s but only as
   invisible keyboard shortcuts, and only on the Review page. Fixed width and
   height, so adding them cannot change the toolbar's size. */
.review-skip {
  flex: none;
  min-width: 34px;
  height: 24px;
  padding: 0 6px;
  font-family: var(--font-mono, "JetBrains Mono"), monospace;
  font-size: var(--fs-10-5);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  background: color-mix(in srgb, var(--cream) 72%, transparent);
  border: 1px solid var(--card-border);
  border-radius: var(--r-xs);
  cursor: pointer;
  transition: background var(--dur-1) ease, border-color var(--dur-1) ease;
}
.review-skip:hover { background: color-mix(in srgb, var(--leaf) 22%, transparent); border-color: color-mix(in srgb, var(--olive) 60%, transparent); }
.review-skip:active { background: color-mix(in srgb, var(--leaf) 34%, transparent); }

/* v1024 — "Follow": keep the note you are watching in view as the video plays.
   Sits with the All / Open / Resolved tabs. Fixed size, so toggling it cannot
   move the tab row. */
.review-follow-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 9px;
  font-size: var(--fs-10);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-08);
  text-transform: uppercase;
  color: var(--ink-muted);
  background: transparent;
  border: 1px solid var(--line-soft-4);
  border-radius: var(--r-round);
  cursor: pointer;
  transition: color var(--dur-1) ease, border-color var(--dur-1) ease, background var(--dur-1) ease;
}
.review-follow-btn:hover { color: var(--ink); border-color: var(--ink-muted); }
.review-follow-btn.is-on {
  color: var(--ink-forest-3);
  border-color: color-mix(in srgb, var(--olive) 55%, transparent);
  background: color-mix(in srgb, var(--olive) 16%, transparent);
}