/* ═══════════════════════════════════════════════════════════════════════
   Romania Heat Atlas — CONTROL ROOM skin
   Dark instrument panel · IBM Plex Mono + IBM Plex Sans · signal orange
   Drop-in replacement for assets/style.css (same selectors + variables).
   Default theme is DARK ("dim"); [data-theme="light"] is the bright
   instrument variant. Pair with the updated app.py (fonts + nav labels).
   ═══════════════════════════════════════════════════════════════════════ */

/* Fonts loaded via <link rel="preload"> in app.py index_string. */

/* ═══ Motion system ═══════════════════════════════════════════════════ */
@keyframes fade-up {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes header-shimmer {
    0%   { background-position:   0% 0; }
    100% { background-position: 200% 0; }
}
@keyframes logo-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}
@keyframes fade-in-scale {
    from { opacity: 0; transform: scale(0.96); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes status-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.45; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
    }
    .editorial-cta, .chapter-card, .stats-strip__item, .preset-chip,
    .timeline-play, .timeline-marker, .home-module-card, .sidebar-col,
    a:hover > .chapter-card, a:active > .chapter-card,
    a:hover > .home-module-card {
        transform: none !important;
    }
}

/* Easing tokens */
:root {
    --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
    --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ═══ DARK (default) — control room "dim" ═════════════════════════════ */
:root {
    /* Surfaces */
    --bg-body:       #0c0e11;
    --bg-sidebar:    #0e1116;
    --bg-card:       #101319;
    --bg-card-hover: #14181f;
    --bg-input:      #171a1f;
    --border-card:   #22262d;
    --border-input:  #2a2f37;

    /* Ink */
    --text-primary:  #eceef1;
    --text-secondary:#8b929c;
    --text-muted:    #5c636e;

    /* Accent — signal orange */
    --accent:        #ff6a3d;
    --accent-light:  #ff8355;
    --accent-soft:   rgba(255,106,61,0.12);
    --accent-ink:    #0c0e11;     /* text ON the accent */

    /* Cool counterpoint */
    --blue:          #7fa8bc;
    --blue-soft:     rgba(127,168,188,0.12);

    /* Status */
    --status-ok:     #4ade80;

    /* Thermal scale */
    --thermal-cold:    #3f6c84;
    --thermal-mild:    #d4b785;
    --thermal-warm:    #c98f46;
    --thermal-hot:     #ff6a3d;
    --thermal-extreme: #b91c1c;

    /* Chrome */
    --header-bg:     #0a0c0f;
    --header-text:   #eceef1;
    --header-sub:    #5c636e;

    /* Glass (floating panels over maps) */
    --glass-bg:      rgba(12,14,17,0.88);

    /* FX — flat panels, hairlines instead of shadows */
    --shadow:        none;
    --shadow-lg:     0 12px 34px rgba(0,0,0,0.45);
    --radius:        0px;
    --radius-sm:     0px;
    --scrollbar-bg:  #0c0e11;
    --scrollbar-thumb:#2a2f37;

    /* Fonts */
    --font-display: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
    --font-ui:      'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
    --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* ═══ LIGHT — control room "bright" ═══════════════════════════════════ */
[data-theme="light"] {
    --bg-body:       #eef0f2;
    --bg-sidebar:    #e9ebee;
    --bg-card:       #f7f8fa;
    --bg-card-hover: #ffffff;
    --bg-input:      #e9ebee;
    --border-card:   #d3d7dd;
    --border-input:  #c3c8d0;
    --text-primary:  #14171b;
    --text-secondary:#4a5058;
    --text-muted:    #6a7078;
    --accent:        #d9541f;     /* darker signal orange for AA on light */
    --accent-light:  #ff6a3d;
    --accent-soft:   rgba(217,84,31,0.10);
    --accent-ink:    #ffffff;
    --blue:          #33607a;
    --blue-soft:     rgba(51,96,122,0.10);
    --status-ok:     #15803d;
    --thermal-cold:    #33607a;
    --thermal-mild:    #c9a95e;
    --thermal-warm:    #b07a2a;
    --thermal-hot:     #d9541f;
    --thermal-extreme: #991616;
    /* Chrome stays dark in bright mode — instrument bezel */
    --header-bg:     #14171b;
    --header-text:   #eceef1;
    --header-sub:    #7a828c;
    --glass-bg:      rgba(247,248,250,0.92);
    --shadow:        none;
    --shadow-lg:     0 10px 28px rgba(20,23,27,0.14);
    --scrollbar-bg:  #eef0f2;
    --scrollbar-thumb:#c3c8d0;
}

/* ═══ Skip link (a11y) ════════════════════════════════════════════════ */
.skip-link {
    position: absolute;
    top: 0;
    left: 16px;
    z-index: 9999;
    padding: 8px 16px;
    background: var(--header-bg, #0a0c0f);
    color: var(--header-text, #eceef1);
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    border: 1px solid var(--border-input);
    text-decoration: none;
    transform: translateY(-100%);
    transition: transform 0.15s var(--ease-out);
}
.skip-link:focus {
    transform: translateY(0);
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ═══ Reset & base ════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: var(--font-ui);
    font-size: 14.5px;
    background: var(--bg-body);
    color: var(--text-primary);
    margin: 0; padding: 0;
    transition: background 200ms var(--ease-out), color 200ms var(--ease-out);
    -webkit-font-smoothing: antialiased;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--scrollbar-bg); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* Typography */
h1,h2,h3,h4,h5,h6 {
    font-family: var(--font-ui);
    color: var(--text-primary);
    margin: 0;
}
p, span, label {
    font-family: var(--font-ui);
    color: var(--text-primary);
}

/* ═══ Header — status bar ═════════════════════════════════════════════ */
.app-header {
    background: var(--header-bg);
    padding: 0 20px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #22262d;
    position: relative;
}
/* Thermal hairline under the header */
.app-header::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg,
        var(--thermal-cold)    0%,
        var(--thermal-mild)   12%,
        var(--thermal-warm)   24%,
        var(--thermal-hot)    36%,
        var(--thermal-extreme) 50%,
        var(--thermal-hot)    64%,
        var(--thermal-warm)   76%,
        var(--thermal-mild)   88%,
        var(--thermal-cold)  100%);
    background-size: 200% 100%;
    background-position: 0% 0;
    opacity: 0.45;
    animation: header-shimmer 22s linear 1 forwards;
}
.header-title {
    font-family: var(--font-mono);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--header-text);
}
.header-mark {
    height: 28px;
    width: 28px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 0 6px rgba(255, 106, 61, 0.25));
}
.app-header .header-sub {
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--header-sub);
    letter-spacing: 1px;
    margin-left: 12px;
    font-weight: 400;
}

/* ═══ Navigation — module tabs ════════════════════════════════════════ */
.header-nav {
    display: flex;
    align-items: center;
    gap: 2px;
}
.nav-link-item {
    color: var(--header-sub);
    text-decoration: none !important;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 1.5px;
    padding: 8px 12px;
    border-radius: 0;
    transition: color 0.2s var(--ease-out),
                background 0.2s var(--ease-out);
    text-transform: uppercase;
    position: relative;
}
.nav-link-item:hover {
    color: var(--header-text);
    background: rgba(255,255,255,0.05);
    text-decoration: none !important;
}
.nav-link-item:active {
    opacity: 0.7;
    transition-duration: 80ms;
}
.nav-link-item.active {
    color: var(--accent-light);
    background: linear-gradient(180deg, transparent 60%, rgba(255,106,61,0.08));
}
.nav-link-item.active::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0; right: 0;
    height: 2px;
    background: var(--accent-light);
    z-index: 1;
}

/* ═══ Home — mission-control landing ══════════════════════════════════ */
.home-hero {
    background: var(--bg-body);
    border-bottom: 1px solid var(--border-card);
    padding: 80px 48px 64px;
    position: relative;
    overflow: hidden;
}
.home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 60% 80% at 92% -10%,
            rgba(255, 106, 61, 0.08) 0%, transparent 60%);
    pointer-events: none;
}
.home-hero::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--thermal-cold)    20%,
        var(--thermal-mild)    40%,
        var(--thermal-warm)    60%,
        var(--thermal-hot)     80%,
        transparent 100%);
    opacity: 0.4;
}

.home-hero__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
    max-width: 1280px;
    margin: 0 auto;
}
.home-hero__text { min-width: 0; }

.home-hero .editorial-eyebrow,
.home-hero .editorial-h1,
.home-hero .editorial-lead,
.home-hero .editorial-cta-row,
.home-hero__logo {
    opacity: 0;
    animation: fade-up 0.7s var(--ease-out-expo) forwards;
}
.home-hero .editorial-eyebrow   { animation-delay: 0.06s; }
.home-hero .editorial-h1        { animation-delay: 0.14s; }
.home-hero .editorial-lead      { animation-delay: 0.26s; }
.home-hero .editorial-cta-row   { animation-delay: 0.38s; }
.home-hero__logo                { animation-delay: 0.18s;
                                  animation-name: fade-in-scale; }

.home-hero__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.home-hero__logo img {
    width: 100%;
    max-width: 300px;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 0 50px rgba(255, 106, 61, 0.25));
    animation: logo-float 9s var(--ease-in-out) 1;
}
.home-hero__logo::before {
    content: "";
    position: absolute;
    inset: 50% 50% auto auto;
    transform: translate(50%, -50%);
    width: 92%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%,
        rgba(255, 106, 61, 0.12) 0%,
        rgba(255, 106, 61, 0.05) 35%,
        transparent 70%);
    pointer-events: none;
    z-index: 0;
}
[data-theme="light"] .home-hero__logo img {
    filter: drop-shadow(0 0 40px rgba(217, 84, 31, 0.20));
}

/* Editorial typography → instrument typography */
.editorial-eyebrow {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 22px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.editorial-eyebrow::before {
    content: "";
    width: 26px;
    height: 1px;
    background: var(--accent);
    display: inline-block;
}

.editorial-h1 {
    font-family: var(--font-ui);
    font-size: clamp(38px, 4.6vw, 58px);
    font-weight: 600;
    line-height: 1.06;
    letter-spacing: -1.2px;
    color: var(--text-primary);
    margin: 0 0 26px;
    max-width: 16ch;
}
.editorial-h1 em {
    font-style: normal;
    color: var(--accent);
}

.editorial-lead {
    font-family: var(--font-ui);
    font-size: 16px;
    line-height: 1.65;
    color: var(--text-secondary);
    margin: 0 0 32px;
    max-width: 58ch;
    font-weight: 400;
}

.editorial-cta-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
}
.editorial-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 22px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 0;
    transition: transform 200ms var(--ease-out),
                background 200ms var(--ease-out),
                border-color 200ms var(--ease-out),
                color 200ms var(--ease-out);
    cursor: pointer;
}
.editorial-cta.primary {
    background: var(--accent);
    color: var(--accent-ink);
    border: 1px solid var(--accent);
}
.editorial-cta.primary:hover {
    background: var(--accent-light);
    border-color: var(--accent-light);
    color: var(--accent-ink);
}
@media (hover: hover) and (pointer: fine) {
    .editorial-cta.primary:hover { transform: translateY(-2px); }
}
.editorial-cta.primary:active {
    transform: translateY(0) scale(0.97);
    transition-duration: 150ms;
}
.editorial-cta.ghost {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-input);
}
.editorial-cta.ghost:hover {
    border-color: var(--text-muted);
    background: var(--bg-card);
}
@media (hover: hover) and (pointer: fine) {
    .editorial-cta.ghost:hover { transform: translateY(-2px); }
}
.editorial-cta.ghost:active {
    transform: translateY(0) scale(0.97);
    transition-duration: 150ms;
}
.editorial-cta .arrow { transition: transform 200ms var(--ease-out); }
.editorial-cta:hover .arrow { transform: translateX(3px); }

/* Stats strip → readout strip */
.stats-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    background: var(--bg-body);
    border-top: 1px solid var(--border-card);
    border-bottom: 1px solid var(--border-card);
}
.stats-strip__item {
    flex: 1 1 0;
    min-width: 170px;
    padding: 18px 22px;
    border-right: 1px solid var(--border-card);
    display: flex;
    flex-direction: column;
    gap: 6px;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.6s var(--ease-out-expo),
                transform 0.6s var(--ease-out);
}
.stats-strip__item.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.stats-strip__item:last-child { border-right: none; }
.stats-strip__value,
.stats-strip__value * {
    font-family: var(--font-mono);
    font-size: 24px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.1;
    letter-spacing: -0.3px;
}
.stats-strip__label {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Section header */
.section-header {
    padding: 52px 48px 24px;
    border-bottom: none;
}
.section-header__eyebrow {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 12px;
}
.section-header__title {
    font-family: var(--font-ui);
    font-size: 30px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 12px;
    letter-spacing: -0.5px;
    line-height: 1.15;
}
.section-header__desc {
    font-family: var(--font-ui);
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-secondary);
    max-width: 62ch;
    margin: 0;
}

/* Chapter cards → module panels */
.chapter-card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 0;
    padding: 26px 22px 22px;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: background 0.2s var(--ease-out),
                border-color 0.2s var(--ease-out),
                opacity 0.7s var(--ease-out-expo),
                transform 0.6s var(--ease-out);
    opacity: 0;
    transform: translateY(16px);
}
.chapter-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.chapter-card-link, a:has(> .chapter-card) {
    display: flex;
    height: 100%;
}
.chapter-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--chapter-accent, var(--accent));
    opacity: 0.9;
}
a:hover > .chapter-card,
.chapter-card.is-hover {
    border-color: var(--chapter-accent, var(--accent));
    background: var(--bg-card-hover);
}
.chapter-card.is-disabled { opacity: 0.5; }
.chapter-card.is-disabled::before { opacity: 0.35; }

.chapter-card__number {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    font-style: normal;
    letter-spacing: 2px;
    color: var(--text-muted);
    text-transform: uppercase;
    margin: 0 0 16px;
}
.chapter-card__title {
    font-family: var(--font-ui);
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.15;
    letter-spacing: -0.2px;
    margin: 0 0 5px;
}
.chapter-card__subtitle {
    font-family: var(--font-mono);
    font-size: 9.5px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--chapter-accent, var(--accent));
    margin: 0 0 16px;
}
.chapter-card__desc {
    font-family: var(--font-ui);
    font-size: 12.5px;
    line-height: 1.65;
    color: var(--text-secondary);
    margin: 0;
    flex: 1;
}
.chapter-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid var(--border-card);
    gap: 12px;
}
.chapter-card__tag {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
}
.chapter-card__cta {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--chapter-accent, var(--accent));
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.chapter-card__cta .arrow { transition: transform 200ms var(--ease-out); }
a:hover > .chapter-card .chapter-card__cta .arrow { transform: translateX(4px); }
.chapter-card__soon {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-muted);
    border: 1px solid var(--border-input);
    padding: 4px 10px;
    border-radius: 0;
}

/* Legacy home classes */
.home-hero-title {
    font-size: 32px;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: 12px;
    letter-spacing: -0.4px;
}
.home-hero-sub {
    font-size: 14px;
    color: var(--text-secondary);
    max-width: 700px;
    line-height: 1.7;
    margin: 0;
}
.home-tag {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 0;
    padding: 4px 12px;
}

.home-module-card {
    transition: background 200ms var(--ease-out),
                border-color 200ms var(--ease-out);
}
a:hover > .home-module-card {
    background: var(--bg-card-hover);
    border-color: var(--accent) !important;
}

/* Footer */
.home-footer {
    background: var(--bg-sidebar);
    border-top: 1px solid var(--border-card);
}

/* ═══ Sidebar sections ════════════════════════════════════════════════ */
.sidebar-section {
    padding: 12px 4px 14px;
    border-bottom: 1px solid var(--border-card);
    margin-bottom: 4px;
}
.sidebar-section:last-child { border-bottom: none; }
.sidebar-section__title {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 4px 6px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.sidebar-section__title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border-card);
}

/* ═══ KPI strip — readouts ════════════════════════════════════════════ */
.kpi-strip {
    display: flex;
    gap: 0;
    margin-bottom: 10px;
    flex-wrap: wrap;
    border: 1px solid var(--border-card);
    background: var(--bg-card);
}
.kpi-strip__item {
    flex: 1 1 0;
    min-width: 140px;
    background: transparent;
    border: none;
    border-right: 1px solid var(--border-card);
    border-top: 2px solid var(--kpi-accent, transparent);
    border-radius: 0;
    padding: 10px 14px 12px;
    transition: background 200ms var(--ease-out);
}
.kpi-strip__item:last-child { border-right: none; }
.kpi-strip__label {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 4px;
}
.kpi-strip__value {
    font-family: var(--font-mono);
    font-size: 24px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.15;
    letter-spacing: -0.3px;
}
.kpi-strip__unit {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 400;
    color: var(--text-muted);
    margin-left: 4px;
    letter-spacing: 0;
}
.kpi-strip__context {
    font-family: var(--font-ui);
    font-size: 10.5px;
    color: var(--text-muted);
    margin-top: 2px;
    letter-spacing: 0.2px;
}
.kpi-strip__item.kpi-mean    { --kpi-accent: var(--accent); }
.kpi-strip__item.kpi-max     { --kpi-accent: var(--thermal-extreme); }
.kpi-strip__item.kpi-min     { --kpi-accent: var(--blue); }
.kpi-strip__item.kpi-range   { --kpi-accent: var(--thermal-warm); }

/* ═══ Floating colorbar over the map ══════════════════════════════════ */
.map-wrap { position: relative; }
.colorbar-float {
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 4;
    background: var(--glass-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--border-card);
    border-radius: 0;
    padding: 8px 12px 10px;
    box-shadow: var(--shadow-lg);
    max-width: 340px;
    min-width: 220px;
    pointer-events: auto;
}
.colorbar-float__title {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: 0 0 6px;
}
.colorbar-float img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 0;
}
.colorbar-wrap { margin-top: 4px; }
.colorbar-wrap img { max-width: 100%; border-radius: 0; }
.colorbar-wrap.is-hidden { display: none; }

/* ═══ Skeleton loading ════════════════════════════════════════════════ */
@keyframes skeleton-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}
.skeleton {
    background: linear-gradient(90deg,
        var(--bg-card)       0%,
        var(--bg-card-hover) 50%,
        var(--bg-card)     100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.6s var(--ease-in-out) infinite;
    border-radius: 0;
}
.skeleton-map {
    height: 100%;
    min-height: 480px;
    width: 100%;
}

/* ═══ Story presets — chips strip ═════════════════════════════════════ */
.presets-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    padding: 10px 4px 14px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border-card);
}
.presets-strip__title {
    grid-column: 1 / -1;
    font-family: var(--font-mono);
    font-style: normal;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 4px 8px;
}
.preset-chip {
    background: var(--bg-input);
    border: 1px solid var(--border-card);
    border-top: 2px solid var(--preset-accent, var(--accent));
    border-radius: 0;
    padding: 9px 11px 10px;
    cursor: pointer;
    transition: background 150ms var(--ease-out),
                border-color 150ms var(--ease-out);
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: left;
    font-family: var(--font-ui);
    width: 100%;
    min-height: 56px;
}
.preset-chip:hover {
    background: var(--bg-card-hover);
    border-color: var(--preset-accent, var(--accent));
}
.preset-chip:active { transform: scale(0.98); transition-duration: 100ms; }
.preset-chip__title {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.25;
    letter-spacing: 0.1px;
}
.preset-chip__meta {
    font-family: var(--font-mono);
    font-size: 8.5px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--preset-accent, var(--accent));
    line-height: 1.3;
}

/* ═══ Decade timeline ═════════════════════════════════════════════════ */
.timeline-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 0;
    padding: 10px 16px;
    margin-bottom: 8px;
    position: relative;
}
.timeline-play {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 0;
    background: var(--accent);
    color: var(--accent-ink);
    border: 1px solid var(--accent);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    transition: transform 150ms var(--ease-out),
                background 150ms var(--ease-out);
    padding: 0;
}
.timeline-play:hover { background: var(--accent-light); border-color: var(--accent-light); }
.timeline-play:active { transform: scale(0.92); transition-duration: 150ms; }
.timeline-play__icon { display: inline-block; transform: translateX(1px); }
.timeline-play.is-playing .timeline-play__icon { transform: none; }

.timeline-label {
    flex-shrink: 0;
    min-width: 110px;
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: 1.3;
}
.timeline-label__value {
    display: block;
    font-family: var(--font-mono);
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.05;
    margin-top: 3px;
}

.timeline-track {
    flex: 1;
    position: relative;
    height: 36px;
    display: flex;
    align-items: center;
    padding: 0 6px;
}
.timeline-track__line {
    position: absolute;
    left: 6px; right: 6px;
    top: 50%;
    height: 2px;
    background: var(--border-input);
    transform: translateY(-50%);
}
.timeline-track__progress {
    position: absolute;
    left: 6px;
    top: 50%;
    height: 2px;
    transform: translateY(-50%);
    background: linear-gradient(90deg,
        var(--thermal-cold) 0%,
        var(--thermal-mild) 35%,
        var(--thermal-warm) 60%,
        var(--thermal-hot)  85%,
        var(--thermal-extreme) 100%);
    transition: width 250ms var(--ease-out);
}
.timeline-track__markers {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 100%;
}
.timeline-marker {
    flex-shrink: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 2px solid var(--border-input);
    cursor: pointer;
    transition: transform 150ms var(--ease-out),
                background 150ms var(--ease-out),
                border-color 150ms var(--ease-out);
    position: relative;
    padding: 0;
}
.timeline-marker::after {
    content: "";
    position: absolute;
    inset: -16px;
}
.timeline-marker:hover { border-color: var(--accent); }
@media (hover: hover) and (pointer: fine) {
    .timeline-marker:hover { transform: scale(1.4); }
}
.timeline-marker.is-past {
    background: var(--accent);
    border-color: var(--accent);
}
.timeline-marker.is-active {
    width: 16px;
    height: 16px;
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
    animation: marker-pulse 2s var(--ease-in-out) 3;
}
@keyframes marker-pulse {
    0%, 100% { box-shadow: 0 0 0 4px var(--accent-soft); }
    50%      { box-shadow: 0 0 0 7px var(--accent-soft); }
}
.timeline-marker__tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--header-bg);
    color: var(--header-text);
    border: 1px solid var(--border-input);
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 0;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 125ms var(--ease-out);
}
.timeline-marker:hover .timeline-marker__tooltip { opacity: 1; }

@media (max-width: 991px) {
    .timeline-bar { gap: 10px; padding: 8px 10px; flex-wrap: wrap; }
    .timeline-label { min-width: 0; }
    .timeline-track { width: 100%; flex: 1 0 100%; }
}

/* ═══ Health callout ══════════════════════════════════════════════════ */
.health-callout {
    background: color-mix(in oklch, var(--health-accent, var(--thermal-warm)) 7%, var(--bg-card));
    border: 1px solid color-mix(in oklch, var(--health-accent, var(--thermal-warm)) 28%, var(--border-card));
    border-radius: 0;
    padding: 12px 14px;
    margin-top: 8px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.health-callout__icon {
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--health-accent, var(--thermal-warm));
}
.health-callout__body { flex: 1; min-width: 0; }
.health-callout__title {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--health-accent, var(--thermal-warm));
    margin: 0 0 4px;
}
.health-callout__text {
    font-family: var(--font-ui);
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-secondary);
    margin: 0;
}
.health-callout__source {
    font-family: var(--font-ui);
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 6px;
    font-style: italic;
}
.health-callout.mild     { --health-accent: var(--thermal-mild); }
.health-callout.warm     { --health-accent: var(--thermal-warm); }
.health-callout.hot      { --health-accent: var(--thermal-hot); }
.health-callout.extreme  { --health-accent: var(--thermal-extreme); }

/* ═══ Loading spinner ═════════════════════════════════════════════════ */
._dash-loading { color: var(--accent) !important; }
.map-wrap ._dash-loading-callback {
    background: rgba(12, 14, 17, 0.55) !important;
    backdrop-filter: blur(3px);
}
[data-theme="light"] .map-wrap ._dash-loading-callback {
    background: rgba(238, 240, 242, 0.55) !important;
}
._dash-loading-callback { background: transparent !important; }

/* ═══ Cards ═══════════════════════════════════════════════════════════ */
.dash-card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 0;
    padding: 10px 12px;
    margin-bottom: 8px;
    box-shadow: none;
    transition: background 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.dash-card-accent {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-top: 2px solid var(--accent);
    border-radius: 0;
    padding: 10px 12px;
    margin-bottom: 8px;
    box-shadow: none;
    transition: background 200ms var(--ease-out), border-color 200ms var(--ease-out);
}

/* ═══ Section labels ══════════════════════════════════════════════════ */
.section-label {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    color: var(--text-muted);
    margin-bottom: 8px;
}

/* ═══ Sidebar / main columns ══════════════════════════════════════════ */
.sidebar-col {
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border-card);
    padding: 12px 10px 12px 12px !important;
    height: calc(100vh - 56px);
    overflow-y: auto;
    transition: background 200ms var(--ease-out);
}
.main-col {
    padding: 10px 14px 10px 10px !important;
    height: calc(100vh - 56px);
    overflow-y: auto;
    background: var(--bg-body);
    transition: background 200ms var(--ease-out);
}

/* ═══ Dropdowns (react-select overrides) — dark inputs ════════════════ */
.Select-control {
    background-color: var(--bg-input) !important;
    border-color: var(--border-input) !important;
    border-radius: 0 !important;
    color: var(--text-primary) !important;
    font-family: var(--font-ui) !important;
    font-size: 13.5px !important;
    min-height: 36px !important;
}
.Select-input > input {
    color: var(--text-primary) !important;
    font-family: var(--font-ui) !important;
}
.Select-value-label,
.Select-placeholder {
    color: var(--text-primary) !important;
    font-family: var(--font-ui) !important;
}
.has-value.Select--single > .Select-control .Select-value .Select-value-label {
    color: var(--text-primary) !important;
}
.Select-arrow-zone .Select-arrow {
    border-top-color: var(--text-muted) !important;
}
.Select-noresults {
    color: var(--text-muted) !important;
    font-family: var(--font-ui) !important;
}
.Select-menu-outer,
.Select-menu {
    background-color: var(--bg-card-hover) !important;
    border-color: var(--border-input) !important;
    border-radius: 0 !important;
    box-shadow: var(--shadow-lg) !important;
    z-index: 999 !important;
}
.Select-option {
    background-color: var(--bg-card-hover) !important;
    color: var(--text-primary) !important;
    font-family: var(--font-ui) !important;
    font-size: 13.5px !important;
    padding: 7px 10px !important;
}
.Select-option.is-focused {
    background-color: var(--accent-soft) !important;
    color: var(--text-primary) !important;
}
.Select-option.is-selected {
    background-color: var(--accent) !important;
    color: var(--accent-ink) !important;
    font-weight: 600 !important;
}
.Select-option.is-disabled {
    background-color: var(--bg-input) !important;
    color: var(--text-muted) !important;
    font-family: var(--font-mono) !important;
    font-weight: 600 !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    padding: 8px 10px 4px !important;
    opacity: 1 !important;
}

/* ═══ Radio items ═════════════════════════════════════════════════════ */
.form-check-label {
    font-family: var(--font-ui) !important;
    font-size: 13.5px !important;
    color: var(--text-secondary) !important;
    cursor: pointer;
    transition: color 0.15s;
}
.form-check-label:hover { color: var(--text-primary) !important; }
.form-check-input:checked ~ .form-check-label {
    color: var(--accent-light) !important;
    font-weight: 600;
}
.form-check-input {
    background-color: var(--bg-input);
    border-color: var(--border-input);
}
.form-check-input:checked {
    background-color: var(--accent) !important;
    border-color: var(--accent) !important;
}

/* ═══ Slider ══════════════════════════════════════════════════════════ */
.rc-slider-track { background-color: var(--accent) !important; }
.rc-slider-handle {
    border-color: var(--accent) !important;
    background: var(--bg-body) !important;
    box-shadow: 0 0 0 1px var(--accent) !important;
}
.rc-slider-rail { background-color: var(--border-input) !important; }
.rc-slider-dot { background: var(--bg-input) !important; border-color: var(--border-input) !important; }
.rc-slider-dot-active { border-color: var(--accent) !important; }
.rc-slider-mark-text {
    color: var(--text-muted) !important;
    font-size: 9.5px !important;
    font-family: var(--font-mono) !important;
}
.rc-slider-tooltip-inner {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    background: var(--header-bg) !important;
    color: var(--header-text) !important;
    border: 1px solid var(--border-input) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* ═══ Stats panel ═════════════════════════════════════════════════════ */
.stats-panel { font-size: 13px; line-height: 1.8; }
.stats-panel b { color: var(--accent-light); }

/* ═══ Map / chart containers ══════════════════════════════════════════ */
.map-wrap {
    border-radius: 0;
    overflow: hidden;
    border: 1px solid var(--border-card);
    box-shadow: none;
}
.js-plotly-plot canvas,
.js-plotly-plot .mapboxgl-canvas,
.js-plotly-plot .maplibregl-canvas,
.js-plotly-plot image {
    image-rendering: pixelated !important;
    image-rendering: -moz-crisp-edges !important;
    image-rendering: crisp-edges !important;
}
.chart-wrap {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 0;
    margin-top: 8px;
    box-shadow: none;
    overflow: hidden;
    transition: background 200ms var(--ease-out), border-color 200ms var(--ease-out);
}

/* ═══ Dash internals ══════════════════════════════════════════════════ */
._dash-undo-redo { display: none !important; }
.card {
    background: var(--bg-card) !important;
    border-color: var(--border-card) !important;
}
.container-fluid {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
}

/* Plotly text follows theme */
.chart-wrap .js-plotly-plot text { fill: var(--text-secondary) !important; }
.chart-wrap .js-plotly-plot .gridlayer line { stroke: rgba(140,150,160,0.12) !important; }
[data-theme="light"] .chart-wrap .js-plotly-plot text { fill: #4a5058 !important; }
[data-theme="light"] .chart-wrap .js-plotly-plot .gridlayer line { stroke: rgba(20,23,27,0.10) !important; }

/* ═══ Theme toggle ════════════════════════════════════════════════════ */
#theme-toggle-btn {
    background: transparent;
    border: 1px solid #2a2f37;
    border-radius: 0;
    padding: 4px 10px;
    cursor: pointer;
    font-size: 10px;
    font-family: var(--font-mono);
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--header-text);
    transition: border-color 150ms var(--ease-out),
                background 150ms var(--ease-out),
                transform 150ms var(--ease-out);
    display: flex;
    align-items: center;
    gap: 5px;
    user-select: none;
    white-space: nowrap;
}
#theme-toggle-btn:hover {
    border-color: var(--accent);
    background: rgba(255,255,255,0.05);
}
#theme-toggle-btn:active {
    transform: scale(0.95);
    transition-duration: 100ms;
}

/* ═══ Language toggle ═════════════════════════════════════════════════ */
#lang-toggle-btn {
    background: transparent;
    border: 1px solid #2a2f37;
    border-radius: 0;
    padding: 4px 10px;
    cursor: pointer;
    font-size: 10px;
    font-family: var(--font-mono);
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1.4;
    color: var(--header-text);
    transition: border-color 150ms var(--ease-out),
                transform 150ms var(--ease-out);
    display: flex;
    align-items: center;
    user-select: none;
}
#lang-toggle-btn:hover { border-color: var(--accent); }
#lang-toggle-btn:active {
    transform: scale(0.95);
    transition-duration: 100ms;
}

/* ═══ Responsive (mobile) ═════════════════════════════════════════════ */
@media (max-width: 768px) {
    body { font-size: 15px; }
    .sidebar-col {
        height: auto;
        border-right: none;
        border-bottom: 1px solid var(--border-card);
    }
    .main-col { height: auto; }
    .Select-control { font-size: 15px !important; min-height: 40px !important; }
    .Select-option { font-size: 15px !important; padding: 9px 10px !important; }
    .form-check-label { font-size: 15px !important; }
    .section-label { font-size: 10px; }
    .header-title { font-size: 11px; letter-spacing: 1.8px; }
    .app-header { padding: 0 14px; }
    .app-header .header-sub { display: none; }

    .home-hero { padding: 48px 24px 44px; }
    .section-header { padding: 44px 24px 22px; }
    .editorial-lead { font-size: 15px; }
    .home-hero__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .home-hero__logo { order: -1; }
    .home-hero__logo img { max-width: 200px; }
    .stats-strip__item {
        flex: 1 1 50%;
        padding: 16px 20px;
        border-right: 1px solid var(--border-card);
    }
    .stats-strip__item:nth-child(2n) { border-right: none; }
}

@media (min-width: 769px) and (max-width: 1099px) {
    .home-hero__grid { gap: 36px; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
    .home-hero__logo img { max-width: 240px; }
}

/* ═══ Responsive sidebar — hamburger + drawer ═════════════════════════ */
#sidebar-hamburger {
    display: none;
    background: transparent;
    border: 1px solid #2a2f37;
    border-radius: 0;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    color: var(--header-text);
    padding: 4px 10px;
    transition: border-color 150ms var(--ease-out),
                transform 150ms var(--ease-out);
    user-select: none;
    align-items: center;
}
#sidebar-hamburger:hover { border-color: var(--accent); }
#sidebar-hamburger:active {
    transform: scale(0.92);
    transition-duration: 100ms;
}

#sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 1090;
    cursor: pointer;
}
html.sidebar-open #sidebar-overlay { display: block; }

/* Plotly modebar */
.js-plotly-plot .plotly .modebar-btn[data-title="Download plot as a png"] path,
.js-plotly-plot .plotly .modebar-btn[data-title="Download plot"] path {
    fill: var(--accent) !important;
}
.js-plotly-plot .plotly .modebar { background: transparent !important; }
.js-plotly-plot .plotly .modebar-btn:hover path { fill: var(--accent-light) !important; }

@media (max-width: 991px) {
    #sidebar-hamburger { display: flex; }
    .sidebar-col {
        position: fixed !important;
        top: 56px;
        left: 0 !important;
        width: min(320px, 88vw) !important;
        max-width: none !important;
        flex: none !important;
        height: calc(100vh - 56px) !important;
        z-index: 1100;
        overflow-y: auto;
        transform: translateX(-110%);
        transition: transform 280ms var(--ease-drawer),
                    box-shadow 280ms var(--ease-drawer);
        box-shadow: none;
        padding-top: 12px !important;
    }
    html.sidebar-open .sidebar-col {
        transform: translateX(0);
        box-shadow: 4px 0 32px rgba(0,0,0,0.5);
    }
    .main-col {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding: 8px 12px !important;
    }
    .nav-link-item { pointer-events: auto; }
}

/* ═══ Empty states & errors ═══════════════════════════════════════════ */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 48px 32px;
    min-height: 280px;
    gap: 12px;
}
.empty-state__icon { font-size: 32px; line-height: 1; opacity: 0.6; }
.empty-state__title {
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}
.empty-state__body {
    font-family: var(--font-ui);
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.6;
    max-width: 420px;
    margin: 0;
}
.empty-state__hint {
    font-family: var(--font-ui);
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 4px;
}
.empty-state__file {
    font-family: var(--font-mono);
    font-size: 10.5px;
    color: var(--text-muted);
    background: var(--bg-input);
    border: 1px solid var(--border-input);
    border-radius: 0;
    padding: 4px 10px;
    margin-top: 4px;
    word-break: break-all;
    max-width: 520px;
}

.kpi-strip--empty {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 18px;
    font-family: var(--font-ui);
    font-size: 13px;
    color: var(--text-muted);
    background: var(--bg-card);
    border: 1px dashed var(--border-card);
    border-radius: 0;
}
.kpi-strip--empty__icon { font-size: 18px; opacity: 0.6; }

.chart-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px 16px;
    min-height: 22vh;
    gap: 6px;
}
.chart-empty__icon { font-size: 22px; opacity: 0.5; }
.chart-empty__text {
    font-family: var(--font-ui);
    font-size: 13px;
    color: var(--text-muted);
    max-width: 360px;
}

.delta-warning {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 14px;
    margin-bottom: 8px;
    background: color-mix(in oklch, var(--thermal-warm) 8%, var(--bg-card));
    border: 1px solid color-mix(in oklch, var(--thermal-warm) 30%, var(--border-card));
    border-radius: 0;
    font-family: var(--font-ui);
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}
.delta-warning__icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; }

/* ═══ Focus rings ═════════════════════════════════════════════════════ */
.editorial-cta:focus-visible,
.preset-chip:focus-visible,
.timeline-play:focus-visible,
.timeline-marker:focus-visible,
.nav-link-item:focus-visible,
#theme-toggle-btn:focus-visible,
#lang-toggle-btn:focus-visible,
#sidebar-hamburger:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ═══ Coming-soon page ════════════════════════════════════════════════ */
.coming-soon-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: calc(100vh - 56px);
    padding: 60px 32px;
    gap: 0;
    position: relative;
    overflow: hidden;
}
.coming-soon-page::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 50% 50% at 50% 30%,
            var(--accent-soft) 0%, transparent 70%);
    pointer-events: none;
}
.coming-soon__icon {
    position: relative;
    width: 88px;
    height: 88px;
    margin-bottom: 28px;
    opacity: 0;
    animation: fade-in-scale 0.8s var(--ease-out-expo) 0.1s forwards;
}
.coming-soon__icon svg { width: 100%; height: 100%; }
.coming-soon__icon::after {
    content: "";
    position: absolute;
    inset: -12px;
    border-radius: 50%;
    background: var(--accent-soft);
    z-index: -1;
}
.coming-soon__title {
    font-family: var(--font-ui);
    font-size: clamp(24px, 3.6vw, 32px);
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 8px;
    letter-spacing: -0.5px;
    opacity: 0;
    animation: fade-up 0.7s var(--ease-out-expo) 0.2s forwards;
}
.coming-soon__subtitle {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 24px;
    opacity: 0;
    animation: fade-up 0.7s var(--ease-out-expo) 0.3s forwards;
}
.coming-soon__desc {
    font-family: var(--font-ui);
    font-size: 14.5px;
    line-height: 1.75;
    color: var(--text-secondary);
    max-width: 520px;
    margin: 0 0 36px;
    opacity: 0;
    animation: fade-up 0.7s var(--ease-out-expo) 0.4s forwards;
}
.coming-soon__badge {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted);
    border: 1px solid var(--border-input);
    padding: 8px 20px;
    border-radius: 0;
    opacity: 0;
    animation: fade-up 0.7s var(--ease-out-expo) 0.5s forwards;
}
.coming-soon__divider {
    width: 64px;
    height: 2px;
    margin: 0 0 28px;
    background: linear-gradient(90deg,
        var(--thermal-cold) 0%,
        var(--thermal-warm) 50%,
        var(--thermal-hot) 100%);
    opacity: 0;
    animation: fade-up 0.7s var(--ease-out-expo) 0.35s forwards;
}

/* ═══ Heatwaves page — tab strip ══════════════════════════════════════ */
.hw-tabs {
    background: var(--bg-sidebar);
}
.hw-tab {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--border-input);
    border-radius: 0;
    padding: 7px 14px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 150ms var(--ease-out),
                background 150ms var(--ease-out),
                border-color 150ms var(--ease-out),
                transform 150ms var(--ease-out);
}
.hw-tab:hover {
    color: var(--text-primary);
    border-color: var(--text-muted);
    background: transparent;
}
.hw-tab:active {
    transform: scale(0.97);
    transition-duration: 100ms;
}
.hw-tab--active {
    color: var(--accent-light);
    background: var(--accent-soft);
    border-color: var(--accent);
}
.hw-tab--active::after { display: none; }

/* Tab icons (Lucide-style, via CSS mask — inherits currentColor) */
.tab-icon {
    display: inline-block;
    width: 15px;
    height: 15px;
    background-color: currentColor;
    vertical-align: -3px;
    margin-right: 7px;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}
.tab-icon--flame {
    -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M8.5%2014.5A2.5%202.5%200%200%200%2011%2012c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054%202-6%20.5%202.5%202%204.9%204%206.5%202%201.6%203%203.5%203%205.5a7%207%200%201%201-14%200c0-1.16.41-2.35%201-3a2.5%202.5%200%200%200%202.5%202.5z'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M8.5%2014.5A2.5%202.5%200%200%200%2011%2012c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054%202-6%20.5%202.5%202%204.9%204%206.5%202%201.6%203%203.5%203%205.5a7%207%200%201%201-14%200c0-1.16.41-2.35%201-3a2.5%202.5%200%200%200%202.5%202.5z'/%3E%3C/svg%3E");
}
.tab-icon--calendar {
    -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M8%202v4'/%3E%3Cpath%20d='M16%202v4'/%3E%3Crect%20width='18'%20height='18'%20x='3'%20y='4'%20rx='2'/%3E%3Cpath%20d='M3%2010h18'/%3E%3Ccircle%20cx='8'%20cy='14'%20r='.6'%20fill='black'/%3E%3Ccircle%20cx='12'%20cy='14'%20r='.6'%20fill='black'/%3E%3Ccircle%20cx='16'%20cy='14'%20r='.6'%20fill='black'/%3E%3Ccircle%20cx='8'%20cy='18'%20r='.6'%20fill='black'/%3E%3Ccircle%20cx='12'%20cy='18'%20r='.6'%20fill='black'/%3E%3Ccircle%20cx='16'%20cy='18'%20r='.6'%20fill='black'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M8%202v4'/%3E%3Cpath%20d='M16%202v4'/%3E%3Crect%20width='18'%20height='18'%20x='3'%20y='4'%20rx='2'/%3E%3Cpath%20d='M3%2010h18'/%3E%3Ccircle%20cx='8'%20cy='14'%20r='.6'%20fill='black'/%3E%3Ccircle%20cx='12'%20cy='14'%20r='.6'%20fill='black'/%3E%3Ccircle%20cx='16'%20cy='14'%20r='.6'%20fill='black'/%3E%3Ccircle%20cx='8'%20cy='18'%20r='.6'%20fill='black'/%3E%3Ccircle%20cx='12'%20cy='18'%20r='.6'%20fill='black'/%3E%3Ccircle%20cx='16'%20cy='18'%20r='.6'%20fill='black'/%3E%3C/svg%3E");
}
.tab-icon--bars {
    -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cline%20x1='18'%20x2='18'%20y1='20'%20y2='10'/%3E%3Cline%20x1='12'%20x2='12'%20y1='20'%20y2='4'/%3E%3Cline%20x1='6'%20x2='6'%20y1='20'%20y2='14'/%3E%3C/svg%3E");
            mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='black'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cline%20x1='18'%20x2='18'%20y1='20'%20y2='10'/%3E%3Cline%20x1='12'%20x2='12'%20y1='20'%20y2='4'/%3E%3Cline%20x1='6'%20x2='6'%20y1='20'%20y2='14'/%3E%3C/svg%3E");
}

/* ═══ Live tab — fetch status pill ════════════════════════════════════ */
.live-fetch-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 4px 12px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
    background: transparent;
    border-radius: 0;
    transition: opacity 200ms var(--ease-out),
                background 200ms var(--ease-out),
                color 200ms var(--ease-out);
    opacity: 1;
    white-space: nowrap;
}
.live-fetch-status:empty { padding: 0; min-height: 0; }
.live-fetch-status.is-loading {
    color: var(--accent-light);
    background: var(--accent-soft);
}
.live-fetch-status.is-loading::before {
    content: "↻";
    display: inline-block;
    font-size: 13px;
    animation: live-spin 900ms linear infinite;
}
@keyframes live-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
.live-fetch-status:not(.is-loading):not(:empty) {
    color: var(--status-ok);
    background: transparent;
}

/* ═══ Live page — console toolbar ═════════════════════════════════════ */
.live-title {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.3px;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.live-hint {
    font-size: 12.5px;
    color: var(--text-secondary);
    margin-bottom: 12px;
    max-width: 78ch;
    line-height: 1.5;
}
.live-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-bottom: 12px;
    padding: 10px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 0;
    box-shadow: none;
}
.live-tb-group {
    display: flex;
    align-items: center;
    gap: 8px;
}
.live-tb-label {
    font-family: var(--font-mono);
    font-size: 9px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    color: var(--text-muted);
    white-space: nowrap;
}
.live-tb-sep {
    width: 1px;
    align-self: stretch;
    min-height: 26px;
    background: var(--border-card);
}
.live-metric-dd {
    width: 196px;
    font-family: var(--font-ui);
}
.live-metric-dd .Select-control { min-height: 34px !important; }

/* Preset chips: Now / Today / Yesterday — square console buttons */
.live-chip {
    appearance: none;
    border: 1px solid var(--border-input);
    background: transparent;
    color: var(--text-secondary);
    border-radius: 0;
    padding: 7px 12px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    transition: background 150ms var(--ease-out),
                color 150ms var(--ease-out),
                border-color 150ms var(--ease-out),
                transform 100ms var(--ease-out);
}
.live-chip:hover {
    color: var(--text-primary);
    border-color: var(--text-muted);
    background: transparent;
}
.live-chip:active { transform: scale(0.96); }
.live-chip--accent {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
    font-weight: 600;
}
.live-chip--accent:hover {
    background: var(--accent-light);
    border-color: var(--accent-light);
    color: var(--accent-ink);
}

/* Hour control */
.live-hour-group { gap: 4px; }
.live-step {
    appearance: none;
    border: 1px solid var(--border-input);
    background: transparent;
    color: var(--text-secondary);
    border-radius: 0;
    width: 32px;
    height: 32px;
    font-size: 17px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 150ms var(--ease-out),
                border-color 150ms var(--ease-out),
                color 150ms var(--ease-out),
                transform 100ms var(--ease-out);
}
.live-step:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent-light);
}
.live-step:active { transform: scale(0.92); }
.live-hour-readout {
    min-width: 64px;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--accent-light);
    background: transparent;
    border: none;
    padding: 6px 8px;
    white-space: nowrap;
}

/* Anomaly tab — "Is it hot right now?" */
.live-anom-tab {
    appearance: none;
    border: 1px solid var(--accent);
    border-radius: 0;
    padding: 8px 16px;
    font-family: var(--font-mono);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--accent-light);
    cursor: pointer;
    white-space: nowrap;
    background: var(--accent-soft);
    box-shadow: none;
    transition: background 150ms var(--ease-out),
                color 150ms var(--ease-out),
                box-shadow 150ms var(--ease-out),
                transform 100ms var(--ease-out);
}
.live-anom-tab:hover { background: rgba(255,106,61,0.20); }
.live-anom-tab:active { transform: scale(0.97); }
.live-anom-tab.is-active {
    background: var(--accent);
    color: var(--accent-ink);
    box-shadow: 0 0 18px rgba(255,106,61,0.35);
}

/* DatePickerSingle */
.live-datepick .SingleDatePickerInput {
    background: var(--bg-input) !important;
    border: 1px solid var(--border-input) !important;
    border-radius: 0 !important;
    overflow: hidden;
}
.live-datepick .DateInput {
    background: transparent !important;
    width: 130px !important;
}
.live-datepick .DateInput_input {
    background: transparent !important;
    color: var(--text-primary) !important;
    font-family: var(--font-mono) !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    padding: 8px 10px !important;
    border: none !important;
}
.live-datepick .DateInput_input__focused {
    border-bottom: 2px solid var(--accent) !important;
}
.live-datepick .DateInput_fang { display: none !important; }
.SingleDatePicker_picker { z-index: 1000 !important; }
.CalendarDay__selected,
.CalendarDay__selected:active,
.CalendarDay__selected:hover {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
}
.CalendarDay__default:hover {
    background: var(--accent-soft) !important;
    border-color: var(--accent) !important;
}
.DayPickerKeyboardShortcuts_show__bottomRight::before {
    border-right-color: var(--accent) !important;
}

@media (max-width: 768px) {
    .live-tb-sep { display: none; }
    .live-metric-dd { width: 100%; }
}

/* ═══ Tables inside dash-card ═════════════════════════════════════════ */
.dash-card table th,
.dash-card table td {
    padding: 5px 8px;
    border-bottom: 1px solid var(--border-card);
    text-align: left;
}
.dash-card table th {
    font-family: var(--font-mono);
    font-size: 9.5px;
    color: var(--text-muted);
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.dash-card table td {
    font-family: var(--font-mono);
    font-size: 12.5px;
}

/* ═══════════════════════════════════════════════════════════════════════
   CONTROL ROOM — post-handoff appends (CLAUDE_CODE_INSTRUCTIONS §8.2, §9)
   ═══════════════════════════════════════════════════════════════════════ */

/* §8.2 Dropdown selected value renders too dim */
.dash-dropdown .Select-value-label,
.dash-dropdown .Select-value span,
.dash-dropdown .Select-control,
.VirtualizedSelectOption {
    color: var(--text-primary) !important;
    opacity: 1 !important;
}
.dash-dropdown [data-dash-is-loading="true"],
.dash-dropdown .Select.is-loading { opacity: 1 !important; }

/* §9.1 Segmented pickers */
.cr-segment { display: flex; gap: 1px; }
.cr-segment .form-check { padding: 0; margin: 0; flex: 1; }
.cr-segment__input { position: absolute; opacity: 0; pointer-events: none; }
.cr-segment__label {
    display: block; width: 100%; text-align: center; cursor: pointer;
    padding: 7px 0; font-size: 11px !important; font-weight: 600;
    background: var(--bg-input); color: var(--text-secondary) !important;
    border: none; border-radius: 0; text-transform: uppercase;
    font-family: var(--font-mono) !important; letter-spacing: 0.5px;
    transition: background 150ms, color 150ms;
}
.cr-segment__label:hover { color: var(--text-primary) !important; }
.cr-segment__label--on {
    background: var(--accent); color: var(--accent-ink) !important;
}

/* §9.2 List selectors with left-border active state */
.cr-list { display: flex; flex-direction: column; gap: 1px; }
.cr-list .form-check { padding: 0; margin: 0; }
.cr-list__row {
    display: flex; justify-content: space-between; width: 100%; cursor: pointer;
    padding: 7px 10px; font-size: 12.5px !important;
    color: var(--text-secondary) !important;
    border-left: 2px solid transparent; border-radius: 0;
    transition: background 150ms, color 150ms, border-color 150ms;
}
.cr-list__row:hover { background: var(--bg-card-hover); }
.cr-list__row--on {
    background: var(--bg-input); color: var(--text-primary) !important;
    border-left-color: var(--accent);
}
.cr-list__chip { font-family: var(--font-mono); font-size: 10px;
                 color: var(--text-muted); }
.cr-list__row--on .cr-list__chip { color: var(--accent-light); }

/* §9.3 Decade histogram picker */
.cr-decades { display: flex; gap: 3px; align-items: flex-end; height: 26px; }
.cr-decades__bar {
    flex: 1; background: var(--border-input); border: none; padding: 0;
    cursor: pointer; border-radius: 0; transition: background 150ms;
}
.cr-decades__bar:hover { background: var(--text-muted); }
.cr-decades__bar--on { background: var(--accent); }

/* ── Fix: generic .form-check rules above outrank the cr-* classes ────────
   Checked segment labels were rendered accent-light-on-accent (unreadable).
   Repeat the cr-* styling at higher specificity. */
.cr-segment .form-check-label {
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    color: var(--text-secondary) !important;
}
.cr-segment .form-check-label:hover { color: var(--text-primary) !important; }
.cr-segment .form-check-input:checked ~ .form-check-label,
.cr-segment .form-check-input:checked ~ .form-check-label:hover {
    background: var(--accent);
    color: var(--accent-ink) !important;
}
.cr-list .form-check-label {
    font-family: var(--font-ui) !important;
    font-size: 12.5px !important;
    color: var(--text-secondary) !important;
}
.cr-list .form-check-input:checked ~ .form-check-label,
.cr-list .form-check-input:checked ~ .form-check-label:hover {
    color: var(--text-primary) !important;
    background: var(--bg-input);
    border-left-color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════════════════
   DASH 4 DESIGN TOKENS — the dcc components (Dropdown, Slider, Input …)
   in Dash 4 are styled by --Dash-* custom properties with light/purple
   defaults injected on :root. Remap them to the Control-Room palette;
   html[data-theme=…] outranks the library's :root rule, and the var()
   references resolve per-theme automatically.
   ═══════════════════════════════════════════════════════════════════════ */
html[data-theme="dark"], html[data-theme="light"] {
    /* surfaces */
    --Dash-Fill-Inverse-Strong:     var(--bg-input);       /* control/menu bg */
    --Dash-Fill-Interactive-Strong: var(--accent);         /* was purple #7f4bc4 */
    --Dash-Fill-Interactive-Weak:   var(--accent-soft);
    --Dash-Fill-Primary-Hover:      var(--bg-card-hover);
    --Dash-Fill-Primary-Active:     var(--accent-soft);
    --Dash-Fill-Disabled:           rgba(140, 150, 160, 0.15);
    /* text */
    --Dash-Text-Strong:             var(--text-primary);
    --Dash-Text-Primary:            var(--text-primary);
    --Dash-Text-Weak:               var(--text-secondary);
    --Dash-Text-Disabled:           var(--text-muted);
    /* strokes / shadows */
    --Dash-Stroke-Strong:           var(--border-input);
    --Dash-Stroke-Weak:             var(--border-card);
    --Dash-Shading-Strong:          rgba(0, 0, 0, 0.45);
    --Dash-Shading-Weak:            rgba(0, 0, 0, 0.25);
}

/* Square corners + hairline borders for the Dash 4 component chrome */
.dash-dropdown-trigger,
.dash-dropdown-content,
.dash-dropdown-search,
.dash-input-container,
.dash-slider-tooltip {
    border-radius: 0 !important;
}
.dash-dropdown-trigger,
.dash-input-container {
    border: 1px solid var(--border-input) !important;
    background: var(--bg-input) !important;
    color: var(--text-primary) !important;
}
.dash-dropdown-value { color: var(--text-primary) !important; }
.dash-dropdown-value.dash-dropdown-placeholder { color: var(--text-muted) !important; }
.dash-dropdown-content {
    background: var(--bg-card-hover) !important;
    border: 1px solid var(--border-input) !important;
}
.dash-dropdown-option { color: var(--text-primary) !important; }
.dash-dropdown-option:hover { background: var(--accent-soft) !important; }
.dash-dropdown-option[aria-selected="true"] {
    background: var(--accent) !important;
    color: var(--accent-ink) !important;
}
.dash-slider-tooltip {
    background: var(--header-bg) !important;
    color: var(--header-text) !important;
    border: 1px solid var(--border-input) !important;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
}
.dash-slider-mark {
    color: var(--text-muted) !important;
    font-family: var(--font-mono) !important;
    font-size: 9.5px !important;
}
.dash-slider-range { background: var(--accent) !important; }
.dash-slider-track { background: var(--border-input) !important; }
.dash-slider-thumb {
    background: var(--bg-body) !important;
    border-color: var(--accent) !important;
}
.dash-input-element {
    color: var(--text-primary) !important;
    background: transparent !important;
    font-family: var(--font-mono) !important;
}

/* ═══ Methodology — technical documentation layout ════════════════════ */
.method-wrap {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 40px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 28px 24px 80px;
    align-items: start;
}
/* Sticky sidebar table of contents */
.method-toc {
    position: sticky;
    top: 84px;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-left: 1px solid var(--border-card);
    padding-left: 0;
}
.method-toc-h {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 0 0 12px 20px;
}
.method-toc-item {
    display: flex;
    gap: 10px;
    align-items: baseline;
    padding: 6px 0 6px 20px;
    margin-left: -1px;
    border-left: 2px solid transparent;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.15s, border-color 0.15s;
}
.method-toc-item:hover,
.method-toc-item.is-active {
    color: var(--text);
    border-left-color: var(--accent);
}
.method-toc-item.is-active .method-toc-num { color: var(--accent); }
.method-toc-num { color: var(--text-muted); font-weight: 600; min-width: 18px; }
.method-toc-label { line-height: 1.35; }

/* Main column */
.method-main { min-width: 0; }
.method-eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 22px;
}
.method-eyebrow-rule {
    width: 34px;
    height: 1px;
    background: var(--accent);
    display: inline-block;
}
.method-title {
    font-family: var(--font-ui);
    font-size: 44px;
    font-weight: 700;
    line-height: 1.05;
    margin: 0 0 18px;
    color: var(--text);
}
.method-lede {
    font-size: 16px;
    line-height: 1.7;
    color: var(--text-secondary);
    margin: 0 0 20px;
    max-width: 70ch;
}
.method-section {
    padding-top: 26px;
    margin-top: 26px;
    border-top: 1px solid var(--border-card);
    scroll-margin-top: 84px;   /* clear the fixed app header on anchor jump */
}
.method-sec-head {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 14px;
}
.method-sec-num {
    font-family: var(--font-mono);
    font-size: 15px;
    font-weight: 700;
    color: var(--accent);
    padding-top: 3px;
}
.method-sec-title {
    font-family: var(--font-ui);
    font-size: 26px;
    font-weight: 700;
    margin: 0;
    color: var(--text);
}
.method-group-intro {
    font-size: 15px;
    line-height: 1.7;
    color: var(--text-secondary);
    margin: 0 0 16px;
    max-width: 72ch;
}
.method-footer {
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-muted);
    font-style: italic;
    margin-top: 30px;
    padding-top: 18px;
    border-top: 1px solid var(--border-card);
}
/* Reference list */
.method-ref {
    display: flex;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid var(--border-card);
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary);
}
.method-ref:last-child { border-bottom: none; }
.method-ref-num {
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--accent);
    min-width: 30px;
}
.method-ref-link {
    font-family: var(--font-mono);
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.method-ref-link:hover { border-bottom-color: var(--accent); }

/* Responsive — collapse the sidebar above the content on narrow screens */
@media (max-width: 900px) {
    .method-wrap { grid-template-columns: 1fr; gap: 8px; }
    .method-toc {
        position: static;
        flex-flow: row wrap;
        border-left: none;
        border-bottom: 1px solid var(--border-card);
        padding-bottom: 12px;
        margin-bottom: 10px;
    }
    .method-toc-h { width: 100%; padding-left: 0; }
    .method-toc-item { border-left: none; padding: 4px 10px 4px 0; }
    .method-title { font-size: 34px; }
}