/* THE Cutdowns theme — single source of truth for every surface.
 *
 * Load this FIRST on every page (the web pages, the landing, the password
 * gate, and the DaVinci plugin ships a copy in its css/ dir). Pages define
 * only page-SPECIFIC tokens locally; anything two surfaces share lives here.
 * Changing the product's look = changing this file, nothing else.
 *
 * Two palettes: "Signal Dark" (:root) and "Daylight Bright"
 * (:root[data-theme="light"]). The preference is three-state — 'auto'
 * (the default, follows the OS), 'light' or 'dark' — under the localStorage
 * key "clip-picker-theme", where 'auto' means the key is absent. clip-theme.js
 * always stamps an explicit data-theme, so this file only ever needs two.
 */
/* Two grounds, one identity. The gold is the LOGO's gold (#e5b80b) in both
 * themes — the app spent months quieter than its own sign.
 *
 * --accent      the gold as a FILL (buttons, ticks, bars, tints). Bright in
 *               both themes; text on it comes from --on-accent.
 * --accent-ink  the gold as TEXT. On the light ground the bright gold is
 *               1.5:1 — unreadable — so gold type darkens while gold fills
 *               do not. Never use --accent for a `color:`.
 */
/* Registered as typed colors so a theme flip can CROSS-FADE them (untyped
 * custom properties snap). One registry serving every page — the html
 * transition at the bottom of this file names the same set. initial-value
 * is a dead fallback (the :root blocks below always win); it must be a
 * plain color, so no var()/color-mix here. */
@property --bg { syntax: '<color>'; inherits: true; initial-value: #101010; }
@property --surface { syntax: '<color>'; inherits: true; initial-value: #1a1a19; }
@property --surface-2 { syntax: '<color>'; inherits: true; initial-value: #161615; }
@property --border { syntax: '<color>'; inherits: true; initial-value: #2c2c28; }
@property --main-bg { syntax: '<color>'; inherits: true; initial-value: #151514; }
@property --text { syntax: '<color>'; inherits: true; initial-value: #f2f0ea; }
@property --muted { syntax: '<color>'; inherits: true; initial-value: #948f84; }
@property --muted-2 { syntax: '<color>'; inherits: true; initial-value: #8a857b; }
@property --elevated { syntax: '<color>'; inherits: true; initial-value: #1f1f1d; }
@property --accent { syntax: '<color>'; inherits: true; initial-value: #e5b80b; }
@property --accent-ink { syntax: '<color>'; inherits: true; initial-value: #e5b80b; }
@property --on-accent { syntax: '<color>'; inherits: true; initial-value: #171200; }
@property --now-bg { syntax: '<color>'; inherits: true; initial-value: rgba(255,255,255,0.07); }
@property --now-border { syntax: '<color>'; inherits: true; initial-value: rgba(255,255,255,0.45); }
@property --now-ring { syntax: '<color>'; inherits: true; initial-value: rgba(255,255,255,0.08); }
@property --now-text { syntax: '<color>'; inherits: true; initial-value: #ffffff; }
@property --on-color-text { syntax: '<color>'; inherits: true; initial-value: #ffffff; }
@property --splitter-grip { syntax: '<color>'; inherits: true; initial-value: #3a3a3a; }
@property --bang { syntax: '<color>'; inherits: true; initial-value: #9b8ce0; }
@property --c4 { syntax: '<color>'; inherits: true; initial-value: #fb7185; }
@property --on-bang { syntax: '<color>'; inherits: true; initial-value: #14102e; }
@property --ink-03 { syntax: '<color>'; inherits: true; initial-value: rgba(255,255,255,0.03); }
@property --ink-04 { syntax: '<color>'; inherits: true; initial-value: rgba(255,255,255,0.04); }
@property --ink-05 { syntax: '<color>'; inherits: true; initial-value: rgba(255,255,255,0.05); }
@property --ink-06 { syntax: '<color>'; inherits: true; initial-value: rgba(255,255,255,0.06); }
@property --ink-07 { syntax: '<color>'; inherits: true; initial-value: rgba(255,255,255,0.07); }
@property --ink-08 { syntax: '<color>'; inherits: true; initial-value: rgba(255,255,255,0.08); }
@property --ink-10 { syntax: '<color>'; inherits: true; initial-value: rgba(255,255,255,0.10); }
@property --ink-12 { syntax: '<color>'; inherits: true; initial-value: rgba(255,255,255,0.12); }
@property --ink-16 { syntax: '<color>'; inherits: true; initial-value: rgba(255,255,255,0.16); }
@property --ink-18 { syntax: '<color>'; inherits: true; initial-value: rgba(255,255,255,0.18); }
@property --ink-22 { syntax: '<color>'; inherits: true; initial-value: rgba(255,255,255,0.22); }
@property --ink-35 { syntax: '<color>'; inherits: true; initial-value: rgba(255,255,255,0.035); }
@property --ink-55 { syntax: '<color>'; inherits: true; initial-value: rgba(255,255,255,0.55); }
@property --shadow-lg { syntax: '<color>'; inherits: true; initial-value: rgba(0,0,0,0.55); }

:root {
  color-scheme: dark;

  /* "Signal Dark" — the room editors work in, next to Resolve */
  --bg: #101010;
  --surface: #1a1a19;
  --surface-2: #161615;
  --main-bg: #151514;
  --border: #2c2c28;

  --text: #f2f0ea;
  --muted: #948f84;
  --muted-2: #8a857b;

  /* brand + stages: gold means "a human chose this"; teal is the Episode
     stage; slate-blue is people & access */
  --accent: #e5b80b;
  --accent-ink: #e5b80b;      /* bright gold reads fine on a dark ground */
  --on-accent: #171200;
  --stage-teal: #2fbfa8;
  --stage-accent: var(--accent);   /* pages override per stage */
  --role-people: #6aa4dd;

  /* status — clear, still not sirens */
  --danger: #ef6a53;
  /* The same hue under the name the marking surfaces ask for. It lived in the
     Episode page's own <style>, which meant every shared rule using it — the
     "cut" tag on a passage, a destructive row action — silently lost its
     colour the moment another page drew that markup. */
  --red: var(--danger);
  --warn: #e0a53a;
  --ok: #52c98a;
  --info: #6aa4dd;
  --on-warn: #2a1c00;

  /* translucent inks over the ground */
  --ink-03: rgba(255,255,255,0.03);
  --ink-04: rgba(255,255,255,0.04);
  --ink-05: rgba(255,255,255,0.05);
  --ink-06: rgba(255,255,255,0.06);
  --ink-07: rgba(255,255,255,0.07);
  --ink-08: rgba(255,255,255,0.08);
  --ink-10: rgba(255,255,255,0.10);
  --ink-12: rgba(255,255,255,0.12);
  --ink-16: rgba(255,255,255,0.16);
  --ink-18: rgba(255,255,255,0.18);
  --ink-22: rgba(255,255,255,0.22);
  --ink-35: rgba(255,255,255,0.035);
  --ink-55: rgba(255,255,255,0.55);
  --elevated: #1f1f1d;
  --shadow-lg: rgba(0,0,0,0.55);

  /* the "now playing" transcript highlight and the pane splitter — the
     Episode and Clips pages share these (they used to keep drifting copies) */
  --now-bg: rgba(255,255,255,0.07);
  --now-border: rgba(255,255,255,0.45);
  --now-ring: rgba(255,255,255,0.08);
  --now-text: #ffffff;
  --on-color-text: #ffffff;
  --splitter-grip: color-mix(in srgb, #ffffff 22%, var(--bg));

  /* status: the banger violet — vivid on purpose, so it never reads as a
     muted identity colour */
  --bang: #9b8ce0;
  --on-bang: #14102e;
  /* the rose a "remove" control turns on hover — read as destructive without
     the full alarm of --danger. Shared: both pages render the clip card. */
  --c4: #fb7185;

  /* how much of an entity's own colour survives as text (see --entity-ink) */
  --entity-ink-mix: 100%;
  /* Ink ON an entity colour. Entity colours are the SAME hex in both
     themes, so this must not flip with the theme — it is defined once. */
  --on-entity: #171717;

  /* the one button system (values only — each page's button base reads
     these, so the cascade stays local while the look stays central) */
  --r-ctl: 8px;              /* every control */
  --r-card: 14px;            /* every card */
  --bt-bg: rgba(255,255,255,0.07);
  --bt-bg-hover: rgba(255,255,255,0.12);
  --bt-fg: #cfccc3;
}

:root[data-theme="light"] {
  color-scheme: light;

  /* "Daylight Bright" — a desk in daylight: warm paper, cards floating on it */
  --bg: #e9e5db;
  --surface: #fdfcfa;
  --surface-2: #f2eee5;
  --main-bg: #f6f3ec;
  --border: #dbd6c9;

  --text: #1f1e1c;
  --muted: #6b6558;
  --muted-2: #78725f;

  --accent: #e5b80b;          /* the fill stays the logo's gold */
  --accent-ink: #7d5b06;      /* gold TYPE darkens to stay readable on paper */
  --on-accent: #2a2100;
  --stage-teal: #0f9e8c;
  --role-people: #4a72a8;

  --danger: #d94f36;
  --warn: #a6741a;
  --ok: #3f9160;
  --info: #4a72a8;
  --on-warn: #fffdf6;

  --ink-03: rgba(30,25,15,0.03);
  --ink-04: rgba(30,25,15,0.04);
  --ink-05: rgba(30,25,15,0.05);
  --ink-06: rgba(30,25,15,0.06);
  --ink-07: rgba(30,25,15,0.07);
  --ink-08: rgba(30,25,15,0.08);
  --ink-10: rgba(30,25,15,0.10);
  --ink-12: rgba(30,25,15,0.12);
  --ink-16: rgba(30,25,15,0.16);
  --ink-18: rgba(30,25,15,0.20);
  --ink-22: rgba(30,25,15,0.24);
  --ink-35: rgba(30,25,15,0.035);
  --ink-55: rgba(30,25,15,0.55);
  --elevated: #ffffff;
  --shadow-lg: rgba(80,74,58,0.20);

  --now-bg: rgba(0,0,0,0.05);
  --now-border: rgba(0,0,0,0.28);
  --now-ring: rgba(0,0,0,0.08);
  --now-text: #171717;
  --on-color-text: #171717;
  --splitter-grip: color-mix(in srgb, #000000 18%, var(--bg));

  --bang: #6f5fc4;
  --on-bang: #fffdf6;
  --c4: #b84a5c;

  /* Entity colours (clips, people) were all picked against a dark ground, so
     as TEXT on paper they wash out. Mixing them toward the ink keeps each one
     recognisably itself while staying readable. */
  --entity-ink-mix: 62%;

  --bt-bg: rgba(30,28,15,0.06);
  --bt-bg-hover: rgba(30,28,15,0.11);
  --bt-fg: #46443b;
}

/* An entity's own colour, safe to use as text in either theme. */
.entity-ink { color: color-mix(in srgb, var(--c, var(--accent)) var(--entity-ink-mix), var(--text)); }

/* ---- shared control classes every page uses ---- */
/* Buttons: quiet tonal fills, no outline armor; ONE gold primary per view. */
.primary, button.primary {
  background: var(--accent); color: var(--on-accent);
  border: 0; border-radius: var(--r-ctl);
  font-weight: 600; cursor: pointer;
}
.primary:hover, button.primary:hover {
  /* Text stays dark-on-gold — a page's generic button:hover must never
     flip it light (white-on-gold is unreadable). */
  background: color-mix(in srgb, var(--accent) 90%, #fff);
  color: var(--on-accent);
}
.quiet, button.quiet {
  background: var(--bt-bg); color: var(--bt-fg);
  border: 0; border-radius: var(--r-ctl);
  font-weight: 600; cursor: pointer;
}
.quiet:hover, button.quiet:hover {
  background: var(--bt-bg-hover); color: var(--text);
}
.quiet.danger, button.quiet.danger { color: var(--danger); }
button:disabled { opacity: 0.5; cursor: default; }

/* Labels: no more shouting. Section heads are sentence case, weight 600. */
.sec-label {
  font-size: 0.84rem; font-weight: 600; color: var(--text);
  letter-spacing: 0; text-transform: none;
}
.sec-label .lbl-note { font-weight: 500; color: var(--muted); }

/* The transcript selection mark: a small gold tick in the left margin
   (the "galley" mark) — pages position it on their selected rows. */
.sel-tick::before {
  content: ''; position: absolute; left: 2px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 60%; min-height: 12px; border-radius: 2px;
  background: var(--stage-accent, var(--accent));
}

/* The appearance switch — Light / Auto / Dark, one control, every header. */
.theme-switch { position: relative; display: inline-grid; grid-template-columns: repeat(3, 1fr);
  width: 6.4rem; height: 2rem; padding: 2px; border-radius: 999px;
  background: var(--ink-05); border: 1px solid var(--border); flex-shrink: 0; }
.theme-thumb { position: absolute; top: 2px; left: 2px; width: calc((100% - 4px) / 3);
  height: calc(100% - 4px); border-radius: 999px; background: var(--surface);
  border: 1px solid var(--border); box-shadow: 0 1px 3px var(--shadow-lg);
  transform: translateX(calc(var(--theme-i, 1) * 100%));
  transition: transform .22s cubic-bezier(.4,0,.2,1); pointer-events: none; z-index: 0; }
.theme-opt { position: relative; z-index: 1; display: inline-flex; align-items: center;
  justify-content: center; padding: 0; margin: 0; border: none; background: transparent;
  color: var(--muted-2); cursor: pointer; border-radius: 999px; transition: color .15s ease; }
.theme-opt:hover { color: var(--muted); background: transparent; }
.theme-opt[aria-checked="true"] { color: var(--text); }
.theme-opt svg { width: 15px; height: 15px; display: block; }
@media (prefers-reduced-motion: reduce) { .theme-thumb { transition: none; } }

/* Readiness chips — tiny pills on team rosters answering "is this person
   actually set up?" (accepted, app paired, seen lately). The dot carries
   the status colour — vivid = status, never identity, per the house rule. */
.ready-chip {
  display: inline-flex; align-items: center; gap: 0.34em;
  font-size: 0.66rem; font-weight: 600; line-height: 1; white-space: nowrap;
  padding: 0.26em 0.6em; border-radius: 999px;
  border: 1px solid var(--ink-08); background: var(--ink-03);
  color: var(--muted);
}
.ready-chip::before {
  content: ""; width: 0.52em; height: 0.52em; border-radius: 50%;
  background: var(--muted-2); flex-shrink: 0;
}
.ready-chip.ok { color: var(--text); }
.ready-chip.ok::before { background: var(--ok); }
.ready-chip.warn::before { background: var(--warn); }

/* The account chip and its menu — one control, every page. Settings and
   Sign out live inside it; neither earns permanent space in a header. */
.me-wrap { position: relative; display: inline-flex; }
.me-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: inherit; font-size: 0.7rem; font-weight: 600; line-height: inherit;
  color: var(--muted); cursor: pointer; white-space: nowrap;
  border: 1px solid var(--border); border-radius: 999px;
  padding: 0.28rem 0.72rem; background: var(--surface);
  transition: color .12s ease, border-color .12s ease;
  max-width: 15rem; overflow: hidden; text-overflow: ellipsis;
}
.me-chip:hover { color: var(--text); border-color: var(--ink-18); }
.me-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted-2); flex-shrink: 0; }
.me-menu {
  display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 200;
  min-width: 150px; padding: 4px; border-radius: var(--r-ctl);
  background: var(--elevated); border: 1px solid var(--border);
  box-shadow: 0 8px 24px var(--shadow-lg);
}
.me-menu.open { display: block; }
.me-menu button, .me-menu a {
  display: block; width: 100%; padding: 0.45rem 0.65rem; text-align: left;
  font: inherit; font-size: 0.72rem; font-weight: 500; color: var(--text);
  background: none; border: none; border-radius: 6px; cursor: pointer;
  text-decoration: none; box-sizing: border-box;
}
.me-menu button:hover, .me-menu a:hover { background: var(--ink-08); }

/* ---- Keyboard focus rings (only for keyboard users, never on click) ---- */
:where(button, a, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---- Consistent slim scrollbars in both themes ---- */
* { scrollbar-width: thin; scrollbar-color: var(--ink-10) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--ink-10);
  border-radius: 999px; border: 2px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--ink-18); background-clip: content-box; }

/* ---- Theme flips cross-fade ---- */
/* Names every token registered at the top of this file; keep the two lists
   in step. Pages used to carry their own copies of this block and each
   drifted its own way (the Episode page's accent snapped while the Clips
   page's faded). */
html {
  transition:
    --bg 0.42s ease, --surface 0.42s ease, --surface-2 0.42s ease, --border 0.42s ease,
    --main-bg 0.42s ease, --text 0.42s ease, --muted 0.42s ease, --muted-2 0.42s ease,
    --elevated 0.42s ease, --accent 0.42s ease, --accent-ink 0.42s ease, --on-accent 0.42s ease,
    --now-bg 0.42s ease, --now-border 0.42s ease, --now-ring 0.42s ease, --now-text 0.42s ease,
    --on-color-text 0.42s ease, --splitter-grip 0.42s ease, --bang 0.42s ease, --on-bang 0.42s ease, --c4 0.42s ease,
    --ink-03 0.42s ease, --ink-04 0.42s ease, --ink-05 0.42s ease, --ink-06 0.42s ease,
    --ink-07 0.42s ease, --ink-08 0.42s ease, --ink-10 0.42s ease, --ink-12 0.42s ease,
    --ink-16 0.42s ease, --ink-18 0.42s ease, --ink-22 0.42s ease, --ink-35 0.42s ease,
    --ink-55 0.42s ease, --shadow-lg 0.42s ease,
    color-scheme 0.42s ease;
}
@media (prefers-reduced-motion: reduce) { html { transition: none !important; } }