/* The redesign's type (docs/redesign-spec.md "Type"): Space Grotesk for display and numbers, Outfit for
   text, self-hosted (scripts/make-art.py). The ?v= matches core/art.js's ART_VERSION. */
@font-face { font-family: "Space Grotesk"; font-weight: 400; font-display: swap; src: url("fonts/space_grotesk_regular.ttf?v=1") format("truetype"); }
@font-face { font-family: "Space Grotesk"; font-weight: 500 600; font-display: swap; src: url("fonts/space_grotesk_semibold.ttf?v=1") format("truetype"); }
@font-face { font-family: "Space Grotesk"; font-weight: 700; font-display: swap; src: url("fonts/space_grotesk_bold.ttf?v=1") format("truetype"); }
@font-face { font-family: "Outfit"; font-weight: 300 400; font-display: swap; src: url("fonts/outfit_regular.ttf?v=1") format("truetype"); }
@font-face { font-family: "Outfit"; font-weight: 500 600; font-display: swap; src: url("fonts/outfit_semibold.ttf?v=1") format("truetype"); }
@font-face { font-family: "Outfit"; font-weight: 700; font-display: swap; src: url("fonts/outfit_bold.ttf?v=1") format("truetype"); }

/* Dark-first, as the app is (sharedUI/ui/theme/Color.kt), with the redesign's tokens (docs/redesign-spec.md "Colour"). */
:root {
    --font-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-body: Outfit, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --space: #05060a;         /* behind the globe */
    --bg: #0b0c12;
    --bg-deep: #07080c;
    --surface-low: #0e1017;   /* opaque panes */
    --surface: #151821;
    --surface-high: #1c1f29;
    --surface-highest: #262a35;
    --on-surface: #e7e9f0;
    --on-variant: #b9bfcc;
    --muted: #a7adba;         /* 8.9:1 on the surface */
    --faint: #8f96a4;
    --outline: #ffffff1f;
    --gold: #ffd700;
    --gold-light: #ffe066;
    --accent: #ffd700;        /* gold, or the Moon's silver in lunar mode */
    --accent-light: #ffe066;  /* stat values */
    --on-accent: #2a2300;
    --badge: var(--surface-high);
    --primary: #fff6df;
    /* EclipseTypeColors.kt */
    --total: #ffd700;
    --annular: #7aa5ff;
    --hybrid: #c77dff;
    --partial: #e9a03a;
    --lunar: #b7c8e0;
    --copper: #e07a4f;        /* the umbra; total lunar eclipses */
    --copper-light: #f0a37a;
    --ozone: #5fc6dc;
    --safe: #7ee0a1;
    --penumbral: #d8dde6;
    --empty: #313640;
    --sky: #ced9ff;
    --hairline: #ffffff12;    /* dividers */
    --hover: #ffffff0d;       /* row and button hover wash */
    /* Glass: panels floating over the globe. */
    --glass: rgba(12, 14, 20, 0.58);
    --glass-strong: rgba(12, 14, 20, 0.68);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-blur: blur(18px) saturate(140%);
    --glass-fill: rgba(255, 255, 255, 0.05);   /* tiles and buttons on glass */
    --glyph-hole: #0b0c12;
    --gutter: 16px;
    --inset: 16px;            /* glass panels from the pane's edges */
    color-scheme: dark;
}
body.lunar {
    --accent: #b7c8e0; --accent-light: var(--copper-light); --on-accent: #1b2c3c; --on-variant: #bfc7d2; --primary: #eaf1fb;
}

/* The light scheme (CosmicLightColors / MoonLightColors), when the system asks for it. As in the app,
   only the chrome changes: the globe and the lunar sky stay dark, under light glass. */
@media (prefers-color-scheme: light) {
    :root {
        --bg: #fcfaf4;
        --bg-deep: #f6f3ea;
        --surface-low: #fcfaf4;
        --surface: #f0ede3;
        --surface-high: #eae7dc;
        --surface-highest: #e1ddcf;
        --on-surface: #1b1b16;
        --on-variant: #4c4838;
        --muted: #5f6368;
        --faint: #6f737a;
        --outline: #1b1b1624;
        --accent: #8a6d00;
        --accent-light: #6e5a00;
        --on-accent: #fff6d1;
        --primary: #6e5a00;
        --gold-light: #6e5a00;
        --hairline: #1b1b1614;
        --hover: #1b1b160d;
        --glass: rgba(252, 250, 244, 0.72);
        --glass-strong: rgba(252, 250, 244, 0.8);
        --glass-border: rgba(27, 27, 22, 0.1);
        --glass-fill: rgba(27, 27, 22, 0.05);
        color-scheme: light;
    }
    body.lunar { --accent: #3f6e9b; --accent-light: #a2482a; --on-accent: #eaf2fb; --on-variant: #46505c; --primary: #2c5a85; }
    /* The night views keep the dark scheme: the lunar sky and the map's own controls. */
    #lunarView, #view, #drawer {
        --bg: #0b0c12; --bg-deep: #07080c; --surface: #151821; --surface-high: #1c1f29; --surface-highest: #262a35;
        --on-surface: #e7e9f0; --on-variant: #bfc7d2; --muted: #a7adba; --outline: #ffffff1f;
        color-scheme: dark;
    }
    body.lunar #lunarView { --accent: #b7c8e0; --on-accent: #1b2c3c; }
    #drawer { --surface-low: #0e1017; --accent: #ffd700; --on-accent: #2a2300; --hover: #ffffff0d;
        --glass-fill: rgba(255, 255, 255, 0.05); --glass-border: rgba(255, 255, 255, 0.08); }
    body.lunar #drawer { --accent: #b7c8e0; --on-accent: #1b2c3c; }
    .slot.lu { --lu-label: #46505c; }
    #learnBody img { filter: none; }
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
    background: var(--bg);
    color: var(--on-surface);
    font: 14px/1.4 var(--font-body);
    overflow: hidden;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
input, select {
    background: var(--bg-deep);
    border: 1px solid var(--outline);
    border-radius: 10px;
    padding: 6px 10px;
    min-width: 0;
}
svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
svg.glyph { stroke: none; flex: none; }
.num { font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.grow { flex: 1; }
[hidden] { display: none !important; }
button.icon { background: none; border: 0; border-radius: 50%; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; flex: none; }
button.icon:hover { background: var(--hover); }
button.icon svg { width: 22px; height: 22px; }
button.link { background: none; border: 0; padding: 4px 6px; color: var(--accent); }
button.link:disabled { color: var(--muted); cursor: default; }
button.tonal { background: color-mix(in srgb, var(--accent) 14%, transparent); border: 0; border-radius: 999px; padding: 10px 18px; color: var(--accent-light); font-weight: 600; }
button.tonal:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.glass {
    background: var(--glass); border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
}

/* ---------- Shell (AdaptiveShell.kt): COMPACT < 600px ≤ MEDIUM < 840px ≤ EXPANDED ---------- */
#app { height: 100dvh; display: grid; grid-template-columns: 100%; position: relative; }
#mainPane { min-width: 0; min-height: 0; overflow: hidden; }
#sidePane {
    display: flex; flex-direction: column; min-width: 0; min-height: 0;
    background: var(--surface-low); container-type: inline-size;
}
/* A size container, so a surface can fit things to the pane's height as well as its width (#sky). */
#surface { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; container-type: size; }
#surface > .slot { height: 100%; }
#sidePane .chrome { position: relative; height: 0; }
#sidePane .handle { display: none; }
#paneClose { position: absolute; right: 4px; top: 4px; z-index: 2; background: var(--surface-low); }

/* EXPANDED: map and surface side by side, the surface a little wider (45/55) so the timings' sky can grow;
   on a portrait screen, stacked as equal halves. */
@media (min-width: 840px) {
    #app { grid-template-columns: 45fr 55fr; }
    #sidePane { border-left: 1px solid var(--hairline); }
    #sidePane .chrome { display: none; }
}
@media (min-width: 840px) and (orientation: portrait) {
    #app { grid-template-columns: 100%; grid-template-rows: 1fr 1fr; }
    #sidePane { border-left: 0; border-top: 1px solid var(--hairline); }
}
/* MEDIUM: one pane at a time — an open surface replaces the map, full width, with a Close button. */
@media (min-width: 600px) and (max-width: 839.98px) {
    #sidePane { position: absolute; inset: 0; z-index: 20; }
}
/* COMPACT: a surface slides up as a full-screen sheet over the header too, with a scrim behind. */
@media (max-width: 599.98px) {
    #sidePane {
        position: fixed; left: 0; right: 0; bottom: 0; top: max(8px, env(safe-area-inset-top)); z-index: 40;
        border-radius: 28px 28px 0 0; box-shadow: 0 -4px 24px #0008;
        padding-bottom: env(safe-area-inset-bottom);
        animation: sheetUp 0.22s ease-out;
    }
    #sidePane .chrome { height: 36px; flex: none; touch-action: none; cursor: grab; }
    #sidePane .handle { display: block; width: 32px; height: 4px; border-radius: 2px; background: #ffffff66; margin: 14px auto 0; }
    #scrim { position: fixed; inset: 0; z-index: 39; background: #00000080; animation: fadeIn 0.2s; }
}
@keyframes sheetUp { from { transform: translateY(100%); } }
@keyframes fadeIn { from { opacity: 0; } }

/* ---------- The globe pane: the stage fills it, and the header, the timeline and the buttons float over
   it as glass (docs/redesign-spec.md "Layout"). app.js measures the floating panels into --top-inset and
   --bottom-inset, which the map frames its globe between and the lunar views keep clear of. ---------- */
#mainPane { position: relative; background: var(--space); --top-inset: 220px; --bottom-inset: 140px; }
#stage { position: absolute; inset: 0; }
#view { position: absolute; inset: 0; background: var(--space); }

/* ---------- Header (AppHeader.kt) ---------- */
#appHeader {
    position: absolute; z-index: 6; left: var(--inset); right: var(--inset); top: max(var(--inset), env(safe-area-inset-top));
    display: flex; flex-direction: column; gap: 10px; pointer-events: none; container-type: inline-size;
}
#appHeader > *, .selectorRow > * { pointer-events: auto; }
#appHeader .bar { display: flex; align-items: center; gap: 6px; padding: 4px 8px 4px 4px; border-radius: 22px; }
.appTitle { font: 600 17px/1.2 var(--font-display); letter-spacing: 0.2px; white-space: nowrap; }
#locBtn {
    display: flex; align-items: center; gap: 6px; background: none; border: 0; border-radius: 999px;
    height: 40px; padding: 0 12px 0 10px; color: var(--accent); font-weight: 500; max-width: 40%; min-width: 0;
}
#locBtn:hover { background: var(--hover); }
#locBtn svg { width: 18px; height: 18px; flex: none; }
#locName { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.selectorRow { display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
#selector {
    display: flex; align-items: center; gap: 14px; text-align: left; width: 100%; color: inherit;
    border-color: color-mix(in srgb, var(--accent) 22%, transparent); border-radius: 22px; padding: 12px 16px 12px 12px;
}
body.lunar #selector { border-color: color-mix(in srgb, var(--copper) 30%, transparent); }
#selector:hover { background: var(--glass-strong); }
#selGlyph { width: 48px; height: 48px; }
.selText { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.selText > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#selLabel { color: var(--accent); font-size: 11px; font-weight: 600; letter-spacing: 1.4px; }
#selHeadline { font: 600 28px/1.15 var(--font-display); letter-spacing: -0.3px; }
#selSub { color: var(--on-variant); }
#selSub .phoneOnly { display: none; }
#selector .chev { width: 22px; height: 22px; color: var(--accent); flex: none; }
/* The stats: glass chips under the selector; tiles in the phone's bottom card. */
#stats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
#stats > * {
    display: flex; align-items: baseline; gap: 8px; padding: 7px 12px; border-radius: 999px; text-align: left; color: inherit;
    background: var(--glass); border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
#stats button:hover { background: var(--glass-strong); }
#stats dt { color: var(--muted); font-size: 12px; white-space: nowrap; }
#stats dd { margin: 0; font: 600 15px/1.3 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--accent-light); }

/* ---------- Stage: the globe (or lunar sky), its buttons, and the timeline ---------- */
#solarView, #lunarView { position: absolute; inset: 0; }
#map, #globeGL { position: absolute; inset: 0; width: 100%; height: 100%; }
#map { touch-action: none; cursor: crosshair; }
#globeGL { pointer-events: none; }
#fabs {
    position: absolute; z-index: 5; right: var(--inset); bottom: calc(var(--bottom-inset) + 10px);
    display: flex; flex-direction: column; align-items: flex-end; gap: 10px; pointer-events: none;
}
#fabs .grow { display: none; }
.fab {
    pointer-events: auto; color: var(--accent); width: 44px; height: 44px; border-radius: 50%;
    font: 600 16px var(--font-display); display: grid; place-items: center; padding: 0;
    background: var(--glass); border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.fab.ext {
    width: auto; height: 44px; border-radius: 999px; padding: 0 16px 0 12px; display: flex; align-items: center; gap: 8px;
    font: 600 14px var(--font-body); color: var(--accent-light);
}
.fab.ext svg { width: 18px; height: 18px; }
.fab:hover { background: var(--glass-strong); }
body.lunar .fab.ext { color: var(--primary); }
/* The globe's key, bottom left above the timeline (wide screens, a single eclipse). */
#legend {
    position: absolute; z-index: 4; left: var(--inset); bottom: calc(var(--bottom-inset) + 10px); pointer-events: none;
    display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 14px; font-size: 12px; color: #c4c9d4;
    background: rgba(12, 14, 20, 0.45); border: 1px solid rgba(255, 255, 255, 0.06); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
#legend > span { display: flex; align-items: center; gap: 8px; }
#legend i { flex: none; width: 18px; }
#legend .lg-band { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--band) 35%, transparent); border: 1px solid var(--band); }
#legend.partial > span:first-child { display: none; }
#legend .lg-limit { height: 0; border-top: 1.5px dashed rgba(255, 255, 255, 0.6); }
#legend .lg-shadow { width: 12px; height: 12px; margin: 0 3px; border-radius: 50%; background: radial-gradient(circle, #000 30%, rgba(0, 0, 0, 0.35) 60%, transparent 70%); border: 1px solid rgba(255, 255, 255, 0.35); }
body.lunar #legend, body.set #legend { display: none; }
@media (max-width: 599.98px), (max-height: 640px) { #legend { display: none; } }
/* Beside the timings pane, the Local timings button would only reopen what is showing. */
body.circShown #fabCirc { display: none; }
#status {
    position: absolute; right: 12px; top: calc(var(--top-inset) + 4px); font: 11px ui-monospace, Menlo, monospace; z-index: 2;
    color: var(--muted); background: var(--glass); border-radius: 6px; padding: 4px 8px; white-space: pre; pointer-events: none;
}
body:not(.debug) .lu .lu-status { display: none; } /* load and frame timings, shown with ?debug */
#bar {
    position: absolute; z-index: 6; left: var(--inset); right: var(--inset); bottom: max(var(--inset), env(safe-area-inset-bottom));
    border-radius: 22px; background: var(--glass-strong); display: flex; flex-direction: column; gap: 12px;
}
#bar:has(> #timeline[hidden]):has(> #setBar[hidden]):has(> #lunarBar[hidden]) { display: none; }

/* The timeline: play, the clock, and a track with the totality window lit (SunSlider.kt, restyled). */
.tl {
    display: grid; grid-template-columns: auto 1fr; grid-template-areas: "play clock" "track track" "labels labels";
    align-items: center; gap: 10px 12px; padding: 14px 18px 12px;
}
.play {
    grid-area: play; width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0; flex: none;
    background: var(--accent); color: var(--on-accent); display: grid; place-items: center;
}
.play svg { width: 18px; height: 18px; fill: currentColor; stroke: none; }
.play .pauseIcon, .play[aria-pressed=true] .playIcon { display: none; }
.play[aria-pressed=true] .pauseIcon { display: inline; }
.clockCol { grid-area: clock; display: flex; flex-direction: column; min-width: 0; }
.tl .clockCol output { font: 600 18px/1.2 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tl .clockCol small { color: var(--muted); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tlLabels { grid-area: labels; display: flex; justify-content: space-between; color: var(--faint); font-size: 11px; margin-top: -6px; }
#hourTrack.partial ~ .tlLabels .central { visibility: hidden; }
.track {
    grid-area: track; position: relative; height: 26px;
    --a: var(--accent); --p: 50%;
}
.track > span, .track > i { position: absolute; pointer-events: none; }
.track .rail { left: 0; right: 0; top: 11px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.12); }
.track .fill { left: 0; width: var(--p); top: 11px; height: 4px; border-radius: 2px; background: linear-gradient(90deg, color-mix(in srgb, var(--a) 35%, transparent), var(--a)); }
.track .pill {
    left: var(--w0, 50%); width: calc(var(--w1, 50%) - var(--w0, 50%)); min-width: 8px; top: 6px; height: 14px; border-radius: 7px;
    background: color-mix(in srgb, var(--a) 25%, transparent); border: 1px solid color-mix(in srgb, var(--a) 60%, transparent);
}
.track.partial .pill { display: none; }
.track .tick { left: var(--t, -10%); top: 3px; width: 2px; height: 20px; background: rgba(255, 255, 255, 0.35); }
.track .tick.p1 { --t: var(--p1, -10%); }
.track .tick.p4 { --t: var(--p4, -10%); }
.track input[type=range] { position: absolute; inset: 0; height: 26px; margin: 0; }
@media (prefers-color-scheme: light) {
    .track .rail { background: rgba(27, 27, 22, 0.14); }
    .track .tick { background: rgba(27, 27, 22, 0.3); }
}

/* SunSlider.kt: a range whose thumb glows (the track is drawn behind it, above). */
input[type=range].sun { -webkit-appearance: none; appearance: none; background: none; border: 0; padding: 0; height: 24px; width: 100%; }
input[type=range].sun::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--a, var(--accent)) var(--p, 50%), color-mix(in srgb, var(--a, var(--accent)) 22%, transparent) var(--p, 50%)); }
input[type=range].sun::-moz-range-track { height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--a, var(--accent)) 22%, transparent); }
input[type=range].sun::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--a, var(--accent)); }
input[type=range].sun::-webkit-slider-thumb {
    -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; border: 0;
    background: #fff7cf; box-shadow: 0 0 0 4px color-mix(in srgb, var(--a, var(--accent)) 30%, transparent), 0 0 16px color-mix(in srgb, var(--a, var(--accent)) 70%, transparent);
}
input[type=range].sun::-moz-range-thumb {
    width: 18px; height: 18px; border-radius: 50%; border: 0;
    background: #fff7cf; box-shadow: 0 0 0 4px color-mix(in srgb, var(--a, var(--accent)) 30%, transparent), 0 0 16px color-mix(in srgb, var(--a, var(--accent)) 70%, transparent);
}
/* In the timeline's track the rail and fill are drawn underneath, so the range's own track is clear. */
.track input[type=range].sun::-webkit-slider-runnable-track { background: none; }
.track input[type=range].sun::-moz-range-track, .track input[type=range].sun::-moz-range-progress { background: none; }
#timeline input[type=range].sun::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: -9px; }
#timeline input[type=range].sun::-moz-range-thumb { width: 22px; height: 22px; }

/* A set of eclipses on the map (SetPlaybackBar) */
#setClose { position: absolute; left: var(--inset); top: calc(var(--top-inset) + 4px); z-index: 3; }
#setPill {
    position: absolute; left: 50%; top: calc(var(--top-inset) + 4px); transform: translateX(-50%); z-index: 3;
    background: var(--glass); border-radius: 16px; padding: 4px 12px; font-size: 12px; color: var(--on-variant);
}
#setBar {
    display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 12px; padding: 12px 18px 10px;
}
#setPlay { width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: var(--on-accent); border: 0; padding: 0; }
#setPlay[hidden] + .setText { grid-column: 1 / 3; }
.setText b { display: block; color: var(--accent); font: 600 16px var(--font-display); }
.setText small { color: var(--muted); }
#setScrub { grid-column: 1 / -1; }
body.set #fabs { display: none; }

/* ---------- Phones: the header shrinks, and one bottom card holds the stats, the timeline and the buttons
   (the Phone and PhoneLunar boards; app.js moves #stats and #fabs into #bar). ---------- */
@media (max-width: 599.98px) {
    #mainPane { --inset: 12px; }
    #appHeader { gap: 8px; }
    #appHeader .bar { gap: 4px; padding: 4px; }
    .appTitle { font-size: 16px; }
    /* The place stays named on a phone too: every number on screen is for it. */
    #locBtn { height: 44px; padding: 0 10px 0 8px; max-width: 50%; }
    #selector { padding: 12px 14px; gap: 12px; border-radius: 20px; }
    #selGlyph { width: 40px; height: 40px; }
    #selLabel { display: none; }
    #selHeadline { font-size: 22px; }
    #selSub { font-size: 13px; }
    #selSub .phoneOnly { display: inline; }
    #bar { border-radius: 26px; padding: 14px; gap: 12px; }
    #bar > #stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    #bar > #stats > * {
        display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 8px 10px; border-radius: 14px; min-width: 0;
        background: var(--glass-fill); border: 0; -webkit-backdrop-filter: none; backdrop-filter: none;
    }
    #bar > #stats > :nth-child(n+4) { display: none; }
    #bar > #stats dt { font-size: 11px; }
    #bar > #stats dd { font-size: 17px; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
    .tl { grid-template-areas: "play clock" "play track" "play labels"; gap: 8px 10px; padding: 0; }
    .tl .clockCol output { font-size: 16px; }
    .clockCol { flex-direction: row; justify-content: space-between; align-items: baseline; gap: 8px; }
    .tl .clockCol small { text-align: right; }
    .wideOnly { display: none; }
    .tlLabels { display: none; }
    .track { height: 18px; }
    .track .rail, .track .fill { top: 7px; }
    .track .pill { top: 3px; height: 12px; }
    .track .tick { top: 0; height: 18px; }
    .track input[type=range] { height: 18px; }
    #timeline input[type=range].sun::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -7px; }
    #setBar { padding: 0; }
    #bar > #fabs { position: static; flex-direction: row; align-items: center; gap: 8px; }
    #bar > #fabs .fab { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--glass-fill); border: 0; }
    #bar > #fabs .fab.ext { flex: 1; justify-content: center; background: color-mix(in srgb, var(--accent) 14%, transparent); }
    body.set #bar > #stats { display: none; }
}

/* ---------- Surfaces (shared look: title, cards, rows) ---------- */
.surface { padding: 16px var(--gutter) 32px; max-width: 880px; margin: 0 auto; }
.surface h2 { font: 600 24px/1.2 var(--font-display); margin: 4px 48px 4px 0; }
.surface .sub { color: var(--muted); margin: 0 0 12px; }
.card { background: var(--surface); border-radius: 20px; padding: 16px 18px; margin-top: 12px; }
.card h3 { margin: 0 0 10px; font: 600 16px var(--font-display); color: var(--accent); }
.card pre { margin: 0; font: 12px/1.5 ui-monospace, Menlo, monospace; overflow-x: auto; color: var(--on-surface); }
.card { border: 1px solid var(--hairline); }
dl.rowsdl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; }
dl.rowsdl dt { color: var(--muted); }
dl.rowsdl dd { margin: 0; text-align: right; font-family: var(--font-display); font-variant-numeric: tabular-nums; }

/* Chooser (chooser.js, the Chooser design): a header block (search, type and period chips, the decade
   timeline, the count) over the list, which alone scrolls, and a 48px button pinned under it. */
.chooser { display: flex; flex-direction: column; height: 100%; padding-bottom: 0; }
.chHead { flex: none; display: flex; flex-direction: column; gap: 10px; padding-bottom: 8px; min-width: 0; }
.surface.chooser h2 { font: 600 24px var(--font-display); margin: 4px 48px 0 0; }
.chSearch {
    display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px;
    border: 1px solid var(--outline); background: var(--glass-fill); color: var(--muted); min-width: 0;
}
.chSearch:focus-within { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.chSearch svg { flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.chSearch input { flex: 1; min-width: 0; height: 100%; border: 0; border-radius: 0; background: none; padding: 0; color: var(--on-surface); font: 400 15px var(--font-body); outline: none; }
.chSearch input::placeholder { color: var(--muted); opacity: 0.8; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.fchip {
    display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 999px; white-space: nowrap;
    border: 1px solid var(--outline); background: var(--glass-fill); color: var(--on-surface); font: 500 13px var(--font-body);
}
.fchip:has(svg) { padding-left: 8px; }
.fchip:hover { background: var(--hover); }
.fchip[aria-pressed=true] { border-color: color-mix(in srgb, var(--accent) 50%, transparent); background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent-light); }
.fchip .n { font: 500 12px var(--font-display); font-variant-numeric: tabular-nums; color: var(--muted); }
.fchip[aria-pressed=true] .n { color: inherit; opacity: 0.75; }
.fchip.saros span { font-size: 17px; line-height: 1; margin-right: -4px; }
.fchip.custom { padding-left: 10px; }
.fchip.custom svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.chip { background: var(--surface); border: 1px solid var(--outline); border-radius: 999px; padding: 6px 12px; color: var(--on-surface); }
.chip[aria-pressed=true] { background: var(--surface-highest); color: var(--accent); border-color: var(--accent); }
.tlStrip {
    height: 58px; overflow-x: auto; overflow-y: hidden; border-radius: 14px; background: var(--surface); border: 1px solid var(--hairline);
    scrollbar-width: none; overscroll-behavior-x: contain; cursor: pointer; box-sizing: border-box;
}
.tlStrip::-webkit-scrollbar { display: none; }
.tlStrip canvas { display: block; }
.tlHint { margin: -4px 4px 0; font-size: 11px; color: var(--muted); }
.chCount { margin: 0 4px; font: 500 13px var(--font-display); font-variant-numeric: tabular-nums; color: var(--muted); }
.chCount b { font-weight: 600; color: var(--on-surface); }
.chooser .rows {
    list-style: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 8px; overflow: auto; flex: 1; min-height: 120px;
    border-top: 1px solid var(--hairline); overscroll-behavior: contain;
}
.yearHead {
    position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 12px 4px 6px;
    background: var(--surface-low); font-size: 12px; color: var(--muted);
}
.yearHead b { font: 600 13px var(--font-display); letter-spacing: 1px; color: var(--muted); order: 0; white-space: nowrap; }
.yearHead i { flex: 1; min-width: 12px; height: 1px; background: var(--hairline); order: 1; }
.yearHead span { order: 2; flex: none; white-space: nowrap; }
.rows .row {
    display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; color: inherit;
    background: none; border: 1px solid transparent; border-radius: 14px; padding: 8px 12px;
}
.rows .row:hover { background: var(--hover); }
.rows .row.on { background: color-mix(in srgb, var(--gold) 6%, transparent); border-color: color-mix(in srgb, var(--gold) 35%, transparent); }
.rowText { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rowText b { font: 600 16px var(--font-display); }
.rowText small { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* What the chosen place sees, under a row (chooser.js rowLine): the accent for a central phase or all of a lunar totality. */
.rowText small.here, .lu-text small.here { display: flex; align-items: center; gap: 3px; margin-top: 2px; font-size: 12px; color: var(--on-variant); }
.rowText small.here span, .lu-text small.here span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rowText small.here svg, .lu-text small.here svg { flex: none; fill: none; stroke: currentColor; stroke-width: 2; }
.rowText small.here.central, .lu-text small.here.central { color: var(--accent); font-weight: 600; }
.rowText small.here.unseen, .lu-text small.here.unseen { color: var(--faint); }
/* The chooser's Solar | Lunar switch, beside its title. */
.chTitle { display: flex; align-items: center; gap: 12px; min-width: 0; margin-right: 48px; }
.surface.chooser .chTitle h2 { flex: 1; min-width: 0; margin: 4px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 599.98px) {
    /* In the bottom sheet the close button sits above the title, not beside it. */
    .chTitle { margin-right: 0; }
    .surface.chooser .chTitle h2 { font-size: 21px; }
    .kindSwitch button { padding: 5px 11px; font-size: 13px; }
}
.kindSwitch { flex: none; display: flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--surface-high); }
.kindSwitch button { border: 0; border-radius: 999px; padding: 6px 14px; background: none; color: var(--muted); font: 500 14px var(--font-body); cursor: pointer; }
.kindSwitch button[aria-selected=true] { background: var(--accent); color: var(--on-accent); font-weight: 600; cursor: default; }
.magBar { flex: none; width: 64px; height: 4px; border-radius: 2px; background: var(--hairline); position: relative; overflow: hidden; }
.magBar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; }
.magVal { flex: none; width: 40px; text-align: right; font: 600 14px var(--font-display); font-variant-numeric: tabular-nums; }
.rows .row.on .magVal { color: var(--gold-light); }
.rows .when { flex: none; width: 92px; text-align: right; font-size: 12px; color: var(--muted); }
.rows .more, .rows .empty { padding: 12px 4px; color: var(--muted); font-size: 13px; }
.nextUp { margin: 10px 0 6px; }
.nextUp button {
    display: flex; align-items: center; gap: 16px; width: 100%; text-align: left; color: inherit; padding: 16px 18px; border-radius: 20px;
    background: radial-gradient(120% 140% at 0% 50%, color-mix(in srgb, var(--na) 20%, transparent) 0%, color-mix(in srgb, var(--na) 4%, transparent) 60%), var(--glass-fill);
    border: 1px solid color-mix(in srgb, var(--na) 32%, transparent);
}
.nextUp button:hover { border-color: color-mix(in srgb, var(--na) 55%, transparent); }
.nuText { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.nuText small { font-size: 11px; letter-spacing: 1.4px; font-weight: 600; color: var(--na); }
.nuText b { font: 600 22px var(--font-display); }
.nuText span { font-size: 13px; color: var(--on-variant); }
.nuWhen { display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.nuWhen b { font: 600 30px/1 var(--font-display); font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--na) 55%, var(--on-surface)); white-space: nowrap; }
.nuWhen small { font-size: 12px; color: var(--muted); }
.chooser .foot { flex: none; padding: 10px 0 14px; border-top: 1px solid var(--hairline); }
.chooser .foot[hidden] { display: none; }
.showBtn {
    display: block; width: 100%; height: 48px; padding: 0 18px; border: 0; border-radius: 999px;
    background: var(--gold); color: #2a2300; font: 600 15px var(--font-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.showBtn:hover { filter: brightness(1.06); }
@container (max-width: 520px) {
    /* The chip rows scroll sideways rather than wrap, to leave the list its height. */
    .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
    .chips::-webkit-scrollbar { display: none; }
    .chips .fchip { flex: none; }
    .surface.chooser h2 { font-size: 22px; }
    .rows .row { gap: 10px; padding: 8px; }
    .rows .row .glyph { width: 34px; height: 34px; }
    .rows .when { display: none; }
    .nuWhen b { font-size: 22px; }
    .nextUp button { padding: 14px; gap: 12px; }
    .nuText b { font-size: 18px; }
}
@container (min-width: 700px) {
    /* Wide: the search beside the type chips, the count and the timeline's hint on one line. */
    .chHead { display: grid; grid-template-columns: minmax(200px, 1fr) auto; gap: 10px 16px; align-items: center; }
    .chHead > .chTitle, .chHead > .chPeriods, .chHead > .tlStrip { grid-column: 1 / -1; }
    .chHead > .chCount { grid-column: 1; grid-row: 5; }
    .chHead > .tlHint { grid-column: 2; grid-row: 5; margin: 0 4px; text-align: right; }
}

/* Help (EclipseMapHelpContent.kt) */
.help .guide { margin: 0 0 8px; color: var(--on-variant); }
.legendRow { display: flex; gap: 14px; align-items: start; padding: 6px 0; }
.legendRow b { display: block; font-weight: 600; }
.legendRow small { color: var(--muted); }
.sw { flex: none; width: 28px; height: 20px; display: grid; place-items: center; }
.sw::before { content: ""; display: block; }
.sw.line::before { width: 28px; border-top: 3px solid var(--c); }
.sw.dash::before { width: 28px; border-top: 2px dashed var(--c); }
.sw.area::before { width: 24px; height: 14px; border-radius: 3px; }
.sw.area[style*=umbra]::before { background: radial-gradient(circle, #000 30%, #0008 70%); border: 1.5px solid #fff7cfd9; }
.sw.area[style*=penumbra]::before { background: #0004; border: 1px solid #ffffff59; }
.sw.sun::before { width: 12px; height: 12px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 5px #ffe08240; }
.sw.marker::before { width: 7px; height: 7px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2.5px #fff; }
.sw.pin::before { width: 12px; height: 12px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #fff; border: 3px solid var(--c); }

/* ---------- Local circumstances (LocalCircumstancesSheet.kt, the Main board's right pane) ---------- */
.local { display: flex; flex-direction: column; gap: 16px; min-height: 100%; max-width: none; padding-top: 24px; }
.localHead { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-right: 44px; }
.localHead .titleCol { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: min(240px, 100%); }
.kicker { font-size: 11px; letter-spacing: 1.4px; color: var(--muted); font-weight: 600; text-transform: uppercase; overflow-wrap: anywhere; }
.local .headline { margin: 0; font: 600 30px/1.15 var(--font-display); letter-spacing: -0.3px; color: var(--on-surface); }
.local .headline.none { color: var(--muted); font-size: 22px; }
.durCol { display: flex; flex-direction: column; align-items: flex-end; }
.durCol small { font-size: 12px; color: var(--muted); }
.durCol b { font: 600 34px/1 var(--font-display); color: var(--accent); font-variant-numeric: tabular-nums; }
body.lunar .durCol b { color: var(--copper); }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; }
.tiles > div { padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--hairline); min-width: 0; }
.tiles dt { font-size: 12px; color: var(--muted); }
.tiles dd { margin: 0; font: 600 22px/1.3 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* The contacts as a strip: a line behind, lit gold across the central phase. */
.contacts {
    position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(96px, 1fr); gap: 4px;
    padding: 14px 8px 12px; border-radius: 18px; background: var(--surface); border: 1px solid var(--hairline); overflow-x: auto;
}
.contacts::before { content: ""; position: absolute; left: 8%; right: 8%; top: 31px; height: 2px; background: var(--hairline); }
.contact {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 2px 6px;
    background: none; border: 0; border-radius: 12px; text-align: center; color: inherit; min-width: 0;
}
.contact:hover { background: var(--hover); }
.contact.on { background: color-mix(in srgb, var(--gold) 9%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold) 35%, transparent); }
.cglyph { width: 36px; height: 36px; stroke: none; }
.contact small { font-size: 12px; color: var(--muted); line-height: 1.25; }
.contact.central small { color: var(--gold-light); }
.contact b { font: 600 17px var(--font-display); font-variant-numeric: tabular-nums; }
.contact span { font: 500 11px var(--font-display); color: var(--faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
/* The sky: it takes the rest of the pane's height, with its chips, mode switch and time over it. */
.skyBox { position: relative; flex: 1 0 auto; min-height: 340px; border-radius: 22px; overflow: hidden; border: 1px solid var(--hairline); background: #0b0c12; }
#sky { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.skyChips { position: absolute; left: 14px; top: 14px; right: 200px; display: flex; flex-wrap: wrap; gap: 8px; pointer-events: none; }
.skyBox .chip, .skyMode, .skyScrub {
    background: rgba(8, 9, 14, 0.6); color: #e7e9f0; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.skyBox .chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-size: 12px; border: 0; }
.skyBox .chip.safety::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #ff9f43; flex: none; }
.skyBox .chip.safety.safe::before { background: var(--safe); }
.skyBox .chip.covered { font-family: var(--font-display); font-variant-numeric: tabular-nums; }
.skyMode { position: absolute; right: 14px; top: 14px; display: flex; padding: 3px; border-radius: 999px; }
.skyMode button { height: 32px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: #c4c9d4; font: 500 12px var(--font-body); }
.skyMode button[aria-checked=true] { background: rgba(255, 255, 255, 0.14); color: #fff; }
.skyScrub {
    position: absolute; left: 14px; right: 14px; bottom: 14px; display: grid; grid-template-columns: auto 1fr; align-items: center;
    gap: 2px 12px; padding: 8px 14px; border-radius: 16px; margin: 0;
}
.skyScrub output { font: 600 15px var(--font-display); font-variant-numeric: tabular-nums; }
.skyScrub .altaz { grid-column: 1 / -1; color: #c4c9d4; font: 12px var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.skyScrub input { --a: var(--gold); }
.note { color: var(--faint); font-size: 12px; margin: 0; }
/* Planning from here (local.js): near the edge, a low Sun; the way into the path; Add to calendar. */
.planNote { color: var(--on-variant); font-size: 13px; line-height: 1.45; margin: 0; }
.wayIn button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left; border: 0; border-radius: 14px;
    padding: 10px 14px; background: color-mix(in srgb, var(--accent) 9%, transparent); color: var(--on-surface); font: 14px var(--font-body); cursor: pointer; }
.wayIn b { color: var(--accent); font-weight: 600; }
.calBtn { flex: none; align-self: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--surface-high); color: var(--accent); display: grid; place-items: center; cursor: pointer; }
.calBtn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.note button { font-size: inherit; padding: 0; }
@container (max-width: 520px) {
    .tiles { gap: 8px; }
    .tiles > div { padding: 10px 12px; }
    .tiles dd { font-size: 17px; }
    .tiles .unit { display: none; }
    .local .headline { font-size: 24px; }
    .durCol b { font-size: 26px; }
    .skyChips { right: 14px; top: 58px; }
    .skyBox { min-height: 300px; }
}
@container (min-width: 880px) {
    /* The readout keeps a column's width; the sky takes the rest of the pane, past the 880px reading width. */
    .local { display: grid; grid-template-columns: minmax(340px, 420px) 1fr; grid-template-rows: auto auto auto 1fr; column-gap: 24px; align-items: start; }
    .local > .diagramCol { grid-column: 2; grid-row: 1 / 6; height: calc(100cqh - 56px); min-height: 420px; }
    .local .contacts { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
    .local .contacts::before { display: none; }
}

#toast {
    position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60;
    background: var(--surface-highest); color: var(--on-surface); border-radius: 8px; padding: 10px 16px; box-shadow: 0 2px 8px #0008;
}

#syzygyRoot { position: fixed; inset: 0; z-index: 45; background: var(--bg); }

/* ---------- Guided tour (Walkthrough.kt) ---------- */
#tour { position: fixed; inset: 0; z-index: 70; }
#tour .hole {
    position: fixed; border-radius: 14px; box-shadow: 0 0 0 2px var(--accent), 0 0 0 100vmax #000000b3;
    transition: left .32s, top .32s, width .32s, height .32s, opacity .32s; pointer-events: none;
}
#tour .card {
    position: fixed; background: var(--surface-high); color: var(--on-surface); border-radius: 20px; padding: 20px;
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); box-shadow: 0 8px 24px #0009;
    transition: left .32s, top .32s;
}
#tour .head { display: flex; align-items: center; gap: 10px; font-size: 17px; }
#tour .head b { color: var(--accent); }
#tour p { margin: 8px 0 16px; color: var(--on-variant); }
#tour .foot { display: flex; align-items: center; gap: 4px; }
#tour .dots { display: flex; gap: 6px; align-items: center; }
#tour .dots i { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--on-variant) 35%, transparent); }
#tour .dots i.on { width: 9px; height: 9px; background: var(--accent); }
#tour .next { background: var(--accent); color: var(--on-accent); border: 0; border-radius: 20px; padding: 8px 18px; font-weight: 600; }

/* ---------- Drawer (DrawerComponents.kt) ----------
   Always the night sky, like the glass panels it slides over: the corona photograph round a black Moon
   (lunar: the LROC Moon in the copper of totality) over a scatter of stars, icon tiles on every row, and
   the selected row outlined like a picked chooser row. */
#drawerScrim { position: fixed; inset: 0; z-index: 50; background: #00000080; animation: fadeIn 0.2s; }
#drawer {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 51; width: min(320px, 86vw); overflow: auto;
    background: var(--surface-low); display: flex; flex-direction: column; padding-bottom: 20px;
    border-radius: 0 20px 20px 0; border-right: 1px solid var(--glass-border); animation: drawerIn 0.2s ease-out;
}
@keyframes drawerIn { from { transform: translateX(-100%); } }
#drawer .hero {
    position: relative; padding: calc(26px + env(safe-area-inset-top)) 24px 22px;
    display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center;
    background:
        radial-gradient(1px 1px at 12% 22%, #fffc, transparent), radial-gradient(1px 1px at 28% 70%, #fff8, transparent),
        radial-gradient(1.5px 1.5px at 44% 14%, #fff9, transparent), radial-gradient(1px 1px at 63% 82%, #fffa, transparent),
        radial-gradient(1px 1px at 78% 30%, #fff8, transparent), radial-gradient(1.5px 1.5px at 90% 64%, #fffb, transparent),
        radial-gradient(1px 1px at 6% 88%, #fff7, transparent), radial-gradient(1px 1px at 54% 48%, #fff5, transparent),
        radial-gradient(1px 1px at 84% 8%, #fff9, transparent), radial-gradient(1px 1px at 34% 40%, #fff6, transparent),
        radial-gradient(ellipse at 50% 38%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 66%), #05060a;
}
#drawer .hero .emblem {
    position: relative; width: 120px; height: 120px; margin: -14px 0 0;
    background: url("sky/corona_1024.png?v=1") center / 161px no-repeat;   /* 7 solar radii; the Sun 18.4px */
    /* Fade the corona out inside the box, so its square never shows. */
    -webkit-mask-image: radial-gradient(circle, #000 52%, transparent 70%); mask-image: radial-gradient(circle, #000 52%, transparent 70%);
}
#drawer .hero .emblem::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 37px; height: 37px; margin: -18.5px; border-radius: 50%; background: #020306;
}
body.lunar #drawer .hero .emblem { background: radial-gradient(circle, #b5402a73, transparent 70%); }
body.lunar #drawer .hero .emblem::after {
    width: 62px; height: 62px; margin: -31px;
    background: radial-gradient(circle at 36% 62%, #6e2a14, #b9532c 55%, #e07a4f), url("sky/moon_1024.jpg?v=1") center / cover;
    background-blend-mode: multiply;
}
#drawer .hero b { font-family: "Space Grotesk", sans-serif; font-size: 22px; font-weight: 600; color: #e7e9f0; }
#drawer .hero span { color: #a7adba; font-size: 12px; }
#drawer .section { padding: 18px 26px 6px; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
#drawer .item {
    display: flex; align-items: center; gap: 14px; margin: 2px 12px; text-align: left; background: none;
    border: 1px solid transparent; border-radius: 14px; padding: 8px 10px; color: var(--on-surface); font-size: 15px;
}
#drawer .item:hover { background: var(--hover); }
#drawer .item .tile {
    flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px;
    background: var(--glass-fill); border: 1px solid var(--outline); color: var(--on-variant);
}
#drawer .item .tile svg, #drawer .item .chev { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#drawer .item .tile .fill { fill: currentColor; stroke: none; }
#drawer .item.on { background: color-mix(in srgb, var(--accent) 8%, transparent); border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent); font-weight: 600; }
#drawer .item.on .tile { background: color-mix(in srgb, var(--accent) 16%, transparent); border-color: color-mix(in srgb, var(--accent) 35%, transparent); color: var(--accent); }
#drawer .item.syzygy {
    margin: 10px 12px 2px; padding: 14px 16px; border-radius: 18px; justify-content: space-between;
    background: linear-gradient(90deg, #ffd7001f, #c2d4ec1a) padding-box, linear-gradient(var(--surface-low), var(--surface-low)) padding-box,
        linear-gradient(90deg, #ffd70073, #c2d4ec66) border-box;
}
#drawer .item.syzygy b { display: block; font-family: "Space Grotesk", sans-serif; font-size: 16px; color: var(--on-surface); }
#drawer .item.syzygy small { color: var(--muted); font-size: 12px; }
#drawer .item.syzygy .chev { color: var(--muted); }
#drawer .modeRow {
    display: flex; gap: 0; margin: 0 12px; padding: 5px; border-radius: 20px;
    background: linear-gradient(90deg, #ffd70012, #c2d4ec12), var(--surface-highest); border: 1px solid var(--outline);
}
#drawer .modeRow button { flex: 1; border: 0; background: none; border-radius: 15px; padding: 12px 8px; color: var(--on-variant); font-weight: 600; }
#drawer .modeRow button.on { background: linear-gradient(#ffd700, #ffd700d1); color: #3a2e00; box-shadow: 0 0 22px #ffd70059; }
body.lunar #drawer .modeRow button.on { background: linear-gradient(#c2d4ec, #c2d4ecd1); color: #0e2334; box-shadow: 0 0 22px #c2d4ec59; }
body.lunar .solarOnly, body:not(.lunar) .lunarOnly { display: none; }

/* ---------- Dialogs: location (LocationPicker.kt) and Learn pages ---------- */
dialog {
    background: var(--surface); color: var(--on-surface); border: 0; border-radius: 28px; padding: 24px;
    width: min(440px, calc(100vw - 32px)); max-height: calc(100dvh - 48px);
}
dialog::backdrop { background: #00000080; }
dialog h2 { margin: 0 0 16px; font-size: 22px; font-weight: 500; }
#termText { color: var(--on-variant); margin: 0 0 8px; }
#placeInput { width: 100%; padding: 12px 14px; border-radius: 12px; }
#placeResults { list-style: none; margin: 8px 0; padding: 0; max-height: 50vh; overflow: auto; }
#placeResults li { padding: 10px 12px; border-radius: 10px; cursor: pointer; }
#placeResults li:hover, #placeResults li.active { background: var(--surface-high); }
#placeResults small { color: var(--muted); }
dialog .actions { display: flex; align-items: center; margin-top: 8px; }
#learnDialog { width: min(640px, calc(100vw - 16px)); padding: 0; overflow: hidden; display: none; flex-direction: column; }
#learnDialog[open] { display: flex; }
.learnHead { display: flex; align-items: center; padding: 16px 12px 8px 24px; }
.learnHead h2 { flex: 1; margin: 0; font-weight: 700; }
#learnBody { overflow: auto; padding: 0 24px 32px; color: var(--on-variant); }
#learnBody h2, #learnBody h3, #learnBody h4 { color: var(--on-surface); }
#learnBody img { display: none; } /* SolarHome passes no images on web either */
@media (max-width: 599.98px) {
    #learnDialog { width: 100vw; max-width: 100vw; max-height: calc(100dvh - 24px); margin: auto 0 0; border-radius: 28px 28px 0 0; }
}