/* Receiver, dark: the same controls after hours. Slate plastic in place of
   brushed aluminium, as on the old music workstations (FL Studio before its
   vector redraw): dark ribbed knobs with a white pointer and a lit orange
   arc, printed light legends, green LED meters, and the display window
   glowing amber instead of cyan. Everything here sits under
   [data-theme="dark"], so the light look is untouched. */

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #3b4349;
  --panel: #2f363b;
  --raise: #4a535a;
  --line: #262c30;
  --line-strong: #1a1e21;
  --text: #e6ecef;
  --soft: #c9d2d7;
  --dim: #adb8bf;
  --accent: #ff9f2e;
  --accent-ink: #1a1e21;
  --live: #ff5245;
  --ok: #8be05c;
  --glass: #0c0e0f;
  --amber: #ffae42;
  --amber-dim: #c58b3f;
  --amber-pale: #efe3d1;
  accent-color: #ff9f2e;
  scrollbar-color: #5b656c transparent;
}

[data-theme="dark"] body, :root[data-theme="dark"] {
  background-color: #3b4349;
  background-image: linear-gradient(180deg, #434c52, #363d42 55%, #30373b);
  background-attachment: fixed; /* one sweep per screen, not a seam every screenful */
  color: var(--text);
}
[data-theme="dark"] ::selection { background: rgba(255, 159, 46, 0.35); }

/* Printed legends: light on plastic, no engraving highlight. */
[data-theme="dark"] :is(.bar .mark, .inputs h2, .page h2, .panel-head, .news-wrap h2, .tag, .btn, .quiet, th,
  .transcript summary, details summary, .status, .plan, .field, .check, .live) {
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.45);
}
[data-theme="dark"] .bar {
  background: linear-gradient(180deg, #2b3136, #1d2124); border-bottom-color: #111315;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .bar .mark { color: var(--amber); text-shadow: 0 0 8px rgba(255, 174, 66, 0.6); }
[data-theme="dark"] .bar .quiet { background: #23282c; color: #b9c2c8; border-color: #3a4147; box-shadow: none; }

/* Keys: dark moulded plastic with a lit edge. */
[data-theme="dark"] :is(.btn, .quiet) {
  background: linear-gradient(180deg, #5d676e, #464f55 52%, #3b4348);
  color: var(--text); border: 1px solid #1d2225;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 2px 0 #1c2023, 0 3px 4px rgba(0, 0, 0, 0.35);
}
[data-theme="dark"] :is(.btn, .quiet):hover:not(:disabled) {
  color: #fff; border-color: #14181a; background: linear-gradient(180deg, #69747b, #4f585f 52%, #424a50);
}
[data-theme="dark"] :is(.btn, .quiet):active:not(:disabled) {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 0 #1c2023;
}
[data-theme="dark"] .btn.rec, [data-theme="dark"] .btn.go.stop { background: linear-gradient(180deg, #5d676e, #464f55 52%, #3b4348); }
[data-theme="dark"] .studio[data-rec="on"] .btn.rec { background: linear-gradient(180deg, #353c41, #444d53); }
[data-theme="dark"] .btn.rec::before, [data-theme="dark"] .btn.go::before { background: #4a1a18; }
[data-theme="dark"] .studio[data-rec="on"] .btn.rec::before { background: #ff3b33; box-shadow: 0 0 8px #ff3b33; }
[data-theme="dark"] .btn.go.stop { color: #ff8a7f; }

[data-theme="dark"] :is(input, select, textarea) {
  background: #23282b; border-color: #15181a; color: var(--text);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] ::placeholder { color: #9aa5ac; }
[data-theme="dark"] :is(input, select, textarea):focus-visible { border-color: var(--accent); }
[data-theme="dark"] :focus-visible { outline-color: var(--accent); }

[data-theme="dark"] .inputs .group { border-bottom-color: #262c30; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06); }
[data-theme="dark"] :is(.inputs h2, .page h2) { color: var(--dim); }
[data-theme="dark"] .mic { border-bottom-color: #262c30; }

/* Green LED meters, as on a mixer strip. */
[data-theme="dark"] .meter { background: #111416; box-shadow: inset 0 1px 2px #000, 0 1px 0 rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .meter::after { background: repeating-linear-gradient(90deg, #3f7f2b 0 4px, transparent 4px 6px); }
[data-theme="dark"] .meter.on::after {
  background: repeating-linear-gradient(90deg, var(--ok) 0 4px, transparent 4px 6px);
  filter: drop-shadow(0 0 3px rgba(139, 224, 92, 0.7));
}

[data-theme="dark"] :is(.program, .thumb) { border-color: #15181a; box-shadow: 0 0 0 1px #0d0f10, 0 1px 0 rgba(255, 255, 255, 0.08); }
[data-theme="dark"] .on-air, [data-theme="dark"] .thumb .tag { color: var(--amber); text-shadow: 0 0 6px rgba(255, 174, 66, 0.8); }
[data-theme="dark"] .thumb[aria-pressed="true"] { border-color: #3a2610; }
[data-theme="dark"] .thumb[aria-pressed="true"]:not(.on) { box-shadow: 0 0 0 1px var(--amber), 0 0 8px rgba(255, 174, 66, 0.45); }
[data-theme="dark"] .cam .tag { color: var(--dim); }

/* The display window, amber. */
[data-theme="dark"] .panel {
  background: radial-gradient(120% 80% at 50% 0%, #1d1710, var(--glass) 70%);
  border-color: #15181a; color: var(--amber);
  box-shadow: 0 0 0 1px #0d0f10, inset 0 0 40px rgba(255, 174, 66, 0.04), 0 1px 0 rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .panel-head { color: var(--amber-dim); }
[data-theme="dark"] .panel-head .state-word { color: var(--amber); text-shadow: 0 0 6px rgba(255, 174, 66, 0.7); }
[data-theme="dark"] .panel-head .quiet { background: #15191b; color: var(--amber-dim); border-color: #2e2618; box-shadow: none; text-shadow: none; }
[data-theme="dark"] .panel-head .quiet:hover:not(:disabled) { color: var(--amber); border-color: var(--amber-dim); background: #15191b; }
[data-theme="dark"] .state:is([data-state="idle"], [data-state="off"]) { background: #4a3a24; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.6); }
[data-theme="dark"] .state[data-state="live"] { background: var(--amber); box-shadow: 0 0 8px var(--amber); }
[data-theme="dark"] .state[data-state="working"] { background: var(--amber-dim); box-shadow: 0 0 6px rgba(255, 174, 66, 0.5); }
[data-theme="dark"] .summary { color: var(--amber-dim); }
[data-theme="dark"] .topic { border-top-color: rgba(255, 174, 66, 0.14); }
[data-theme="dark"] .topic .title { color: var(--amber); text-shadow: 0 0 10px rgba(255, 174, 66, 0.4); }
[data-theme="dark"] :is(.topic .hook, .news .angle) { color: var(--amber-pale); opacity: 0.85; }
[data-theme="dark"] .news-wrap h2 { color: var(--amber-dim); }
[data-theme="dark"] .news .item { border-top-color: rgba(255, 174, 66, 0.14); }
[data-theme="dark"] .news .headline { color: #f6efe4; }
[data-theme="dark"] .news .meta { color: var(--amber-dim); }
[data-theme="dark"] body.window { background: var(--glass); }

[data-theme="dark"] .lines { border-top-color: #262c30; color: var(--soft); }
[data-theme="dark"] .lines .clock { color: var(--dim); }

[data-theme="dark"] :is(.art, .program) { border-color: #15181a; }
[data-theme="dark"] .art.empty { color: var(--amber-dim); }
[data-theme="dark"] :is(.show-row, .episodes, .episodes .episode, .page-head) { border-color: #262c30; box-shadow: none; }
[data-theme="dark"] .bar nav.primary a::before { background: #2a2f33; }
[data-theme="dark"] .bar nav.primary a[aria-current="page"]::before { background: var(--amber); box-shadow: 0 0 6px var(--amber); }
[data-theme="dark"] .transport {
  background: linear-gradient(180deg, #454e54, #3b4349); border-bottom-color: #22272b;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05), 0 8px 14px -10px rgba(0, 0, 0, 0.6);
}
[data-theme="dark"] .status { background: var(--glass); color: var(--amber); border-color: #15181a; text-shadow: 0 0 6px rgba(255, 174, 66, 0.6); }
[data-theme="dark"] .status.live { color: #ff6a5f; text-shadow: 0 0 6px rgba(255, 90, 80, 0.7); }
[data-theme="dark"] .present li { background: var(--glass); color: var(--amber); border-color: #15181a; }
[data-theme="dark"] :is(td, th) { border-bottom-color: #2a3035; }
[data-theme="dark"] .public-episodes li { border-top-color: #2a3035; }
[data-theme="dark"] .renders .take { border-bottom-color: #262c30; }

/* Knobs: dark ribbed plastic, white pointer, orange arc. */
[data-theme="dark"] .dial .knob { color: #f3f6f8; }
[data-theme="dark"] .dial .skirt {
  background:
    radial-gradient(farthest-side, transparent 78%, rgba(0, 0, 0, 0.45) 79%, transparent 100%),
    repeating-conic-gradient(#59636a 0 4deg, #2a3035 4deg 8deg);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.5), 0 1px 1px rgba(0, 0, 0, 0.6);
}
[data-theme="dark"] .dial .cap {
  background: radial-gradient(circle at 38% 30%, #7d888f, #4a535a 42%, #2b3136 78%, #23282c);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.25), inset 0 -2px 3px rgba(0, 0, 0, 0.45), 0 0 0 1px #15181a;
}
[data-theme="dark"] .dial .pointer::after { box-shadow: 0 0 3px rgba(255, 255, 255, 0.5); }
[data-theme="dark"] .dial .knob:focus-visible { outline-color: var(--accent); }
[data-theme="dark"] .dial .pos { color: #9aa5ac; text-shadow: none; opacity: 1; }
[data-theme="dark"] .dial .pos.on { color: var(--amber); text-shadow: 0 0 6px rgba(255, 174, 66, 0.75); }
[data-theme="dark"] .dial.smooth { --tick: #6d777e; --arc: var(--amber); }
[data-theme="dark"] .dial.smooth .body::after { filter: drop-shadow(0 0 3px rgba(255, 174, 66, 0.7)); }
[data-theme="dark"] .dial-field .legend { color: var(--dim); text-shadow: none; }
[data-theme="dark"] .dial-field output { color: var(--amber); text-shadow: 0 0 5px rgba(255, 174, 66, 0.6); }

/* Toggles: the same chrome lever in a dark steel nut. */
[data-theme="dark"] .toggle .nut { background: linear-gradient(135deg, #b9c1c7, #6a737a 50%, #363c41); }
[data-theme="dark"] .toggle .bush { background: radial-gradient(circle at 40% 35%, #c9ced3, #5d656b 60%, #22272a); }
[data-theme="dark"] .toggle .legend { color: var(--dim); }
[data-theme="dark"] .toggle > input:not(:checked) ~ .lo, [data-theme="dark"] .toggle > input:checked ~ .hi { color: var(--amber); text-shadow: 0 0 6px rgba(255, 174, 66, 0.6); }
[data-theme="dark"] .toggle > input:focus-visible ~ .switch { outline-color: var(--accent); }
[data-theme="dark"] .bar .theme-switch > input:not(:checked) ~ .lo,
[data-theme="dark"] .bar .theme-switch > input:checked ~ .hi { color: var(--amber); text-shadow: 0 0 6px rgba(255, 174, 66, 0.6); }
[data-theme="dark"] .tile { border-color: #15181a; box-shadow: 0 0 0 1px #0d0f10; }
[data-theme="dark"] .tile figcaption { color: var(--amber); text-shadow: 0 0 6px rgba(255, 174, 66, 0.7); }
[data-theme="dark"] .call-key::before { background: #24381c; }
[data-theme="dark"] .call-key[aria-pressed="true"]::before { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
[data-theme="dark"] .pair .code { color: var(--amber); text-shadow: 0 0 8px rgba(255, 174, 66, 0.7); }
[data-theme="dark"] .viewfinder { border-color: #15181a; box-shadow: 0 0 0 1px #0d0f10; }
/* After hours the rocker is the illuminated kind: smoked amber plastic, dark
   until on, then lit from inside, the light strongest in the half that
   stands proud. */
[data-theme="dark"] .rocker .housing {
  background: linear-gradient(180deg, #202427, #121416);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 1px 0 1px rgba(255, 255, 255, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .rocker .paddle { background: #0d0a06; }
[data-theme="dark"] .rocker .paddle span { color: rgba(214, 170, 110, 0.55); }
[data-theme="dark"] .rocker .paddle .on {
  background: linear-gradient(180deg, #4a3b26 0%, #33291a 50%, #261e13 100%);
  box-shadow: inset 0 1px 0 rgba(255, 220, 160, 0.18);
}
[data-theme="dark"] .rocker .paddle .off {
  background: linear-gradient(180deg, #0d0a06 0%, #18120a 60%, #1f180e 100%);
  box-shadow: inset 0 3px 3px -1px rgba(0, 0, 0, 0.9);
}
[data-theme="dark"] .rocker > input:checked ~ .housing .paddle { box-shadow: 0 0 9px rgba(255, 174, 66, 0.45); }
[data-theme="dark"] .rocker > input:checked ~ .housing .off {
  background: linear-gradient(180deg, #ffd28a 0%, #ffb24a 45%, #f0952c 100%);
  box-shadow: inset 0 1px 0 rgba(255, 245, 220, 0.7);
  color: #4a2a06;
}
[data-theme="dark"] .rocker > input:checked ~ .housing .on {
  background: linear-gradient(0deg, #8a5212 0%, #b46f1e 55%, #c97f25 100%);
  box-shadow: inset 0 -3px 3px -1px rgba(60, 30, 0, 0.7), inset 0 2px 2px -1px rgba(60, 30, 0, 0.5);
  color: #3a2005;
}
[data-theme="dark"] .rocker > input:checked ~ .housing .on::before { box-shadow: none; }
[data-theme="dark"] .rocker .legend { color: var(--dim); }

/* Plays, after hours: amber. */
[data-theme="dark"] .plays-deck { color: var(--amber); background: radial-gradient(120% 90% at 30% 0%, #1c1710, var(--glass) 70%); box-shadow: 0 0 0 1px #111315; }
[data-theme="dark"] :is(.readouts dt, .chart figcaption, .apps .n) { color: var(--amber-dim); }
[data-theme="dark"] .readouts dd { color: var(--amber); text-shadow: 0 0 8px rgba(255, 174, 66, 0.55); }
[data-theme="dark"] :is(.chart rect, .apps rect) { fill: var(--amber); }
[data-theme="dark"] .chart rect { filter: drop-shadow(0 0 2px rgba(255, 174, 66, 0.45)); }
[data-theme="dark"] .apps .name { color: var(--amber-pale); }
[data-theme="dark"] .apps svg { background: #221d15; }