/* ============================================================
   00. TOKENS — FILM BET DESIGN SYSTEM
   Fonts → palette → semantic → accent states → scales → base.
   Every component reads from these tokens; themes override the
   palette layer via [data-interface], accents set --accent-color
   and the state system derives automatically (color-mix).
   ============================================================ */
@font-face{font-family:'Ethiopic Sadiss';src:url('../assets/fonts/EthiopicSadiss-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'Neteru';src:url('../assets/fonts/Neteru.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap;unicode-range:U+1200-137F,U+1380-139F,U+2D80-2DDF,U+AB01-AB2F}
@font-face{font-family:'Shiromeda Screenplay';src:url('../assets/fonts/Shiromeda-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap;unicode-range:U+1200-137F,U+1380-139F,U+2D80-2DDF,U+AB01-AB2F}
@font-face{font-family:'IBM Plex Mono';src:url('../assets/fonts/IBMPlexMono-400.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../assets/fonts/IBMPlexMono-500.ttf') format('truetype');font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('../assets/fonts/IBMPlexMono-600.ttf') format('truetype');font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('../assets/fonts/JetBrainsMono-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('../assets/fonts/JetBrainsMono-Medium.ttf') format('truetype');font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('../assets/fonts/JetBrainsMono-Bold.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('../assets/fonts/JetBrainsMono-ExtraBold.ttf') format('truetype');font-style:normal;font-weight:800;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('../assets/fonts/JetBrainsMono-Italic.ttf') format('truetype');font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('../assets/fonts/JetBrainsMono-Medium-Italic.ttf') format('truetype');font-style:italic;font-weight:500;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('../assets/fonts/JetBrainsMono-Bold-Italic.ttf') format('truetype');font-style:italic;font-weight:700;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('../assets/fonts/JetBrainsMono-ExtraBold-Italic.ttf') format('truetype');font-style:italic;font-weight:800;font-display:swap}
/* PRIMARY TYPE (v16.0.5) — Space Mono carries display + body (typewriter /
   film voice) AND the numeric/UI mono (--mono: numbers, symbols, labels,
   chips, code, timestamps). IosevkaCharon stays registered right behind it
   as the mono glyph-coverage fallback. All faces ship in src/assets/fonts -
   no CDN, no system-font fallthrough. JetBrains Mono / IBM Plex Mono stay
   registered purely as glyph-coverage fallbacks; legacy display faces
   (Bahnschrift / Big Shoulders / Instrument Sans / Bricolage / Plus Jakarta /
   Space Grotesk / Inter) remain below for export documents and backwards
   compatibility. */
@font-face{font-family:'Space Mono';src:url('../assets/fonts/SpaceMono-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'Space Mono';src:url('../assets/fonts/SpaceMono-Bold.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:'Space Mono';src:url('../assets/fonts/SpaceMono-Italic.ttf') format('truetype');font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:'Space Mono';src:url('../assets/fonts/SpaceMono-BoldItalic.ttf') format('truetype');font-style:italic;font-weight:700;font-display:swap}
@font-face{font-family:'IosevkaCharon';src:url('../assets/fonts/IosevkaCharon-Light.ttf') format('truetype');font-style:normal;font-weight:300;font-display:swap}
@font-face{font-family:'IosevkaCharon';src:url('../assets/fonts/IosevkaCharon-Regular.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'IosevkaCharon';src:url('../assets/fonts/IosevkaCharon-Medium.ttf') format('truetype');font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:'IosevkaCharon';src:url('../assets/fonts/IosevkaCharon-Bold.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:'IosevkaCharon';src:url('../assets/fonts/IosevkaCharon-LightItalic.ttf') format('truetype');font-style:italic;font-weight:300;font-display:swap}
@font-face{font-family:'IosevkaCharon';src:url('../assets/fonts/IosevkaCharon-Italic.ttf') format('truetype');font-style:italic;font-weight:400;font-display:swap}
@font-face{font-family:'IosevkaCharon';src:url('../assets/fonts/IosevkaCharon-MediumItalic.ttf') format('truetype');font-style:italic;font-weight:500;font-display:swap}
@font-face{font-family:'IosevkaCharon';src:url('../assets/fonts/IosevkaCharon-BoldItalic.ttf') format('truetype');font-style:italic;font-weight:700;font-display:swap}
@font-face{font-family:'Bahnschrift';src:url('../assets/fonts/BAHNSCHRIFT.TTF') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'Big Shoulders Display';src:url('../assets/fonts/BigShouldersDisplay-600.ttf') format('truetype');font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:'Big Shoulders Display';src:url('../assets/fonts/BigShouldersDisplay-700.ttf') format('truetype');font-style:normal;font-weight:700;font-display:swap}
@font-face{font-family:'Big Shoulders Display';src:url('../assets/fonts/BigShouldersDisplay-800.ttf') format('truetype');font-style:normal;font-weight:800;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url('../assets/fonts/InstrumentSans-400.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url('../assets/fonts/InstrumentSans-500.ttf') format('truetype');font-style:normal;font-weight:500;font-display:swap}
@font-face{font-family:'Instrument Sans';src:url('../assets/fonts/InstrumentSans-600.ttf') format('truetype');font-style:normal;font-weight:600;font-display:swap}
@font-face{font-family:'Bricolage Grotesque';src:url('../assets/fonts/BricolageGrotesque-VariableFont.ttf') format('truetype-variations');font-style:normal;font-weight:200 800;font-display:swap}
@font-face{font-family:'Plus Jakarta Sans';src:url('../assets/fonts/PlusJakartaSans-VariableFont.ttf') format('truetype-variations');font-style:normal;font-weight:200 800;font-display:swap}
@font-face{font-family:'Space Grotesk';src:url('../assets/fonts/SpaceGrotesk-VariableFont.ttf') format('truetype-variations');font-style:normal;font-weight:300 700;font-display:swap}
@font-face{font-family:'Inter';src:url('../assets/fonts/Inter-VariableFont_opsz,wght.ttf') format('truetype-variations');font-style:normal;font-weight:100 900;font-display:swap}
@font-face{font-family:'Inter';src:url('../assets/fonts/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype-variations');font-style:italic;font-weight:100 900;font-display:swap}

:root{
  color-scheme:dark;

  /* ---- PALETTE (dark default; themes override via [data-interface]) ---- */
  --bg:#0D0E10; --bg2:#121417; --panel:#1A1C20; --panel2:#20242A;
  --elevated:color-mix(in srgb, var(--ink) 7%, var(--panel));
  --line:#282A30; --line2:#3A3D45;
  --ink:#F5F7FA; --ink2:#A0A5B0; --ink3:#505560;
  --text-primary:var(--ink); --text-muted:var(--ink3);
  --hov:#22262C; --act:#2A2D33; --bg-hover:var(--hov); --bg-surface-active:var(--accent-bg); --accent-active-bg:var(--accent-bg);
  --paper:#f3efe6; --paper-ink:#191813;
  --scrim:rgba(5,7,10,.74);
  --thumb:#3A3E45;

  /* ---- SPEC TOKEN ALIASES ----
     Canonical theme contract used by the Theme & Accent Picker engine:
     every surface/border/accent references one of these (or the canonical
     names above — they resolve to the same values per [data-interface]). */
  --bg-base:var(--bg);
  --bg-primary:var(--bg);
  --bg-surface:var(--panel);
  --border-color:var(--line);
  --system-accent:var(--accent-color);
  --badge-bg:var(--danger);
  --error-color:var(--danger);
  /* Deep Navy OS spec names (work order v3) */
  --bg-app-base:var(--bg);
  --bg-card-surface:var(--panel);
  --bg-input-recessed:var(--bg);
  --border-hairline:1px solid var(--line);
  --border-radius-card:var(--radius-sm);
  --system-accent-hover:var(--accent-hover);
  /* status badge fills + ink (theme-adaptive semantic colors) */
  --badge-success:var(--success-subtle);
  --badge-success-ink:var(--success);
  --badge-info:var(--info-subtle);
  --badge-info-ink:var(--info);

  /* ---- SIDEBAR (binds nav chrome so themes can restyle it wholesale) ---- */
  --sidebar-bg:var(--bg2);
  --sidebar-ink:var(--ink2);
  --sidebar-ink-active:var(--ink);
  --sidebar-hover:var(--hov);
  --sidebar-active:var(--act);
  --sidebar-line:var(--line);

  /* ---- SEMANTIC STATES ----
     Base hues are theme-owned (--green/--red/--night set per theme below
     in the [data-interface] blocks); semantic tokens alias them so every
     component adapts. Subtle/border derive with color-mix per theme. */
  --success:var(--green);
  --warning:var(--warning-hue);
  --danger:var(--red);
  --info:var(--night);
  --violet:var(--violet-hue);
  --prep:var(--prep-hue);
   --task-column-yellow:color-mix(in hsl,var(--warning) 75%,var(--success));
  --success-subtle:color-mix(in srgb, var(--success) 12%, var(--panel));
  --success-border:color-mix(in srgb, var(--success) 34%, transparent);
  --warning-subtle:color-mix(in srgb, var(--warning) 12%, var(--panel));
  --warning-border:color-mix(in srgb, var(--warning) 34%, transparent);
  --danger-subtle:color-mix(in srgb, var(--danger) 12%, var(--panel));
  --danger-border:color-mix(in srgb, var(--danger) 34%, transparent);
  --info-subtle:color-mix(in srgb, var(--info) 12%, var(--panel));
  --info-border:color-mix(in srgb, var(--info) 34%, transparent);
  --violet-subtle:color-mix(in srgb, var(--violet) 12%, var(--panel));
  --violet-border:color-mix(in srgb, var(--violet) 34%, transparent);
  --prep-subtle:color-mix(in srgb, var(--prep) 12%, var(--panel));
  --prep-border:color-mix(in srgb, var(--prep) 34%, transparent);
  /* readable ink on SOLID semantic fills (status badges, flags, checked
     states): dark themes fill bright so ink goes near-black; light themes
     override below because their semantic hues darken toward mid-tone */
  --success-contrast:#0A1F14; --warning-contrast:#241703;
  --danger-contrast:#2B0C08;  --info-contrast:#0B1322;
  --violet-contrast:#160A2E;  --prep-contrast:#241703;

  /* ---- MEDIA OVERLAYS (ink & scrims layered ON imagery) ----
     Anchored to the media, not the theme: text/buttons sitting on a
     poster, still or video frame stay legible in every theme without
     hardcoding colors in component sheets. */
  --media-ink:#ffffff; --media-ink-dim:rgba(255,255,255,.7);
  --media-chip:rgba(12,12,15,.54); --media-chip-strong:rgba(0,0,0,.72);
  --media-hairline:rgba(255,255,255,.18); --media-ring:rgba(255,255,255,.85);
  --media-edge:rgba(0,0,0,.4);
  --media-scrim-a:rgba(10,10,12,.15); --media-scrim-b:rgba(10,10,12,.55);

  /* ---- ACCENT STATE SYSTEM ----
     Accent presets set ONLY --accent-color (+ --accent-rgb fallback).
     hover / active / focus / subtle / border / glow / contrast all derive,
     so every accent — present or future — gets the complete ladder on
     every theme. Fallback rgba declared first where --accent-rgb exists. */
  --accent-color:#FF9500; --accent-rgb:255,149,0;
  --accent-hover:rgba(var(--accent-rgb), .85);
  --accent-hover:color-mix(in srgb, var(--accent-color) 86%, #000);
  --accent-active:rgba(var(--accent-rgb), .72);
  --accent-active:color-mix(in srgb, var(--accent-color) 72%, #000);
  --accent-bg:rgba(var(--accent-rgb), .12);
  --accent-bg:color-mix(in srgb, var(--accent-color) 12%, transparent);
  --accent-border:rgba(var(--accent-rgb), .35);
  --accent-border:color-mix(in srgb, var(--accent-color) 38%, transparent);
  --accent-glow:rgba(var(--accent-rgb), .15);
  --accent-glow:color-mix(in srgb, var(--accent-color) 16%, transparent);
  /* readable text/icon color ON an accent fill, any accent, any theme */
  --accent-contrast:#111111;
  --focus-ring:0 0 0 2px var(--bg), 0 0 0 4px var(--accent-color);

  /* legacy aliases kept so existing components keep working.
     Base hues are defined here and re-tuned per theme; the semantic
     tokens above alias them (never the reverse — no cycles). */
  --red:#E74C3C; --green:#2ECC71; --night:#3498DB; --warning-hue:#E67E22;
  --violet-hue:#8B5CF6;
  /* PREP phase orange — deliberately NOT accent-derived: the Pre-Production
     tag must stay the same orange no matter which accent the user picks. */
  --prep-hue:#F08A24;
  --amber:var(--accent-color);
  --accent-color-hover:var(--accent-hover);

  /* ---- TYPOGRAPHY SCALE ---- */
  --text-xs:10px; --text-sm:12px; --text-md:13.5px; --text-base:14px;
  --text-lg:16px; --text-xl:21px; --text-2xl:28px;
  --text-display:clamp(32px,4vw,44px);
  --font-mono-weight:600;
  --track-wide:.14em; --track-caps:.18em; --track-kicker:.24em;

  /* ---- SPACING SCALE (4px base) ---- */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-5:20px; --sp-6:24px; --sp-7:32px; --sp-8:40px;

  /* ---- RADII ---- */
  --radius-xs:4px; --radius-sm:6px; --radius-md:10px; --radius-lg:14px; --radius-full:999px;

  /* ---- ELEVATION (restrained) ---- */
  --shadow-1:0 2px 8px rgba(0,0,0,.18);
  --shadow-2:0 8px 24px rgba(0,0,0,.22);
  --shadow-3:0 24px 70px rgba(0,0,0,.3);

  /* ---- CONTROLS ---- */
  --ctl-h:34px; --ctl-h-sm:28px; --ctl-h-lg:38px;

  /* ---- LAYERING ---- */
  --z-rail:50; --z-sticky:100; --z-modal:1000; --z-toast:10000;

  /* PRIMARY TYPE — Space Mono carries display + body (typewriter / film
     voice) AND the numeric/UI mono (--mono: numbers, symbols, labels, chips,
     code, timestamps). IosevkaCharon sits right behind it as the mono
     glyph-coverage fallback. Bundled JetBrains Mono / IBM Plex Mono are
     glyph-coverage fallbacks only - the stacks never reach a system font. */
  --disp:'Space Mono','IosevkaCharon','JetBrains Mono',monospace;
  --mono:'Space Mono','IosevkaCharon','JetBrains Mono',monospace;
  --sans:'Space Mono','IosevkaCharon','JetBrains Mono',monospace;
}
[data-theme-mode="light"]{
  color-scheme:light;
  /* base hues need darker steps to hold contrast on light surfaces —
     the semantic tokens above follow automatically */
  --green:#2e7d4f; --red:#c03a2b; --night:#4a628c; --warning-hue:#a4700f;
  --violet-hue:#6d43b8;
  /* PREP orange darkens toward mid-tone on light surfaces, same as the
     other base hues — still fixed, never accent-derived */
  --prep-hue:#C96A15;
  /* darker semantic fills flip the solid-fill ink to white */
  --success-contrast:#ffffff; --warning-contrast:#ffffff;
  --danger-contrast:#ffffff;  --info-contrast:#ffffff;
  --violet-contrast:#ffffff;  --prep-contrast:#ffffff;
  --shadow-1:0 2px 8px rgba(20,20,26,.1);
  --shadow-2:0 8px 24px rgba(20,20,26,.12);
  --shadow-3:0 24px 70px rgba(20,20,26,.18);
  --accent-contrast:#14130f;
}

*{margin:0;padding:0;box-sizing:border-box}
/* Native form controls must inherit the app fonts - never a system font. */
button,input,select,textarea,optgroup{font:inherit}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:var(--text-base);line-height:1.5;-webkit-font-smoothing:antialiased;padding-top:46px}

/* ---- SCROLLBARS (theme-bound) ---- */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--thumb);border-radius:var(--radius-full);border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--line2)}
::-webkit-scrollbar-corner{background:transparent}

/* ---- FOCUS VISIBILITY (one ring across the product) ---- */
:focus-visible{outline:2px solid var(--accent-color);outline-offset:2px}
.btn:focus-visible,.icon-btn:focus-visible,.tb-btn:focus-visible,.nv:focus-visible,
.nv-main:focus-visible,.nav-item:focus-visible,.topbar-btn:focus-visible,
.se-tools-button:focus-visible,.accent-swatch:focus-visible{outline:none;box-shadow:var(--focus-ring)}
.inp:focus-visible,select.inp:focus-visible,textarea.inp:focus-visible{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 3px var(--accent-bg)}

.ic{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none;display:inline-block;vertical-align:-3px}
.film-os-icon{background-color:currentColor;-webkit-mask:var(--film-os-icon) center/contain no-repeat;mask:var(--film-os-icon) center/contain no-repeat}

/* Keep motion unobtrusive and honor the operating system's accessibility setting. */
@media(prefers-reduced-motion:reduce){
   *,*::before,*::after{
      scroll-behavior:auto!important;
      animation-duration:.01ms!important;
      animation-iteration-count:1!important;
      transition-duration:.01ms!important;
   }
}