/* Atlas, a theme of the home page (feed/site-themes.v1.json). Everything sits under
   :root[data-theme="atlas"], so nothing here applies until a page wears it; site.css is Radar. */

/* ---- Atlas: the night map, without the radar ------------------------------------------------------ */

:root[data-theme="atlas"] {
  --bg: #0a0a0b;
  /* radar.js draws the heat without the beam, the rings or the readout over the car, and names the
     places instead: each one as the car passes it, all of them gone by the time it comes round again. */
  --map-style: names;
}

/* Daylight, a theme of the home page (feed/site-themes.v1.json). Everything sits under
   :root[data-theme="daylight"], so nothing here applies until a page wears it; site.css is Radar. */

/* ---- Daylight: the same page, on paper ------------------------------------------------------------ */

:root[data-theme="daylight"] {
  color-scheme: light;
  --bg: #f6f5f1;
  --surface: #ffffff;
  --surface-2: #fbfaf7;
  --fg-rgb: 22 22 26;
  --bg-rgb: 246 245 241;
  --line: rgb(var(--fg-rgb) / 0.1);
  --line-2: rgb(var(--fg-rgb) / 0.18);
  --text: #16161a;
  --muted: #4f4e56;
  --faint: #6b6a72;
  /* The accent as it comes is for buttons and fills. Small text and fine lines take it darker, by as much
     as the builder worked out this operator's colour needs to read on paper (--accent-drop). */
  --accent-text: color-mix(in oklab, var(--accent), black var(--accent-drop, 40%));
  --accent-soft: color-mix(in oklab, var(--accent) 18%, transparent);
  --radar-shade: var(--accent-drop, 40%);
}

/* The logo was cut out for a dark page: it keeps a dark tile of its own. One cut for a light page needs none. */
[data-theme="daylight"] .logo { padding: 6px 10px; border-radius: 10px; background: #16161a; }
[data-theme="daylight"] .logo.on-light { padding: 0; background: none; }
[data-theme="daylight"] .site-header .logo { height: 40px; }

[data-theme="daylight"] .hero-bg { background:
    radial-gradient(60% 55% at 82% 88%, var(--accent-soft), transparent 70%),
    radial-gradient(50% 45% at 6% 0%, rgb(255 196 120 / 0.22), transparent 70%),
    var(--bg); }
[data-theme="daylight"] .hero-bg::after { display: none; } /* the grain is white: nothing to see on paper */
[data-theme="daylight"] .hero h1 .main { background-image: linear-gradient(180deg, var(--text) 35%, #4a4950); }
[data-theme="daylight"] .dot { background: var(--accent-text); }

[data-theme="daylight"] .route .g0,
[data-theme="daylight"] .route .g1 { stop-color: var(--accent-text); }
[data-theme="daylight"] .route .g2 { stop-color: var(--text); stop-opacity: 0.8; }
[data-theme="daylight"] .route .node,
[data-theme="daylight"] .route .ring { stroke: var(--accent-text); }
[data-theme="daylight"] .route .car { fill: var(--accent-text); filter: none; }
[data-theme="daylight"] .radar-grip::after { border-color: var(--accent-text); }
[data-theme="daylight"] .radar-tip { border-color: var(--line-2); box-shadow: 0 12px 32px -14px rgb(22 22 26 / 0.3); }

[data-theme="daylight"] :is(.card, .ticket, .vehicle, .driver) {
  box-shadow: 0 1px 2px rgb(22 22 26 / 0.04), 0 18px 40px -26px rgb(22 22 26 / 0.3);
}
[data-theme="daylight"] .vehicle-media { background: radial-gradient(70% 60% at 50% 100%, var(--accent-soft), transparent 70%), linear-gradient(180deg, #efeee9, #e7e6e0); }

/* The airports board stays a lit screen, dark on the light page, so inside it the dark page's colours come back. */
[data-theme="daylight"] .board-wrap {
  --fg-rgb: 255 255 255;
  --text: #f4f3ef;
  --muted: #a6a5ac;
  --accent-text: color-mix(in oklab, var(--accent), white var(--accent-lift));
  border-color: transparent;
  color: var(--text);
  box-shadow: 0 30px 60px -30px rgb(22 22 26 / 0.55);
}

/* in the picker */
[data-theme="daylight"] .themer-swatch[data-swatch="radar"] { border-color: transparent; }

/* Departures, a theme of the home page (feed/site-themes.v1.json). Everything sits under
   :root[data-theme="departures"], so nothing here applies until a page wears it; site.css is Radar. */

/* ---- Departures: the airport board ---------------------------------------------------------------- */

:root[data-theme="departures"] {
  --bg: #050506;
  --bg-rgb: 5 5 6;
  --surface: #0c0c0e;
  --surface-2: #121215;
  --radius: 4px;
  --radius-lg: 6px;
}

/* Headings and buttons in the board's capitals; reading text stays as it was. */
[data-theme="departures"] :is(h1, h2, h3) { font-family: var(--mono); font-weight: 700; text-transform: uppercase; letter-spacing: -0.03em; }
[data-theme="departures"] h2 { font-size: clamp(1.75rem, 1rem + 2.6vw, 3rem); line-height: 1.04; }
[data-theme="departures"] .hero h1 { max-width: 19ch; font-size: clamp(2.1rem, 0.9rem + 4.2vw, 4.5rem); line-height: 1; letter-spacing: -0.05em; }
[data-theme="departures"] .hero h1 .main { background: none; color: var(--text); }
[data-theme="departures"] .finale h2 { font-size: clamp(2.2rem, 1rem + 4.6vw, 4.8rem); line-height: 0.98; }
[data-theme="departures"] .card h3 { font-size: 1.05rem; letter-spacing: 0; }
[data-theme="departures"] .driver h3 { font-size: 1.35rem; }
[data-theme="departures"] .vehicle-name { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem); }

[data-theme="departures"] .btn { font-family: var(--mono); font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; }
[data-theme="departures"] .btn-lg { font-size: 0.875rem; }
[data-theme="departures"] :is(.btn, .chip, .eyebrow, .tags li, .t-go, .avatar img) { border-radius: var(--radius); }
[data-theme="departures"] .join { border-radius: var(--radius-lg); }
[data-theme="departures"] .eyebrow { border-color: color-mix(in oklab, var(--accent) 40%, transparent); color: var(--accent-text); }
[data-theme="departures"] .dot { border-radius: 1px; }

/* Rows, like the board: ruled lines across the hero, and a rule between sections. */
[data-theme="departures"] .hero-bg::before {
  background-image: linear-gradient(rgb(var(--fg-rgb) / 0.05) 1px, transparent 1px);
  background-size: 100% 56px;
}
[data-theme="departures"] main > .section { border-top: 1px solid var(--line); }
[data-theme="departures"] .board li { border-radius: var(--radius); }
[data-theme="departures"] .flap { border-radius: 3px; }

/* in the picker */
[data-theme="departures"] .themer summary { border-radius: var(--radius); font-family: var(--mono); letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.75rem; }
[data-theme="departures"] .themer-list { border-radius: var(--radius-lg); }
[data-theme="departures"] :is(.themer-option, .themer-swatch) { border-radius: var(--radius); }

/* The theme picker in the home page's corner, published only when the feed puts other themes in it.
   Each theme's own look is in themes/; one swatch per theme here. */
/* Bottom right, where the hero's road is high and out of the way. */

.themer {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 60;
  font-size: 0.8125rem;
}
.themer[hidden] { display: none; }
.themer summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 15px 0 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: rgb(var(--bg-rgb) / 0.78);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 10px 30px -12px rgb(0 0 0 / 0.5);
  color: var(--muted);
  list-style: none;
  cursor: pointer;
  user-select: none;
  transition: border-color 0.2s, color 0.2s;
}
.themer summary::-webkit-details-marker { display: none; }
.themer summary::before {
  /* a little paint pot of the page's own colours */
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: conic-gradient(var(--accent) 0 25%, var(--text) 0 50%, var(--faint) 0 75%, var(--surface-2) 0);
  box-shadow: 0 0 0 1px var(--line-2);
}
.themer summary:hover, .themer[open] summary { border-color: color-mix(in oklab, var(--accent) 50%, transparent); color: var(--text); }
.themer-now { color: var(--text); font-weight: 600; }
.themer-list {
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  display: grid;
  gap: 2px;
  width: min(310px, 100vw - 32px);
  margin: 0;
  padding: 6px;
  border: 1px solid var(--line-2);
  border-radius: 18px;
  background: rgb(var(--bg-rgb) / 0.92);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 24px 60px -20px rgb(0 0 0 / 0.6);
}
.themer-list legend {
  /* floated, so it sits inside the box as a heading instead of on its border */
  float: left;
  width: 100%;
  padding: 10px 10px 6px;
  color: var(--faint);
  font: 500 0.68rem/1 var(--mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.themer-option { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 12px; cursor: pointer; transition: background-color 0.2s; }
/* A link-only theme is in the list only while someone is wearing it: theme.js shows it then. */
.themer-option[hidden] { display: none; }
.themer-option:hover { background: rgb(var(--fg-rgb) / 0.05); }
.themer-option:has(:checked) { background: var(--accent-soft); }
.themer-option:has(:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
/* The radios still take Tab and the arrow keys; the swatch and the highlight show which is chosen. */
.themer-option input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.themer-swatch { width: 36px; height: 36px; border: 1px solid var(--line-2); border-radius: 10px; }
.themer-option:has(:checked) .themer-swatch { box-shadow: 0 0 0 2px var(--accent); }
.themer-words { display: grid; gap: 1px; }
.themer-words b { color: var(--text); font-size: 0.875rem; font-weight: 600; }
.themer-words small { color: var(--muted); font-size: 0.75rem; line-height: 1.35; }

.themer-swatch[data-swatch="radar"] { background:
    radial-gradient(circle, var(--accent) 0 2px, transparent 2.5px),
    repeating-radial-gradient(circle, transparent 0 5px, color-mix(in oklab, var(--accent) 45%, transparent) 5px 6px),
    #0a0a0b; }
.themer-swatch[data-swatch="daylight"] { background: linear-gradient(135deg, #f6f5f1 0 58%, var(--accent) 58%); }
.themer-swatch[data-swatch="departures"] { background:
    repeating-linear-gradient(180deg, #050506 0 6px, color-mix(in oklab, var(--accent) 55%, #050506) 6px 7px); }
.themer-swatch[data-swatch="atlas"] { background:
    radial-gradient(circle at 26% 66%, var(--accent) 0 2px, transparent 2.5px),
    radial-gradient(circle at 60% 30%, var(--accent) 0 2px, transparent 2.5px),
    linear-gradient(rgb(255 255 255 / 0.75), rgb(255 255 255 / 0.75)) 36% 66% / 38% 2px no-repeat,
    linear-gradient(rgb(255 255 255 / 0.45), rgb(255 255 255 / 0.45)) 70% 30% / 26% 2px no-repeat,
    radial-gradient(70% 60% at 45% 55%, color-mix(in oklab, var(--accent) 30%, transparent), transparent 70%),
    #0a0a0b; }