/* Glass for dark mode only, after the Vexto look: smoky panels floating over the map, with no strokes. Light mode keeps
   the solid style. Refraction was tried and removed: in backdrop-filter it cancels the blur. */
:root[data-theme="dark"] { --g-card: rgba(255,255,255,.05); --g-tint: rgba(255,255,255,.14); } /* with no strokes, a lighter frost is what lifts controls off the dark */

/* Everything on the dark glass reads light. */
[data-theme="dark"] :is(.nav, .round, .whereto, .zoombtns, .gchip, .activeroute, .brand, .maparea, .panel, .dock, .mapkey, .when, .gcard__in, .toast) {
  --surface: rgba(255,255,255,.06); --surface-2: rgba(255,255,255,.09); --surface-3: rgba(255,255,255,.13); --sheet: transparent;
  --text: #f5f5f2; --muted: rgba(255,255,255,.64); --line: rgba(255,255,255,.14); --line-soft: rgba(255,255,255,.08);
  color: var(--text);
}

/* ---------- the small controls: a total blur, so what's under them can't be read at all ---------- */
[data-theme="dark"] :is(.nav, .round, .whereto, .zoombtns, .gchip, .activeroute, .brand) {
  background: var(--g-tint); -webkit-backdrop-filter: blur(100px) saturate(140%); backdrop-filter: blur(100px) saturate(140%);
  box-shadow: 0 12px 40px rgba(0,0,0,.25), inset 0 1px 2px rgba(255,255,255,.1);
}
:root[data-theme="dark"] .nav { background: var(--g-tint); } /* shell.css paints the nav solid at this strength */

/* ---------- the big surfaces ---------- */
[data-theme="dark"] :is(.panel, .dock, .mapkey, .when, .gcard__in, .toast, .maparea) {
  background: rgba(16,16,18,.66); -webkit-backdrop-filter: blur(28px) saturate(140%); backdrop-filter: blur(28px) saturate(140%);
  box-shadow: 0 16px 70px rgba(0,0,0,.5), inset 0 1px 2px rgba(255,255,255,.08);
}
[data-theme="dark"] .maparea { box-shadow: none; border-radius: 10px; -webkit-backdrop-filter: blur(100px) saturate(140%); backdrop-filter: blur(100px) saturate(140%); }

/* ---------- what sits on the glass ---------- */
[data-theme="dark"] .nav a:not(.is-active) { background: rgba(255,255,255,.08); color: #fff; }
[data-theme="dark"] .nav a.is-active { color: var(--on-accent); }
[data-theme="dark"] :is(.round, .zoombtns button) { color: #fff; }

/* ---------- pages ---------- */
[data-theme="dark"] :is(.card, .stat, .arow, .afact) {
  background: var(--g-card); -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 12px 40px -24px rgba(0,0,0,.4);
}

/* If glass isn't possible or isn't wanted, stay readable. */
@media (prefers-reduced-transparency: reduce) {
  :root[data-theme="dark"] :is(.panel, .dock, .mapkey, .when, .gcard__in, .toast, .maparea, .nav, .round, .whereto, .zoombtns, .gchip, .activeroute, .brand) { background: #18181a; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root[data-theme="dark"] :is(.panel, .dock, .mapkey, .when, .gcard__in, .toast, .maparea, .nav, .round, .whereto, .zoombtns, .gchip, .activeroute, .brand) { background: #18181a; }
}