/* t14 — Asset Review Modal.
   Full-screen overlay: deep dark green backdrop, large preview centred,
   filmstrip of versions along the bottom, NotesPanel on the right.
   Cinematic feel — uses the existing palette (cream / leaf / amber)
   on a darker stage. */

/* v07v — Backdrop fully inherits `.modal-backdrop` (defined in
   modal.css) so the AssetReviewModal dim + blur exactly matches every
   other popup in the app. The earlier v07u override (darker green +
   6px blur) was inconsistent with the default style; Hugo wants the
   same backdrop everywhere. Only the z-index bump is retained so this
   review modal stacks ABOVE any default modal it might be opened on
   top of (e.g. an asset modal launched from a shot popup). The modal
   is portaled to #modal-root (see AssetReviewModal in Views.jsx) so
   the fixed-position backdrop actually covers the viewport rather
   than being trapped inside .view-page's backdrop-filter ancestor. */
.arm-backdrop {
  z-index: var(--z-overlay);
}

.arm-shell {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  /* v07z — THE ACTUAL ROOT-CAUSE FIX. Without an explicit
     grid-template-columns, the shell's grid defaults to a single
     `auto` column which sizes itself to MAX-CONTENT — the 3840px
     natural width of a 4K archival image. That column then propagates
     to every descendant (body width:100% → 3840, stage width:100% →
     3840, image width:100% → 3840), and `overflow:hidden` clips the
     right portion. Browser DevTools confirmed: shell was 385px wide
     but its inner column was 3872px. Setting
     `grid-template-columns: minmax(0, 1fr)` forces the column to be
     exactly the shell's content width, no content-size expansion. */
  grid-template-columns: minmax(0, 1fr);
  /* v06k/v07zz399 — Hugo: the review viewer (the filmstrip panel) should take NEARLY
     the whole page width so the image is large. Was 1500px → now near-full-viewport
     (capped at 2200px for huge monitors). Notes column stays compact so the image
     gets the room. */
  width: min(2200px, calc(100vw - 48px));
  /* v07x — min-width:0 stops the shell ITSELF from being inflated by
     the same content-size mechanism in the outer .modal-backdrop grid. */
  min-width: 0;
  height: auto;
  max-height: calc(100vh - 24px);
  background: linear-gradient(180deg, var(--shade-51) 0%, var(--shade-52) 100%);
  border-radius: var(--r-card);
  border: 1px solid color-mix(in srgb, var(--cream-3) 8%, transparent);
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 color-mix(in srgb, var(--cream-3) 10%, transparent);
  color: var(--ink-cream-3);
  font-family: var(--font-body);
  overflow: hidden;
  animation: arm-pop var(--dur-4) var(--ease-pop);
}
@keyframes arm-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.99); }
  to   { opacity: 1; transform: none; }
}
.arm-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--cream-3) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--cream-3) 18%, transparent);
  color: var(--ink-cream-3);
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 5;
  transition: background var(--dur-2) ease, border-color var(--dur-2) ease;
}
.arm-close:hover { background: color-mix(in srgb, var(--cream-3) 18%, transparent); border-color: color-mix(in srgb, var(--cream-3) 40%, transparent); }

.arm-head {
  display: flex;
  justify-content: space-between;
  /* v06x — align the right cluster (SQA + status) with the SUBTITLE
     row of the head-left, not the title. Both ends use `flex-end`
     baselines but the right side has extra padding-bottom so the
     pills sit on the subtitle line. */
  align-items: flex-end;
  gap: 16px;
  padding: 18px 64px 14px 22px;
  border-bottom: 1px solid color-mix(in srgb, var(--cream-3) 8%, transparent);
}
/* v06s/v06x — Right side of the header holds the SQA quick-action
   bar + the optional status pill. Aligned to the SUBTITLE baseline
   so the row sits below the title — `align-self: flex-end` with no
   top/center offset puts it on the same line as .arm-subtitle. */
.arm-head-right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-end;
  margin-bottom: 0;
}
/* v07b/v07c/v07d — Filmstrip pill matches the existing `.arm-status`
   style (the dark-themed "VIDEO WIP" pill). Inline-flex with a small
   star icon + uppercase label, both centered. v07d: explicit body
   font + font-smoothing kill the aliased / crunchy text on dark bg. */
.arm-hero-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--r-round);
  background: color-mix(in srgb, var(--cream-3) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--cream-3) 20%, transparent);
  color: var(--ink-cream-3);
  font-family: var(--font-body);
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: var(--track-08);
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: background var(--dur-2) ease, border-color var(--dur-2) ease,
              box-shadow 140ms ease, transform 90ms ease;
}
.arm-hero-pill:hover {
  background: color-mix(in srgb, var(--cream-3) 18%, transparent);
  border-color: color-mix(in srgb, var(--cream-3) 40%, transparent);
  transform: translateY(-1px);
}
.arm-hero-pill.is-active {
  background: color-mix(in srgb, var(--gold-2) 22%, transparent);
  border-color: color-mix(in srgb, var(--gold-2) 65%, transparent);
  color: color-mix(in srgb, var(--gold-13) 54%, var(--mix-light));
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--gold-2) 35%, transparent),
    0 0 12px color-mix(in srgb, var(--gold-2) 28%, transparent);
}
.arm-hero-pill-star {
  display: inline-grid;
  place-items: center;
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}
.arm-hero-pill-label { display: inline-block; line-height: 1; }
.arm-head-left { min-width: 0; }
.arm-eyebrow {
  font-size: var(--fs-10-5);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-16);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink-cream-3) 65%, transparent);
}
.arm-title {
  margin-top: 4px;
  font-family: var(--font-display, "Bebas Neue"), sans-serif;
  font-size: var(--fs-28);
  line-height: 1;
  letter-spacing: var(--track-005);
  color: var(--ink-cream-3);
}
.arm-subtitle {
  margin-top: 4px;
  font-size: var(--fs-11-5);
  letter-spacing: var(--track-06);
  color: color-mix(in srgb, var(--ink-cream-3) 65%, transparent);
  text-transform: uppercase;
}
.arm-status {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--r-round);
  background: color-mix(in srgb, var(--cream-3) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--cream-3) 20%, transparent);
  color: var(--ink-cream-3);
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-08);
  text-transform: uppercase;
}

.arm-body {
  display: grid;
  /* v06k — narrower notes column (320 → 280) frees more width for the
     hero.
     v07u — dropped the `min-height: 360px` along with the matching rule
     on .arm-stage. With the media constrained by max-height: 70vh and
     `height: auto` on the shell, the body sizes to the image's
     intrinsic shape rather than padding the panel to a fixed minimum
     that doesn't match 16:9 4K content.
     v07x — Same `min-width: 0` story as .arm-shell — the body is a
     grid item inside the shell with default min-width:auto. Without
     the explicit override, the 4K image's intrinsic width propagates
     all the way up the layout chain. */
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 0;
  min-width: 0;
  width: 100%;
}
/* v07u — Rebuild the stage. The previous mix of fixed wrappers,
   conflicting max-heights and an old `min-height: 360px` (declared
   further down in this file) was forcing the stage to a square-ish
   shape regardless of the image's true 16:9 ratio. Now:
   – The stage is a plain flex container that centres the media.
   – The media gets constrained ONLY by `max-width:100% / max-height:
     70vh` with `object-fit: contain`. With the shell's grid letting
     the 1fr column fill, an unstretched 4K 16:9 image renders at the
     full inner width up to 70vh tall — what Hugo expected.
   – No more `--project-aspect` reference for empty/placeholder media;
     defaults to 16:9 since archival is universally 16:9. The shell's
     `--arm-active-aspect` CSS variable (set from the <img>.naturalWidth/
     Height in JS) overrides on the fly when a non-16:9 file arrives. */
/* v07y — Bulletproof rewrite using aspect-ratio + absolute positioning.
   The previous approach (chain of width:100%/max-width:100% relying on
   min-width:0 at every level) was too fragile — somewhere in the chain
   a parent was still letting the image's 4K intrinsic size influence
   layout. The new approach FORCES the wrap to be at the active media's
   aspect ratio, then puts the image inside as `position: absolute;
   inset: 0` so it literally cannot grow past the wrap's box.
   How it works:
   1. .arm-stage is a normal flex container — full width of its grid
      column (1fr), min-width:0 so it doesn't blow out.
   2. .arm-media-wrap is a fixed-aspect box. Its width is `100%` of the
      stage, its height is computed from `aspect-ratio` automatically.
      `max-height: 70vh` caps height for tall files (the wrap shrinks
      both dimensions proportionally via `width: auto` fallback).
   3. .arm-media is absolutely positioned to fill the wrap. `object-fit:
      contain` letterboxes if the image's natural aspect differs from
      the wrap's (but they should always match since JS sets the wrap's
      aspect to the loaded image's natural aspect). */
.arm-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--shade-53);
  padding: 0;
  min-width: 0;
  min-height: 0;
  width: 100%;
  overflow: hidden;
}
.arm-media-wrap {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  aspect-ratio: var(--arm-active-aspect, 16 / 9);
  max-height: 70vh;
  background: var(--shade-53);
  /* If max-height clips the height for very tall files, scale the width
     down proportionally so the aspect-ratio stays correct. */
  margin: 0 auto;
}
.arm-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: var(--shade-53);
  border-radius: 0;
  box-shadow: none;
}
video.arm-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
/* v07zz228 — asset-modal hero fade (img only; video keeps its own load). Warm
   (already-loaded) images paint instantly; cold ones fade in via a keyframe
   animation so it works even on instant local loads (a transition didn't). */
.arm-media-img { opacity: 0; }
.arm-media-img.is-warm   { opacity: 1; animation: none; }
.arm-media-img.is-loaded { opacity: 1; animation: arm-media-fade var(--dur-6) ease forwards; }
@keyframes arm-media-fade { from { opacity: 0; } to { opacity: 1; } }
.arm-media--empty {
  /* v07zz60 — Hugo: "image section aspect ratio is weird for the No
     Preview, why is it not taking the whole image space?" Fill the
     entire .arm-media-wrap (which already enforces the project
     aspect via aspect-ratio: var(--arm-active-aspect)). Using
     position:absolute + inset:0 mirrors how the live <img>/<video>
     sits inside the wrap. */
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  color: color-mix(in srgb, var(--ink-cream-3) 55%, transparent);
  font-size: var(--fs-12-5);
  background: color-mix(in srgb, var(--cream-3) 4%, transparent);
  border: 1px dashed color-mix(in srgb, var(--cream-3) 14%, transparent);
  border-radius: var(--r-sm);
}
/* v06i — version label moved from bottom-left to TOP-left so it
   reads like a chyron over the image instead of overlapping the
   browser's native video controls. */
.arm-stage-tag {
  position: absolute;
  top: 16px;
  left: 16px;
  bottom: auto;
  padding: 4px 12px;
  border-radius: var(--r-round);
  background: color-mix(in srgb, var(--shade-6) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--cream-3) 16%, transparent);
  color: var(--ink-cream-3);
  font-size: var(--fs-10-5);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-10);
  text-transform: uppercase;
}

.arm-side {
  background: var(--paper);
  color: var(--ink);
  padding: 18px;
  overflow-y: auto;
  border-left: 1px solid color-mix(in srgb, var(--cream-3) 8%, transparent);
}
.arm-side .notes-panel {
  margin-top: 0;
  background: transparent;
  border: none;
  padding: 0;
  /* v07zz42 — Same flex-shrink fix as .arm-side-prompt so the notes
     panel can scroll inside its allotted height instead of pushing
     the side panel past the modal's body-row bound. */
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
}
.arm-side-empty {
  text-align: center;
  color: var(--ink-muted);
  font-size: var(--fs-12-5);
  padding: 20px;
}

/* v07zz41 — Notes/Prompt tab switcher inside .arm-side. Tabs sit
   along the top; selected tab gets the gold underline matching the
   modal's accent.
   v07zz42 — Hugo: "prompt box is not scrollable and makes the panel
   go full screen height." The issue was that the prompt body had
   flex:1 with no min-height:0 anchor up the chain, so it grew to
   fit its (possibly multi-screen) content and pushed the .arm-side
   panel's height past the modal's grid row. Fix: anchor the parent
   .arm-side at the grid row's height (overflow:hidden, no padding
   leak), make .arm-side-tabs fill its parent with min-height:0 so
   its flex children can shrink, and ensure the prompt body's
   overflow-y:auto kicks in. Panel height now stays exactly at the
   modal's body-row height regardless of prompt length. */
.arm-side {
  /* min-height/min-width:0 lets grid children of .arm-body shrink
     to fit their grid cell instead of expanding to content size. */
  min-height: 0;
  min-width: 0;
}
.arm-side-tabs {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  gap: 12px;
}
.arm-side-tabbar {
  display: flex;
  gap: 0;
  border-bottom: 1px solid color-mix(in srgb, color-mix(in srgb, var(--umber-3) 95%, var(--mix-light)) 18%, transparent);
  margin: -4px -4px 0;
}
.arm-side-tab {
  flex: 1;
  font: inherit;
  font-size: var(--fs-11-5);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-12);
  text-transform: uppercase;
  padding: 9px 14px;
  background: transparent;
  border: none;
  color: var(--ink-muted, var(--ink-taupe));
  cursor: pointer;
  position: relative;
  transition: color var(--dur-1) ease;
}
.arm-side-tab:hover { color: var(--ink, var(--ink-2)); }
.arm-side-tab.is-active {
  color: color-mix(in srgb, var(--ink-tan-deep) 63%, var(--mix-dark));
}
.arm-side-tab.is-active::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--foil) 60%, transparent) 0%,
    color-mix(in srgb, var(--gold-3) 95%, transparent) 50%,
    color-mix(in srgb, var(--foil) 60%, transparent) 100%);
  border-radius: 2px;
}
.arm-side-prompt {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  flex: 1 1 0;        /* shrink to fit, grow to fill — no content-driven expansion */
  overflow: hidden;   /* clip overflow at this level so the body's scroll kicks in */
}
.arm-side-prompt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.arm-side-prompt-label {
  font-size: var(--fs-10-5);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-14);
  text-transform: uppercase;
  color: var(--ink-muted, var(--ink-taupe));
}
.arm-side-prompt-copy {
  font: inherit;
  font-size: var(--fs-10-5);
  font-weight: var(--fw-semi);
  padding: 4px 10px;
  border-radius: var(--r-xs);
  background: color-mix(in srgb, var(--hi) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold-deep) 42%, transparent);
  color: color-mix(in srgb, var(--ink-tan-deep) 63%, var(--mix-dark));
  cursor: pointer;
  transition: background var(--dur-1) ease;
}
.arm-side-prompt-copy:hover { background: color-mix(in srgb, var(--hi-3) 95%, transparent); }
.arm-side-prompt-body {
  margin: 0;
  padding: 12px;
  background: color-mix(in srgb, var(--black) 5%, transparent);
  border: 1px solid color-mix(in srgb, color-mix(in srgb, var(--umber-3) 95%, var(--mix-light)) 12%, transparent);
  border-radius: var(--r-sm);
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: var(--fs-11-5);
  line-height: 1.55;
  color: var(--ink-2);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.arm-side-prompt-empty {
  padding: 18px;
  text-align: center;
  color: var(--ink-muted, var(--ink-taupe));
  font-size: var(--fs-12);
  font-style: italic;
  background: color-mix(in srgb, var(--black) 3%, transparent);
  border-radius: var(--r-sm);
}

.arm-foot {
  padding: 14px 18px;
  border-top: 1px solid color-mix(in srgb, var(--cream-3) 8%, transparent);
  background: color-mix(in srgb, var(--shade-6) 55%, transparent);
}
.arm-filmstrip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px;
  /* v07zj — Hugo: hide the ugly native horizontal scrollbar.
     Drag-scroll via mouse / touch works through useDragScroll
     attached by AssetReviewModal. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-x;
}
.arm-filmstrip.is-dragging { cursor: grabbing; }
.arm-filmstrip::-webkit-scrollbar { display: none; width: 0; height: 0; }
.arm-filmstrip img,
.arm-filmstrip video {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  pointer-events: none;
}
/* v07zz43 — 4K badge overlay on upscale filmstrip tiles. */
.arm-thumb-4k-badge {
  position: absolute;
  top: 4px; left: 4px;
  font-size: var(--fs-9);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-10);
  padding: 2px 6px;
  border-radius: 4px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--hi-2) 92%, transparent) 0%,
    color-mix(in srgb, var(--nav-active) 82%, transparent) 50%,
    color-mix(in srgb, var(--gold-deep) 55%, transparent) 100%);
  border: 1px solid color-mix(in srgb, var(--gold-deep) 55%, transparent);
  color: color-mix(in srgb, var(--ink-tan-deep) 63%, var(--mix-dark));
  text-shadow: 0 1px 0 color-mix(in srgb, var(--hi) 50%, transparent);
  pointer-events: none;
  z-index: 2;
}
.arm-thumb {
  flex-shrink: 0;
  /* v07u — Thumbs now adopt the ACTIVE media's natural aspect ratio
     (set on .arm-shell as `--arm-active-aspect` by AssetReviewModal
     in JS when the <img>/<video> resolves its dimensions). Defaults
     to 16:9 since most assets — including all archival footage — are
     16:9. This way the filmstrip never crops a thumbnail at a fake
     21:9 ratio just to fit the project token. */
  width: 120px;
  aspect-ratio: var(--arm-active-aspect, 16 / 9);
  height: auto;
  border: 2px solid transparent;
  border-radius: var(--r-xs);
  overflow: hidden;
  cursor: pointer;
  background: color-mix(in srgb, var(--cream-3) 6%, transparent);
  position: relative;
  /* v07d — soft drop shadow so thumbs lift off the dark backdrop. */
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.35),
    0 4px 10px rgba(0, 0, 0, 0.30);
  transition: border-color var(--dur-2) ease, transform var(--dur-2) ease, box-shadow var(--dur-2) ease;
}
.arm-thumb:hover { transform: translateY(-1px); }
.arm-thumb.is-active {
  border-color: color-mix(in srgb, var(--nav-active) 85%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--nav-active) 40%, transparent), 0 0 12px color-mix(in srgb, var(--nav-active) 30%, transparent);
}
/* v06z — Hugo: drop the gold border / glow on .is-hero thumbs. The
   gold-foil border is reserved for the SELECTED (.is-active) thumb.
   The star alone signals hero status. */
/* v06z — hover-revealed star button on every filmstrip thumb.
   Mirrors the cream popup's .vt-hero-btn: hidden by default, shown
   on tile hover; sticky-visible (solid gold) when this version is
   the locked hero. Click promotes / toggles off. */
.arm-thumb .arm-thumb-hero-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--shade-7) 65%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--hi) 55%, transparent);
  color: color-mix(in srgb, var(--ink-hi) 95%, transparent);
  cursor: pointer;
  z-index: 3;
  opacity: 0;
  transition: opacity var(--dur-1) ease, background var(--dur-1) ease, color var(--dur-1) ease,
              transform 90ms ease, box-shadow 120ms ease;
}
.arm-thumb:hover .arm-thumb-hero-btn,
.arm-thumb .arm-thumb-hero-btn.is-active { opacity: 1; }
.arm-thumb .arm-thumb-hero-btn:hover {
  background: color-mix(in srgb, var(--gold-2) 85%, transparent);
  color: color-mix(in srgb, var(--ink-deep) 90%, var(--mix-dark));
  border-color: color-mix(in srgb, var(--hi-3) 95%, transparent);
  transform: scale(1.05);
}
.arm-thumb .arm-thumb-hero-btn.is-active {
  background: color-mix(in srgb, var(--gold-2) 98%, transparent);
  color: color-mix(in srgb, var(--ink-deep) 90%, var(--mix-dark));
  border-color: var(--hi-3);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--hi-3) 65%, transparent),
    0 0 12px color-mix(in srgb, var(--gold-2) 75%, transparent);
}
.arm-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.arm-thumb-glyph {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: var(--fs-22);
  color: color-mix(in srgb, var(--ink-cream-3) 55%, transparent);
}
.arm-thumb-label {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 2px 4px;
  text-align: center;
  background: color-mix(in srgb, var(--shade-6) 72%, transparent);
  color: var(--ink-cream-3);
  font-size: var(--fs-9-5);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-06);
  text-transform: uppercase;
}

@media (max-width: 880px) {
  .arm-body { grid-template-columns: 1fr; }
  .arm-side { border-left: none; border-top: 1px solid color-mix(in srgb, var(--cream-3) 8%, transparent); max-height: 320px; }
}

/* t14 — small "expand to full-screen review" button on the modal hero
   image. Subtle, top-right.
   v06f — now lives inside a `.mhi-action-cluster` flex strip with the
   reveal-in-folder button as a sibling, so the two stack horizontally
   without each one positioning absolutely. */
.mhi-action-cluster {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  display: inline-flex;
  gap: 6px;
}
.mhi-expand-btn,
.mhi-action-cluster .reveal-folder-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--shade-6) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--cream-3) 20%, transparent);
  color: var(--ink-cream-3);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background var(--dur-2) ease, border-color var(--dur-2) ease;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.mhi-expand-btn:hover,
.mhi-action-cluster .reveal-folder-btn:hover {
  background: color-mix(in srgb, var(--shade-6) 78%, transparent);
  border-color: color-mix(in srgb, var(--cream-3) 40%, transparent);
}

/* ─── v06f — Reveal-in-folder button ─────────────────────────────────
   Used across the app (shot modal, character modal, review player,
   anywhere there's an image or video on a popup). Defined here so
   every site that imports asset-review.css gets the base look; the
   per-location wrappers above (.mhi-action-cluster, .char-main-img-
   actions, .review-video-actions) layer positioning + colour tweaks
   on top.
   Defaults: tiny circular glass button, top-right of an image area.
   Looks subtle when the image is bright (forest backdrop, photos)
   and stays legible against dark hero images thanks to the
   backdrop-filter + cream stroke. */
/* v06p — Subtler, cream-toned action button so it sits on top of
   asset images without competing with the content. Matches the
   overall warm palette of the rest of the UI instead of the dark
   green chip used before. */
.reveal-folder-btn {
  background: color-mix(in srgb, var(--cream-2) 78%, transparent);
  border: 1px solid color-mix(in srgb, var(--tan-deep) 30%, transparent);
  color: var(--ink, var(--ink-umber));
  border-radius: 50%;
  width: 26px;
  height: 26px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  transition: background var(--dur-1) ease, border-color var(--dur-1) ease, color var(--dur-1) ease;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--shadow-ink) 18%, transparent);
}
.reveal-folder-btn:hover {
  background: color-mix(in srgb, var(--cream) 95%, transparent);
  border-color: color-mix(in srgb, var(--tan-deep) 55%, transparent);
  color: var(--ink, var(--ink-umber));
}
.reveal-folder-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--tan-deep) 55%, transparent);
  outline-offset: 2px;
}
.reveal-folder-btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* Character modal: action cluster top-right of the main image.
   v06p — Hugo: changed from hover-only (opacity 0 by default) to
   ALWAYS visible. Hover-only meant the Reveal in Folder button
   was effectively invisible — users didn't know it existed. */
.char-main-img { position: relative; }
.char-main-img-actions {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: inline-flex;
  gap: 6px;
  opacity: 0.85;
  transition: opacity var(--dur-2) ease;
}
.char-main-img:hover .char-main-img-actions,
.char-main-img:focus-within .char-main-img-actions {
  opacity: 1;
}
/* v06p — Spinner keyframe for the refresh button. */
@keyframes char-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Review video stage: button stacks on top-right of the player. */
.review-stage { position: relative; }
.review-video-actions {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 6;
}

/* ─── v06k — Split filmstrip (Frames row + Videos row) ───────────────
   Hugo: a single interleaved row was confusing because frame v001 sat
   right next to video v001. Two rows make the ordering obvious. */
.arm-filmstrip-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.arm-filmstrip-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}
.arm-filmstrip-label {
  font-size: var(--fs-9-5);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-14);
  color: color-mix(in srgb, var(--ink-cream-3) 55%, transparent);
  text-transform: uppercase;
}
/* Video thumb — first-frame preview rendered via <video preload=metadata>
   with #t=0.1 in the URL forces the browser to seek and paint that frame
   instead of a black box. */
.arm-thumb--video { position: relative; }
.arm-thumb-vid {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
.arm-thumb-play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: var(--fs-18);
  color: color-mix(in srgb, var(--ink-cream) 90%, transparent);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
  pointer-events: none;
}

/* v07u — Dropped the `.arm-stage { min-height: 360px }` legacy rule.
   It was forcing the panel to a near-square shape with 16:9 content,
   leaving large dark dead-zones above/below the actual image. With
   the stage now empty-min-height and the media constrained only by
   max-height: 70vh, the modal sizes to the image rather than the
   other way around. The empty-state .arm-media--empty placeholder
   keeps a sensible 16:9 box so a missing preview doesn't collapse. */

/* ─── v816 — WIP candidates in the review filmstrip ─────────────────────────
   The strip carries un-pushed candidates now, so Hugo can judge one full-screen
   before deciding. Badge sits opposite the 4K one (top-RIGHT) so an upscaled
   candidate can show both without them colliding. */
.arm-thumb-wip-badge {
  position: absolute;
  top: 4px; right: 4px;
  font-size: var(--fs-9);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-10);
  padding: 2px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--blue-5) 92%, transparent);
  border: 1px solid color-mix(in srgb, var(--blue-38) 55%, transparent);
  color: var(--ink-blue-37);
  pointer-events: none;
}
/* The two funnel actions in the header. Same pill shape as HERO THIS FRAME —
   only the accent differs, so the row reads as one set of controls. */
.arm-hero-pill.arm-wip-pill {
  background: color-mix(in srgb, var(--blue-5) 22%, transparent);
  border-color: color-mix(in srgb, var(--blue-5) 60%, transparent);
}
.arm-hero-pill.arm-wip-pill:hover { background: color-mix(in srgb, var(--blue-5) 38%, transparent); }
.arm-hero-pill.arm-discard-pill {
  background: color-mix(in srgb, var(--red-21) 16%, transparent);
  border-color: color-mix(in srgb, var(--red-21) 50%, transparent);
}
.arm-hero-pill.arm-discard-pill:hover { background: color-mix(in srgb, var(--red-21) 34%, transparent); }