/* Site appearance: system default with an explicit light or dark override.
   Canon v0.4.0: night surface roles; level identity fills and approved inks stay intact.
   Lifted action blue uses charcoal ink (4.72:1); white would be 2.84:1. */
:root {
  color-scheme: light;
  --surface: #ffffff;
  --action-ink: #ffffff;
  --l5-ring: transparent;
  --glass: rgba(255,255,255,.72);
  --glass-line: rgba(227,233,238,.65);
  --field-bg: #ffffff;
  --onramp-ink: #ffffff;
  --logo-day: block;
  --logo-night: none;
  --night-hero-ground: radial-gradient(120% 100% at 82% 28%, #edf4fb 0%, #f6fafe 44%, #ffffff 74%);
  --hero-five-ink: var(--l5);
  --hero-heading-ink: var(--l5);
  --hero-wash-rgb: 255,255,255;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --ink: #eef3f7;
  --muted: #93a1ac;
  --bg: #0c1116;
  --bg-soft: #172029;
  --surface: #141d25;
  --line: rgba(255,255,255,.09);
  --action: #3ba0ea;
  --action-ink: #2f2f2f;
  --l5-ring: rgba(255,255,255,.28);
  --glass: rgba(var(--hero-wash-rgb),.88);
  --glass-line: rgba(255,255,255,.09);
  --field-bg: #141d25;
  --onramp-ink: #0c1116;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.24);
  --logo-day: none;
  --logo-night: block;
  --night-hero-ground: var(--bg);
  --hero-five-ink: var(--ink);
  --hero-heading-ink: var(--ink);
  --hero-wash-rgb: 12,17,22;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
  color-scheme: dark;
  --ink: #eef3f7;
  --muted: #93a1ac;
  --bg: #0c1116;
  --bg-soft: #172029;
  --surface: #141d25;
  --line: rgba(255,255,255,.09);
  --action: #3ba0ea;
  --action-ink: #2f2f2f;
  --l5-ring: rgba(255,255,255,.28);
  --glass: rgba(var(--hero-wash-rgb),.88);
  --glass-line: rgba(255,255,255,.09);
  --field-bg: #141d25;
  --onramp-ink: #0c1116;
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.24);
  --logo-day: none;
  --logo-night: block;
  --night-hero-ground: var(--bg);
  --hero-five-ink: var(--ink);
  --hero-heading-ink: var(--ink);
  --hero-wash-rgb: 12,17,22;
  }
}

html { background: var(--bg); }
.logo .logo-day { display: var(--logo-day); }
.logo .logo-night { display: var(--logo-night); }
.card, .pick, .rung { background: var(--surface); }
.btn { color: var(--action-ink); }
.btn.secondary { color: var(--action); }
.btn.cta-amber, .signup .btn { color: var(--l5); }
.btn.ghost-night { color: var(--night-ink); }
.rung.start.is-locked, .result-card.onramp .result-band { color: var(--onramp-ink); }
.level-card.lv5, .level-chip.lv5, .result-card.lv5 .result-band,
.level-dots .lv5 { box-shadow: inset 0 0 0 1px var(--l5-ring); }
.rung.lv5 { outline: 1px solid var(--l5-ring); outline-offset: -1px; }
.rep-input, .signup input[type="email"] {
  background: var(--field-bg); color: var(--ink);
}
.signup input[type="email"] { border: 2px solid var(--muted); }
.rep-input::placeholder, .signup input::placeholder { color: var(--muted); opacity: 1; }
::selection { background: var(--action); color: var(--action-ink); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  header.site { background: var(--glass); border-bottom-color: var(--glass-line); }
}

/* Quick rail: one native radio group, three explicit appearance choices. */
.appearance { position: relative; flex: 0 0 auto; }
.appearance[hidden] { display: none; }
/* Reserve the complete rail before initialization; no-JS keeps it hidden. */
:root[data-effective-theme] .appearance[hidden] { display: block; visibility: hidden; }
.appearance-group { border: 0; margin: 0; padding: 0; min-width: 0; }
.appearance-rail {
  display: flex; width: 108px; height: 40px; padding: 3px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg-soft);
}
.appearance-option {
  position: relative; flex: 1 1 0; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px; color: var(--ink); cursor: pointer;
}
.appearance-option input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: inherit;
}
.appearance-option:has(input:checked) {
  background: var(--surface); box-shadow: 0 0 0 1px var(--muted);
}
.appearance-option:has(input:focus-visible) { outline: 2px solid var(--action); outline-offset: 2px; }
.appearance-icon { display: block; width: 18px; height: 18px; pointer-events: none; }
.appearance-tooltip {
  display: none; position: absolute; top: calc(100% + 10px); right: 0; z-index: 30;
  width: max-content; max-width: calc(100vw - 2 * var(--pad));
  padding: 7px 10px; border: 1px solid var(--muted); border-radius: 7px;
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow);
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.4;
}
.appearance-tooltip::before { content: ""; position: absolute; inset: -12px 0 auto; height: 12px; }
.appearance-detail { display: block; color: var(--muted); font-weight: 400; margin-top: 2px; }
.appearance-option:has(input:focus-visible) .appearance-tooltip,
.appearance[data-hint="system"] [data-appearance-mode="system"] .appearance-tooltip,
.appearance[data-hint="light"] [data-appearance-mode="light"] .appearance-tooltip,
.appearance[data-hint="dark"] [data-appearance-mode="dark"] .appearance-tooltip { display: block; }
@media (hover: hover) { .appearance-option:hover .appearance-tooltip { display: block; } }
/* Keyboard focus takes precedence over a parked mouse or a recent tap hint. */
.appearance:has(input:focus-visible) .appearance-option:not(:has(input:focus-visible)) .appearance-tooltip { display: none; }
.appearance[data-hints-dismissed] .appearance-option .appearance-tooltip { display: none; }
@media (any-pointer: coarse) {
  /* Keep real 44px targets on phones, tablets and touch-capable laptops. */
  .appearance-rail { width: 140px; height: 52px; }
}
@media (max-width: 700px) {
  header.site .wrap { flex-wrap: wrap; gap: 0 var(--s4); padding-top: var(--s2); }
  .appearance { margin-left: auto; }
  nav.main { order: 2; width: 100%; margin-left: 0; justify-content: space-between; gap: var(--s2); flex-wrap: nowrap; }
  nav.main a { display: flex; align-items: center; min-height: 44px; padding: var(--s2) 0; }
  [id] { scroll-margin-top: 128px; }
}

/* Same geometry, crop, type and masks as the light hero in style.css.
   Only media and colour roles change. Canon v0.4.0, target 388a6cec4cab.
   The headline is text, not a filled level badge: the charcoal 5 uses neutral
   headline ink at night. Canonical badge fills and inks are untouched. */
.hero-wow { background: var(--night-hero-ground); }
.hero-wow h1 { color: var(--hero-heading-ink); }
.hero-level { background: transparent; border-radius: 0; }
.hero-level .lv { color: var(--level); }
.hero-level .lv5 { color: var(--hero-five-ink); }
.hero-range-dash { color: var(--muted); }
.hero-logo .hero-mark-day, .hero-media .hero-video-day { display: var(--logo-day); }
.hero-logo .hero-mark-night, .hero-media .hero-video-night { display: var(--logo-night); }
.hero-mark-night { filter: none; }
.hero-media .hero-poster-day, .hero-media .hero-poster-night { display: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-media .hero-video { display: none; }
  .hero-media .hero-poster-day { display: var(--logo-day); }
  .hero-media .hero-poster-night { display: var(--logo-night); }
}
@media (min-width: 1080px) and (max-width: 1359px) {
  .hero-media::after {
    background: linear-gradient(to right, rgba(var(--hero-wash-rgb),.95) 0%, rgba(var(--hero-wash-rgb),.35) 30%, rgba(var(--hero-wash-rgb),0) 55%);
  }
}
@media (min-width: 821px) and (max-width: 1079px) {
  .hero-media::after {
    background: linear-gradient(to right, rgba(var(--hero-wash-rgb),.97) 0%, rgba(var(--hero-wash-rgb),.6) 40%, rgba(var(--hero-wash-rgb),0) 88%);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .appearance-changing body, .appearance-changing header.site,
  .appearance-changing .card, .appearance-changing .pick,
  .appearance-changing .appearance-rail {
    transition: background-color .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease);
  }
}
/* Keep the original five-name strip inside the 320px viewport. */
main.wrap { width: 100%; min-width: 0; }
@media (max-width: 360px) { .level-card .name { font-size: .72rem; } }

/* Filled download actions share the same ink as primary actions. */
@media (min-width: 601px) {
  table.downloads td:last-child a:hover { color: var(--action-ink); }
}
@media (max-width: 600px) {
  table.downloads td:nth-child(5) a { color: var(--action-ink); }
}
/* Keep the charcoal level rail identifiable against night article surfaces. */
.step-level.lv5 { outline: 1px solid var(--l5-ring); outline-offset: -1px; }