/* The event sites in dark: the neutral surfaces and ink, and the ring round whatever the keyboard is on. This file comes after
   style.css and overrides it; engine/theme.js says when it applies (the device's setting, or the reader's choice). The body and
   the hero follow too: the hero's night colours are at the end. A music site (Gigs Hawk) is dark unless the reader asks for light.
   The header is dark in both. */
:root { color-scheme: dark; }
body {
  --focus-page: var(--brand);
  --mini-bg: #000;
  --mini-ink: var(--hot);
  --mini-glow: oklch(68% 0.24 var(--a) / 0.6);
  --bg: oklch(14% 0.006 260);
  --surface: oklch(19% 0.008 260);
  --ink: oklch(94% 0.005 260);
  --muted: oklch(72% 0.01 260);
  --line: oklch(29% 0.008 260);
  --hover: oklch(22% 0.01 260);
  --accent: oklch(78% 0.15 var(--h));
  --win: oklch(46% 0.11 95);
}
/* A music site's usual look: after dark, the surfaces in the site's own hue. */
body[data-hub="music"] {
  --bg: oklch(13% 0.025 var(--h));
  --surface: oklch(18% 0.035 var(--h));
  --ink: oklch(94% 0.008 var(--h));
  --muted: oklch(73% 0.02 var(--h));
  --line: oklch(29% 0.045 var(--h));
  --hover: oklch(22% 0.045 var(--h));
  --accent: oklch(78% 0.16 var(--a));
}

/* The hero at night: dark bands in the sport's colour with its glows, light ink, the bright ring, and the clocks as lit panels. */
.hero, body.embed {
  --focus: var(--brand);
  --hero-1: oklch(15% 0.02 var(--h));
  --hero-2: oklch(23% 0.04 var(--h));
  --hero-ink: oklch(98% 0.005 var(--h));
  --glow: oklch(84% 0.17 var(--h));
  --hot: oklch(68% 0.24 var(--a));
  --hero-glow-a: oklch(62% 0.19 var(--h) / 0.38);
  --hero-glow-b: oklch(60% 0.24 var(--a) / 0.26);
  --veil: oklch(0% 0 0 / 0.4);
  --veil-deep: oklch(0% 0 0 / 0.62);
  --rim: oklch(100% 0 0 / 0.2);
  --rim-soft: oklch(100% 0 0 / 0.14);
  --rim-strong: oklch(100% 0 0 / 0.32);
  --rim-hover: oklch(100% 0 0 / 0.6);
  --wash: oklch(100% 0 0 / 0.14);
  --clock-face: #040705;
  --clock-edge: oklch(100% 0 0 / 0.1);
  --clock-rim: #2c2c2c;
  --clock-off: oklch(100% 0 0 / 0.07);
  --clock-label: #b9b9b9;
  --clock-glow: oklch(68% 0.24 var(--a) / 0.6);
  --flap-ink: #fff;
  --flap-top: #34383a;
  --flap-hinge: #000;
  --flap-bottom: #1d2022;
  --flap-shadow: #0006;
}
body[data-hub="music"] .hero {
  background:
    radial-gradient(40% 90% at 12% -20%, oklch(72% 0.2 var(--a) / 0.34), transparent 70%),
    radial-gradient(45% 100% at 92% -25%, oklch(62% 0.24 var(--h) / 0.5), transparent 70%),
    radial-gradient(70% 50% at 50% 120%, oklch(55% 0.22 var(--h) / 0.3), transparent 70%),
    linear-gradient(180deg, var(--hero-1), var(--hero-2));
}
/* Each sport's arena under floodlights: surfaces in the sport's colour, lines, posts and nets white. */
.backdrop .surround { fill: oklch(32% 0.06 var(--h) / 0.6); }
.backdrop .surface { fill: oklch(50% 0.13 var(--h) / 0.55); }
.backdrop .apron { fill: oklch(41% 0.1 var(--h) / 0.55); }
.backdrop .grass { fill: oklch(50% 0.13 150 / 0.55); }
.backdrop .stripe { fill: oklch(100% 0 0 / 0.06); }
.backdrop :is(.wicket, .sand) { fill: oklch(86% 0.06 90 / 0.55); }
.backdrop .tarmac { fill: oklch(22% 0.01 var(--h) / 0.85); }
.backdrop .line { fill: none; stroke: oklch(100% 0 0 / 0.62); stroke-width: 0.3; }
.backdrop .faint { stroke: oklch(100% 0 0 / 0.25); }
.backdrop .dash { stroke: oklch(100% 0 0 / 0.4); stroke-dasharray: 2; }
.backdrop :is(.spot, .check) { fill: oklch(100% 0 0 / 0.85); }
.backdrop .shade { fill: oklch(0% 0 0 / 0.3); }
.backdrop .shade-line { fill: none; stroke: oklch(0% 0 0 / 0.4); stroke-width: 0.5; stroke-linecap: round; }
.backdrop .post { fill: none; stroke: oklch(100% 0 0 / 0.95); stroke-width: 0.3; stroke-linecap: round; stroke-linejoin: round; }
.backdrop .stump { fill: none; stroke: oklch(100% 0 0 / 0.95); stroke-width: 0.045; }
.backdrop .rod { fill: none; stroke: oklch(100% 0 0 / 0.9); stroke-width: 0.1; stroke-linecap: round; stroke-linejoin: round; }
.backdrop .rope { fill: none; stroke: oklch(100% 0 0 / 0.95); stroke-width: 0.07; }
.backdrop .strand { fill: none; stroke: oklch(100% 0 0 / 0.5); stroke-width: 0.12; }
.backdrop .net { fill: oklch(100% 0 0 / 0.16); stroke: oklch(100% 0 0 / 0.45); stroke-width: 0.08; }
.backdrop .panel { fill: oklch(72% 0.06 var(--h) / 0.4); }
.backdrop .roof { fill: oklch(88% 0.03 var(--h) / 0.5); }
.backdrop .canvas { fill: oklch(93% 0.02 var(--h) / 0.8); }
.backdrop .lamp { fill: oklch(100% 0 0 / 0.6); }
.backdrop .track { fill: none; stroke: oklch(22% 0.01 var(--h) / 0.95); stroke-width: 12; }
.backdrop .pitlane { fill: none; stroke: oklch(22% 0.01 var(--h) / 0.85); stroke-width: 6; }
.track path { stroke: oklch(100% 0 0 / 0.95); filter: drop-shadow(0 0 3px oklch(0% 0 0 / 0.6)); }
.map img, .tm-world { filter: none; }