.shots-panel {
  padding: 14px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  align-self: stretch;
  height: 100%;
  min-height: 0;
}

/* The Overview's centre panel has its own light/dark choice, independent of the selected skin.
   Accent colours still come from the skin; only the local surface and text ramp changes. The
   standalone Shots page is intentionally outside `.overview-main` and keeps the skin's normal look. */
html body[data-content-tone="light"] .overview-main .shots-panel {
  --content-tone-panel: var(--sk-content-light-panel, oklch(from var(--leaf) 0.90 0.018 h));
  --content-tone-row: var(--sk-content-light-row, oklch(from var(--leaf) 0.965 0.010 h));
  --content-tone-row-hover: var(--sk-content-light-row-hover, oklch(from var(--leaf) 0.985 0.014 h));
  --content-tone-ink: var(--sk-content-light-ink, oklch(from var(--leaf) 0.20 0.018 h));
  --content-tone-muted: var(--sk-content-light-muted, oklch(from var(--leaf) 0.45 0.022 h));
  --content-tone-hi: var(--sk-content-light-hi, oklch(from var(--leaf) 0.995 0.008 h));
  --content-tone-shadow: var(--sk-content-light-shadow, oklch(from var(--leaf) 0.16 0.018 h));
  color-scheme: light;
}
html body[data-content-tone="dark"] .overview-main .shots-panel {
  --content-tone-panel: oklch(from var(--leaf) 0.17 0.025 h);
  --content-tone-row: oklch(from var(--leaf) 0.235 0.022 h);
  --content-tone-row-hover: oklch(from var(--leaf) 0.285 0.030 h);
  --content-tone-ink: oklch(from var(--leaf) 0.94 0.014 h);
  --content-tone-muted: oklch(from var(--leaf) 0.72 0.018 h);
  --content-tone-hi: oklch(from var(--leaf) 0.99 0.008 h);
  --content-tone-shadow: oklch(from var(--leaf) 0.08 0.016 h);
  color-scheme: dark;
}
html body[data-content-tone] .overview-main .shots-panel.glass {
  --sk-row-ink: var(--content-tone-ink);
  --sk-row-ink-muted: var(--content-tone-muted);
  --sk-row-ink-soft: var(--content-tone-muted);
  --sk-row-title-ink-1: var(--content-tone-ink);
  --sk-row-eyebrow-ink-1: var(--content-tone-muted);
  --sk-row-btn-active-ink-1: var(--content-tone-ink);
  --sk-reviewed-init-ink-1: var(--content-tone-ink);
  --sk-notes-badge-ink-1: var(--content-tone-ink);
  --sk-input-fill-1: var(--content-tone-row);
  --sk-pill-button-bg-1: var(--content-tone-row);
  --sk-control-ink-1: var(--content-tone-ink);
  --sk-title-ink-1: var(--content-tone-ink);
  --sk-row-muted-ink-1: var(--content-tone-muted);
  --sk-placeholder-ink-1: var(--content-tone-muted);
  --surf-input: var(--content-tone-row);
  --pill-button-bg: var(--content-tone-row);
  --ink: var(--content-tone-ink);
  --ink-muted: var(--content-tone-muted);
  --ink-soft: var(--content-tone-muted);
  --ink-on-dark: var(--content-tone-ink);
  --ink-on-dark-muted: var(--content-tone-muted);
  --card-bg-solid: var(--content-tone-panel);
  --card-bg: color-mix(in srgb, var(--content-tone-panel) 94%, transparent);
  --card-bg-light-solid: var(--content-tone-row);
  --card-bg-light: color-mix(in srgb, var(--content-tone-row) 92%, transparent);
  --paper: var(--content-tone-row);
  --paper-2: var(--content-tone-row-hover);
  --cream: var(--content-tone-row);
  --cream-2: var(--content-tone-row);
  --cream-3: var(--content-tone-row-hover);
  --cream-4: var(--content-tone-row);
  --cream-5: var(--content-tone-row);
  --cream-6: var(--content-tone-panel);
  --cream-7: var(--content-tone-row-hover);
  --cream-8: var(--content-tone-panel);
  --cream-9: var(--content-tone-row-hover);
  --cream-10: var(--content-tone-row);
  --hi: var(--content-tone-hi);
  --hi-2: var(--content-tone-hi);
  --hi-3: var(--content-tone-hi);
  --shadow-ink: var(--content-tone-shadow);
  --shadow-ink-2: var(--content-tone-shadow);
  background: var(--content-tone-panel);
  color: var(--content-tone-ink);
}
html body[data-content-tone] .overview-main .shots-panel :is(.search-input, .pill-button:not(.pill-button--add), .tab, .shot-id) {
  color: var(--content-tone-ink);
}
html body[data-content-tone] .overview-main .shots-panel .search-input::placeholder {
  color: var(--content-tone-muted);
}
html body[data-content-tone] .overview-main .shots-panel .shot-row {
  background: color-mix(in srgb, var(--content-tone-row) 96%, transparent);
}
html body[data-content-tone] .overview-main .shots-panel .shot-row:hover {
  background: color-mix(in srgb, var(--content-tone-row-hover) 96%, transparent);
}
html body[data-content-tone] .overview-main .shots-panel .shot-row.selected {
  background: color-mix(in srgb, var(--content-tone-row-hover) 88%, var(--leaf));
}

.shots-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 0 4px;
  position: relative;
  z-index: 30;
}

.tabs { display: flex; gap: 18px; }
.tab {
  background: none; border: none;
  padding: 6px 0;
  font-family: var(--font-body);
  font-size: var(--fs-14);
  font-weight: 400;
  color: var(--ink-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  transition: color var(--dur-1) ease, border-color var(--dur-1) ease;
}
.tab:hover:not(.active) { border-bottom-color: color-mix(in srgb, var(--sidebar-bg) 20%, transparent); color: var(--ink); }
.tab.active {
  color: var(--ink);
  font-weight: var(--fw-med);
  border-bottom-color: var(--sidebar-bg);
}
.tab-count { font-size: var(--fs-11); color: var(--ink-muted); }

/* Sort/Filter pill row — opacity-only fade in both directions, no visibility
   transition (visibility transitions can interrupt the easing curve and cause
   the snap-to-100% glitch the user noticed). pointer-events handles the
   "non-interactive while invisible" need. */
.pill-row {
  display: flex;
  gap: 8px;
  opacity: 1;
  transition: opacity 260ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* v969 — the buttons in this row keep their size and their labels stay on ONE
   line. Without this the v968 search box (which grows) squeezed them and
   'Sort: Shot ID' / 'Download all' / 'Add shot' wrapped onto two lines the
   moment the box was empty. The search is the only flexible item here. */
.pill-row { flex-wrap: wrap; row-gap: 8px; }
.pill-row > * { flex: 0 0 auto; }
.pill-row .pill-button { white-space: nowrap; }
.pill-row.is-faded {
  opacity: 0;
  pointer-events: none;
}
/* v07zz278/280 — Bulk-ZIP download buttons (shots + assets) reuse the
   .pill-button look; busy/err states shared across both scopes. */
.shots-dl-all.is-busy, .assets-dl-all.is-busy { opacity: 0.7; cursor: progress; }
.shots-dl-all.is-err, .assets-dl-all.is-err { color: var(--red-5); }
/* ─── v968 — SHOTS SEARCH ────────────────────────────────────────────────────
   Same glass-pill language as the Sort / Filter buttons beside it, sized so the
   row height never changes (invariant #20). The hit count sits inside the pill. */
.shots-search {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border-radius: var(--r-panel);
  background:
    radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--ivory) 40%, transparent), color-mix(in srgb, var(--ivory) 14%, transparent) 80%),
    color-mix(in srgb, color-mix(in srgb, var(--hi) 71%, var(--mix-light)) 10%, transparent);
  backdrop-filter: blur(14px) saturate(1.30);
  -webkit-backdrop-filter: blur(14px) saturate(1.30);
  color: var(--ink);
  /* v969 — CONSTANT width: the box never grows when the × and the count appear,
     so nothing to its right ever moves (invariant #20). It may only SHRINK, as a
     safety valve on a narrow window; the buttons never do. */
  flex: 0 1 240px;
  width: 240px;
  min-width: 120px;
  transition: box-shadow var(--dur-1) ease;
}
.shots-search:focus-within { box-shadow: 0 0 0 var(--ring-w) color-mix(in srgb, var(--leaf) 45%, transparent); }
.shots-search-ico { flex: 0 0 auto; opacity: 0.55; }
.shots-search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  font: inherit;
  font-size: var(--fs-12-5);
  color: var(--ink);
  outline: none;
  padding: 0;
}
.shots-search-input::placeholder { color: var(--ink-muted); opacity: 0.75; }
/* kill the browser's own clear button — we render our own */
.shots-search-input::-webkit-search-cancel-button { display: none; }
.shots-search-clear {
  flex: 0 0 auto;
  border: none; background: none; cursor: pointer;
  font-size: var(--fs-15); line-height: 1; padding: 0 2px;
  color: var(--ink-muted);
}
.shots-search-clear:hover { color: var(--ink); }
.shots-search-count {
  flex: 0 0 auto;
  font-size: var(--fs-10-5); font-weight: var(--fw-heavy); letter-spacing: var(--track-04);
  color: var(--ink-muted);
  background: color-mix(in srgb, var(--taupe) 16%, transparent);
  border-radius: var(--r-round); padding: 1px 7px;
}

.pill-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border-radius: var(--r-panel);
  /* truly transparent glass — let the panel below show through */
  background:
    radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--ivory) 40%, transparent), color-mix(in srgb, var(--ivory) 14%, transparent) 80%),
    color-mix(in srgb, color-mix(in srgb, var(--hi) 71%, var(--mix-light)) 10%, transparent);
  backdrop-filter: blur(14px) saturate(1.30);
  -webkit-backdrop-filter: blur(14px) saturate(1.30);
  border: none;
  color: var(--ink);
  font-size: var(--fs-12);
  font-weight: var(--fw-semi);
  cursor: pointer;
  position: relative;
  box-shadow:
    inset 1px 1px 1px color-mix(in srgb, var(--hi) 55%, transparent),
    inset -1px -1px 1px color-mix(in srgb, var(--shadow-ink-2) 10%, transparent),
    inset 0 0 12px color-mix(in srgb, var(--hi) 10%, transparent),
    0 1px 2px color-mix(in srgb, var(--shadow-ink) 10%, transparent),
    0 4px 10px color-mix(in srgb, var(--shade) 16%, transparent);
  transition: background var(--dur-1) ease, box-shadow var(--dur-2) ease, transform var(--dur-1) ease;
}
.pill-button:hover {
  background:
    radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--ivory) 55%, transparent), color-mix(in srgb, var(--ivory) 20%, transparent) 80%),
    color-mix(in srgb, color-mix(in srgb, var(--hi) 71%, var(--mix-light)) 16%, transparent);
  transform: translateY(-1px);
  box-shadow:
    inset 1px 1px 1px color-mix(in srgb, var(--hi) 70%, transparent),
    inset -1px -1px 1px color-mix(in srgb, var(--shadow-ink-2) 14%, transparent),
    inset 0 0 16px color-mix(in srgb, var(--hi) 16%, transparent),
    0 2px 4px color-mix(in srgb, var(--shadow-ink) 14%, transparent),
    0 8px 18px color-mix(in srgb, var(--shade) 22%, transparent);
}

.shots-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 4px 4px 2px;
  scrollbar-width: thin;
  scrollbar-color: var(--tan) transparent;
  position: relative;
  z-index: 1;
}
.shots-list::-webkit-scrollbar { width: 8px; }
.shots-list::-webkit-scrollbar-thumb { background: var(--tan); border-radius: 4px; }

.shot-row {
  display: grid;
  /* 16 Sep 2026 — the third column now carries the quick-action bar as well as
     the pill / date / ring, so it is wider. minmax(0,1fr) on the middle column
     keeps a long title from pushing the grid instead of ellipsing. */
  grid-template-columns: 184px minmax(0, 1fr) var(--shot-status-col-w);
  gap: 16px;
  align-items: stretch;
  padding: 14px 16px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--cream-2) 92%, transparent);
  border: none;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--cream) 85%, transparent),
    inset 1px 0 0 color-mix(in srgb, var(--hi) 55%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--shadow-ink-2) 8%, transparent),
    0 2px 4px color-mix(in srgb, var(--shadow-ink) 8%, transparent),
    0 6px 14px color-mix(in srgb, var(--shade) 14%, transparent);
  cursor: pointer;
  transition: background var(--dur-2) ease, box-shadow var(--dur-2) ease;
  position: relative;
  /* v05j — Critical perf: tell the browser each row's layout is
     independent of every other row, AND let it skip layout + paint
     entirely for rows that aren't currently on screen. Combined this
     turns the per-frame cost during sidebar collapse from "lay out
     ~150 rows" to "lay out the ~8 visible rows" — which is what makes
     the parent flex resize cheap enough for a 60fps animation.
     contain-intrinsic-size gives the browser a placeholder height so
     scrollbars + scroll position stay correct while off-screen rows
     are skipped. */
  contain: layout style paint;
  /* v05k — JS virtualisation. content-visibility:auto wasn't actually
     skipping off-screen rows in practice (Chromium heuristic kept
     them "active"), so the IntersectionObserver in ShotsPanel.jsx
     toggles `.is-far` on rows that drift > 600px outside the
     viewport. Those rows then get content-visibility:hidden — the
     aggressive form the browser MUST honour — and stop reflowing
     entirely. contain-intrinsic-size keeps the scrollbar correct
     while they're skipped.
     17 Sep 2026 - a row that has never been drawn takes the height of the last real row measured
     (ShotsPanel.jsx sets --shot-row-est-h on the list), so a new project's hidden rows keep the
     scroll length and the restored scroll position right. */
  contain-intrinsic-size: auto var(--shot-row-est-h, 96px);
}
.shot-row.is-far {
  content-visibility: hidden;
}
/* 17 Sep 2026 - a row never shrinks in the list. A drawn row cannot anyway (its content holds it);
   a hidden row that was never drawn could: Chrome let the fixed-height list squeeze it to its
   padding (28px), so a new project's list was a third of its real length. */
.shots-list > .shot-row {
  flex-shrink: 0;
}
/* 17 Sep 2026 - a row's place while a project switch is on its way (ShotsPanel.jsx
   ShotRowPlaceholders): the list never shows the previous project's rows under the new title */
.shot-row-ph {
  flex: none;
  height: var(--shot-row-ph-h);
  border-radius: var(--r-md);
  /* a faint block of the skin's own ink (read here, on the element, so every skin re-colours it) */
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}

/* hairline gold-foil ring around each row (top-left bright, fades on bottom-right) */
.shot-row::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--hi-3) 55%, transparent) 0%,
    color-mix(in srgb, var(--foil) 28%, transparent) 22%,
    color-mix(in srgb, var(--foil) 6%, transparent) 45%,
    transparent 65%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0.9;
  transition: opacity var(--dur-2) ease, background var(--dur-2) ease;
}
.shot-row:hover {
  background: color-mix(in srgb, color-mix(in srgb, var(--paper-2) 44%, var(--mix-light)) 92%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, color-mix(in srgb, var(--hi) 71%, var(--mix-light)) 95%, transparent),
    inset 1px 0 0 color-mix(in srgb, var(--hi) 60%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--shadow-ink-2) 10%, transparent),
    0 0 0 1.5px color-mix(in srgb, var(--nav-active) 85%, transparent),
    0 4px 10px color-mix(in srgb, var(--shadow-ink) 14%, transparent),
    0 14px 32px color-mix(in srgb, var(--foil) 34%, transparent);
}
.shot-row:hover::before {
  background: linear-gradient(135deg,
    var(--hi-2) 0%,
    color-mix(in srgb, var(--nav-active) 95%, transparent) 18%,
    color-mix(in srgb, var(--foil) 55%, transparent) 38%,
    color-mix(in srgb, var(--gold-deep) 32%, transparent) 65%,
    color-mix(in srgb, var(--tan-deep) 40%, transparent) 100%);
  opacity: 1;
}
.shot-row.selected {
  background: color-mix(in srgb, var(--cream-10) 85%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--hi) 85%, transparent),
    inset 1px 0 0 color-mix(in srgb, var(--hi-2) 55%, transparent),
    0 0 0 1.5px color-mix(in srgb, var(--leaf) 55%, transparent),
    0 8px 22px color-mix(in srgb, var(--leaf) 18%, transparent);
}

.shot-check {
  width: 20px; height: 20px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--mix-light) 70%, transparent);
  border: 1.5px solid var(--card-border);
  display: grid; place-items: center;
  cursor: pointer;
  margin-top: 4px;
  color: var(--ink-sidebar-bg);
}

.shot-thumb {
  width: 168px;
  aspect-ratio: var(--project-aspect, 21 / 9);
  border-radius: var(--r-sm);
  position: relative;
  overflow: hidden;
  /* v07zz212 — Hugo: NO border, and the placeholder is a SOLID cream that
     matches the card so the photo appears to materialise on top of it (never
     a dark flash). Solid color-mix(in srgb, var(--paper) 97%, var(--mix-dark)), not the 0.92 alpha that let the dark page
     backdrop bleed through ~8%. */
  box-shadow: inset 0 1px 0 var(--thumb-inset-hi);
  align-self: center;
  background: color-mix(in srgb, var(--paper) 97%, var(--mix-dark));
}
.shot-thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  /* Same cream behind the <img>/<video> so a not-yet-painted media element
     (esp. a <video> before it seeks its first frame) is cream, not black. */
  background: color-mix(in srgb, var(--paper) 97%, var(--mix-dark));
}
/* v07zz212 — super-fast fade (90ms) ONLY for the <img> photo, masking the
   one-frame swap while keeping it feeling instant. Already-warm/cached images
   skip the fade entirely (paint immediately). The <video> keeps its poster. */
img.shot-thumb-img { opacity: 0; transition: opacity 90ms linear; }
img.shot-thumb-img.is-loaded { opacity: 1; }
img.shot-thumb-img.is-warm { opacity: 1; transition: none; }
.shot-thumb-tag {
  position: absolute;
  bottom: 6px; left: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  font-weight: var(--fw-semi);
  color: var(--thumb-tag-ink);
  background: var(--thumb-tag-bg);
  padding: 2px 5px;
  border-radius: 3px;
  letter-spacing: var(--track-04);
}

.shot-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; position: relative; }
/* The second icon row is pinned to the BOTTOM of this column and right-aligned, so it
   shares a right edge with the eyebrow's row at the top. margin-top:auto does the
   pinning; the slot keeps its height whether or not the buttons render, so revealing
   them on hover cannot move the row (invariant 20). */
.shot-tools-bottom {
  /* 16 Sep 2026 — Hugo: "why are the bars taller?? I didnt ask for them to be taller".
     My fault: this sat in the flow with a min-height and padding, so it ADDED 36px to
     every row. It is positioned instead, pinned to the bottom-right corner of the
     middle column, so it costs no height at all and the row goes back to what it was. */
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
}
.shot-eyebrow {
  font-size: var(--fs-10-5);
  letter-spacing: var(--track-12);
  font-weight: var(--fw-semi);
  color: var(--ink-muted);
  text-transform: uppercase;
  /* v07zz154 — flex so the cut-toggle can sit at the right edge of the row. */
  display: flex;
  align-items: center;
  gap: 6px;
  /* v898 — ONE line, always. A long tag must never wrap the eyebrow and grow the row
     (invariant #20): the sequence label gives way (ellipsis) before anything wraps. */
  flex-wrap: nowrap;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
}
.shot-eyebrow > .shot-link-tag, .shot-eyebrow > .shot-review-tag, .shot-eyebrow > .shot-archived-tag { flex-shrink: 0; }
.shot-seq-label { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shot-title { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.shot-id {
  font-family: var(--font-display);
  font-size: var(--fs-22);
  letter-spacing: var(--track-005);
  color: var(--ink);
}
.shot-dot { color: var(--ink-soft); }
.shot-frame { font-size: var(--fs-14); font-weight: var(--fw-med); color: var(--ink); }
.shot-sub { font-size: var(--fs-12); color: var(--ink-muted); }
.shot-loc {
  font-size: var(--fs-12);
  color: var(--ink-muted);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}

/* 16 Sep 2026 — one row, everything on the same optical centre line. The divider
   moved OFF this element and onto .shot-right-main, so the quick-action bar sits
   to the LEFT of it and the pill / date / ring sit to the right. */
/* The right cluster is only the divider, the pill/date and the ring now — the icons
   moved into the middle column so the two rows can share a right edge. */
.shot-right {
  display: flex;
  align-items: stretch;
  margin-left: 6px;
  min-width: 0;
}
.shot-right-main {
  flex: 1 1 auto;
  display: flex;
  align-items: center;                 /* pill+date AND ring on the row's centre line */
  justify-content: space-between;
  gap: 26px;                           /* Hugo: "move the status pill and date away from the donut" */
  border-left: 1px solid color-mix(in srgb, var(--card-border) 45%, transparent);
  padding-left: 26px;                  /* "give it a bit more room to the left" */
  padding-right: 4px;
  min-width: 0;
}
.shot-right-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.shot-right-pill { align-self: flex-start; }
.shot-version--left {
  text-align: left !important;
  align-self: flex-start;
  margin-top: 0;
  /* one line: "v003 - May 24, 2026" wrapping onto two made the block taller than
     the pill above it and threw the whole cluster off centre */
  white-space: nowrap;
}
/* Hugo: "the donut should be bigger and centered". It was pinned to the TOP of
   its cell by align-items:flex-start plus a 2px nudge, which is what made it read
   as small and high. */
.shot-right-ring {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shot-quick-actions .sqa-btn { height: 24px; }
.shot-quick-actions {
  display: flex;
  gap: 3px;
  opacity: 0;
  transition: opacity var(--dur-2) ease;
  pointer-events: none;
}
.shot-row:hover .shot-quick-actions { opacity: 1; pointer-events: auto; }
.sqa-btn {
  /* 16 Sep 2026 - Hugo: "We need to do something about the little icons and how
     different they are from the bottom ones... tidy all of this so it's part of the
     same family." They were built at different times and shared nothing: this set was
     a 24x26 rounded rectangle, the eyebrow set a 22px circle. Both are now 24px SQUARE
     with the same radius, so the two rows read as one kit. */
  width: 24px; height: 24px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--cream-5) 45%, transparent);
  border: 1px solid color-mix(in srgb, color-mix(in srgb, var(--foil) 85%, var(--mix-dark)) 35%, transparent);
  border-radius: var(--r-xs);
  color: var(--ink-muted);
  cursor: pointer;
  transition: background var(--dur-0) ease, color var(--dur-0) ease, border-color var(--dur-0) ease, transform 80ms ease, box-shadow var(--dur-0) ease;
}
.sqa-btn:hover {
  background: color-mix(in srgb, var(--hi) 92%, transparent);
  color: var(--ink);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--shadow-ink) 18%, transparent);
}
.sqa-btn:active { transform: scale(0.94); }
/* per-stage active hues */
.sqa-fp.is-active   { background: color-mix(in srgb, color-mix(in srgb, var(--gold-5) 44%, var(--mix-light)) 85%, transparent); border-color: color-mix(in srgb, color-mix(in srgb, var(--foil) 85%, var(--mix-dark)) 85%, transparent); color: color-mix(in srgb, var(--ink-umber-2) 92%, var(--mix-light)); }
.sqa-cw.is-active   { background: color-mix(in srgb, var(--gold-16) 45%, transparent);  border-color: color-mix(in srgb, var(--gold-16) 85%, transparent);  color: color-mix(in srgb, var(--ink-tan-deep) 74%, var(--mix-dark)); }
.sqa-ca.is-active   { background: color-mix(in srgb, color-mix(in srgb, var(--gold-3) 70%, var(--mix-light)) 65%, transparent); border-color: color-mix(in srgb, var(--gold-16) 95%, transparent);  color: color-mix(in srgb, var(--ink-tan-deep) 60%, var(--mix-dark)); box-shadow: 0 0 10px color-mix(in srgb, color-mix(in srgb, var(--gold-3) 70%, var(--mix-light)) 45%, transparent); }
.sqa-rd.is-active   { background: color-mix(in srgb, var(--teal) 42%, transparent);  border-color: color-mix(in srgb, var(--teal) 85%, transparent);  color: var(--st-video-wip-ink); box-shadow: 0 0 10px color-mix(in srgb, var(--teal) 40%, transparent); }
.sqa-done.is-active { background: color-mix(in srgb, var(--ok) 45%, transparent);  border-color: color-mix(in srgb, var(--ok) 85%, transparent);  color: color-mix(in srgb, var(--ink-forest-2) 79%, var(--mix-dark)); box-shadow: 0 0 10px color-mix(in srgb, var(--ok) 45%, transparent); }
/* hover hues match the active palette but lighter */
.sqa-fp:hover   { color: color-mix(in srgb, var(--ink-umber-2) 92%, var(--mix-light)); border-color: color-mix(in srgb, color-mix(in srgb, var(--foil) 85%, var(--mix-dark)) 85%, transparent); }
.sqa-cw:hover   { color: color-mix(in srgb, var(--ink-tan-deep) 74%, var(--mix-dark)); border-color: color-mix(in srgb, var(--gold-16) 85%, transparent); background: color-mix(in srgb, var(--gold-16) 18%, transparent); }
.sqa-ca:hover   { color: color-mix(in srgb, var(--ink-tan-deep) 60%, var(--mix-dark)); border-color: color-mix(in srgb, var(--gold-16) 95%, transparent); background: color-mix(in srgb, color-mix(in srgb, var(--gold-3) 70%, var(--mix-light)) 30%, transparent); }
.sqa-rd:hover   { color: var(--st-video-wip-ink); border-color: color-mix(in srgb, var(--teal) 85%, transparent); background: color-mix(in srgb, var(--teal) 20%, transparent); }
.sqa-done:hover { color: color-mix(in srgb, var(--ink-forest-2) 79%, var(--mix-dark)); border-color: color-mix(in srgb, var(--ok) 85%, transparent); background: color-mix(in srgb, var(--ok) 20%, transparent); }
/* t05e — refined pill: cream-bg, 1.5px coloured border, coloured dot, no
   tinted background fill. Spec dimensions: padding 5px 12px 5px 8px,
   border-radius 20px, border 1.5px solid, font 0.72em weight 600.
   t06c — explicit `line-height: 1` + `align-self: center` on each
   child so dot, label and chevron sit on the same optical centre line.
   Padding rebalanced to 6/12/4/8 — the extra top pixel compensates for
   uppercase glyphs sitting in the upper half of their line box. */
.shot-pill {
  /* Safe line-height (1) — won't clip glyph tops. The label is
     shifted down 1px via translateY to compensate for uppercase
     glyphs sitting in the upper half of their line-box. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 22px;
  padding: 0 12px 0 10px;
  border-radius: var(--r-round);
  border: 1.5px solid;
  font-size: var(--fs-10-5);
  font-weight: var(--fw-semi);
  line-height: 1;
  letter-spacing: var(--track-06);
  text-transform: uppercase;
  position: relative;
  box-sizing: border-box;
}
.shot-pill-dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0;
  align-self: center;
}
.shot-pill-label {
  display: inline-block;
  line-height: 1;
  align-self: center;
  /* Uppercase glyphs render in the upper portion of the 10.5px line-box
     (cap-height ~7px, no descent below baseline). Without this shift,
     visible glyphs appear ~1px above the pill's geometric centre.
     translateY(1px) puts the optical centre on the pill's true centre. */
  transform: translateY(1px);
}

/* ─── Editable status pill — clickable, opens an inline dropdown ─── */
.status-pill-anchor {
  position: relative;
  display: inline-block;
}
.shot-pill--clickable {
  background: inherit;
  font-family: var(--font-body);
  cursor: pointer;
  transition: filter var(--dur-1) ease, transform var(--dur-1) ease, box-shadow var(--dur-1) ease;
}
.shot-pill--clickable:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--cream) 70%, transparent),
    inset 0 -1px 0 color-mix(in srgb, color-mix(in srgb, var(--shadow-ink) 96%, var(--mix-dark)) 8%, transparent),
    0 2px 4px color-mix(in srgb, var(--shadow-ink) 14%, transparent);
}
.shot-pill--clickable.is-open {
  filter: brightness(1.10);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--cream) 70%, transparent),
    inset 0 -1px 0 color-mix(in srgb, color-mix(in srgb, var(--shadow-ink) 96%, var(--mix-dark)) 10%, transparent),
    0 3px 8px color-mix(in srgb, var(--shadow-ink) 20%, transparent);
}
.shot-pill-chev {
  margin-left: 2px;
  opacity: 0.72;
  transition: transform 160ms ease;
  flex-shrink: 0;
  align-self: center;          /* t06c — match dot/label vertical centre */
}
.shot-pill--clickable.is-open .shot-pill-chev { transform: rotate(180deg); }

/* t05e — chevron tints to match the status colour (inherits via currentColor
   from the pill) so the arrow reads as part of the same colour family. */
.shot-pill-chev { color: currentColor; }

.status-pill-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: var(--z-sticky-2);
  min-width: 180px;
  padding: 4px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--cream-2) 98%, transparent);
  border: 1px solid var(--card-border);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--cream) 85%, transparent),
    0 6px 18px color-mix(in srgb, var(--shadow-ink) 22%, transparent),
    0 14px 32px color-mix(in srgb, var(--shade) 20%, transparent);
  display: flex;
  flex-direction: column;
  gap: 1px;
  animation: statusMenuPop var(--dur-2) ease-out;
}
@keyframes statusMenuPop {
  from { opacity: 0; transform: translateY(-3px); }
  to   { opacity: 1; transform: translateY(0); }
}
.status-pill-option {
  display: grid;
  grid-template-columns: 10px 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  background: transparent;
  border: none;
  border-radius: var(--r-xs);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--fs-11-5);
  font-weight: var(--fw-med);
  letter-spacing: var(--track-02);
  color: var(--ink);
  text-align: left;
  transition: background var(--dur-0) ease, color var(--dur-0) ease;
}
.status-pill-option:hover { background: color-mix(in srgb, var(--tan-deep) 10%, transparent); }
.status-pill-option.is-current { background: color-mix(in srgb, var(--leaf) 18%, transparent); color: var(--ink); font-weight: var(--fw-semi); }
.status-pill-option-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.10);
}
.status-pill-option-label { white-space: nowrap; }
.status-pill-option-check {
  display: inline-flex;
  color: var(--olive-3);
}
.shot-version {
  font-size: var(--fs-11-5);
  color: var(--ink-muted);
  font-feature-settings: var(--tnum);
  text-align: right;
  letter-spacing: var(--track-02);
  align-self: start;
}
.shot-row-foot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.kebab-anchor { position: relative; }
.kebab {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  color: var(--ink-muted);
  cursor: pointer;
  transition: background var(--dur-1) ease, border-color var(--dur-1) ease, color var(--dur-1) ease;
}
.kebab:hover, .kebab.is-open {
  background: color-mix(in srgb, var(--hi) 55%, transparent);
  border-color: color-mix(in srgb, var(--foil) 45%, transparent);
  color: var(--ink);
}
.kebab-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: var(--z-sticky-2);
  min-width: 200px;
  padding: 6px;
  background: color-mix(in srgb, var(--cream-10) 96%, transparent);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.20);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.20);
  border: none;
  border-radius: var(--r-panel);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--hi) 65%, transparent),
    0 2px 6px color-mix(in srgb, var(--shadow-ink) 12%, transparent),
    0 14px 32px color-mix(in srgb, var(--shade) 32%, transparent);
  animation: kebab-menu-in 130ms var(--ease-glide);
  transform-origin: top right;
}
@keyframes kebab-menu-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.kebab-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: none;
  border: none;
  border-radius: var(--r-xs);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  font-size: var(--fs-12-5);
  font-family: var(--font-body);
  font-weight: var(--fw-med);
  transition: background var(--dur-0) ease;
}
.kebab-row:hover { background: color-mix(in srgb, var(--foil) 20%, transparent); }
.kebab-row.is-danger { color: var(--warn-red); }
.kebab-row.is-danger:hover { background: color-mix(in srgb, var(--warn-red) 10%, transparent); }
.kebab-row-ico {
  width: 16px;
  display: inline-flex;
  justify-content: center;
  color: var(--ink-muted);
  font-size: var(--fs-13);
  flex-shrink: 0;
}
.kebab-row.is-danger .kebab-row-ico { color: var(--warn-red); }

.pring { display: block; }

.load-more {
  text-align: center;
  font-size: var(--fs-11);
  letter-spacing: var(--track-16);
  font-weight: var(--fw-semi);
  color: var(--ink-muted);
  padding: 12px 0 6px;
  cursor: pointer;
}
.load-more:hover { color: var(--ink); }

/* ─── Sort / Filter dropdowns ───────────────────────────────────────── */

.sf-anchor { position: relative; display: inline-flex; }

.pill-button.is-open {
  background: color-mix(in srgb, var(--mix-light) 78%, transparent);
  border-color: color-mix(in srgb, var(--sidebar-bg) 45%, transparent);
}
.pill-button.has-active {
  background: color-mix(in srgb, var(--leaf) 18%, transparent);
  border-color: color-mix(in srgb, var(--leaf) 55%, transparent);
  color: var(--olive-3);
}

.sf-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: var(--z-sticky);
  min-width: 240px;
  padding: 6px;
  background: color-mix(in srgb, var(--gold-8) 13%, var(--mix-light));
  border: 1px solid color-mix(in srgb, var(--card-border) 65%, transparent);
  border-radius: var(--r-md);
  box-shadow:
    0 18px 40px color-mix(in srgb, var(--shadow-ink) 28%, transparent),
    0 4px 10px color-mix(in srgb, var(--shadow-ink) 15%, transparent),
    inset 0 1px 0 rgba(255,255,255,0.55);
  color: var(--ink);
  animation: sf-menu-in 130ms var(--ease-glide);
  transform-origin: top right;
}
@keyframes sf-menu-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.sf-menu--filter { width: 280px; }

.sf-eyebrow {
  font-size: var(--fs-10);
  letter-spacing: var(--track-16);
  font-weight: var(--fw-bold);
  color: var(--ink-muted);
  padding: 6px 8px 4px;
  text-transform: uppercase;
}
.sf-section { padding: 2px; }
.sf-divider { height: 1px; background: color-mix(in srgb, var(--card-border) 45%, transparent); margin: 6px 6px; }

.sf-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  background: none;
  border: none;
  border-radius: var(--r-xs);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
  font-size: var(--fs-12-5);
  font-family: var(--font-body);
}
.sf-row:hover { background: color-mix(in srgb, var(--sidebar-bg) 6%, transparent); }
.sf-row.is-active { background: color-mix(in srgb, var(--leaf) 14%, transparent); }
.sf-row-label { flex: 1; }
.sf-row-check { color: var(--leaf); display: inline-flex; flex-shrink: 0; }

.sf-cb {
  width: 16px; height: 16px;
  border-radius: 4px;
  border: 1.5px solid color-mix(in srgb, var(--sidebar-bg) 32%, transparent);
  background: color-mix(in srgb, var(--mix-light) 70%, transparent);
  display: grid; place-items: center;
  color: var(--leaf);
  flex-shrink: 0;
}
.sf-row.is-active .sf-cb {
  background: var(--leaf);
  border-color: var(--leaf);
  color: var(--white);
}

.sf-pill-mini {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  border: 1px solid;
  font-size: var(--fs-10);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-06);
  text-transform: uppercase;
}
.sf-pill-dot { width: 6px; height: 6px; border-radius: 50%; }

.sf-seq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
  gap: 4px;
  padding: 4px 6px 4px;
}
.sf-seq-chip {
  font-family: var(--font-display);
  font-size: var(--fs-13);
  letter-spacing: var(--track-005);
  color: var(--ink);
  padding: 6px 0;
  background: color-mix(in srgb, var(--mix-light) 60%, transparent);
  border: 1px solid color-mix(in srgb, var(--card-border) 55%, transparent);
  border-radius: var(--r-xs);
  cursor: pointer;
  text-align: center;
  transition: background var(--dur-0) ease;
}
.sf-seq-chip:hover { background: color-mix(in srgb, var(--mix-light) 85%, transparent); }
.sf-seq-chip.is-active {
  background: var(--sidebar-bg);
  color: color-mix(in srgb, var(--foil) 33%, var(--mix-light));
  border-color: var(--sidebar-bg);
}

.sf-clear {
  justify-content: center;
  color: var(--red-16);
  font-weight: var(--fw-med);
  font-size: var(--fs-11-5);
  letter-spacing: var(--track-04);
}
.sf-clear:hover { background: color-mix(in srgb, var(--red-16) 10%, transparent); }

.shots-empty {
  text-align: center;
  padding: 32px 12px;
  color: var(--ink-muted);
  font-size: var(--fs-13);
  font-style: italic;
}
.shots-empty-link {
  background: none;
  border: none;
  color: var(--ink-sidebar-bg);
  font-weight: var(--fw-semi);
  cursor: pointer;
  font-style: normal;
  text-decoration: underline;
}

/* ─────────── Asset overview — horizontal scroll rows per asset type ─────────── */
.assets-overview {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}
.assets-row-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.assets-row-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 0 2px;
}
.ars-title {
  font-family: var(--font-body);
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-16);
  color: var(--ink-muted);
  text-transform: uppercase;
}
.ars-count {
  font-size: var(--fs-11);
  font-weight: var(--fw-semi);
  font-feature-settings: var(--tnum);
  color: var(--ink-taupe-4);
  background: color-mix(in srgb, var(--tan-deep) 14%, transparent);
  padding: 1px 8px;
  border-radius: var(--r-round);
}
.assets-hscroll {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 6px 2px 6px;
  /* Hide scrollbars — drag-to-scroll handles navigation. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* Open-hand cursor on the row surface; cards override to pointer/grabbing. */
  cursor: grab;
}
.assets-hscroll:active { cursor: grabbing; }
.assets-hscroll::-webkit-scrollbar { display: none; }
.assets-hscroll > * { flex: 0 0 auto; cursor: pointer; }

/* v07zz210 — Drag-scroll affordance. The scrollbar is hidden, so a chevron
   fades in at each live edge on row hover to signal more cards off-screen.
   Absolutely positioned → never shifts the cards below (invariant #20). */
.assets-hscroll-wrap { position: relative; min-width: 0; }
.assets-hscroll-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-round);
  border: 1px solid color-mix(in srgb, var(--tan-deep) 22%, transparent);
  background: color-mix(in srgb, var(--pill-bg) 92%, transparent);
  color: color-mix(in srgb, var(--ink-umber-3) 85%, var(--mix-light));
  box-shadow: 0 2px 8px color-mix(in srgb, var(--shadow-ink) 16%, transparent);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease, background 0.16s ease;
  backdrop-filter: blur(var(--blur-scrim));
}
.assets-hscroll-arrow--left  { left: -4px; }
.assets-hscroll-arrow--right { right: -4px; }
.assets-hscroll-arrow:hover { background: var(--cream-16); }
/* Show the relevant chevron only when (a) the pointer is over this row and
   (b) there's actually content to scroll toward in that direction. */
.assets-row-section.can-left:hover  .assets-hscroll-arrow--left,
.assets-row-section.can-right:hover .assets-hscroll-arrow--right {
  opacity: 1;
  pointer-events: auto;
}
/* Soft fade mask at the scrollable edge(s) reinforces the "more here" cue even
   before hover. Pure visual; no effect on layout or hit-testing. */
.assets-row-section.can-right .assets-hscroll {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent 100%);
          mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent 100%);
}
.assets-row-section.can-left.can-right .assets-hscroll {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
}
.assets-row-section.can-left:not(.can-right) .assets-hscroll {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 48px);
          mask-image: linear-gradient(to right, transparent 0, #000 48px);
}

/* CHARACTERS — fit width: 5 cards visible at once, dynamic with browser resize.
   width = (100% - 4*gap) / 5. min-width prevents collapse on narrow screens. */
.character-card--h {
  width: calc((100% - 48px) / 5);
  min-width: 180px;
  display: flex !important;
  flex-direction: column;
  padding: 6px !important;
  overflow: hidden;
  border-radius: var(--r-md);
}
.character-card--h .character-thumb {
  width: 100%;
  /* 4:5 portrait aspect for the hero image area */
  aspect-ratio: 4 / 5;
  height: auto;
  flex: 0 0 auto;
  border-radius: var(--r-sm);
  border: 1px solid color-mix(in srgb, var(--card-border) 45%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--card-border) 64%, var(--mix-light)) 0%, var(--tan) 100%);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.character-card--h .character-thumb .character-thumb-initials {
  font-family: var(--font-display);
  font-size: var(--fs-30);
  letter-spacing: var(--track-04);
  color: color-mix(in srgb, var(--ink-hi) 85%, transparent);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
}
.character-card--h .character-body {
  padding: 10px 6px 4px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.character-card--h .character-name {
  font-family: var(--font-display);
  font-size: var(--fs-15);
  letter-spacing: var(--track-005);
  color: var(--ink);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Subtitle uses the body font (Inter) — was inheriting display font in some places. */
.character-card--h .character-role {
  font-family: var(--font-body) !important;
  font-size: var(--fs-11-5);
  font-weight: 400;
  color: var(--ink-muted);
  line-height: 1.35;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* LOCATIONS — 4 cards visible per row */
.location-card--h {
  width: calc((100% - 36px) / 4);
  min-width: 200px;
  display: flex !important;
  flex-direction: column;
  padding: 6px !important;
  overflow: hidden;
  border-radius: var(--r-md);
}
.location-card--h .location-thumb {
  width: 100%;
  aspect-ratio: var(--project-aspect, 21 / 9);
  height: auto;
  border-radius: var(--r-sm);
  border: 1px solid color-mix(in srgb, var(--card-border) 45%, transparent);
  position: relative;
  overflow: hidden;
}
.location-card--h .location-body {
  padding: 10px 6px 4px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.location-card--h .location-name {
  font-family: var(--font-display);
  font-size: var(--fs-14);
  text-transform: uppercase;
  letter-spacing: var(--track-04);
  color: var(--ink);
}

/* PROPS — 3 cards visible per row, square thumb on the left */
.prop-card--h {
  width: calc((100% - 24px) / 3);
  min-width: 280px;
  padding: 0 !important;
  overflow: hidden;
  border-radius: var(--r-md);
}

/* Prop card horizontal: square thumb on the left filling full height */
.prop-card--h { display: flex !important; align-items: stretch !important; gap: 0 !important; }
.prop-thumb-square {
  width: 110px;
  flex: 0 0 110px;
  aspect-ratio: 1 / 1;
  background:
    radial-gradient(ellipse at 30% 25%, color-mix(in srgb, var(--hi) 55%, transparent) 0%, transparent 55%),
    linear-gradient(160deg, color-mix(in srgb, var(--nav-active) 50%, transparent) 0%, color-mix(in srgb, var(--gold-deep) 42%, transparent) 100%);
  display: grid;
  place-items: center;
  border-right: 1px solid color-mix(in srgb, var(--card-border) 55%, transparent);
  position: relative;
}
.prop-thumb-square::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, color-mix(in srgb, var(--hi) 20%, transparent) 0%, transparent 40%);
  pointer-events: none;
}
.prop-glyph {
  font-size: var(--fs-44);
  line-height: 1;
  filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--shadow-ink) 18%, transparent));
}
.prop-card--h .prop-body {
  padding: 14px 14px 12px;
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.prop-card--h .prop-name { font-family: var(--font-display); font-size: var(--fs-16); }
.prop-card--h .prop-type { font-size: var(--fs-11); color: var(--ink-muted); }
.prop-card--h .prop-notes { font-size: var(--fs-11); color: var(--ink-muted); font-style: italic; line-height: 1.4; }

/* ─── t06 — shot CRUD additions ────────────────────────────────────── */

/* Inline rename input on the frame title — sized to feel like the text it
   replaces, so the row layout doesn't jump. */
.shot-frame-input {
  font: inherit;
  color: var(--ink);
  background: color-mix(in srgb, var(--cream) 55%, transparent);
  border: 1px solid var(--card-border);
  border-radius: var(--r-xs);
  padding: 1px 6px;
  outline: none;
  min-width: 120px;
  max-width: 320px;
  margin-left: 2px;
}
.shot-frame-input:focus {
  border-color: color-mix(in srgb, var(--leaf) 70%, transparent);
  box-shadow: 0 0 0 var(--ring-w) color-mix(in srgb, var(--leaf) 15%, transparent);
}

/* Archived row — slight desaturation + dotted outline so it's clearly
   distinct in the list when "Show archived" is on. */
.shot-row.is-archived { opacity: 0.62; }
.shot-row.is-archived .shot-frame { font-style: italic; }

/* v07zz154 — "cut from edit": grey the row, desaturate the thumb. The row is
   excluded from batch generation. */
.shot-row.is-omitted { opacity: 0.5; filter: grayscale(0.85); }
.shot-row.is-omitted .shot-frame { text-decoration: line-through; }
.shot-cut-tag {
  margin-left: 6px; font-size: var(--fs-9); font-weight: var(--fw-heavy); letter-spacing: var(--track-08);
  padding: 1px 6px; border-radius: var(--r-round); background: color-mix(in srgb, var(--grey-4) 22%, transparent);
  color: var(--grey-4-ink); text-transform: uppercase;
}
/* v07zz323 — row action cluster: one right-aligned flex group so cut/link/edit/dup
   sit together at the right edge. Previously each toggle carried its own
   margin-left:auto; in the flex eyebrow the free space split between them and they
   spread across the row. The container owns the right-push + the gap now. */
.shot-actions { margin-left: auto; display: flex; align-items: center; gap: 3px; flex-shrink: 0; }
/* Cut toggle: subtle by default, visible on row hover; gold/active when cut. */
.shot-cut-toggle {
  flex-shrink: 0;
  width: 24px; height: 24px; border-radius: var(--r-xs); padding: 0;
  border: 1px solid color-mix(in srgb, var(--card-border) 55%, transparent); background: color-mix(in srgb, var(--mix-light) 55%, transparent);
  color: var(--ink-muted); cursor: pointer; display: grid; place-items: center;
  opacity: 0; transition: opacity var(--dur-1) ease, background var(--dur-1) ease, color var(--dur-1) ease, border-color var(--dur-1) ease;
}
.shot-eyebrow { position: relative; }
.shot-row:hover .shot-cut-toggle { opacity: 1; }
.shot-cut-toggle.is-on { opacity: 1; color: var(--ink-tan-deep); border-color: color-mix(in srgb, var(--gold-deep) 60%, transparent); background: color-mix(in srgb, color-mix(in srgb, var(--gold-13) 86%, var(--mix-light)) 18%, transparent); }
.shot-cut-toggle:hover { background: color-mix(in srgb, var(--danger-soft) 12%, transparent); color: var(--danger); border-color: var(--danger-border); }
/* v07zz535 — Copy-video-folder-path button: a benign "copy" action, so a blue hover
   (overrides the destructive red base hover above). */
.shot-vidpath-toggle:hover { background: color-mix(in srgb, var(--blue-5) 16%, transparent); color: var(--blue-5-ink); border-color: color-mix(in srgb, var(--blue-5) 50%, transparent); }
/* v07zz326 — Delete shot button: reads as destructive (red) so it's clearly
   distinct from Duplicate. Hover-revealed like the rest of the cluster. */
.shot-del-toggle:hover { background: color-mix(in srgb, var(--danger-soft) 18%, transparent); color: var(--danger); border-color: color-mix(in srgb, var(--danger-soft) 60%, transparent); }
/* v693 — Flag for review. Deliberately NOT hover-only when ON: the base
   .shot-cut-toggle is opacity:0 until the row is hovered, and .is-on above already
   forces opacity:1 — which is exactly the "stays on" Hugo asked for, so a flagged
   shot is visible while scanning the list without touching anything.
   Gold matches .md-needsreview-btn.is-on in the shot modal (same flag, same colour
   in both places). The :hover override is needed because the shared base hover is
   RED (destructive) and this is not a destructive action. */
.shot-review-toggle:hover { background: color-mix(in srgb, var(--gold-10) 16%, transparent); color: var(--ink-gold-3); border-color: color-mix(in srgb, color-mix(in srgb, var(--gold-6) 93%, var(--mix-dark)) 50%, transparent); }
.shot-review-toggle.is-on { opacity: 1; background: color-mix(in srgb, var(--gold-10) 20%, transparent); color: var(--ink-gold-3); border-color: color-mix(in srgb, var(--gold-6) 93%, var(--mix-dark)); }
.shot-review-toggle.is-on:hover { background: color-mix(in srgb, var(--gold-10) 32%, transparent); color: color-mix(in srgb, var(--ink-tan-deep) 62%, var(--mix-dark)); }

/* v07zz289 — link (continuation) button + jump-tag, sit next to the cut toggle.
   Button is hover-revealed like the cut toggle; tag (partner id) shows whenever
   the shot is linked. Blue accent so it reads as a relationship, not an action. */
.shot-link-toggle {
  flex-shrink: 0;
  width: 24px; height: 24px; border-radius: var(--r-xs); padding: 0;
  border: 1px solid color-mix(in srgb, var(--card-border) 55%, transparent); background: color-mix(in srgb, var(--mix-light) 55%, transparent);
  color: var(--ink-muted); cursor: pointer; display: grid; place-items: center;
  opacity: 0; transition: opacity var(--dur-1) ease, background var(--dur-1) ease, color var(--dur-1) ease, border-color var(--dur-1) ease;
}
.shot-row:hover .shot-link-toggle { opacity: 1; }
.shot-link-toggle.is-on { opacity: 1; color: var(--ink-blue-3); border-color: color-mix(in srgb, var(--blue) 55%, transparent); background: color-mix(in srgb, var(--blue) 14%, transparent); }
.shot-link-toggle:hover { background: color-mix(in srgb, var(--blue) 16%, transparent); color: var(--ink-blue-4); border-color: color-mix(in srgb, var(--blue) 50%, transparent); }
.shot-link-tag {
  margin-left: 6px; flex-shrink: 0; display: inline-flex; align-items: center; gap: 3px; cursor: pointer;
  font-size: var(--fs-9); font-weight: var(--fw-heavy); letter-spacing: var(--track-05); line-height: 1; text-transform: uppercase;
  padding: 2px 7px 2px 5px; border-radius: var(--r-round);
  /* v898 — teal, the palette's link colour (was a stray blue). Master = solid, cut = outline. */
  background: color-mix(in srgb, var(--teal) 16%, transparent); border: 1px solid color-mix(in srgb, var(--teal-2) 55%, transparent); color: var(--teal-2-ink);
}
.shot-link-tag:hover { background: color-mix(in srgb, var(--teal) 28%, transparent); }
.shot-link-tag.is-master { background: var(--teal-2); border-color: var(--teal-2); color: var(--ink-mint-7); }
.shot-link-tag.is-master:hover { background: var(--teal-2-ink); }

/* ─── v898 — WHOLE-ROW treatments: LINKED (teal) and IN REVIEW (gold) ─────────
   Hugo: "a clearer visual colour distinction for linked shots and In review shots…
   a treatment to the whole row so it's clear at one glance which shots are linked
   (and which one is the master) and which need review."
   Wash = a tint layered over the paper fill, fading out to the right; bar = inset
   box-shadow on the left edge. Master bar is solid deep teal, the continuation's is
   lighter. A row that is both linked AND in review shows both bars side by side and
   the gold wash (review is the thing to act on). Hover / selected keep the bar.
   Nothing changes size (invariant #20). */
.shot-row.is-linked { --row-bar: color-mix(in srgb, var(--teal) 48%, transparent); }
.shot-row.is-link-master { --row-bar: var(--teal-2); }
.shot-row.is-linked {
  background: linear-gradient(90deg, color-mix(in srgb, var(--teal) 30%, transparent) 0%, color-mix(in srgb, var(--teal) 11%, transparent) 32%, color-mix(in srgb, var(--teal) 0%, transparent) 72%), color-mix(in srgb, var(--cream-2) 92%, transparent);
  box-shadow:
    inset 4px 0 0 0 var(--row-bar),
    inset 0 1px 0 color-mix(in srgb, var(--cream) 85%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--shadow-ink-2) 8%, transparent),
    0 2px 4px color-mix(in srgb, var(--shadow-ink) 8%, transparent),
    0 6px 14px color-mix(in srgb, var(--shade) 14%, transparent);
}
.shot-row.is-linked:hover {
  background: linear-gradient(90deg, color-mix(in srgb, var(--teal) 30%, transparent) 0%, color-mix(in srgb, var(--teal) 11%, transparent) 32%, color-mix(in srgb, var(--teal) 0%, transparent) 72%), color-mix(in srgb, color-mix(in srgb, var(--paper-2) 44%, var(--mix-light)) 92%, transparent);
  box-shadow:
    inset 4px 0 0 0 var(--row-bar),
    inset 0 1px 0 color-mix(in srgb, color-mix(in srgb, var(--hi) 71%, var(--mix-light)) 95%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--shadow-ink-2) 10%, transparent),
    0 0 0 1.5px color-mix(in srgb, var(--nav-active) 85%, transparent),
    0 4px 10px color-mix(in srgb, var(--shadow-ink) 14%, transparent),
    0 14px 32px color-mix(in srgb, var(--foil) 34%, transparent);
}
.shot-row.is-linked.selected {
  background: linear-gradient(90deg, color-mix(in srgb, var(--teal) 30%, transparent) 0%, color-mix(in srgb, var(--teal) 11%, transparent) 32%, color-mix(in srgb, var(--teal) 0%, transparent) 72%), color-mix(in srgb, var(--cream-10) 85%, transparent);
  box-shadow:
    inset 4px 0 0 0 var(--row-bar),
    inset 0 1px 0 color-mix(in srgb, var(--hi) 85%, transparent),
    0 0 0 1.5px color-mix(in srgb, var(--leaf) 55%, transparent),
    0 8px 22px color-mix(in srgb, var(--leaf) 18%, transparent);
}
.shot-row.is-review {
  background: linear-gradient(90deg, color-mix(in srgb, var(--gold-10) 34%, transparent) 0%, color-mix(in srgb, var(--gold-10) 13%, transparent) 32%, color-mix(in srgb, var(--gold-10) 0%, transparent) 72%), color-mix(in srgb, var(--cream-2) 92%, transparent);
  box-shadow:
    inset 4px 0 0 0 var(--gold-10),
    inset 0 1px 0 color-mix(in srgb, var(--cream) 85%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--shadow-ink-2) 8%, transparent),
    0 2px 4px color-mix(in srgb, var(--shadow-ink) 8%, transparent),
    0 6px 14px color-mix(in srgb, var(--shade) 14%, transparent);
}
.shot-row.is-review:hover {
  background: linear-gradient(90deg, color-mix(in srgb, var(--gold-10) 34%, transparent) 0%, color-mix(in srgb, var(--gold-10) 13%, transparent) 32%, color-mix(in srgb, var(--gold-10) 0%, transparent) 72%), color-mix(in srgb, color-mix(in srgb, var(--paper-2) 44%, var(--mix-light)) 92%, transparent);
  box-shadow:
    inset 4px 0 0 0 var(--gold-10),
    inset 0 1px 0 color-mix(in srgb, color-mix(in srgb, var(--hi) 71%, var(--mix-light)) 95%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--shadow-ink-2) 10%, transparent),
    0 0 0 1.5px color-mix(in srgb, var(--nav-active) 85%, transparent),
    0 4px 10px color-mix(in srgb, var(--shadow-ink) 14%, transparent),
    0 14px 32px color-mix(in srgb, var(--foil) 34%, transparent);
}
.shot-row.is-review.selected {
  background: linear-gradient(90deg, color-mix(in srgb, var(--gold-10) 34%, transparent) 0%, color-mix(in srgb, var(--gold-10) 13%, transparent) 32%, color-mix(in srgb, var(--gold-10) 0%, transparent) 72%), color-mix(in srgb, var(--cream-10) 85%, transparent);
  box-shadow:
    inset 4px 0 0 0 var(--gold-10),
    inset 0 1px 0 color-mix(in srgb, var(--hi) 85%, transparent),
    0 0 0 1.5px color-mix(in srgb, var(--leaf) 55%, transparent),
    0 8px 22px color-mix(in srgb, var(--leaf) 18%, transparent);
}
/* both: teal bar at the edge, gold bar beside it, gold wash */
.shot-row.is-review.is-linked {
  box-shadow:
    inset 4px 0 0 0 var(--row-bar),
    inset 9px 0 0 0 var(--gold-10),
    inset 0 1px 0 color-mix(in srgb, var(--cream) 85%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--shadow-ink-2) 8%, transparent),
    0 2px 4px color-mix(in srgb, var(--shadow-ink) 8%, transparent),
    0 6px 14px color-mix(in srgb, var(--shade) 14%, transparent);
}
.shot-row.is-review.is-linked:hover {
  box-shadow:
    inset 4px 0 0 0 var(--row-bar),
    inset 9px 0 0 0 var(--gold-10),
    inset 0 1px 0 color-mix(in srgb, color-mix(in srgb, var(--hi) 71%, var(--mix-light)) 95%, transparent),
    0 0 0 1.5px color-mix(in srgb, var(--nav-active) 85%, transparent),
    0 4px 10px color-mix(in srgb, var(--shadow-ink) 14%, transparent),
    0 14px 32px color-mix(in srgb, var(--foil) 34%, transparent);
}
.shot-row.is-review.is-linked.selected {
  box-shadow:
    inset 4px 0 0 0 var(--row-bar),
    inset 9px 0 0 0 var(--gold-10),
    inset 0 1px 0 color-mix(in srgb, var(--hi) 85%, transparent),
    0 0 0 1.5px color-mix(in srgb, var(--leaf) 55%, transparent),
    0 8px 22px color-mix(in srgb, var(--leaf) 18%, transparent);
}

/* v07zz289 — shot link picker modal (visual continuation link). */
.shotlink-overlay { position: fixed; inset: 0; z-index: var(--z-popover); background: color-mix(in srgb, var(--shade-9) 50%, transparent); display: grid; place-items: center; -webkit-backdrop-filter: blur(var(--blur-scrim-3)); backdrop-filter: blur(var(--blur-scrim-3)); padding: 24px; }
.shotlink-modal { width: min(520px, 100%); max-height: min(640px, 86vh); display: flex; flex-direction: column; background: var(--card-bg-solid, color-mix(in srgb, var(--card-bg-light-solid) 93%, var(--mix-light))); border: 1px solid var(--card-border, color-mix(in srgb, var(--umber-2) 25%, transparent)); border-radius: var(--r-card); box-shadow: 0 28px 80px rgba(0,0,0,0.45); overflow: hidden; }
.shotlink-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--card-border, color-mix(in srgb, var(--umber-2) 18%, transparent)); }
.shotlink-title { font-size: var(--fs-15); font-weight: var(--fw-bold); color: var(--ink); }
.shotlink-title b { font-family: var(--font-display); font-weight: 400; letter-spacing: var(--track-01); font-size: 19px; }
.shotlink-ft { color: var(--ink-muted); font-weight: var(--fw-med); }
.shotlink-x { background: transparent; border: 0; color: var(--ink-muted); cursor: pointer; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-7); }
.shotlink-x:hover { background: color-mix(in srgb, var(--black) 6%, transparent); color: var(--ink); }
.shotlink-current { display: flex; align-items: center; gap: 12px; padding: 16px; font-size: var(--fs-13); color: var(--ink); line-height: 1.5; }
.shotlink-unlink { flex: 0 0 auto; margin-left: auto; padding: 7px 14px; border-radius: var(--r-sm); border: 1px solid color-mix(in srgb, var(--red-17) 45%, transparent); background: color-mix(in srgb, var(--red-17) 12%, transparent); color: var(--red-15); font-weight: var(--fw-bold); font-size: var(--fs-12); cursor: pointer; }
.shotlink-unlink:hover:not(:disabled) { background: color-mix(in srgb, var(--red-17) 20%, transparent); }
.shotlink-role { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 12px 16px 6px; font-size: var(--fs-12); color: var(--ink-muted); }
.shotlink-rolelabel { font-weight: var(--fw-semi); }
.shotlink-roleswitch { display: inline-flex; border: 1px solid var(--card-border); border-radius: var(--r-sm); overflow: hidden; }
.shotlink-roleswitch button { border: 0; background: transparent; padding: 5px 11px; font-size: var(--fs-11-5); font-weight: var(--fw-bold); cursor: pointer; color: var(--ink-muted); }
.shotlink-roleswitch button.is-on { background: var(--blue-2); color: var(--white); }
.shotlink-rolehint { color: var(--ink-muted); font-style: italic; }
.shotlink-search { margin: 8px 16px 10px; padding: 9px 12px; border-radius: var(--r-9); border: 1px solid var(--card-border); background: color-mix(in srgb, var(--mix-light) 60%, transparent); font: inherit; font-size: var(--fs-13); color: var(--ink); }
.shotlink-search:focus { outline: none; border-color: color-mix(in srgb, var(--blue) 60%, transparent); }
/* v07zz317 — flex-basis MUST be auto, not 0. The overlay centers the modal
   (place-items:center) so the modal is sized to its content, not stretched; with
   flex-basis 0 the list contributed 0 height → the modal collapsed to just the
   header+search and the list had no room to grow into (showed a 1-row sliver).
   With basis auto the list's content counts toward the modal height, pushing it
   to the max-height cap, after which min-height:0 lets it shrink-to-fit + scroll. */
.shotlink-list { flex: 1 1 auto; min-height: 160px; overflow-y: auto; padding: 0 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.shotlink-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 6px 8px; border: 1px solid transparent; border-radius: var(--r-9); background: transparent; cursor: pointer; font: inherit; }
.shotlink-item:hover:not(:disabled) { background: color-mix(in srgb, var(--mix-light) 60%, transparent); border-color: var(--card-border); }
.shotlink-item-thumb { flex: 0 0 auto; position: relative; overflow: hidden; width: 64px; height: 30px; border-radius: 5px; background-size: cover; background-position: center; background-color: color-mix(in srgb, var(--ink-muted) 18%, transparent); }
.shotlink-item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shotlink-item-meta { display: flex; flex-direction: column; min-width: 0; flex: 1 1 0; }
.shotlink-item-id { font-size: var(--fs-12-5); font-weight: var(--fw-bold); color: var(--ink); }
.shotlink-item-ft { font-size: var(--fs-11); color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shotlink-item-tag { flex: 0 0 auto; font-size: var(--fs-9); font-weight: var(--fw-heavy); letter-spacing: var(--track-05); text-transform: uppercase; color: var(--ink-blue-3); background: color-mix(in srgb, var(--blue) 16%, transparent); border-radius: var(--r-round); padding: 2px 7px; }
.shotlink-empty { padding: 24px; text-align: center; color: var(--ink-muted); font-size: var(--fs-12-5); }

/* t18 — generating shot pulse. A subtle teal glow sweeps across the
   row while a generation job is in flight. Removes itself when the
   generation_queue row promotes to completed (App refreshes the
   generatingSet on every SSE event). */
.shot-row.is-generating {
  position: relative;
}
.shot-row.is-generating::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  border: 1px solid color-mix(in srgb, var(--teal) 45%, transparent);
  box-shadow:
    inset 0 0 0 var(--hairline-w) color-mix(in srgb, var(--teal) 20%, transparent),
    0 0 14px color-mix(in srgb, var(--teal) 30%, transparent);
  animation: shot-generating-pulse var(--dur-pulse) ease-in-out infinite;
}
@keyframes shot-generating-pulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 1;    }
}

/* t12 — unresolved notes badge next to the sequence eyebrow on each
   shot row. Amber so it reads as "needs attention" without yelling. */
.shot-notes-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 8px;
  padding: 1px 7px 1px 6px;
  border-radius: var(--r-round);
  border: 1px solid var(--gold-6);
  background: color-mix(in srgb, var(--gold-16) 18%, transparent);
  color: color-mix(in srgb, var(--ink-tan-deep) 81%, var(--mix-dark));
  font-size: var(--fs-10);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-04);
  vertical-align: middle;
}
.shot-notes-badge svg { stroke: currentColor; }

/* t06b — small grey "ARCHIVED" tag rendered next to the sequence
   eyebrow on archived rows when the filter is on. */
.shot-archived-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: var(--r-round);
  border: 1px solid var(--st-pending);
  background: var(--pill-bg);
  color: var(--st-pending-ink);
  font-size: var(--fs-9);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-10);
  text-transform: uppercase;
  vertical-align: middle;
}
/* t06b — Show-archived toggle row inside FilterMenu. Reuses .sf-row
   layout; .sf-row-count is the grey "· N" suffix. */
.sf-row--toggle .sf-row-count {
  color: var(--ink-muted);
  font-weight: var(--fw-med);
}

/* ─── v07zz583 — reviewed-by chips + admin "Needs Reviewing" ──────────────
   • .shot-reviewed-chip = ✓ + initials of everyone who commented since the
     shot's last NEW image/video version (a new version resets it; other
     people's notes never clear YOUR mark).
   • .needs-my-review = admin flagged the shot and YOU haven't commented
     since → gold left accent + REVIEW tag. Accent = box-shadow inset, so
     row size/layout never shifts (invariant #20). */
.shot-reviewed-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 8px;
  padding: 1px 6px 1px 6px;
  border-radius: var(--r-round);
  border: 1px solid color-mix(in srgb, var(--olive) 90%, var(--mix-light));
  background: color-mix(in srgb, color-mix(in srgb, var(--leaf) 91%, var(--mix-light)) 16%, transparent);
  color: color-mix(in srgb, var(--leaf-deep) 67%, var(--mix-dark));
  font-size: var(--fs-9);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--track-04);
  vertical-align: middle;
}
.shot-reviewed-chip svg { stroke: currentColor; flex: 0 0 auto; }
.src-init {
  display: inline-grid;
  place-items: center;
  min-width: 15px;
  height: 15px;
  padding: 0 2px;
  border-radius: var(--r-round);
  background: color-mix(in srgb, color-mix(in srgb, var(--leaf-deep) 67%, var(--mix-dark)) 14%, transparent);
  border: 1px solid color-mix(in srgb, color-mix(in srgb, var(--leaf-deep) 67%, var(--mix-dark)) 35%, transparent);
  font-size: var(--fs-8-5);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--track-02);
}
.shot-review-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: var(--r-round);
  border: 1px solid color-mix(in srgb, var(--gold-6) 93%, var(--mix-dark));
  background: color-mix(in srgb, var(--gold-10) 22%, transparent);
  color: var(--ink-gold-3);
  font-size: var(--fs-9);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--track-10);
  text-transform: uppercase;
  vertical-align: middle;
}
/* v898 — the per-person bar moved into the whole-row treatment below (.is-review); the
   .needs-my-review class now only drives the SOLID "In review · you" tag. */
.shot-review-tag.is-mine { background: var(--gold-10); border-color: color-mix(in srgb, var(--gold-6) 93%, var(--mix-dark)); color: color-mix(in srgb, var(--ink-deep-2) 96%, var(--mix-dark)); }
/* FilterMenu "Needs my review" row */
.sf-row--review .sf-review-label { font-size: var(--fs-12); font-weight: var(--fw-bold); color: var(--ink); }
.sf-row--review .sf-row-count { color: var(--ink-muted); font-weight: var(--fw-med); }

/* Hover-only kebab "…" trigger at the right edge of each shot row. */
.shot-kebab-anchor {
  position: relative;
  margin-left: 4px;
  align-self: center;
}
.shot-kebab-btn {
  width: 28px;
  height: 28px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity var(--dur-2) ease, background var(--dur-2) ease, border-color var(--dur-2) ease, color var(--dur-2) ease;
}
.shot-row:hover .shot-kebab-btn,
.shot-kebab-btn.is-open { opacity: 1; }
.shot-kebab-btn:hover,
.shot-kebab-btn.is-open {
  background: color-mix(in srgb, var(--cream) 45%, transparent);
  border-color: var(--card-border);
  color: var(--ink);
}
.shot-kebab-anchor .kebab-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: var(--z-sticky-2);
  min-width: 180px;
  padding: 4px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--cream-2) 98%, transparent);
  border: 1px solid var(--card-border);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--cream) 85%, transparent),
    0 6px 18px color-mix(in srgb, var(--shadow-ink) 22%, transparent),
    0 14px 32px color-mix(in srgb, var(--shade) 20%, transparent);
  display: flex;
  flex-direction: column;
  gap: 1px;
  animation: statusMenuPop var(--dur-2) ease-out;
}
.kebab-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  background: transparent;
  border: none;
  border-radius: var(--r-xs);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--fs-11-5);
  font-weight: var(--fw-med);
  color: var(--ink);
  text-align: left;
  letter-spacing: var(--track-02);
  transition: background var(--dur-0) ease, color var(--dur-0) ease;
}
.kebab-row:hover { background: color-mix(in srgb, var(--tan-deep) 10%, transparent); }
.kebab-row.is-danger { color: var(--red-4); }
.kebab-row.is-danger:hover { background: color-mix(in srgb, var(--danger-soft-2) 12%, transparent); color: var(--danger-ink); }
.kebab-row-ico {
  width: 14px;
  text-align: center;
  font-size: var(--fs-12);
  color: var(--ink-muted);
}
.kebab-row.is-danger .kebab-row-ico { color: var(--red-4); }

/* Header pill variants — toggle (archived) + add (Add Shot). Reuse the
   existing .pill-button base in this file; only state overrides here. */
.pill-button--toggle.is-on {
  background: color-mix(in srgb, var(--leaf) 18%, transparent);
  border-color: color-mix(in srgb, var(--leaf) 55%, transparent);
  color: color-mix(in srgb, var(--ink-forest-2) 93%, var(--mix-light));
}
.pill-button--add {
  background: color-mix(in srgb, var(--leaf) 16%, transparent);
  border-color: color-mix(in srgb, var(--leaf) 45%, transparent);
  color: color-mix(in srgb, var(--ink-forest-2) 93%, var(--mix-light));
}
.pill-button--add:hover { background: color-mix(in srgb, var(--leaf) 24%, transparent); }
.pill-button--add.is-open {
  background: color-mix(in srgb, var(--leaf) 28%, transparent);
  border-color: color-mix(in srgb, var(--leaf) 65%, transparent);
}

/* Add-Shot popover — visually consistent with .sf-menu but a vertical
   form layout instead of a row list. */
.sf-menu--add {
  min-width: 280px;
  padding: 12px;
  gap: 10px;
}
/* v07zz321 — Add-shot Single/Batch toggle + batch fields. */
.add-shot-modes { display: inline-flex; align-self: flex-start; border: 1px solid var(--card-border); border-radius: var(--r-sm); overflow: hidden; }
.add-shot-modes button { border: 0; background: transparent; padding: 5px 14px; font: inherit; font-size: var(--fs-11-5); font-weight: var(--fw-bold); cursor: pointer; color: var(--ink-muted); }
.add-shot-modes button.is-on { background: var(--blue-2); color: var(--white); }
.add-shot-batch-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.add-shot-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--fs-11);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-06);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.add-shot-select,
.add-shot-input {
  font: inherit;
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: var(--fw-med);
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink);
  background: color-mix(in srgb, var(--cream) 55%, transparent);
  border: 1px solid var(--card-border);
  border-radius: var(--r-xs);
  padding: 6px 8px;
  outline: none;
}
.add-shot-select:focus,
.add-shot-input:focus {
  border-color: color-mix(in srgb, var(--leaf) 70%, transparent);
  box-shadow: 0 0 0 var(--ring-w) color-mix(in srgb, var(--leaf) 15%, transparent);
}
.add-shot-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}
.add-shot-cancel,
.add-shot-submit {
  font: inherit;
  font-family: var(--font-body);
  font-size: var(--fs-11-5);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-04);
  padding: 6px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--card-border);
  cursor: pointer;
  transition: background var(--dur-1) ease, border-color var(--dur-1) ease, color var(--dur-1) ease;
}
.add-shot-cancel {
  background: transparent;
  color: var(--ink-muted);
}
.add-shot-cancel:hover {
  background: color-mix(in srgb, var(--tan-deep) 10%, transparent);
  color: var(--ink);
}
.add-shot-submit {
  background: color-mix(in srgb, var(--leaf) 85%, transparent);
  border-color: color-mix(in srgb, var(--olive-2) 85%, transparent);
  color: var(--ink-cream);
}
.add-shot-submit:hover {
  background: color-mix(in srgb, var(--olive-2) 95%, transparent);
}
.add-shot-submit:disabled {
  opacity: 0.5;
  cursor: default;
}
/* v07zz299 — SH-prefixed number input group: a fixed "SH" chip sits flush
   against the numeric field so the user only types the digits. */
.add-shot-num {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--card-border);
  border-radius: var(--r-xs);
  overflow: hidden;
  background: color-mix(in srgb, var(--cream) 55%, transparent);
}
.add-shot-num:focus-within {
  border-color: color-mix(in srgb, var(--leaf) 70%, transparent);
  box-shadow: 0 0 0 var(--ring-w) color-mix(in srgb, var(--leaf) 15%, transparent);
}
.add-shot-num-prefix {
  display: inline-flex;
  align-items: center;
  padding: 0 8px;
  font-family: var(--font-mono, monospace);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-08);
  color: var(--ink-muted);
  background: color-mix(in srgb, var(--tan-deep) 10%, transparent);
  border-right: 1px solid var(--card-border);
}
.add-shot-num .add-shot-input {
  flex: 1;
  min-width: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  font-family: var(--font-mono, monospace);
  letter-spacing: var(--track-06);
}
.add-shot-num .add-shot-input:focus {
  box-shadow: none;
}
.add-shot-hint {
  font-size: var(--fs-10-5);
  line-height: 1.4;
  color: var(--ink-muted);
  text-transform: none;
  letter-spacing: 0;
}
.add-shot-err {
  font-size: var(--fs-11);
  font-weight: var(--fw-semi);
  color: var(--red-4);
  text-transform: none;
  letter-spacing: 0;
}

/* ─── v01f — Static (non-clickable) status pill ──────────────────────
   v01f drops the inline dropdown so the row pill is now passive. The
   pill text + dot are centered together; padding evens out (the old
   asymmetric padding made room for the now-removed chevron). The pill
   uses pointer-events: none so a click anywhere on the row — including
   the pill — opens the shot detail modal where the status changes
   actually happen. */
.shot-pill--static {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 12px 4px;
  pointer-events: none;
  cursor: default;
  font-family: var(--font-body);
  /* v03a — pills must be a single line, centered text, never wrap. */
  white-space: nowrap;
  text-align: center;
}
.shot-pill--static .shot-pill-label {
  /* v03a — keep the label on one line; ellipsis only if truly squeezed. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

/* v07zw — Batch mode UI (Shotlist multi-select + dispatch). */
.batch-mode-btn {
  font: inherit; font-size: var(--fs-12); font-weight: var(--fw-semi);
  padding: 6px 12px; border-radius: var(--r-card);
  border: 1px solid var(--card-border);
  background: color-mix(in srgb, var(--cream) 45%, transparent);
  color: var(--ink); cursor: pointer;
  transition: background var(--dur-1) ease, border-color var(--dur-1) ease;
}
.batch-mode-btn:hover { background: color-mix(in srgb, var(--cream) 85%, transparent); }
.batch-mode-btn.is-active {
  background: color-mix(in srgb, var(--leaf) 55%, transparent);
  border-color: color-mix(in srgb, var(--olive-2) 85%, transparent);
  color: color-mix(in srgb, var(--ink-forest-2) 65%, var(--mix-dark));
}

.batch-action-bar {
  position: sticky;
  bottom: 6px;
  margin: 12px -16px -12px;
  padding: 10px 18px;
  display: flex; align-items: center; gap: 12px;
  background: color-mix(in srgb, color-mix(in srgb, var(--olive-10) 33%, var(--mix-dark)) 92%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid color-mix(in srgb, var(--leaf) 45%, transparent);
  color: var(--ink-on-accent);
  z-index: 4;
  box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.30);
}
.batch-action-count { font-size: var(--fs-13); }
.batch-action-count strong { color: color-mix(in srgb, var(--gold-2) 95%, transparent); }
.batch-action-link {
  font: inherit; font-size: var(--fs-11-5);
  padding: 4px 9px; border-radius: var(--r-xs);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--ink-on-accent) 20%, transparent);
  color: color-mix(in srgb, var(--ink-on-accent) 85%, transparent);
  cursor: pointer;
}
.batch-action-link:hover { background: color-mix(in srgb, var(--ink-on-accent) 8%, transparent); border-color: color-mix(in srgb, var(--ink-on-accent) 35%, transparent); }
.batch-action-link:disabled { opacity: 0.4; cursor: not-allowed; }
.batch-action-cta {
  font: inherit; font-size: var(--fs-13); font-weight: var(--fw-bold);
  padding: 8px 18px; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--leaf) 92%, transparent);
  border: 1px solid color-mix(in srgb, color-mix(in srgb, var(--pale-green) 86%, var(--mix-light)) 95%, transparent);
  color: color-mix(in srgb, var(--ink-forest-2) 65%, var(--mix-dark)); cursor: pointer;
  transition: background var(--dur-1) ease, transform var(--dur-1) ease;
}
.batch-action-cta:hover:not(:disabled) {
  background: color-mix(in srgb, var(--pale-green) 95%, var(--mix-light));
  transform: translateY(-1px);
}
.batch-action-cta:disabled { opacity: 0.45; cursor: not-allowed; }
/* v07zz367 — multi-select: gold ring on selected rows + batch stage pills in the bar. */
.shot-row.batch-selected {
  background: color-mix(in srgb, var(--cream-10) 90%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--hi) 85%, transparent),
    0 0 0 2.5px var(--gold-13),
    0 8px 22px color-mix(in srgb, var(--gold-13) 30%, transparent);
}
.batch-action-bar { flex-wrap: wrap; row-gap: 8px; }
.batch-stage-set { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.batch-stage-label { font-size: var(--fs-11); letter-spacing: var(--track-03); color: color-mix(in srgb, var(--ink-on-accent) 72%, transparent); margin-right: 2px; }
.batch-stage-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font: inherit; font-size: var(--fs-11); font-weight: var(--fw-bold); letter-spacing: var(--track-02);
  padding: 4px 9px; border-radius: var(--r-round);
  background: color-mix(in srgb, var(--cream-2) 96%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--card-border) 60%, transparent);
  cursor: pointer;
  transition: transform 110ms ease, box-shadow 110ms ease;
}
.batch-stage-pill:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.28); }
.batch-stage-pill:disabled { opacity: 0.4; cursor: not-allowed; }
.batch-stage-dot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 auto; }

/* Batch dispatch modal. */
.batch-modal {
  width: min(1080px, 96vw);
  max-height: 92vh;
  display: flex; flex-direction: column;
  padding: 22px 24px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--cream-2) 97%, transparent);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.40);
}
.batch-modal-head {
  display: flex; align-items: flex-start; gap: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--tan-deep) 18%, transparent);
  padding-bottom: 14px; margin-bottom: 14px;
}
.batch-modal-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, color-mix(in srgb, var(--olive-9) 94%, var(--mix-dark)) 95%, transparent);
}
.batch-modal-title { font-size: var(--fs-18); font-weight: var(--fw-semi); color: var(--ink); margin-top: 4px; }
.batch-modal-sub  { font-size: var(--fs-12-5); color: var(--ink-muted); margin-top: 4px; }

.batch-shared-row {
  display: grid;
  grid-template-columns: 1.2fr 1.4fr 0.8fr 1.6fr;
  gap: 14px;
  padding: 12px 14px;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, color-mix(in srgb, var(--gold-10) 25%, var(--mix-light)) 45%, transparent);
  border: 1px solid var(--card-border);
  margin-bottom: 12px;
}
.batch-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.batch-field-label { font-size: var(--fs-10-5); font-weight: var(--fw-bold); letter-spacing: var(--track-12); text-transform: uppercase; color: var(--ink-muted); }
.batch-field select, .batch-field input[type="range"] {
  font: inherit; font-size: var(--fs-13);
  padding: 6px 8px; border-radius: 5px;
  border: 1px solid var(--card-border); background: color-mix(in srgb, var(--cream) 85%, transparent);
}
.batch-field-hint { font-size: var(--fs-10-5); color: var(--ink-muted); font-style: italic; margin-top: 2px; }

.batch-bulk-row {
  display: flex; gap: 10px; align-items: stretch;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--gold-2) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold-2) 30%, transparent);
  margin-bottom: 14px;
}
.batch-bulk-row textarea {
  flex: 1;
  font: inherit; font-size: var(--fs-12-5); line-height: 1.4;
  padding: 8px 10px;
  border-radius: 5px;
  border: 1px solid var(--card-border);
  background: color-mix(in srgb, var(--cream) 85%, transparent);
  resize: vertical;
}
.batch-bulk-actions {
  display: flex; flex-direction: column; gap: 6px; justify-content: center;
}
.batch-bulk-actions button {
  font: inherit; font-size: var(--fs-11); font-weight: var(--fw-semi);
  padding: 5px 10px; border-radius: 5px;
  background: color-mix(in srgb, var(--cream) 85%, transparent);
  border: 1px solid var(--card-border);
  color: var(--ink); cursor: pointer; white-space: nowrap;
}
.batch-bulk-actions button:hover:not(:disabled) {
  background: color-mix(in srgb, var(--gold-2) 25%, transparent);
  border-color: color-mix(in srgb, color-mix(in srgb, var(--gold-16) 76%, var(--mix-dark)) 65%, transparent);
}
.batch-bulk-actions button:disabled { opacity: 0.4; cursor: not-allowed; }

.batch-shots-scroll {
  flex: 1; min-height: 200px; max-height: 50vh;
  overflow-y: auto;
  padding-right: 4px;
  display: flex; flex-direction: column; gap: 10px;
}
.batch-shot-row {
  border: 1px solid var(--card-border);
  background: color-mix(in srgb, var(--cream) 60%, transparent);
  border-radius: var(--r-xs);
  padding: 9px 11px;
}
.batch-shot-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.batch-shot-id { font-family: var(--font-mono, monospace); font-size: var(--fs-12-5); font-weight: var(--fw-bold); color: var(--ink); }
.batch-shot-title { font-size: var(--fs-12); color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.batch-shot-reset {
  font: inherit; font-size: var(--fs-10-5); padding: 3px 7px; border-radius: 4px;
  background: transparent; border: 1px solid var(--card-border); color: var(--ink-muted); cursor: pointer;
}
.batch-shot-reset:hover { background: color-mix(in srgb, var(--cream) 85%, transparent); color: var(--ink); }
.batch-shot-state {
  font-size: var(--fs-10); font-weight: var(--fw-bold); letter-spacing: var(--track-10); text-transform: uppercase;
  padding: 2px 7px; border-radius: var(--r-round);
}
.batch-shot-state.is-ready    { background: color-mix(in srgb, var(--ok) 20%, transparent); color: var(--ink-forest-2); border: 1px solid color-mix(in srgb, var(--olive-2) 45%, transparent); }
.batch-shot-state.is-empty    { background: color-mix(in srgb, var(--danger-soft) 12%, transparent);  color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger-soft) 35%, transparent); }
.batch-shot-state.is-loading  { background: color-mix(in srgb, var(--taupe-5) 15%, transparent); color: var(--ink-muted); border: 1px solid var(--card-border); }
.batch-shot-prompt {
  width: 100%; box-sizing: border-box;
  font: inherit; font-family: var(--font-mono, monospace); font-size: var(--fs-12); line-height: 1.4;
  padding: 7px 9px; border-radius: 5px;
  border: 1px solid var(--card-border);
  background: color-mix(in srgb, var(--cream) 85%, transparent);
  resize: vertical;
}

.batch-error {
  margin-top: 12px;
  padding: 9px 12px; border-radius: var(--r-xs);
  background: color-mix(in srgb, var(--danger-soft) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger-soft) 35%, transparent);
  color: var(--danger); font-size: var(--fs-12-5);
}

.batch-actions-row {
  display: flex; align-items: center; gap: 12px;
  margin-top: 14px; padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--tan-deep) 18%, transparent);
}

/* ─── v971 — SHARED SHOT-STATUS MENU (shot rows + Notes page) ───────────────
   The pill wears the shot's current stage colour; the menu offers the same six
   stages as the multi-select bar plus the Retake and Cut flags. */
.ssm-anchor { position: relative; display: inline-flex; vertical-align: middle; margin-left: 8px; }
.ssm-pill {
  display: inline-flex; align-items: center; gap: 5px;
  height: 22px; padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--tan-deep) 45%, transparent);
  border-radius: var(--r-round);
  background: color-mix(in srgb, var(--cream-14) 90%, transparent);
  font: inherit; font-size: var(--fs-9-5); font-weight: var(--fw-heavy); letter-spacing: var(--track-06);
  color: var(--ink-muted); cursor: pointer; white-space: nowrap;
}
.ssm-pill:hover:not(:disabled) { background: var(--mix-light); }
.ssm-pill:disabled { opacity: 0.45; cursor: default; }
.ssm-pill.is-busy { cursor: progress; }
.ssm-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: 0 0 auto; background: color-mix(in srgb, var(--ink-on-dark) 66%, var(--mix-dark)); }
.ssm-dot--retake { background: var(--st-retake-2); }
.ssm-dot--cut { background: var(--tan-deep); }
.ssm-chev { font-size: 8px; opacity: 0.6; }
.ssm-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 60;
  min-width: 178px; padding: 6px;
  background: color-mix(in srgb, var(--cream-22) 99%, transparent);
  border: 1px solid color-mix(in srgb, var(--card-border) 70%, transparent);
  border-radius: var(--r-panel);
  box-shadow: 0 10px 28px color-mix(in srgb, color-mix(in srgb, var(--shadow-ink) 77%, var(--mix-dark)) 28%, transparent);
}
.ssm-eyebrow {
  font-size: 8px; font-weight: var(--fw-heavy); letter-spacing: var(--track-16); text-transform: uppercase;
  color: var(--ink-muted); padding: 2px 6px 5px;
}
.ssm-row {
  display: flex; align-items: center; gap: 8px; width: 100%;
  border: none; background: none; cursor: pointer;
  padding: 5px 6px; border-radius: var(--r-7);
  font: inherit; font-size: var(--fs-11-5); color: var(--ink); text-align: left;
}
.ssm-row:hover { background: color-mix(in srgb, var(--tan-deep) 12%, transparent); }
.ssm-row.is-active { background: color-mix(in srgb, var(--leaf) 18%, transparent); font-weight: var(--fw-bold); }
.ssm-row-label { flex: 1 1 auto; }
.ssm-check { font-size: var(--fs-10); color: var(--ink-forest-4); }
.ssm-sep { height: 1px; background: color-mix(in srgb, var(--card-border) 50%, transparent); margin: 5px 4px; }

/* v971 — RETAKE flag pill on a shot row: sits next to the pipeline pill, never
   replaces it, so you still see how far the shot got. */
.shot-pill--retake {
  background: var(--st-retake-fill, color-mix(in srgb, var(--st-retake-2) 14%, transparent));
  border-color: var(--st-retake-line, color-mix(in srgb, var(--st-retake-2) 75%, transparent));
  color: var(--st-retake-2-ink);
  margin-right: 6px;
}
.shot-pill--retake .shot-pill-dot { background: var(--st-retake-2); }
/* v1070 — the RETAKE pill clears the flag when clicked (roles that may change status).
   transform only: the row never moves. */
.shot-pill--retake-clear {
  cursor: pointer;
  transition: background-color var(--dur-1) ease, transform var(--dur-1) ease, box-shadow var(--dur-1) ease;
}
.shot-pill--retake-clear:hover,
.shot-pill--retake-clear:focus-visible {
  background: color-mix(in srgb, var(--st-retake-2) 26%, transparent);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px color-mix(in srgb, var(--shadow-ink) 14%, transparent);
  outline: none;
}

/* v1007 — batch LINK: link the whole selection to one master, or clear the link.
   Sits between the status pills and the generation CTA in .batch-action-bar. The
   master's id is printed on the button itself so the action is readable before the
   click — no dialog, nothing to confirm. */
.batch-link-set { display: flex; align-items: center; gap: 6px; margin-left: 10px; }
.batch-link-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: var(--r-round); cursor: pointer;
  font: inherit; font-size: var(--fs-11); letter-spacing: var(--track-02); white-space: nowrap;
  background: color-mix(in srgb, var(--teal-3) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--teal-3) 45%, transparent);
  color: var(--teal-3-ink);
}
.batch-link-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--teal-3) 20%, transparent); }
.batch-link-btn:disabled { opacity: 0.4; cursor: default; }
.batch-link-btn--off {
  background: color-mix(in srgb, var(--tan-deep) 8%, transparent);
  border-color: color-mix(in srgb, var(--tan-deep) 35%, transparent);
  color: var(--ink, color-mix(in srgb, var(--ink-deep-2) 85%, var(--mix-light)));
}
.batch-link-btn--off:hover:not(:disabled) { background: color-mix(in srgb, var(--tan-deep) 16%, transparent); }