/* ─────────────────────────── shared view-page chrome ─────────────────────────── */

/* Cream panel container — restored. Tabs sit at the top of this cream backdrop,
   cards live inside. The eyebrow/title prefix stays hidden via the .vp-head rule
   below; the active tab uses plain text + underline (no chip overlay). */
.view-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  min-height: 0;
  /* v07zz64 — Hugo: "I also feel like now the cream backdrop for
     the main section of Asset/Media is not the same colour than the
     one for Shots/Sequence. match to the Shot/Sequence one, they
     should litterally be the same thing." Shots panel uses
     `.glass` (color-mix(in srgb, var(--card-bg-solid) 92%, transparent) + blur 18 saturate 1.25).
     The .view-page was using a different cream + heavier blur.
     Now matches .glass exactly. */
  background: color-mix(in srgb, var(--card-bg-solid) 92%, transparent);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.25);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.25);
  border: none;
  border-radius: var(--r-lg);
  padding: 16px 20px 18px;
  position: relative;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--hi) 65%, transparent),
    inset 1px 0 0 color-mix(in srgb, var(--hi-2) 35%, transparent),
    inset 0 -1px 0 color-mix(in srgb, var(--shadow-ink-2) 6%, transparent),
    inset -1px 0 0 color-mix(in srgb, var(--shadow-ink-2) 4%, transparent),
    0 2px 6px color-mix(in srgb, var(--shadow-ink) 8%, transparent),
    0 8px 18px color-mix(in srgb, var(--shade) 14%, transparent),
    0 18px 40px color-mix(in srgb, var(--shade) 20%, transparent);
  /* v06l — Hugo: was `overflow: hidden`, which clipped the bottom of
     the Media library page (and any other long-content view). Switch
     to `overflow-y: auto` so vertical content scrolls within the
     page; the rounded-corner clipping that `hidden` provided is kept
     via a backdrop-clip on the panel's own border-radius. */
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--tan-deep) 40%, transparent) transparent;
}
.view-page::-webkit-scrollbar { width: 8px; }
.view-page::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--tan-deep) 40%, transparent);
  border-radius: var(--r-round);
}
.view-page::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--tan-deep) 60%, transparent); }
.view-page > * { position: relative; z-index: 1; }

.vp-head {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 18px;
  padding: 0 4px 4px;
  flex-shrink: 0;
  position: relative;
  z-index: 30;
}
/* v07zz58 — Sticky tabs ONLY on Assets. Earlier attempts left a
   visible cream bar (or backdrop-filter strip) under the tabs at
   rest. Now: NO visible chrome. Position sticky still pins the row
   while scrolling, but the background is the same cream as
   .view-page so content underneath is occluded without a tinted bar
   showing. Backdrop-filter removed — it was the source of the
   "random flicker over the whole UI" (filter recompute on every
   scroll repaint). */
/* v07zz59 — Cream bar is GONE for real this time. Two changes:
   (1) margin / padding now span the FULL .view-page width (-20 px
       to match the page's 20 px side padding), so no visible side
       stripe.
   (2) background is the EXACT rgba match for .view-page's bg
       (was rgb solid → looked darker / more opaque than the page).
       Combined with backdrop-filter same as the page so content
       under the sticky bar gets the same blur — the bar is now
       visually indistinguishable from the page when at scroll-top.
   Padding stays constant so the tab row's height doesn't bounce
   between tabs (Hugo's "height of the tabs section changes"). */
/* v07zz62 — REAL fix for the cream bar. Hugo: "i asked you for a
   soft opacity mask on the cards section so it feels like it's
   vanishing under the tab header when scrolling up. why is this
   so hard to nail??"

   Architecture:
   1. .view-page is the OUTER container — NOT scrollable. It only
      holds the .vp-head (with tabs) at the top and a .vp-scroll
      child that owns the scroll.
   2. .vp-tabs sits at the very top, fully transparent, no bg, no
      backdrop-filter — never a cream bar.
   3. .vp-scroll IS the scroll container. It has `mask-image:
      linear-gradient(transparent 0px, #000 28px)` so its TOP 28 px
      of visible content fades out. Since mask coordinates are
      anchored to the element box (which doesn't move) AND the
      element is the viewport-into-content via overflow-y, content
      scrolling up through that top 28 px IS visibly faded.
      No cream stripe; cards literally dissolve under the tabs row. */
.view-page.assets-view,
.view-page.media-view {
  /* Outer container doesn't scroll itself anymore — that moved to
     .vp-scroll. Override the generic max-height/overflow rule. */
  overflow: hidden !important;
}
/* v07zz64 — Hugo: "tab header sits a bit too low compared to the
   shot/sequences tab header, they should match." Drop the fixed
   44 px height — the shots-header has no fixed height and reads
   ~30 px tall (tab text + 6 px vertical padding). Letting our
   .vp-tabs size to content puts the tab text at the same Y. */
.assets-view .vp-tabs,
.media-view .vp-tabs {
  position: relative;
  z-index: 30;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  margin: 0;
  padding: 0;
  min-height: 0;
  height: auto;
  align-items: center;
  box-sizing: border-box;
}
.assets-view .vp-scroll,
.media-view .vp-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  /* v07zz64 — Hugo: "the opacity gradient is too wide and eats into
     the cards even when not scrolled up." Narrow fade to 14 px AND
     push the first row of cards down by the same amount so at
     scroll-top, cards start where the mask ends (fully opaque). The
     fade only visually applies to content as it scrolls UP into the
     top 14 px. */
  mask-image: linear-gradient(180deg, transparent 0px, #000 14px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0px, #000 14px);
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* v07zz63 — Hugo: "For some reason also the cards of location sit
   much higher than the cards for all other assets category."
   Force a uniform top offset on EVERY category grid inside
   .vp-scroll so Characters, Animals, Locations, Props, etc. start
   at exactly the same Y from the tabs row. Was different per
   grid (locations-grid uses 16 px gap, characters-grid uses 18 px,
   etc.) — none should add extra top margin. */
.vp-scroll > .characters-grid,
.vp-scroll > .locations-grid,
.vp-scroll > .media-grid,
.vp-scroll > .assets-empty,
.vp-scroll > .assets-vo-wrap {
  margin-top: 0;
}
/* Hide the old fade strip if any cached page still has it. */
.vp-tab-fade { display: none; }
/* Hide the redundant page eyebrow/title — sidebar already labels the active page,
   tabs alone match the Shots panel layout. */
.vp-head > div:first-child { display: none; }
.vp-eyebrow,
.vp-title { display: none; }
/* Pages without tabs (Schedule, Pricing, etc.) leave .vp-head completely empty
   after the title block is hidden. Collapse it so a phantom grey strip doesn't
   sit at the top of the view. */
.vp-head:not(:has(.vp-tabs)) { display: none; }

/* Tabs identical to ShotsPanel .tabs / .tab — plain text + underline indicator. */
.vp-tabs {
  display: flex;
  gap: 18px;
  padding: 0;
  /* v07zr — Hugo: tabs row twitched between tabs that show the +
     button (32 px) and the Archival tab (no button → ~28 px text
     height). Reserve a fixed 36 px min-height on the row so the
     content panel below never shifts when switching tabs. */
  align-items: center;
  min-height: 36px;
}
/* v07zn — + button per asset category, pushed all the way to the
   right. Round outline matching the rest of the icon-button visual
   language (same as the bell / refresh icons in the header). */
.vp-tab-add-btn {
  margin-left: auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--cream) 45%, transparent);
  border: 1px solid var(--card-border);
  color: var(--ink-muted);
  cursor: pointer;
  transition: background var(--dur-2) ease, color var(--dur-2) ease, transform var(--dur-2) ease, border-color var(--dur-2) ease;
}
.vp-tab-add-btn:hover {
  background: color-mix(in srgb, var(--leaf) 18%, transparent);
  color: var(--ink-forest-5);
  border-color: color-mix(in srgb, var(--olive-2) 55%, transparent);
  transform: scale(1.05);
}
.vp-tab-add-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--olive-2) 65%, transparent);
  outline-offset: 2px;
}
/* v07zz281 — right-aligned action group in the sticky .vp-tabs row:
   the bulk Download pill + the create "+" button, kept together so Download
   stays visible while the card grid scrolls. The GROUP owns the auto-margin;
   the "+" drops its own so the two sit adjacent (no big gap between them). */
.vp-tabs-actions {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.vp-tabs-actions .vp-tab-add-btn { margin-left: 0; }
/* Compact bulk-download pill sized to live inside the 36px tab row without
   growing it. Reuses .pill-button + the shared .is-busy/.is-err states. */
.assets-dl-tab.pill-button {
  padding: 5px 11px;
  font-size: var(--fs-11);
  line-height: 1;
}
/* v07zn — Create-asset modal. Compact cream card with stacked
   form fields. */
.create-asset-modal {
  position: relative;
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  padding: 22px 24px 20px;
  border-radius: var(--r-card);
  background: color-mix(in srgb, var(--cream-2) 98%, transparent) !important;
  box-shadow:
    0 6px 18px color-mix(in srgb, var(--shadow-ink) 18%, transparent),
    0 18px 40px color-mix(in srgb, var(--shade) 30%, transparent) !important;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.create-asset-head { display: flex; flex-direction: column; gap: 4px; }
.create-asset-eyebrow {
  font-size: var(--fs-10);
  letter-spacing: var(--track-18);
  font-weight: var(--fw-bold);
  color: var(--ink-muted);
  text-transform: uppercase;
}
.create-asset-title {
  font-family: var(--font-display);
  font-size: var(--fs-22);
  letter-spacing: var(--track-01);
  color: var(--ink);
}
.create-asset-sub {
  font-size: var(--fs-11);
  color: var(--ink-muted);
  line-height: 1.4;
}
.create-asset-sub code {
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  background: color-mix(in srgb, var(--tan-deep) 10%, transparent);
  padding: 1px 5px;
  border-radius: 3px;
}
.create-asset-form { display: flex; flex-direction: column; gap: 12px; }
/* v07zq — Suggest with AI button row. Sits just below the Name
   field. Leaf-green pill with a sparkle glyph; muted err text on
   the right if the call fails. */
.create-asset-suggest-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: -4px;
}
.create-asset-suggest-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  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 12px;
  border-radius: var(--r-round);
  background: color-mix(in srgb, var(--leaf) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--olive-2) 45%, transparent);
  color: var(--ink-forest-5);
  cursor: pointer;
  transition: background var(--dur-1) ease, filter var(--dur-1) ease, opacity var(--dur-1) ease;
}
.create-asset-suggest-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--leaf) 22%, transparent);
  filter: brightness(1.04);
}
.create-asset-suggest-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.create-asset-suggest-err {
  font-size: var(--fs-11);
  color: var(--danger-ink);
  font-style: italic;
}
.create-asset-field { display: flex; flex-direction: column; gap: 4px; }
.create-asset-label {
  font-size: var(--fs-10);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-10);
  text-transform: uppercase;
  color: var(--ink-muted);
}
.create-asset-hint {
  font-weight: 400;
  font-size: var(--fs-9);
  color: var(--ink-soft, color-mix(in srgb, var(--ink-tan-deep) 55%, transparent));
  letter-spacing: var(--track-05);
  text-transform: lowercase;
  margin-left: 4px;
}
.create-asset-field input,
.create-asset-field textarea {
  font: inherit;
  font-family: var(--font-body);
  font-size: var(--fs-13);
  color: var(--ink);
  background: color-mix(in srgb, var(--cream) 65%, transparent);
  border: 1px solid var(--card-border);
  border-radius: var(--r-sm);
  padding: 8px 12px;
  outline: none;
  resize: vertical;
}
.create-asset-field input:focus,
.create-asset-field textarea:focus {
  border-color: color-mix(in srgb, var(--leaf) 70%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--leaf) 15%, transparent);
}
.create-asset-err {
  padding: 8px 12px;
  background: color-mix(in srgb, var(--danger-soft-2) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger-soft-2) 45%, transparent);
  border-radius: var(--r-sm);
  font-size: var(--fs-12);
  color: var(--danger-ink);
}
.create-asset-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 4px;
}
.create-asset-cancel,
.create-asset-submit {
  font: inherit;
  font-family: var(--font-body);
  font-size: var(--fs-12);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-04);
  padding: 8px 16px;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--dur-1) ease, filter var(--dur-1) ease;
}
.create-asset-cancel {
  background: color-mix(in srgb, var(--cream) 55%, transparent);
  border: 1px solid var(--card-border);
  color: var(--ink);
}
.create-asset-cancel:hover:not(:disabled) { background: color-mix(in srgb, var(--cream) 85%, transparent); }
.create-asset-submit {
  background: linear-gradient(180deg, var(--olive-6) 0%, var(--olive-4) 100%);
  border: 1px solid color-mix(in srgb, var(--surface-forest-6) 85%, transparent);
  color: var(--ink-cream);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--cream) 40%, transparent),
    0 2px 6px color-mix(in srgb, var(--surface-forest) 25%, transparent);
}
.create-asset-submit:hover:not(:disabled) { filter: brightness(1.06); }
.create-asset-submit:disabled, .create-asset-cancel:disabled { opacity: 0.55; cursor: not-allowed; }
.vp-tab {
  position: relative;
  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;
  box-shadow: none !important;
  transition: color var(--dur-1) ease, border-color var(--dur-1) ease;
}
.vp-tab:hover:not(.is-active) { border-bottom-color: color-mix(in srgb, var(--sidebar-bg) 20%, transparent); color: var(--ink); }
.vp-tab.is-active {
  color: var(--ink);
  font-weight: var(--fw-med);
  border-bottom-color: var(--sidebar-bg);
}
/* Kill any inherited foil/chip overlays — these tabs are clean text only. */
.vp-tab::before,
.vp-tab::after,
.vp-tab.is-active::before,
.vp-tab.is-active::after { display: none !important; content: none !important; }
.vp-tab-count {
  font-size: var(--fs-11);
  margin-left: 6px;
  color: var(--ink-muted);
  font-feature-settings: var(--tnum);
  /* v07zw — Reserve space for up to 3 digits so async-loaded counts
     (Archival, etc.) don't widen the tab and shift the strip when
     the fetch resolves. tabular numerals + min-width keep tabs
     visually stable across 0 / 1 / 12 / 256 transitions. */
  display: inline-block;
  min-width: 2ch;
  text-align: right;
}
.vp-tab.is-active .vp-tab-count { color: var(--ink); }

/* ─────────────────────────── SEQUENCES — 21:9 thumbs ─────────────────────────── */

.sequences-grid--cinema {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}
.sc-thumb--cinema {
  aspect-ratio: var(--project-aspect, 21 / 9);
  width: 100%;
  border-radius: var(--r-md);
  position: relative;
  overflow: hidden;
}
.sequence-card { padding: 8px; cursor: pointer; }

/* Inside the view-page wrapper, child .glass cards mirror the shot-row look:
   noticeably brighter than the panel background, with the same shadow vocabulary. */
.view-page .glass {
  /* 24 Sep 2026 - the separation ladder (tokens.css): a panel inside the page panel is one step apart from it */
  background: var(--sep-panel-fill);
  --ink-muted: var(--sep-panel-ink-muted);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  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);
}
.view-page .glass::before { display: none; }
/* Interactive cards inside view-page get the same gold-foil hover as shot rows */
.view-page .interactive-card {
  cursor: pointer;
  transition: transform var(--dur-2) ease, box-shadow var(--dur-2) ease, background var(--dur-2) ease;
  position: relative;
}
.view-page .interactive-card::after {
  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 70%);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity var(--dur-2) ease, background var(--dur-2) ease;
}
.view-page .interactive-card:hover {
  background: color-mix(in srgb, color-mix(in srgb, var(--hi) 65%, var(--mix-light)) 98%, transparent) !important;
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--cream) 95%, transparent),
    inset 1px 0 0 color-mix(in srgb, var(--hi) 70%, 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) 30%, transparent) !important;
}
.view-page .interactive-card:hover::after {
  opacity: 1;
  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%);
}

/* ─────────────────────────── SCRIPT ─────────────────────────── */

.script-page {
  padding: 28px 36px;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--card-border) 40%, transparent) transparent;
}
.script-scene {
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px dashed color-mix(in srgb, var(--tan-deep) 25%, transparent);
}
.script-scene:last-child { border-bottom: none; }
.script-scene-head {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-12);
  letter-spacing: var(--track-10);
  font-weight: var(--fw-bold);
  color: var(--ink);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.script-scene-num {
  font-family: var(--font-display);
  font-size: var(--fs-18);
  color: var(--ink-muted);
  letter-spacing: 0;
  width: 28px;
}
.script-scene-heading { flex: 1; }
.script-scene-seq {
  font-size: var(--fs-10);
  padding: 2px 8px;
  background: color-mix(in srgb, var(--leaf) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--leaf) 45%, transparent);
  color: var(--olive-3);
  border-radius: var(--r-pill);
}
.script-speaker {
  font-family: var(--font-display);
  font-size: var(--fs-14);
  letter-spacing: var(--track-06);
  color: var(--ink-muted);
  text-transform: uppercase;
  margin-bottom: 8px;
  padding-left: 40px;
}
.script-line {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--ink);
  padding-left: 40px;
  margin: 0 0 6px;
  max-width: 720px;
}

/* v07zz551 — VO-paragraph view (ingested Prompt Script). One copyable paragraph
   per consecutive same-speaker run of scenes; Copy button lives in the head row
   (fixed size, text swap Copy→Copied ✓ has reserved width so nothing shifts). */
.script-para-copy {
  flex: 0 0 auto;
  min-width: 76px;
  padding: 3px 10px;
  font-size: var(--fs-10);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-08);
  text-transform: uppercase;
  color: var(--ink-muted);
  background: color-mix(in srgb, var(--mix-light) 55%, transparent);
  border: 1px solid var(--card-border, color-mix(in srgb, var(--umber-3) 22%, transparent));
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.script-para-copy:hover { background: color-mix(in srgb, var(--mix-light) 90%, transparent); color: var(--ink); }
.script-para-copy.is-copied {
  background: color-mix(in srgb, var(--ok) 18%, transparent);
  border-color: color-mix(in srgb, var(--ok) 45%, transparent);
  color: var(--olive-3);
}
.script-para-text { max-width: 860px; }

/* v07zz — Screenplay tab. Proper screenplay layout (monospace, uppercase
   sluglines, centred character cues + parentheticals, narrower dialogue
   column, right-aligned transitions) so a dropped screenplay.txt reads
   like a real script, not a wall of text. */
/* v07zz — The Script .view-page is a flex column scroll container. As a
   .glass card, .sp-page inherited overflow:hidden + flex-shrink:1, so it
   got squeezed to the viewport height and CLIPPED the (very tall) script
   with no scroll. flex:0 0 auto lets it grow to its full content height
   and overflow:visible stops the clip, so the page's own scroll engages. */
.sp-page { padding: 32px 36px 60px; flex: 0 0 auto; overflow: visible; }
.sp-doc {
  max-width: 760px;
  margin: 0 auto;
  font-family: var(--font-mono);
  font-size: 14.5px;
  line-height: 1.74;
  color: var(--ink);
}
.sp-title { text-align: center; margin: 0 0 44px; }
.sp-title > div:first-child { font-size: 19px; font-weight: var(--fw-bold); letter-spacing: var(--track-06); text-transform: uppercase; color: var(--ink); }
.sp-title > div { color: var(--ink-muted); margin-top: 3px; }
.sp-scene { font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: var(--track-04); margin: 36px 0 14px; color: var(--ink); }
.sp-scene:first-child { margin-top: 0; }
.sp-action { margin: 0 0 16px; }
.sp-character { font-weight: var(--fw-bold); text-transform: uppercase; margin: 20px 0 0; padding-left: 36%; }
.sp-paren { font-style: italic; color: var(--ink-muted); padding-left: 28%; margin: 2px 0; }
.sp-dialogue { margin: 0 0 14px; padding: 0 14% 0 20%; }
.sp-transition { text-align: right; text-transform: uppercase; font-weight: var(--fw-bold); margin: 16px 0 22px; color: var(--ink-muted); }
.sp-super { text-align: center; text-transform: uppercase; letter-spacing: var(--track-06); font-weight: var(--fw-semi); margin: 22px 0; color: var(--ink); }
.sp-empty { max-width: 620px; margin: 28px auto; }
.sp-empty-title { font-size: var(--fs-16); font-weight: var(--fw-bold); margin-bottom: 10px; color: var(--ink); }
.sp-empty p { color: var(--ink-muted); line-height: 1.6; margin: 8px 0; }
.sp-empty code { background: color-mix(in srgb, var(--tan-deep) 10%, transparent); padding: 1px 6px; border-radius: 5px; font-family: var(--font-mono); font-size: var(--fs-12); }
.sp-empty-path code { display: inline-block; padding: 6px 10px; margin-top: 2px; }

/* v07zz49 — Per-character filter for the Script view. Sticky pill row
   above the script body lets Hugo isolate one character's lines (and
   pre-filter at the scene level so empty scenes for that character
   stay collapsed/dimmed). */
/* v07zz51 — Script filter bar. Hugo: the previous version had a dark
   green long rectangle background that clipped and looked broken.
   Replaced with a transparent inline pill strip that sits naturally
   under the episode header. No sticky positioning — the page itself
   scrolls inside .view-page so a sticky inner row would conflict
   with .vp-head's stickiness. */
.script-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 0 14px;
  background: transparent;
  margin-bottom: 8px;
}
.script-filter-pill {
  font: inherit;
  font-size: var(--fs-11);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-06);
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: var(--r-round);
  border: 1px solid color-mix(in srgb, var(--taupe-5) 40%, transparent);
  background: color-mix(in srgb, var(--cream) 45%, transparent);
  color: var(--ink, var(--ink-sidebar-bg));
  cursor: pointer;
  transition: background var(--dur-1) ease, border-color var(--dur-1) ease, color var(--dur-1) ease, transform var(--dur-1) ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.script-filter-pill:hover {
  background: color-mix(in srgb, var(--leaf) 18%, transparent);
  border-color: color-mix(in srgb, var(--leaf) 55%, transparent);
  transform: translateY(-1px);
}
.script-filter-pill.is-active {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--hi-2) 95%, transparent) 0%,
    color-mix(in srgb, var(--nav-active) 92%, transparent) 50%,
    color-mix(in srgb, color-mix(in srgb, var(--gold-17) 87%, var(--mix-dark)) 85%, transparent) 100%);
  border-color: color-mix(in srgb, color-mix(in srgb, var(--gold-14) 88%, var(--mix-dark)) 88%, transparent);
  color: var(--ink-2);
  text-shadow: 0 1px 0 color-mix(in srgb, var(--hi) 55%, transparent);
}
.script-filter-count {
  font-size: var(--fs-10);
  font-weight: var(--fw-bold);
  padding: 1px 7px;
  border-radius: var(--r-panel);
  background: color-mix(in srgb, var(--black) 10%, transparent);
  color: inherit;
  opacity: 0.85;
}
.script-filter-pill.is-active .script-filter-count {
  background: color-mix(in srgb, color-mix(in srgb, var(--tan-deep) 62%, var(--mix-dark)) 22%, transparent);
}
.script-beat { margin-bottom: 14px; }
.script-beat.is-dimmed { opacity: 0.32; }
.script-beat.is-dimmed:hover { opacity: 0.6; transition: opacity 200ms ease; }

/* shotlist tab */
.shotlist-page {
  padding: 16px 12px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.shotlist-grid { display: flex; flex-direction: column; }
.shotlist-row {
  display: grid;
  grid-template-columns: 80px 50px 1fr 140px 180px 120px;
  gap: 14px;
  padding: 9px 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--card-border) 22%, transparent);
  font-size: var(--fs-12-5);
  align-items: center;
}
.shotlist-row--head {
  font-size: var(--fs-10);
  letter-spacing: var(--track-14);
  font-weight: var(--fw-bold);
  color: var(--ink-muted);
  text-transform: uppercase;
  border-bottom: 1.5px solid color-mix(in srgb, var(--card-border) 45%, transparent);
  position: sticky;
  top: 0;
  background: color-mix(in srgb, var(--card-bg-solid) 96%, transparent);
  z-index: 2;
}
.shotlist-row:hover:not(.shotlist-row--head) { background: color-mix(in srgb, var(--hi) 40%, transparent); }
.shotlist-id { font-family: var(--font-display); color: var(--ink); }
.shotlist-muted { color: var(--ink-muted); }
.shotlist-stage {
  font-size: var(--fs-10);
  letter-spacing: var(--track-06);
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ─────────────────────────── SCHEDULE ─────────────────────────── */

.schedule-view { gap: 14px; }
.sched-budget { text-align: right; }
.sched-budget-num {
  font-family: var(--font-display);
  font-size: var(--fs-32);
  color: var(--ink-on-dark);
  letter-spacing: var(--track-01);
  line-height: 1;
}
.sched-budget-cap {
  font-size: var(--fs-10);
  letter-spacing: var(--track-14);
  color: var(--ink-on-dark-muted);
  margin-top: 6px;
}

.sched-phases { padding: 16px 18px; }
.sched-phases-head, .sched-milestones-head, .sched-events-head {
  font-size: var(--fs-10);
  letter-spacing: var(--track-18);
  font-weight: var(--fw-bold);
  color: var(--ink-muted);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.sched-phases-list { display: flex; flex-direction: column; gap: 12px; }
.sched-phase {
  display: grid;
  grid-template-columns: 6px 1fr;
  gap: 14px;
}
.sched-phase-color { width: 6px; border-radius: 3px; }
.sched-phase-name {
  font-family: var(--font-display);
  font-size: var(--fs-16);
  letter-spacing: var(--track-005);
  color: var(--ink);
}
.sched-phase-meta {
  font-size: var(--fs-11-5);
  color: var(--ink-muted);
  font-feature-settings: var(--tnum);
  margin: 4px 0 8px;
}
.sched-phase-deliverables {
  margin: 0;
  padding-left: 18px;
  font-size: var(--fs-12-5);
  color: var(--ink);
  line-height: 1.6;
}

.sched-cal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.sched-month-card { padding: 14px 16px; }
.sched-month-title {
  font-family: var(--font-display);
  font-size: var(--fs-18);
  color: var(--ink);
  letter-spacing: var(--track-005);
  margin-bottom: 8px;
}
.sched-month-dow, .sched-month-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.sched-month-dow {
  font-size: var(--fs-9);
  letter-spacing: var(--track-10);
  color: var(--ink-soft);
  text-align: center;
  padding-bottom: 4px;
  border-bottom: 1px solid color-mix(in srgb, var(--card-border) 30%, transparent);
  margin-bottom: 4px;
}
.sched-day-cell {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 3px 4px;
  font-size: var(--fs-10-5);
  border-radius: 4px;
  position: relative;
  font-feature-settings: var(--tnum);
}
.sched-day-cell--empty { background: none; }
.sched-day-num { color: var(--ink-muted); align-self: flex-end; }
.sched-day-bands {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
}
.sched-day-band {
  height: 3px;
  border-radius: 2px;
  width: 100%;
}
.sched-day-cell.is-today {
  background: color-mix(in srgb, var(--leaf) 22%, transparent);
  outline: 1.5px solid color-mix(in srgb, var(--leaf) 65%, transparent);
}
.sched-day-cell.is-today .sched-day-num { color: var(--ink); font-weight: var(--fw-bold); }
.sched-day-dot {
  position: absolute;
  top: 3px;
  left: 4px;
  width: 6px; height: 6px;
  border-radius: 50%;
}
.sched-day-dot--milestone { background: color-mix(in srgb, var(--amber) 83%, var(--mix-dark)); box-shadow: 0 0 0 1.5px color-mix(in srgb, color-mix(in srgb, var(--amber) 83%, var(--mix-dark)) 30%, transparent); }
.sched-day-dot--review    { background: var(--teal); }
.sched-day-dot--phase     { background: var(--leaf); }
.sched-day-dot--checkpoint { background: var(--amber); }
.sched-day-dot--delivery  { background: var(--warn-red); }
.sched-day-dot--kickoff   { background: var(--olive-3); }

.sched-milestones { padding: 16px 18px; }
.sched-milestone {
  display: grid;
  grid-template-columns: 28px 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--card-border) 25%, transparent);
  font-size: var(--fs-13);
}
.sched-milestone:last-child { border-bottom: none; }
.sched-milestone-status {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: var(--fs-13);
  background: color-mix(in srgb, var(--ink-muted) 15%, transparent);
  color: var(--ink-muted);
}
.sched-milestone--paid .sched-milestone-status {
  background: color-mix(in srgb, var(--ok) 30%, transparent);
  color: var(--olive-3);
  font-weight: var(--fw-bold);
}
.sched-milestone--upcoming .sched-milestone-status {
  background: color-mix(in srgb, var(--warn) 30%, transparent);
  color: var(--ink-tan-deep);
}
/* 17 Sep 2026 - the icon's colour per status, moved out of the inline style (Views.jsx) so a skin can reach
   it; exactly the colours the inline style had. After the two rules above, which they replace for colour. */
.sched-milestone-status.sched-milestone-status--not_ready { color: var(--grey-3-ink); }
.sched-milestone-status.sched-milestone-status--upcoming { color: var(--ink-gold-2); }
.sched-milestone-status.sched-milestone-status--paid { color: var(--ink-olive-12); }
.sched-milestone-status.sched-milestone-status--late { color: var(--danger); }
.sched-milestone-name { color: var(--ink); font-weight: var(--fw-med); }
.sched-milestone-date { color: var(--ink-muted); font-feature-settings: var(--tnum); }
.sched-milestone-amt { color: var(--ink); font-weight: var(--fw-semi); font-feature-settings: var(--tnum); }
.sched-milestone-pct { color: var(--ink-muted); font-weight: 400; font-size: var(--fs-11); }

.sched-events { padding: 16px 18px; }
.sched-event {
  display: grid;
  grid-template-columns: 12px 80px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  font-size: var(--fs-12-5);
  border-bottom: 1px solid color-mix(in srgb, var(--card-border) 20%, transparent);
}
.sched-event:last-child { border-bottom: none; }
.sched-event-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
}
.sched-event-dot--milestone { background: color-mix(in srgb, var(--amber) 83%, var(--mix-dark)); }
.sched-event-dot--review    { background: var(--teal); }
.sched-event-dot--phase     { background: var(--leaf); }
.sched-event-dot--checkpoint { background: var(--amber); }
.sched-event-dot--delivery  { background: var(--warn-red); }
.sched-event-dot--kickoff   { background: var(--olive-3); }
.sched-event-date {
  font-size: var(--fs-11);
  letter-spacing: var(--track-06);
  color: var(--ink-muted);
  text-transform: uppercase;
  font-weight: var(--fw-semi);
}
.sched-event-label { color: var(--ink); }
.sched-event-lead { color: var(--ink-muted); font-size: var(--fs-11); }

/* ─────────────────────────── ASSETS — Characters ─────────────────────────── */

.characters-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}
.character-card {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.character-thumb {
  aspect-ratio: 3 / 4;
  width: 100%;
  border-radius: var(--r-panel);
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  background-size: cover;
  background-position: center top;
  /* v07zz212 — solid cream placeholder so a loading image reveals onto the
     card, never the dark backdrop. The inline style sets `transparent` when an
     image exists; this base shows through behind it. */
  background-color: color-mix(in srgb, var(--paper) 97%, var(--mix-dark));
}
/* v07zz212 — super-fast fade (90ms) over the cream placeholder. Cached/warm
   images (is-cached, set synchronously when complete at mount) skip the fade. */
.character-thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  opacity: 0;
  transition: opacity 90ms linear;
  display: block;
}
.character-thumb-img.is-loaded { opacity: 1; }
.character-thumb-img.is-cached { opacity: 1; transition: none !important; }
.character-thumb-initials {
  font-family: var(--font-display);
  font-size: 56px;
  letter-spacing: var(--track-005);
  color: color-mix(in srgb, var(--ink-hi) 85%, transparent);
}
.character-locked-pill {
  position: absolute;
  top: 8px; right: 8px;
  font-size: var(--fs-10);
  letter-spacing: var(--track-06);
  padding: 3px 8px;
  border-radius: var(--r-round);
  background: color-mix(in srgb, var(--nav-active) 95%, transparent);
  color: color-mix(in srgb, var(--ink-tan-deep) 72%, var(--mix-dark));
  font-weight: var(--fw-bold);
  text-transform: uppercase;
}
/* v07zd — Gold-star "locked" indicator on asset thumbnails. Same
   look as the FRAME HERO star on shot tiles so the visual language
   is consistent across the app. Glass-on-dark disc + amber star. */
.asset-lock-star {
  position: absolute;
  top: 8px; right: 8px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--shade-5) 55%, transparent);
  backdrop-filter: blur(var(--blur-scrim-6));
  -webkit-backdrop-filter: blur(var(--blur-scrim-6));
  border: 1px solid color-mix(in srgb, var(--nav-active) 70%, transparent);
  color: var(--nav-active);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

/* v07zz240 — Asset workflow status pill (cards) + segmented control (modals).
   Mirrors the shot status pill: cream fill, coloured border + dot, uppercase. */
.asset-status-pill {
  display: inline-flex; align-items: center; gap: 5px;
  height: 20px; padding: 0 9px 0 8px; border-radius: var(--r-round);
  border: 1.5px solid; background: var(--pill-bg);
  font-size: var(--fs-9-5); font-weight: var(--fw-bold); letter-spacing: var(--track-05); text-transform: uppercase;
  line-height: 1; white-space: nowrap;
}
.asset-status-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
/* On cards: absolute top-left (clear of the top-right lock star); click passes
   through to open the card's modal. */
.asset-status-pill--card {
  position: absolute; top: 8px; left: 8px; z-index: 2;
  pointer-events: none;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.20);
}
/* v07zz280 — pill beside the card TITLE (not on the image): title left, pill right.
   align-items:flex-start so the pill sits at the first line of a wrapping name. */
.asset-card-titlerow { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.asset-card-titlerow > :first-child { min-width: 0; }   /* name wraps; the pill never shrinks */
.asset-status-pill--title { position: static; flex: 0 0 auto; box-shadow: none; margin-top: 1px; }
/* Modal segmented control — labelled row of 4 clickable mini-pills. */
.asset-status-seg { margin: 4px 0 2px; }
.asset-status-seg-cap {
  font-size: var(--fs-10); font-weight: var(--fw-bold); letter-spacing: var(--track-08); text-transform: uppercase;
  color: var(--ink-muted, color-mix(in srgb, var(--ink-umber-3) 55%, transparent)); margin-bottom: 6px;
}
.asset-status-seg-row { display: flex; flex-wrap: wrap; gap: 6px; }
.asset-status-seg-btn {
  display: inline-flex; align-items: center; gap: 5px;
  height: 26px; padding: 0 11px 0 9px; border-radius: var(--r-round);
  border: 1.5px solid color-mix(in srgb, var(--ink-muted) 30%, transparent); background: color-mix(in srgb, var(--mix-light) 45%, transparent);
  color: var(--ink-muted, color-mix(in srgb, var(--ink-umber-3) 65%, transparent));
  font: inherit; font-size: var(--fs-11); font-weight: var(--fw-semi); cursor: pointer; white-space: nowrap;
  transition: border-color var(--dur-1) ease, background var(--dur-1) ease, color var(--dur-1) ease;
}
.asset-status-seg-btn:hover:not(:disabled) { border-color: color-mix(in srgb, var(--ink-muted) 55%, transparent); }
.asset-status-seg-btn.is-on { background: var(--pill-bg); font-weight: var(--fw-bold); }
.asset-status-seg-btn:disabled { opacity: 0.6; cursor: default; }
/* v07zj/v07zk/v07zl — Toggleable LOCKED stat. Inherits .char-stat's
   exact layout. Glyph: hollow ☆ when unlocked, full ★ when locked.
   Star is rendered at 1.15× the digit font-size so it visually
   weights the same as "38" and "4" in adjacent columns. */
.asset-lock-stat { cursor: pointer; }
.asset-lock-stat.is-readonly { cursor: help; }
.asset-lock-glyph {
  color: var(--ink-muted, color-mix(in srgb, var(--ink-umber-3) 45%, transparent));
  transition: color var(--dur-2) ease, transform var(--dur-2) ease;
  display: inline-block;
  font-size: 1.15em;
  line-height: 1;
  vertical-align: middle;
}
.asset-lock-glyph.is-on {
  color: color-mix(in srgb, var(--gold-6) 85%, var(--mix-light));
}
.asset-lock-stat:hover .asset-lock-glyph {
  color: color-mix(in srgb, var(--gold-6) 85%, var(--mix-light));
  transform: scale(1.10);
}
.asset-lock-stat:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--gold-6) 85%, var(--mix-light));
  outline-offset: 4px;
  border-radius: var(--r-xs);
}
.character-body { padding: 4px 8px 8px; }
.character-name {
  font-family: var(--font-display);
  font-size: var(--fs-18);
  letter-spacing: var(--track-005);
  color: var(--ink);
  line-height: 1.15;
}
.character-role {
  font-size: var(--fs-11);
  color: var(--ink-muted);
  letter-spacing: var(--track-04);
  margin-top: 4px;
}
.character-stats {
  display: flex;
  gap: 14px;
  font-size: var(--fs-11);
  color: var(--ink-muted);
  margin-top: 8px;
}
.character-stats strong { color: var(--ink); font-weight: var(--fw-semi); }
.character-notes {
  font-size: var(--fs-11-5);
  color: var(--ink-muted);
  margin-top: 8px;
  line-height: 1.4;
  font-style: italic;
}

/* Locations — 21:9 */
.locations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
}
/* v07zz459 — Locations tab only: much bigger cards, exactly 4 per row (Hugo). Scoped
   to the --big modifier so the other tabs that share .locations-grid (animals, refs,
   archival, historical) keep the auto-fill sizing. Two-class selector (0,2,0) stays
   below mobile's body[data-ui-tier="s"] .locations-grid (0,2,1), so phones keep 2-up. */
.locations-grid.locations-grid--big {
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.location-card { padding: 8px; }
.location-thumb {
  aspect-ratio: var(--project-aspect, 21 / 9);
  width: 100%;
  border-radius: var(--r-panel);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 10px;
}
.location-thumb-tag {
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  background: color-mix(in srgb, var(--shade-5) 55%, transparent);
  color: color-mix(in srgb, var(--ink-hi) 95%, transparent);
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: var(--track-04);
}
/* v07zz444 — Location merge mode: multi-select cards + KEEP/MERGE badges + fixed action bar. */
.vp-tab-merge-btn.is-active { background: linear-gradient(135deg, color-mix(in srgb, color-mix(in srgb, var(--gold-13) 46%, var(--mix-light)) 95%, transparent), color-mix(in srgb, color-mix(in srgb, var(--gold-17) 75%, var(--mix-light)) 90%, transparent)); color: color-mix(in srgb, var(--ink-tan-deep) 67%, var(--mix-dark)); border-color: color-mix(in srgb, var(--gold-4) 70%, transparent); }
.locations-grid.is-merge-mode .location-card { cursor: pointer; }
.location-card.is-merge-pick { outline: 2px solid color-mix(in srgb, var(--blue-6) 85%, transparent); outline-offset: 2px; }
.location-card.is-merge-primary { outline: 3px solid color-mix(in srgb, var(--gold-3) 95%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold-3) 18%, transparent); }
/* 24 Sep 2026 (G6) — the same picker on another project's location cards (the generic .prop-card grid). */
.props-grid.is-merge-mode .prop-card { cursor: pointer; }
.prop-card.is-merge-pick { outline: 2px solid color-mix(in srgb, var(--blue-6) 85%, transparent); outline-offset: 2px; }
.prop-card.is-merge-primary { outline: 3px solid color-mix(in srgb, var(--gold-3) 95%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold-3) 18%, transparent); }
/* v819 — "you were here". Returning to an asset tab scrolls the card you were
   last in back into view and rings it for a beat, so switching Locations→Props
   and back doesn't dump you at the top of the grid. Same gold as the merge
   primary above. OUTLINE ONLY: it sits outside the box model, so nothing in the
   grid shifts (invariant #20), and it doesn't clobber the card's own shadow. */
.asset-card-resumed {
  outline: 3px solid color-mix(in srgb, var(--gold-3) 95%, transparent);
  outline-offset: 2px;
  animation: assetCardResumed 1.8s ease-out forwards;
}
@keyframes assetCardResumed {
  0%, 65% { outline-color: color-mix(in srgb, var(--gold-3) 95%, transparent); }
  100%    { outline-color: color-mix(in srgb, var(--gold-3) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .asset-card-resumed { animation: none; }
}
.location-merge-badge {
  position: absolute; top: 6px; right: 6px;
  font-family: var(--font-mono); font-size: var(--fs-10); font-weight: var(--fw-bold); letter-spacing: var(--track-05);
  padding: 3px 8px; border-radius: 5px;
  background: color-mix(in srgb, var(--blue-7) 92%, transparent); color: var(--white);
}
.location-merge-badge.is-primary { background: color-mix(in srgb, color-mix(in srgb, var(--gold-17) 75%, var(--mix-light)) 96%, transparent); color: var(--ink-deep); }
.location-merge-keep {
  position: absolute; bottom: 6px; right: 6px;
  font: inherit; font-size: var(--fs-10); font-weight: var(--fw-bold);
  padding: 4px 9px; border-radius: var(--r-round); cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--gold-4) 70%, transparent);
  background: color-mix(in srgb, var(--cream) 92%, transparent); color: color-mix(in srgb, var(--ink-tan-deep) 67%, var(--mix-dark));
}
.location-merge-keep:hover { background: var(--mix-light); }
.assets-merge-bar {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  z-index: var(--z-merge-bar); display: flex; align-items: center; gap: 18px;
  max-width: min(760px, 92vw);
  padding: 12px 16px; border-radius: var(--r-card);
  background: color-mix(in srgb, var(--shade-12) 94%, transparent); backdrop-filter: blur(10px);
  border: 1px solid color-mix(in srgb, var(--card-border) 40%, transparent);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
  color: color-mix(in srgb, var(--ink-hi) 95%, transparent); font-size: var(--fs-13);
}
.assets-merge-bar-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.assets-merge-bar-info strong { color: color-mix(in srgb, var(--gold-13) 38%, var(--mix-light)); }
.assets-merge-err { color: color-mix(in srgb, var(--gold-16) 70%, var(--mix-light)); font-size: var(--fs-12); }
.assets-merge-bar-actions { display: flex; gap: 10px; flex-shrink: 0; }
.location-body { padding: 8px; }
.location-name {
  font-family: var(--font-display);
  font-size: var(--fs-17);
  letter-spacing: var(--track-005);
  color: var(--ink);
}
.location-meta {
  font-size: var(--fs-11);
  color: var(--ink-muted);
  margin-top: 4px;
}

/* Props */
.props-grid {
  /* v07zz381 — match the Animals/Locations grid (340px min) so prop cards are the
     same size, not noticeably smaller. */
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
}
.prop-card { padding: 14px; display: flex; gap: 12px; align-items: flex-start; }
/* v07zz460 — drag-reorder affordance for ALL asset cards (characters / animals /
   locations / props). Only cards that are actually draggable get the grab cursor —
   [draggable="true"] excludes the refs / archival / historical cards that share
   .location-card but aren't reorderable, and the Locations cards while in merge mode.
   The dragged card dims; the drop target gets a gold outline. */
.character-card[draggable="true"],
.location-card[draggable="true"],
.prop-card[draggable="true"] { cursor: grab; }
.character-card[draggable="true"]:active,
.location-card[draggable="true"]:active,
.prop-card[draggable="true"]:active { cursor: grabbing; }
.asset-card--dragging { opacity: 0.4; }
.asset-card--drop { outline: 2px solid var(--gold, var(--gold-12)); outline-offset: 2px; }
.prop-thumb {
  width: 54px; height: 54px;
  border-radius: var(--r-panel);
  background: linear-gradient(160deg, color-mix(in srgb, var(--nav-active) 28%, transparent), color-mix(in srgb, var(--gold-deep) 18%, transparent));
  display: grid; place-items: center;
  flex-shrink: 0;
}
.prop-icon { font-size: var(--fs-22); color: var(--ink-tan-deep); }
.prop-body { flex: 1; min-width: 0; }
.prop-name {
  font-family: var(--font-display);
  /* v07zz456 — matched to .location-name (17px) so Prop titles read the same
     size as the Animals/Locations cards in this grid. */
  font-size: var(--fs-17);
  letter-spacing: var(--track-005);
  color: var(--ink);
}

/* ─────────────────────────── CREW ─────────────────────────── */

.crew-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
}
.crew-card {
  padding: 8px;
  cursor: pointer;
  transition: transform var(--dur-2) ease;
}
.crew-card:hover { transform: translateY(-2px); }
.crew-portrait {
  aspect-ratio: 3 / 4;
  border-radius: var(--r-panel);
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.crew-initials {
  font-family: var(--font-display);
  font-size: 64px;
  color: color-mix(in srgb, var(--ink-hi) 92%, transparent);
  letter-spacing: var(--track-005);
}
.crew-status-dot {
  position: absolute;
  top: 10px; right: 10px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--st-archive);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--hi) 50%, transparent);
}
/* v07zz25 — Online state colour variants.
   .is-online → live SSE connection right now (green, pulsing glow)
   .is-recent → last_seen within 5 min (amber, soft glow)
   .is-offline → older / never seen (grey, no glow) */
.crew-status-dot.is-online {
  background: var(--ok);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--hi) 50%, transparent), 0 0 8px color-mix(in srgb, var(--ok) 85%, transparent);
  animation: crew-dot-pulse 2.2s ease-in-out infinite;
}
.crew-status-dot.is-recent {
  background: var(--gold-10);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--hi) 50%, transparent), 0 0 6px color-mix(in srgb, var(--gold-10) 55%, transparent);
}
.crew-status-dot.is-offline {
  background: var(--st-archive);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--hi) 50%, transparent);
}
@keyframes crew-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--hi) 50%, transparent), 0 0 6px color-mix(in srgb, var(--ok) 55%, transparent); }
  50%      { box-shadow: 0 0 0 2px color-mix(in srgb, var(--hi) 50%, transparent), 0 0 14px color-mix(in srgb, var(--ok) 95%, transparent); }
}
.crew-body { padding: 8px; }
.crew-name {
  font-family: var(--font-display);
  font-size: var(--fs-17);
  color: var(--ink);
  letter-spacing: var(--track-005);
}
.crew-role {
  font-size: var(--fs-12);
  color: var(--ink);
  font-weight: var(--fw-med);
  margin-top: 4px;
}
.crew-company {
  font-size: var(--fs-11);
  color: var(--ink-muted);
  margin-top: 2px;
}
.crew-meta {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid color-mix(in srgb, var(--card-border) 30%, transparent);
}
.crew-meta-row {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs-11);
}
.crew-meta-label { color: var(--ink-muted); letter-spacing: var(--track-04); }

/* v06p — Crew modal now matches the standard character-modal
   chrome: subtle dark backdrop with 2px blur (not the heavy
   green tint), and the cream card uses the same warm tone as
   other modals. */
.crew-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(var(--blur-scrim-2));
  -webkit-backdrop-filter: blur(var(--blur-scrim-2));
  display: grid;
  place-items: center;
  z-index: var(--z-dropdown);
  padding: 32px;
  animation: fadeIn var(--dur-3) ease;
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.crew-modal {
  position: relative;
  max-width: 520px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: color-mix(in srgb, var(--cream-2) 96%, transparent) !important;
  border-radius: var(--r-md);
  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 6px 18px color-mix(in srgb, var(--shadow-ink) 20%, transparent),
    0 18px 40px color-mix(in srgb, var(--shade) 30%, transparent) !important;
}
.crew-modal-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tan-deep) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--tan-deep) 20%, transparent);
  color: var(--ink-muted);
  cursor: pointer;
  font-size: var(--fs-13);
  display: grid; place-items: center;
}
.crew-modal-close:hover { background: color-mix(in srgb, var(--tan-deep) 22%, transparent); color: var(--ink); }
.crew-modal-head {
  display: flex;
  gap: 16px;
  align-items: center;
}
.crew-portrait--lg { width: 96px; aspect-ratio: 1; flex-shrink: 0; border-radius: var(--r-md); }
.crew-portrait--lg .crew-initials { font-size: var(--fs-38); }
.crew-modal-name {
  font-family: var(--font-display);
  font-size: var(--fs-28);
  letter-spacing: var(--track-005);
  color: var(--ink);
}
.crew-modal-role {
  font-size: var(--fs-13);
  color: var(--ink-muted);
  margin-top: 2px;
}
.crew-modal-email {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--ink-muted);
  margin-top: 4px;
}
.crew-modal-bio {
  font-size: var(--fs-13-5);
  line-height: 1.55;
  color: var(--ink);
}
.crew-modal-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 14px 0;
  border-top: 1px solid color-mix(in srgb, var(--card-border) 30%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--card-border) 30%, transparent);
}
.cms-stat-num {
  font-family: var(--font-display);
  font-size: var(--fs-20);
  color: var(--ink);
}
.cms-stat-cap {
  font-size: var(--fs-9-5);
  letter-spacing: var(--track-14);
  color: var(--ink-muted);
  font-weight: var(--fw-semi);
  margin-top: 4px;
}
.crew-modal-activity { padding-top: 4px; }
.cma-eyebrow {
  font-size: var(--fs-10);
  letter-spacing: var(--track-16);
  color: var(--ink-muted);
  font-weight: var(--fw-bold);
  margin-bottom: 6px;
}
.cma-action {
  font-size: var(--fs-13);
  color: var(--ink);
}

/* ─────────────────────────── MEDIA ─────────────────────────── */

.media-grid {
  display: grid;
  /* v07zt — Hugo: Media-tab cards were narrower than the
     Assets-tab equivalents (.locations-grid uses 340 px min).
     Bump to 320 px min so Archival / Grids / Frames / Videos
     cards read at a comparable size to the asset cards. */
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}
.media-card-v { padding: 8px; }
/* v07zz320 — Storyboard cards (Media Storyboard tab). Flat: image + filename + Send-to-shot. */
.media-card-thumb { position: relative; width: 100%; border-radius: var(--r-7); overflow: hidden; background: var(--ink); }
.media-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.media-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 3px 1px; }
.media-card-name { font-size: var(--fs-11); color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.media-card-send { flex: 0 0 auto; font: inherit; font-size: var(--fs-10-5); font-weight: var(--fw-bold); letter-spacing: var(--track-02); padding: 4px 9px; border-radius: var(--r-7); border: 1px solid var(--card-border, color-mix(in srgb, var(--umber-2) 30%, transparent)); background: color-mix(in srgb, var(--mix-light) 60%, transparent); color: var(--ink); cursor: pointer; white-space: nowrap; }
.media-card-send:hover { background: var(--blue-2); color: var(--white); border-color: var(--blue-2); }
/* v07zz320 — sequence rename affordance (Sequences tab card). */
.sc-thumb { position: relative; }
.sc-rename-btn { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--r-xs); background: rgba(0,0,0,0.4); color: var(--white); cursor: pointer; opacity: 0; transition: opacity 0.12s; z-index: 3; }
.sequence-card:hover .sc-rename-btn, .sequence-card:focus-within .sc-rename-btn { opacity: 1; }
.sc-rename-btn:hover { background: rgba(0,0,0,0.65); }
.sc-slug-edit { width: 100%; box-sizing: border-box; font: inherit; font-size: var(--fs-13); font-weight: var(--fw-semi); color: var(--ink); background: var(--mix-light); border: 1px solid color-mix(in srgb, var(--blue) 60%, transparent); border-radius: var(--r-7); padding: 5px 8px; }
.sc-slug-edit:focus { outline: none; border-color: color-mix(in srgb, var(--blue) 90%, transparent); }
.media-thumb-v {
  aspect-ratio: var(--project-aspect, 21 / 9);
  border-radius: var(--r-sm);
  position: relative;
  overflow: hidden;
}
/* v07zz360 — per-image Favourite star (Media tiles). Pure bookmark, NOT the hero star:
   visible on card hover, stays lit (gold) when favourited. */
.media-fav-star {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 4;
  width: 28px;
  height: 28px;
  border-radius: var(--r-round);
  display: grid;
  place-items: center;
  padding: 0;
  background: color-mix(in srgb, var(--shade-33) 50%, transparent);
  border: 1px solid color-mix(in srgb, var(--white) 20%, transparent);
  color: var(--white);
  cursor: pointer;
  opacity: 0;
  -webkit-backdrop-filter: blur(var(--blur-scrim));
  backdrop-filter: blur(var(--blur-scrim));
  transition: opacity var(--dur-2) ease, background var(--dur-2) ease, color var(--dur-2) ease, transform var(--dur-1) ease;
}
.media-card-v:hover .media-fav-star,
.media-fav-star:focus-visible { opacity: 1; }
.media-fav-star:hover { background: color-mix(in srgb, var(--shade-33) 70%, transparent); transform: scale(1.08); }
.media-fav-star.is-on {
  opacity: 1;
  color: var(--gold-13);
  border-color: color-mix(in srgb, var(--gold-13) 65%, transparent);
  background: color-mix(in srgb, var(--shade-33) 55%, transparent);
}
/* v07zz366 — "Expand all" pill toggle in the Media header (Frames / Archived Frames / Trailer). */
.media-expand-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 4px 11px;
  font-size: var(--fs-11-5);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-02);
  color: color-mix(in srgb, var(--ink-muted) 93%, var(--mix-dark));
  background: color-mix(in srgb, var(--cream-2) 60%, transparent);
  border: 1px solid color-mix(in srgb, var(--card-border) 60%, transparent);
  border-radius: var(--r-round);
  cursor: pointer;
  transition: background 130ms ease, border-color 130ms ease, color 130ms ease;
}
.media-expand-pill:hover { background: color-mix(in srgb, var(--cream-2) 95%, transparent); border-color: color-mix(in srgb, var(--gold-15) 70%, transparent); }
.media-expand-pill.is-on {
  color: color-mix(in srgb, var(--ink-tan-deep) 71%, var(--mix-dark));
  background: color-mix(in srgb, var(--gold-13) 18%, transparent);
  border-color: color-mix(in srgb, var(--gold-5) 85%, transparent);
}
.media-expand-pill svg { opacity: 0.85; }
/* v07za — Media tile <img> elements fade in via the same
   .vt-img-loaded class pattern used on shot-modal version tiles.
   onLoad / onError handlers on the img add the class so the fade
   plays cleanly regardless of network speed. Removes the
   "top-to-bottom buffering" look Hugo flagged. */
.media-thumb-v img {
  opacity: 0;
  transition: opacity var(--dur-5) ease-out;
}
.media-thumb-v img.media-thumb-loaded {
  opacity: 1;
}
/* v07zl — Hugo: once an image is in browser cache, mounting it
   should NOT replay the gradient→image fade. The .is-cached class
   is added synchronously by the ref callback when img.complete is
   already true at mount time — it overrides the transition to be
   instant. */
.media-thumb-v img.is-cached {
  opacity: 1 !important;
  transition: none !important;
}
.media-type-pill {
  position: absolute;
  top: 8px; left: 8px;
  font-size: var(--fs-9-5);
  letter-spacing: var(--track-10);
  padding: 3px 7px;
  background: color-mix(in srgb, var(--shade-5) 65%, transparent);
  color: color-mix(in srgb, var(--ink-hi) 95%, transparent);
  border-radius: 4px;
  text-transform: uppercase;
  font-weight: var(--fw-bold);
}
.media-shot-pill {
  position: absolute;
  bottom: 8px; right: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  padding: 2px 6px;
  background: color-mix(in srgb, var(--shade-5) 55%, transparent);
  color: color-mix(in srgb, var(--ink-hi) 95%, transparent);
  border-radius: 3px;
}
/* v07zz59 — Promote pill in the AssetReviewModal header (next to
   HERO THIS FRAME). Reuses .arm-hero-pill base styles with a gold
   override so it reads as a "do something special" CTA. */
.arm-promote-pill {
  background: linear-gradient(135deg, color-mix(in srgb, var(--hi-2) 95%, transparent), color-mix(in srgb, var(--nav-active) 92%, transparent) 50%, color-mix(in srgb, color-mix(in srgb, var(--gold-17) 87%, var(--mix-dark)) 85%, transparent)) !important;
  border-color: color-mix(in srgb, color-mix(in srgb, var(--gold-14) 88%, var(--mix-dark)) 88%, transparent) !important;
  color: var(--ink-2) !important;
}
.arm-promote-pill:hover { filter: brightness(1.05); }

/* v07zz59 — Promote-from-archived shot picker modal. Lists every
   active shot; click a row to confirm. Cream card matches the
   AssetItemModal vibe (light bg, dark ink) rather than the dark
   AssetReviewModal so the two read as different surfaces. */
.promote-picker {
  width: 460px;
  max-height: 70vh;
  background: color-mix(in srgb, color-mix(in srgb, var(--gold-2) 26%, var(--mix-light)) 98%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold-9) 45%, transparent);
  border-radius: var(--r-card);
  padding: 22px 0 12px;
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 12px 32px color-mix(in srgb, var(--shade) 45%, transparent),
    0 4px 12px color-mix(in srgb, var(--shade) 25%, transparent);
}
.promote-picker-head {
  padding: 0 24px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--tan-deep) 18%, transparent);
}
.promote-picker-eyebrow {
  font-size: var(--fs-10);
  letter-spacing: var(--track-18);
  font-weight: var(--fw-bold);
  color: color-mix(in srgb, var(--ink-tan-deep) 87%, var(--mix-light));
  text-transform: uppercase;
}
.promote-picker-title {
  font-family: var(--font-display);
  font-size: var(--fs-22);
  letter-spacing: var(--track-02);
  color: var(--ink);
  margin-top: 4px;
}
.promote-picker-sub {
  font-size: var(--fs-11-5);
  color: var(--ink-muted);
  line-height: 1.45;
  margin-top: 6px;
}
.promote-picker-list {
  overflow-y: auto;
  padding: 8px 12px 4px;
  scrollbar-width: thin;
}
.promote-picker-row {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  background: transparent;
  font: inherit;
  text-align: left;
  width: 100%;
  cursor: pointer;
  color: var(--ink);
}
.promote-picker-row:hover {
  background: color-mix(in srgb, var(--leaf) 12%, transparent);
  border-color: color-mix(in srgb, var(--leaf) 45%, transparent);
}
.promote-picker-row.is-default {
  border-color: color-mix(in srgb, var(--gold-9) 55%, transparent);
  background: color-mix(in srgb, var(--nav-active) 12%, transparent);
}
.promote-picker-id {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: var(--fw-semi);
  color: var(--ink);
}
.promote-picker-name {
  font-size: var(--fs-12-5);
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.promote-picker-default {
  font-size: var(--fs-9-5);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-06);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink-tan-deep) 85%, var(--mix-dark));
  background: color-mix(in srgb, var(--nav-active) 32%, transparent);
  padding: 2px 6px;
  border-radius: 4px;
}
.media-body-v { padding: 8px; }
.media-title-v {
  font-size: var(--fs-13);
  color: var(--ink);
  font-weight: var(--fw-med);
}
.media-meta-v {
  font-size: var(--fs-10-5);
  color: var(--ink-muted);
  margin-top: 4px;
  font-feature-settings: var(--tnum);
}

/* ─────────────────────────── ARCHIVE ─────────────────────────── */

.archive-help { padding: 14px 18px; }
.archive-help-title {
  font-family: var(--font-display);
  font-size: var(--fs-16);
  color: var(--ink);
  margin-bottom: 4px;
}
.archive-help-text {
  font-size: var(--fs-12-5);
  color: var(--ink-muted);
  line-height: 1.5;
  max-width: 720px;
}
.archive-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.archive-card { padding: 8px; opacity: 0.85; transition: opacity var(--dur-2) ease; }
.archive-card:hover { opacity: 1; }
.archive-thumb {
  aspect-ratio: var(--project-aspect, 21 / 9);
  border-radius: var(--r-sm);
  position: relative;
  overflow: hidden;
  filter: grayscale(0.30);
}
.archive-id {
  position: absolute;
  bottom: 8px; left: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-10);
  background: rgba(0, 0, 0, 0.40);
  color: color-mix(in srgb, var(--ink-hi) 92%, transparent);
  padding: 2px 5px;
  border-radius: 3px;
}
.archive-tag {
  position: absolute;
  top: 8px; right: 8px;
  font-size: var(--fs-9-5);
  letter-spacing: var(--track-12);
  padding: 3px 7px;
  background: color-mix(in srgb, var(--archive) 85%, transparent);
  color: var(--ink);
  border-radius: 4px;
  font-weight: var(--fw-bold);
}
.archive-body { padding: 8px; }
.archive-title {
  font-size: var(--fs-13);
  color: var(--ink);
  font-weight: var(--fw-med);
}
.archive-meta {
  font-size: var(--fs-10-5);
  color: var(--ink-muted);
  margin-top: 3px;
  letter-spacing: var(--track-04);
}
.archive-empty {
  padding: 24px;
  text-align: center;
  color: var(--ink-muted);
  font-style: italic;
}

/* ─────────────────────────── REPORTS ─────────────────────────── */

/* v07zz61 — Hugo: "Reports page is now broken... top panel is
   showing just numbers." Reports-summary captions were getting
   eaten somehow. Lock the panel to a sensible min-height + make
   the captions explicitly visible with a higher-contrast color
   so a stray theme override can't black them out. */
.reports-summary {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  padding: 18px 24px;
  gap: 14px;
  min-height: 96px;
  align-items: start;
}
.rs-stat {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.rs-num {
  font-family: var(--font-display);
  font-size: var(--fs-36);
  color: var(--ink);
  letter-spacing: var(--track-005);
  line-height: 1;
  display: block;
}
.rs-cap {
  font-size: var(--fs-10);
  letter-spacing: var(--track-16);
  color: color-mix(in srgb, var(--ink-deep) 84%, var(--mix-light));
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  margin-top: 0;
  display: block;
  white-space: nowrap;
  visibility: visible !important;
  opacity: 1 !important;
}

.reports-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}
.report-card {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px 18px;
}
.report-icon {
  font-size: var(--fs-28);
  width: 48px; height: 48px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--nav-active) 18%, transparent);
  border-radius: var(--r-panel);
}
.report-title {
  font-family: var(--font-display);
  font-size: var(--fs-15);
  color: var(--ink);
}
.report-desc {
  font-size: var(--fs-11-5);
  color: var(--ink-muted);
  margin-top: 4px;
  line-height: 1.4;
}
.report-date {
  font-size: var(--fs-10);
  letter-spacing: var(--track-06);
  color: var(--ink-soft);
  text-transform: uppercase;
  margin-top: 6px;
}
.report-open {
  background: color-mix(in srgb, var(--foil) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--foil) 55%, transparent);
  color: var(--ink);
  font-size: var(--fs-11-5);
  font-weight: var(--fw-semi);
  padding: 7px 12px;
  border-radius: var(--r-xs);
  cursor: pointer;
}
.report-open:hover { background: color-mix(in srgb, var(--foil) 40%, transparent); }

/* ─────────────────────────── DOCUMENTS ─────────────────────────── */

.docs-role-switch {
  display: flex;
  gap: 4px;
  background: color-mix(in srgb, var(--shade-5) 30%, transparent);
  backdrop-filter: blur(14px);
  border-radius: var(--r-panel);
  padding: 4px;
  align-items: center;
}
.docs-role-label {
  font-size: var(--fs-9-5);
  letter-spacing: var(--track-16);
  color: var(--ink-on-dark-muted);
  font-weight: var(--fw-bold);
  padding: 0 8px;
}
.docs-role-btn {
  background: transparent;
  border: none;
  color: var(--ink-on-dark-muted);
  font-size: var(--fs-11-5);
  font-weight: var(--fw-med);
  padding: 6px 10px;
  border-radius: var(--r-xs);
  cursor: pointer;
}
.docs-role-btn.is-active {
  background: color-mix(in srgb, var(--nav-active) 20%, transparent);
  color: var(--ink-on-accent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--hi-2) 30%, transparent);
}

.docs-filter {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
/* v07zz69 — Hugo: "would be good if we could see the tabs more
   clearly, they are completely fading away". Inactive pills had a
   light-cream BG on a cream page → almost invisible. Bumping
   contrast: darker outline, ink-coloured text, slightly stronger
   active fill. */
.docs-type-pill {
  font-size: var(--fs-11-5);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-02);
  padding: 6px 14px;
  background: color-mix(in srgb, var(--taupe-5) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--taupe-5) 40%, transparent);
  border-radius: var(--r-round);
  color: var(--ink);
  cursor: pointer;
  transition: background var(--dur-0) ease, border-color var(--dur-0) ease, color var(--dur-0) ease;
}
.docs-type-pill:hover {
  background: color-mix(in srgb, var(--foil) 30%, transparent);
  border-color: color-mix(in srgb, color-mix(in srgb, var(--gold-9) 95%, var(--mix-light)) 65%, transparent);
}
.docs-type-pill.is-active {
  background: color-mix(in srgb, var(--gold-3) 85%, transparent);
  color: var(--ink);
  border-color: color-mix(in srgb, color-mix(in srgb, var(--gold) 92%, var(--mix-dark)) 95%, transparent);
  font-weight: var(--fw-bold);
}
/* 17 Sep 2026 - the "+ Upload document" pill's label (was an inline style, out of a skin's reach) */
.docs-type-pill.docs-upload-pill { color: var(--white); }

.docs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.doc-card {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 14px;
  padding: 16px 18px;
  align-items: center;
}
.doc-icon {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  font-size: var(--fs-22);
  background: color-mix(in srgb, var(--nav-active) 18%, transparent);
  border-radius: var(--r-panel);
}
.doc-name {
  font-family: var(--font-display);
  font-size: var(--fs-16);
  color: var(--ink);
  letter-spacing: var(--track-005);
}
.doc-type {
  font-size: var(--fs-11);
  color: var(--ink-muted);
  margin-top: 4px;
  font-feature-settings: var(--tnum);
}
.doc-summary {
  font-size: var(--fs-12);
  color: var(--ink);
  margin: 8px 0;
  line-height: 1.4;
}
.doc-access {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 8px;
}
.doc-access-label {
  font-size: var(--fs-9);
  letter-spacing: var(--track-12);
  color: var(--ink-muted);
  font-weight: var(--fw-bold);
}
.doc-access-pill {
  font-size: var(--fs-10);
  padding: 2px 7px;
  background: color-mix(in srgb, var(--leaf) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--leaf) 45%, transparent);
  color: var(--olive-3);
  border-radius: var(--r-round);
  font-weight: var(--fw-med);
}
.doc-open {
  background: color-mix(in srgb, var(--foil) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--foil) 55%, transparent);
  color: var(--ink);
  font-size: var(--fs-11-5);
  font-weight: var(--fw-semi);
  padding: 7px 14px;
  border-radius: var(--r-xs);
  cursor: pointer;
  align-self: center;
}
.doc-open:hover { background: color-mix(in srgb, var(--foil) 40%, transparent); }
.docs-empty {
  padding: 24px;
  text-align: center;
  color: var(--ink-muted);
  font-style: italic;
}

/* ─────────────────────────── SETTINGS ─────────────────────────── */

.settings-view { gap: 14px; }
.settings-section { padding: 20px 24px; }
/* v06p — Multi-column row container. Lets us pair small panels
   side-by-side instead of stacking them all full-width. */
.settings-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 14px;
}
.settings-row .settings-section { margin: 0; flex-shrink: 0; }
@media (max-width: 880px) {
  .settings-row { grid-template-columns: 1fr; }
}
/* v1087 — Settings tidy-up (Hugo: "too many settings cards that are taking a whole row").
   Rows of three small cards (--3), rows of two medium cards (the rule above), one full-width
   card (Preferences). The cards in a row stretch to the same height. */
.settings-row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1280px) { .settings-row--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 880px) { .settings-row--3 { grid-template-columns: 1fr; } }
/* Preferences: the choices in two columns under the switches. */
.settings-list.settings-list--selects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; margin-top: 12px; }   /* two classes: beats the later .settings-list flex rule */
.settings-list--selects .setting-row { border-bottom: none; padding: 8px 0; }
@media (max-width: 1100px) { .settings-list.settings-list--selects { grid-template-columns: 1fr; } }
/* Background photos: three across in a half-width card. */
.settings-row .bg-picker-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.settings-row .bg-picker-thumb { height: 80px; }
/* Panel layout in a third of a row: less padding. The line under "Reset layout" keeps two
   lines of room, so the card does not grow when it asks you to confirm. */
.settings-row .layout-reset-card { margin-top: 8px; padding: 14px 16px; }
.settings-row .layout-reset-card .lr-sub { line-height: 1.4; min-height: 4.2em; }   /* 3 lines */
.settings-row .layout-reset-btn { min-width: 136px; justify-content: center; flex-shrink: 0; }   /* same width for "Reset layout" and "Click to confirm" */
/* Progress weights in half a row: Save keeps its width when it says "Saving…". */
.settings-row .sw-actions .bg-picker-btn:last-child { min-width: 72px; }

/* v06p — Compact "Notifications" card summary + Configure button. */
.notif-compact-summary {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: 8px;
}
.notif-compact-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
}
.notif-compact-stat-num {
  font-family: var(--font-display), sans-serif;
  font-size: var(--fs-22);
  color: var(--ink);
  line-height: 1;
}
.notif-compact-stat-of {
  font-size: var(--fs-14);
  color: var(--ink-muted);
}
.notif-compact-stat-cap {
  font-size: var(--fs-9-5);
  letter-spacing: var(--track-16);
  color: var(--ink-muted);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
}
.notif-compact-configure {
  margin-left: auto;
  font: inherit;
  font-size: var(--fs-11-5);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-04);
  padding: 8px 14px;
  border-radius: var(--r-7);
  border: 1px solid color-mix(in srgb, var(--leaf) 55%, transparent);
  background: color-mix(in srgb, var(--leaf) 18%, transparent);
  color: var(--ink);
  cursor: pointer;
}
.notif-compact-configure:hover { background: color-mix(in srgb, var(--leaf) 30%, transparent); }

/* Event × Channel matrix used in the modal + the legacy inline render. */
.notif-matrix {
  display: grid;
  grid-template-columns: 1fr 70px;   /* 23 Sep 2026 — the EMAIL column was removed */
  gap: 6px 14px;
  align-items: center;
  margin-top: 6px;
}
.notif-matrix-head {
  display: contents;
  font-size: var(--fs-10);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-14);
  color: var(--ink-muted);
  text-transform: uppercase;
}
.notif-matrix-head > span {
  padding: 4px 0;
  text-align: center;
  border-bottom: 1px solid color-mix(in srgb, var(--tan-deep) 18%, transparent);
}
.notif-matrix-head > span:first-child { text-align: left; }
.notif-matrix-row {
  display: contents;
}
.notif-matrix-row > .notif-toggle {
  justify-self: center;
}
.notif-matrix-label {
  padding: 6px 0;
}
.notif-matrix-name { font-size: var(--fs-13); color: var(--ink); font-weight: var(--fw-med); }
.notif-matrix-id {
  font-family: var(--font-mono), monospace;
  font-size: var(--fs-10-5);
  color: var(--ink-muted);
}
.settings-section-head {
  font-size: var(--fs-10);
  letter-spacing: var(--track-18);
  font-weight: var(--fw-bold);
  color: var(--ink-muted);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.settings-section-sub {
  font-size: var(--fs-12-5);
  color: var(--ink-muted);
  margin-bottom: 14px;
  line-height: 1.5;
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.theme-card {
  padding: 14px;
  border-radius: var(--r-md);
  background: var(--sep-card-fill);
  border: 1.5px solid color-mix(in srgb, var(--foil) 25%, transparent);
  cursor: pointer;
  text-align: left;
  position: relative;
  transition: background var(--dur-1) ease, border-color var(--dur-1) ease, transform var(--dur-1) ease;
}
.theme-card:hover {
  background: var(--sep-row-fill-hover);
  border-color: color-mix(in srgb, var(--foil) 55%, transparent);
  transform: translateY(-2px);
}
.theme-card.is-active {
  background: color-mix(in srgb, var(--leaf) 18%, transparent);
  border-color: color-mix(in srgb, var(--leaf) 65%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--leaf) 30%, transparent);
}
.theme-swatches {
  display: flex;
  gap: 4px;
  margin-bottom: 10px;
}
.theme-swatch {
  width: 28px; height: 28px;
  border-radius: var(--r-xs);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.20);
}
.theme-name {
  font-family: var(--font-display);
  font-size: var(--fs-16);
  color: var(--ink);
  letter-spacing: var(--track-005);
}
.theme-desc {
  font-size: var(--fs-11);
  color: var(--ink-muted);
  margin-top: 4px;
  line-height: 1.4;
}
.theme-active-tag {
  position: absolute;
  top: 12px; right: 12px;
  font-size: var(--fs-9);
  letter-spacing: var(--track-14);
  padding: 2px 7px;
  background: color-mix(in srgb, var(--leaf) 85%, transparent);
  color: var(--ink-on-accent);
  border-radius: 4px;
  font-weight: var(--fw-bold);
}

/* v07zz31 — Background image picker. Wider tiles than the colour
   palette grid because each tile shows a small preview thumbnail of
   the chosen photo. Three tiles per row on a typical desktop. */
.bg-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.bg-picker-tile {
  position: relative;
  padding: 10px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--hi) 30%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--foil) 25%, transparent);
  cursor: pointer;
  text-align: left;
  transition: background var(--dur-1) ease, border-color var(--dur-1) ease, transform var(--dur-1) ease;
  font: inherit;
  color: var(--ink);
}
.bg-picker-tile:hover {
  background: color-mix(in srgb, var(--hi) 50%, transparent);
  border-color: color-mix(in srgb, var(--foil) 55%, transparent);
  transform: translateY(-2px);
}
.bg-picker-tile.is-active {
  background: color-mix(in srgb, var(--leaf) 18%, transparent);
  border-color: color-mix(in srgb, var(--leaf) 65%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--leaf) 30%, transparent);
}
.bg-picker-thumb {
  height: 96px;
  width: 100%;
  border-radius: var(--r-sm);
  background: linear-gradient(180deg, var(--shade-54) 0%, var(--sidebar-bg) 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.bg-picker-thumb--custom {
  display: grid;
  place-items: center;
}
.bg-picker-plus {
  font-size: var(--fs-32);
  font-weight: 200;
  color: color-mix(in srgb, var(--ink-cream-10) 55%, transparent);
  line-height: 1;
}
.bg-picker-label {
  margin-top: 8px;
  font-size: var(--fs-12-5);
  font-weight: var(--fw-med);
  letter-spacing: var(--track-02);
  color: var(--ink);
}
.bg-picker-tag {
  position: absolute;
  top: 10px; right: 10px;
  font-size: var(--fs-9);
  letter-spacing: var(--track-14);
  padding: 2px 7px;
  background: color-mix(in srgb, var(--leaf) 85%, transparent);
  color: var(--ink-on-accent);
  border-radius: 4px;
  font-weight: var(--fw-bold);
}
.bg-picker-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.bg-picker-btn {
  font: inherit;
  font-size: var(--fs-12);
  font-weight: var(--fw-semi);
  padding: 8px 14px;
  border-radius: var(--r-xs);
  background: color-mix(in srgb, var(--leaf) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--leaf) 55%, transparent);
  color: var(--ink-forest-2);
  cursor: pointer;
  transition: background var(--dur-1) ease;
}
.bg-picker-btn:hover { background: color-mix(in srgb, var(--leaf) 32%, transparent); }
.bg-picker-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.bg-picker-btn--ghost {
  background: color-mix(in srgb, var(--danger) 10%, transparent);
  border-color: var(--danger-border);
  color: var(--danger);
}
.bg-picker-btn--ghost:hover { background: color-mix(in srgb, var(--danger) 22%, transparent); }
.bg-picker-err {
  font-size: var(--fs-11-5);
  color: var(--danger);
  font-weight: var(--fw-med);
}

.settings-list { display: flex; flex-direction: column; }
.setting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--card-border) 20%, transparent);
  gap: 16px;
}
.setting-row:last-child { border-bottom: none; }
.setting-text { flex: 1; min-width: 0; }
.setting-label { font-size: var(--fs-13); color: var(--ink); font-weight: var(--fw-med); }
.setting-sub { font-size: var(--fs-11-5); color: var(--ink-muted); margin-top: 3px; line-height: 1.4; }

.setting-toggle {
  width: 40px; height: 22px;
  border-radius: var(--r-round);
  border: 1px solid color-mix(in srgb, var(--tan-deep) 35%, transparent);
  background: color-mix(in srgb, var(--tan-deep) 15%, transparent);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: background var(--dur-2) ease, border-color var(--dur-2) ease;
}
.setting-toggle.is-on {
  background: color-mix(in srgb, var(--leaf) 55%, transparent);
  border-color: color-mix(in srgb, var(--leaf) 85%, transparent);
}
.setting-toggle-thumb {
  position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--ink-on-accent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.30);
  transition: left var(--dur-2) var(--ease-glide);
}
.setting-toggle.is-on .setting-toggle-thumb { left: 20px; }
.setting-toggle:disabled { opacity: 0.45; cursor: default; }   /* 23 Sep 2026 — HIDDEN TOOLS, read-only for non-producers */

.setting-select {
  display: flex;
  gap: 4px;
  background: color-mix(in srgb, var(--tan-deep) 12%, transparent);
  border-radius: var(--r-sm);
  padding: 3px;
}
.setting-select-btn {
  background: transparent;
  border: none;
  color: var(--ink-muted);
  font-size: var(--fs-11-5);
  padding: 6px 12px;
  border-radius: 5px;
  cursor: pointer;
  font-weight: var(--fw-med);
}
.setting-select-btn.is-active {
  background: color-mix(in srgb, var(--hi) 85%, transparent);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.50), 0 1px 2px color-mix(in srgb, var(--shadow-ink) 10%, transparent);
}

/* ─── t11 — User management (admin only) ─────────────────────────── */
.users-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--card-border);
  border-radius: var(--r-panel);
  background: color-mix(in srgb, var(--cream) 50%, transparent);
  overflow: hidden;
  margin-top: 12px;
}
.users-empty { padding: 18px; text-align: center; color: var(--ink-muted); font-size: var(--fs-13); }
.users-error {
  margin-top: 10px;
  padding: 8px 12px;
  border: 1px solid color-mix(in srgb, var(--danger-soft-2) 45%, transparent);
  background: color-mix(in srgb, var(--danger-soft-2) 8%, transparent);
  color: var(--danger-ink);
  border-radius: var(--r-sm);
  font-size: var(--fs-12-5);
}
.user-row {
  display: grid;
  grid-template-columns: 32px 1fr 140px 32px;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--card-border);
}
.user-row:last-child { border-bottom: none; }
.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--olive-8) 0%, var(--olive-3) 100%);
  color: var(--ink-cream);
  display: grid;
  place-items: center;
  font-size: var(--fs-11-5);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-04);
  text-transform: uppercase;
}
.user-meta { min-width: 0; }
.user-name { font-size: var(--fs-13); font-weight: var(--fw-semi); color: var(--ink); }
.user-email { font-size: var(--fs-11-5); color: var(--ink-muted); }
.user-role-select {
  font: inherit;
  font-family: var(--font-body);
  font-size: var(--fs-11-5);
  font-weight: var(--fw-semi);
  color: var(--ink);
  background: color-mix(in srgb, var(--cream) 85%, transparent);
  border: 1px solid var(--card-border);
  border-radius: var(--r-xs);
  padding: 4px 8px;
  cursor: pointer;
  transition: background var(--dur-1) ease, border-color var(--dur-1) ease, color var(--dur-1) ease;
}
/* v05c — role-coloured rims so an admin can scan the user list and
   immediately see who's a supervisor vs a lead vs an artist. Each
   badge variant tints background + border + text in its own hue. */
.user-role-select--admin      { background: color-mix(in srgb, var(--role-admin) 18%, transparent);  border-color: color-mix(in srgb, var(--role-admin) 65%, transparent);  color: var(--role-admin-ink); }
.user-role-select--producer   { background: color-mix(in srgb, var(--leaf) 18%, transparent); border-color: color-mix(in srgb, var(--olive-2) 65%, transparent);  color: var(--ink-forest-2); }
.user-role-select--supervisor { background: color-mix(in srgb, var(--gold-16) 20%, transparent); border-color: color-mix(in srgb, var(--gold-6) 65%, transparent); color: color-mix(in srgb, var(--ink-tan-deep) 81%, var(--mix-dark)); }
.user-role-select--director   { background: color-mix(in srgb, var(--role-director) 20%, transparent); border-color: color-mix(in srgb, var(--role-director-line) 65%, transparent); color: var(--role-director-ink); }
.user-role-select--lead       { background: color-mix(in srgb, var(--role-lead) 20%, transparent); border-color: color-mix(in srgb, var(--role-lead-line) 65%, transparent); color: var(--role-lead-ink); }
.user-role-select--artist     { background: color-mix(in srgb, var(--role-artist) 20%, transparent); border-color: color-mix(in srgb, var(--role-artist-line) 65%, transparent); color: var(--role-artist-ink); }
.user-role-select--reviewer   { background: color-mix(in srgb, var(--role-reviewer) 18%, transparent); border-color: color-mix(in srgb, var(--taupe-5) 55%, transparent); color: var(--role-reviewer-ink); }
/* v06p — Tester role: warm tan/gold so it stands out from the
   other 7 roles' palette without colliding with admin (red) or
   producer (green). */
.user-role-select--tester     { background: color-mix(in srgb, var(--gold-12) 22%, transparent);  border-color: color-mix(in srgb, color-mix(in srgb, var(--gold) 94%, var(--mix-dark)) 65%, transparent); color: color-mix(in srgb, var(--ink-tan-deep) 67%, var(--mix-dark)); }
/* v07zz515 — Editor role: rose so it stands apart from artist (purple) + lead (teal). */
.user-role-select--editor     { background: color-mix(in srgb, var(--role-editor) 20%, transparent); border-color: color-mix(in srgb, var(--role-editor-line) 65%, transparent); color: var(--role-editor-ink); }
.user-remove {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-muted);
  border: 1px solid transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background var(--dur-1) ease, color var(--dur-1) ease, border-color var(--dur-1) ease;
}
.user-remove:hover {
  background: color-mix(in srgb, var(--danger-soft-2) 12%, transparent);
  color: var(--danger-ink);
  border-color: color-mix(in srgb, var(--danger-soft-2) 45%, transparent);
}

.user-add-form {
  margin-top: 14px;
  padding: 12px 14px 14px;
  border: 1px solid var(--card-border);
  border-radius: var(--r-panel);
  background: color-mix(in srgb, var(--cream) 30%, transparent);
}
.user-add-eyebrow {
  font-size: var(--fs-10);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-14);
  color: var(--ink-muted);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.user-add-grid {
  display: grid;
  grid-template-columns: 1.4fr 1.2fr 110px 1.2fr auto;
  gap: 8px;
}
.user-input {
  font: inherit;
  font-family: var(--font-body);
  font-size: var(--fs-12-5);
  color: var(--ink);
  background: color-mix(in srgb, var(--cream) 85%, transparent);
  border: 1px solid var(--card-border);
  border-radius: var(--r-xs);
  padding: 6px 8px;
  outline: none;
}
.user-input:focus {
  border-color: color-mix(in srgb, var(--leaf) 70%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--leaf) 15%, transparent);
}
.user-add-submit {
  font: inherit;
  font-family: var(--font-body);
  font-size: var(--fs-11-5);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-04);
  color: var(--ink-cream);
  background: color-mix(in srgb, var(--leaf) 85%, transparent);
  border: 1px solid color-mix(in srgb, var(--olive-2) 85%, transparent);
  border-radius: var(--r-xs);
  padding: 6px 14px;
  cursor: pointer;
  transition: background var(--dur-1) ease;
}
.user-add-submit:hover:not(:disabled) { background: color-mix(in srgb, var(--olive-2) 95%, transparent); }
.user-add-submit:disabled { opacity: 0.55; cursor: not-allowed; }
@media (max-width: 720px) {
  .user-add-grid { grid-template-columns: 1fr; }
}

/* ─── t16 — Folder Sync admin section ───────────────────────────── */
.folder-sync-actions { margin: 12px 0; }
.folder-sync-empty {
  margin-top: 10px;
  padding: 14px;
  border: 1px dashed var(--card-border);
  border-radius: var(--r-panel);
  background: color-mix(in srgb, var(--cream) 30%, transparent);
  color: var(--ink-muted);
  font-size: var(--fs-12-5);
  line-height: 1.5;
}
.folder-sync-empty code {
  background: color-mix(in srgb, var(--tan-deep) 10%, transparent);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: var(--fs-11-5);
}
.folder-sync-results { margin-top: 10px; }
.folder-sync-stats {
  display: flex;
  gap: 14px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--tan-deep) 6%, transparent);
  border: 1px solid var(--card-border);
  border-radius: var(--r-panel);
  font-size: var(--fs-12);
  color: var(--ink-muted);
  margin-bottom: 10px;
}
.folder-sync-stats strong { color: var(--ink); font-size: var(--fs-14); margin-right: 4px; }
.folder-sync-group {
  margin-top: 8px;
  border: 1px solid var(--card-border);
  border-radius: var(--r-panel);
  background: color-mix(in srgb, var(--cream) 50%, transparent);
  overflow: hidden;
}
.folder-sync-group summary {
  padding: 10px 14px;
  cursor: pointer;
  font-size: var(--fs-11-5);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-06);
  text-transform: uppercase;
  color: var(--ink);
}
.folder-sync-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--card-border);
}
.folder-sync-list li {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  font-size: var(--fs-12);
  border-bottom: 1px solid var(--card-border);
}
.folder-sync-list li:last-child { border-bottom: none; }
.folder-sync-list .fs-shotid { font-weight: var(--fw-bold); color: var(--ink); }
.folder-sync-list .fs-folder { color: var(--ink-muted); font-family: var(--font-mono); font-size: var(--fs-11); }
.folder-sync-list .fs-title { color: var(--ink-muted); }
.folder-sync-list .fs-files { color: var(--ink-muted); font-size: var(--fs-11); }
.folder-sync-list .fs-more { font-style: italic; color: var(--ink-muted); text-align: center; grid-column: 1 / -1; }

/* ─── t08b — Notification prefs toggle list ────────────────────── */
.notif-prefs-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  border: 1px solid var(--card-border);
  border-radius: var(--r-panel);
  background: color-mix(in srgb, var(--cream) 50%, transparent);
  overflow: hidden;
}
.notif-prefs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--card-border);
}
.notif-prefs-row:last-child { border-bottom: none; }
.notif-prefs-name { font-size: var(--fs-13); font-weight: var(--fw-semi); color: var(--ink); }
.notif-prefs-id { font-size: var(--fs-10-5); color: var(--ink-muted); font-family: var(--font-mono); margin-top: 1px; }

.notif-toggle {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
  cursor: pointer;
  flex-shrink: 0;
}
.notif-toggle input { opacity: 0; width: 0; height: 0; }
.notif-toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--card-border);
  border-radius: var(--r-round);
  transition: background 160ms ease;
}
.notif-toggle-slider::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--mix-light);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--shadow-ink) 30%, transparent);
  transition: transform 160ms ease;
}
.notif-toggle input:checked + .notif-toggle-slider {
  background: color-mix(in srgb, var(--leaf) 85%, transparent);
}
.notif-toggle input:checked + .notif-toggle-slider::before {
  transform: translateX(16px);
}

/* v03m / v03n — Reports + Settings: allow vertical scrolling.
   The base .view-page rule has overflow:hidden which clips content
   that exceeds the viewport. Higher-specificity overrides for the
   Reports + Settings pages (and a generic .view-page--scroll class
   for future use) flip overflow-y to auto and bound height so users
   can reach panels at the bottom of the page. The .view-page top
   bar is no longer clipped because the inner padding-top is honoured. */
.view-page.settings-view,
.view-page.assets-view,
.view-page.media-view,
.view-page.admin-view,
.view-page--scroll,
section.view-page:has(.reports-summary) {
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(100vh - 80px);
}

/* v01v / v03l — Media library: per-sequence groups + 4K badge. */
.media-thumb-v {
  position: relative;
  aspect-ratio: var(--project-aspect, 21 / 9);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.media-4k-badge {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: var(--fs-9);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--track-08);
  padding: 2px 6px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--nav-active) 96%, var(--mix-light)) 0%, var(--gold-15) 100%);
  color: color-mix(in srgb, var(--ink-deep) 92%, var(--mix-dark));
  border-radius: 3px;
  z-index: 2;
}
.media-seq-group { margin-bottom: 28px; }
.media-seq-head {
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-14);
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 0 0 10px;
  padding-bottom: 4px;
  border-bottom: 1px solid color-mix(in srgb, var(--card-border) 30%, transparent);
}

/* v01s — Settings preferences side-effects.
   reduced-motion: body class disables transitions/animations app-wide.
   data-thumbsize: small/medium/large drives a `--row-thumb-w` CSS var
   that the .shot-row grid template + .shot-thumb width both consume,
   so the whole row breathes with the thumbnail size instead of leaving
   the thumb stranded inside a fixed-width column. Padding scales too
   so the cluster reads as balanced at every size. */
body.reduced-motion *,
body.reduced-motion *::before,
body.reduced-motion *::after {
  animation-duration: 0.001s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001s !important;
  scroll-behavior: auto !important;
}
:root {
  --row-thumb-w: 168px;
  --row-pad-y:   14px;
  --row-id-size: 22px;
}
body[data-thumbsize="small"]  {
  --row-thumb-w: 110px;
  --row-pad-y:   10px;
  --row-id-size: 18px;
}
body[data-thumbsize="medium"] {
  --row-thumb-w: 168px;
  --row-pad-y:   14px;
  --row-id-size: 22px;
}
body[data-thumbsize="large"]  {
  --row-thumb-w: 240px;
  --row-pad-y:   18px;
  --row-id-size: 26px;
}
body[data-thumbsize] .shot-row {
  /* First column shrinks/grows with the thumb, plus a 16px breathing
     buffer so the thumb sits clear of the row's left padding without
     leaving a big dead zone next to it. */
  grid-template-columns: calc(var(--row-thumb-w) + 16px) minmax(0, 1fr) var(--shot-status-col-w);
  padding-top:    var(--row-pad-y);
  padding-bottom: var(--row-pad-y);
}
body[data-thumbsize] .shot-thumb {
  width: var(--row-thumb-w);
  /* no justify-self: centring moved the thumbnail 8px right the moment Settings was opened */
}
body[data-thumbsize] .shot-row .shot-id {
  font-size: var(--row-id-size);
}

/* v01s — Settings panels: kill any overflow:hidden / max-height that
   was clipping the inner content. New rule, doesn't touch existing
   .settings-section base styling. */
.settings-view .settings-section {
  overflow: visible;
  max-height: none;
}

/* v04r — 3-column grid for Preferences toggles. */
.settings-list--prefs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 900px) {
  .settings-list--prefs { grid-template-columns: 1fr; }
}

/* v01o — Shotlist grid widened to 9 columns: ID, Thumb, Seq, Frame
   Title, Type, Characters, Location, Assets, Stage. Higher specificity
   selector overrides the base 6-column .shotlist-row rule. */
.shotlist-grid--v01o .shotlist-row {
  grid-template-columns: 70px 60px 50px 1.4fr 90px 1fr 1fr 80px 100px;
  gap: 12px;
}
.shotlist-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  display: block;
}

/* v03i / v04m / v04x / v04y — Shotlist 10-column grid: ID, Thumb,
   Seq, Frame Title, Type, Characters, Species, Location, Assets,
   Status. v04x bumps Type column to 160px; v04m widens Frame Title
   so titles don't truncate; v04y enlarges shot ID font. Resizable-
   column drag handles deferred (would need substantial JS — visual
   widths tuned to fit at common viewport sizes for now). */
.shotlist-grid--v03i .shotlist-row {
  grid-template-columns: 90px 80px 50px 1.4fr 160px 1fr 1.1fr 1fr 130px 130px;
  gap: 12px;
}
.shotlist-grid--v03i .shotlist-row--head {
  border-radius: 10px 10px 0 0;
  padding-left: 14px;
  padding-right: 14px;
}
.shotlist-grid--v03i .shotlist-id {
  /* v04y — larger shot ID for legibility. */
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-02);
}
/* v04v — clickable row pointer cursor + subtle hover. */
.shotlist-row--click {
  cursor: pointer;
  transition: background-color var(--dur-1) ease;
}
.shotlist-row--click:hover {
  background: color-mix(in srgb, color-mix(in srgb, var(--gold-11) 39%, var(--mix-light)) 45%, transparent);
}
/* v04w — round reference avatars + film-strip archival glyph. */
.shotlist-refs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.shotlist-ref-avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(160deg, oklch(0.62 0.06 60), oklch(0.45 0.04 30));
  color: var(--ink-cream);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
  border: 1px solid color-mix(in srgb, var(--shadow-ink) 18%, transparent);
  flex-shrink: 0;
}
.shotlist-ref-more {
  font-size: var(--fs-11);
  color: var(--ink-muted);
  font-weight: var(--fw-semi);
}
/* v04m / v04x — let the shotlist inherit the body font (Inter); kill
   any non-Inter overrides that may have crept in. */
.shotlist-grid--v03i .shotlist-row > * {
  font-family: inherit;
}
.shotlist-grid--v03i .shot-pill--static {
  font-size: var(--fs-9-5);
  padding: 4px 8px 3px;
}

/* v01k / v04pf — Neutral image-frame placeholder for prop cards.
   v04pf: NO icons whatsoever — empty 21:9 dashed-border frame
   that fills with image when one is supplied. */
.prop-frame {
  width: 100%;
  aspect-ratio: var(--project-aspect, 21 / 9);
  border-radius: var(--r-sm);
  background-color: color-mix(in srgb, var(--ink-muted) 10%, transparent);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border: 1px dashed color-mix(in srgb, var(--ink-muted) 40%, transparent);
  margin-bottom: 8px;
  position: relative; /* v07zz240 — anchor the absolute status pill */
  /* 16 Sep 2026 — Hugo: "what happened to the nice placeholder images with the
     text in the middle". A templated project's asset card puts its initials
     INSIDE this frame (.character-thumb-initials), and the frame had no
     alignment at all, so they sat in the top-left corner of an empty dashed box.
     Paradise Found's own prop frames hold nothing but an absolutely-positioned
     status pill, which place-items never touches — so this centres the initials
     everywhere else and moves nothing there. */
  display: grid;
  place-items: center;
  overflow: hidden;
}
.prop-frame .character-thumb-initials {
  font-size: var(--fs-44);
  line-height: 1;
  opacity: 0.85;
}
/* v07zz380 — animal cards use a 4:5 portrait frame (Hugo) instead of the 21:9
   prop frame. Scoped modifier so props stay 21:9. */
.prop-frame--portrait { aspect-ratio: 4 / 5; }
/* v04pf — stack frame above body instead of the legacy side-by-side
   flex; higher-specificity override of the base .prop-card rule. */
.props-grid .prop-card {
  flex-direction: column;
  align-items: stretch;
}
/* Legacy classes from v01k kept so any other call site doesn't break. */
.prop-thumb--placeholder {
  background: color-mix(in srgb, var(--ink-muted) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--ink-muted) 30%, transparent);
}
.prop-thumb-glyph {
  color: var(--ink-taupe);
  opacity: 0.78;
}

/* ─────────────────────────── v05b — Admin dashboard ─────────────────────── */
.admin-view { display: flex; flex-direction: column; gap: 22px; }
/* v06p — `flex-shrink: 0` so sections keep their natural content
   height instead of being squeezed when the page overflows. The
   scroll lives at the .view-page level (overflow-y: auto). */
.admin-section { padding: 22px 26px 24px; display: flex; flex-direction: column; gap: 14px; flex-shrink: 0; }
/* v916 — MODEL STATUS strip inside the API STATUS card. Panel keeps a fixed
   min-height so opening a report never bounces the sections below (#20). */
.api-model-btns { display: flex; gap: 8px; flex-wrap: wrap; margin: 2px 0 8px; }
.api-model-btn {
  font: inherit; font-size: var(--fs-11-5); font-weight: var(--fw-bold); letter-spacing: var(--track-02);
  padding: 6px 12px; border-radius: var(--r-round); cursor: pointer;
  border: 1px solid var(--line-soft-3); background: transparent; color: inherit;
}
.api-model-btn.is-on { background: color-mix(in srgb, var(--olive) 16%, transparent); border-color: var(--accent, var(--olive)); }
.api-model-panel { min-height: 96px; margin-bottom: 10px; }
.api-model-report { display: flex; flex-direction: column; gap: 7px; padding: 10px 12px; border-radius: var(--r-panel); border: 1px solid var(--line-soft-2); }
.api-model-report--bad { border-color: color-mix(in srgb, var(--danger-3) 45%, transparent); background: color-mix(in srgb, var(--danger-3) 6%, transparent); }
.api-model-report--ok { border-color: color-mix(in srgb, var(--olive) 45%, transparent); background: color-mix(in srgb, var(--olive) 7%, transparent); }
.api-model-verdict { font-weight: var(--fw-bold); font-size: var(--fs-12-5); }
.api-model-reason { display: flex; flex-direction: column; gap: 3px; padding: 8px 10px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--black) 5%, transparent); }
.api-model-reason-when { font-size: var(--fs-10); font-weight: var(--fw-heavy); letter-spacing: var(--track-08); text-transform: uppercase; opacity: 0.65; }
.api-model-reason-msg { font-size: var(--fs-12); line-height: 1.45; font-family: var(--font-mono); }
.api-model-meta { display: flex; gap: 16px; flex-wrap: wrap; font-size: var(--fs-11); opacity: 0.75; }

.admin-section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-size: var(--fs-11); letter-spacing: var(--track-18); font-weight: var(--fw-bold);
  color: var(--ink); text-transform: uppercase;
  padding-bottom: 8px; border-bottom: 1px solid color-mix(in srgb, var(--card-border) 40%, transparent);
}
.admin-section-sub { font-size: var(--fs-10-5); letter-spacing: var(--track-10); color: var(--ink-muted); font-weight: var(--fw-semi); text-transform: none; }

/* User table */
.admin-table { display: flex; flex-direction: column; gap: 8px; }
.admin-table-head,
.admin-table-row {
  display: grid;
  /* v07zw — Actions column needs to fit Suspend + Delete side-by-side
     (or Reactivate + Delete). Was 110px which clipped the Delete
     button off the right edge of the row. 180px gives both buttons
     room and matches the visual rhythm of the other columns. */
  grid-template-columns: 1.3fr 1.7fr 130px 100px 100px 100px 180px;
  gap: 12px; align-items: center;
}
.admin-table-head {
  font-size: var(--fs-9-5); letter-spacing: var(--track-18); font-weight: var(--fw-bold);
  color: var(--ink-muted); text-transform: uppercase;
  padding: 4px 14px 6px;
}
.admin-table-row {
  padding: 12px 14px;
  background: var(--sep-row-fill);
  border: 1px solid var(--card-border);
  border-radius: var(--r-panel);
  font-size: var(--fs-12-5);
  transition: background var(--dur-1) ease, transform var(--dur-1) ease, box-shadow var(--dur-1) ease;
}
.admin-table-row:hover { background: var(--sep-row-fill-hover); transform: translateY(-1px); box-shadow: 0 4px 10px color-mix(in srgb, var(--shadow-ink) 10%, transparent); }
.admin-table-row.is-suspended { opacity: 0.6; }
.admin-cell-name { font-weight: var(--fw-semi); color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-cell-email { color: var(--ink-muted); font-size: var(--fs-12); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-cell-date { color: var(--ink-muted); font-size: var(--fs-11-5); font-feature-settings: var(--tnum); }
.admin-status-pill {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 10px; border-radius: var(--r-round);
  font-size: var(--fs-9-5); font-weight: var(--fw-bold); letter-spacing: var(--track-14); text-transform: uppercase;
  border: 1px solid; width: fit-content;
}
.admin-status-pill--active    { background: color-mix(in srgb, var(--ok) 18%, transparent); border-color: color-mix(in srgb, var(--olive-2) 55%, transparent); color: var(--ink-forest-2); }
.admin-status-pill--suspended { background: color-mix(in srgb, var(--role-reviewer) 18%, transparent); border-color: color-mix(in srgb, var(--taupe-5) 55%, transparent); color: var(--ink-muted); }
/* 15 Sep 2026 — Delete / Remove buttons and the crew pre-fill label used to be inline colours the
   presets could not reach. Sizes / padding are exactly the old inline values. */
.admin-delete-btn,
.admin-remove-btn {
  font: inherit; font-size: var(--fs-11); font-weight: var(--fw-semi);
  padding: 5px 10px; border-radius: var(--r-xs);
  border: 1px solid var(--danger-border);
  background: transparent;
  color: var(--danger);
  cursor: pointer;
}
.admin-remove-btn.is-owner { color: color-mix(in srgb, var(--danger) 35%, transparent); cursor: not-allowed; }
.admin-prefill-label { font-size: var(--fs-11); letter-spacing: var(--track-06); color: var(--ink-muted); white-space: nowrap; }
/* 15 Sep 2026 — Delete / Remove buttons and the crew pre-fill label used to be inline colours the
   presets could not reach. Sizes / padding are exactly the old inline values. */
.admin-delete-btn,
.admin-remove-btn {
  font: inherit; font-size: var(--fs-11); font-weight: var(--fw-semi);
  padding: 5px 10px; border-radius: var(--r-xs);
  border: 1px solid var(--danger-border);
  background: transparent;
  color: var(--danger);
  cursor: pointer;
}
.admin-remove-btn.is-owner { color: color-mix(in srgb, var(--danger) 35%, transparent); cursor: not-allowed; }
.admin-prefill-label { font-size: var(--fs-11); letter-spacing: var(--track-06); color: var(--ink-muted); white-space: nowrap; }
.admin-suspend-btn {
  background: color-mix(in srgb, var(--hi) 40%, transparent);
  border: 1px solid var(--card-border);
  border-radius: var(--r-sm);
  padding: 6px 12px;
  font-family: var(--font-body); font-size: var(--fs-11); font-weight: var(--fw-semi);
  color: var(--ink); cursor: pointer;
  transition: background var(--dur-1) ease, border-color var(--dur-1) ease;
}
.admin-suspend-btn:hover { background: color-mix(in srgb, var(--hi) 70%, transparent); border-color: color-mix(in srgb, var(--nav-active) 65%, transparent); }
.admin-suspend-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* v07zw — Admin page two-column row: Deployment Diagnostic +
   Integrations sit side-by-side on wide screens to halve scroll
   length. Stacks on narrower screens. */
.admin-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 14px;
}
.admin-two-col > * { min-width: 0; }
@media (max-width: 1280px) {
  .admin-two-col { grid-template-columns: 1fr; }
}

/* v07zw — Modal confirmation for irreversible user delete. Forces
   the admin to type DELETE before the confirm button enables. */
.confirm-delete-modal {
  width: min(520px, 92vw);
  max-height: 88vh;
  overflow-y: auto;
  padding: 22px 24px 18px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--cream-2) 96%, transparent);
  box-shadow: 0 18px 50px color-mix(in srgb, var(--shade-36) 45%, transparent), 0 4px 14px rgba(0, 0, 0, 0.25);
}
.confirm-delete-eyebrow {
  font-size: var(--fs-10-5); font-weight: var(--fw-bold); letter-spacing: var(--track-16); text-transform: uppercase;
  color: var(--danger); margin-bottom: 8px;
}
.confirm-delete-title { font-size: var(--fs-18); font-weight: var(--fw-semi); color: var(--ink); margin-bottom: 14px; }
.confirm-delete-body { font-size: var(--fs-13); line-height: 1.55; color: var(--ink); }
.confirm-delete-body p { margin: 0 0 10px; }
.confirm-delete-list { margin: 0 0 12px 0; padding: 10px 14px; list-style: none; background: color-mix(in srgb, color-mix(in srgb, var(--gold-10) 25%, var(--mix-light)) 55%, transparent); border-radius: var(--r-xs); border: 1px solid var(--card-border); }
.confirm-delete-list li { font-size: var(--fs-12-5); padding: 2px 0; }
.confirm-delete-warn { color: var(--danger); font-size: var(--fs-12-5); background: color-mix(in srgb, var(--danger-soft) 6%, transparent); padding: 8px 10px; border-radius: var(--r-xs); border: 1px solid color-mix(in srgb, var(--danger-soft) 25%, transparent); }
.confirm-delete-label { display: block; font-size: var(--fs-12); color: var(--ink-muted); margin: 12px 0 6px; }
.confirm-delete-input {
  width: 100%; box-sizing: border-box;
  padding: 9px 12px; font: inherit; font-size: var(--fs-14);
  border-radius: var(--r-xs); border: 1px solid var(--card-border);
  background: color-mix(in srgb, var(--cream) 85%, transparent); color: var(--ink);
  letter-spacing: var(--track-05);
}
.confirm-delete-input:focus { outline: 2px solid var(--danger-border); outline-offset: 1px; border-color: color-mix(in srgb, var(--danger-soft) 55%, transparent); }
.confirm-delete-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.confirm-delete-btn {
  font: inherit; font-size: var(--fs-13); font-weight: var(--fw-bold);
  padding: 8px 16px; border-radius: var(--r-sm);
  border: 1px solid color-mix(in srgb, var(--danger-soft) 85%, transparent);
  background: color-mix(in srgb, var(--danger-soft) 92%, transparent); color: var(--ink-cream);
  cursor: pointer; transition: background var(--dur-1) ease, opacity var(--dur-1) ease;
}
.confirm-delete-btn:hover:not(:disabled) { background: var(--red-18); }
.confirm-delete-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* Invite form */
.admin-invite-form {
  margin-top: 10px;
  padding: 16px;
  background: var(--sep-card-fill);
  border: 1px dashed var(--card-border);
  border-radius: var(--r-md);
  display: flex; flex-direction: column; gap: 8px;
}
.admin-invite-eyebrow { font-size: var(--fs-10); letter-spacing: var(--track-18); font-weight: var(--fw-bold); color: var(--ink-muted); text-transform: uppercase; }
.admin-invite-grid {
  display: grid; grid-template-columns: 1.6fr 1.4fr 130px 130px; gap: 10px; align-items: center;
}
.admin-invite-help { font-size: var(--fs-11); color: var(--ink-muted); font-style: italic; }
/* v07zz50 — Project access chips on the invite form. Multi-select via
   clicking; tick mark appears when a project is selected. Gold accent
   when active to match the project switcher's active state. */
.admin-invite-projects {
  display: flex; flex-direction: column; gap: 6px;
  padding: 4px 0 2px;
}
.admin-invite-projects-label {
  font-size: var(--fs-11); letter-spacing: var(--track-06); font-weight: var(--fw-semi);
  color: var(--ink-muted);
  text-transform: uppercase;
}
.admin-invite-projects-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.admin-invite-project-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 11px; font: inherit; font-size: var(--fs-11-5); font-weight: var(--fw-med);
  border-radius: var(--r-round);
  border: 1px solid color-mix(in srgb, var(--taupe-5) 35%, transparent);
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.admin-invite-project-chip:hover {
  background: color-mix(in srgb, color-mix(in srgb, var(--gold-3) 77%, var(--mix-dark)) 10%, transparent);
  border-color: color-mix(in srgb, color-mix(in srgb, var(--gold-3) 77%, var(--mix-dark)) 55%, transparent);
}
.admin-invite-project-chip.is-on {
  background: linear-gradient(120deg, color-mix(in srgb, color-mix(in srgb, var(--gold) 96%, var(--mix-light)) 95%, transparent), color-mix(in srgb, var(--gold-17) 85%, transparent));
  border-color: color-mix(in srgb, color-mix(in srgb, var(--gold-14) 88%, var(--mix-dark)) 85%, transparent);
  color: color-mix(in srgb, var(--ink-deep-2) 68%, var(--mix-dark));
  font-weight: var(--fw-semi);
}
.admin-invite-project-tick {
  font-size: var(--fs-10); line-height: 1;
}
.admin-invite-result {
  padding: 12px 14px;
  background: color-mix(in srgb, var(--ok) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--olive-2) 45%, transparent);
  border-radius: var(--r-panel);
  font-size: var(--fs-12-5); color: var(--ink-forest-2);
  display: flex; flex-direction: column; gap: 6px; position: relative;
}
.admin-invite-result code { font-family: var(--font-mono); font-size: var(--fs-13); background: color-mix(in srgb, var(--cream) 65%, transparent); padding: 2px 6px; border-radius: 4px; color: var(--ink); }
.admin-invite-dismiss {
  position: absolute; top: 8px; right: 10px;
  background: transparent; border: none; cursor: pointer;
  font-size: var(--fs-11); color: var(--ink-muted); font-weight: var(--fw-semi);
}
.admin-invite-dismiss:hover { color: var(--ink); }

/* 24 Sep 2026 - Project Memberships: each project's block is a row, one step lighter than its panel. The fill
   reaches 12px past each side as a spread shadow (the block has no side padding: its text sits on the edge). */
.proj-members-block { background: var(--sep-row-fill); box-shadow: -12px 0 0 var(--sep-row-fill), 12px 0 0 var(--sep-row-fill); }

/* Permissions matrix */
.admin-matrix {
  display: grid;
  gap: 4px;
  margin-top: 6px;
}
.admin-matrix-cell {
  padding: 12px 10px;
  font-size: var(--fs-12);
  background: var(--sep-row-fill);
  border: 1px solid var(--card-border);
  border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  font-feature-settings: var(--tnum);
}
.admin-matrix-head {
  font-size: var(--fs-10); letter-spacing: var(--track-16); font-weight: var(--fw-bold); text-transform: uppercase;
  background: color-mix(in srgb, color-mix(in srgb, var(--tan-deep) 97%, var(--mix-light)) 12%, transparent);
  color: var(--ink);
}
.admin-matrix-head--corner { background: transparent; border-color: transparent; justify-content: flex-start; padding-left: 14px; }
.admin-matrix-head--admin      { background: color-mix(in srgb, var(--role-admin) 18%, transparent);  color: color-mix(in srgb, var(--role-admin) 60%, var(--ink)); border-color: color-mix(in srgb, var(--role-admin) 45%, transparent); }
.admin-matrix-head--producer   { background: color-mix(in srgb, var(--leaf) 18%, transparent); color: var(--ink-forest-2); border-color: color-mix(in srgb, var(--olive-2) 45%, transparent); }
.admin-matrix-head--supervisor { background: color-mix(in srgb, var(--gold-16) 20%, transparent); color: color-mix(in srgb, var(--ink-tan-deep) 81%, var(--mix-dark)); border-color: color-mix(in srgb, var(--gold-6) 45%, transparent); }
.admin-matrix-head--director   { background: color-mix(in srgb, var(--role-director) 20%, transparent); color: color-mix(in srgb, var(--role-director) 60%, var(--ink)); border-color: color-mix(in srgb, color-mix(in srgb, var(--role-director) 75%, var(--mix-dark)) 45%, transparent); }
.admin-matrix-head--lead       { background: color-mix(in srgb, var(--role-lead) 20%, transparent); color: color-mix(in srgb, var(--role-lead) 60%, var(--ink)); border-color: color-mix(in srgb, color-mix(in srgb, var(--role-lead) 75%, var(--mix-dark)) 45%, transparent); }
.admin-matrix-head--artist     { background: color-mix(in srgb, var(--role-artist) 20%, transparent); color: color-mix(in srgb, var(--role-artist) 60%, var(--ink)); border-color: color-mix(in srgb, color-mix(in srgb, var(--role-artist) 75%, var(--mix-dark)) 45%, transparent); }
.admin-matrix-head--reviewer   { background: color-mix(in srgb, var(--role-reviewer) 18%, transparent); color: color-mix(in srgb, var(--role-reviewer) 60%, var(--ink)); border-color: color-mix(in srgb, var(--taupe-5) 45%, transparent); }
.admin-matrix-head--tester     { background: color-mix(in srgb, var(--gold-12) 22%, transparent);  color: color-mix(in srgb, var(--ink-tan-deep) 67%, var(--mix-dark)); border-color: color-mix(in srgb, color-mix(in srgb, var(--gold) 94%, var(--mix-dark)) 45%, transparent); }
.admin-matrix-head--editor     { background: color-mix(in srgb, var(--role-editor) 20%, transparent); color: color-mix(in srgb, var(--role-editor) 60%, var(--ink)); border-color: color-mix(in srgb, color-mix(in srgb, var(--role-editor) 75%, var(--mix-dark)) 45%, transparent); }

/* v06p — Deployment diagnostic panel. Green / amber / red banner
   with blocker + warning list, plus a stat strip + dot row for
   integrations. Sits at the top of the Admin page. */
.admin-diag { padding-bottom: 18px; }
.admin-diag-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--r-panel);
  border: 1px solid;
}
.admin-diag-banner--ok      { background: color-mix(in srgb, var(--ok) 14%, transparent); border-color: color-mix(in srgb, var(--olive-2) 55%, transparent); }
.admin-diag-banner--warn    { background: color-mix(in srgb, var(--gold-16) 16%, transparent); border-color: color-mix(in srgb, var(--gold-6) 55%, transparent); }
.admin-diag-banner--blocker { background: color-mix(in srgb, var(--danger-soft) 14%, transparent); border-color: color-mix(in srgb, var(--danger-soft) 65%, transparent); }
.admin-diag-banner-icon {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: var(--fs-18);
  font-weight: var(--fw-heavy);
  color: var(--ink-cream);
}
.admin-diag-banner--ok .admin-diag-banner-icon      { background: color-mix(in srgb, var(--olive-2) 88%, transparent); }
.admin-diag-banner--warn .admin-diag-banner-icon    { background: color-mix(in srgb, var(--gold-6) 88%, transparent); }
.admin-diag-banner--blocker .admin-diag-banner-icon { background: color-mix(in srgb, var(--danger-soft) 88%, transparent); }
.admin-diag-banner-text { flex: 1; min-width: 0; }
.admin-diag-banner-title {
  font-family: var(--font-display), sans-serif;
  font-size: var(--fs-18);
  letter-spacing: var(--track-02);
  color: var(--ink);
}
.admin-diag-banner-sub {
  font-size: var(--fs-12);
  color: var(--ink-muted);
  margin-top: 2px;
}
.admin-diag-refresh {
  font: inherit;
  font-size: var(--fs-11);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-06);
  padding: 6px 12px;
  border-radius: var(--r-round);
  border: 1px solid var(--card-border);
  background: color-mix(in srgb, var(--cream) 85%, transparent);
  color: var(--ink);
  cursor: pointer;
  flex-shrink: 0;
}
.admin-diag-refresh:hover { background: var(--cream); }

.admin-diag-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.admin-diag-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  font-size: var(--fs-12-5);
  line-height: 1.45;
}
.admin-diag-item--blocker {
  background: color-mix(in srgb, var(--danger-soft) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger-soft) 40%, transparent);
  color: var(--ink);
}
.admin-diag-item--warn {
  background: color-mix(in srgb, var(--gold-16) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold-6) 40%, transparent);
  color: var(--ink);
}
.admin-diag-item-ico {
  flex-shrink: 0;
  width: 18px; height: 18px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: var(--fs-11);
  font-weight: var(--fw-heavy);
  color: var(--ink-cream);
}
.admin-diag-item--blocker .admin-diag-item-ico { background: color-mix(in srgb, var(--danger-soft) 85%, transparent); }
.admin-diag-item--warn .admin-diag-item-ico    { background: color-mix(in srgb, var(--gold-6) 85%, transparent); }

.admin-diag-stats {
  display: flex;
  gap: 24px;
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: var(--r-panel);
  background: color-mix(in srgb, var(--cream-2) 65%, transparent);
  border: 1px solid color-mix(in srgb, var(--card-border) 45%, transparent);
  flex-wrap: wrap;
}
.admin-diag-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.admin-diag-stat-num {
  font-family: var(--font-display), sans-serif;
  font-size: var(--fs-26);
  color: var(--ink);
  line-height: 1;
}
.admin-diag-stat-cap {
  font-size: var(--fs-9-5);
  letter-spacing: var(--track-14);
  color: var(--ink-muted);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
}
.admin-diag-stat--env { margin-left: auto; align-items: flex-end; }
.admin-diag-stat-env  { font-size: var(--fs-12); color: var(--ink); margin-top: 2px; }
.admin-diag-stat-env strong { color: var(--accent, var(--olive-5)); text-transform: uppercase; letter-spacing: var(--track-04); font-size: var(--fs-11); }
.admin-diag-runtime { display: block; font-size: var(--fs-10-5); color: var(--ink-muted); margin-top: 1px; font-style: italic; }

.admin-diag-integrations {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 10px;
  padding: 10px 12px;
  border-top: 1px dashed color-mix(in srgb, var(--tan-deep) 30%, transparent);
}
.admin-diag-intg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--fs-11-5);
  color: var(--ink);
  cursor: help;
}
.admin-diag-intg-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.admin-diag-intg--ok   .admin-diag-intg-dot { background: color-mix(in srgb, var(--olive-2) 95%, transparent);  box-shadow: 0 0 0 2px color-mix(in srgb, var(--olive-2) 25%, transparent); }
.admin-diag-intg--warn .admin-diag-intg-dot { background: color-mix(in srgb, var(--gold-6) 95%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold-6) 25%, transparent); }
.admin-diag-intg--off  .admin-diag-intg-dot { background: color-mix(in srgb, var(--st-pending) 65%, transparent); }
.admin-diag-intg--ok   .admin-diag-intg-label { color: var(--ink); }
.admin-diag-intg--off  .admin-diag-intg-label { color: var(--ink-muted); }

/* v07zz — API STATUS panel: live per-provider health + in-flight gen jobs.
   ok = green, warn/down = red, not-configured = grey; jobs go green →
   amber (slow, >500s) → red (hung, >watchdog). */
.api-status .api-status-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.api-status-summary { font-size: var(--fs-12); font-weight: var(--fw-bold); letter-spacing: var(--track-04); padding: 3px 10px; border-radius: var(--r-round); }
.api-status-summary--ok   { color: color-mix(in srgb, var(--ink-forest-5) 90%, var(--mix-dark)); background: color-mix(in srgb, var(--olive-2) 16%, transparent);  border: 1px solid color-mix(in srgb, var(--olive-2) 40%, transparent); }
.api-status-summary--warn { color: color-mix(in srgb, var(--ink-tan-deep) 83%, var(--mix-dark)); background: color-mix(in srgb, var(--gold-6) 16%, transparent); border: 1px solid color-mix(in srgb, var(--gold-6) 45%, transparent); }
.api-status-checked { font-size: var(--fs-10-5); color: var(--ink-muted); font-style: italic; }
.api-status .admin-diag-refresh { margin-left: auto; }

.api-status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; margin-bottom: 14px; }
@media (max-width: 760px) { .api-status-grid { grid-template-columns: 1fr; } }
.api-status-row { display: flex; align-items: center; gap: 9px; padding: 7px 4px; border-bottom: 1px solid color-mix(in srgb, var(--tan-deep) 12%, transparent); min-width: 0; }
.api-status-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.api-status-row--ok   .api-status-dot { background: color-mix(in srgb, var(--olive-2) 95%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--olive-2) 22%, transparent); }
.api-status-row--warn .api-status-dot { background: color-mix(in srgb, var(--danger-soft) 95%, transparent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger-soft) 22%, transparent); }
.api-status-row--off  .api-status-dot { background: color-mix(in srgb, var(--st-pending) 60%, transparent); }
.api-status-name { font-size: var(--fs-12-5); font-weight: var(--fw-semi); color: var(--ink); white-space: nowrap; }
.api-status-row--off .api-status-name { color: var(--ink-muted); }
.api-status-detail { margin-left: auto; font-size: var(--fs-11); color: var(--ink-muted); font-family: monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55%; }

.api-status-jobs-head { font-size: var(--fs-11); font-weight: var(--fw-bold); letter-spacing: var(--track-12); color: var(--ink-muted); text-transform: uppercase; border-top: 1px dashed color-mix(in srgb, var(--tan-deep) 30%, transparent); padding-top: 10px; margin-bottom: 8px; }
.api-status-jobs { display: flex; flex-direction: column; gap: 6px; min-height: 44px; }
.api-status-jobs-empty { font-size: var(--fs-12); color: var(--ink-muted); font-style: italic; padding: 10px 4px; }
.api-status-job { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-9); background: color-mix(in srgb, var(--olive-2) 7%, transparent); border: 1px solid color-mix(in srgb, var(--olive-2) 20%, transparent); }
.api-status-job--slow { background: color-mix(in srgb, var(--gold-6) 10%, transparent); border-color: color-mix(in srgb, var(--gold-6) 40%, transparent); }
.api-status-job--hung { background: color-mix(in srgb, var(--danger-soft) 12%, transparent);  border-color: var(--danger-border); }
.api-status-job-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: color-mix(in srgb, var(--olive-2) 95%, transparent); }
.api-status-job--slow .api-status-job-dot { background: color-mix(in srgb, var(--gold-6) 95%, transparent); }
.api-status-job--hung .api-status-job-dot { background: color-mix(in srgb, var(--danger-soft) 95%, transparent); }
.api-status-job-label { font-size: var(--fs-12-5); font-weight: var(--fw-bold); color: var(--ink); text-transform: capitalize; white-space: nowrap; }
.api-status-job-model { font-size: var(--fs-11); color: var(--ink-muted); white-space: nowrap; }
.api-status-job-time { font-size: var(--fs-11); color: var(--ink); font-family: monospace; white-space: nowrap; }
.api-status-job-bar { flex: 1 1 80px; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--tan-deep) 18%, transparent); overflow: hidden; min-width: 60px; }
.api-status-job-fill { display: block; height: 100%; background: color-mix(in srgb, var(--olive-2) 85%, transparent); border-radius: 3px; transition: width 0.4s ease; }
.api-status-job--slow .api-status-job-fill { background: color-mix(in srgb, var(--gold-6) 90%, transparent); }
.api-status-job--hung .api-status-job-fill { background: color-mix(in srgb, var(--danger-soft) 90%, transparent); }
.api-status-job-kill { margin-left: auto; flex-shrink: 0; font-size: var(--fs-11); font-weight: var(--fw-semi); padding: 4px 12px; border-radius: var(--r-7); border: 1px solid var(--danger-border); background: color-mix(in srgb, var(--danger-soft) 8%, transparent); color: var(--red-6); cursor: pointer; }
.api-status-job-kill:hover { background: color-mix(in srgb, var(--danger-soft) 18%, transparent); }
.api-status-job-confirm { margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-11); color: var(--red-6); }
.api-status-job-confirm .api-kill-yes, .api-status-job-confirm .api-kill-no { font-size: var(--fs-11); font-weight: var(--fw-semi); padding: 3px 10px; border-radius: var(--r-xs); cursor: pointer; }
.api-status-job-confirm .api-kill-yes { border: 1px solid color-mix(in srgb, var(--danger-soft) 55%, transparent); background: color-mix(in srgb, var(--danger-soft) 16%, transparent); color: var(--red-6); }
.api-status-job-confirm .api-kill-no  { border: 1px solid color-mix(in srgb, var(--tan-deep) 30%, transparent); background: color-mix(in srgb, var(--cream) 60%, transparent); color: var(--ink); }

.admin-matrix-rowhead {
  justify-content: flex-start;
  padding-left: 14px;
  font-weight: var(--fw-semi); color: var(--ink);
  background: var(--sep-row-fill);
  font-size: var(--fs-12); letter-spacing: 0;
  text-transform: none;
}
.admin-matrix-rowhead.is-hover { background: color-mix(in srgb, var(--hi) 95%, transparent); }
.admin-matrix-toggle {
  cursor: pointer;
  user-select: none;
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  color: var(--ink-muted);
  transition: background var(--dur-1) ease, color var(--dur-1) ease, transform var(--dur-1) ease;
}
/* 24 Sep 2026 - Hugo: "the checkboxes for the permissions should be solid so it's a lot clearer". A granted cell is
   a solid fill with a high-contrast tick (4.5:1 or more); a denied cell keeps the quiet row surface and its muted dash.
   Paint only: the same cell, the same size. */
.admin-matrix-toggle.is-on { background: var(--check-on-fill); border-color: var(--check-on-fill); color: var(--check-on-ink); }
.admin-matrix-toggle.is-on.is-hover { background: color-mix(in srgb, var(--leaf) 35%, transparent); }
.admin-matrix-toggle:not(.is-on).is-hover { background: color-mix(in srgb, var(--danger-soft-2) 12%, transparent); }
.admin-matrix-toggle:hover { transform: scale(1.04); }
.admin-matrix-toggle.is-locked { cursor: not-allowed; opacity: 0.7; }
.admin-matrix-toggle.is-locked:hover { transform: none; }
/* v06p — Floating tooltip rather than appended block — sits over
   the matrix without pushing rows around. Positioned absolutely
   relative to its parent (.admin-matrix-wrap) and follows the
   row header on hover via inline `top`/`left` set in JSX. */
.admin-matrix-wrap { position: relative; }
.admin-matrix-preview {
  position: absolute;
  z-index: 50;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--shade-35) 94%, transparent);
  color: var(--ink-cream);
  border: 1px solid color-mix(in srgb, var(--cream) 18%, transparent);
  border-radius: var(--r-sm);
  font-size: var(--fs-11-5);
  line-height: 1.5;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--shade) 30%, transparent);
  pointer-events: none;
  max-width: 360px;
  white-space: normal;
  backdrop-filter: blur(var(--blur-scrim-6));
}
.admin-matrix-preview strong { color: color-mix(in srgb, var(--gold-13) 71%, var(--mix-light)); }
.admin-matrix-preview em { color: color-mix(in srgb, var(--ink-cream) 55%, transparent); font-style: italic; }

/* v06p — Permission category headers + collapse affordance. Each
   category title spans the full matrix width with a coloured
   underline so the eye reads vertical grouping. Click to toggle
   visibility of the whole category's rows. */
.admin-matrix-category {
  grid-column: 1 / -1;
  margin: 14px 0 2px;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: color-mix(in srgb, var(--tan-deep) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--tan-deep) 18%, transparent);
  border-radius: var(--r-sm);
  cursor: pointer;
  user-select: none;
}
.admin-matrix-category:first-child { margin-top: 0; }
.admin-matrix-category:hover { background: color-mix(in srgb, var(--tan-deep) 16%, transparent); }
.admin-matrix-category-title {
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-16);
  color: var(--ink);
  text-transform: uppercase;
}
.admin-matrix-category-meta {
  font-size: var(--fs-10-5);
  color: var(--ink-muted);
  font-family: var(--font-mono);
}
.admin-matrix-category-chev {
  font-size: var(--fs-12);
  color: var(--ink-muted);
  margin-left: 8px;
  transition: transform var(--dur-2) ease;
}
.admin-matrix-category.is-collapsed .admin-matrix-category-chev {
  transform: rotate(-90deg);
}

/* v06p — "See as" persona switcher in the avatar menu. The
   selected role gets a gold pip; clicking another swaps the
   global persona via window.__setSeeAs(). */
.ph-menu-see-as.is-active {
  color: var(--gold-12);
  font-weight: var(--fw-bold);
}
.ph-menu-see-as.is-active .ph-menu-ico {
  color: var(--gold-12);
}
/* v06p — Removed the giant sidebar-stretching gold banner. The
   indicator is now a small pill anchored under the avatar (see
   .ph-seeing-as-pill below). */
.see-as-banner { display: none; }

/* v06p — Compact "Viewing as <Role>" pill that floats just below
   the avatar button when an impersonation is active. Click to
   stop impersonating. */
.ph-avatar.is-impersonating {
  outline: 2px solid var(--gold-12);
  outline-offset: 1px;
}
.ph-seeing-as-pill {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 10px;
  border-radius: var(--r-round);
  border: 1px solid var(--gold-12);
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold-13) 94%, var(--mix-light)) 0%, color-mix(in srgb, var(--gold-3) 91%, var(--mix-dark)) 50%, color-mix(in srgb, var(--gold) 94%, var(--mix-dark)) 100%);
  color: var(--ink-deep-2);
  font: inherit;
  font-size: var(--fs-10-5);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-06);
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    0 2px 6px color-mix(in srgb, color-mix(in srgb, var(--shadow-ink-2) 90%, var(--mix-dark)) 30%, transparent);
  transition: transform var(--dur-1) ease, box-shadow var(--dur-1) ease;
}
.ph-seeing-as-pill:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 4px 10px color-mix(in srgb, color-mix(in srgb, var(--shadow-ink-2) 90%, var(--mix-dark)) 40%, transparent);
}
.ph-seeing-as-eye { font-size: var(--fs-12); line-height: 1; }
.ph-seeing-as-label { letter-spacing: var(--track-04); }
.ph-seeing-as-x {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--shadow-ink) 18%, transparent);
  color: var(--ink-deep-2);
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  line-height: 1;
  margin-left: 2px;
}
.ph-seeing-as-pill:hover .ph-seeing-as-x {
  background: color-mix(in srgb, var(--shadow-ink) 32%, transparent);
}

/* v06p — Integration cards are clickable; opens a configure
   modal. The grid expands to 4 columns to include a "Configure"
   affordance at the right. */
.admin-integration { cursor: pointer; transition: border-color var(--dur-1) ease, background var(--dur-1) ease; }
.admin-integration:hover { background: var(--sep-row-fill-hover); border-color: color-mix(in srgb, var(--tan-deep) 55%, transparent); }
.admin-integration-configure {
  font: inherit;
  font-size: var(--fs-11);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-04);
  padding: 5px 12px;
  border-radius: var(--r-round);
  background: transparent;
  border: 1px solid var(--card-border);
  color: var(--ink);
  cursor: pointer;
}
.admin-integration-configure:hover { background: color-mix(in srgb, var(--leaf) 18%, transparent); }

/* Modal for configuring an integration. */
.intg-modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.40);
  backdrop-filter: blur(var(--blur-scrim-3));
  display: grid;
  place-items: center;
  z-index: var(--z-dropdown);
  padding: 32px;
  animation: fadeIn var(--dur-3) ease;
}
.intg-modal {
  background: color-mix(in srgb, var(--cream-2) 97%, transparent);
  border: 1px solid color-mix(in srgb, var(--card-border) 55%, transparent);
  border-radius: var(--r-card);
  padding: 22px 26px 18px;
  width: 100%;
  max-width: 520px;
  box-shadow:
    0 6px 18px color-mix(in srgb, var(--shadow-ink) 20%, transparent),
    0 18px 40px color-mix(in srgb, var(--shade) 30%, transparent);
}
.intg-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.intg-modal-title {
  font-family: var(--font-display), sans-serif;
  font-size: var(--fs-22);
  letter-spacing: var(--track-02);
  color: var(--ink);
}
.intg-modal-close {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--tan-deep) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--tan-deep) 22%, transparent);
  color: var(--ink-muted);
  cursor: pointer;
  display: grid; place-items: center;
}
.intg-modal-close:hover { color: var(--ink); background: color-mix(in srgb, var(--tan-deep) 22%, transparent); }
.intg-modal-sub {
  font-size: var(--fs-12-5);
  color: var(--ink-muted);
  line-height: 1.5;
  margin-bottom: 16px;
}
.intg-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}
.intg-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);
}
.intg-field-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.intg-field-status {
  font-size: var(--fs-11-5);
  font-weight: var(--fw-semi);
  padding: 3px 9px;
  border-radius: var(--r-round);
  white-space: nowrap;
}
.intg-field-status.is-set {
  background: color-mix(in srgb, var(--ok) 22%, transparent);
  color: var(--ink-forest-5);
  border: 1px solid color-mix(in srgb, var(--ok) 55%, transparent);
}
.intg-field-status.is-unset {
  background: color-mix(in srgb, var(--danger-soft) 16%, transparent);
  color: var(--danger);
  border: 1px solid var(--danger-border);
}
.intg-field-input {
  flex: 1 1 0;
  font: inherit;
  font-family: var(--font-mono);
  font-size: var(--fs-12-5);
  padding: 7px 10px;
  border-radius: var(--r-xs);
  border: 1px solid var(--card-border);
  background: color-mix(in srgb, var(--cream) 95%, transparent);
  color: var(--ink);
  letter-spacing: var(--track-01);
}
.intg-field-input:focus {
  outline: 2px solid color-mix(in srgb, var(--leaf) 55%, transparent);
  outline-offset: 1px;
}
.intg-field-help {
  font-size: var(--fs-11);
  color: var(--ink-muted);
  font-style: italic;
  margin-top: 2px;
}
.intg-modal-security {
  margin: 10px 0 16px;
  padding: 10px 12px;
  background: color-mix(in srgb, color-mix(in srgb, var(--nav-active) 94%, var(--mix-light)) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--gold-15) 45%, transparent);
  border-radius: var(--r-sm);
  font-size: var(--fs-11-5);
  color: var(--ink);
  line-height: 1.55;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.intg-modal-security-ico {
  flex-shrink: 0;
  font-size: var(--fs-16);
  line-height: 1;
}
.intg-modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
/* v06p — Section blocks inside the Google Calendar configure
   custom view. One for ICS, one for OAuth, with an "or" divider
   between them. */
.intg-section {
  margin: 8px 0 4px;
  padding: 12px 14px;
  border-radius: var(--r-panel);
  background: color-mix(in srgb, var(--cream-2) 55%, transparent);
  border: 1px solid color-mix(in srgb, var(--card-border) 45%, transparent);
}
.intg-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.intg-section-title {
  font-size: var(--fs-10-5);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-16);
  text-transform: uppercase;
  color: var(--ink);
}
.intg-section-help {
  font-size: var(--fs-11-5);
  color: var(--ink-muted);
  line-height: 1.55;
}
.intg-section-help a {
  color: var(--accent, var(--olive-5));
  text-decoration: underline;
}
.intg-section-help code {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  background: color-mix(in srgb, var(--tan-deep) 10%, transparent);
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--ink);
}
.intg-divider {
  display: flex;
  align-items: center;
  margin: 12px 0;
  color: var(--ink-muted);
  font-size: var(--fs-10-5);
  letter-spacing: var(--track-16);
  text-transform: uppercase;
  font-weight: var(--fw-bold);
}
.intg-divider::before,
.intg-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: color-mix(in srgb, var(--tan-deep) 25%, transparent);
}
.intg-divider span {
  padding: 0 12px;
}
.intg-btn-primary,
.intg-btn-ghost {
  font: inherit;
  font-size: var(--fs-12);
  font-weight: var(--fw-semi);
  letter-spacing: var(--track-04);
  padding: 7px 14px;
  border-radius: var(--r-7);
  cursor: pointer;
}
.intg-btn-primary {
  background: color-mix(in srgb, var(--leaf) 88%, transparent);
  border: 1px solid color-mix(in srgb, var(--olive-2) 95%, transparent);
  color: var(--ink-cream);
}
.intg-btn-primary:hover:not(:disabled) { background: var(--olive-2); }
.intg-btn-primary:disabled { opacity: 0.50; cursor: not-allowed; }
.intg-btn-ghost {
  background: transparent;
  border: 1px solid var(--card-border);
  color: var(--ink-muted);
}
.intg-btn-ghost:hover { background: color-mix(in srgb, var(--cream-2) 85%, transparent); color: var(--ink); }

/* Integrations card */
.admin-integrations { display: flex; flex-direction: column; gap: 8px; }
.admin-integration {
  display: grid;
  grid-template-columns: 28px 1fr 120px;
  gap: 14px; align-items: center;
  padding: 12px 14px;
  background: var(--sep-row-fill);
  border: 1px solid var(--card-border);
  border-radius: var(--r-panel);
}
.admin-integration-icon {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: var(--fs-14); font-weight: var(--fw-bold);
  font-family: var(--font-body);
}
.admin-integration--ok   .admin-integration-icon { background: color-mix(in srgb, var(--ok) 30%, transparent); color: var(--ink-forest-2); }
.admin-integration--warn .admin-integration-icon { background: color-mix(in srgb, var(--gold-16) 32%, transparent); color: color-mix(in srgb, var(--ink-tan-deep) 81%, var(--mix-dark)); }
.admin-integration--off  .admin-integration-icon { background: color-mix(in srgb, var(--danger-soft-2) 25%, transparent);  color: var(--danger-ink); }
.admin-integration--info .admin-integration-icon { background: color-mix(in srgb, var(--blue-22) 25%, transparent); color: var(--ink-blue-21); }
.admin-integration-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.admin-integration-label { font-size: var(--fs-13); font-weight: var(--fw-semi); color: var(--ink); }
.admin-integration-detail { font-size: var(--fs-11-5); color: var(--ink-muted); }
.admin-integration-pill {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px 10px; border-radius: var(--r-round);
  font-size: var(--fs-9-5); font-weight: var(--fw-bold); letter-spacing: var(--track-14); text-transform: uppercase;
  border: 1px solid;
}
.admin-integration-pill--ok   { background: color-mix(in srgb, var(--ok) 18%, transparent); border-color: color-mix(in srgb, var(--olive-2) 55%, transparent); color: var(--ink-forest-2); }
.admin-integration-pill--warn { background: color-mix(in srgb, var(--gold-16) 20%, transparent); border-color: color-mix(in srgb, var(--gold-6) 55%, transparent); color: color-mix(in srgb, var(--ink-tan-deep) 81%, var(--mix-dark)); }
.admin-integration-pill--off  { background: color-mix(in srgb, var(--danger-soft-2) 18%, transparent);  border-color: color-mix(in srgb, var(--danger-soft-2) 55%, transparent);  color: var(--danger-ink); }
.admin-integration-help { font-size: var(--fs-11-5); color: var(--ink-muted); margin-top: 6px; }
.admin-integration-help a { color: var(--leaf); text-decoration: underline; cursor: pointer; }
/* 23 Sep 2026 — per-project integrations (AdminIntegrationsCard / ProjectIntegrationDialog):
   where the keys live, the two groups, and the provider links + steps in the dialog. */
.pintg-host {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--r-round);
  font-size: var(--fs-9-5); font-weight: var(--fw-bold); letter-spacing: var(--track-14); text-transform: uppercase;
  border: 1px solid color-mix(in srgb, var(--blue-22) 55%, transparent);
  background: color-mix(in srgb, var(--blue-22) 16%, transparent); color: var(--ink-blue-21);
}
.pintg-host--railway {
  border-color: color-mix(in srgb, var(--gold-6) 55%, transparent);
  background: color-mix(in srgb, var(--gold-16) 20%, transparent);
  color: color-mix(in srgb, var(--ink-tan-deep) 81%, var(--mix-dark));
}
.pintg-note { font-size: var(--fs-11-5); color: var(--ink-muted); line-height: 1.5; margin: 0 0 10px; }
.pintg-group {
  font-size: var(--fs-10-5); font-weight: var(--fw-bold); letter-spacing: var(--track-16);
  text-transform: uppercase; color: var(--ink-muted); margin: 12px 0 6px;
}
.admin-integration.is-locked { cursor: default; }
.admin-integration-configure:disabled { opacity: 0.55; cursor: not-allowed; }
.pintg-status { margin-bottom: 8px; }
.pintg-status-text { font-size: var(--fs-12); color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.pintg-links { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 8px; }
.pintg-link { text-decoration: none; }
.pintg-steps { margin: 0 0 0 18px; padding: 0; font-size: var(--fs-11-5); color: var(--ink-muted); line-height: 1.55; }
.pintg-field { margin-top: 12px; }
.pintg-clear { min-height: 34px; display: flex; align-items: center; margin-bottom: 4px; }
.pintg-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--fs-12); color: var(--ink); }
.pintg-msg { min-height: 18px; font-size: var(--fs-11-5); color: var(--ink-muted); margin: 4px 0 8px; }
.pintg-msg.is-error { color: var(--danger); }
.pintg-actions { margin-top: 4px; }

/* ─────────────────────────── v05a — Help & Docs page ────────────────────── */
.help-view { display: flex; flex-direction: column; gap: 22px; }
.help-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 22px;
  align-items: flex-start;
}
.help-nav {
  position: sticky;
  top: 80px;
  padding: 16px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.help-nav-eyebrow {
  font-size: var(--fs-9-5); letter-spacing: 0.20em; font-weight: var(--fw-bold);
  color: var(--ink-muted); text-transform: uppercase;
  padding: 4px 10px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--card-border) 30%, transparent);
  margin-bottom: 4px;
}
.help-nav-item {
  background: transparent;
  border: none;
  text-align: left;
  font: inherit;
  font-size: var(--fs-13);
  font-weight: var(--fw-med);
  color: var(--ink);
  padding: 9px 12px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--dur-0) ease, color var(--dur-0) ease;
}
.help-nav-item:hover { background: color-mix(in srgb, var(--hi) 45%, transparent); }
.help-nav-item.is-active {
  background: color-mix(in srgb, var(--leaf) 18%, transparent);
  color: var(--ink-forest-2);
  font-weight: var(--fw-semi);
}
.help-nav-foot {
  margin-top: 10px;
  padding: 10px 12px;
  font-size: var(--fs-11-5);
  color: var(--ink-muted);
  border-top: 1px solid color-mix(in srgb, var(--card-border) 30%, transparent);
  line-height: 1.5;
}
.help-nav-foot a { color: var(--leaf); text-decoration: underline; cursor: pointer; }

.help-content {
  padding: 28px 36px 32px;
  display: flex; flex-direction: column; gap: 28px;
  font-size: var(--fs-14);
  line-height: 1.6;
  color: var(--ink);
  min-width: 0;
}
.help-section { display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 80px; }
.help-section + .help-section { padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--card-border) 30%, transparent); }
.help-h {
  font-family: var(--font-display);
  font-size: var(--fs-28);
  font-weight: var(--fw-med);
  color: var(--ink);
  margin: 0;
  letter-spacing: var(--track-005);
}
.help-h3 {
  font-size: var(--fs-15);
  font-weight: var(--fw-bold);
  color: var(--ink);
  margin: 8px 0 2px;
  letter-spacing: var(--track-01);
}
.help-content p { margin: 0; }
.help-list {
  margin: 0;
  padding-left: 22px;
  display: flex; flex-direction: column; gap: 6px;
}
.help-list li { line-height: 1.55; }
.help-checklist { list-style: none; padding-left: 0; }
.help-checklist li {
  position: relative;
  padding-left: 26px;
  line-height: 1.55;
}
.help-checklist li::before {
  content: "\25CB";
  position: absolute; left: 0; top: 0;
  font-weight: var(--fw-bold);
  color: var(--leaf);
  font-size: var(--fs-14);
}
.help-content code {
  font-family: var(--font-mono);
  font-size: var(--fs-12-5);
  background: color-mix(in srgb, color-mix(in srgb, var(--tan-deep) 97%, var(--mix-light)) 10%, transparent);
  border: 1px solid color-mix(in srgb, color-mix(in srgb, var(--tan-deep) 97%, var(--mix-light)) 15%, transparent);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--ink);
}
.help-content kbd {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  padding: 2px 6px;
  background: color-mix(in srgb, var(--cream) 85%, transparent);
  border: 1px solid var(--card-border);
  border-bottom-width: 2px;
  border-radius: 4px;
  color: var(--ink);
}
.help-content a {
  color: var(--leaf);
  text-decoration: underline;
  cursor: pointer;
}
.help-content a:hover { color: var(--ink-forest-2); }
.help-code {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  line-height: 1.5;
  padding: 14px 16px;
  background: color-mix(in srgb, var(--shade-34) 90%, transparent);
  color: var(--ink-cream-10);
  border-radius: var(--r-panel);
  overflow-x: auto;
  white-space: pre;
  border: 1px solid color-mix(in srgb, var(--cream-6) 15%, transparent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--hi) 10%, transparent),
    inset 0 -1px 0 rgba(0, 0, 0, 0.20);
}
@media (max-width: 980px) {
  .help-layout { grid-template-columns: 1fr; }
  .help-nav { position: relative; top: 0; }
}

/* v1081 — Settings ▸ PROJECT · PROGRESS WEIGHTS: three number boxes, then Reset / Save.
   The buttons reuse .bg-picker-btn from the background section. */
.sw-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.sw-field { display: flex; flex-direction: column; gap: 5px; }
.sw-field-label { font-size: var(--fs-12); font-weight: var(--fw-semi); color: var(--ink); }
.sw-field-box { position: relative; display: inline-flex; }
.sw-field-box input {
  width: 92px; box-sizing: border-box; padding: 8px 26px 8px 10px;
  font: inherit; font-size: var(--fs-14); color: var(--ink);
  border-radius: var(--r-sm); border: 1px solid var(--card-border);
  background: color-mix(in srgb, var(--cream) 85%, transparent);
}
.sw-field-box input:focus { outline: 2px solid color-mix(in srgb, var(--leaf) 55%, transparent); outline-offset: 1px; }
.sw-field-box input:disabled { opacity: 0.6; }
.sw-field-unit { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: var(--fs-13); color: var(--ink-muted); pointer-events: none; }
.sw-actions { display: flex; gap: 8px; margin-left: auto; }
.sw-line.is-bad { color: var(--danger); }
.sw-source { margin-top: 6px; }
/* v1090 — Settings ▸ MENU · PRESETS. Fixed sizes: picking another preset never changes the
   card's height (invariant #20). The chip row can grow a line only when you add presets. */
.mp-presets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.mp-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--r-round);
  border: 1px solid color-mix(in srgb, var(--tan-deep) 28%, transparent);
  background: transparent;
  color: var(--ink-muted);
  font: inherit;
  font-size: var(--fs-12);
  font-weight: var(--fw-semi);
  white-space: nowrap;
  cursor: pointer;
}
.mp-chip:hover { color: var(--ink); border-color: var(--ink-muted); }
.mp-chip.is-sel { color: var(--ink-forest-2); border-color: color-mix(in srgb, var(--leaf) 65%, transparent); background: color-mix(in srgb, var(--leaf) 18%, transparent); }
.mp-chip-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--tan-deep) 35%, transparent); }
.mp-chip.is-active .mp-chip-dot { background: var(--olive); border-color: var(--olive); box-shadow: 0 0 0 2px color-mix(in srgb, var(--olive) 20%, transparent); }
.mp-chip--new { border-style: dashed; }
.mp-chip:disabled { opacity: 0.5; cursor: default; }
.mp-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.mp-name {
  width: 240px;
  max-width: 100%;
  height: 32px;
  box-sizing: border-box;
  padding: 0 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--card-border);
  background: color-mix(in srgb, var(--cream) 85%, transparent);
  color: var(--ink);
  font: inherit;
  font-size: var(--fs-13);
  font-weight: var(--fw-semi);
}
.mp-name:focus { outline: 2px solid color-mix(in srgb, var(--leaf) 55%, transparent); outline-offset: 1px; }
.mp-name:disabled { opacity: 0.6; }
.mp-count { min-width: 11ch; font-size: var(--fs-12); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.mp-use { min-width: 132px; margin-left: auto; }
.mp-use.is-in-use { opacity: 1; background: color-mix(in srgb, var(--leaf) 30%, transparent); cursor: default; }
.mp-del { min-width: 156px; }
.mp-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.mp-page {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 10px;
  border-radius: var(--r-sm);
  border: 1px solid color-mix(in srgb, var(--tan-deep) 20%, transparent);
  background: color-mix(in srgb, var(--cream) 35%, transparent);
  color: var(--ink-muted);
  font: inherit;
  font-size: var(--fs-12-5);
  font-weight: var(--fw-med);
  text-align: left;
  cursor: pointer;
}
.mp-page:hover:not(:disabled) { border-color: color-mix(in srgb, var(--tan-deep) 40%, transparent); color: var(--ink); }
.mp-page.is-on { color: var(--check-on-ink); border-color: var(--check-on-fill); background: var(--check-on-fill); }   /* 24 Sep 2026: a solid "on", like the permission matrix */
.mp-page:disabled { cursor: default; }
.mp-page.is-locked { opacity: 0.75; }
.mp-page-icon { display: grid; place-items: center; width: 16px; height: 16px; flex: none; }
.mp-page-icon svg { width: 16px; height: 16px; }
.mp-page-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-page-check { width: 12px; flex: none; color: var(--olive-3); font-weight: var(--fw-bold); }
.mp-page.is-on .mp-page-check { color: var(--check-on-ink); }
.mp-page.is-on.is-locked { opacity: 1; }   /* a locked page is always on: its solid fill reads at full strength */
/* v1090b — exactly one line, the same height with or without text (it was 2px short of its
   own line-height, so "All pages" read 325px and the presets 323px), never wrapping. */
.mp-status { min-height: 1.5em; line-height: 1.5; margin: 10px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ─────────────────────── [mp] new-project intake ───────────────────────
   P2.4.2 — the template-picker → intake-chat → checklist → create flow in
   NewProjectModal (src/Views.jsx). The step body is ONE fixed height in
   every step and every pane scrolls inside it, so moving between steps —
   or toggling anything inside one — never moves the buttons (inv. #20).
   The base .np-* language (inputs, buttons, aspect pills) is reused from
   styles/views-extras.css; only what is new lives here. */

/* Compound selector on purpose: styles/views-extras.css loads AFTER this file,
   so a bare .np-modal--intake loses to its .np-modal--lg { max-width: 920px }. */
.np-modal.np-modal--intake {
  max-width: 1120px;
  /* v101 — taller (Hugo: "lets make the whole modal taller a bit. it's too short"): the
     pane below takes the room, so the chat shows far more of the conversation. */
  /* never smaller than the body's 470 px floor plus the head, steps and buttons (on a
     short screen the modal's max-height 92vh wins and the box scrolls inside) */
  height: clamp(760px, 78vh, 1040px);
  padding: 28px 32px;
  gap: 16px;
}
.npi-head { padding-right: 40px; }
/* Two lines of sub-text reserved: the four steps have different blurbs. */
.npi-sub { min-height: 34px; line-height: 1.35; }

/* ── step indicator ── */
.npi-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.npi-stepseg { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.npi-stepseg-bar {
  height: 3px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--tan-deep) 20%, transparent);
  transition: background 200ms ease;
}
.npi-stepseg.is-on .npi-stepseg-bar { background: var(--leaf); }
.npi-stepseg-label {
  font-size: var(--fs-9-5);
  letter-spacing: var(--track-14);
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.npi-stepseg.is-on .npi-stepseg-label { color: var(--ink); }

/* ── the fixed step body ── */
/* v102 — the body FILLS the modal (which has a fixed height, so every step is still the
   same size — inv. #20). It was pinned to 470 px, which is why a taller modal only added
   empty space under the buttons (Hugo: "this made no difference at all"). */
.npi-body {
  flex: 1 1 auto;
  min-height: 470px;
  overflow: hidden;
  display: flex;
}
.npi-pane { flex: 1 1 auto; min-width: 0; min-height: 0; }
.npi-pane--scroll {
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  padding-right: 6px;
}
.npi-pane--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 18px;
}
.npi-col {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 6px;
}

.npi-secthead {
  font-size: var(--fs-10-5);
  letter-spacing: var(--track-14);
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--ink-muted);
  margin-top: 2px;
}
.npi-note {
  font-size: var(--fs-11-5);
  line-height: 1.45;
  color: var(--ink-muted);
  background: color-mix(in srgb, var(--hi) 50%, transparent);
  border: 1px solid color-mix(in srgb, var(--foil) 35%, transparent);
  border-radius: var(--r-xs);
  padding: 7px 10px;
}
.npi-note--flat { background: none; border: none; padding: 0; }
.npi-note--warn {
  background: color-mix(in srgb, color-mix(in srgb, var(--gold-14) 94%, var(--mix-light)) 14%, transparent);
  border-color: color-mix(in srgb, color-mix(in srgb, var(--gold-14) 94%, var(--mix-light)) 45%, transparent);
  color: var(--ink);
}
.npi-err {
  font-size: var(--fs-11-5);
  line-height: 1.45;
  color: var(--danger-2-ink);
}
.npi-err--block {
  background: color-mix(in srgb, var(--danger-2) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger-2) 35%, transparent);
  border-radius: var(--r-xs);
  padding: 8px 10px;
}

/* ── step 1: templates + saved briefs ── */
.npi-tplgrid,
.npi-seedgrid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 8px;
}
.npi-tpl,
.npi-seed {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 11px 13px;
  border-radius: var(--r-panel);
  cursor: pointer;
  background: color-mix(in srgb, var(--hi) 40%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--foil) 30%, transparent);
  font-family: var(--font-body);
  transition: background var(--dur-0) ease, border-color var(--dur-0) ease;
}
.npi-tpl:hover,
.npi-seed:hover { background: color-mix(in srgb, var(--hi) 75%, transparent); }
.npi-tpl.is-active,
.npi-seed.is-active {
  background: color-mix(in srgb, var(--leaf) 20%, transparent);
  border-color: color-mix(in srgb, var(--leaf) 65%, transparent);
}
.npi-tpl-name,
.npi-seed-name {
  font-family: var(--font-display);
  font-size: var(--fs-15);
  color: var(--ink);
  letter-spacing: var(--track-005);
}
/* Clamped so a long description cannot make one card taller than its row. */
.npi-tpl-desc {
  font-size: var(--fs-11-5);
  line-height: 1.4;
  color: var(--ink-muted);
  min-height: 32px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.npi-seed-sub { font-size: var(--fs-11); color: var(--ink-muted); }

/* v100 — "Continue where you left off": the caller's open intake chats, same card as a
   saved brief (Hugo, mid-intake: "if i refresh, will I lose all of this?"). Forget is an
   inline two-step (✕ → Forget / Keep) in the same corner, so the card never changes size. */
.npi-resume { position: relative; padding: 0; }
.npi-resume-main {
  all: unset;
  box-sizing: border-box;
  display: flex; flex-direction: column; gap: 4px;
  width: 100%;
  padding: 11px 40px 11px 13px;
  cursor: pointer;
  font-family: var(--font-body);
}
.npi-resume-x {
  position: absolute; top: 8px; right: 8px;
  width: 20px; height: 20px; border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--tan-deep) 22%, transparent);
  background: color-mix(in srgb, var(--tan-deep) 10%, transparent);
  color: var(--ink-muted);
  font-size: var(--fs-11); line-height: 18px; padding: 0;
  cursor: pointer; display: grid; place-items: center;
}
.npi-resume-x:hover { background: color-mix(in srgb, var(--tan-deep) 22%, transparent); color: var(--ink); }
.npi-resume-confirm { position: absolute; top: 8px; right: 8px; display: inline-flex; gap: 4px; }
.npi-resume-yes, .npi-resume-no {
  font-family: var(--font-body);
  font-size: var(--fs-10-5); line-height: 16px;
  padding: 1px 8px; border-radius: var(--r-9);
  cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--danger-2) 45%, transparent);
  background: color-mix(in srgb, var(--danger-2) 12%, transparent);
  color: var(--danger-2-ink);
}
.npi-resume-no { border-color: color-mix(in srgb, var(--foil) 50%, transparent); background: color-mix(in srgb, var(--hi) 60%, transparent); color: var(--ink-muted); }

/* ── step 2: chat + the template's intake questions ── */
.npi-pane--chat {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 12px;
}
.npi-chatcol { min-width: 0; min-height: 0; display: flex; }
.npi-chatcol .agent-chat {
  flex: 1 1 auto;
  min-width: 0;
  grid-template-columns: minmax(0, 1fr) 250px;
}
.npi-qs {
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--card-border, color-mix(in srgb, var(--foil) 45%, transparent));
  border-radius: var(--r-panel);
  background: color-mix(in srgb, var(--cream-2) 55%, transparent);
  overflow: hidden;
}
.npi-qs-head {
  flex: 0 0 auto;
  padding: 9px 12px;
  font-size: var(--fs-10-5);
  letter-spacing: var(--track-12);
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--ink-muted);
  border-bottom: 1px solid color-mix(in srgb, var(--foil) 35%, transparent);
}
.npi-qs-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 9px; }
.npi-q { display: flex; gap: 8px; align-items: flex-start; }
.npi-q-n {
  flex: 0 0 auto;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--leaf) 22%, transparent);
  color: var(--ink);
  font-size: var(--fs-10);
  font-weight: var(--fw-bold);
  display: grid;
  place-items: center;
  margin-top: 1px;
}
.npi-q-t { font-size: var(--fs-11-5); line-height: 1.45; color: var(--ink); }
.npi-qs-foot {
  flex: 0 0 auto;
  padding: 8px 12px;
  border-top: 1px solid color-mix(in srgb, var(--foil) 35%, transparent);
  font-size: var(--fs-11);
  line-height: 1.4;
  color: var(--ink-muted);
  min-height: 46px;
}

/* ── step 3: the checklist ── */
/* v104 — ONE line per folder (Hugo: "Cant see everything at once, lots of scrolling"):
   the path, then its purpose in the same line, clipped with an ellipsis; tags at the
   right. A row is 26 px, so a 25-part template fits the taller modal without scrolling. */
.npi-group { display: flex; flex-direction: column; gap: 0; }
.npi-group-head {
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--ink);
  opacity: 0.75;
  padding: 6px 2px 2px;
  border-bottom: 1px solid color-mix(in srgb, var(--foil) 30%, transparent);
  margin-bottom: 2px;
}
.npi-row {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  height: 26px;
  padding: 0 6px;
  border-radius: var(--r-xs);
  cursor: pointer;
  transition: background var(--dur-0) ease;
}
.npi-row:hover { background: color-mix(in srgb, var(--hi) 55%, transparent); }
.npi-row.is-locked { cursor: default; opacity: 0.85; }
.npi-cb { margin: 0; accent-color: var(--leaf); }
.npi-row-main { min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.npi-row-path {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-11-5);
  color: var(--ink);
  white-space: nowrap;
}
.npi-row-purpose {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-10-5);
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.npi-ph { font-family: var(--font-body); font-style: italic; color: var(--ink-muted); }
.npi-row-tags { display: flex; gap: 4px; align-items: center; flex: none; }
.npi-tag {
  font-size: var(--fs-8-5);
  letter-spacing: var(--track-08);
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  padding: 1px 5px;
  border-radius: var(--r-round);
  white-space: nowrap;
}
.npi-tag--lock { background: color-mix(in srgb, var(--tan-deep) 16%, transparent); color: var(--ink-muted); }
.npi-tag--funnel { background: color-mix(in srgb, var(--leaf) 20%, transparent); color: var(--olive-9); }

.npi-customrow { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.npi-customrow .npi-input { flex: 1 1 160px; min-width: 0; }
.npi-addbtn { padding: 7px 12px; font-size: var(--fs-12); }
.npi-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 22px; align-items: center; }
.npi-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  padding: 3px 5px 3px 9px;
  border-radius: var(--r-round);
  background: color-mix(in srgb, var(--leaf) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--leaf) 40%, transparent);
  color: var(--ink);
  overflow-wrap: anywhere;
}
.npi-chip-x {
  border: none;
  background: none;
  cursor: pointer;
  color: var(--ink-muted);
  font-size: var(--fs-11);
  line-height: 1;
  padding: 2px 4px;
  border-radius: var(--r-round);
}
.npi-chip-x:hover { background: color-mix(in srgb, var(--danger-2) 18%, transparent); color: var(--danger-2-ink); }

.npi-input { padding: 7px 10px; font-size: var(--fs-12-5); }
.npi-fieldrow { grid-template-columns: 1fr 1fr; gap: 10px; }
/* v104 — name + id share a row; the folder gets a Browse… button; the six aspect buttons
   sit on ONE line (Hugo: "things spreading out to two lines"). */
/* v107 — the fields column never scrolls sideways (Hugo: "why is there a horizontal
   scroll?"): every input is border-box and no wider than its column. */
.npi-col--fields { overflow-x: hidden; }
.npi-col--fields .np-input { box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; }
.npi-folderrow { display: flex; gap: 6px; align-items: stretch; }
.npi-folderrow .npi-input { flex: 1 1 auto; min-width: 0; }
.npi-browse { flex: none; padding: 7px 12px; font-size: var(--fs-12); white-space: nowrap; }
.npi-col--fields .np-fieldset { gap: 4px; }
.npi-col--fields .np-aspect-row { gap: 4px; flex-wrap: nowrap; }
.npi-col--fields .np-aspect { padding: 5px 0; flex: 1 1 0; text-align: center; font-size: var(--fs-11); border-radius: var(--r-xs); }

/* The preview takes whatever room the fields leave: the box grows, the fields never move. */
.npi-preview {
  border: 1px solid color-mix(in srgb, var(--foil) 45%, transparent);
  border-radius: var(--r-9);
  background: color-mix(in srgb, var(--cream-2) 55%, transparent);
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 96px;
  overflow: hidden;
}
.npi-preview-head {
  flex: 0 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--foil) 35%, transparent);
  font-size: var(--fs-10-5);
  letter-spacing: var(--track-10);
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  color: var(--ink-muted);
}
.npi-preview-state { text-transform: none; letter-spacing: 0; font-weight: var(--fw-semi); }
.npi-preview-state.is-err { color: var(--danger-2-ink); }
.npi-preview-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 10px; display: flex; flex-direction: column; gap: 5px; }
.npi-linkbtn {
  align-self: flex-start;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-size: var(--fs-11-5);
  font-weight: var(--fw-bold);
  color: var(--olive-9);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.npi-planned { display: flex; flex-direction: column; gap: 2px; }
.npi-planned-row {
  font-family: var(--font-mono);
  font-size: var(--fs-10-5);
  color: var(--ink-muted);
  overflow-wrap: anywhere;
}

/* ── step 4: review + the optional shot list ── */
.npi-sum { display: flex; flex-direction: column; gap: 2px; }
.npi-sum-row {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 10px;
  padding: 5px 2px;
  border-bottom: 1px solid color-mix(in srgb, var(--foil) 22%, transparent);
  font-size: var(--fs-12);
}
.npi-sum-row span { color: var(--ink-muted); }
.npi-sum-row b { color: var(--ink); font-weight: var(--fw-semi); overflow-wrap: anywhere; }
.npi-yesno { flex-wrap: wrap; }
/* Both answers fill the same box — switching them shifts nothing below. */
.npi-shotbox {
  height: 300px;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  overflow: hidden;
}
.npi-shotbox-empty {
  flex: 1 1 auto;
  border: 1px dashed color-mix(in srgb, var(--foil) 55%, transparent);
  border-radius: var(--r-9);
  padding: 12px;
  line-height: 1.5;
}
.npi-textarea {
  flex: 1 1 auto;
  min-height: 0;
  resize: none;
  font-family: var(--font-mono);
  font-size: var(--fs-11-5);
  line-height: 1.5;
}

/* ── the action row ── */
.npi-actions { align-items: center; }
/* v106 — the folder list is in: Next glows GOLD (Hugo: "make it gold glow"), the same gold
   as the user's own bubbles. A shadow only — the button keeps its size. */
.npi-actions .np-btn-create.is-ready {
  border-color: color-mix(in srgb, var(--gold-2) 96%, var(--mix-light));
  animation: npiReadyGlow var(--dur-pulse) ease-in-out infinite;
}
@keyframes npiReadyGlow {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, color-mix(in srgb, var(--gold-2) 94%, var(--mix-dark)) 60%, transparent), 0 0 12px 2px color-mix(in srgb, color-mix(in srgb, var(--gold-2) 96%, var(--mix-light)) 40%, transparent); }
  50%      { box-shadow: 0 0 0 6px color-mix(in srgb, color-mix(in srgb, var(--gold-2) 94%, var(--mix-dark)) 0%, transparent), 0 0 26px 8px color-mix(in srgb, color-mix(in srgb, var(--gold-2) 96%, var(--mix-light)) 85%, transparent); }
}
.npi-actions-l {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  max-height: 34px;
  overflow: hidden;
}

/* ── narrow: every split stacks and the body scrolls as one column ── */
@media (max-width: 1000px) {
  .np-modal.np-modal--intake { max-width: 100%; padding: 22px 18px; }
  .npi-pane--split,
  .npi-pane--chat {
    display: flex;
    flex-direction: column;
    gap: 14px;
    overflow-y: auto;
  }
  .npi-col { overflow: visible; padding-right: 0; }
  .npi-chatcol { min-height: 340px; }
  .npi-chatcol .agent-chat { grid-template-columns: minmax(0, 1fr); }
  .npi-qs { min-height: 180px; }
  .npi-steps { gap: 5px; }
  .npi-stepseg-label { font-size: var(--fs-8-5); letter-spacing: var(--track-08); }
}
/* Three lines at phone width: the step blurbs wrap differently, and the head
   must not change height between steps either. */
body[data-ui-tier="s"] .npi-sub { min-height: 51px; }
body[data-ui-tier="s"] .np-modal-backdrop { padding: 10px; }
body[data-ui-tier="s"] .np-modal.np-modal--intake { padding: 18px 14px; }
body[data-ui-tier="s"] .npi-tplgrid,
body[data-ui-tier="s"] .npi-seedgrid { grid-template-columns: minmax(0, 1fr); }
body[data-ui-tier="s"] .npi-fieldrow { grid-template-columns: minmax(0, 1fr); }
body[data-ui-tier="s"] .npi-sum-row { grid-template-columns: 104px minmax(0, 1fr); }
body[data-ui-tier="s"] .npi-actions { flex-wrap: wrap; }
body[data-ui-tier="s"] .npi-actions-l { flex: 1 0 100%; max-height: none; margin-bottom: 4px; }

/* ── the style builder (15 Sep 2026) ── */
.sb-card { gap: 10px; }
.sb-row { display: flex; align-items: center; gap: 10px; min-height: 32px; flex-wrap: nowrap; }
.sb-label { flex: 0 0 150px; font-size: var(--fs-11); letter-spacing: var(--track-08); text-transform: uppercase; font-weight: var(--fw-bold); color: var(--ink-muted); }
.sb-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.sb-chip {
  padding: 5px 11px; border-radius: var(--r-round); font-size: var(--fs-12); cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--tan-deep) 22%, transparent); background: color-mix(in srgb, var(--tan-deep) 8%, transparent); color: var(--ink);
}
.sb-chip.is-on { background: color-mix(in srgb, var(--leaf) 22%, transparent); border-color: color-mix(in srgb, var(--leaf) 70%, transparent); }
.sb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 14px; }
.sb-color { display: flex; align-items: center; gap: 8px; min-height: 30px; }
.sb-color .sb-label { flex: 0 0 110px; }
.sb-swatch { width: 30px; height: 24px; padding: 0; border: 1px solid color-mix(in srgb, var(--tan-deep) 30%, transparent); border-radius: var(--r-xs); background: none; cursor: pointer; }
.sb-hex { width: 84px; font-family: var(--font-mono); font-size: var(--fs-11-5); padding: 3px 6px; border-radius: var(--r-xs); border: 1px solid color-mix(in srgb, var(--tan-deep) 25%, transparent); background: color-mix(in srgb, var(--cream-5) 70%, transparent); color: var(--ink); }
.sb-range { flex: 1 1 160px; max-width: 260px; accent-color: var(--leaf); }
.sb-val { flex: 0 0 44px; font-family: var(--font-mono); font-size: var(--fs-11-5); color: var(--ink-muted); text-align: right; }
.sb-btn { padding: 6px 12px; font-size: var(--fs-12); white-space: nowrap; }
.sb-actions { display: flex; align-items: center; gap: 8px; min-height: 32px; }
.sb-status { flex: 1 1 auto; min-height: 1.45em; }

/* 15 Sep 2026 — Settings > PROJECT · LOOK: the wordmark and the backdrop photo. Every box has a
   fixed height, so choosing or removing never moves the cards around it. The wordmark preview
   sits on the menu colour, the way it shows in the header. */
.pl-label { font-size: var(--fs-11); letter-spacing: var(--track-14); text-transform: uppercase; color: var(--ink-muted); margin: 12px 0 6px; }
.pl-range-row { margin-top: 14px; }
.pl-range-head,
.pl-range-scale { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pl-range-head { font-size: var(--fs-11); letter-spacing: var(--track-14); color: var(--ink-muted); }
.pl-range-head strong { color: var(--ink); letter-spacing: var(--track-02); }
.pl-range {
  width: 100%;
  margin: 10px 0 5px;
  accent-color: var(--leaf);
  cursor: pointer;
}
.pl-range-scale { font-size: var(--fs-10-5); color: var(--ink-muted); }
.pl-logo-box {
  height: 84px; display: flex; align-items: center; padding: 8px 14px; overflow: hidden;
  border-radius: var(--r-sm); background: var(--sidebar-bg); border: 1px solid var(--card-border);
}
.pl-logo { max-height: 68px; max-width: 100%; width: auto; object-fit: contain; }
.pl-logo-empty { font-size: var(--fs-12); color: var(--ink-on-dark-muted); }
.pl-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; min-height: 40px; margin-top: 8px; }
.pl-confirm { font-size: var(--fs-12); color: var(--ink); }
.pl-status { min-height: 18px; font-size: var(--fs-12); color: var(--ink-muted); margin-top: 6px; }

/* ── 24 Sep 2026 — PROJECT · SONG FOLDERS (src/LibrarySourcesSection.jsx) ──────────────────────
   Full width: one row per Drive folder (kind, path, album, Master/Demo, Browse, Remove) with a
   result line under it that is always there, so a check never moves the card (#20). */
.lsrc-head { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; }
.lsrc-head > div:first-child { flex: 1 1 auto; min-width: 0; }
.lsrc-status {
  flex: 0 1 46%;
  min-height: 1.45em;
  padding-top: 2px;
  font-size: var(--fs-12);
  color: var(--ink-muted);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lsrc-status.is-running { color: var(--ink); }
.lsrc-list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.lsrc-row { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.lsrc-kind, .lsrc-q { flex: none; }
.lsrc-q.is-off { visibility: hidden; }
.lsrc-path { flex: 1 1 320px; min-width: 0; font-family: var(--font-mono); font-size: var(--fs-11-5); }
.lsrc-album { flex: 0 1 190px; min-width: 120px; }
.lsrc-actions { display: flex; gap: 6px; flex: none; }
.lsrc-line {
  flex: 1 0 100%;
  min-height: 1.4em;
  font-size: var(--fs-11-5);
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lsrc-line.is-err, .lsrc-note.is-err { color: var(--danger-2-ink); }
.lsrc-empty { font-size: var(--fs-12); color: var(--ink-muted); padding: 4px 0; }
.lsrc-foot { margin-top: 12px; }
.lsrc-note { flex: 1 1 260px; min-height: 1.45em; }
/* 24 Sep 2026 — song rules: Hidden songs | Same song as, side by side (one column when narrow) */
.lsrc-rules { display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px 28px; margin-top: 16px; padding-top: 12px;
  border-top: 1px solid color-mix(in srgb, var(--card-border) 22%, transparent); }
@media (max-width: 1280px) { .lsrc-rules { grid-template-columns: 1fr; } }
.lsrc-rules-col { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lsrc-rules-head { font-size: var(--fs-10-5); font-weight: var(--fw-bold); letter-spacing: var(--track-14); text-transform: uppercase; color: var(--ink-muted); }
.lsrc-rule { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.lsrc-rule-title { flex: 1 1 160px; min-width: 0; }
.lsrc-rule-album { flex: 0 1 130px; min-width: 90px; }
.lsrc-rule-word { flex: none; font-size: var(--fs-12); color: var(--ink-muted); }