/* ══════════════════════════════════════════════════════════════
   Climatology Globe — TC-ATLAS theme overrides
   ══════════════════════════════════════════════════════════════
   Standalone page that hosts the vendored GC-ATLAS climatology
   engine. globe.css ships with its own emerald/teal palette and
   a GC-ATLAS topbar; this stylesheet re-maps those tokens onto
   TC-ATLAS's UM-branded dark palette (UM green + UM orange) and
   re-applies the TC-ATLAS topbar styling so the page sits flush
   with the rest of the site. tc_radar_styles.css loads BETWEEN
   globe.css and this file so its .topbar rules win for topbar
   markup — this file just touches the globe-engine-specific bits.
   The legacy --emerald/--sage/--paper names are kept (engine
   reads them) but they now point to UM-palette values.
   ══════════════════════════════════════════════════════════════ */

/* ── Font: replace vendored JetBrains Mono with the site's DM Sans ──
   The upstream globe.css uses JetBrains Mono in 14 places (sidebar
   labels, colorbar units, footer code, etc.). TC-ATLAS uses DM Sans
   site-wide; mixing the two looks inconsistent. Override every
   element inside the sidebar / colorbar / canvas overlays so the
   monospace inheritance from globe.css is neutralized. The Lorenz
   energy-cycle SVG keeps tabular-nums via font-variant-numeric. */
.sidebar, .sidebar *,
.colorbar, .colorbar *,
.canvas-area .view-toggle, .canvas-area .view-toggle *,
.canvas-area .tips-panel, .canvas-area .tips-panel *,
.canvas-area .share-btn,
.canvas-area .tips-reopen,
.canvas-area .loading-banner,
.canvas-area .canvas-status {
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-variant-numeric: tabular-nums;
}
/* Lorenz cycle SVG explicitly sets JetBrains Mono on inner <g> groups —
   override at the SVG-element level since attribute font-family beats
   inherited CSS. */
.lz-boxes, .lz-boxes *, .lz-arrows, .lz-arrows * {
    font-family: 'DM Sans', -apple-system, sans-serif !important;
    font-variant-numeric: tabular-nums;
}

/* ── Theme variable remap ───────────────────────────────────── */
/*  - Topbar, sidebar, sidebar controls   → follow site theme
      - Globe canvas (3D rendered area)     → ALWAYS DARK (sun-feature
        rendering only reads correctly against a dark "space" bg)
      - Floating panels OVER the canvas     → DARK (live on dark)
    GC-ATLAS engine tokens (--paper/--sage/--thalo/--emerald) are
    remapped to the active theme so the sidebar matches the rest
    of the site. The canvas dark bg is enforced explicitly below
    in .canvas-area regardless of theme.                            */
:root {
    /* GC-ATLAS engine tokens — LIGHT palette (default theme) */
    --deep:           #ffffff;             /* page bg (chrome lives here) */
    --thalo-dark:     #ffffff;             /* sidebar bg = white */
    --thalo:          #f4f6f9;             /* alt surface */
    --thalo-raised:   #ffffff;             /* control surface */
    --thalo-line:     rgba(15,22,35,0.08); /* light borders */
    --emerald:        #005030;             /* UM green accent */
    --emerald-bright: #F47321;             /* UM orange highlight */
    --emerald-glow:   rgba(0,80,48,0.10);
    --sage:           #5b6573;             /* secondary text on light */
    --paper:          #0f1623;             /* primary text on light */
    --paper-dim:      #6b7385;             /* dim text */
    --amber:          #F47321;             /* legacy amber → UM orange */
}
/* Dark theme — matches tc_radar_styles.css's --surface / --text /
   --slate / --border tokens so the globe sidebar reads consistently
   with the other tool pages when the user toggles to dark. */
:root[data-theme="dark"] {
    --deep:           #0a0e14;
    --thalo-dark:     #11161f;
    --thalo:          #161b24;
    --thalo-raised:   #1c222d;
    --thalo-line:     rgba(255,255,255,0.08);
    --emerald:        #4a9b6e;             /* brightened UM green for dark */
    --emerald-bright: #F47321;
    --emerald-glow:   rgba(74,155,110,0.16);
    --sage:           #8a93a4;
    --paper:          #e6e8eb;
    --paper-dim:      #8a93a3;
    --amber:          #F47321;
}

/* ── Direct sidebar / topbar / chrome overrides for dark mode ──
   Belt-and-suspenders for the engine-token remap above. globe.css
   sets these via var(--thalo-dark) etc., and the variable override
   *should* be enough — but any stray hardcoded white in the engine
   chrome would slip through. These rules are scoped to the dark
   theme attribute and use !important so dark mode wins regardless
   of cascade order with the vendored globe.css. */
/* Use aside.sidebar#sidebar for maximum specificity (0,1,1,2 +
   !important) — guarantees no late-loading vendor rule can win. */
:root[data-theme="dark"] aside.sidebar#sidebar,
:root[data-theme="dark"] .sidebar-backdrop,
:root[data-theme="dark"] aside.sidebar#sidebar * {
    background-color: #11161f !important;
    color: #e6e8eb !important;
}
:root[data-theme="dark"] aside.sidebar#sidebar .panel,
:root[data-theme="dark"] aside.sidebar#sidebar .composite-details {
    background-color: #11161f !important;
}
:root[data-theme="dark"] .sidebar .section-label,
:root[data-theme="dark"] .sidebar label {
    color: #8a93a4 !important;
}
:root[data-theme="dark"] .sidebar select,
:root[data-theme="dark"] .sidebar input[type="text"],
:root[data-theme="dark"] .sidebar input[type="number"],
:root[data-theme="dark"] .sidebar .input,
:root[data-theme="dark"] .sidebar .select,
:root[data-theme="dark"] .sidebar .toggle-group,
:root[data-theme="dark"] .sidebar .pill {
    background: #1c222d !important;
    color: #e6e8eb !important;
    border-color: rgba(255,255,255,0.10) !important;
}
:root[data-theme="dark"] .sidebar-footer {
    background: #11161f !important;
    color: #8a93a4 !important;
    border-top-color: rgba(255,255,255,0.08) !important;
}

/* The blanket aside.sidebar#sidebar * { background:#11161f !important }
   rule above wins over the engine's .segmented button.active, .yr-chip
   .selected, etc. — meaning every toggle/segmented control looked
   identical regardless of state in dark mode. Re-establish the active
   accent here using `background` (shorthand) to match the engine's
   own rule and beat both the universal !important and the engine's
   non-important shorthand. UM-green for selected/active, with white
   text and matching border so it reads clearly against the navy
   sidebar surface.

   The `transition: none` is critical: globe.css applies a 150ms
   `transition: background, color` to .segmented buttons. When the
   theme switches at runtime, that transition interpolates from the
   previous (light) emerald to the new dark value — and on certain
   pages the transition can freeze mid-interpolation (e.g. when the
   tab is backgrounded), leaving the active button stuck at the OLD
   color forever. Skipping the transition for the active state means
   theme changes flip instantly to the correct color. */
:root[data-theme="dark"] aside.sidebar#sidebar .segmented button.active,
:root[data-theme="dark"] aside.sidebar#sidebar .composite-mode-toggle button.active,
:root[data-theme="dark"] aside.sidebar#sidebar .composite-year-chips .yr-chip.selected,
:root[data-theme="dark"] aside.sidebar#sidebar .composite-month-chips .mo-chip.selected,
:root[data-theme="dark"] aside.sidebar#sidebar .topbar-nav a.active {
    background: #4a9b6e !important;
    color: #ffffff !important;
    border-color: #4a9b6e !important;
    font-weight: 600;
    transition: none !important;
}
/* Hover state on inactive items needs to be different from active
   (otherwise the user can't tell what's hovered vs selected). */
:root[data-theme="dark"] aside.sidebar#sidebar .segmented button:hover:not(.active),
:root[data-theme="dark"] aside.sidebar#sidebar .composite-mode-toggle button:hover:not(.active),
:root[data-theme="dark"] aside.sidebar#sidebar .composite-year-chips .yr-chip:hover:not(.selected),
:root[data-theme="dark"] aside.sidebar#sidebar .composite-month-chips .mo-chip:hover:not(.selected) {
    background: rgba(74, 155, 110, 0.15) !important;
    color: #e6e8eb !important;
}

/* ── Canvas area — DARK ("space") so the sun feature reads ──── */
/* The 3D globe is rendered with a sun-position highlight that only
   makes physical sense against a dark/space background. So the
   canvas stays dark even though the rest of the site is light.
   The chrome (sidebar, topbar) is still light per the engine
   tokens above; only the canvas + its floating overlays go dark. */
.canvas-area {
    background:
        radial-gradient(ellipse at 50% 55%, rgba(74, 155, 110, 0.18) 0%, transparent 55%),
        #0d1318;
    color: #e6e8eb;
}

/* ── Floating overlays ON the dark canvas — soft glass ──────── */
.canvas-area .view-toggle {
    background: rgba(30, 42, 58, 0.62);
    border: 1px solid rgba(255,255,255,0.14);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.canvas-area .view-toggle button {
    color: #d8dde6;
}
.canvas-area .view-toggle button.active {
    background: var(--um-green);
    color: #ffffff;
}
.canvas-area .view-toggle button:hover:not(.active) {
    color: #ffffff;
    background: rgba(255,255,255,0.10);
}

.canvas-area .share-btn {
    background: rgba(30, 42, 58, 0.62);
    border: 1px solid rgba(255,255,255,0.14);
    color: #d8dde6;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.canvas-area .share-btn:hover {
    color: #ffffff;
    border-color: var(--um-orange);
}

/* "Controls" hint card bottom-right of canvas */
.canvas-area .tips-panel {
    background: rgba(30, 42, 58, 0.62);
    border: 1px solid rgba(255,255,255,0.14);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: #e8ecf2;
}
.canvas-area .tips-panel .tips-title {
    color: var(--um-orange);
}
.canvas-area .tips-panel .tips-title::before {
    background: var(--um-orange);
}
.canvas-area .tips-panel .tips-kbd {
    background: rgba(255,255,255,0.12);
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.10);
}

/* Reopen "?" button when tips are hidden */
.canvas-area .tips-reopen {
    background: rgba(30, 42, 58, 0.62);
    border: 1px solid rgba(255,255,255,0.14);
    color: #d8dde6;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.canvas-area .tips-reopen:hover {
    color: #ffffff;
    border-color: var(--um-orange);
}

/* "Loading ERA5 tiles…" banner that floats over the canvas */
.canvas-area .loading-banner,
.canvas-area .canvas-status {
    background: rgba(30, 42, 58, 0.62);
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.14);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

/* ── Colorbar slim + transparent ────────────────────────────── */
/* The colorbar floats over the globe canvas. Original is opaque +
   wide enough to cover Western Pacific tracks. Slimmer + glass-y
   reads cleaner on top of TC tracks. */
.colorbar {
    background: rgba(30, 42, 58, 0.55);
    border: 1px solid rgba(255,255,255,0.14);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    min-width: 220px;
    max-width: 260px;
    padding: 10px 12px 8px;
    color: #f1f3f7;
}
.colorbar:hover {
    background: rgba(30, 42, 58, 0.75);
}

/* Override engine text colors for elements INSIDE the dark colorbar.
   The engine tokens (--paper, --sage) are now mapped to dark-on-light
   for the sidebar; here we force light-on-dark since the colorbar
   floats on the dark canvas. */
.colorbar #cb-title  { color: #ffffff; }
.colorbar #cb-units  { color: #c9cfd9; }
.colorbar .cb-tick-input {
    color: #e8ecf2;
    border: 1px solid transparent;
    background: transparent;
}
.colorbar .cb-tick-input:not(:focus):not(.is-override) {
    text-decoration-color: rgba(255,255,255,0.35);
}
.colorbar .cb-tick-input:hover {
    border-color: rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.04);
}
.colorbar .cb-tick-input:focus {
    color: #ffffff;
    border-color: var(--um-orange);
    background: rgba(255,255,255,0.04);
}
.colorbar .cb-tick-input.is-override {
    color: var(--um-orange);
    border-color: rgba(244, 115, 33, 0.45);
}
.colorbar .cb-auto {
    color: #c9cfd9;
    border-color: rgba(255,255,255,0.18);
}
.colorbar .cb-auto:hover {
    color: #ffffff;
    border-color: var(--um-orange);
}
.colorbar .cb-auto.is-active {
    color: var(--um-orange);
    border-color: rgba(244, 115, 33, 0.55);
    background: rgba(244, 115, 33, 0.10);
}
.colorbar .cb-hint {
    color: #c9cfd9;
}
.colorbar .cb-note {
    color: #d8dde6;
}
.colorbar .cb-cmap-menu > summary {
    color: #d8dde6;
}
.colorbar .cb-cmap-menu > summary:hover {
    color: #ffffff;
}

/* ── Sliders: brighten track for navy sidebar ───────────────── */
/* Upstream globe.css's track (#1a2230 on #0d1318) is too low-contrast
   against TC-ATLAS's navy sidebar — bump to translucent TC-ATLAS blue
   with a brighter border, and swap the thumb to cyan for visibility. */
.slider {
    width: 100%;
    min-width: 0;
    height: 8px;
    background: rgba(74, 155, 110, 0.30);
    border: 1px solid rgba(74, 155, 110, 0.60);
}
.slider::-webkit-slider-thumb {
    width: 18px;
    height: 18px;
    background: var(--cyan);
    border: 2px solid var(--navy);
    box-shadow: 0 0 0 3px rgba(244, 115, 33, 0.25);
}
.slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    background: var(--cyan);
    border: 2px solid var(--navy);
}

/* ── Track hover tooltip ───────────────────────────────────── */
/* Floating panel populated by climatology_globe.js when the cursor
   is within HOVER_MAX_KM of a visible best-track fix. */
.track-tooltip {
    position: fixed;
    pointer-events: none;
    z-index: 80;
    min-width: 180px;
    max-width: 280px;
    padding: 8px 12px 10px;
    background: rgba(13, 19, 24, 0.92);
    border: 1px solid rgba(255,255,255,0.10);
    border-left: 3px solid var(--um-orange);
    border-radius: 8px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #e6e8eb;
    font-family: 'DM Sans', -apple-system, sans-serif;
    font-size: 0.78rem;
    line-height: 1.4;
    transition: opacity 0.08s ease-out;
}
.track-tooltip.hidden { opacity: 0; }
.track-tooltip .tt-title {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--um-orange);
    letter-spacing: 0.02em;
    margin-bottom: 2px;
}
.track-tooltip .tt-year { color: #8993a4; font-weight: 500; margin-left: 4px; }
.track-tooltip .tt-basin {
    font-size: 0.68rem;
    color: #8993a4;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
}
.track-tooltip .tt-row { font-variant-numeric: tabular-nums; font-size: 0.74rem; }
.track-tooltip .tt-cat { font-weight: 700; }
.track-tooltip .tt-date {
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
    font-size: 0.68rem;
    color: #8a93a3;
}

/* ── Topbar bridging ───────────────────────────────────────── */
/* globe.css has `.topbar { backdrop-filter: ...; flex: 0 0 auto; }`
   which globe.js's body{display:flex;flex-direction:column} relies
   on. tc_radar_styles.css's .topbar rules win for visual styling,
   but we keep flex-shrink intact so the topbar doesn't squash. */
.topbar {
    flex: 0 0 auto;
}

/* The skip-link from TC-ATLAS pages — keep it absolutely placed
   off-screen until focused. tc_radar_styles owns this pattern so
   we just guarantee positioning isn't broken by globe.css resets. */
.skip-link {
    position: absolute;
    left: -10000px;
    top: auto;
}
.skip-link:focus {
    left: 12px;
    top: 12px;
    z-index: 200;
}

/* ── Field-info ⓘ button + popover ─────────────────────────── */
.field-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 6px;
    padding: 0;
    width: 18px;
    height: 18px;
    line-height: 1;
    font-size: 0.85rem;
    font-family: inherit;
    color: var(--sage);
    background: transparent;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    vertical-align: middle;
    transition: color 0.15s, background 0.15s;
}
.field-info-btn:hover  { color: var(--paper); background: rgba(255, 255, 255,0.06); }
.field-info-btn:focus  { outline: none; color: var(--emerald-bright); background: rgba(14,140,110,0.18); }

.field-info-popover[hidden] { display: none; }
.field-info-popover {
    margin-top: 6px;
    padding: 10px 12px;
    font-size: 0.72rem;
    line-height: 1.5;
    color: var(--paper);
    background: rgba(255, 255, 255,0.03);
    border: 1px solid var(--thalo-line);
    border-left: 3px solid var(--emerald);
    border-radius: 4px;
}
.field-info-popover .fi-title {
    font-weight: 600;
    color: var(--emerald-bright);
    margin-bottom: 4px;
}
.field-info-popover .fi-units {
    font-variant-numeric: tabular-nums;
    font-size: 0.66rem;
    color: var(--sage);
    font-weight: normal;
    margin-left: 4px;
}
.field-info-popover .fi-body  { margin-bottom: 6px; }
.field-info-popover .fi-meta  { margin-bottom: 6px; font-size: 0.66rem; }
.field-info-popover .fi-learn a { font-size: 0.7rem; }