/* Themes. Every surface, edge, ink and hue in the interface is a token; a theme is a full set of
   tokens plus the few treatments that make it read differently, not a recolour.
   Tokens: surfaces run bg (page) → well (recessed chips, fields) → pane/panel (compartments) →
   panel2 (cards, buttons) → raised (popovers). Edges run edge (quiet rings) → line (dividers) →
   edge-strong (outlines that must be seen). Inks run text → text-2 → muted → faint.
   Art that brings its own lighting (the cinematic scenes, the sky, the leather notebook, the robot
   memory core) keeps its own colours in every theme.

   Midnight   the original: a dim console, teal and amber, soft glows.
   Floodlight maximum contrast for dim, cheap or washed-out screens: black ground, white ink,
              lines instead of shading, rings instead of glows, blinks instead of fades.
   Dossier    light, for bright rooms and glare: a case file on paper. Glows become ink rings and
              shadows, the current speaker is highlighted in marker, and night lowers the lamp.
   Signal     colour-blind safe (Okabe-Ito hues): YES/NO and life/death split blue against
              magenta, and every faction also carries a line pattern, so colour is never the only
              cue. The sky becomes a radar scope. */

/* ---------------------------------------------------------------- derived tokens (every theme) */
:root{
  --ok-fill:color-mix(in srgb,var(--ok) 22%,var(--well));
  --edge-accent:color-mix(in srgb,var(--accent) 30%,var(--edge-strong));
  --pane-glow:0 0 0 1px var(--edge),0 18px 40px -28px var(--shade);
  --focus-w:2px;
  --align-style:solid;
}

/* ---------------------------------------------------------------- Midnight (default) */
:root,:root[data-theme=midnight]{
  color-scheme:dark;
  --bg:#0b0d10; --panel:#12161b; --panel2:#171c22; --pane:#10141a; --pane-deep:#0d1116;
  --well:#0c1014; --field:#0e1115; --raised:#1a2129;
  --line:#232a33; --edge:#1f2831; --edge-strong:#2b3540; --slot:#26303a;
  --text:#d7dde5; --text-2:#b8c2cc; --muted:#7f8a97; --faint:#56616d;
  --tint:#fff; --shade:#000; --backdrop:#05080bd9;
  --accent:#4fd1c5; --accent2:#f6ad55; --danger:#fc8181; --ok:#68d391; --priv:#b794f4; --prompt:#ecc94b; --you:#63b3ed;
  --day:#f6ad55; --day-ink:#f6d38b; --night:#7f9cf5; --night-ink:#b6c8ff;
  --defense:#f687b3; --claim:#b7a6f4; --mo:#a2e1cc; --mo-edge:#83cbbb;
  --on-accent:#06211e; --on-fill:#16101f;
  --f-hunter:#4cbb65; --f-glitched:#e6c74c; --f-sympathizer:#ef923e; --f-human:#df4b50;
  --you-hunter:#72d98b; --you-glitched:#ecd36a; --you-sympathizer:#f3a45c;
  --dialog-top:#1c2b30; --dialog-bottom:#111a21; --table-top:#1c2a30;
  --name-l:74%; --mono-logo:brightness(0) invert(1);
  --halo-sm:0 0 6px -1px; --halo:0 0 11px -2px; --halo-lg:0 0 22px -4px; --pulse-low:.25;
}

/* ---------------------------------------------------------------- Floodlight */
:root[data-theme=floodlight]{
  color-scheme:dark;
  --bg:#000; --panel:#0e0f11; --panel2:#1a1c1f; --pane:#0e0f11; --pane-deep:#08090a;
  --well:#000; --field:#000; --raised:#202328;
  --line:#5e656e; --edge:#4a5058; --edge-strong:#8a929c; --slot:#3b4047;
  --text:#fff; --text-2:#e8ebef; --muted:#bcc3cc; --faint:#8f98a2;
  --tint:#fff; --shade:#000; --backdrop:#000000e6;
  --accent:#2ff3de; --accent2:#ffb52e; --danger:#ff6161; --ok:#45e585; --priv:#c9a3ff; --prompt:#ffe45c; --you:#52c7ff;
  --day:#ffb52e; --day-ink:#ffd978; --night:#93acff; --night-ink:#cad7ff;
  --defense:#ff8fc4; --claim:#cbbbff; --mo:#a3f7de; --mo-edge:#6fe3c6;
  --on-accent:#001a17; --on-fill:#000;
  --f-hunter:#45e072; --f-glitched:#ffe356; --f-sympathizer:#ffa04a; --f-human:#ff5a61;
  --you-hunter:#76f59a; --you-glitched:#fff08a; --you-sympathizer:#ffbd7c;
  --dialog-top:#15171a; --dialog-bottom:#08090a; --table-top:#1a1c1f;
  --name-l:78%; --mono-logo:brightness(0) invert(1);
  --pane-glow:0 0 0 1px var(--line);
  --halo-sm:0 0 0 2px; --halo:0 0 0 2px; --halo-lg:0 0 0 4px; --pulse-low:0;
  --focus-w:3px;
}

/* ---------------------------------------------------------------- Dossier */
:root[data-theme=dossier]{
  color-scheme:light;
  --bg:#ede6d8; --panel:#f7f2e8; --panel2:#fffcf5; --pane:#faf6ee; --pane-deep:#f1eadc;
  --well:#e9e1d1; --field:#fffcf5; --raised:#fffcf5;
  --line:#ab9c80; --edge:#c9bca3; --edge-strong:#857760; --slot:#d3c8b4;
  --text:#1f1a14; --text-2:#3b3329; --muted:#66594a; --faint:#8b7f6e;
  --tint:#3b2a14; --shade:#3a2a1466; --backdrop:#2a2016a6;
  --accent:#00756b; --accent2:#a55700; --danger:#b3261e; --ok:#1c7a3c; --priv:#6a3db5; --prompt:#846400; --you:#1d5dbf;
  --day:#b8660b; --day-ink:#8a4a00; --night:#3d51b3; --night-ink:#2d3c92;
  --defense:#ad346f; --claim:#5a45ad; --mo:#1d7a64; --mo-edge:#3f9a82;
  --on-accent:#fff; --on-fill:#fff;
  --f-hunter:#22803e; --f-glitched:#8c7000; --f-sympathizer:#b3580a; --f-human:#b8272e;
  --you-hunter:#1d7a3a; --you-glitched:#7b6200; --you-sympathizer:#9c4b06;
  --dialog-top:#fffcf5; --dialog-bottom:#f2ebdd; --table-top:#e0d3bb;
  --name-l:33%; --mono-logo:brightness(0);
  --ok-fill:color-mix(in srgb,var(--ok) 16%,var(--field));
  --pane-glow:0 0 0 1px var(--edge),0 10px 24px -18px var(--shade);
  --halo-sm:0 0 0 2px; --halo:0 0 0 2px; --halo-lg:0 0 0 4px; --pulse-low:.3;
  --marker:#ffe36b;
}
/* Night lowers the lamp: the paper dims and warms, ink stays put. */
:root[data-theme=dossier]:has(#phaseTrack.is-night){
  --bg:#cbbfa6; --panel:#dcd0b8; --panel2:#e7dcc6; --pane:#e0d5be; --pane-deep:#d5c9b0;
  --well:#d2c5ab; --field:#e9dfca; --raised:#ebe1cd;
  --line:#ab9d82; --edge:#bcae93; --slot:#bfb196;
  --marker:#f3cf5a;
}

/* ---------------------------------------------------------------- Signal */
:root[data-theme=signal]{
  color-scheme:dark;
  --bg:#060a13; --panel:#0d1420; --panel2:#152034; --pane:#0d1420; --pane-deep:#09101b;
  --well:#050912; --field:#050912; --raised:#1a2840;
  --line:#506a92; --edge:#3a5074; --edge-strong:#7189b0; --slot:#2a3b57;
  --text:#f3f7fd; --text-2:#d4ddeb; --muted:#a7b5ca; --faint:#7888a2;
  --tint:#fff; --shade:#000; --backdrop:#020510e3;
  --accent:#7fe3ff; --accent2:#ffb000; --danger:#ff4f9a; --ok:#4f9dff; --priv:#caa2ff; --prompt:#fff27a; --you:#fff;
  --day:#ffb000; --day-ink:#ffd66b; --night:#9ba9ff; --night-ink:#d0d7ff;
  --defense:#ff8fd0; --claim:#cdb8ff; --mo:#79f2d6; --mo-edge:#42d7b6;
  --on-accent:#00121a; --on-fill:#000;
  --f-hunter:#4f9dff; --f-glitched:#f0e442; --f-sympathizer:#ff9a3c; --f-human:#ff4f9a;
  --you-hunter:#fff; --you-glitched:#fff; --you-sympathizer:#fff;
  --dialog-top:#15213a; --dialog-bottom:#0a1120; --table-top:#13203a;
  --name-l:76%; --mono-logo:brightness(0) invert(1);
  --pane-glow:0 0 0 1px var(--edge),0 18px 40px -28px var(--shade);
  --halo-sm:0 0 7px 0; --halo:0 0 12px -1px; --halo-lg:0 0 24px -2px; --pulse-low:.1;
  --focus-w:3px;
}
/* Each faction's outline has its own line as well as its own hue. */
:root[data-theme=signal] [data-alignment=hunter]{--align-style:solid}
:root[data-theme=signal] [data-alignment=glitched]{--align-style:dashed}
:root[data-theme=signal] [data-alignment=sympathizer]{--align-style:dotted}
:root[data-theme=signal] [data-alignment=human]{--align-style:double}

/* ---------------------------------------------------------------- shared by every theme */
body{transition:background-color .6s ease}
:is(header,aside,main,.pane,.launch){transition-property:background-color,border-color,box-shadow,color;transition-duration:.6s}
:focus-visible{outline-width:var(--focus-w)}
/* The scenes bring their own dark lighting, so their copy keeps light ink in every theme. */
#robot-dialogue:is(.is-doom,.is-kill,.is-dawn,.is-panic,.is-exec,.is-victory){--text:#e9edf2;--text-2:#c8d0d8;--muted:#9aa4af;--line:#2a323b;--edge:#2a323b;--tint:#fff;--name-l:74%;color:var(--text)}
@media (prefers-reduced-motion:reduce){
  body,:is(header,aside,main,.pane,.launch){transition:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* This file loads before the component styles, so the treatments below carry :root[data-theme]
   to outrank them, and use :where() where a resting style must still lose to hover and selection. */

/* ================================================================ Floodlight: structure, not shading */
/* Resting rings already use --edge, which Floodlight makes bright. These rules add solid marks
   where the other themes rely on soft tints, which vanish on a dim panel. */
:root[data-theme=floodlight] #record .record-dialogue:not(.record-reply){border-color:var(--edge);background:var(--panel)}
:root[data-theme=floodlight] #record .record-system:not(.record-doom):not(.record-kill){background:var(--panel);border-left-width:3px}
:root[data-theme=floodlight] #record .record-vote{box-shadow:inset 0 0 0 1px var(--line)}
:root[data-theme=floodlight] #record .record-thread{border-left-color:var(--line)}
:root[data-theme=floodlight] #record .record-nomination{background:color-mix(in srgb,var(--accent2) 14%,var(--bg));border-left:3px solid var(--accent2)}
:root[data-theme=floodlight] #record .ev.private{background:color-mix(in srgb,var(--priv) 14%,var(--bg))}
:root[data-theme=floodlight] .vote-meter i{height:8px;box-shadow:inset 0 0 0 1px var(--edge-strong)}
:root[data-theme=floodlight] .vote-meter i.yes{box-shadow:none}
:root[data-theme=floodlight] .meter-dots i{box-shadow:inset 0 0 0 1px var(--edge-strong)}
:root[data-theme=floodlight] .meter-dots i.on{box-shadow:none}
/* Selected things wear a thick ring. */
:root[data-theme=floodlight] .script-card[aria-checked=true]{box-shadow:inset 0 0 0 2px var(--accent)}
:root[data-theme=floodlight] .model-card:has(input:checked){box-shadow:inset 0 0 0 2px var(--ok)}
:root[data-theme=floodlight] #characters .character:has(input:checked){box-shadow:inset 0 0 0 2px var(--alignment)}
:root[data-theme=floodlight] #app .portrait-seat[data-alignment]:not([data-alignment=unknown]){border-width:2px;border-color:var(--alignment)}
:root[data-theme=floodlight] .tool[open]>summary,:root[data-theme=floodlight] .toggle-chip:has(input:checked){box-shadow:inset 0 0 0 2px var(--accent)}
:root[data-theme=floodlight] .picker .pick[aria-checked=true],:root[data-theme=floodlight] .picker.multi .pick:has(input:checked){box-shadow:inset 0 0 0 3px var(--name,var(--accent))}
/* The light: the speaker and your turn are lit hard; the rest of the room stays dark. */
:root[data-theme=floodlight] #app .portrait-seat.current-speaker{background:color-mix(in srgb,var(--accent) 22%,var(--bg));box-shadow:inset 5px 0 var(--accent),inset 0 0 0 1px var(--accent)}
:root[data-theme=floodlight] #app .portrait-seat.current-speaker strong{text-decoration:underline 2px var(--accent);text-underline-offset:3px}
:root[data-theme=floodlight] #app #action.my-turn:not([data-time=low]):not([data-time=critical]){background:color-mix(in srgb,var(--mode) 14%,var(--panel));box-shadow:inset 0 4px 0 var(--mode)}
:root[data-theme=floodlight] #app #action[data-time]:before{height:5px}
:root[data-theme=floodlight] #app .turn-glyph{box-shadow:inset 0 0 0 2px currentColor}
:root[data-theme=floodlight] #app .portrait-seat .seat-activity:before{box-shadow:0 0 0 2px var(--bg),0 0 0 3px currentColor}
:root[data-theme=floodlight] .status-pill{box-shadow:inset 0 0 0 1.5px currentColor}
/* Hard blinks instead of slow fades: a half-lit pulse is invisible at low brightness. */
:root[data-theme=floodlight] #timer.on.low{background:var(--danger);color:#000;box-shadow:none}
@media (prefers-reduced-motion:no-preference){
  :root[data-theme=floodlight] #timer.on.low,:root[data-theme=floodlight] #app .portrait-seat .seat-activity:before,:root[data-theme=floodlight] .status-pill.is-processing:before,:root[data-theme=floodlight] #portrait-focus .portrait-badge:before{animation-timing-function:steps(1,end)}
}
/* The banner: no drifting motes or rays, and a solid shade under the copy. */
:root[data-theme=floodlight] #app #portrait-focus[data-time]{--ray:transparent;--scrim:#000}
:root[data-theme=floodlight] #app #portrait-focus[data-time]:before{display:none}
:root[data-theme=floodlight] #app #portrait-focus[data-time] .portrait-copy:before{background:linear-gradient(90deg,transparent,#000e 50px 90%,transparent)}
:root[data-theme=floodlight] #app #portrait-focus[data-time] .portrait-copy{text-shadow:0 0 3px #000,0 1px 1px #000}
:root[data-theme=floodlight] #app #portrait-focus[data-time] .meter{background:#000;box-shadow:inset 0 0 0 1px var(--line);backdrop-filter:none}
:root[data-theme=floodlight] #app #portrait-focus .portrait-badge{box-shadow:inset 0 0 0 1.5px currentColor}
:root[data-theme=floodlight] .phase-rule:before,:root[data-theme=floodlight] .phase-rule:after{height:2px}
:root[data-theme=floodlight] .dialogue-copy{border-width:3px;box-shadow:0 10px 40px #000,inset 0 0 0 1px var(--edge)}
:root[data-theme=floodlight] .dialogue-nameplate{border-width:3px}
:root[data-theme=floodlight] #tip,:root[data-theme=floodlight] .tool-panel,:root[data-theme=floodlight] .turn-info-body{box-shadow:0 12px 40px #000,0 0 0 1.5px var(--edge-strong)}

/* ================================================================ Dossier: a case file on the desk */
:root[data-theme=dossier] body{background-image:radial-gradient(#5a3f1a0d 1px,transparent 1.2px);background-size:5px 5px}
:root[data-theme=dossier] #app>header{box-shadow:0 1px 0 var(--line),0 6px 14px -12px var(--shade)}
:root[data-theme=dossier] #app>header h1{width:fit-content;max-width:100%;padding:1px 6px 0;border:2px solid currentColor;border-radius:3px;color:var(--danger);font-family:"Courier Prime","Courier New",Courier,monospace;font-weight:800;transform:rotate(-1.2deg);opacity:.9;overflow:hidden;text-overflow:clip}
@media (min-width:761px){:root[data-theme=dossier] #app>header h1{padding:1px 8px 0;letter-spacing:.2em}}
:root[data-theme=dossier] #setup h2{font-family:Georgia,"Times New Roman",serif;letter-spacing:.02em;color:var(--text)}
/* Cards lie on the paper with a real shadow; recessed wells stay for chips and fields. */
:root[data-theme=dossier] :where(.script-card,.model-card,.faction,.si-facts>div){background:var(--panel2);box-shadow:inset 0 0 0 1px var(--edge),0 1px 2px color-mix(in srgb,var(--shade) 50%,transparent)}
:root[data-theme=dossier] #characters .character .portrait-setup{filter:grayscale(1) contrast(.85) brightness(1.2) opacity(.55)}
:root[data-theme=dossier] #characters .character:has(input:checked) .portrait-setup{filter:none}
:root[data-theme=dossier] .ring .table-top{background:radial-gradient(ellipse at 50% 35%,#e9dcc4,#cdb994 75%);box-shadow:inset 0 0 0 1px #b39f7b,inset 0 -6px 14px -6px #6b4f2a55,0 10px 22px -14px var(--shade)}
:root[data-theme=dossier] .seat-token.filled{background:color-mix(in srgb,var(--seat) 18%,var(--panel2))}
:root[data-theme=dossier] #btnStart:not(:disabled){box-shadow:0 3px 0 color-mix(in srgb,var(--accent) 60%,#000),0 8px 16px -8px var(--shade)}
/* The speaker is marked in highlighter; the record reads as typed notes. */
:root[data-theme=dossier] #app .portrait-seat.current-speaker{background:linear-gradient(100deg,transparent 1%,var(--marker) 3% 92%,transparent 97%);box-shadow:inset 3px 0 var(--accent)}
:root[data-theme=dossier] #app .portrait-seat.current-speaker .seat-activity{color:var(--text)}
:root[data-theme=dossier] #record .record-dialogue:not(.record-reply){background:var(--panel2);border-color:var(--edge);box-shadow:0 1px 2px color-mix(in srgb,var(--shade) 45%,transparent)}
:root[data-theme=dossier] #record .record-system:not(.record-doom):not(.record-kill){background:transparent;border-left-style:dashed}
:root[data-theme=dossier] .phase-rule:before,:root[data-theme=dossier] .phase-rule:after{height:0;background:none;border-top:1.5px dashed currentColor}
:root[data-theme=dossier] .phase-title{font-family:"Courier Prime","Courier New",Courier,monospace;font-weight:800}
/* Deaths are stamped. */
:root[data-theme=dossier] #record :is(.record-system.execution,.record-system.death,.record-system.kill_switch) .record-event-label{width:auto;height:auto;padding:1px 6px;border:1.5px solid currentColor;border-radius:2px;background:none;font-weight:800;letter-spacing:.12em;transform:rotate(-2deg)}
:root[data-theme=dossier] #record :is(.record-system.execution,.record-system.death,.record-system.kill_switch){font-weight:600;border-left-style:solid}
:root[data-theme=dossier] #record .record-system.record-doom{color:var(--danger);border-left-color:var(--danger);background:color-mix(in srgb,var(--danger) 8%,transparent)}
:root[data-theme=dossier] #record .record-system.record-doom .record-event-label{color:var(--danger);background:none}
:root[data-theme=dossier] #record .record-system.record-kill{color:#0b5f78;border-left-color:#0b7fa0;background:#0b7fa014}
:root[data-theme=dossier] #record .record-system.record-kill .record-event-label{color:#0b7fa0;background:none}
:root[data-theme=dossier] #app #action.my-turn:not([data-time=low]):not([data-time=critical]){box-shadow:inset 0 3px 0 var(--mode),0 -10px 20px -14px var(--shade)}
:root[data-theme=dossier] .tool-panel,:root[data-theme=dossier] .turn-info-body,:root[data-theme=dossier] #tip{box-shadow:0 14px 34px -12px var(--shade),0 0 0 1px var(--line)}
:root[data-theme=dossier] #overlay .box{box-shadow:0 20px 60px -20px #000a}
:root[data-theme=dossier] .dialogue-copy{box-shadow:0 12px 40px -10px #2a1d0c99,inset 0 0 0 4px #fff8}
:root[data-theme=dossier] .dialogue-nameplate{box-shadow:0 -4px 14px -8px #2a1d0c66}
:root[data-theme=dossier] #app .notebook:not(.is-moving){box-shadow:0 30px 50px -22px #2a1d0cbb,0 0 0 1px #140e0b,inset 0 1px #6a503d}
/* Scenes dim the room first: their veils were drawn for a dark table, so the paper goes dark beneath them. */
:root[data-theme=dossier] :is(.doom-veil,.kill-veil,.dawn-veil,.panic-veil,.exec-veil,.victory-veil){background-color:#140d08c4}
/* The window onto the world: a bright sky by day with dark ink; a dark sky and light ink from dusk to dawn. */
:root[data-theme=dossier] #app #portrait-focus[data-time]{--text:#f7f2e8;--text-2:#e4dccd;--muted:#cfc6b6;--well:#1c1813;--edge:#3a3228;--tint:#fff;--accent:#4fd1c5;--accent2:#f6ad55;--danger:#fc8181;--ok:#68d391;--you:#63b3ed;--name-l:74%}
:root[data-theme=dossier] #app #portrait-focus:is([data-time=morning],[data-time=afternoon],[data-time=epilogue]){--text:#1f1a14;--text-2:#3b3329;--muted:#5d5244;--well:#fffcf5;--edge:#cbbfa8;--tint:#000;--scrim:#fffcf5;--accent:#00675e;--accent2:#9a5000;--danger:#b3261e;--ok:#1c7a3c;--you:#1d5dbf;--name-l:33%}
:root[data-theme=dossier] #portrait-focus[data-time=morning]{--sky-top:#a9d3f0;--sky-bottom:#e8f2f3;--sky-glow:#fff3b0aa;--sun-edge:#ffc43d;--ray:#ffd76a88;--mote:#fff}
:root[data-theme=dossier] #portrait-focus[data-time=afternoon]{--sky-top:#f2cf8e;--sky-bottom:#f8ebcf;--sky-glow:#ffb43c88;--sun-edge:#ff9d1c;--ray:#ffb43c77;--mote:#fff6dc}
:root[data-theme=dossier] #portrait-focus[data-time=epilogue]{--sky-top:#bfe6dc;--sky-bottom:#eef6f0;--sky-glow:#6fd6bd55;--sun-edge:#3fbfa3;--ray:#3fbfa333;--mote:#3fbfa3}
:root[data-theme=dossier] #app #portrait-focus:is([data-time=morning],[data-time=afternoon],[data-time=epilogue]) .portrait-copy{text-shadow:0 0 6px #fffc,0 0 2px #fff}
:root[data-theme=dossier] #app #portrait-focus[data-time] .meter{box-shadow:inset 0 0 0 1px var(--edge),0 2px 6px -3px #0006}

/* ================================================================ Signal: a radar console */
/* Line patterns carry the factions alongside their hues. */
:root[data-theme=signal] #app .portrait-seat[data-alignment]:not([data-alignment=unknown]){border-width:2px;border-style:var(--align-style);border-color:var(--alignment)}
:root[data-theme=signal] #characters .character:has(input:checked){box-shadow:none;outline:2px var(--align-style) var(--alignment);outline-offset:-2px}
:root[data-theme=signal] .reveal-card{box-shadow:none;outline:2px var(--align-style) var(--alignment,var(--edge-strong));outline-offset:-2px}
:root[data-theme=signal] .reveal-card.you{outline:2px solid var(--you)}
:root[data-theme=signal] .victory-face{border-style:var(--align-style)}
:root[data-theme=signal] .picker .pick[data-alignment][aria-checked=true]{box-shadow:none;outline:2px var(--align-style) var(--alignment);outline-offset:-2px}
:root[data-theme=signal] #characters .role-alignment-title:before{border-radius:1px;background:none;border:2px var(--align-style) var(--alignment)}
/* YES is hatched magenta and NO is solid blue: two cues that survive any colour vision. */
:root[data-theme=signal] .vote-meter i{height:8px}
:root[data-theme=signal] .vote-meter i.yes{background:repeating-linear-gradient(135deg,var(--danger) 0 3px,color-mix(in srgb,var(--danger) 35%,transparent) 3px 5px)}
:root[data-theme=signal] .vote-sides .yes b{text-decoration:underline 2px wavy;text-underline-offset:3px}
:root[data-theme=signal] #record :is(.record-system.execution,.record-system.death,.record-system.kill_switch){border-left:4px dashed var(--danger)}
:root[data-theme=signal] #app .portrait-seat.dead .seat-art,:root[data-theme=signal] .reveal-card.dead img{background:repeating-linear-gradient(135deg,color-mix(in srgb,var(--muted) 30%,transparent) 0 2px,transparent 2px 6px)}
:root[data-theme=signal] .status-pill.invalid:before{border-radius:1px;transform:rotate(45deg)}
/* The rail's current step is a diamond, not a larger dot. */
:root[data-theme=signal] .track-step.on:after{border-radius:1px;transform:rotate(45deg)}
:root[data-theme=signal] .track-step.on:hover:after{transform:rotate(45deg) scale(1.3)}
:root[data-theme=signal] #app .portrait-seat.current-speaker{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 20%,transparent),transparent 85%);box-shadow:inset 4px 0 var(--accent),inset 0 0 0 1px color-mix(in srgb,var(--accent) 55%,transparent)}
:root[data-theme=signal] #record .record-dialogue:not(.record-reply){border-color:var(--edge)}
:root[data-theme=signal] body{background-image:linear-gradient(color-mix(in srgb,var(--accent) 4%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--accent) 4%,transparent) 1px,transparent 1px);background-size:32px 32px}
:root[data-theme=signal] #app>header h1{font-family:var(--mono);letter-spacing:.24em}
/* The sky becomes a scope: range rings and a sweep centred on the sun's (or moon's) bearing. */
:root[data-theme=signal] #app #portrait-focus[data-time]:before{inset:auto;left:var(--sun-x);top:var(--sun-y);width:640px;height:640px;margin:-320px 0 0 -320px;border-radius:50%;opacity:.55;background:conic-gradient(from 0deg,transparent 0 78%,color-mix(in srgb,var(--accent) 12%,transparent) 94%,color-mix(in srgb,var(--accent) 45%,transparent) 100%),repeating-radial-gradient(circle,transparent 0 38px,color-mix(in srgb,var(--accent) 22%,transparent) 38px 39px);background-size:auto;-webkit-mask:none;mask:none;animation:signal-sweep 6s linear infinite}
:root[data-theme=signal] #app #portrait-focus[data-time]{--ray:transparent}
:root[data-theme=signal] #app #portrait-focus[data-time] .meter{background:color-mix(in srgb,var(--well) 94%,transparent);box-shadow:inset 0 0 0 1px var(--edge)}
@keyframes signal-sweep{to{rotate:360deg}}
@media (prefers-reduced-motion:reduce){:root[data-theme=signal] #app #portrait-focus[data-time]:before{animation:none}}
:root[data-theme=signal] body.portraits-still #app #portrait-focus[data-time]:before{animation:none}

/* ---------------------------------------------------------------- the picker */
.theme-settings{display:grid;gap:6px;margin:0;padding:0;border:0;min-width:0}
.theme-settings legend{padding:0 0 6px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.theme-option{position:relative;display:grid;grid-template-columns:62px minmax(0,1fr);align-items:center;gap:11px;padding:7px 9px 7px 7px;border-radius:10px;cursor:pointer;box-shadow:inset 0 0 0 1px var(--edge);transition:box-shadow .15s,background .15s}
.theme-option:hover{box-shadow:inset 0 0 0 1px var(--edge-strong)}
.theme-option:has(input:checked){background:color-mix(in srgb,var(--accent) 9%,transparent);box-shadow:inset 0 0 0 2px var(--accent)}
.theme-option:has(input:focus-visible){outline:var(--focus-w) solid var(--accent);outline-offset:2px}
.theme-option input{position:absolute;opacity:0;pointer-events:none}
.theme-option strong{display:block;font-size:13px;color:var(--text)}
.theme-option small{display:block;margin-top:1px;font-size:11px;line-height:1.35;color:var(--muted)}
/* Swatches are drawn in each theme's own colours, so they stay put whatever the page wears. */
.theme-swatch{position:relative;display:grid;grid-template-columns:1fr 1fr;align-content:end;gap:3px;height:42px;padding:5px;border-radius:7px;background:var(--s-bg);box-shadow:inset 0 0 0 1px var(--s-line)}
.theme-swatch:before{content:"";position:absolute;left:5px;right:5px;top:5px;height:9px;border-radius:2px;background:var(--s-panel);box-shadow:inset 3px 0 var(--s-accent)}
.theme-swatch i{height:6px;border-radius:99px}
.theme-swatch i:nth-child(1){background:var(--s-yes)}.theme-swatch i:nth-child(2){background:var(--s-no)}
.theme-swatch i:nth-child(3){background:var(--s-text);opacity:.85}.theme-swatch i:nth-child(4){background:var(--s-accent)}
.theme-swatch[data-swatch=midnight]{--s-bg:#0b0d10;--s-panel:#171c22;--s-line:#2b3540;--s-text:#d7dde5;--s-accent:#4fd1c5;--s-yes:#fc8181;--s-no:#68d391}
.theme-swatch[data-swatch=floodlight]{--s-bg:#000;--s-panel:#1a1c1f;--s-line:#8a929c;--s-text:#fff;--s-accent:#2ff3de;--s-yes:#ff6161;--s-no:#45e585}
.theme-swatch[data-swatch=dossier]{--s-bg:#ede6d8;--s-panel:#fffcf5;--s-line:#857760;--s-text:#1f1a14;--s-accent:#00756b;--s-yes:#b3261e;--s-no:#1c7a3c}
.theme-swatch[data-swatch=signal]{--s-bg:#060a13;--s-panel:#152034;--s-line:#7189b0;--s-text:#f3f7fd;--s-accent:#7fe3ff;--s-yes:#ff4f9a;--s-no:#4f9dff}
.theme-swatch[data-swatch=signal] i:nth-child(1){background:repeating-linear-gradient(135deg,#ff4f9a 0 2px,#ff4f9a55 2px 4px)}
.theme-swatch[data-swatch=auto]{background:linear-gradient(135deg,#0b0d10 0 50%,#ede6d8 50%);--s-line:#7f8a97;--s-panel:linear-gradient(90deg,#171c22 50%,#fffcf5 50%);--s-text:#7f8a97;--s-accent:#4fd1c5;--s-yes:#df4b50;--s-no:#1c7a3c}
.theme-menu{margin:16px 0 6px;padding-top:12px;border-top:1px solid var(--line)}
.theme-menu h3{margin:0 0 10px}
.theme-menu .theme-settings{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}