/* Colour themes, shared by every page (player, schedule, DJ portal, admin and the dnbloco.com widget).
   themes.js puts `data-set` (skanka | open; none for Loco), `data-theme` (the variant id) and `data-party="1"` on <html>.
   Variants: loco-dark, loco-light, skankamotive-rgy, skankamotive-two-tone, open-loco-neon-horizon, open-loco-sunset-groove.
   Colours only: no layout or type sizes live here. Checked by tools/qa/contrast.mjs (WCAG): token values stay plain hex
   so the script can read them. Token notes:
     --ring      control boundary (play ring, inputs, switches), at least 3:1 on --bg and --panel
     --on-accent text on an --accent fill (primary buttons, pressed chips)
     --sig/--sig2 signature accent layers (decoration only, behind content); --sig2-h is the height of the --sig2 band      */

/* ---- no JS yet (or no saved choice): follow the system, like the old pages did ---- */
:root {
  --confetti: .22; --glow: 45%;
  color-scheme: light dark;
  --bg: #f2f6fb; --fg: #0b1626; --muted: #4a5b75; --line: #b9c8dc; --panel: #e4ecf6; --ring: #6b7f9c;
  --accent: #0a58ca; --on-accent: #ffffff; --live: #c42b22; --excl: #5b3fd1; --ok: #14702f; --bad: #b3211b; --amber: #8a5200;
  --pa: #0a58ca; --pb: #19b6e8; --pc: #7fb8ff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #060a12; --fg: #e8f1ff; --muted: #94a8c8; --line: #22344f; --panel: #0c1424; --ring: #4a6f9f;
    --accent: #1fb6ff; --on-accent: #031018; --live: #ff6b5e; --excl: #b79cff; --ok: #47d98a; --bad: #ff8f86; --amber: #f4b740;
    --pa: #1fb6ff; --pb: #2f6bff; --pc: #7de3ff;
  }
}

/* ---- 1. Loco Dark ---- */
html:root[data-theme="loco-dark"] {
  color-scheme: dark;
  --bg: #060a12; --fg: #e8f1ff; --muted: #94a8c8; --line: #22344f; --panel: #0c1424; --ring: #4a6f9f;
  --accent: #1fb6ff; --on-accent: #031018; --live: #ff6b5e; --excl: #b79cff; --ok: #47d98a; --bad: #ff8f86; --amber: #f4b740;
  --pa: #1fb6ff; --pb: #2f6bff; --pc: #7de3ff; --glow: 55%;
  --sig: radial-gradient(60rem 24rem at 50% -9rem, rgba(31,182,255,.17), transparent 72%), radial-gradient(40rem 20rem at 100% 100%, rgba(47,107,255,.11), transparent 70%);
  --sig2: repeating-linear-gradient(90deg, rgba(31,182,255,.30) 0 2px, transparent 2px 7px); --sig2-h: 96px;
}
/* ---- 2. Loco Light ---- */
html:root[data-theme="loco-light"] {
  color-scheme: light dark;   /* not "light" alone: browsers with a force-dark mode (Opera GX, Chrome flags) would grey it out */
  --bg: #f2f6fb; --fg: #0b1626; --muted: #4a5b75; --line: #b9c8dc; --panel: #e4ecf6; --ring: #6b7f9c;
  --accent: #0a58ca; --on-accent: #ffffff; --live: #b3231b; --excl: #5b3fd1; --ok: #14702f; --bad: #b3211b; --amber: #8a5200;
  --pa: #0a58ca; --pb: #19b6e8; --pc: #7fb8ff; --glow: 28%; --confetti: .16;
  --sig: linear-gradient(180deg, rgba(10,88,202,.08), transparent 15rem), repeating-linear-gradient(115deg, rgba(10,88,202,.06) 0 1px, transparent 1px 24px);
  --sig2: repeating-linear-gradient(0deg, rgba(10,88,202,.18) 0 1px, transparent 1px 9px); --sig2-h: 64px;
}
/* ---- 3. Skankamotive: Red, Gold & Green ---- */
html:root[data-theme="skankamotive-rgy"] {
  color-scheme: dark;
  --bg: #0c0905; --fg: #f6efd9; --muted: #c4b794; --line: #4a3d1c; --panel: #17120b; --ring: #8f7a36;
  --accent: #f2c230; --on-accent: #1a1200; --live: #ff5a48; --excl: #f6c928; --ok: #3fd36c; --bad: #ff8f80; --amber: #f6c928;
  --pa: #e8362a; --pb: #f6c928; --pc: #1fa64a; --glow: 50%;
  --sig: radial-gradient(50rem 22rem at 0 0, rgba(232,54,42,.16), transparent 70%), radial-gradient(50rem 22rem at 100% 0, rgba(31,166,74,.15), transparent 70%), radial-gradient(40rem 16rem at 50% 100%, rgba(246,201,40,.10), transparent 70%);
  --strip: linear-gradient(90deg, #e8362a 0 33.34%, #f6c928 33.34% 66.67%, #1fa64a 66.67%); --strip-h: 5px;
}
/* ---- 4. Skankamotive: Two-Tone ---- */
html:root[data-theme="skankamotive-two-tone"] {
  color-scheme: dark;
  --bg: #0a0a0a; --fg: #ffffff; --muted: #bdbdbd; --line: #4d4d4d; --panel: #161616; --ring: #8a8a8a;
  --accent: #ffffff; --on-accent: #000000; --live: #ffffff; --excl: #b3b3b3; --ok: #d9d9d9; --bad: #ff9a9a; --amber: #e6e6e6;
  --pa: #ffffff; --pb: #8c8c8c; --pc: #ffffff; --glow: 35%;
  --sig: repeating-conic-gradient(#fff 0 25%, #000 0 50%) 0 0 / 12px 12px repeat-y, repeating-conic-gradient(#fff 0 25%, #000 0 50%) 100% 0 / 12px 12px repeat-y;
  --strip: repeating-conic-gradient(#fff 0 25%, #000 0 50%) 0 0 / 8px 8px; --strip-h: 8px;
}
/* ---- 5. Open Loco: Neon Horizon ---- */
html:root[data-theme="open-loco-neon-horizon"] {
  color-scheme: dark;
  --bg: #07031a; --fg: #f6f0ff; --muted: #b9aee0; --line: #3a2a78; --panel: #120a33; --ring: #7a5ad0;
  --accent: #ff3df0; --on-accent: #1a0020; --live: #ff5fb0; --excl: #38d6ff; --ok: #4df0a8; --bad: #ff9aa8; --amber: #ffd84a;
  --pa: #ff3df0; --pb: #28d8ff; --pc: #4a6bff; --glow: 60%;
  --sig: radial-gradient(46rem 24rem at 15% -6rem, rgba(255,61,240,.20), transparent 70%), radial-gradient(46rem 24rem at 90% -4rem, rgba(40,216,255,.16), transparent 70%), radial-gradient(50rem 20rem at 50% 110%, rgba(74,107,255,.20), transparent 70%);
  --sig2: repeating-radial-gradient(ellipse 120% 90% at 50% 150%, transparent 0 14px, rgba(40,216,255,.34) 14px 15px, transparent 15px 28px); --sig2-h: 150px;
  --strip: linear-gradient(90deg, #ff3df0, #28d8ff, #4a6bff, #ff3df0); --strip-h: 4px;
}
/* ---- 6. Open Loco: Sunset Groove ---- */
html:root[data-theme="open-loco-sunset-groove"] {
  color-scheme: dark;
  --bg: #14081f; --fg: #fff3e6; --muted: #d8bfd0; --line: #5a2f55; --panel: #22102f; --ring: #a8627a;
  --accent: #ff8a1f; --on-accent: #220a00; --live: #ff6f61; --excl: #ffc94d; --ok: #6fe39a; --bad: #ff9a9a; --amber: #ffc94d;
  --pa: #ff6f61; --pb: #ffb03a; --pc: #c05cff; --glow: 55%;
  --sig: radial-gradient(60rem 22rem at 50% 105%, rgba(255,138,31,.24), transparent 70%), linear-gradient(180deg, rgba(192,92,255,.11), transparent 18rem);
  --sig2: repeating-linear-gradient(90deg, rgba(255,176,58,.34) 0 5px, transparent 5px 12px); --sig2-h: 90px;
  --strip: linear-gradient(90deg, #ff6f61, #ffb03a, #c05cff); --strip-h: 4px;
}

/* ---- signature accents: fixed, behind the content, never clickable ---- */
html::before, html::after { content: ""; position: fixed; z-index: -1; pointer-events: none; }
html::before { inset: 0; background: var(--sig, none); }
html::after {
  left: 0; right: 0; bottom: 0; height: var(--sig2-h, 0); background: var(--sig2, none);
  -webkit-mask-image: linear-gradient(to top, #000, transparent), repeating-linear-gradient(90deg, #000 0 21px, rgba(0,0,0,.45) 21px 42px, rgba(0,0,0,.8) 42px 63px);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to top, #000, transparent), repeating-linear-gradient(90deg, #000 0 21px, rgba(0,0,0,.45) 21px 42px, rgba(0,0,0,.8) 42px 63px); mask-composite: intersect;
}
/* the two-tone checker lives only in narrow edge columns (never behind text), and only where there is room for them */
html[data-theme="skankamotive-two-tone"]::before { display: none; }
/* the linework band stays off the dense screens (admin, schedule) */
html:has(.tabbar)::after, html:has(main#days)::after { display: none; }
@media (min-width: 720px) { html[data-theme="skankamotive-two-tone"]::before { display: block; opacity: .9; } }
/* an edge strip across the top (the sets) */
html[data-set] body::before { content: ""; position: fixed; left: 0; right: 0; top: 0; height: var(--strip-h, 4px); background: var(--strip, none); z-index: 30; pointer-events: none; }

/* ---- the light bulb ---- */
html .theme-toggle .bulb-fill { opacity: .12; }
html[data-theme="loco-light"] .theme-toggle .bulb-fill { opacity: .9; }
html[data-theme] .theme-toggle { color: var(--fg); opacity: .85; }

/* ---- focus, controls and links ---- */
html :focus-visible, html .tab:focus-visible, html .tabpanel:focus-visible, html input:focus-visible, html select:focus-visible { outline-color: var(--accent); }
html input, html select, html textarea { border-color: var(--ring); }
html input::placeholder, html textarea::placeholder { color: var(--muted); opacity: 1; }
html input:disabled, html select:disabled { opacity: .55; }
html input:focus-visible, html select:focus-visible { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); }
html input[type=range], html .vol input, html .radio-vol input { accent-color: var(--accent); }
html .vol input:focus-visible, html .radio-vol input:focus-visible { box-shadow: none; }
html .vol input:hover, html .radio-vol input:hover { filter: brightness(1.15); }
html .vol button:hover, html .radio-vol button:hover { color: var(--accent); }

/* the play button: ring, glow, hover, playing */
html .play, html #radioToggle {
  border-color: var(--accent); color: var(--fg);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 0 22px -6px color-mix(in srgb, var(--accent) var(--glow), transparent);
}
html .play:hover, html #radioToggle:hover { background: color-mix(in srgb, var(--accent) 16%, var(--bg)); }
html .radio.playing .play, html .radio.playing #radioToggle {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent), 0 0 30px -4px color-mix(in srgb, var(--accent) var(--glow), transparent);
}
html .radio.off-air .play, html .radio.off-air #radioToggle { box-shadow: none; border-color: var(--ring); }
html .radio.off-air .play:hover, html .radio.off-air #radioToggle:hover { background: color-mix(in srgb, var(--bg) 86%, transparent); }
html[data-theme="skankamotive-two-tone"] .play, html[data-theme="skankamotive-two-tone"] #radioToggle { border-width: 2px; }

/* status line, links, notices */
html .radio.on-air .dot, html .radio.on-air .radio-dot, html .coming .tag .ldot, html .schedDialog .legend .l::before { background: var(--live); }
html .schedDialog .legend .e::before { background: var(--excl); }
html .dj a, html .coming .ti a, html .radio-dj a { text-decoration-color: color-mix(in srgb, var(--accent) 70%, transparent); }
html .dj a:hover, html .coming .ti a:hover { text-decoration-color: var(--accent); }
html .notice, html .radio-notice, html .warn { color: var(--amber); }
html .warn { border-color: var(--amber); }
html .beta { border-color: var(--ring); }

/* Coming up cards (player) and the schedule dialog */
html .coming li { background: var(--panel); border-color: var(--line); border-left-color: var(--ring); }
html .coming li.live { border-left-color: var(--live); background: color-mix(in srgb, var(--live) 9%, var(--panel)); }
html .coming li.live .tag { color: var(--live); }
html .coming li.excl { border-left-color: var(--excl); }
html .coming li.excl .tag { color: var(--excl); }
html .schedDialog { border-color: var(--ring); box-shadow: 0 0 40px -10px color-mix(in srgb, var(--accent) 40%, transparent); }
html .schedDialog .sd-close { border-color: var(--ring); }

/* schedule columns and blocks */
html .sched .item { border-left-color: var(--ring); }
html .sched .item.live { border-left-color: var(--live); background: color-mix(in srgb, var(--live) 8%, var(--panel)); }
html .sched .item.excl { border-left-color: var(--excl); background: color-mix(in srgb, var(--excl) 7%, var(--panel)); }
html .sched .item.now { box-shadow: 0 0 0 1px var(--accent); }
html .sched h2.day.today .tdy { border-color: var(--accent); color: var(--accent); }
html .dcol { background: var(--panel); }
html .dcol.today { border-color: var(--accent); box-shadow: inset 0 3px 0 var(--accent); }
html .dcol.today h3 { color: var(--accent); }
html .blk { border-left-color: var(--ring); }
html .blk.live { border-left-color: var(--live); background: color-mix(in srgb, var(--live) 9%, var(--panel)); }
html .blk.excl { border-left-color: var(--excl); background: color-mix(in srgb, var(--excl) 8%, var(--panel)); }
html button.blk:hover { background: color-mix(in srgb, var(--accent) 12%, var(--panel)); }

/* admin: tabs, badges, cards, tiles, buttons, switches */
html .tab:hover { color: var(--fg); background: color-mix(in srgb, var(--accent) 10%, transparent); }
html .tab[aria-selected="true"] { color: var(--fg); background: var(--panel); border-color: var(--ring); box-shadow: inset 0 -2px 0 var(--accent); }
html .tabdot { background: var(--live); }
html .tabcount { background: var(--live); color: var(--bg); font-weight: 700; }
html .tabbar { border-bottom-color: var(--line); }
html section.card, html .card, html .stat, html .tiles div, html .rows { border-color: var(--line); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--accent) 30%, transparent); }
html .run, html .item, html .team li, html .pick li, html .panelbox { border-color: var(--line); }
html .panelbox { border-color: var(--ring); }
html .stat .n, html .tiles dd { color: var(--fg); }
html .btn { border-color: var(--ring); }
html .btn:hover, html .small:hover { background: color-mix(in srgb, var(--accent) 14%, var(--bg)); border-color: var(--accent); }
html .btn.primary, html .small.primary, html .chip[aria-pressed="true"] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
html .btn.primary:hover, html .small.primary:hover { background: var(--accent); opacity: .88; }
html .btn.danger { color: var(--bad); border-color: var(--bad); }
html .btn.danger:hover { background: color-mix(in srgb, var(--bad) 14%, var(--bg)); border-color: var(--bad); }
html .btn[disabled], html .btn:disabled, html .small:disabled { opacity: .5; }
html .badge { border-color: var(--ring); }
html .badge.st.review, html .badge.st.unavailable { color: var(--bg); }
html .badge.st.waiting, html .badge.wait { color: var(--bg); }
html .dot.on { background: var(--live); }
html .err { border-color: var(--bad); color: var(--bad); }
html .scanbar::after { background: var(--live); }
html .switch .trk { border-color: var(--ring); }
html .item .dlink, html .rgroup .run a.open { color: var(--excl); }
html .chart .bar { fill: var(--accent); }

/* ---- party mode: a modifier over any theme ----
   confetti dots + small streamer flecks (fixed, behind content, opacity var(--confetti), drifting down 40s linear, infinite),
   a coloured frame (inset shadow, static), the status underline flow (4s linear) and the play glow (2.4s ease-in-out alternate).
   Reduced motion: nothing moves; the confetti, frame and underline stay as a static festive treatment. */
html[data-party] body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--confetti);
  background:
    radial-gradient(circle, var(--pa) 0 2px, transparent 2.6px) 0 0 / 90px 90px,
    radial-gradient(circle, var(--pb) 0 1.6px, transparent 2.2px) 31px 47px / 130px 130px,
    radial-gradient(circle, var(--pc) 0 2.2px, transparent 2.8px) 77px 13px / 170px 170px,
    radial-gradient(ellipse 7px 2.2px, var(--pb) 0 90%, transparent 100%) 20px 0 / 140px 190px,
    radial-gradient(ellipse 2.2px 7px, var(--pa) 0 90%, transparent 100%) 63px 90px / 190px 150px;
  box-shadow: inset 0 0 0 3px var(--pa), inset 0 0 70px -12px var(--pb);
  animation: partydrift 40s linear infinite;
}
@keyframes partydrift { to { background-position: 0 90px, 31px 177px, 77px 183px, 20px 190px, 63px 240px; } }
html[data-party] .status, html[data-party] .radio-status { position: relative; }
html[data-party] .status::after, html[data-party] .radio-status::after {
  content: ""; position: absolute; left: 50%; bottom: -5px; width: min(14rem, 70%); height: 3px; transform: translateX(-50%);
  border-radius: 2px; background: linear-gradient(90deg, var(--pa), var(--pb), var(--pc), var(--pa)); background-size: 300% 100%;
  animation: partyflow 4s linear infinite;
}
html[data-party] .radio.playing .play, html[data-party] .radio.on-air .play, html[data-party] .radio.on-air #radioToggle {
  box-shadow: 0 0 16px 2px color-mix(in srgb, var(--pa) 55%, transparent); animation: partyglow 2.4s ease-in-out infinite alternate;
}
html[data-party] .radio.off-air .play, html[data-party] .radio.off-air #radioToggle { animation: none; box-shadow: none; }
@keyframes partyflow { to { background-position: 300% 0; } }
@keyframes partyglow { to { box-shadow: 0 0 26px 5px color-mix(in srgb, var(--pb) 60%, transparent); } }
@media (prefers-reduced-motion: reduce) {
  html[data-party] body::after, html[data-party] .status::after, html[data-party] .radio-status::after,
  html[data-party] .radio .play, html[data-party] #radioToggle { animation: none !important; }
}

/* A set's own logo (themes.js swaps the <img>): squarer than the train, so keep its height in check. */
html[data-set] img[data-loco-logo]:not([src*="LocoTransparent"]) { width: auto; max-width: 100%; max-height: min(34vh, 300px); object-fit: contain; }