/* ==========================================================================
   Photography Tools — Unified Dashboard Layout
   ========================================================================== */

/* --- Theme tokens (dark default — brand-warm instrument palette) --- */
.dash-page {
    /* Type voice: Inter for UI text (self-hosted), Outfit for headings,
       system mono for instrument readouts. No unloaded font families. */
    --pt-font-ui: 'Inter', system-ui, sans-serif;
    --pt-font-display: 'Outfit', 'Inter', system-ui, sans-serif;
    --pt-font-mono: ui-monospace, 'SF Mono', 'Menlo', 'Consolas', monospace;

    --pt-page-bg: #0f172a;
    --pt-chrome-bg: #111827;
    --pt-surface: #1f2937;
    --pt-surface-raised: #374151;
    --pt-border: #1f2937;
    --pt-border-strong: #374151;
    --pt-text: #f3f4f6;
    --pt-text-secondary: #d1d5db;
    --pt-text-muted: #9ca3af;
    --pt-text-faint: #6b7280;
    --pt-accent: #e0a23c;
    --pt-accent-bright: #edb25a;
    --pt-secondary: #4bb5a4;
    --pt-ok: #10b981;
    --pt-bad: #ef4444;
    --pt-illust-bg: #0f172a;
    --pt-illust-fill: #1e293b;
    --pt-illust-ground: #1e293b;
    --pt-illust-detail: #374151;
    --pt-illust-grid: #253044;

    /* Scene element tokens (SVG illustrations — rocks, trees, flowers) */
    --pt-scene-rock: #64748b;
    --pt-scene-rock-shadow: #475569;
    --pt-scene-trunk: #78350f;
    --pt-scene-trunk-far: #5c3a1e;
    --pt-scene-leaf: #166534;
    --pt-scene-leaf-shadow: #1a3a28;
    --pt-scene-leaf-far: #14532d;
    --pt-scene-stem: #10b981;
    --pt-scene-stem-shadow: #1e7a5a;
    --pt-scene-branch: #22c55e;
    --pt-scene-flower-a: #fbbf24;
    --pt-scene-flower-b: #f472b6;

    /* Moon phase icon tokens */
    --pt-moon-shadow: #1e293b;
    --pt-moon-lit: #e2e8f0;
    --pt-moon-border: #475569;

    /* Toolbar tokens — slightly darker/lighter than page bg so the sticky
       chrome reads as a distinct surface in either theme. */
    --pt-toolbar-bg: #060911;
    --pt-toolbar-chassis: #0c1018;

    background-color: var(--pt-page-bg);
    color-scheme: dark;
    min-height: 100vh;
    /* Instrument surface: live values must never jitter as digits change */
    font-variant-numeric: tabular-nums;
}

/* Light overrides — warm cream brand family */
.dash-page[data-theme="light"] {
    --pt-page-bg: #f4efe7;
    --pt-chrome-bg: #fffdf9;
    --pt-surface: #fbf6f0;
    --pt-surface-raised: #f0e8dc;
    --pt-border: #ede4d9;
    --pt-border-strong: #ddd0be;
    --pt-text: #1c1c1c;
    --pt-text-secondary: #3d3a35;
    --pt-text-muted: #6b6459;
    --pt-text-faint: #8a8174;
    --pt-accent: #d4922a;
    --pt-accent-bright: #a8721e;
    --pt-secondary: #3a9e8f;
    --pt-ok: #059669;
    --pt-bad: #dc2626;
    --pt-illust-bg: #b8d8f0;
    --pt-illust-fill: #7a899e;
    --pt-illust-ground: #8b9a6f;
    --pt-illust-detail: #4a6741;
    --pt-illust-grid: #97b5cc;
    --pt-scene-rock: #94a3b8;
    --pt-scene-rock-shadow: #64748b;
    --pt-scene-trunk: #92400e;
    --pt-scene-trunk-far: #a16207;
    --pt-scene-leaf: #15803d;
    --pt-scene-leaf-shadow: #166534;
    --pt-scene-leaf-far: #14532d;
    --pt-scene-stem: #059669;
    --pt-scene-stem-shadow: #047857;
    --pt-scene-branch: #16a34a;
    --pt-scene-flower-a: #d97706;
    --pt-scene-flower-b: #db2777;
    --pt-moon-shadow: #5c564c;
    --pt-moon-lit: #faf7f2;
    --pt-moon-border: #b3a893;
    --pt-toolbar-bg: #faf5ed;
    --pt-toolbar-chassis: #eae0d2;
    color-scheme: light;
}

/* Auto — follows OS preference */
@media (prefers-color-scheme: light) {
    .dash-page[data-theme="auto"] {
        --pt-page-bg: #f4efe7;
        --pt-chrome-bg: #fffdf9;
        --pt-surface: #fbf6f0;
        --pt-surface-raised: #f0e8dc;
        --pt-border: #ede4d9;
        --pt-border-strong: #ddd0be;
        --pt-text: #1c1c1c;
        --pt-text-secondary: #3d3a35;
        --pt-text-muted: #6b6459;
        --pt-text-faint: #8a8174;
        --pt-accent: #d4922a;
        --pt-accent-bright: #a8721e;
        --pt-secondary: #3a9e8f;
        --pt-ok: #059669;
        --pt-bad: #dc2626;
        --pt-illust-bg: #b8d8f0;
        --pt-illust-fill: #7a899e;
        --pt-illust-ground: #8b9a6f;
        --pt-illust-detail: #4a6741;
        --pt-illust-grid: #97b5cc;
        --pt-scene-rock: #94a3b8;
        --pt-scene-rock-shadow: #64748b;
        --pt-scene-trunk: #92400e;
        --pt-scene-trunk-far: #a16207;
        --pt-scene-leaf: #15803d;
        --pt-scene-leaf-shadow: #166534;
        --pt-scene-leaf-far: #14532d;
        --pt-scene-stem: #059669;
        --pt-scene-stem-shadow: #047857;
        --pt-scene-branch: #16a34a;
        --pt-scene-flower-a: #d97706;
        --pt-scene-flower-b: #db2777;
        --pt-moon-shadow: #5c564c;
        --pt-moon-lit: #faf7f2;
        --pt-moon-border: #b3a893;
        --pt-toolbar-bg: #faf5ed;
        --pt-toolbar-chassis: #eae0d2;
        color-scheme: light;
    }
}

/* Night — red-light field mode. Desaturated flat reds on near-black to
   preserve dark-adapted (rod) vision in the field. No white, green, or
   blue anywhere. Flat solid colors only. */
.dash-page[data-theme="night"] {
    --pt-page-bg: #0a0606;
    --pt-chrome-bg: #140a0a;
    --pt-surface: #1c0f0d;
    --pt-surface-raised: #2a1512;
    --pt-border: #381614;
    --pt-border-strong: #4a1d1a;
    --pt-text: #e0584a;
    --pt-text-secondary: #c04c3c;
    --pt-text-muted: #9c4234;
    --pt-text-faint: #70312a;
    --pt-accent: #ff6b4a;
    --pt-accent-bright: #ff8a6a;
    --pt-secondary: #d9705c;
    --pt-ok: #c46a3a;
    --pt-bad: #ff3b30;
    --pt-illust-bg: #0a0606;
    --pt-illust-fill: #1c0f0d;
    --pt-illust-ground: #1c0f0d;
    --pt-illust-detail: #2a1512;
    --pt-illust-grid: #301311;
    --pt-scene-rock: #8a4a3a;
    --pt-scene-rock-shadow: #5e3026;
    --pt-scene-trunk: #6e3322;
    --pt-scene-trunk-far: #582a1e;
    --pt-scene-leaf: #803a2c;
    --pt-scene-leaf-shadow: #54261e;
    --pt-scene-leaf-far: #482018;
    --pt-scene-stem: #a8503c;
    --pt-scene-stem-shadow: #7e3a2c;
    --pt-scene-branch: #b85a44;
    --pt-scene-flower-a: #e0764e;
    --pt-scene-flower-b: #d4584a;
    --pt-moon-shadow: #2a1512;
    --pt-moon-lit: #e8a08c;
    --pt-moon-border: #70312a;
    --pt-toolbar-bg: #070303;
    --pt-toolbar-chassis: #100808;
    color-scheme: dark;
}

/* Night — non-token overrides mirroring the light-theme extras whose dark
   defaults are hardcoded blue/white. Red family only. */
.dash-page[data-theme="night"] .dash-toolbar__section {
    border-right-color: rgba(255, 107, 74, 0.12);
}
.dash-page[data-theme="night"] .dash-toolbar__gps {
    border-color: rgba(255, 107, 74, 0.25);
}
.dash-page[data-theme="night"] .planner-map__pin {
    background: #ff6b4a;
    border-color: #0a0606;
}
.dash-page[data-theme="night"] .cond-hero,
.dash-page[data-theme="night"] .cond-gauge,
.dash-page[data-theme="night"] .cond-fday,
.dash-page[data-theme="night"] .cond-film__strip {
    background-color: #120909;
}
.dash-page[data-theme="night"] .cond-instruments,
.dash-page[data-theme="night"] .cond-gauge {
    --cond-gauge-track: rgba(255, 107, 74, 0.1);
    --cond-gauge-value: #e0584a;
    --cond-gauge-label: #9c4234;
    --cond-gauge-sub: #70312a;
    --cond-gauge-tick: #c04c3c;
    --cond-gauge-face: #100808;
    --cond-gauge-bezel: #381614;
    --cond-gauge-readout-bg: #140a0a;
    --cond-gauge-readout-border: #4a1d1a;
    --cond-gauge-hub: #4a1d1a;
    --cond-gauge-hub-inner: #9c4234;
    --cond-gauge-needle: #ff8a6a;
}
.dash-page[data-theme="night"] .cond-instruments,
.dash-page[data-theme="night"] .cond-forecast-strip,
.dash-page[data-theme="night"] .cond-film__strip {
    border-color: #381614;
}
.dash-page[data-theme="night"] .cond-film {
    border-color: rgba(255, 107, 74, 0.12);
}
.dash-page[data-theme="night"] .cond-film__header {
    background-color: rgba(255, 107, 74, 0.05);
    border-bottom-color: rgba(255, 107, 74, 0.12);
}
.dash-page[data-theme="night"] .cond-film__best-badge,
.dash-page[data-theme="night"] .cond-film__rain-badge {
    color: #c46a3a;
}
.dash-page[data-theme="night"] .cond-film__best-dot {
    background-color: #c46a3a;
}
.dash-page[data-theme="night"] .cond-fday {
    border-right-color: rgba(255, 107, 74, 0.08);
}
.dash-page[data-theme="night"] .cond-fday.is-best {
    background-color: rgba(196, 106, 58, 0.1);
}
.dash-page[data-theme="night"] .cond-fday.is-best::after {
    background-color: #c46a3a;
}
.dash-page[data-theme="night"] .cond-fday.has-rain {
    border-top-color: #ff3b30;
}
.dash-page[data-theme="night"] .cond-hero {
    border-color: #381614;
}
.dash-page[data-theme="night"] .cond-hero::before {
    background-color: rgba(255, 107, 74, 0.25);
}
.dash-page[data-theme="night"] .cond-hero__temp {
    color: #ff8a6a;
    text-shadow: none;
}
.dash-page[data-theme="night"] .cond-hero__feels,
.dash-page[data-theme="night"] .cond-hero__score-label {
    color: #9c4234;
}
.dash-page[data-theme="night"] .cond-hero__condition {
    color: #c04c3c;
}
.dash-page[data-theme="night"] .cond-hero__score-dot {
    background-color: #381614;
}
.dash-page[data-theme="night"] .cond-hero__score-dot.is-on {
    background-color: currentColor;
}
.dash-page[data-theme="night"] .cond-fday__day {
    color: #9c4234;
}
.dash-page[data-theme="night"] .cond-fday__temp {
    color: #c04c3c;
}
.dash-page[data-theme="night"] .cond-fday__rain {
    color: #d9705c;
}

/* Night — the global site navbar is white Tailwind chrome; pull it into the
   red field palette while night mode is active on the dashboard. Flat solid
   colors only. */
.dash-page[data-theme="night"] .navbar {
    background-color: #140a0a;
    border-bottom-color: #381614;
}
.dash-page[data-theme="night"] .navbar a,
.dash-page[data-theme="night"] .navbar button {
    color: #c04c3c;
}
.dash-page[data-theme="night"] .navbar a:hover,
.dash-page[data-theme="night"] .navbar button:hover {
    color: #ff6b4a;
}
.dash-page[data-theme="night"] .navbar .bg-white {
    background-color: #140a0a;
    border-color: #381614;
}
.dash-page[data-theme="night"] .navbar .hover\:bg-gray-50:hover {
    background-color: #2a1512;
}
.dash-page[data-theme="night"] .navbar .hover\:text-black:hover {
    color: #ff6b4a;
}

/* Night — the tour CTA include ships hardcoded gray-900/white Tailwind
   classes; remap them to the red field palette so no white panel breaks
   dark adaptation. Flat solid colors only. */
.dash-page[data-theme="night"] .dash-cta .bg-gray-900 {
    background-color: #140a0a;
    border: 1px solid #381614;
}
.dash-page[data-theme="night"] .dash-cta .text-white {
    color: #e0584a;
}
.dash-page[data-theme="night"] .dash-cta .text-gray-400 {
    color: #9c4234;
}
.dash-page[data-theme="night"] .dash-cta a.bg-white {
    background-color: #2a1512;
    color: #e0584a;
    border: 1px solid #4a1d1a;
}
.dash-page[data-theme="night"] .dash-cta a.bg-white:hover {
    background-color: #381614;
    color: #ff8a6a;
}

/* ==========================================================================
   Toolbar — Camera LCD Top Plate
   --------------------------------------------------------------------------
   Single recessed dark panel inspired by Canon/Nikon shoulder LCDs.
   Monospace readouts, thin section dividers, amber accents.
   Flat design only — no gradients.
   ========================================================================== */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.dash-toolbar {
    position: sticky;
    top: 5rem;
    /* Stay above the aurora map / Leaflet panes (their controls run up to
       z-index 1100) so content can't visibly scroll under the toolbar. */
    z-index: 1200;
    /* Theme-driven background so the sticky bar follows light/dark mode. */
    background-color: var(--pt-toolbar-bg);
    padding: var(--pt-space-1-5) var(--pt-space-4);
    width: 100%;
    box-sizing: border-box;
    /* Bottom edge that clearly separates the toolbar from the scrolling
       content beneath. Border + shadow combo so the layering reads at any
       background color. */
    border-bottom: 1px solid var(--pt-border);
    box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.7);
}

/* The global site nav (.navbar, fixed, Tailwind z-50) opens dropdown menus that
   extend down over the sticky camera toolbar's strip. The toolbar sits at
   z-index 1200 (needed to stay above Leaflet/aurora map panes), far above the
   navbar's z-50 — so without this the menu dropdowns render *behind* the
   toolbar. Lift the whole nav above the toolbar on tool-dashboard pages.
   Immersive/fullscreen sky views use z-index 100000+, so they still cover it. */
body.dash-page .navbar {
    z-index: 1300;
}
@media (max-width: 640px) {
    body.dash-page .navbar,
    body.dash-page .fuchs-lightbox {
        /* Fixed elements sized with left/right:0 use Chromium's layout
           viewport, which can include the mobile scrollbar gutter. 100vw
           tracks the visual viewport and removes the measurable 5px leak. */
        width: 100vw;
        max-width: 100vw;
        right: auto;
    }
}

.dash-toolbar__chassis {
    max-width: 96rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--pt-toolbar-chassis);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-md);
    padding: 0;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.4);
    overflow: visible;
    position: relative;
}

/* --- LCD Sections -------------------------------------------------------- */
.dash-toolbar__section {
    display: flex;
    align-items: center;
    padding: var(--pt-space-1-5) var(--pt-space-2-5);
    gap: var(--pt-space-1-5);
    border-right: 1px solid rgba(255,255,255,0.06);
    min-width: 0;
}
.dash-toolbar__section:last-child { border-right: none; }
.dash-toolbar__section--location {
    flex: 1;
    min-width: 0;
    position: relative;
}
.dash-toolbar__section--date,
.dash-toolbar__section--time { flex-shrink: 0; }
.dash-toolbar__section--actions {
    flex-shrink: 0;
    gap: var(--pt-space-3);
}

/* --- GPS button ---------------------------------------------------------- */
.dash-toolbar__gps {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.375rem;
    flex-shrink: 0;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 50%;
    color: var(--pt-accent);
    cursor: pointer;
    padding: 0;
    transition: border-color 150ms ease, color 150ms ease;
}
.dash-toolbar__gps svg {
    width: 0.75rem;
    height: 0.75rem;
}
.dash-toolbar__gps:hover {
    border-color: var(--pt-accent);
    color: var(--pt-accent-bright);
}
.dash-toolbar__gps:focus-visible {
    outline: 2px solid var(--pt-accent);
    outline-offset: 1px;
}
.dash-toolbar__gps.is-loading svg {
    animation: dashGpsSpin 1.2s linear infinite;
}
@keyframes dashGpsSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* --- Location input ------------------------------------------------------ */
/* --- Location button (replaces inline search input) ---------------------- */
.dash-toolbar__loc-btn {
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: var(--pt-space-0-5) 0;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}
.dash-toolbar__loc-label {
    font-family: var(--pt-font-mono);
    font-size: var(--pt-text-xs);
    font-weight: 500;
    color: var(--pt-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-toolbar__loc-btn:hover .dash-toolbar__loc-label {
    color: var(--pt-accent);
}
.dash-toolbar__loc-btn:focus-visible {
    outline: 2px solid var(--pt-accent);
    outline-offset: 2px;
}

/* --- Search panel (dropdown below toolbar) ------------------------------- */
.dash-search-panel {
    position: absolute;
    top: calc(100% - 2px);
    left: var(--pt-space-4);
    right: var(--pt-space-4);
    max-width: 32rem;
    background-color: var(--pt-chrome-bg);
    border: 1px solid var(--pt-border-strong);
    border-radius: var(--pt-radius-md);
    padding: var(--pt-space-2);
    z-index: 50;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35);
    display: none;
}
.dash-search-panel:not([hidden]) { display: block; }
.dash-search-panel__input {
    width: 100%;
    background: var(--pt-surface);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-sm);
    color: var(--pt-text);
    font-family: var(--pt-font-mono);
    font-size: var(--pt-text-sm);
    font-weight: 500;
    padding: var(--pt-space-2) var(--pt-space-3);
    outline: none;
    box-sizing: border-box;
}
.dash-search-panel__input:focus {
    border-color: var(--pt-accent);
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.2);
}
.dash-search-panel__input::placeholder {
    color: var(--pt-text-faint);
    font-weight: 400;
}

/* --- Search dropdown (inside search panel) ------------------------------- */
.dash-search__dropdown {
    background-color: var(--pt-chrome-bg);
    border: 1px solid var(--pt-border-strong);
    border-radius: var(--pt-radius-sm);
    max-height: 260px;
    overflow-y: auto;
    display: none;
    margin-top: var(--pt-space-1);
}
.dash-search__dropdown.is-open { display: block; }
.dash-search__item {
    padding: var(--pt-space-2) var(--pt-space-3);
    cursor: pointer;
    border-bottom: 1px solid var(--pt-border);
    font-family: var(--pt-font-ui);
    font-size: var(--pt-text-sm);
    color: var(--pt-text-secondary);
    transition: background-color 100ms ease;
}
.dash-search__item:last-child { border-bottom: none; }
.dash-search__item:hover,
.dash-search__item.is-active {
    background-color: var(--pt-surface-raised);
    color: var(--pt-text);
}

/* --- Date / Time fields -------------------------------------------------- */
.dash-toolbar__field {
    background: transparent;
    border: none;
    outline: none;
    color: var(--pt-text);
    font-family: var(--pt-font-mono);
    font-size: var(--pt-text-xs);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1;
    padding: 0;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
    min-width: 0;
}
.dash-toolbar__field:focus {
    color: var(--pt-accent-bright);
}
.dash-toolbar__field--date { width: 8rem; }
.dash-toolbar__field--time { width: 6rem; }
.dash-toolbar__field::-webkit-calendar-picker-indicator {
    filter: invert(0.6);
    opacity: 0.4;
    width: 0.75rem;
    height: 0.75rem;
    cursor: pointer;
}
.dash-toolbar__field::-webkit-calendar-picker-indicator:hover {
    opacity: 0.8;
}

/* --- Time pulse dot ------------------------------------------------------ */
.dash-time-pulse {
    display: none;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--pt-accent);
    animation: dash-pulse 1s ease-in-out infinite;
    flex-shrink: 0;
}
.dash-time-pulse.is-active { display: block; }
.dash-time-pulse.is-fast { animation-duration: 0.35s; }
.dash-time-pulse.is-faster { animation-duration: 0.15s; }
@keyframes dash-pulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 1; }
}

/* --- NOW button ---------------------------------------------------------- */
.dash-toolbar__now {
    background: none;
    border: none;
    color: var(--pt-accent);
    font-family: var(--pt-font-ui);
    font-size: var(--pt-text-2xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    padding: var(--pt-space-0-5) var(--pt-space-1);
    line-height: 1;
    white-space: nowrap;
    transition: color 150ms ease;
}
.dash-toolbar__now:hover { color: var(--pt-accent-bright); }
.dash-toolbar__now:focus-visible {
    outline: 2px solid var(--pt-accent);
    outline-offset: 1px;
}

/* --- Gear button --------------------------------------------------------- */
/* Shared icon button base for gear + CTA */
.dash-toolbar__gear,
.dash-toolbar__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    background: transparent;
    color: var(--pt-text-muted);
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: color 150ms ease;
    flex-shrink: 0;
}
.dash-toolbar__gear svg,
.dash-toolbar__cta svg {
    width: 1rem;
    height: 1rem;
    stroke-width: 2.5;
}
.dash-toolbar__gear:hover,
.dash-toolbar__gear[aria-expanded="true"],
.dash-toolbar__cta:hover {
    color: var(--pt-accent);
}
.dash-toolbar__gear:focus-visible,
.dash-toolbar__cta:focus-visible {
    outline: 2px solid var(--pt-accent);
    outline-offset: 2px;
}

/* --- Night-vision quick toggle (eye button, left of gear) ----------------- */
.dash-toolbar__night[aria-pressed="true"] {
    color: var(--pt-accent);
}

/* --- Settings panel (dropdown) ------------------------------------------- */
.dash-settings__panel {
    position: absolute;
    top: calc(100% - 2px);
    right: var(--pt-space-4);
    z-index: 50;
    min-width: 11rem;
    max-width: calc(100vw - 1rem);
    padding: var(--pt-space-2-5);
    background: var(--pt-chrome-bg);
    border: 1px solid var(--pt-border-strong);
    border-radius: var(--pt-radius-md);
    box-shadow: 0 8px 24px rgba(0,0,0,0.3);
    display: none;
    flex-direction: column;
    gap: var(--pt-space-2);
}
.dash-settings__panel:not([hidden]) {
    display: flex;
}
.dash-settings__group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pt-space-2);
}
.dash-settings__label {
    font-family: var(--pt-font-ui);
    font-size: var(--pt-text-2xs);
    font-weight: 600;
    color: var(--pt-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

/* --- Segmented controls -------------------------------------------------- */
.dash-seg {
    display: inline-flex;
    align-items: center;
    background-color: var(--pt-page-bg);
    border: 1px solid var(--pt-border-strong);
    border-radius: var(--pt-radius-full);
    padding: 2px;
    gap: 2px;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.3);
}
.dash-seg__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5rem;
    height: 1.25rem;
    padding: 0 var(--pt-space-1-5);
    font-family: var(--pt-font-ui);
    font-size: var(--pt-text-2xs);
    font-weight: 700;
    color: var(--pt-text-faint);
    background: none;
    border: none;
    border-radius: var(--pt-radius-full);
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
    line-height: 1;
    letter-spacing: 0.04em;
}
.dash-seg__btn:hover { color: var(--pt-text-secondary); }
.dash-seg__btn:focus-visible {
    outline: 2px solid var(--pt-accent);
    outline-offset: 1px;
    color: var(--pt-text);
}
.dash-seg__btn.is-active {
    background-color: var(--pt-accent);
    color: var(--pt-chrome-bg);
}
.dash-seg__btn svg { width: 0.75rem; height: 0.75rem; }

/* --- Field ergonomics — ≥44px effective hit targets -----------------------
   Visual chrome stays slim; an invisible centered ::after pad expands the
   tappable area for gloved / cold-finger field use. */
.dash-toolbar__now,
.dash-toolbar__gear,
.dash-toolbar__cta,
.dash-seg__btn {
    position: relative;
}
.dash-toolbar__now::after,
.dash-toolbar__gear::after,
.dash-toolbar__cta::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    min-width: 100%;
    min-height: 100%;
}
.dash-seg__btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% + 4px);
    height: 44px;
}

/* --- Light theme overrides ----------------------------------------------- */
.dash-page[data-theme="light"] .dash-toolbar__chassis {
    border-color: var(--pt-border-strong);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
}
.dash-page[data-theme="light"] .dash-toolbar__section {
    border-right-color: rgba(0,0,0,0.08);
}
.dash-page[data-theme="light"] .dash-toolbar__gps {
    border-color: rgba(0,0,0,0.12);
    color: var(--pt-accent);
}
@media (prefers-color-scheme: light) {
    .dash-page[data-theme="auto"] .dash-toolbar__chassis {
        border-color: var(--pt-border-strong);
        box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
    }
    .dash-page[data-theme="auto"] .dash-toolbar__section {
        border-right-color: rgba(0,0,0,0.08);
    }
    .dash-page[data-theme="auto"] .dash-toolbar__gps {
        border-color: rgba(0,0,0,0.12);
    }
}

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 640px) {
    .dash-toolbar { padding: var(--pt-space-1) var(--pt-space-1); }
    .dash-toolbar__section { padding: var(--pt-space-1) var(--pt-space-1); gap: var(--pt-space-1); }
    .dash-toolbar__loc-label { font-size: 0.5rem; }
    .dash-toolbar__field--date { width: 5.5rem; }
    .dash-toolbar__field--time { width: 5rem; }
    .dash-toolbar__field { font-size: 0.5625rem; }
    .dash-toolbar__now { font-size: 0.5rem; padding: 0 2px; }
    .dash-toolbar__gps { width: 1rem; height: 1rem; }
    .dash-toolbar__gps svg { width: 0.5rem; height: 0.5rem; }
    .dash-toolbar__gear,
    .dash-toolbar__cta { width: 1rem; height: 1rem; }
    .dash-toolbar__gear svg,
    .dash-toolbar__cta svg { width: 0.875rem; height: 0.875rem; }
    .dash-toolbar__section--actions {
        gap: var(--pt-space-2);
        /* Keep the last icon's centered 44px hit pad inside the viewport. */
        padding-right: var(--pt-space-2-5);
    }
    .dash-search-panel { left: var(--pt-space-2); right: var(--pt-space-2); }
}
/* Two-row phone toolbar: row 1 = GPS + location (full width),
   row 2 = date · time · NOW · night · gear · planner link. */
@media (max-width: 480px) {
    .dash-toolbar__chassis { flex-wrap: wrap; }
    .dash-toolbar__section--location {
        flex: 1 1 100%;
        border-right: none;
        border-bottom: 1px solid var(--pt-border);
    }
    .dash-toolbar__section--date,
    .dash-toolbar__section--time { flex: 0 1 auto; }
    .dash-toolbar__section--actions { margin-left: auto; }
}
@media (max-width: 400px) {
    .dash-toolbar__field--date { width: 5rem; }
    .dash-toolbar__field--time { width: 4.5rem; }
    .dash-toolbar__section--actions { gap: var(--pt-space-1-5); }
}
/* Touch devices: widen segmented buttons toward true 44px columns and open
   up spacing so the expanded hit pads don't swallow their neighbours. */
@media (pointer: coarse) {
    /* 40px visual + 4px ::after pad = 44px effective column width */
    .dash-seg__btn { min-width: 2.5rem; }
    .dash-settings__panel { gap: var(--pt-space-5); }
    .dash-toolbar__section--actions { gap: var(--pt-space-5); }
}

/* --- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .dash-toolbar__gps,
    .dash-toolbar__cta,
    .dash-seg__btn,
    .dash-toolbar__gear,
    .dash-toolbar__now {
        transition: none;
    }
    .dash-toolbar__gps.is-loading svg { animation: none; }
}

/* LEGACY — keep old class names working until JS is fully migrated */
.dash-search__gps { /* alias for dash-toolbar__gps */ }
.dash-search__input { /* alias for dash-toolbar__location-input */ }
.dash-settings__btn { /* alias for dash-toolbar__gear */ }
.dash-now-btn { /* alias for dash-toolbar__now */ }

/* --- Conditions bar — camera LCD instrument strip -------------------------
   Sits between the toolbar and the tile grid. Reads like a camera's top
   information panel: segmented readouts, monospace figures, compact layout.
   Expanded state reveals full conditions, verdicts, and 7-day forecast.
   -------------------------------------------------------------------------- */
/* ==========================================================================
   Planner Shell — 24h Timebar + Flyout Location Picker Map
   --------------------------------------------------------------------------
   The timebar is the only persistent planner strip. The location picker
   map mounts lazily inside the toolbar's search flyout (#dash-search-panel)
   — on demand, floating over content, never reflowing the grid. Flat solid
   colors only — theme via --pt-* tokens.
   ========================================================================== */

/* ---- Flyout picker map (inside .dash-search-panel) ---- */
.dash-search-panel__hint {
    margin: var(--pt-space-2) 0 0;
    font-size: var(--pt-text-xs);
    color: var(--pt-text-muted);
}

.dash-search-panel__map {
    height: 17rem;
    margin-top: var(--pt-space-2);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-sm);
    overflow: hidden;
    background: var(--pt-surface);
    position: relative;
    z-index: 0;
}

.dash-search-panel__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pt-space-2);
    margin-top: var(--pt-space-2);
}

.dash-search-panel__coords {
    font-family: var(--pt-font-mono);
    font-size: var(--pt-text-xs);
    color: var(--pt-accent);
    white-space: nowrap;
}

.dash-search-panel__done {
    padding: 0.375rem 0.875rem;
    font-size: var(--pt-text-xs);
    font-weight: 600;
    background: var(--pt-surface);
    border: 1px solid var(--pt-border-strong);
    border-radius: var(--pt-radius-md);
    color: var(--pt-text);
    cursor: pointer;
}
.dash-search-panel__done:hover {
    border-color: var(--pt-accent);
}
.dash-search-panel__done:focus-visible {
    outline: 2px solid var(--pt-accent-bright);
    outline-offset: 1px;
}

/* Observer pin — flat solid amber dot, no shadows */
.planner-map__pin {
    background: #f59e0b;
    border: 2px solid #ffffff;
    border-radius: 50%;
    cursor: grab;
}
.dash-page[data-theme="light"] .planner-map__pin {
    border-color: #0f172a;
}

@media (max-width: 768px) {
    .dash-search-panel__map {
        height: 14rem;
    }
}

/* ---- 24h Timebar ---- */
.planner-timebar-wrap {
    max-width: 96rem;
    margin: var(--pt-space-2) auto 0;
    padding: 0 var(--pt-space-4);
}

.planner-timebar {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--pt-chrome-bg);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-md);
    overflow: hidden;
}

.planner-timebar__row {
    display: flex;
    align-items: stretch;
}

.planner-timebar__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
    width: 2rem;
    flex: none;
    background: var(--pt-surface);
    border: none;
    color: var(--pt-text-muted);
    cursor: pointer;
    padding: 0;
}
.planner-timebar__btn--left {
    border-right: 1px solid var(--pt-border);
}
.planner-timebar__btn--right {
    border-left: 1px solid var(--pt-border);
}
.planner-timebar__btn-tag {
    font-size: 0.4375rem;
    line-height: 1;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pt-text-faint);
    pointer-events: none;
}
.planner-timebar__btn:hover {
    background: var(--pt-surface-raised);
    color: var(--pt-text);
}
.planner-timebar__btn:focus-visible {
    outline: 2px solid var(--pt-accent-bright);
    outline-offset: -2px;
}
.planner-timebar__btn svg {
    width: 0.875rem;
    height: 0.875rem;
}

.planner-timebar__svghost {
    flex: 1;
    min-width: 0;
    height: 3.5rem;
    cursor: crosshair;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}
.planner-timebar__svg {
    display: block;
}

.planner-timebar__hour {
    font-family: var(--pt-font-mono);
    font-size: 0.5625rem;
    fill: var(--pt-text-faint);
}
.planner-timebar__hint {
    font-size: var(--pt-text-xs);
    fill: var(--pt-text-faint);
}
.planner-timebar__cursor-label {
    font-family: var(--pt-font-mono);
    font-size: 0.625rem;
    font-weight: 700;
    fill: var(--pt-accent-bright);
    pointer-events: none;
}
.planner-timebar__svg #planner-tb-cursor {
    cursor: grab;
}
.planner-timebar__moonlbl {
    font-family: var(--pt-font-mono);
    font-size: 0.4375rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    fill: var(--pt-text-faint);
    pointer-events: none;
}

/* Timebar micro-legend — one quiet line under the strip */
.planner-timebar__legend {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    height: 1rem;
    padding: 0 0.5rem;
    border-top: 1px solid var(--pt-border);
    overflow: hidden;
}
.planner-timebar__legend:empty {
    display: none;
}
.planner-timebar__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    font-size: 0.625rem;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--pt-text-faint);
    white-space: nowrap;
}
.planner-timebar__chip-swatch {
    width: 10px;
    height: 10px;
    flex: none;
    border: 1px solid var(--pt-border-strong);
}
@media (max-width: 479px) {
    .planner-timebar__legend {
        display: none;
    }
}

/* Timebar band tooltip — flat, never intercepts the pointer */
.planner-timebar__tooltip {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    padding: 0.1875rem 0.4375rem;
    background: var(--pt-chrome-bg);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-sm);
    font-family: var(--pt-font-mono);
    font-size: 0.6875rem;
    line-height: 1;
    color: var(--pt-text);
    white-space: nowrap;
    pointer-events: none;
    z-index: 5;
}

.dash-conditions-bar {
    max-width: 96rem;
    margin: var(--pt-space-2) auto 0;
    padding: 0 var(--pt-space-4);
}
.dash-conditions-bar.is-sticky {
    position: sticky;
    z-index: 38;
    /* Opaque mask so tool content scrolling behind the sticky bar doesn't show
       through the gutter around the pill. Match the page bg (not the brighter
       chrome bg) so the bar blends into the page instead of reading as a
       distinct whiter box behind the pill. */
    background: var(--pt-page-bg);
    margin-top: 0;
    padding-top: var(--pt-space-1);
    padding-bottom: var(--pt-space-1);
}

/* ---- Compact summary strip ---- */
.dash-conditions-bar__summary {
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--pt-surface);
    border: 1px solid var(--pt-border-strong);
    border-radius: var(--pt-radius-full);
    cursor: pointer;
    padding: var(--pt-space-0-5);
    min-height: 1.75rem;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
    transition: border-color 150ms ease;
    -webkit-user-select: none;
    user-select: none;
}
.dash-conditions-bar__summary:hover {
    border-color: var(--pt-accent);
}
.dash-conditions-bar__summary:focus-visible {
    outline: 2px solid var(--pt-accent-bright);
    outline-offset: 1px;
}
.dash-conditions-bar__summary[aria-expanded="true"] {
    border-color: var(--pt-accent);
    border-radius: var(--pt-radius-md) var(--pt-radius-md) 0 0;
}

/* ==========================================================================
   Tonight strip — the conditions bar's summary row
   --------------------------------------------------------------------------
   Verdict events + hourly phase cells + badges. All astro values are local
   computations, so this row always has content; only the network badges
   (Kp, clear-sky) degrade. Flat solid colors only.
   ========================================================================== */
.dash-tonight {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--pt-space-1) var(--pt-space-3);
    flex: 1;
    min-width: 0;
    padding: var(--pt-space-0-5) var(--pt-space-2);
}
.dash-tonight__placeholder {
    font-family: var(--pt-font-ui);
    font-size: var(--pt-text-xs);
    color: var(--pt-text-faint);
    white-space: nowrap;
}
.dash-tonight__kicker {
    font-family: var(--pt-font-ui);
    font-size: var(--pt-text-2xs);
    font-weight: var(--pt-weight-semi);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pt-text-faint);
    flex: none;
}
.dash-tonight__events {
    display: flex;
    align-items: center;
    gap: var(--pt-space-2);
    font-family: var(--pt-font-ui);
    font-size: var(--pt-text-sm);
    color: var(--pt-text-secondary);
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
}
.dash-tonight__sep {
    color: var(--pt-text-faint);
}
.dash-tonight__evlabel {
    color: var(--pt-text-muted);
}
.dash-tonight__num {
    font-family: var(--pt-font-mono);
    font-weight: var(--pt-weight-semi);
    color: var(--pt-text);
}
.dash-tonight__cells {
    display: flex;
    gap: 2px;
    flex: 1 1 8rem;
    min-width: 6rem;
    max-width: 16rem;
    height: 0.5rem;
}
.dash-tonight__cell {
    flex: 1;
    border-radius: 2px;
    min-width: 0;
}
.dash-tonight__cell.is-now {
    outline: 2px solid var(--pt-accent);
    outline-offset: 1px;
}
.dash-tonight__badges {
    display: flex;
    align-items: center;
    gap: var(--pt-space-2);
    flex: none;
    margin-left: auto;
}
.dash-tonight__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--pt-space-1);
    font-family: var(--pt-font-ui);
    font-size: var(--pt-text-xs);
    color: var(--pt-text-muted);
    white-space: nowrap;
}
.dash-tonight__badge.is-stale {
    opacity: 0.5;
}
.dash-tonight__badge svg {
    display: block;
}
.dash-tonight__pill {
    font-family: var(--pt-font-ui);
    font-size: var(--pt-text-2xs);
    font-weight: var(--pt-weight-semi);
    padding: 1px var(--pt-space-1-5);
    border-radius: var(--pt-radius-full);
    white-space: nowrap;
}
.dash-tonight__pill--ok   { background-color: var(--pt-ok); color: #ffffff; }
.dash-tonight__pill--warn { background-color: var(--pt-accent); color: var(--pt-chrome-bg); }
.dash-tonight__pill--bad  { background-color: var(--pt-bad); color: #ffffff; }
.dash-tonight__pill .dash-tonight__num {
    color: inherit;
}
.dash-tonight__chip {
    font-family: var(--pt-font-ui);
    font-size: var(--pt-text-2xs);
    font-weight: var(--pt-weight-bold);
    letter-spacing: 0.06em;
    padding: 1px var(--pt-space-1-5);
    border-radius: var(--pt-radius-xs);
    white-space: nowrap;
}
.dash-tonight__chip--good     { background-color: var(--pt-ok); color: #ffffff; }
.dash-tonight__chip--marginal { background-color: var(--pt-accent); color: var(--pt-chrome-bg); }
.dash-tonight__chip--poor     { background-color: var(--pt-bad); color: #ffffff; }
.dash-tonight__retry {
    background-color: var(--pt-surface-raised);
    color: var(--pt-text-secondary);
    border: 1px solid var(--pt-border-strong);
    border-radius: var(--pt-radius-xs);
    font-size: var(--pt-text-sm);
    line-height: 1;
    padding: var(--pt-space-0-5) var(--pt-space-1-5);
    cursor: pointer;
    min-width: 1.75rem;
    min-height: 1.5rem;
}
.dash-tonight__retry:hover {
    border-color: var(--pt-accent);
    color: var(--pt-text);
}
.dash-tonight__upd {
    font-family: var(--pt-font-mono);
    font-size: var(--pt-text-2xs);
    color: var(--pt-text-faint);
    white-space: nowrap;
}
.dash-tonight__badge--tide {
    color: #60a5fa; /* water — data color, deliberately constant */
}

/* ── Sun & Moon: Tide × Golden Hour callout (curve lives on the sky chart) ── */
.sm-tide-callout {
    margin-top: var(--pt-space-2);
    padding: var(--pt-space-1-5) var(--pt-space-3);
    border-left: 2px solid var(--pt-accent);
    background-color: var(--pt-surface);
    font-family: var(--pt-font-ui);
    font-size: var(--pt-text-sm);
    color: var(--pt-text-secondary);
}
.sm-tide-callout__star {
    color: var(--pt-accent);
}

/* ── Tides tool: full view ── */
.dash-tide__hero {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--pt-space-2);
    margin-bottom: var(--pt-space-3);
}
.dash-tide__arrow {
    color: #60a5fa;
    font-size: var(--pt-text-xl);
}
.dash-tide__time {
    font-family: var(--pt-font-mono);
    font-size: var(--pt-text-6xl);
    font-weight: var(--pt-weight-semi);
    color: var(--pt-text);
}
.dash-tide__label {
    font-family: var(--pt-font-ui);
    font-size: var(--pt-text-lg);
    color: var(--pt-text-secondary);
    font-variant-numeric: tabular-nums;
}
.dash-tide__then {
    font-family: var(--pt-font-ui);
    font-size: var(--pt-text-sm);
    color: var(--pt-text-muted);
    flex-basis: 100%;
    font-variant-numeric: tabular-nums;
}
.dash-tide__chart svg {
    display: block;
    width: 100%;
    height: 6rem;
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-sm);
}
.dash-tide__best {
    margin-bottom: var(--pt-space-2);
    padding: var(--pt-space-1-5) var(--pt-space-3);
    border-left: 2px solid var(--pt-accent);
    background-color: var(--pt-surface);
    font-family: var(--pt-font-ui);
    font-size: var(--pt-text-sm);
    color: var(--pt-text-secondary);
}
.dash-tide__table {
    display: flex;
    flex-direction: column;
}
.dash-tide-table__row {
    display: flex;
    align-items: baseline;
    gap: var(--pt-space-3);
    padding: var(--pt-space-1-5) 0;
    border-top: 1px solid var(--pt-border);
}
.dash-tide-table__day {
    flex: 0 0 5.5rem;
    font-family: var(--pt-font-ui);
    font-size: var(--pt-text-sm);
    font-weight: var(--pt-weight-semi);
    color: var(--pt-text-secondary);
    white-space: nowrap;
}
.dash-tide-table__evs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pt-space-2) var(--pt-space-4);
    min-width: 0;
}
.dash-tide-table__ev {
    font-family: var(--pt-font-ui);
    font-size: var(--pt-text-xs);
    color: var(--pt-text-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.dash-tide-table__ev--low { color: var(--pt-text-secondary); }
.dash-tide-table__ev--low .dash-tide__mono { color: var(--pt-accent); }
.dash-tide__mono {
    font-family: var(--pt-font-mono);
    font-weight: var(--pt-weight-semi);
    color: var(--pt-text);
}
.dash-tide-table__star {
    color: var(--pt-accent);
}
.dash-tide__note {
    margin-top: var(--pt-space-3);
    font-family: var(--pt-font-ui);
    font-size: var(--pt-text-2xs);
    color: var(--pt-text-faint);
}

/* ── Conditions panel: compact tide row (coastal only) ── */
.cond-tide {
    margin-top: var(--pt-space-2);
    padding: var(--pt-space-2) var(--pt-space-3) var(--pt-space-3);
    background-color: var(--pt-chrome-bg);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-md);
}
.cond-tide__line {
    font-family: var(--pt-font-ui);
    font-size: var(--pt-text-sm);
    color: var(--pt-text-secondary);
}
.cond-tide__arrow {
    color: #60a5fa;
}
.cond-tide__time {
    font-family: var(--pt-font-mono);
    font-weight: var(--pt-weight-semi);
    color: var(--pt-text);
}
@media (max-width: 768px) {
    .dash-tonight__cells {
        order: 10;
        flex-basis: 100%;
        max-width: none;
    }
    .dash-tonight__badges {
        margin-left: 0;
    }
    .dash-tonight__events {
        white-space: normal;
    }
}

/* ---- Individual readout cell (segmented instrument look) ---- */
.dash-cond-cell {
    display: flex;
    align-items: center;
    gap: var(--pt-space-1);
    padding: var(--pt-space-0-5) var(--pt-space-2);
    border-right: 1px solid var(--pt-border);
    white-space: nowrap;
    min-width: 0;
}
.dash-cond-cell:last-child {
    border-right: none;
}
.dash-cond-cell__label {
    font-family: var(--pt-font-ui);
    font-size: 0.5625rem;
    font-weight: var(--pt-weight-bold);
    color: var(--pt-text-faint);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 1;
    flex-shrink: 0;
}
.dash-cond-cell__value {
    font-family: var(--pt-font-mono);
    font-size: var(--pt-text-xs);
    font-weight: var(--pt-weight-semi);
    font-variant-numeric: tabular-nums;
    color: var(--pt-text);
    letter-spacing: -0.02em;
    line-height: 1;
}

/* ---- Shooting quality indicator ---- */
.dash-cond-cell--quality {
    gap: var(--pt-space-1-5);
    padding-left: var(--pt-space-2-5);
}
.dash-cond-quality__dots {
    display: flex;
    align-items: center;
    gap: 2px;
}
.dash-cond-quality__dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: var(--pt-border);
}
.dash-cond-quality__dot.is-active {
    background-color: currentColor;
}
.dash-cond-quality--excellent { color: #10b981; }
.dash-cond-quality--good      { color: #10b981; }
.dash-cond-quality--fair       { color: var(--pt-accent); }
.dash-cond-quality--poor       { color: #ef4444; }

/* ---- Chevron toggle ---- */
.dash-conditions-bar__chevron-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    margin-left: auto;
}
.dash-conditions-bar__chevron {
    width: 0.75rem;
    height: 0.75rem;
    flex-shrink: 0;
    transition: transform 200ms ease;
    color: var(--pt-text-faint);
}
.dash-conditions-bar__summary[aria-expanded="true"] .dash-conditions-bar__chevron {
    transform: rotate(180deg);
}

/* ---- Expanded detail panel ---- */
.dash-conditions-bar__detail {
    background: var(--pt-chrome-bg);
    border: 1px solid var(--pt-accent);
    border-top: none;
    border-radius: 0 0 var(--pt-radius-md) var(--pt-radius-md);
    padding: var(--pt-space-4);
    overflow: hidden;
}

/* ---- Detail sections (legacy — kept for non-conditions widgets) ---- */
.dash-cond-section {
    margin-bottom: var(--pt-space-3);
}
.dash-cond-section:last-child {
    margin-bottom: 0;
}
.dash-cond-section__header {
    display: flex;
    align-items: center;
    gap: var(--pt-space-1);
    margin-bottom: var(--pt-space-1);
}
.dash-cond-section__title {
    font-family: var(--pt-font-ui);
    font-size: var(--pt-text-2xs);
    font-weight: var(--pt-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--pt-text-faint);
    line-height: 1;
}
.dash-cond-section__rule {
    flex: 1;
    height: 1px;
    background-color: var(--pt-border);
}

/* ==========================================================================
   Conditions Panel — Camera LCD Instrument Display (v2 compact)
   --------------------------------------------------------------------------
   Unified single-panel layout: hero readouts on left, instrument grid
   on right, verdict strip below, and a compact 7-day forecast row at
   the bottom. Flat design — no gradients.
   ========================================================================== */

/* ---- Instrument panel (wraps everything) ---- */
.cond-panel {
    display: flex;
    flex-direction: column;
    gap: var(--pt-space-1);
}

/* ---- Top row: hero + instrument grid side by side ---- */
.cond-top {
    display: flex;
    gap: 1px;
    background-color: var(--pt-border);
    border: 1px solid var(--pt-border-strong);
    border-radius: var(--pt-radius-sm);
    overflow: hidden;
}
@media (max-width: 640px) {
    .cond-top {
        flex-wrap: wrap;
    }
}

/* ---- Hero block: large temperature + score ---- */
.cond-hero {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    padding: var(--pt-space-1-5) var(--pt-space-2);
    background-color: #0d1420;
    min-width: 5.5rem;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}
@media (max-width: 640px) {
    .cond-hero {
        width: 100%;
    }
}
/* Amber top rail */
.cond-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0.375rem;
    right: 0.375rem;
    height: 1px;
    background-color: rgba(245,158,11,0.22);
}
.cond-hero__temp-row {
    display: flex;
    align-items: center;
    gap: var(--pt-space-2);
}
.cond-hero__temp {
    font-family: var(--pt-font-mono);
    font-size: var(--pt-text-2xl);
    font-weight: var(--pt-weight-bold);
    font-variant-numeric: tabular-nums;
    color: #fbbf24;
    line-height: 1;
    letter-spacing: -0.02em;
    flex-shrink: 0;
}
.cond-hero__meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.cond-hero__condition {
    font-family: var(--pt-font-ui);
    font-size: 0.6875rem;
    font-weight: var(--pt-weight-semi);
    color: var(--pt-text-secondary);
    line-height: 1;
}
.cond-hero__score {
    display: inline-flex;
    align-items: center;
    gap: 3px;
}
.cond-hero__score-dots {
    display: flex;
    gap: 3px;
}
.cond-hero__score-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--pt-border);
}
.cond-hero__score-dot.is-on {
    background-color: currentColor;
}
.cond-hero__score-label {
    font-family: var(--pt-font-ui);
    font-size: var(--pt-text-2xs);
    font-weight: var(--pt-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1;
}

/* Source badge (Live / Forecast / Historical) */
.cond-source-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: var(--pt-radius-full);
    font-family: var(--pt-font-ui);
    font-size: 9px;
    font-weight: var(--pt-weight-bold);
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.4;
    vertical-align: middle;
    margin-left: 4px;
}

/* ---- Instrument grid: unique SVG gauges ---- */
/* Aviation instrument panel — 6 round dial gauges */
.cond-instruments {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 2px;
    flex: 1;
    min-width: 0;
    --cond-gauge-track: rgba(255,255,255,0.08);
    --cond-gauge-value: #d5dce8;
    --cond-gauge-label: #8a94a6;
    --cond-gauge-sub: #6b7280;
    --cond-gauge-tick: #cbd5e1;
    --cond-gauge-face: #0a0f1a;
    --cond-gauge-bezel: #1e293b;
    --cond-gauge-readout-bg: #0f172a;
    --cond-gauge-readout-border: #334155;
    --cond-gauge-hub: #334155;
    --cond-gauge-hub-inner: #64748b;
    --cond-gauge-needle: #ffffff;
}
.cond-gauge {
    background-color: transparent;
    padding: 4px 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.cond-gauge__svg {
    display: block;
    width: 100%;
    max-width: 130px;
    height: auto;
}
@media (max-width: 900px) {
    .cond-instruments {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 500px) {
    .cond-instruments {
        grid-template-columns: repeat(2, 1fr);
    }
    .cond-gauge__svg {
        max-width: 140px;
    }
}

/* ---- Verdict strip: horizontal badges ---- */
.cond-verdicts {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}
.cond-vbadge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 0 6px;
    height: 24px;
    background-color: var(--pt-surface);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-full);
    white-space: nowrap;
    text-decoration: none;
    color: inherit;
}
.cond-vbadge:hover {
    border-color: var(--pt-border-strong);
}
.cond-vbadge__dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
}
.cond-vbadge__dot--ok      { background-color: #10b981; }
.cond-vbadge__dot--warn    { background-color: var(--pt-accent); }
.cond-vbadge__dot--bad     { background-color: #ef4444; }
.cond-vbadge__label {
    font-family: var(--pt-font-ui);
    font-size: 0.5625rem;
    font-weight: var(--pt-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pt-text-faint);
    line-height: 1;
}
.cond-vbadge__value {
    font-family: var(--pt-font-ui);
    font-size: var(--pt-text-xs);
    font-weight: var(--pt-weight-semi);
    color: var(--pt-text);
    line-height: 1;
}
/* Drone badge with merged regulation info */
/* Skeleton loading pulses */
.cond-skeleton {
    background-color: var(--pt-border);
    border-radius: 3px;
    animation: cond-pulse 1.2s ease-in-out infinite;
}
.cond-skeleton--lg { width: 60%; height: 24px; margin-bottom: 4px; }
.cond-skeleton--md { width: 70%; height: 14px; }
.cond-skeleton--sm { width: 50%; height: 10px; }
.cond-skeleton--pill { width: 80px; height: 22px; border-radius: 11px; }
.cond-skeleton--bar { width: 50%; height: 20px; margin-top: 4px; }
@keyframes cond-pulse {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.12; }
}

.cond-vbadge__regs {
    font-family: var(--pt-font-mono);
    font-size: 0.5rem;
    color: var(--pt-text-faint);
    margin-left: 2px;
}
.cond-vbadge__regs:empty {
    display: none;
}

/* ---- 7-day forecast film strip ---- */
.cond-film {
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--pt-radius-sm);
    overflow: hidden;
}
.cond-film__header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 3px 8px;
    background-color: rgba(255,255,255,0.03);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cond-film__title {
    font-family: var(--pt-font-ui);
    font-size: 0.5rem;
    font-weight: var(--pt-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--pt-text-faint);
    line-height: 1;
}
.cond-film__best-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--pt-font-ui);
    font-size: 0.5rem;
    font-weight: var(--pt-weight-semi);
    color: #10b981;
    line-height: 1;
}
.cond-film__best-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #10b981;
    flex-shrink: 0;
}
.cond-film__rain-badge {
    font-family: var(--pt-font-ui);
    font-size: 0.5rem;
    font-weight: var(--pt-weight-semi);
    color: #ef4444;
    line-height: 1;
}
.cond-film__strip {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background-color: #0d1420;
}
.cond-film__strip::-webkit-scrollbar { display: none; }
.cond-film__strip .cond-fday {
    flex: 1 0 auto;
    min-width: 90px;
}
.cond-fday {
    background-color: #0d1420;
    padding: 4px 5px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 4px;
    position: relative;
    border-right: 1px solid rgba(255,255,255,0.04);
}
.cond-fday:last-child {
    border-right: none;
}
.cond-fday__info {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}
.cond-fday__row {
    display: flex;
    align-items: baseline;
    gap: 3px;
}
.cond-fday.is-best {
    background-color: rgba(16,185,129,0.06);
}
.cond-fday.is-best::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #10b981;
}
.cond-fday.has-rain {
    border-top: 2px solid #ef4444;
}
.cond-fday__day {
    font-family: var(--pt-font-ui);
    font-size: 0.625rem;
    font-weight: var(--pt-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #5a6373;
    line-height: 1;
}
.cond-fday__wxicon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cond-fday__wxicon svg.cond-fday__icon {
    display: block;
    width: 24px;
    height: 24px;
}
.cond-fday__temp {
    font-family: var(--pt-font-mono);
    font-size: 0.75rem;
    font-weight: var(--pt-weight-bold);
    font-variant-numeric: tabular-nums;
    color: #c5cdd8;
    line-height: 1;
}
.cond-fday__cloud {
    font-family: var(--pt-font-mono);
    font-size: 0.4375rem;
    font-weight: var(--pt-weight-semi);
    line-height: 1;
}
.cond-fday__rain {
    font-family: var(--pt-font-mono);
    font-size: 0.4375rem;
    color: #60a5fa;
    line-height: 1;
}
/* Legacy classes kept for backwards compat */
.cond-forecast-strip {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background-color: var(--pt-border);
    border: 1px solid var(--pt-border-strong);
    border-radius: var(--pt-radius-sm);
    overflow: hidden;
}
.cond-forecast-label {
    font-family: var(--pt-font-ui);
    font-size: var(--pt-text-2xs);
    font-weight: var(--pt-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--pt-text-faint);
    margin-bottom: var(--pt-space-1);
}
.cond-forecast-verdict {
    font-family: var(--pt-font-ui);
    font-size: var(--pt-text-xs);
    color: var(--pt-text-faint);
    margin-top: var(--pt-space-1);
    line-height: 1.3;
}

/* ---- Light theme overrides ---- */
.dash-page[data-theme="light"] .cond-hero,
.dash-page[data-theme="light"] .cond-gauge,
.dash-page[data-theme="light"] .cond-fday {
    background-color: var(--pt-chrome-bg);
}
.dash-page[data-theme="light"] .cond-gauge {
    --cond-gauge-track: rgba(0,0,0,0.08);
    --cond-gauge-value: #3d3a35;
    --cond-gauge-label: #57534e;
    --cond-gauge-sub: #78716c;
    --cond-gauge-tick: #6b6459;
    --cond-gauge-face: #f1ece2;
    --cond-gauge-bezel: #ddd0be;
    --cond-gauge-readout-bg: #ece4d8;
    --cond-gauge-readout-border: #b3a893;
    --cond-gauge-hub: #b3a893;
    --cond-gauge-hub-inner: #6b6459;
    --cond-gauge-needle: #3d3a35;
}
.dash-page[data-theme="light"] .cond-instruments,
.dash-page[data-theme="light"] .cond-forecast-strip,
.dash-page[data-theme="light"] .cond-film__strip {
    background-color: #ece4d8;
    border-color: #ddd0be;
}
.dash-page[data-theme="light"] .cond-film {
    border-color: #ddd0be;
}
.dash-page[data-theme="light"] .cond-film__header {
    background-color: rgba(0,0,0,0.03);
    border-bottom-color: #ddd0be;
}
.dash-page[data-theme="light"] .cond-fday {
    border-right-color: rgba(0,0,0,0.06);
}
.dash-page[data-theme="light"] .cond-hero {
    border-color: #ddd0be;
}
.dash-page[data-theme="light"] .cond-hero::before {
    background-color: rgba(100,116,139,0.15);
}
.dash-page[data-theme="light"] .cond-hero__temp {
    color: #a8721e;
    text-shadow: none;
}
.dash-page[data-theme="light"] .cond-hero__feels,
.dash-page[data-theme="light"] .cond-hero__score-label {
    color: #78716c;
}
.dash-page[data-theme="light"] .cond-hero__condition {
    color: #3d3a35;
}
.dash-page[data-theme="light"] .cond-hero__score-dot {
    background-color: #ddd5c8;
}
.dash-page[data-theme="light"] .cond-hero__score-dot.is-on {
    background-color: currentColor;
}
.dash-page[data-theme="light"] .cond-fday__day {
    color: #78716c;
}
.dash-page[data-theme="light"] .cond-fday__temp {
    color: #57534e;
}
@media (prefers-color-scheme: light) {
    .dash-page[data-theme="auto"] .cond-hero,
    .dash-page[data-theme="auto"] .cond-gauge,
    .dash-page[data-theme="auto"] .cond-fday {
        background-color: var(--pt-chrome-bg);
    }
    .dash-page[data-theme="auto"] .cond-gauge {
        --cond-gauge-track: rgba(0,0,0,0.08);
        --cond-gauge-value: #3d3a35;
        --cond-gauge-label: #57534e;
        --cond-gauge-sub: #78716c;
        --cond-gauge-tick: #6b6459;
        --cond-gauge-face: #f1ece2;
        --cond-gauge-bezel: #ddd0be;
        --cond-gauge-readout-bg: #ece4d8;
        --cond-gauge-readout-border: #b3a893;
        --cond-gauge-hub: #b3a893;
        --cond-gauge-hub-inner: #6b6459;
        --cond-gauge-needle: #3d3a35;
    }
    .dash-page[data-theme="auto"] .cond-instruments,
    .dash-page[data-theme="auto"] .cond-forecast-strip,
    .dash-page[data-theme="auto"] .cond-film__strip {
        background-color: #ece4d8;
        border-color: #ddd0be;
    }
    .dash-page[data-theme="auto"] .cond-film {
        border-color: #ddd0be;
    }
    .dash-page[data-theme="auto"] .cond-film__header {
        background-color: rgba(0,0,0,0.03);
        border-bottom-color: #ddd0be;
    }
    .dash-page[data-theme="auto"] .cond-fday {
        border-right-color: rgba(0,0,0,0.06);
    }
    .dash-page[data-theme="auto"] .cond-hero {
        border-color: #ddd0be;
    }
    .dash-page[data-theme="auto"] .cond-hero::before {
        background-color: rgba(100,116,139,0.15);
    }
    .dash-page[data-theme="auto"] .cond-hero__temp {
        color: #a8721e;
        text-shadow: none;
    }
    .dash-page[data-theme="auto"] .cond-hero__feels,
    .dash-page[data-theme="auto"] .cond-hero__score-label {
        color: #78716c;
    }
    .dash-page[data-theme="auto"] .cond-hero__condition {
        color: #3d3a35;
    }
    .dash-page[data-theme="auto"] .cond-hero__score-dot {
        background-color: #ddd5c8;
    }
    .dash-page[data-theme="auto"] .cond-hero__score-dot.is-on {
        background-color: currentColor;
    }
    .dash-page[data-theme="auto"] .cond-fday__day {
        color: #78716c;
    }
    .dash-page[data-theme="auto"] .cond-fday__temp {
        color: #57534e;
    }
}

/* ---- Responsive ---- */
@media (max-width: 639px) {
    .dash-conditions-bar__summary {
        border-radius: var(--pt-radius-md);
        flex-wrap: nowrap;
    }
    .dash-conditions-bar__summary[aria-expanded="true"] {
        border-radius: var(--pt-radius-md) var(--pt-radius-md) 0 0;
    }
    .dash-cond-cell__label {
        display: none;
    }
    .dash-cond-cell {
        padding: var(--pt-space-0-5) var(--pt-space-1-5);
    }
    .dash-conditions-bar__detail {
        padding: var(--pt-space-3);
    }
    .cond-top {
        flex-direction: column;
    }
    .cond-hero {
        flex-direction: row;
        align-items: center;
        gap: var(--pt-space-3);
        min-width: 0;
    }
    .cond-hero__temp-block {
        flex-shrink: 0;
    }
    .cond-hero__meta {
        min-width: 0;
    }
    .cond-instruments {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1px;
    }
    .cond-forecast-strip,
    .cond-film__strip {
        grid-template-columns: repeat(7, 1fr);
    }
}
@media (max-width: 400px) {
    .cond-instruments {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    .cond-forecast-strip,
    .cond-film__strip {
        grid-template-columns: repeat(4, 1fr);
    }
    .cond-fday:nth-child(n+5) {
        display: none;
    }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .dash-conditions-bar__chevron {
        transition: none;
    }
}

/* --- Grid Layout --- */
.dash-grid {
    max-width: 96rem;
    margin: 0 auto;
    padding: var(--pt-space-4);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--pt-space-3);
}
@media (max-width: 1024px) {
    .dash-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
@media (max-width: 768px) {
    .dash-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--pt-space-2-5);
        padding: var(--pt-space-3);
    }
}
@media (max-width: 480px) {
    .dash-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--pt-space-2);
        padding: var(--pt-space-2);
    }
}

/* --- Tile (collapsed state) --- */
.dash-tile {
    background-color: var(--pt-chrome-bg);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-lg);
    cursor: pointer;
    overflow: hidden;
    transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
    user-select: none;
}
.dash-tile:hover {
    border-color: var(--pt-border-strong);
    transform: translateY(-2px);
}
.dash-tile:focus-visible {
    outline: 2px solid var(--pt-accent);
    outline-offset: 2px;
    border-color: var(--pt-accent);
}
.dash-tile.is-active {
    border-color: var(--pt-accent);
}

.dash-tile__preview {
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--pt-space-3);
    overflow: hidden;
}
.dash-tile__preview svg {
    width: 100%;
    height: 100%;
}

.dash-tile__footer {
    padding: var(--pt-space-2) var(--pt-space-2-5);
    border-top: 1px solid var(--pt-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.dash-tile__title {
    font-family: var(--pt-font-ui);
    font-size: var(--pt-text-sm);
    font-weight: var(--pt-weight-semi);
    color: var(--pt-text-secondary);
    line-height: 1.2;
}

/* ── Hero tiles — the three planning anchors span two columns ──
   Aspect ratios are chosen so a hero's height ≈ its single-column
   neighbors' (8:3 across two 4:3 columns, 2:1 across two 1:1). */
.dash-tile--hero {
    grid-column: span 2;
}
.dash-tile--hero .dash-tile__preview {
    aspect-ratio: 8 / 3;
}
.dash-grid--medium .dash-tile--hero .dash-tile__preview {
    aspect-ratio: 2 / 1;
}
.dash-grid--small .dash-tile--hero .dash-tile__preview {
    aspect-ratio: 2 / 1;
}

/* ── Live mini readout — shared anatomy for data-bearing tiles ──
   label (small caps, faint) / value (mono, tabular) / sub-datum.
   The glyph becomes a quiet supporting mark beside the numbers. */
.dash-mini {
    display: flex;
    align-items: center;
    gap: var(--pt-space-3);
    width: 100%;
    height: 100%;
    min-width: 0;
}
.dash-mini__glyph {
    flex: 1 1 40%;
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dash-mini__readout {
    flex: 1 1 60%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--pt-space-0-5);
}
.dash-mini__row {
    display: flex;
    align-items: baseline;
    gap: var(--pt-space-2);
    min-width: 0;
}
.dash-mini__label {
    font-family: var(--pt-font-ui);
    font-size: var(--pt-text-2xs);
    font-weight: var(--pt-weight-semi);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pt-text-faint);
    white-space: nowrap;
}
.dash-mini__value {
    font-family: var(--pt-font-mono);
    font-size: var(--pt-text-2xl);
    font-weight: var(--pt-weight-semi);
    color: var(--pt-text);
    line-height: 1.1;
    white-space: nowrap;
}
.dash-mini__value--accent { color: var(--pt-accent); }
.dash-mini__value--moon   { color: var(--pt-secondary); }
.dash-mini__sub {
    font-family: var(--pt-font-ui);
    font-size: var(--pt-text-xs);
    color: var(--pt-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dash-mini__spark {
    width: 100%;
    height: 1.5rem;
    margin-top: var(--pt-space-1);
}
.dash-mini__spark svg {
    width: 100%;
    height: 100%;
    display: block;
}
/* Compact grids: numbers shrink, then disappear in icon-only mode */
.dash-grid--medium .dash-mini__value { font-size: var(--pt-text-lg); }
.dash-grid--medium .dash-mini__sub { display: none; }
.dash-grid--small .dash-mini__readout { display: none; }
.dash-grid--small .dash-mini__glyph { flex: 1 1 100%; }
@media (max-width: 480px) {
    .dash-mini__value { font-size: var(--pt-text-lg); }
    .dash-mini__sub { display: none; }
}

/* ── Tile size modes ── */
/* Medium: 6 columns, smaller preview, compact footer */
.dash-grid--medium {
    grid-template-columns: repeat(6, 1fr) !important;
    gap: var(--pt-space-2);
}
.dash-grid--medium .dash-tile__preview {
    aspect-ratio: 1 / 1;
    padding: var(--pt-space-2);
}
.dash-grid--medium .dash-tile__footer {
    padding: var(--pt-space-1) var(--pt-space-2);
}
.dash-grid--medium .dash-tile__title {
    font-size: var(--pt-text-xs);
}
@media (max-width: 900px) {
    .dash-grid--medium { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 640px) {
    .dash-grid--medium { grid-template-columns: repeat(3, 1fr) !important; }
}

/* Small: compact list, no preview, icon-only */
.dash-grid--small {
    grid-template-columns: repeat(9, 1fr) !important;
    gap: var(--pt-space-1-5);
}
.dash-grid--small .dash-tile__preview {
    aspect-ratio: 1 / 1;
    padding: var(--pt-space-1-5);
}
.dash-grid--small .dash-tile__preview svg {
    width: 80%;
    height: 80%;
}
.dash-grid--small .dash-tile__footer {
    display: none;
}
.dash-grid--small .dash-tile {
    border-radius: var(--pt-radius-md);
}
@media (max-width: 900px) {
    .dash-grid--small { grid-template-columns: repeat(6, 1fr) !important; }
}
@media (max-width: 640px) {
    .dash-grid--small { grid-template-columns: repeat(4, 1fr) !important; }
}
@media (max-width: 480px) {
    .dash-tile {
        border-radius: var(--pt-radius-md);
    }
    .dash-tile__preview {
        aspect-ratio: 1 / 1;
        padding: var(--pt-space-2);
    }
    .dash-tile__footer {
        padding: var(--pt-space-1-5) var(--pt-space-2);
    }
    .dash-tile__title {
        font-size: var(--pt-text-2xs);
    }
}

/* ── Tool strip: compact nav shown when a tool is expanded ── */
.dash-tool-strip {
    display: none;
    position: sticky;
    z-index: 39;
    /* Full-bleed sticky bar: bg extends to viewport edges so content
       scrolling underneath can't bleed through on either side. Inner
       padding keeps the buttons visually aligned with the 96rem-wide
       toolbar/conditions chassis above/below. */
    width: 100%;
    box-sizing: border-box;
    padding-block: var(--pt-space-1-5);
    padding-inline: max(var(--pt-space-4), calc((100% - 96rem) / 2));
    background: var(--pt-toolbar-bg);
    border-bottom: 1px solid var(--pt-border);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* A real scrollbar is the most honest scroll affordance and works in
       every theme without a prohibited fade/gradient edge. */
    scrollbar-width: thin;
    scrollbar-color: var(--pt-accent) var(--pt-surface);
}
.dash-tool-strip::-webkit-scrollbar { display: block; height: 4px; }
.dash-tool-strip::-webkit-scrollbar-track { background: var(--pt-surface); }
.dash-tool-strip::-webkit-scrollbar-thumb {
    background: var(--pt-accent);
    border-radius: var(--pt-radius-full);
}
.dash-tool-strip.is-visible { display: flex; gap: var(--pt-space-1); align-items: center; }

.dash-tool-strip__btn {
    flex-shrink: 0;
    padding: var(--pt-space-1) var(--pt-space-2);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-md);
    background: transparent;
    color: var(--pt-text-secondary);
    font-family: var(--pt-font-ui);
    font-size: var(--pt-text-xs);
    font-weight: var(--pt-weight-semi);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease;
    line-height: 1.2;
}
.dash-tool-strip__btn:hover {
    border-color: var(--pt-border-strong);
    color: var(--pt-text);
}
.dash-tool-strip__btn.is-active {
    border-color: var(--pt-accent);
    color: var(--pt-accent);
    background-color: var(--pt-accent-surface, rgba(234,179,8,0.08));
    font-weight: var(--pt-weight-bold);
}
.dash-tool-strip__btn:focus-visible {
    outline: 2px solid var(--pt-accent);
    outline-offset: 1px;
}

/* Hide tile grid when a tool is expanded */
.dash-grid.has-expanded .dash-tile { display: none; }

@media (max-width: 480px) {
    .dash-tool-strip {
        padding: var(--pt-space-1) var(--pt-space-2);
        gap: var(--pt-space-1);
    }
    .dash-tool-strip__btn {
        font-size: var(--pt-text-2xs);
        padding: var(--pt-space-1) var(--pt-space-1-5);
    }
}

/* --- Expanded Widget --- */
.dash-expanded {
    display: none;
    grid-column: 1 / -1;
    background-color: var(--pt-chrome-bg);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-lg);
    overflow: hidden;
    animation: dashExpand 280ms var(--pt-ease, ease);
    isolation: isolate;
}
.dash-expanded.is-visible {
    display: block;
}
.dash-expanded:focus {
    outline: none;
}
.dash-expanded:focus-visible {
    outline: 2px solid var(--pt-accent);
    outline-offset: -2px;
}

@keyframes dashExpand {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.988);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Tile-preview → panel FLIP flight (see Dashboard._runFlip). The clone is
   fixed-position and driven per-frame from JS; CSS only carries the shell. */
.dash-flip-clone {
    position: fixed;
    z-index: 90;
    margin: 0;
    pointer-events: none;
    transform-origin: top left;
    will-change: transform, opacity;
    border-radius: var(--pt-radius-lg);
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .dash-expanded { animation: none; }
    .dash-flip-clone { display: none; }
}

.dash-expanded__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--pt-space-1-5) var(--pt-space-3);
    border-bottom: 1px solid var(--pt-border);
}
.dash-expanded__title {
    font-family: var(--pt-font-ui);
    font-size: var(--pt-text-sm);
    font-weight: var(--pt-weight-semi);
    color: var(--pt-text);
}
@media (max-width: 480px) {
    .dash-expanded__header {
        padding: var(--pt-space-1) var(--pt-space-2);
    }
    .dash-expanded__title {
        font-size: var(--pt-text-xs);
    }
    .dash-expanded {
        border-radius: var(--pt-radius-md);
    }
}
.dash-expanded__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: var(--pt-radius-sm);
    color: var(--pt-text-muted);
    cursor: pointer;
    transition: background-color 150ms ease, color 150ms ease;
    border: none;
    background: none;
}
.dash-expanded__close:hover {
    background-color: var(--pt-surface);
    color: var(--pt-text);
}
.dash-expanded__close:focus-visible {
    outline: 2px solid var(--pt-accent);
    outline-offset: 2px;
    color: var(--pt-text);
}

.dash-expanded__body {
    padding: var(--pt-space-4);
}
@media (max-width: 480px) {
    .dash-expanded__body {
        padding: var(--pt-space-2-5);
    }
}

/* Widget layout: SVG + controls side by side on desktop, stacked on mobile */
.dash-widget-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--pt-space-6);
    align-items: start;
}
@media (max-width: 768px) {
    .dash-widget-layout {
        grid-template-columns: 1fr;
    }
}

/* SVG container */
.dash-widget__svg {
    background-color: var(--pt-page-bg);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-md);
    padding: var(--pt-space-3);
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dash-widget__svg svg {
    width: 100%;
    max-height: 360px;
}
/* Milky Way viz container — aspect-ratio box matching Sun & Moon / Sky Dome */
.milky-way-viz-wrap {
    position: relative;
    width: 100%;
    padding-top: 42%;
    overflow: hidden;
    border-radius: var(--pt-radius-md);
    border: 1px solid var(--pt-border);
    background: #0f172a;
}
.milky-way-viz-wrap #milky-way-svg-container svg {
    width: 100%;
    height: 100%;
}
@media (max-width: 640px) {
    .milky-way-viz-wrap {
        padding-top: 100%;
    }
}

/* Controls panel */
.dash-widget__controls {
    display: flex;
    flex-direction: column;
    gap: var(--pt-space-3);
    min-width: 0; /* prevent flex-shrink:0 children (lens strip items) from blowing out grid */
}
@media (max-width: 480px) {
    .dash-widget__svg {
        padding: var(--pt-space-2);
        min-height: 160px;
    }
    .dash-widget__svg svg {
        max-height: 300px;
    }
    .dash-widget__controls {
        gap: var(--pt-space-2);
    }
}

/* Input row within widget */
.dash-widget__input-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--pt-space-3);
    min-width: 0;
}
@media (max-width: 640px) {
    .dash-widget__input-row {
        grid-template-columns: 1fr;
    }
}

/* Results grid — row of LCD readouts sharing a common "top plate".
   Tight gap (4px) makes them read as adjacent camera panels rather
   than disconnected stat cards. */
.dash-widget__results {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: var(--pt-space-1);
    margin-top: var(--pt-space-3);
    padding: var(--pt-space-1-5);
    background-color: var(--pt-chrome-bg);
    border: 1px solid var(--pt-border-strong);
    border-radius: var(--pt-radius-md);
    box-shadow:
        0 1px 0 rgba(255,255,255,0.04),
        inset 0 -1px 0 rgba(0,0,0,0.2);
}
.dash-page[data-theme="light"] .dash-widget__results {
    background-color: #e7dfc4;
    border-color: #c8b98a;
    box-shadow:
        0 1px 0 rgba(255,255,255,0.5),
        inset 0 -1px 0 rgba(140,110,30,0.12);
}
@media (prefers-color-scheme: light) {
    .dash-page[data-theme="auto"] .dash-widget__results {
        background-color: #e7dfc4;
        border-color: #c8b98a;
        box-shadow:
            0 1px 0 rgba(255,255,255,0.5),
            inset 0 -1px 0 rgba(140,110,30,0.12);
    }
}
@media (max-width: 480px) {
    .dash-widget__results {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 360px) {
    .dash-widget__results {
        grid-template-columns: 1fr;
    }
}
.dash-widget__results .results-note {
    grid-column: 1 / -1;
}

/* ----- Lens Optics Suite tab bar -----
   Camera "mode dial" aesthetic: recessed chrome plate with amber indicator
   on the active tab. Scrolls horizontally on narrow viewports so the labels
   never wrap. */
.lens-suite__tabs {
    display: flex;
    gap: 2px;
    margin-bottom: var(--pt-space-2);
    padding: 3px;
    background-color: var(--pt-chrome-bg);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-sm);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.lens-suite__tabs::-webkit-scrollbar { display: none; }
.dash-page[data-theme="light"] .lens-suite__tabs {
    background-color: #f0ece0;
    border-color: #d4cbb0;
}
@media (prefers-color-scheme: light) {
    .dash-page[data-theme="auto"] .lens-suite__tabs {
        background-color: #f0ece0;
        border-color: #d4cbb0;
    }
}

.lens-suite__tab {
    flex: 1 1 auto;
    min-width: 0;
    padding: 5px 10px;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: var(--pt-radius-xs);
    color: var(--pt-text-muted);
    font-family: var(--pt-font-ui);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    white-space: nowrap;
    transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}
.lens-suite__tab:hover {
    color: var(--pt-text-secondary);
}
.lens-suite__tab.is-active {
    background-color: #0d1420;
    border-color: var(--pt-border-strong);
    color: var(--pt-accent-bright);
    text-shadow: 0 0 8px rgba(251,191,36,0.35);
    box-shadow:
        inset 0 1px 3px rgba(0,0,0,0.6),
        inset 0 -1px 0 rgba(255,255,255,0.04);
}
.dash-page[data-theme="light"] .lens-suite__tab.is-active {
    background-color: #f5eeda;
    border-color: #d6c9a2;
    color: #b45309;
    text-shadow: none;
    box-shadow:
        inset 0 1px 2px rgba(140,110,30,0.18),
        inset 0 -1px 0 rgba(255,255,255,0.4);
}
@media (prefers-color-scheme: light) {
    .dash-page[data-theme="auto"] .lens-suite__tab.is-active {
        background-color: #f5eeda;
        border-color: #d6c9a2;
        color: #b45309;
        text-shadow: none;
        box-shadow:
            inset 0 1px 2px rgba(140,110,30,0.18),
            inset 0 -1px 0 rgba(255,255,255,0.4);
    }
}
.lens-suite__tab:focus-visible {
    outline: 2px solid var(--pt-accent);
    outline-offset: 2px;
}
.lens-suite__body {
    min-height: 10rem;
}
@media (prefers-reduced-motion: reduce) {
    .lens-suite__tab { transition: none; }
}

/* --- Lens Optics: Viz mode dots (carousel indicators) -------------------- */
.lens-suite__viz-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: var(--pt-space-1) 0;
}
.lens-suite__viz-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1.5px solid var(--pt-text-muted);
    background: transparent;
    padding: 0;
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease;
}
.lens-suite__viz-dot.is-active {
    background: var(--pt-accent);
    border-color: var(--pt-accent);
}
.lens-suite__viz-dot:hover:not(.is-active) {
    border-color: var(--pt-text-secondary);
}
.lens-suite__viz-dot:focus-visible {
    outline: 2px solid var(--pt-accent);
    outline-offset: 2px;
}
.dash-widget__svg-wrap {
    position: relative;
}

/* --- Lens Optics: Readout grid ------------------------------------------- */
.lens-suite__readouts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--pt-space-2);
    margin-top: var(--pt-space-2);
}
.lens-suite__readout-group {
    display: flex;
    flex-direction: column;
    gap: var(--pt-space-1);
    padding: var(--pt-space-1-5);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-sm);
    background: var(--pt-chrome-bg);
}
.lens-suite__readout-group-label {
    font-family: var(--pt-font-ui);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pt-text-faint);
    margin-bottom: var(--pt-space-0-5);
}
.lens-suite__readout-group .calc-readout {
    padding: 0;
}
.lens-suite__readout-group .calc-readout__label {
    font-size: 9px;
}
.lens-suite__readout-group .calc-readout__value {
    font-size: 13px;
}

/* --- Exposure Hub: Toggle pill wrapper ----------------------------------- */
.exposure-hub__toggle-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: var(--pt-space-2);
}

/* --- Sky View: Icon mode dial -------------------------------------------- */
.sky-mode-dial {
    display: flex;
    justify-content: center;
    gap: 2px;
    padding: 3px;
    margin-bottom: var(--pt-space-2);
    background: var(--pt-chrome-bg);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-sm);
}
.sky-mode-dial__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 28px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--pt-radius-xs);
    background: transparent;
    color: var(--pt-text-muted);
    cursor: pointer;
    transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
}
.sky-mode-dial__btn svg {
    width: 16px;
    height: 16px;
}
.sky-mode-dial__btn:hover {
    color: var(--pt-text-secondary);
}
.sky-mode-dial__btn.is-active {
    background-color: #0d1420;
    border-color: var(--pt-border-strong);
    color: var(--pt-accent-bright);
    box-shadow:
        inset 0 1px 3px rgba(0,0,0,0.6),
        inset 0 -1px 0 rgba(255,255,255,0.04);
}
.sky-mode-dial__btn:focus-visible {
    outline: 2px solid var(--pt-accent);
    outline-offset: 2px;
}
/* Light theme */
.dash-page[data-theme="light"] .sky-mode-dial {
    background-color: #f0ece0;
    border-color: #d4cbb0;
}
.dash-page[data-theme="light"] .sky-mode-dial__btn.is-active {
    background-color: #f5eeda;
    border-color: #d6c9a2;
    color: #b45309;
    box-shadow:
        inset 0 1px 2px rgba(140,110,30,0.18),
        inset 0 -1px 0 rgba(255,255,255,0.4);
}
.dash-page[data-theme="light"] .lens-suite__readout-group {
    background: #f5f0e4;
    border-color: #d4cbb0;
}
.dash-page[data-theme="light"] .lens-suite__viz-dot {
    border-color: #94a3b8;
}
.dash-page[data-theme="light"] .lens-suite__viz-dot.is-active {
    background: #b45309;
    border-color: #b45309;
}
/* Auto theme (system light) */
@media (prefers-color-scheme: light) {
    .dash-page[data-theme="auto"] .sky-mode-dial {
        background-color: #f0ece0;
        border-color: #d4cbb0;
    }
    .dash-page[data-theme="auto"] .sky-mode-dial__btn.is-active {
        background-color: #f5eeda;
        border-color: #d6c9a2;
        color: #b45309;
        box-shadow:
            inset 0 1px 2px rgba(140,110,30,0.18),
            inset 0 -1px 0 rgba(255,255,255,0.4);
    }
    .dash-page[data-theme="auto"] .lens-suite__readout-group {
        background: #f5f0e4;
        border-color: #d4cbb0;
    }
    .dash-page[data-theme="auto"] .lens-suite__viz-dot {
        border-color: #94a3b8;
    }
    .dash-page[data-theme="auto"] .lens-suite__viz-dot.is-active {
        background: #b45309;
        border-color: #b45309;
    }
}
@media (prefers-reduced-motion: reduce) {
    .sky-mode-dial__btn { transition: none; }
    .lens-suite__viz-dot { transition: none; }
}

/* --- Learn Panel --- */
.dash-learn {
    border-top: 1px solid var(--pt-border);
    margin-top: var(--pt-space-3);
}
.dash-learn__toggle {
    display: flex;
    align-items: center;
    gap: var(--pt-space-2);
    width: 100%;
    padding: var(--pt-space-2) var(--pt-space-4);
    background: none;
    border: none;
    color: var(--pt-text-muted);
    font-size: var(--pt-text-sm);
    font-weight: var(--pt-weight-medium);
    cursor: pointer;
    transition: color 150ms ease;
    text-align: left;
}
.dash-learn__toggle:hover {
    color: var(--pt-text-secondary);
}
.dash-learn__toggle-icon {
    width: 1rem;
    height: 1rem;
    transition: transform 200ms ease;
    flex-shrink: 0;
}
.dash-learn.is-open .dash-learn__toggle-icon {
    transform: rotate(90deg);
}
.dash-learn__content {
    display: none;
    padding: 0 var(--pt-space-4) var(--pt-space-4);
    color: var(--pt-text-muted);
    font-size: var(--pt-text-base);
    line-height: 1.6;
}
.dash-learn.is-open .dash-learn__content {
    display: block;
}
@media (max-width: 480px) {
    .dash-learn__content {
        padding: 0 var(--pt-space-3) var(--pt-space-3);
        font-size: var(--pt-text-sm);
    }
}
.dash-learn__content h3 {
    font-family: var(--pt-font-ui);
    font-size: var(--pt-text-md);
    font-weight: var(--pt-weight-semi);
    color: var(--pt-text-secondary);
    margin: var(--pt-space-3) 0 var(--pt-space-1-5);
}
.dash-learn__content h3:first-child {
    margin-top: 0;
}
.dash-learn__content p {
    margin-bottom: var(--pt-space-2);
}
.dash-learn__content code {
    background-color: var(--pt-surface);
    padding: var(--pt-space-0-5) var(--pt-space-1-5);
    border-radius: var(--pt-radius-xs);
    font-size: var(--pt-text-sm);
    color: var(--pt-accent-bright);
}

/* --- SVG Interactive Elements (stay dark — on SVG viewport) --- */
.dash-svg-handle {
    cursor: grab;
    transition: r 100ms ease;
}
.dash-svg-handle:hover {
    r: 8;
}
.dash-svg-handle:active {
    cursor: grabbing;
}

/* Slider track within SVG (rendered as HTML overlay) */
.dash-svg-slider {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 4px;
    background-color: var(--pt-surface-raised);
    border-radius: var(--pt-radius-xs);
    outline: none;
    /* Sharp recessed channel */
    box-shadow:
        inset 0 1px 1px rgba(0,0,0,0.45),
        0 1px 0 rgba(255,255,255,0.05);
}
.dash-svg-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #f59e0b;
    border: 2px solid var(--pt-chrome-bg);
    cursor: pointer;
    /* Crisp raised knob */
    box-shadow:
        0 1px 2px rgba(0,0,0,0.5),
        0 0 3px rgba(245,158,11,0.35),
        inset 0 1px 0 rgba(255,255,255,0.2);
}
.dash-svg-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #f59e0b;
    border: 2px solid var(--pt-chrome-bg);
    cursor: pointer;
    box-shadow:
        0 1px 2px rgba(0,0,0,0.5),
        0 0 3px rgba(245,158,11,0.35),
        inset 0 1px 0 rgba(255,255,255,0.2);
}

/* Sun & Moon stats — flat 3-tier hairline grid.
   One surface: no per-cell boxes, cells separated by 1px var(--pt-border)
   rules (row rule above each row, gutter rules between columns). */
.sun-moon-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: var(--pt-space-3);
}
.sun-moon-stats-grid > .sm-cell {
    border-top: 1px solid var(--pt-border);
}
.sun-moon-stats-grid > .sm-cell:not(:nth-child(4n + 1)) {
    border-left: 1px solid var(--pt-border);
}
@media (max-width: 640px) {
    .sun-moon-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .sun-moon-stats-grid > .sm-cell {
        border-left: none;
    }
    .sun-moon-stats-grid > .sm-cell:not(:nth-child(2n + 1)) {
        border-left: 1px solid var(--pt-border);
    }
}

/* Cell anatomy: label (tier 1) / value (tier 2) / sub (tier 3) */
.sm-cell {
    padding: var(--pt-space-2) var(--pt-space-2-5);
    min-width: 0;
}
.sm-cell__label {
    font-size: 11px;
    font-weight: var(--pt-weight-semi);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--pt-text-faint);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sm-cell__value {
    font-family: var(--pt-font-mono);
    font-size: var(--pt-text-2xl);
    font-weight: var(--pt-weight-semi);
    font-variant-numeric: tabular-nums;
    color: var(--pt-text);
    line-height: 1.15;
    white-space: nowrap;
}
/* Non-numeric values (moon phase name) — UI face, slightly smaller */
.sm-cell__value--text {
    font-family: var(--pt-font-ui);
    font-size: var(--pt-text-lg);
    white-space: normal;
}
.sm-cell__sub {
    font-size: 12px;
    color: var(--pt-text-muted);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Live position row — continues the same hairline grid */
.sun-moon-live-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
.sun-moon-live-grid > .sm-cell {
    border-top: 1px solid var(--pt-border);
}
.sun-moon-live-grid > .sm-cell:not(:nth-child(2n + 1)) {
    border-left: 1px solid var(--pt-border);
}

/* Twilight — flat hairline row; only the next upcoming event is marked */
.sun-moon-twilight-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}
.sun-moon-twilight-grid > .sm-cell {
    border-top: 1px solid var(--pt-border);
}
.sun-moon-twilight-grid > .sm-cell:not(:nth-child(6n + 1)) {
    border-left: 1px solid var(--pt-border);
}
@media (max-width: 768px) {
    .sun-moon-twilight-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    .sun-moon-twilight-grid > .sm-cell {
        border-left: none;
    }
    .sun-moon-twilight-grid > .sm-cell:not(:nth-child(3n + 1)) {
        border-left: 1px solid var(--pt-border);
    }
}
.sm-cell--next {
    box-shadow: inset 3px 0 0 0 var(--pt-accent);
}
.sm-cell--next .sm-cell__value {
    color: var(--pt-accent);
}

/* Standalone flat readout (shadow-length result) — no rules, no box */
.sm-cell--plain {
    padding: var(--pt-space-1-5) 0 0;
}

/* Sky-conditions readouts inside Sun & Moon: neutralize the shared
   LCD-well .calc-readout chrome so the section reads as the same flat
   surface. ID scope beats the theme overrides without touching the
   shared class used by other tools. */
#sun-moon-sky .dash-widget__results {
    background-color: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    gap: 0;
    margin-top: var(--pt-space-2);
}
#sun-moon-sky .calc-readout {
    background-color: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    border-top: 1px solid var(--pt-border);
    padding: var(--pt-space-2) var(--pt-space-2-5);
}
#sun-moon-sky .calc-readout:not(:first-child) {
    border-left: 1px solid var(--pt-border);
}
#sun-moon-sky .calc-readout::before,
#sun-moon-sky .calc-readout::after {
    display: none;
}
#sun-moon-sky .calc-readout__label {
    font-size: 11px;
    letter-spacing: 0.08em;
    font-weight: var(--pt-weight-semi);
    color: var(--pt-text-faint);
}
#sun-moon-sky .calc-readout__value {
    color: var(--pt-text);
}
#sun-moon-sky .calc-readout__note {
    font-size: 12px;
    color: var(--pt-text-muted);
}

/* --- Sun & Moon map/compass container --- */
.sun-moon-compass-map {
    position: relative;
    margin-bottom: 0;
    width: 100%;
    padding-top: 42%; /* shorter to fit sky chart + stats in viewport */
    overflow: hidden;
    border-radius: var(--pt-radius-md) var(--pt-radius-md) 0 0;
    border: 1px solid var(--pt-border);
    border-bottom: none;
    background: var(--pt-surface);
}
@media (max-width: 640px) {
    .sun-moon-compass-map {
        padding-top: 100%;
    }
}

/* --- Utility --- */
.dash-hidden {
    display: none !important;
}

/* Leaflet map theme overrides for dashboard */
.dash-page .leaflet-container {
    background-color: var(--pt-page-bg);
}
.dash-page .leaflet-control-attribution {
    background-color: rgba(17, 24, 39, 0.8) !important;
    color: #6b7280 !important;
    font-size: var(--pt-text-2xs) !important;
}
.dash-page .leaflet-control-attribution a {
    color: #9ca3af !important;
}
.dash-page .leaflet-control-zoom a {
    background-color: var(--pt-surface) !important;
    color: var(--pt-text-secondary) !important;
    border-color: var(--pt-border-strong) !important;
}
.dash-page .leaflet-control-zoom a:hover {
    background-color: var(--pt-surface-raised) !important;
}
.dash-page[data-theme="light"] .leaflet-control-attribution {
    background-color: rgba(255, 255, 255, 0.85) !important;
    color: #64748b !important;
}
.dash-page[data-theme="light"] .leaflet-control-attribution a {
    color: #475569 !important;
}
@media (prefers-color-scheme: light) {
    .dash-page[data-theme="auto"] .leaflet-control-attribution {
        background-color: rgba(255, 255, 255, 0.85) !important;
        color: #64748b !important;
    }
    .dash-page[data-theme="auto"] .leaflet-control-attribution a {
        color: #475569 !important;
    }
}

/* Override body bg when on dashboard page */
body.dash-page {
    background-color: var(--pt-page-bg);
}

/* Once an instrument is open, reserve the scene for the instrument at every
   viewport size. The global chat launcher otherwise masks sky targets and
   becomes especially distracting in fullscreen-adjacent desktop layouts. */
body.dash-page.dash-tool-open .chatbot-fab {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: scale(0.8);
}

/* Mobile field mode -------------------------------------------------------
   Opening a tool turns the dashboard from a browsing surface into an
   instrument: remove stacked site/discovery chrome, keep the planner toolbar
   and tool switcher, and let the active visualization start near the top of
   the viewport. */
@media (max-width: 640px) {
    body.dash-page.dash-tool-open .navbar,
    body.dash-page.dash-tool-open .planner-timebar-wrap,
    body.dash-page.dash-tool-open .dash-conditions-bar,
    body.dash-page.dash-tool-open .dash-discover,
    body.dash-page.dash-tool-open .dash-cta {
        display: none !important;
    }

    body.dash-page.dash-tool-open > main {
        /* base.html reserves 5rem for the now-hidden fixed navbar */
        padding-top: 0 !important;
    }
    body.dash-page.dash-tool-open > footer {
        display: none;
    }

    body.dash-page.dash-tool-open .dash-toolbar {
        top: 0;
        padding: var(--pt-space-1);
    }
    body.dash-page.dash-tool-open .dash-grid {
        max-width: none;
        padding: 0;
        gap: 0;
    }
    body.dash-page.dash-tool-open .dash-expanded {
        border-left: 0;
        border-right: 0;
        border-radius: 0;
    }
    body.dash-page.dash-tool-open .dash-expanded__body {
        padding: var(--pt-space-2);
    }
    body.dash-page.dash-tool-open .dash-expanded__header {
        min-height: 44px;
        box-sizing: border-box;
    }

    /* Consent remains fully usable, but no longer consumes most of a phone
       screen. The ResizeObserver-backed variable moves global FABs above it. */
    body.dash-page #cookie-banner {
        max-height: min(46svh, 22rem);
        overflow-y: auto;
        padding: var(--pt-space-2-5) !important;
    }
    body.dash-page #cookie-banner > div {
        gap: var(--pt-space-2) !important;
        align-items: stretch;
    }
    body.dash-page #cookie-banner p {
        font-size: var(--pt-text-sm);
        line-height: 1.4;
    }
    body.dash-page #cookie-banner button {
        min-height: 44px;
        flex: 1 1 8.5rem;
    }
    body.dash-page .chatbot-fab {
        bottom: calc(16px + var(--pt-cookie-offset, 0px));
    }
    body.dash-page #floating-actions {
        bottom: calc(16px + var(--pt-cookie-offset, 0px)) !important;
    }
}

/* Breadcrumb adjustments */
.dash-page .dash-breadcrumb {
    background-color: var(--pt-chrome-bg);
    width: 100%;
}
@media (max-width: 640px) {
    .dash-page .dash-breadcrumb {
        display: none;
    }
}
.dash-page .dash-breadcrumb ol {
    max-width: 96rem;
    margin: 0 auto;
    padding: var(--pt-space-2) var(--pt-space-4);
}
.dash-page .dash-breadcrumb a {
    color: var(--pt-text-faint);
    transition: color 150ms ease;
    font-size: var(--pt-text-sm);
}
.dash-page .dash-breadcrumb a:hover {
    color: var(--pt-text-muted);
}
.dash-page .dash-breadcrumb svg {
    color: #4b5563;
    width: 0.75rem;
    height: 0.75rem;
}
.dash-page .dash-breadcrumb .dash-breadcrumb__current {
    color: var(--pt-text-secondary);
    font-weight: var(--pt-weight-medium);
    font-size: var(--pt-text-sm);
}

/* Hero — now integrated into .dash-toolbar, kept as legacy fallback */

/* --- CTA Section (dark variant) --- */
.dash-cta {
    max-width: 96rem;
    margin: 0 auto;
    padding: var(--pt-space-6) var(--pt-space-4) var(--pt-space-8);
}
@media (max-width: 480px) {
    .dash-cta {
        padding: var(--pt-space-4) var(--pt-space-3) var(--pt-space-6);
    }
}

/* --- Lens Barrel Strip Controls --- */
.lens-strip-wrap {
    display: flex;
    flex-direction: column;
    gap: var(--pt-space-1-5);
    min-width: 0; /* respect parent grid column width */
}
.lens-strip__label {
    font-size: var(--pt-text-xs);
    font-weight: var(--pt-weight-semi);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pt-text-muted);
}
/* Lens strip — scrollable selector for focal length / aperture / sensor */
.lens-strip {
    position: relative;
    background-color: var(--pt-surface);
    border: 1px solid var(--pt-border-strong);
    border-radius: var(--pt-radius-md);
    overflow: hidden;
    height: 48px;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
    /* Recessed LCD well — sharp inset */
    box-shadow:
        inset 0 1px 1px rgba(0,0,0,0.5),
        inset 0 -1px 0 rgba(255,255,255,0.06),
        0 1px 0 rgba(255,255,255,0.05);
}
/* Glass overlay — numbers printed on this layer, ticks visible underneath */
.lens-strip::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.1),
        inset 0 -1px 0 rgba(255,255,255,0.03);
    pointer-events: none;
    z-index: 3;
}
.lens-strip.is-dragging {
    cursor: grabbing;
}
/* Center indicator — amber line with triangle pointer */
.lens-strip__indicator {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: #f59e0b;
    transform: translateX(-50%);
    z-index: 2;
    pointer-events: none;
    box-shadow: 0 0 3px rgba(245,158,11,0.45);
}
.lens-strip__indicator::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #f59e0b;
}
.lens-strip__indicator::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #f59e0b;
}
/* Scrollable track */
.lens-strip__track {
    display: flex;
    align-items: center;
    gap: 0;
    height: 100%;
    will-change: transform;
}
/* Each value item — number sits on the glass layer above the tick */
.lens-strip__val {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-shrink: 0;
    width: 64px;
    height: 100%;
    font-size: var(--pt-text-base);
    font-weight: var(--pt-weight-medium);
    color: #8b95a5; /* cool blue-gray — printed on glass */
    position: relative;
    cursor: pointer;
    transition: color 150ms ease, transform 150ms ease;
    padding: var(--pt-space-2-5) var(--pt-space-0-5) 0;
    text-align: center;
    white-space: nowrap;
    z-index: 1;
}
/* Tick mark — sits under the number on the physical layer */
.lens-strip__val::after {
    content: '';
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 10px;
    background-color: #5a5248; /* warm brown-gray — etched into substrate */
    transition: background-color 150ms ease, height 150ms ease, box-shadow 150ms ease;
    box-shadow: 0 1px 0 rgba(0,0,0,0.35);
    z-index: 0;
    opacity: 0.7;
}
/* Active (selected) value — lit LCD feel, sticker on glass */
.lens-strip__val.is-active {
    color: #f5c542; /* bright cool amber — glass layer */
    font-size: var(--pt-text-lg);
    font-weight: var(--pt-weight-bold);
    transform: scale(1.08);
}
.lens-strip__val.is-active::after {
    background-color: #d4890b; /* deeper warm amber — physical layer */
    height: 14px;
    width: 2px;
    opacity: 1;
    box-shadow: 0 0 2px rgba(212,137,11,0.5), 0 1px 0 rgba(0,0,0,0.3);
}
/* Wider items for sensor strip (longer labels) */
.lens-strip--wide .lens-strip__val {
    width: 80px;
    font-size: var(--pt-text-sm);
}
.lens-strip--wide .lens-strip__val.is-active {
    font-size: var(--pt-text-md);
}
/* Inline edit input for custom focal length (dbl-click) */
.lens-strip__inline-input {
    width: 48px;
    background-color: var(--pt-chrome-bg);
    border: 1px solid #f59e0b;
    border-radius: var(--pt-radius-xs);
    color: #f59e0b;
    font-size: var(--pt-text-md);
    font-weight: var(--pt-weight-bold);
    text-align: center;
    padding: var(--pt-space-0-5) var(--pt-space-1);
    outline: none;
    -moz-appearance: textfield;
}
.lens-strip__inline-input::-webkit-inner-spin-button,
.lens-strip__inline-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Mobile: larger touch targets */
@media (max-width: 480px) {
    .lens-strip {
        height: 52px;
    }
    .lens-strip__val {
        width: 60px;
    }
    .lens-strip--wide .lens-strip__val {
        width: 76px;
    }
}

/* ======= Exposure Meter — 3-panel layout (stays dark) ======= */
/* Exposure meter viz column: flex-column to stack SVG + slider + optional camera */
.em-viz-col {
    flex-direction: column;
    align-items: stretch;
}

/* Viewfinder — camera feed or manual EV */
.em-camera-live {
    position: relative;
    border-radius: var(--pt-radius-md);
    overflow: hidden;
    background: #000;
    border: 1px solid var(--pt-border);
}
.em-video {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--pt-radius-md);
}
@media (max-width: 480px) {
    .em-video {
        aspect-ratio: 1 / 1;
    }
}
.em-camera-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.em-reticle {
    width: 40%;
    aspect-ratio: 1;
    border: 1.5px solid rgba(251, 191, 36, 0.35);
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.1);
}
.em-camera-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: var(--pt-text-xs);
    font-weight: var(--pt-weight-semi);
    color: #10b981;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    padding: var(--pt-space-0-5) var(--pt-space-2-5);
    border-radius: var(--pt-radius-xs);
    letter-spacing: 0.02em;
}

/* EV control below the SVG diagram */
.em-ev-control {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--pt-space-3) var(--pt-space-2) var(--pt-space-1);
}
.em-manual-ev-display {
    display: flex;
    align-items: baseline;
    gap: var(--pt-space-1);
    margin-bottom: var(--pt-space-2);
}
.em-manual-ev-num {
    font-size: var(--pt-text-4xl);
    font-weight: var(--pt-weight-bold);
    color: #fbbf24;
    line-height: 1;
    font-family: var(--pt-font-ui);
}
.em-manual-ev-unit {
    font-size: var(--pt-text-lg);
    font-weight: var(--pt-weight-semi);
    color: var(--pt-text-muted);
}
.em-ev-slider {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--pt-surface-raised);
    border-radius: var(--pt-radius-xs);
    outline: none;
    cursor: pointer;
    /* Sharp recessed channel */
    box-shadow:
        inset 0 1px 1px rgba(0,0,0,0.45),
        0 1px 0 rgba(255,255,255,0.05);
}
.em-ev-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fbbf24;
    border: 2px solid var(--pt-chrome-bg);
    cursor: pointer;
    /* Crisp raised knob */
    box-shadow:
        0 1px 2px rgba(0,0,0,0.5),
        0 0 3px rgba(251,191,36,0.35),
        inset 0 1px 0 rgba(255,255,255,0.2);
}
.em-ev-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fbbf24;
    border: 2px solid var(--pt-chrome-bg);
    cursor: pointer;
    box-shadow:
        0 1px 2px rgba(0,0,0,0.5),
        0 0 3px rgba(251,191,36,0.35),
        inset 0 1px 0 rgba(255,255,255,0.2);
}
.em-ev-marks {
    position: relative;
    width: 100%;
    height: 28px;
    margin-top: var(--pt-space-1-5);
    padding: 0 var(--pt-space-0-5);
}
.em-ev-mark {
    position: absolute;
    font-size: var(--pt-text-2xs);
    letter-spacing: 0.02em;
    color: var(--pt-text-faint);
    white-space: nowrap;
    top: 2px;
}
.em-sky-sync-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--pt-space-1-5);
    padding: var(--pt-space-1-5) var(--pt-space-2-5);
    margin: 0 0 var(--pt-space-1-5);
    font-size: var(--pt-text-sm);
    font-weight: var(--pt-weight-semi);
    color: var(--pt-text-secondary);
    background: var(--pt-surface-raised);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-sm);
    cursor: pointer;
    /* The centered flex column shrinks this to min-content otherwise,
       wrapping "From sky" onto two lines beside the icon. */
    white-space: nowrap;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.em-sky-sync-btn:hover {
    background: var(--pt-surface-strong);
    border-color: var(--pt-border-strong);
    color: var(--pt-text);
}
.em-sky-sync-btn:focus-visible {
    outline: 2px solid #fbbf24;
    outline-offset: 2px;
}
.em-sky-sync-btn svg {
    flex-shrink: 0;
    /* Explicit box: the width="14" attribute loses to flex sizing here,
       ballooning the icon to the button's content width. */
    width: 14px;
    height: 14px;
    color: #fbbf24;
}
.em-sky-sync-note {
    width: 100%;
    text-align: center;
    font-size: var(--pt-text-xs);
    line-height: 1.4;
    margin: 0 0 var(--pt-space-2);
    min-height: 0.9375rem;
}
.em-sky-sync-note:empty {
    display: none;
}

/* Send-to-Exposure-Hub button (results footer) */
.em-send-nd-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--pt-space-1-5);
    margin-top: var(--pt-space-2-5);
    padding: var(--pt-space-1-5) var(--pt-space-3);
    font-size: var(--pt-text-sm);
    font-weight: var(--pt-weight-semi);
    color: var(--pt-text-secondary);
    background: var(--pt-surface-raised);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-sm);
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.em-send-nd-btn:hover {
    background: var(--pt-surface-strong);
    border-color: #fbbf24;
    color: #fbbf24;
}
.em-send-nd-btn:focus-visible {
    outline: 2px solid #fbbf24;
    outline-offset: 2px;
}
.em-send-nd-btn svg {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    color: #fbbf24;
}

/* SVG wrap inside the standard dash-widget__svg container */
.em-svg-wrap {
    width: 100%;
}
.em-svg-wrap svg {
    width: 100%;
    height: auto;
}

/* Mode toggle */
.em-mode-toggle {
    display: flex;
    gap: 0;
    border-radius: var(--pt-radius-sm);
    overflow: hidden;
    border: 1px solid var(--pt-border-strong);
    align-self: start;
}
.em-mode-btn {
    padding: var(--pt-space-2) var(--pt-space-5);
    font-size: var(--pt-text-base);
    font-weight: var(--pt-weight-semi);
    color: var(--pt-text-muted);
    background: var(--pt-page-bg);
    border: none;
    cursor: pointer;
    transition: background 150ms, color 150ms;
}
.em-mode-btn.is-active {
    background: var(--pt-surface);
    color: #fbbf24;
}

/* Camera / Drone controls — stacked in the controls panel */
.em-camera-controls,
.em-drone-controls {
    display: flex;
    flex-direction: column;
    gap: var(--pt-space-3);
}
.em-camera-controls > .lens-strip-wrap,
.em-drone-controls > .lens-strip-wrap {
    min-width: 0;
}

/* Drone-specific */
.em-drone-select-wrap {
    flex: 1 1 200px;
    min-width: 0;
}
.em-drone-label {
    display: block;
    font-size: var(--pt-text-sm);
    color: var(--pt-text-muted);
    margin-bottom: var(--pt-space-1);
    font-weight: var(--pt-weight-semi);
}
.em-drone-select {
    width: 100%;
    padding: var(--pt-space-2);
    font-size: var(--pt-text-base);
    color: var(--pt-text);
    background: var(--pt-surface);
    border: 1px solid var(--pt-border-strong);
    border-radius: var(--pt-radius-sm);
    cursor: pointer;
}
.em-drone-fixed {
    flex: 0 0 auto;
    font-size: var(--pt-text-base);
    color: var(--pt-text-muted);
    padding: var(--pt-space-1) 0;
    align-self: center;
}
.em-drone-aperture-val {
    color: #60a5fa;
    font-weight: var(--pt-weight-semi);
}

/* Results row */
.em-results {
    padding: var(--pt-space-3);
    background: var(--pt-chrome-bg);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-md);
    gap: 0;
}
.em-result-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--pt-space-2) var(--pt-space-3);
}
.em-result-row + .em-result-row {
    border-left: 1px solid var(--pt-border);
}
@media (max-width: 480px) {
    .em-results {
        grid-template-columns: 1fr;
    }
    .em-result-row + .em-result-row {
        border-left: none;
        border-top: 1px solid var(--pt-border);
    }
}
.em-result-label {
    /* Suite readout convention: tiny uppercase micro-label */
    font-size: var(--pt-text-2xs);
    color: var(--pt-text-muted);
    font-weight: var(--pt-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.em-ev-value {
    font-size: var(--pt-text-md);
    font-weight: var(--pt-weight-bold);
    color: #fbbf24;
}
.em-shutter-value {
    font-size: var(--pt-text-md);
    font-weight: var(--pt-weight-bold);
    color: #f59e0b;
}
.em-nd-value {
    font-size: var(--pt-text-base);
    font-weight: var(--pt-weight-semi);
    color: #a78bfa;
}
.em-badges {
    display: flex;
    gap: var(--pt-space-2);
    padding: var(--pt-space-1) var(--pt-space-3) var(--pt-space-2);
    flex-wrap: wrap;
    grid-column: 1 / -1;
}
.em-badge {
    font-size: var(--pt-text-xs);
    font-weight: var(--pt-weight-semi);
    padding: var(--pt-space-0-5) var(--pt-space-2-5);
    border-radius: var(--pt-radius-xs);
}
.em-badge--warn {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.25);
}
.em-badge--nd {
    color: #a78bfa;
    background: rgba(167, 139, 250, 0.12);
    border: 1px solid rgba(167, 139, 250, 0.25);
}

/* --- Tile Mini Icon Animations --- */
.dash-tile__preview svg {
    transition: transform 200ms ease;
}
.dash-tile:hover .dash-tile__preview svg {
    transform: scale(1.05);
}

@keyframes tilePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.88; }
}
.dash-tile__preview {
    animation: tilePulse 4s ease-in-out infinite;
}

/* Per-tool ambient animations */
@keyframes auroraShimmer {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.15); }
}
#tile-aurora .dash-tile__preview svg {
    animation: auroraShimmer 3s ease-in-out infinite;
}

@keyframes sunGlow {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.1); }
}
#tile-sun-moon .dash-tile__preview svg {
    animation: sunGlow 5s ease-in-out infinite;
}

/* Disable animations on active tiles */
.dash-tile.is-active .dash-tile__preview {
    animation: none;
}
.dash-tile.is-active .dash-tile__preview svg {
    animation: none;
    transform: none;
}

/* Accessibility: respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    .dash-tile__preview,
    .dash-tile__preview svg {
        animation: none !important;
        transition: none !important;
    }
}

/* --- Sky Dome Star Twinkling --- */
@keyframes twinkle {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}
@media (prefers-reduced-motion: reduce) {
    .sky-dome-star {
        animation: none;
    }
    .dash-expanded {
        animation: none;
    }
    .dash-tile {
        transition: none;
    }
    .dash-tile:hover {
        transform: none;
    }
}

/* --- Light Theme Polish --- */
.dash-page[data-theme="light"] .dash-toolbar {
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.dash-page[data-theme="light"] .dash-tile:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.dash-page[data-theme="light"] .dash-search {
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
}
.dash-page[data-theme="light"] .dash-search:focus-within {
    box-shadow:
        inset 0 1px 2px rgba(15, 23, 42, 0.06),
        0 0 0 2px rgba(217, 119, 6, 0.2);
}
.dash-page[data-theme="light"] .dash-toolbar__lcd {
    box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.08);
}
.dash-page[data-theme="light"] .dash-seg {
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
}
.dash-page[data-theme="light"] .dash-seg__btn.is-active {
    color: #ffffff;
}
.dash-page[data-theme="light"] .dash-toolbar__gps:hover {
    color: #ffffff;
}
.dash-page[data-theme="light"] .dash-toolbar__field::-webkit-calendar-picker-indicator {
    filter: none;
    opacity: 0.6;
}
.dash-page[data-theme="light"] .dash-search__dropdown {
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}
/* Light mode depth — sharper shadows, stronger rim */
.dash-page[data-theme="light"] .lens-strip {
    box-shadow:
        inset 0 1px 1px rgba(0,0,0,0.15),
        inset 0 -1px 0 rgba(255,255,255,0.6),
        0 1px 0 rgba(255,255,255,0.7);
}
.dash-page[data-theme="light"] .lens-strip::before {
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
}
.dash-page[data-theme="light"] .lens-strip__indicator {
    box-shadow: 0 0 2px rgba(217,119,6,0.4);
}
.dash-page[data-theme="light"] .lens-strip__val {
    color: #7a8494; /* cooler on light bg */
}
.dash-page[data-theme="light"] .lens-strip__val::after {
    background-color: #a09587; /* warm taupe tick */
}
.dash-page[data-theme="light"] .lens-strip__val.is-active {
    color: #b8860b; /* dark gold on glass */
    text-shadow: none;
}
.dash-page[data-theme="light"] .lens-strip__val.is-active::after {
    background-color: #8b6508; /* deep warm amber tick */
}
/* Light-mode camera readout — inverted LCD feel on pale body */
.dash-page[data-theme="light"] .calc-readout {
    background-color: #f5eeda; /* warm parchment LCD face */
    border-color: #d6c9a2;
    box-shadow:
        inset 0 1px 2px rgba(140,110,30,0.2),
        inset 0 -1px 0 rgba(255,255,255,0.7),
        0 1px 0 rgba(255,255,255,0.6);
}
.dash-page[data-theme="light"] .calc-readout::before {
    background-color: rgba(180,83,9,0.25);
}
.dash-page[data-theme="light"] .calc-readout::after {
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.025);
    opacity: 0.5;
}
.dash-page[data-theme="light"] .calc-readout__label { color: #8a7a4a; }
.dash-page[data-theme="light"] .calc-readout__value { color: #3a2f16; }
.dash-page[data-theme="light"] .calc-readout__value--primary {
    color: #b45309;
    text-shadow: none;
}
.dash-page[data-theme="light"] .calc-readout__note,
.dash-page[data-theme="light"] .calc-readout__unit { color: #8a7a4a; }
@media (prefers-color-scheme: light) {
    .dash-page[data-theme="auto"] .calc-readout {
        background-color: #f5eeda;
        border-color: #d6c9a2;
        box-shadow:
            inset 0 1px 2px rgba(140,110,30,0.2),
            inset 0 -1px 0 rgba(255,255,255,0.7),
            0 1px 0 rgba(255,255,255,0.6);
    }
    .dash-page[data-theme="auto"] .calc-readout::before {
        background-color: rgba(180,83,9,0.25);
    }
    .dash-page[data-theme="auto"] .calc-readout::after {
        box-shadow: inset 0 0 0 1px rgba(0,0,0,0.025);
        opacity: 0.5;
    }
    .dash-page[data-theme="auto"] .calc-readout__label { color: #8a7a4a; }
    .dash-page[data-theme="auto"] .calc-readout__value { color: #3a2f16; }
    .dash-page[data-theme="auto"] .calc-readout__value--primary {
        color: #b45309;
        text-shadow: none;
    }
    .dash-page[data-theme="auto"] .calc-readout__note,
    .dash-page[data-theme="auto"] .calc-readout__unit { color: #8a7a4a; }
}
.dash-page[data-theme="light"] .dash-svg-slider,
.dash-page[data-theme="light"] .em-ev-slider {
    box-shadow:
        inset 0 1px 1px rgba(0,0,0,0.15),
        0 1px 0 rgba(255,255,255,0.7);
}
@media (prefers-color-scheme: light) {
    .dash-page[data-theme="auto"] .dash-toolbar {
        box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    }
    .dash-page[data-theme="auto"] .dash-tile:hover {
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    }
    .dash-page[data-theme="auto"] .dash-search {
        box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.06);
    }
    .dash-page[data-theme="auto"] .dash-toolbar__lcd {
        box-shadow: inset 0 1px 3px rgba(15, 23, 42, 0.08);
    }
    .dash-page[data-theme="auto"] .dash-seg {
        box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
    }
    .dash-page[data-theme="auto"] .dash-seg__btn.is-active {
        color: #ffffff;
    }
    .dash-page[data-theme="auto"] .dash-toolbar__field::-webkit-calendar-picker-indicator {
        filter: none;
        opacity: 0.6;
    }
    /* Auto light depth overrides */
    .dash-page[data-theme="auto"] .lens-strip {
        box-shadow:
            inset 0 1px 1px rgba(0,0,0,0.15),
            inset 0 -1px 0 rgba(255,255,255,0.6),
            0 1px 0 rgba(255,255,255,0.7);
    }
    .dash-page[data-theme="auto"] .lens-strip::before {
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.6);
    }
    .dash-page[data-theme="auto"] .lens-strip__indicator {
        box-shadow: 0 0 2px rgba(217,119,6,0.4);
    }
    .dash-page[data-theme="auto"] .lens-strip__val {
        color: #7a8494;
    }
    .dash-page[data-theme="auto"] .lens-strip__val::after {
        background-color: #a09587;
    }
    .dash-page[data-theme="auto"] .lens-strip__val.is-active {
        color: #b8860b;
        text-shadow: none;
    }
    .dash-page[data-theme="auto"] .lens-strip__val.is-active::after {
        background-color: #8b6508;
    }
    .dash-page[data-theme="auto"] .dash-svg-slider,
    .dash-page[data-theme="auto"] .em-ev-slider {
        box-shadow:
            inset 0 1px 1px rgba(0,0,0,0.15),
            0 1px 0 rgba(255,255,255,0.7);
    }
}

/* ==========================================================================
   Aurora Interactive Map — Leaflet + OVATION Image Overlay
   ========================================================================== */

/* View wrapper — single positioning context shared by flat + globe + toggle */
.aurora-view-wrap {
    position: relative;
    margin-bottom: var(--pt-space-4);
}

/* Map / globe container — height matches sky-dome's responsive aspect.
   Desktop ≥600px: 0.42 aspect (matches sky-dome _computeViewportHeight).
   Mobile <600px: square. */
.aurora-map-container {
    width: 100%;
    aspect-ratio: 1 / 0.42;
    min-height: 220px;
    border-radius: var(--pt-radius-lg);
    overflow: hidden;
    border: 1px solid var(--pt-border);
    position: relative;
}
@media (max-width: 599px) {
    .aurora-map-container {
        aspect-ratio: 1 / 1;
        min-height: 280px;
    }
}

/* Image overlay — smooth rendering at all zoom levels */
.aurora-image-overlay {
    image-rendering: auto;
}

/* Globe container — always space-dark, regardless of dashboard light/dark
   mode. The WebGL scene is opaque and renders a dark space scene; matching
   the container avoids a white flash during load in light mode. */
.aurora-globe-container {
    background: #05080f;
}
.aurora-globe-container canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* Globe HUD uses explicit corner reservations:
   top-left = zoom/locate, top-right = view controls,
   bottom-left = probability + body readout, bottom-right = cloud legend.
   The caption starts to the right of the compact desktop zoom rail and
   moves into a split bottom row on phone-sized canvases. */
.aurora-globe-container > .pt-caption--aurora {
    top: 10px;
    left: 48px;
    right: auto;
    max-width: 45%;
}
.aurora-body-hud {
    position: absolute;
    bottom: 88px;
    left: 10px;
    z-index: 10;
    max-width: min(260px, calc(100% - 20px));
    padding: 6px 8px;
    pointer-events: none;
    background: rgba(5, 8, 15, 0.78);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 6px;
    backdrop-filter: blur(4px);
    color: #94a3b8;
}
.aurora-body-hud__row {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}
.aurora-body-hud__row--moon { margin-bottom: 4px; }
.aurora-body-hud__moon-copy { min-width: 0; line-height: 1.25; }
.aurora-body-hud__phase {
    overflow: hidden;
    color: #e2e8f0;
    font-size: 0.625rem;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.aurora-body-hud__moon-state,
.aurora-body-hud__sun-state {
    overflow: hidden;
    color: #64748b;
    font-size: 0.5625rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.aurora-body-hud.is-moon-up .aurora-body-hud__moon-state { color: #60a5fa; }
.aurora-body-hud__sun-dot {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #64748b;
    opacity: 0.45;
}
.aurora-body-hud.is-sun-up .aurora-body-hud__sun-dot {
    background: #fde047;
    opacity: 1;
}
.aurora-body-hud.is-sun-up .aurora-body-hud__sun-state { color: #fde047; }

@media (max-width: 599px) {
    .aurora-globe-container > .pt-caption--aurora {
        top: auto;
        right: 8px;
        bottom: 70px;
        left: auto;
        max-width: calc(50% - 12px);
    }
    .aurora-body-hud {
        bottom: 88px;
        left: 8px;
        max-width: calc(50% - 12px);
        box-sizing: border-box;
    }
    .aurora-body-hud__phase,
    .aurora-body-hud__moon-state,
    .aurora-body-hud__sun-state {
        max-width: 100%;
    }
}

@media (max-width: 360px) {
    .aurora-globe-container > .pt-caption--aurora .pt-caption__brand {
        display: none;
    }
    .aurora-body-hud,
    .aurora-globe-container > .pt-caption--aurora {
        padding: 5px 6px;
    }
}

/* Floating Globe/Flat toggle — top-RIGHT of the map. Keeping the left
   column free of custom buttons avoids overlap with Leaflet's auto-
   stacking zoom + locate controls. z-index above Leaflet's 1000. */
/* Aurora map / globe — unified control layout.
   Right-side stack (top→bottom): fullscreen → Flat/Globe → Clouds.
   Left-side stack: Leaflet zoom/locate/cloud-% (auto), or custom equivalents
   for the WebGL globe. Bottom-left = aurora legend; bottom-right = cloud
   legend (only when overlay enabled). Same layout in desktop, mobile, and
   immersive/fullscreen mode. */

/* Fullscreen toggle: route the generic .pt-fullscreen-btn (attached by
   PhotoTools.Fullscreen.attach) into the top-right column instead of its
   default top-left position so it doesn't collide with the Leaflet zoom. */
.aurora-view-wrap > .pt-fullscreen-btn {
    top: 10px;
    right: 10px;
    left: auto;
    z-index: 1101;
}
/* In immersive mode the generic .is-immersive .pt-fullscreen-btn rule resets
   position to top-left. Override to keep the button top-right for the aurora
   widget so it doesn't land on the zoom (+) button. */
.is-immersive.aurora-view-wrap > .pt-fullscreen-btn {
    top: 0.75rem;
    right: 0.75rem;
    left: auto;
}

.aurora-view-toggle {
    position: absolute;
    top: 48px;
    right: 10px;
    z-index: 1100;
    display: flex;
    flex-direction: row;
    background: var(--pt-chrome-bg);
    border: 1px solid var(--pt-border-strong);
    border-radius: var(--pt-radius-sm, 4px);
    overflow: hidden;
}

/* Aurora "scene" status bar — compact single-row summary that replaces
   the old 2-column card. Desktop: pill | scale | metrics in one line.
   Mobile: stacks vertically. */
.aurora-scene-bar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.85rem;
    background: var(--pt-chrome-bg);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-md);
    padding: 0.55rem 0.85rem;
}
.aurora-scene-bar__kp {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.55rem 0.25rem 0.4rem;
    border: 1.5px solid currentColor;
    border-radius: var(--pt-radius-full);
    background: var(--pt-surface);
    flex-shrink: 0;
}
.aurora-scene-bar__kp-num {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.aurora-scene-bar__kp-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1;
}
.aurora-scene-bar__kp-label {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.aurora-scene-bar__storm {
    font-size: 0.55rem;
    font-weight: 700;
    color: #fff;
    padding: 0.05rem 0.3rem;
    border-radius: 2px;
    letter-spacing: 0.04em;
    text-align: center;
}
.aurora-scene-bar__scale {
    display: flex;
    gap: 1px;
    align-items: end;
    height: 12px;
    border-radius: 2px;
    overflow: hidden;
    min-width: 0;
}
.aurora-scene-bar__scale > span {
    flex: 1;
    transition: height 0.2s;
}
.aurora-scene-bar__metrics {
    display: flex;
    gap: 1.25rem;
    flex-shrink: 0;
}
.aurora-scene-bar__metric {
    display: flex;
    flex-direction: column;
    gap: 1px;
    line-height: 1.1;
}
.aurora-scene-bar__metric-label {
    font-size: 0.6rem;
    color: var(--pt-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.aurora-scene-bar__metric-value {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--pt-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
@media (max-width: 720px) {
    .aurora-scene-bar {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    .aurora-scene-bar__metrics {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.4rem 0.85rem;
    }
}

/* Solar wind & magnetic field card — 4 sparkline rows */
.solar-wind-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
    background: var(--pt-chrome-bg);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-md);
    padding: 0.75rem;
}
@media (max-width: 599px) {
    .solar-wind-grid { grid-template-columns: 1fr; }
}
.solar-wind-row__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0.15rem;
}
.solar-wind-row__label {
    font-size: 0.7rem;
    color: var(--pt-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.solar-wind-row__value {
    font-size: 0.95rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.solar-wind-row__unit {
    font-size: 0.65rem;
    color: var(--pt-text-muted);
    font-weight: 500;
    margin-left: 0.15rem;
}
.solar-wind-row__spark {
    width: 100%;
    line-height: 0;
}
.solar-wind-row__spark svg {
    width: 100%;
    height: 30px;
    display: block;
}
.solar-wind-row__hint {
    font-size: 0.65rem;
    color: var(--pt-text-faint);
    margin-top: 0.15rem;
}

/* Clouds toggle — sits below the Flat/Globe view toggle on the right side */
.aurora-clouds-toggle {
    position: absolute;
    top: 86px;
    right: 10px;
    z-index: 1100;
    padding: 0.35rem 0.6rem;
    font-size: 0.72rem;
    line-height: 1;
    background: var(--pt-chrome-bg);
    color: var(--pt-text-muted);
    border: 1px solid var(--pt-border-strong);
    border-radius: var(--pt-radius-sm, 4px);
    cursor: pointer;
    user-select: none;
}
.aurora-clouds-toggle:hover {
    color: var(--pt-text);
    border-color: var(--pt-accent);
}
.aurora-clouds-toggle.is-active {
    background: var(--pt-accent);
    color: #fff;
    border-color: var(--pt-accent);
}

/* Aurora globe zoom buttons — left column at top. Mirrors Leaflet's auto
   stack (10px from edge, 26px square buttons, 1px gap) so flipping between
   Flat and Globe keeps the controls in identical positions. */
.aurora-globe-container .aurora-globe-zoom-btns {
    position: absolute;
    top: 10px;
    left: 10px;
    right: auto;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.aurora-globe-container .sky-dome-zoom-btn {
    width: 26px;
    height: 26px;
    font-size: 1rem;
}

/* Re-center on observer — sits below zoom, matches Leaflet's locate slot. */
.aurora-globe-locate-btn {
    position: absolute;
    top: 64px;
    left: 10px;
    z-index: 1100;
    width: 26px;
    height: 26px;
    background: var(--pt-chrome-bg);
    border: 1px solid var(--pt-border-strong);
    border-radius: var(--pt-radius-sm, 4px);
    color: var(--pt-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}
.aurora-globe-locate-btn:hover {
    color: var(--pt-text);
    border-color: var(--pt-accent);
}

/* Globe is always rendered against a dark space scene, so its on-canvas
   controls (zoom, locate, clouds, view-toggle, legends) need light-on-dark
   styling regardless of the dashboard theme. */
.dash-page[data-theme="light"] .aurora-globe-container .sky-dome-zoom-btn,
.dash-page[data-theme="light"] .aurora-globe-locate-btn,
.dash-page[data-theme="light"] .aurora-globe-container .aurora-clouds-toggle,
.dash-page[data-theme="light"] .aurora-globe-container .aurora-view-toggle__btn,
.dash-page[data-theme="light"] .aurora-globe-container .aurora-cloud-legend {
    background: rgba(15, 23, 42, 0.85);
    color: #cbd5e1;
    border-color: rgba(148, 163, 184, 0.30);
}
.dash-page[data-theme="light"] .aurora-globe-container .aurora-view-toggle__btn.is-active {
    background: var(--pt-accent);
    color: #fff;
    border-color: var(--pt-accent);
}
.dash-page[data-theme="light"] .aurora-globe-container .aurora-clouds-toggle.is-active {
    background: var(--pt-accent);
    color: #fff;
    border-color: var(--pt-accent);
}

/* Cloud overlay on the flat map — OpenWeather `clouds_new` tile pyramid.
   Tiles are white-with-alpha by default; the contrast tweak gives a
   subtle edge so cloud bodies read against a dark basemap. */
.aurora-cloud-overlay {
    pointer-events: none;
    filter: contrast(1.05) brightness(1.02);
}
/* In light mode the OWM cloud tiles are near-white over a near-white
   basemap. Earlier we inverted them to dark grey — but that produced
   heavy smudges that swamped the aurora overlay underneath. Instead we
   blend the white cloud pixels onto the basemap with `multiply`, which
   darkens only where clouds exist (basemap × cloud_alpha) and leaves
   clear-sky areas untouched. Combined with reduced opacity the clouds
   read as a soft grey haze without overpowering the aurora colours. */
.dash-page[data-theme="light"] .aurora-cloud-overlay {
    mix-blend-mode: multiply;
    opacity: 0.55;
    filter: contrast(1.08) brightness(0.92);
}
@media (prefers-color-scheme: light) {
    .dash-page[data-theme="auto"] .aurora-cloud-overlay {
        mix-blend-mode: multiply;
        opacity: 0.55;
        filter: contrast(1.08) brightness(0.92);
    }
}
/* Legacy class kept for any cached old layer references. */
.aurora-cloud-tiles { display: none; }

/* Aurora legend on the globe — reuses the same .aurora-legend block the
   flat map uses, just absolutely positioned in the globe container. */
.aurora-globe-container .aurora-legend {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 1100;
    pointer-events: none;
}

/* Cloud legend (visible on either view when the Clouds toggle is on). */
.aurora-cloud-legend {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 1100;
    background: var(--pt-chrome-bg);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-sm, 4px);
    padding: 0.4rem 0.55rem;
    font-size: 0.65rem;
    color: var(--pt-text-muted);
    line-height: 1.2;
    pointer-events: none;
}
.aurora-cloud-legend__sample {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: #ffffff;
    border: 1px solid var(--pt-border);
    border-radius: 2px;
    vertical-align: middle;
    margin-right: 0.3rem;
}

/* Small floating notice that overlays the bottom-center of the active
   view when no aurora data is available for the chart's time window. */
.aurora-time-notice {
    position: absolute;
    bottom: 0.75rem;
    left: 50%;
    transform: translateX(-50%);
    max-width: calc(100% - 2rem);
    z-index: 1100;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.75rem;
    background: var(--pt-chrome-bg);
    color: var(--pt-text-muted);
    border: 1px solid var(--pt-border-strong);
    border-radius: var(--pt-radius-sm, 4px);
    font-size: 0.7rem;
    line-height: 1.35;
}
.aurora-time-notice strong {
    color: var(--pt-text);
    font-weight: 600;
}
.aurora-time-notice em {
    font-style: normal;
    color: var(--pt-accent, #fbbf24);
}
.aurora-time-notice__dot {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--pt-accent, #fbbf24);
}
.aurora-view-toggle__btn {
    appearance: none;
    background: transparent;
    color: var(--pt-text-muted);
    border: none;
    padding: 0.3rem 0.5rem;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    min-width: 30px;
    transition: background-color 120ms ease, color 120ms ease;
}
.aurora-view-toggle__btn + .aurora-view-toggle__btn {
    /* Row layout — divider between sibling buttons goes on the left. */
    border-left: 1px solid var(--pt-border);
}
.aurora-view-toggle__btn:hover {
    color: var(--pt-text);
    background: var(--pt-surface-raised);
}
.aurora-view-toggle__btn.is-active {
    background: var(--pt-surface-raised);
    color: var(--pt-text);
}
.aurora-view-toggle__btn:focus-visible {
    outline: 2px solid var(--pt-accent, #fbbf24);
    outline-offset: -2px;
}
@media (max-width: 599px) {
    .aurora-view-wrap > .pt-fullscreen-btn { top: 8px; right: 8px; }
    .aurora-view-toggle { top: 44px; right: 8px; }
    .aurora-clouds-toggle { top: 80px; right: 8px; }
    /* A multi-line nowcast notice can cover every bottom HUD on a phone.
       Let it participate in layout immediately below the square scene. */
    .aurora-view-wrap > .aurora-time-notice {
        position: relative;
        inset: auto;
        transform: none;
        max-width: none;
        margin-top: 0.5rem;
        box-sizing: border-box;
    }
}

/* Observer marker — pulsing amber dot */
@keyframes aurora-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(2.5); opacity: 0; }
}
.aurora-observer-pulse {
    width: 12px;
    height: 12px;
    background: #f59e0b;
    border-radius: 50%;
    position: relative;
}
.aurora-observer-pulse::after {
    content: '';
    position: absolute;
    inset: 0;
    background: #f59e0b;
    border-radius: 50%;
    animation: aurora-pulse 2s ease-out infinite;
}

/* Cloud cover badge (top-right control) */
.aurora-cloud-badge {
    background: var(--pt-chrome-bg);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-md);
    padding: var(--pt-space-1-5) var(--pt-space-2-5);
    font-size: var(--pt-text-sm);
    color: var(--pt-text);
    backdrop-filter: blur(8px);
}

/* Legend (bottom-left control) */
.aurora-legend {
    background: var(--pt-chrome-bg);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-md);
    padding: var(--pt-space-2) var(--pt-space-3);
    font-size: var(--pt-text-xs);
    color: var(--pt-text-muted);
}
/* Flat-color KP probability scale — 4 equal solid segments, no gradient.
   Built as adjacent inline-blocks via box-shadow stops on a single bar. */
.aurora-legend__bar {
    width: 120px;
    height: 8px;
    border-radius: var(--pt-radius-xs);
    background-color: transparent;
    display: flex;
    overflow: hidden;
}
.aurora-legend__bar > span {
    flex: 1 1 0;
    display: block;
    height: 100%;
}
.aurora-legend__bar > span:nth-child(1) { background-color: #0a7a2e; opacity: 0.5; }
.aurora-legend__bar > span:nth-child(2) { background-color: #22c55e; }
.aurora-legend__bar > span:nth-child(3) { background-color: #b4dc00; }
.aurora-legend__bar > span:nth-child(4) { background-color: #f05030; }

/* Locate button (top-left, below zoom) */
.aurora-locate-btn {
    background: var(--pt-chrome-bg);
    border: 1px solid var(--pt-border);
    border-radius: var(--pt-radius-md);
    width: 34px;
    height: 34px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--pt-text-muted);
}
.aurora-locate-btn:hover {
    color: var(--pt-accent);
    border-color: var(--pt-border-strong);
}

/* Theme-aware Leaflet overrides for aurora map */
.aurora-map-container .leaflet-control-zoom a {
    background: var(--pt-chrome-bg);
    color: var(--pt-text);
    border-color: var(--pt-border);
}
.aurora-map-container .leaflet-control-zoom a:hover {
    background: var(--pt-surface-raised);
}
.aurora-map-container .leaflet-control-attribution {
    background: var(--pt-chrome-bg) !important;
    font-size: var(--pt-text-2xs) !important;
    opacity: 0.8;
}
.aurora-map-container .aurora-map-tooltip {
    box-sizing: border-box;
    width: max-content;
    max-width: min(14rem, calc(100vw - 2rem));
    white-space: normal;
    text-align: center;
}

/* Reduced motion: disable observer pulse */
@media (prefers-reduced-motion: reduce) {
    .aurora-observer-pulse::after {
        animation: none !important;
    }
}

/* ==========================================================================
   Altitude Chart — Toggle Chips
   ========================================================================== */
.alt-chart-toggles {
    display: flex;
    gap: 3px;
    padding: 2px 0 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.alt-chart-toggles::-webkit-scrollbar { display: none; }
.alt-chart-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 1px 5px;
    border-radius: var(--pt-radius-full);
    font-size: 9px;
    font-family: system-ui;
    color: var(--pt-text-muted);
    background: none;
    border: 1px solid var(--pt-border);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: border-color 0.15s, opacity 0.15s;
}
.alt-chart-chip__dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}
.alt-chart-chip input[type="checkbox"] {
    display: none;
}
.alt-chart-chip--active {
    border-color: var(--chip-color);
    color: var(--pt-text);
}
.alt-chart-chip:not(.alt-chart-chip--active) {
    opacity: 0.5;
}
.alt-chart-chip:hover {
    border-color: var(--pt-border-strong);
}
.alt-chart-chip[disabled],
.alt-chart-chip:has(input:disabled) {
    cursor: not-allowed;
    opacity: 0.35;
}

/* Time scrubber — native range input for touch panning */
.alt-chart-scrubber {
    padding: 2px 4px 0;
}
.alt-chart-scrubber__input {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 16px;
    background: transparent;
    cursor: grab;
    margin: 0;
    touch-action: none;
}
.alt-chart-scrubber__input:active {
    cursor: grabbing;
}
.alt-chart-scrubber__input::-webkit-slider-runnable-track {
    height: 4px;
    background: var(--pt-border);
    border-radius: 2px;
}
.alt-chart-scrubber__input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 28px;
    height: 12px;
    border-radius: 3px;
    background: var(--pt-text-muted);
    border: 1px solid var(--pt-border-strong);
    margin-top: -4px;
    cursor: grab;
}
.alt-chart-scrubber__input::-webkit-slider-thumb:active {
    background: var(--pt-accent);
    cursor: grabbing;
}
.alt-chart-scrubber__input::-moz-range-track {
    height: 4px;
    background: var(--pt-border);
    border-radius: 2px;
    border: none;
}
.alt-chart-scrubber__input::-moz-range-thumb {
    width: 28px;
    height: 12px;
    border-radius: 3px;
    background: var(--pt-text-muted);
    border: 1px solid var(--pt-border-strong);
    cursor: grab;
}
.alt-chart-scrubber__input::-moz-range-thumb:active {
    background: var(--pt-accent);
    cursor: grabbing;
}

/* Altitude Chart — Compact toolbar */
.alt-chart-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 1px 2px 2px;
}
.alt-chart-toolbar__spacer {
    flex: 1 1 4px;
    min-width: 2px;
}
.alt-chart-toolbar__date {
    font-size: 10px;
    font-weight: 600;
    color: var(--pt-text);
    padding: 0 2px;
    user-select: none;
}
.alt-chart-toolbar__zoom {
    font-size: 9px;
    font-weight: 600;
    color: var(--pt-text-muted);
    padding: 0 1px;
    min-width: 16px;
    text-align: center;
    user-select: none;
    font-variant-numeric: tabular-nums;
}
.alt-chart-btn {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border-radius: var(--pt-radius-xs);
    border: 1px solid var(--pt-border);
    background: none;
    color: var(--pt-text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: border-color 0.15s, color 0.15s;
    flex-shrink: 0;
}
.alt-chart-btn:hover:not([disabled]) {
    border-color: var(--pt-accent);
    color: var(--pt-text);
}
.alt-chart-btn[disabled] {
    opacity: 0.25;
    cursor: not-allowed;
}
.alt-chart-btn:focus-visible {
    outline: 2px solid var(--pt-accent);
    outline-offset: 1px;
}
.alt-chart-toolbar__zoom {
    font-size: var(--pt-text-2xs);
    font-weight: var(--pt-weight-semi);
    color: var(--pt-text-muted);
    padding: 0 var(--pt-space-0-5);
    min-width: 20px;
    text-align: center;
    user-select: none;
    font-variant-numeric: tabular-nums;
}
.alt-chart-btn {
    appearance: none;
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    border-radius: var(--pt-radius-sm);
    border: 1px solid var(--pt-border);
    background: none;
    color: var(--pt-text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: border-color 0.15s, color 0.15s;
    flex-shrink: 0;
}
.alt-chart-btn:hover:not([disabled]) {
    border-color: var(--pt-accent);
    color: var(--pt-text);
}
.alt-chart-btn:focus-visible {
    outline: 2px solid var(--pt-accent);
    outline-offset: 1px;
}
.alt-chart-btn:active:not([disabled]) {
    transform: translateY(1px);
}
.alt-chart-btn[disabled] {
    opacity: 0.25;
    cursor: not-allowed;
}
.sky-chart-svg {
    outline: none;
}
.sky-chart-svg:focus-visible {
    outline: 2px solid var(--pt-accent);
    outline-offset: 1px;
    border-radius: var(--pt-radius-xs);
}
.sky-chart-canvas {
    width: 100%;
    display: block;
    cursor: crosshair;
    touch-action: none;
    outline: none;
}
.sky-chart-canvas:active {
    cursor: grabbing;
}
.sky-chart-canvas:focus-visible {
    outline: 2px solid var(--pt-accent);
    outline-offset: 1px;
    border-radius: var(--pt-radius-xs);
}
.alt-chart-btn--now {
    color: var(--pt-accent);
    border-color: var(--pt-accent);
}
.alt-chart-btn--now:hover:not([disabled]) {
    color: var(--pt-accent-bright);
    border-color: var(--pt-accent-bright);
}
.alt-chart-btn--reset {
    color: var(--pt-text-faint);
}
/* Sky Dome chrome buttons: shared on-brand focus ring (matches
   .sky-chart-svg:focus-visible) and comfortable touch targets. */
.sky-dome-zoom-btn:focus-visible,
.sky-dome-immersive-btn:focus-visible,
.sky-dome-inside-btn:focus-visible,
.sky-dome-reset-btn:focus-visible,
.sky-dome-compass-btn:focus-visible,
.sky-dome-camera-btn:focus-visible,
.sky-dome-grid-btn:focus-visible {
    outline: 2px solid var(--pt-accent);
    outline-offset: 1px;
}
/* Sky Dome zoom buttons */
.sky-dome-zoom-btns {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: var(--pt-space-1);
    z-index: 5;
}
.sky-dome-zoom-btn {
    width: 28px;
    height: 28px;
    border-radius: var(--pt-radius-sm);
    border: 1px solid var(--pt-border-strong);
    background: var(--pt-surface);
    color: var(--pt-text-muted);
    font-size: var(--pt-text-lg);
    font-weight: var(--pt-weight-bold);
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, color 0.15s;
}
.sky-dome-zoom-btn:hover {
    border-color: var(--pt-accent);
    color: var(--pt-text);
}
/* Left chrome column: flex stack so touch-size variants reflow
   without per-button offset math. */
.sky-dome-btn-col {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 10;
}

/* A 390px field viewport is shorter than eight coarse-pointer controls in a
   single column. Fold the rail into a compact 2 x 4 instrument cluster while
   retaining the full 44px touch targets. */
@media (pointer: coarse) and (max-width: 400px) {
    .sky-dome-btn-col {
        display: grid;
        grid-template-columns: repeat(2, 44px);
        grid-auto-rows: 44px;
    }

    #sky-dome-viewport > .pt-caption.pt-caption--bottom {
        left: 0.5rem;
        right: auto;
        bottom: 2.5rem;
        max-width: 58%;
        padding: 4px 8px;
    }
}
.sky-dome-immersive-btn,
.sky-dome-inside-btn,
.sky-dome-reset-btn,
.sky-dome-compass-btn,
.sky-dome-camera-btn,
.sky-dome-grid-btn {
    width: 28px;
    height: 28px;
    border-radius: var(--pt-radius-sm);
    border: 1px solid var(--pt-border-strong);
    background: var(--pt-surface);
    color: var(--pt-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, color 0.15s;
}
.sky-dome-immersive-btn:hover,
.sky-dome-inside-btn:hover,
.sky-dome-reset-btn:hover,
.sky-dome-compass-btn:hover,
.sky-dome-camera-btn:hover,
.sky-dome-grid-btn:hover {
    border-color: var(--pt-accent);
    color: var(--pt-text);
}
@media (pointer: coarse) {
    .dash-tool-strip__btn,
    .dash-expanded__close,
    .sky-dome-zoom-btn,
    .sky-dome-immersive-btn,
    .sky-dome-inside-btn,
    .sky-dome-reset-btn,
    .sky-dome-compass-btn,
    .sky-dome-camera-btn,
    .sky-dome-grid-btn {
        width: 44px;
        height: 44px;
    }
    .dash-tool-strip__btn {
        width: auto;
        min-width: 44px;
        min-height: 44px;
    }

    /* Flat-map and globe controls keep identical 44px geometry so changing
       views never moves the user's target. */
    .aurora-map-container .leaflet-control-zoom a,
    .aurora-locate-btn,
    .aurora-globe-container .sky-dome-zoom-btn,
    .aurora-globe-locate-btn {
        width: 44px !important;
        height: 44px !important;
        line-height: 44px !important;
        box-sizing: border-box;
    }
    .aurora-globe-locate-btn {
        top: 103px;
        line-height: 1 !important;
    }
    .aurora-view-toggle__btn,
    .aurora-clouds-toggle {
        min-width: 44px;
        min-height: 44px;
    }
    .aurora-view-toggle {
        top: 60px;
    }
    .aurora-clouds-toggle {
        top: 110px;
    }
}



/* Lens config panel — bottom strip inside viewport */
.sky-dome-lens-panel {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(5, 8, 15, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0;
    padding: 0.375rem 0.75rem;
    z-index: 12;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.sky-dome-lens-panel .lens-strip-wrap {
    gap: 0;
}
.sky-dome-lens-panel .lens-strip__label {
    display: none;
}
.sky-dome-lens-panel .lens-strip {
    border-radius: var(--pt-radius-sm);
}
.sky-dome-lens-panel__sensor {
    font-size: 0.6875rem;
    padding: 0.25rem 0.375rem;
    background: rgba(31, 41, 55, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--pt-radius-sm);
    color: var(--pt-text-muted);
}
.sky-dome-lens-panel__sensor:focus {
    outline: none;
    border-color: var(--pt-accent);
}
.sky-dome-fov-readout {
    font-size: 0.6875rem;
    color: var(--pt-accent);
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-variant-numeric: tabular-nums;
    text-align: center;
    letter-spacing: 0.02em;
}

/* FOV viewfinder overlay rectangle */
.sky-dome-fov-overlay {
    position: absolute;
    z-index: 15;
    pointer-events: none;
    border: 1.5px solid rgba(245, 158, 11, 0.5);
    box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.25);
}

/* Corner brackets */
.sky-dome-fov-overlay__corner {
    position: absolute;
    width: 16px;
    height: 16px;
    border-color: rgba(245, 158, 11, 0.8);
    border-style: solid;
    border-width: 0;
}
.sky-dome-fov-overlay__corner--tl {
    top: -1px; left: -1px;
    border-top-width: 2px;
    border-left-width: 2px;
}
.sky-dome-fov-overlay__corner--tr {
    top: -1px; right: -1px;
    border-top-width: 2px;
    border-right-width: 2px;
}
.sky-dome-fov-overlay__corner--bl {
    bottom: -1px; left: -1px;
    border-bottom-width: 2px;
    border-left-width: 2px;
}
.sky-dome-fov-overlay__corner--br {
    bottom: -1px; right: -1px;
    border-bottom-width: 2px;
    border-right-width: 2px;
}

/* FOV label below rectangle */
.sky-dome-fov-overlay__label {
    position: absolute;
    bottom: -22px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.625rem;
    color: rgba(245, 158, 11, 0.7);
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    /* Flat solid-rgba scrim chip for legibility over the scene —
       the editorial rule bans text-shadows. */
    background: rgba(5, 8, 15, 0.75);
    padding: 1px 6px;
    border-radius: var(--pt-radius-xs);
}

#sky-dome-viewport.is-immersive {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 100000 !important;
    border-radius: 0 !important;
    border: none !important;
    background: #05080f !important;
}

/* --- Generic fullscreen / immersive mode for all sky tools --- */
.pt-fullscreen-btn {
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    width: 28px;
    height: 28px;
    border-radius: var(--pt-radius-sm);
    border: 1px solid var(--pt-border-strong);
    background: var(--pt-surface);
    color: var(--pt-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: border-color 0.15s, color 0.15s;
}
.pt-fullscreen-btn:hover {
    border-color: var(--pt-accent);
    color: var(--pt-text);
}
@media (pointer: coarse) {
    .pt-fullscreen-btn {
        width: 44px;
        height: 44px;
    }
}
.is-immersive {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 100000 !important;
    border-radius: 0 !important;
    border: none !important;
    background: #05080f !important;
    overflow: auto;
}
.is-immersive .pt-fullscreen-btn {
    position: fixed;
    top: 0.75rem;
    left: 0.75rem;
    z-index: 100001;
}
/* In immersive mode, aspect-ratio padding is irrelevant — fill viewport */
.is-immersive.milky-way-viz-wrap,
.is-immersive.sun-moon-compass-map {
    padding-top: 0 !important;
    overflow: auto;
}
.is-immersive.aurora-view-wrap {
    padding-top: 0 !important;
    overflow: hidden;
}
.is-immersive.aurora-view-wrap > .aurora-map-container {
    aspect-ratio: auto !important;
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    border: none !important;
}
@media (max-width: 599px) {
    /* Keep the historical-time notice in a dedicated fullscreen row. The
       scene shrinks around it, so bottom legends and globe HUDs remain inside
       the map instead of being covered by an overlay. */
    .is-immersive.aurora-view-wrap {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr) auto;
    }
    .is-immersive.aurora-view-wrap > .aurora-map-container {
        grid-column: 1;
        grid-row: 1;
        min-height: 0;
    }
    .is-immersive.aurora-view-wrap > .aurora-time-notice {
        grid-column: 1;
        grid-row: 2;
        position: relative;
        inset: auto;
        width: 100%;
        max-width: none;
        margin: 0;
        padding-bottom: max(0.4rem, env(safe-area-inset-bottom));
        transform: none;
        box-sizing: border-box;
    }
}

/* ==========================================================================
   Discovery panel — destination/article/expedition funnel below the tool grid
   ========================================================================== */

.dash-discover {
    max-width: 96rem;
    margin: 0 auto;
    padding: var(--pt-space-6) var(--pt-space-4) 0;
}

.dash-discover__block {
    background-color: var(--pt-surface);
    border: 1px solid var(--pt-border-strong);
    border-radius: var(--pt-radius-md);
    padding: var(--pt-space-5) var(--pt-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--pt-space-3);
}

.dash-discover__heading {
    font-size: var(--pt-text-xs);
    font-weight: var(--pt-weight-semi);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--pt-text-muted);
    margin: 0;
}

.dash-discover__more-link {
    font-size: var(--pt-text-xs);
    color: var(--pt-accent);
    text-decoration: none;
    font-weight: var(--pt-weight-semi);
    align-self: flex-start;
}
.dash-discover__more-link:hover {
    text-decoration: underline;
}

.dash-discover__dest-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--pt-space-3);
}

.dash-dest-tile {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--pt-border-strong);
    border-radius: var(--pt-radius-sm);
    overflow: hidden;
    text-decoration: none;
    background-color: var(--pt-surface-raised);
}
.dash-dest-tile:hover {
    border-color: var(--pt-accent);
}

.dash-dest-tile__img-wrap {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: var(--pt-illust-bg);
    flex-shrink: 0;
}

.dash-dest-tile__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dash-dest-tile__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dash-dest-tile__placeholder svg {
    width: 2rem;
    height: 2rem;
    stroke: var(--pt-text-faint);
}

.dash-dest-tile__body {
    padding: var(--pt-space-2) var(--pt-space-3);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.dash-dest-tile__name {
    font-size: var(--pt-text-sm);
    font-weight: var(--pt-weight-semi);
    color: var(--pt-text);
}

.dash-dest-tile__cta {
    font-size: var(--pt-text-xs);
    color: var(--pt-accent);
}

.dash-discover__cols {
    display: grid;
    /* One equal column per rendered block: blocks hidden by feature flags
       (planner, upcoming tours) leave no empty column behind. */
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: var(--pt-space-3);
    margin-top: var(--pt-space-3);
}

.dash-aurora-list,
.dash-guide-list,
.dash-tour-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--pt-space-2);
}

.dash-aurora-item__link,
.dash-guide-item__link,
.dash-tour-item__link {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    text-decoration: none;
    padding: var(--pt-space-2) 0;
    border-bottom: 1px solid var(--pt-border);
}
.dash-aurora-item__link:hover .dash-aurora-item__name,
.dash-guide-item__link:hover .dash-guide-item__title,
.dash-tour-item__link:hover .dash-tour-item__title {
    color: var(--pt-accent);
}

.dash-aurora-item__name,
.dash-guide-item__title,
.dash-tour-item__title {
    font-size: var(--pt-text-sm);
    font-weight: var(--pt-weight-semi);
    color: var(--pt-text-secondary);
    transition: color 0.15s;
}

.dash-aurora-item__sub {
    font-size: var(--pt-text-xs);
    color: var(--pt-text-muted);
}

.dash-guide-item__tag {
    font-size: 0.65rem;
    font-weight: var(--pt-weight-semi);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--pt-accent);
}

.dash-tour-item__meta {
    font-size: var(--pt-text-xs);
    color: var(--pt-text-muted);
}

@media (max-width: 768px) {
    .dash-discover__dest-grid {
        grid-template-columns: 1fr;
    }
    .dash-discover__cols {
        grid-auto-flow: row;
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .dash-discover {
        padding: var(--pt-space-4) var(--pt-space-3) 0;
    }
}

/* --- Tides: water treatment + lunar regime (flat only, no gradients) --- */
.dash-tide__moonrow {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.375rem 0 0.625rem;
}
.dash-tide__moonrow svg { flex: none; display: block; }
.dash-tide__regime {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.dash-tide__regime--accent { color: var(--pt-accent); }
.dash-tide__regime--muted  { color: var(--pt-text-muted); }

.pt-tide-shimmer {
    stroke-dasharray: 5 11;
    animation: pt-tide-shimmer 2.8s linear infinite;
}
@keyframes pt-tide-shimmer {
    to { stroke-dashoffset: -16; }
}
@media (prefers-reduced-motion: reduce) {
    .pt-tide-shimmer { animation: none; }
}

/* --- Astro Events: marker hover affordance on the bezel gauge --- */
.ae-ring-marker {
    cursor: pointer;
    transition: filter 180ms var(--pt-ease, ease);
}
.ae-ring-marker:hover {
    filter: url(#ae-glow) brightness(1.35);
}

/* Night — tile previews: several minis draw semantic hexes (moon blue,
   Milky Way violet) straight onto canvas/SVG, bypassing the red tokens.
   A blanket red-shift keeps every preview inside the red field without
   requiring night-aware code in each renderMini. */
.dash-page[data-theme="night"] .dash-tile__preview {
    filter: grayscale(1) sepia(1) hue-rotate(-28deg) saturate(3.2) brightness(0.85);
}