/* ═══════════════════════════════════════════════════════════════════════
   Romania Heat Atlas
   Scientific atlas / field-report palette · Newsreader + Roboto Condensed
   Mineral paper · Thermal scale reserved for evidence · Dark / Light toggle
   ═══════════════════════════════════════════════════════════════════════ */

/* Fonts loaded via <link rel="preload"> in app.py index_string.
   @import removed to eliminate render-blocking requests. */

/* ═══════════════════════════════════════════════════════════════════════
   Motion system — spring-physics inspired
   ═══════════════════════════════════════════════════════════════════════ */
@keyframes fade-up {
    from { opacity: 0; transform: translateY(18px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes header-shimmer {
    0%   { background-position:   0% 0; }
    100% { background-position: 200% 0; }
}
@keyframes logo-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
}
@keyframes fade-in-scale {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}

/* Respect users who prefer reduced motion:
   Keep opacity and color transitions for comprehension.
   Remove transform-based movement. */
@media (prefers-reduced-motion: reduce) {
    /* Kill keyframe animations — keeps CSS transitions for
       opacity, color, background, border-color alive */
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
    }
    /* Strip transforms on interactive / scroll-reveal elements */
    .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 — Emil Kowalski's strong curves */
: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);  /* iOS-like drawer curve */
}

/* ── Light theme — parchment / atlas plate ─────────────────────────── */
:root {
    /* Surfaces */
    --bg-body:       oklch(0.925 0.018 82);
    --bg-sidebar:    oklch(0.963 0.013 82);
    --bg-card:       oklch(0.978 0.010 82);
    --bg-card-hover: oklch(0.988 0.008 82);
    --bg-input:      oklch(0.940 0.015 82);
    --border-card:   oklch(0.806 0.025 78);
    --border-input:  oklch(0.746 0.029 76);

    /* Semantic surfaces — keep interface colour separate from data colour */
    --surface-document:  var(--bg-body);
    --surface-instrument:var(--bg-sidebar);
    --surface-raised:    var(--bg-card);
    --surface-control:   oklch(0.965 0.012 82);
    --line-strong:       oklch(0.585 0.030 72);

    /* Ink */
    --text-primary:  oklch(0.245 0.023 62);
    --text-secondary:oklch(0.405 0.025 67);
    --text-muted:    oklch(0.470 0.024 70);
    --text:           var(--text-primary);

    /* Accent — atlas rust */
    --accent:        oklch(0.455 0.145 39);
    --accent-light:  oklch(0.600 0.145 42);
    --accent-soft:   oklch(0.455 0.145 39 / 0.10);

    /* Cool counterpoint — petrol */
    --blue:          oklch(0.440 0.068 223);
    --blue-soft:     oklch(0.440 0.068 223 / 0.10);

    /* Interface states; scientific ramps below retain their own semantics */
    --state-info:        oklch(0.440 0.068 223);
    --state-info-soft:   oklch(0.440 0.068 223 / 0.09);
    --state-warning:     oklch(0.590 0.110 71);
    --state-warning-soft:oklch(0.760 0.080 78 / 0.18);
    --state-success:     oklch(0.455 0.075 151);

    /* Thermal scale (museum-quality 5-stop heat gradient) */
    --thermal-cold:    oklch(0.440 0.068 223);
    --thermal-mild:    oklch(0.775 0.070 78);
    --thermal-warm:    oklch(0.690 0.105 66);
    --thermal-hot:     oklch(0.515 0.160 40);
    --thermal-extreme: oklch(0.365 0.125 33);

    /* Chrome */
    --header-bg:     var(--bg-sidebar);
    --header-text:   var(--text-primary);
    --header-sub:    var(--text-secondary);

    /* FX */
    --shadow:        0 1px 3px rgba(60,40,20,0.08);
    --shadow-lg:     0 8px 28px rgba(60,40,20,0.14);
    --radius:        6px;
    --radius-sm:     4px;
    --scrollbar-bg:  #ece4d2;
    --scrollbar-thumb:#c4b89e;

    /* Fonts */
    --font-display: 'Newsreader', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
    --font-ui:      'Roboto Condensed', 'Arial Narrow', Arial, sans-serif;
}

/* ── Dark theme — atlas twilight ──────────────────────────────────── */
[data-theme="dark"] {
    --bg-body:       oklch(0.185 0.014 62);
    --bg-sidebar:    oklch(0.225 0.015 62);
    --bg-card:       oklch(0.255 0.017 62);
    --bg-card-hover: oklch(0.290 0.018 62);
    --bg-input:      oklch(0.290 0.018 62);
    --border-card:   oklch(0.355 0.018 64);
    --border-input:  oklch(0.425 0.020 65);
    --surface-document:  var(--bg-body);
    --surface-instrument:var(--bg-sidebar);
    --surface-raised:    var(--bg-card);
    --surface-control:   oklch(0.275 0.017 62);
    --line-strong:       oklch(0.555 0.025 70);
    --text-primary:  oklch(0.910 0.018 82);
    --text-secondary:oklch(0.730 0.020 78);
    --text-muted:    oklch(0.610 0.020 75);
    --text:           var(--text-primary);
    --accent:        oklch(0.650 0.145 43);
    --accent-light:  oklch(0.750 0.130 49);
    --accent-soft:   oklch(0.650 0.145 43 / 0.15);
    --blue:          oklch(0.660 0.070 220);
    --blue-soft:     oklch(0.660 0.070 220 / 0.12);
    --state-info:        oklch(0.660 0.070 220);
    --state-info-soft:   oklch(0.660 0.070 220 / 0.11);
    --state-warning:     oklch(0.735 0.105 74);
    --state-warning-soft:oklch(0.735 0.105 74 / 0.12);
    --state-success:     oklch(0.650 0.080 151);
    --thermal-cold:    oklch(0.660 0.070 220);
    --thermal-mild:    oklch(0.775 0.070 78);
    --thermal-warm:    oklch(0.730 0.110 66);
    --thermal-hot:     oklch(0.650 0.145 43);
    --thermal-extreme: oklch(0.500 0.135 34);
    --header-bg:     var(--bg-sidebar);
    --header-text:   var(--text-primary);
    --header-sub:    var(--text-secondary);
    --shadow:        0 1px 4px rgba(0,0,0,0.45);
    --shadow-lg:     0 12px 34px rgba(0,0,0,0.55);
    --scrollbar-bg:  #14110c;
    --scrollbar-thumb:#4a4133;
}

/* ── Skip link (a11y: WCAG 2.4.1) ────────────────────────────────── */
.skip-link {
    position: absolute;
    top: 0;
    left: 16px;
    z-index: 9999;
    padding: 8px 16px;
    background: var(--header-bg, #1f1810);
    color: var(--header-text, #f3ecd9);
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 600;
    border-radius: 0 0 4px 4px;
    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: 15px;
    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: 5px; }
::-webkit-scrollbar-track { background: var(--scrollbar-bg); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }
::-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 ───────────────────────────────────────────────────────── */
.app-header {
    background: var(--header-bg);
    padding: 0 28px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-card);
    position: relative;
}
/* Thermal hairline accent under header — slowly shimmering */
.app-header::after {
    content: none;
}
.header-title {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 520;
    letter-spacing: -0.2px;
    color: var(--header-text);
    text-transform: none;
}

/* Small mark next to the wordmark in the header */
.header-mark {
    height: 25px;
    width: 25px;
    object-fit: contain;
    flex-shrink: 0;
    filter: saturate(0.72) contrast(1.05);
}
.app-header .header-sub {
    font-size: 11px;
    color: var(--header-sub);
    letter-spacing: 0.3px;
    margin-left: 16px;
    font-weight: 300;
}

/* ── Navigation ───────────────────────────────────────────────────── */
.header-nav {
    display: flex;
    align-items: center;
    gap: 0;
}
.nav-link-item {
    color: var(--header-sub);
    text-decoration: none !important;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.75px;
    padding: 8px 11px;
    border-radius: 0;
    transition: color 0.2s var(--ease-out),
                background 0.2s var(--ease-out);
    text-transform: uppercase;
    font-family: var(--font-ui);
    position: relative;
}
.nav-link-item:hover {
    color: var(--header-text);
    background: transparent;
    text-decoration: none !important;
}
.nav-link-item:active {
    opacity: 0.7;
    transition-duration: 80ms;
}
.nav-link-item.active {
    color: var(--header-text);
}
.nav-link-item.active::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 11px; right: 11px;
    height: 1px;
    background: var(--accent);
    border-radius: 0;
}

/* ── Home Page — editorial atlas hero ─────────────────────────────── */
.home-hero {
    background: var(--bg-sidebar);
    border-bottom: 1px solid var(--border-card);
    padding: 88px 72px 72px;
    position: relative;
    overflow: hidden;
}

/* Subtle heat-gradient watermark in the hero */
.home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 90% at 95% -10%,
            rgba(184, 74, 31, 0.10) 0%, transparent 65%),
        radial-gradient(ellipse 50% 70% at -5% 110%,
            rgba(45, 90, 110, 0.08) 0%, transparent 60%);
    pointer-events: none;
}

/* Thermal hairline at the bottom of the hero */
.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.55;
}

/* Hero split layout — text left, logo right */
.home-hero__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
    max-width: 1320px;
    margin: 0 auto;
}
.home-hero__text   { min-width: 0; }

/* Staggered entrance — accelerating delay curve for natural cadence */
.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.85s var(--ease-out-expo) forwards;
}
.home-hero .editorial-eyebrow   { animation-delay: 0.06s; }
.home-hero .editorial-h1        { animation-delay: 0.14s;
                                  animation-duration: 1s; }
.home-hero .editorial-lead      { animation-delay: 0.28s; }
.home-hero .editorial-cta-row   { animation-delay: 0.42s; }
.home-hero__logo                { animation-delay: 0.18s;
                                  animation-duration: 1.1s;
                                  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: 360px;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    position: relative;
    z-index: 1;
    /* Lift the emblem with a soft warm glow + crisp drop shadow */
    filter:
        drop-shadow(0 0 60px rgba(184, 74, 31, 0.22))
        drop-shadow(0 18px 36px rgba(60, 40, 20, 0.18));
    animation: logo-float 9s var(--ease-in-out) 1;
}
/* Soft thermal halo behind the logo */
.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(184, 74, 31, 0.14) 0%,
        rgba(184, 74, 31, 0.06) 35%,
        transparent 70%);
    pointer-events: none;
    z-index: 0;
}
[data-theme="dark"] .home-hero__logo img {
    filter:
        drop-shadow(0 0 70px rgba(224, 114, 63, 0.30))
        drop-shadow(0 18px 36px rgba(0, 0, 0, 0.55));
}
[data-theme="dark"] .home-hero__logo::before {
    background: radial-gradient(circle at 50% 50%,
        rgba(224, 114, 63, 0.18) 0%,
        rgba(224, 114, 63, 0.06) 40%,
        transparent 70%);
}

/* Editorial typography */
.editorial-eyebrow {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.4px;
    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-display);
    font-variation-settings: "opsz" 144, "SOFT" 50;
    font-size: clamp(40px, 5.4vw, 72px);
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: -1.2px;
    color: var(--text-primary);
    margin: 0 0 28px;
    max-width: 14ch;
}
.editorial-h1 em {
    font-style: italic;
    font-variation-settings: "opsz" 144, "SOFT" 100;
    color: var(--accent);
}

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

.editorial-cta-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
}
.editorial-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 22px;
    font-family: var(--font-ui);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 2px;
    transition: transform 200ms var(--ease-out),
                background 200ms var(--ease-out),
                border-color 200ms var(--ease-out),
                box-shadow 200ms var(--ease-out);
    cursor: pointer;
}
.editorial-cta.primary {
    background: var(--accent);
    color: #faf4e3;
    border: 1px solid var(--accent);
}
.editorial-cta.primary:hover {
    background: var(--thermal-extreme);
    border-color: var(--thermal-extreme);
}
@media (hover: hover) and (pointer: fine) {
    .editorial-cta.primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(120, 31, 15, 0.25);
    }
}
.editorial-cta.primary:active {
    transform: translateY(0) scale(0.97);
    box-shadow: 0 2px 6px rgba(120, 31, 15, 0.20);
    transition-duration: 150ms;
}
.editorial-cta.ghost {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-card);
}
.editorial-cta.ghost:hover {
    border-color: var(--text-primary);
    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 below hero */
.stats-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    background: var(--bg-card);
    border-top: 1px solid var(--border-card);
    border-bottom: 1px solid var(--border-card);
}
.stats-strip__item {
    flex: 1 1 0;
    min-width: 180px;
    padding: 22px 28px;
    border-right: 1px solid var(--border-card);
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* Reveal on scroll — controlled by .is-visible state */
    opacity: 0;
    transform: translateY(16px) scale(0.97);
    transition: opacity 0.6s var(--ease-out-expo),
                transform 0.6s var(--ease-out);
}
.stats-strip__item.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.stats-strip__item:last-child { border-right: none; }
.stats-strip__value {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 144;
    font-size: 26px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1;
    letter-spacing: -0.3px;
}
/* Force every descendant of .stats-strip__value to share the SAME
   font + opsz axis. Without this, "1940 – " (plain text) renders at
   opsz=144 while the inner <span class="counter">2024</span> falls
   back to default opsz (~14), making them look like two different
   fonts — exactly the visual glitch the user flagged in screenshots.
   The universal-selector rule is cheap (stats-strip has ~5 values). */
.stats-strip__value,
.stats-strip__value * {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 144;
    font-weight: 500;
    letter-spacing: -0.3px;
}
.stats-strip__label {
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Section header (above the module grid) */
.section-header {
    padding: 64px 72px 28px;
    border-bottom: 1px solid var(--border-card);
}
.section-header__eyebrow {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 12px;
}
.section-header__title {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 144, "SOFT" 30;
    font-size: 34px;
    font-weight: 400;
    color: var(--text-primary);
    margin: 0 0 14px;
    letter-spacing: -0.5px;
    line-height: 1.15;
}
.section-header__desc {
    font-family: var(--font-ui);
    font-size: 15px;
    line-height: 1.65;
    color: var(--text-secondary);
    max-width: 62ch;
    margin: 0;
}

/* Chapter-style module card */
.chapter-card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 4px;
    padding: 32px 28px 28px;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    transition: transform 0.35s var(--ease-out),
                box-shadow 0.35s var(--ease-out),
                border-color 0.25s var(--ease-out),
                background 0.25s var(--ease-out),
                opacity 0.7s var(--ease-out-expo);
    /* Reveal on scroll */
    opacity: 0;
    transform: translateY(24px) scale(0.98);
}
.chapter-card.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}
/* Wrapping link inherits opacity transition */
.chapter-card-link, a:has(> .chapter-card) {
    display: flex;
    height: 100%;
}
/* Top thermal stripe */
.chapter-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--chapter-accent, var(--accent));
    opacity: 0.85;
}
a:hover > .chapter-card,
.chapter-card.is-hover {
    border-color: var(--chapter-accent, var(--accent));
    background: var(--bg-card-hover);
}
@media (hover: hover) and (pointer: fine) {
    a:hover > .chapter-card,
    .chapter-card.is-hover {
        transform: translateY(-5px) scale(1.008);
        box-shadow: var(--shadow-lg);
    }
    a:active > .chapter-card {
        transform: translateY(-1px) scale(0.99);
        box-shadow: var(--shadow);
        transition-duration: 100ms;
    }
}
.chapter-card.is-disabled {
    opacity: 0.55;
}
.chapter-card.is-disabled::before { opacity: 0.4; }

.chapter-card__number {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 144;
    font-size: 13px;
    font-weight: 500;
    font-style: italic;
    letter-spacing: 1.5px;
    color: var(--text-muted);
    text-transform: uppercase;
    margin: 0 0 16px;
}
.chapter-card__title {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 144, "SOFT" 30;
    font-size: 26px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.1;
    letter-spacing: -0.4px;
    margin: 0 0 6px;
}
.chapter-card__subtitle {
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--chapter-accent, var(--accent));
    margin: 0 0 18px;
}
.chapter-card__desc {
    font-family: var(--font-ui);
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-secondary);
    margin: 0;
    flex: 1;
}
.chapter-card__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--border-card);
    gap: 12px;
}
.chapter-card__tag {
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
}
.chapter-card__cta {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.6px;
    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-ui);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--text-muted);
    border: 1px solid var(--border-card);
    padding: 4px 10px;
    border-radius: 2px;
}

/* Legacy classes kept for backward compat */
.home-hero-title {
    font-size: 34px;
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 12px;
    letter-spacing: 0.5px;
}
.home-hero-sub {
    font-size: 14px;
    color: var(--text-secondary);
    max-width: 700px;
    line-height: 1.7;
    margin: 0;
}
.home-tag {
    font-size: 12px;
    color: var(--text-muted);
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 20px;
    padding: 4px 14px;
}

/* Module cards */
.home-module-card {
    transition: box-shadow 200ms var(--ease-out),
                transform 200ms var(--ease-out),
                border-color 200ms var(--ease-out);
}
a:hover > .home-module-card {
    box-shadow: 0 8px 32px rgba(0,0,0,0.14);
}
@media (hover: hover) and (pointer: fine) {
    a:hover > .home-module-card {
        transform: translateY(-4px);
    }
    a:active > .home-module-card {
        transform: translateY(-1px) scale(0.98);
        transition-duration: 100ms;
    }
}

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

/* ═══════════════════════════════════════════════════════════════════════
   Dashboard polish — sidebar sections, KPI strip, floating colorbar,
   skeleton loading
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── Sidebar sections — grouped controls with subtle dividers ────── */
.sidebar-section {
    padding: 10px 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-ui);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.8px;
    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 above the map ─────────────────────────────────────── */
.kpi-strip {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.kpi-strip__item {
    flex: 1 1 0;
    min-width: 140px;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-top: 2px solid var(--kpi-accent, var(--accent));
    border-radius: 4px;
    padding: 10px 14px 12px;
    transition: background 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.kpi-strip__label {
    font-family: var(--font-ui);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 4px;
}
.kpi-strip__value {
    font-family: var(--font-display);
    font-variation-settings: "opsz" 144;
    font-size: 22px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.1;
    letter-spacing: -0.3px;
}
.kpi-strip__unit {
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    margin-left: 4px;
    letter-spacing: 0;
}
.kpi-strip__context {
    font-family: var(--font-ui);
    font-size: 10px;
    color: var(--text-muted);
    margin-top: 2px;
    letter-spacing: 0.2px;
}

/* Per-card accents — set inline with --kpi-accent variable */
.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: rgba(250, 244, 227, 0.92);   /* matches --bg-card with alpha */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--border-card);
    border-radius: 4px;
    padding: 8px 12px 10px;
    box-shadow: var(--shadow-lg);
    max-width: 320px;
    min-width: 220px;
    pointer-events: auto;
}
[data-theme="dark"] .colorbar-float {
    background: rgba(37, 31, 24, 0.88);
}
.colorbar-float__title {
    font-family: var(--font-ui);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin: 0 0 6px;
}
.colorbar-float img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 2px;
}

/* Hide the old sidebar colorbar slot when floating version is active */
.colorbar-wrap.is-hidden { display: none; }

/* ─── Skeleton loading shimmer ─────────────────────────────────────── */
@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: 4px;
}
.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: 6px;
    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-display);
    font-style: italic;
    font-variation-settings: "opsz" 144;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    margin: 0 4px 4px;
    letter-spacing: 0.2px;
}
.preset-chip {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-top: 2px solid var(--preset-accent, var(--accent));
    border-radius: 4px;
    padding: 9px 11px 10px;
    cursor: pointer;
    transition: transform 200ms var(--ease-out),
                background 150ms var(--ease-out),
                border-color 150ms var(--ease-out),
                box-shadow 200ms 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));
}
@media (hover: hover) and (pointer: fine) {
    .preset-chip:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(60, 40, 20, 0.10);
    }
}
.preset-chip:active {
    transform: translateY(0) scale(0.97);
    box-shadow: none;
    transition-duration: 150ms;
}
.preset-chip__title {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.25;
    letter-spacing: 0.1px;
}
.preset-chip__meta {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--preset-accent, var(--accent));
    line-height: 1.3;
}

/* ─── Decade timeline — play button + clickable markers ───────────── */
.timeline-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: 4px;
    padding: 10px 16px;
    margin-bottom: 8px;
    position: relative;
}

.timeline-play {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--accent);
    color: #faf4e3;
    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),
                border-color 150ms var(--ease-out),
                box-shadow 200ms var(--ease-out);
    padding: 0;
    box-shadow: 0 2px 6px rgba(184, 74, 31, 0.20);
}
.timeline-play:hover {
    background: var(--thermal-extreme);
    border-color: var(--thermal-extreme);
}
@media (hover: hover) and (pointer: fine) {
    .timeline-play:hover {
        transform: scale(1.06);
        box-shadow: 0 4px 12px rgba(120, 31, 15, 0.30);
    }
}
.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-ui);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--text-muted);
    line-height: 1.3;
}
.timeline-label__value {
    display: block;
    font-family: var(--font-display);
    font-variation-settings: "opsz" 144;
    font-size: 18px;
    font-weight: 500;
    color: var(--text-primary);
    letter-spacing: -0.2px;
    text-transform: none;
    line-height: 1.05;
    margin-top: 2px;
}

.timeline-track {
    flex: 1;
    position: relative;
    height: 36px;
    display: flex;
    align-items: center;
    padding: 0 6px;
}
/* Base track — thin line behind markers */
.timeline-track__line {
    position: absolute;
    left: 6px; right: 6px;
    top: 50%;
    height: 2px;
    background: var(--border-card);
    transform: translateY(-50%);
    border-radius: 1px;
}
/* Progress overlay — thermal gradient up to current position */
.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%);
    border-radius: 1px;
    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-card);
    cursor: pointer;
    transition: transform 150ms var(--ease-out),
                background 150ms var(--ease-out),
                border-color 150ms var(--ease-out);
    position: relative;
    padding: 0;
}
/* Invisible touch-target expansion (44px minimum per WCAG 2.5.8) */
.timeline-marker::after {
    content: "";
    position: absolute;
    inset: -16px;  /* 12px dot + 16px padding each side = 44px */
}
.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(--thermal-extreme);
    border-color: var(--thermal-extreme);
    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);
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 3px;
    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 translation callout ──────────────────────────────────── */
.health-callout {
    background: color-mix(in oklch, var(--health-accent, var(--thermal-warm)) 8%, var(--bg-card));
    border: 1px solid color-mix(in oklch, var(--health-accent, var(--thermal-warm)) 20%, var(--border-card));
    border-radius: 4px;
    padding: 12px 14px;
    margin-top: 8px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.health-callout__icon {
    font-size: 18px;
    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-ui);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    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;
}

/* Severity variants */
.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); }

/* Style the Dash loading spinner to feel less abrupt */
._dash-loading {
    color: var(--accent) !important;
}
.map-wrap ._dash-loading-callback {
    background: rgba(250, 244, 227, 0.55) !important;
    backdrop-filter: blur(3px);
}
[data-theme="dark"] .map-wrap ._dash-loading-callback {
    background: rgba(20, 17, 12, 0.55) !important;
}
.dash-card,
.dash-card-accent,
.stats-panel,
.chart-wrap,
.map-wrap {
    border-radius: 4px;
}
.dash-card-accent {
    border-top: 2px solid var(--accent);
}
.section-label {
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 8px;
}

/* ── Theme Toggle ─────────────────────────────────────────────────── */
#theme-toggle-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 14px;
    padding: 3px 12px;
    cursor: pointer;
    font-size: 12px;
    font-family: var(--font-ui);
    font-weight: 500;
    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;
    letter-spacing: 0.3px;
}
#theme-toggle-btn:hover {
    border-color: var(--accent);
    background: rgba(255,255,255,0.06);
}
#theme-toggle-btn:active {
    transform: scale(0.95);
    transition-duration: 100ms;
}

/* ── Language Toggle ──────────────────────────────────────────────── */
#lang-toggle-btn {
    background: transparent;
    border: none;
    padding: 2px 8px;
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    color: var(--header-text);
    transition: transform 150ms var(--ease-out);
    display: flex;
    align-items: center;
    user-select: none;
}
@media (hover: hover) and (pointer: fine) {
    #lang-toggle-btn:hover {
        transform: scale(1.15);
    }
}
#lang-toggle-btn:active {
    transform: scale(0.90);
    transition-duration: 100ms;
}

/* ── Sidebar ──────────────────────────────────────────────────────── */
.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 Area ────────────────────────────────────────────────────── */
.main-col {
    padding: 8px 12px 8px 8px !important;
    height: calc(100vh - 56px);
    overflow-y: auto;
    background: var(--bg-body);
    transition: background 200ms var(--ease-out);
}

/* ── Cards ─────────────────────────────────────────────────────────── */
.dash-card {
    background: var(--surface-raised);
    border: 1px solid var(--border-card);
    border-radius: 2px;
    padding: 10px 12px;
    margin-bottom: 7px;
    box-shadow: none;
    transition: background 200ms var(--ease-out), border-color 200ms var(--ease-out);
}

/* Accent card (variable description) */
.dash-card-accent {
    background: var(--surface-raised);
    border: 1px solid var(--border-card);
    border-top: 1px solid var(--border-card);
    border-radius: 2px;
    padding: 10px 12px;
    margin-bottom: 7px;
    box-shadow: inset 3px 0 0 var(--accent);
    transition: background 200ms var(--ease-out), border-color 200ms var(--ease-out);
}

/* ── Section Labels ───────────────────────────────────────────────── */
.section-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-muted);
    margin-bottom: 6px;
}

/* ── Dropdown Overrides ───────────────────────────────────────────── */
/* react-select ships its own CSS; !important is required to override. */
/* Dropdowns always render on a light surface (both themes).           */
.Select-control {
    background-color: var(--surface-control) !important;
    border-color: var(--border-input) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--text-primary) !important;
    font-family: var(--font-ui) !important;
    font-size: 14px !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;
}

/* Menus inherit the instrument palette in both themes. */
.Select-menu-outer,
.Select-menu {
    background-color: var(--surface-raised) !important;
    border-color: var(--border-input) !important;
    border-radius: 0 0 var(--radius-sm) var(--radius-sm) !important;
    box-shadow: var(--shadow-lg) !important;
    z-index: 999 !important;
}
.Select-option {
    background-color: var(--surface-raised) !important;
    color: var(--text-primary) !important;
    font-family: var(--font-ui) !important;
    font-size: 14px !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(--blue-soft) !important;
    color: var(--text-primary) !important;
    font-weight: 600 !important;
}
.Select-option.is-disabled {
    background-color: var(--surface-instrument) !important;
    color: var(--text-muted) !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    padding: 8px 10px 4px !important;
    opacity: 1 !important;
}

/* Dark mode keeps controls inside the same low-glare instrument palette. */
[data-theme="dark"] .Select-control {
    background-color: var(--surface-control) !important;
    border-color: var(--border-input) !important;
}
[data-theme="dark"] .Select-arrow-zone .Select-arrow {
    border-top-color: var(--text-muted) !important;
}

/* ── Radio Items ──────────────────────────────────────────────────── */
.form-check-label {
    font-family: var(--font-ui) !important;
    font-size: 14px !important;
    color: var(--text-primary) !important;
    cursor: pointer;
    transition: color 0.15s;
}
.form-check-label:hover {
    color: var(--accent) !important;
}
.form-check-input:checked ~ .form-check-label {
    color: var(--accent) !important;
    font-weight: 600;
}

/* ── Slider ───────────────────────────────────────────────────────── */
.rc-slider-track { background-color: var(--accent) !important; }
.rc-slider-handle {
    border-color: var(--accent) !important;
    background: var(--bg-card) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15) !important;
}
.rc-slider-rail { background-color: var(--border-card) !important; }
.rc-slider-dot-active { border-color: var(--accent) !important; }
.rc-slider-mark-text {
    color: var(--text-muted) !important;
    font-size: 10px !important;
    font-family: var(--font-ui) !important;
}
.rc-slider-tooltip-inner {
    font-family: var(--font-ui) !important;
    font-size: 12px !important;
}

/* ── Stats Panel — extends .dash-card with denser typography ──────── */
.stats-panel {
    font-size: 13px;
    line-height: 1.8;
}
.stats-panel b { color: var(--accent); }

/* ── Map Container ────────────────────────────────────────────────── */
.map-wrap {
    border-radius: 2px;
    overflow: hidden;
    border: 1px solid var(--border-card);
    box-shadow: none;
}

/* Pixelated raster rendering */
.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 Container ──────────────────────────────────────────────── */
.chart-wrap {
    background: var(--surface-raised);
    border: 1px solid var(--border-card);
    border-radius: 2px;
    margin-top: 6px;
    box-shadow: none;
    overflow: hidden;
    transition: background 200ms var(--ease-out), border-color 200ms var(--ease-out);
}

/* ── Colorbar ─────────────────────────────────────────────────────── */
.colorbar-wrap {
    margin-top: 4px;
}
.colorbar-wrap img {
    max-width: 100%;
    border-radius: var(--radius-sm);
}

/* ── Dash internals ───────────────────────────────────────────────── */
._dash-undo-redo { display: none !important; }
.card {
    background: var(--bg-card) !important;
    border-color: var(--border-card) !important;
}

/* ── Loading spinner ──────────────────────────────────────────────── */
._dash-loading-callback { background: transparent !important; }

/* ── Container overrides ──────────────────────────────────────────── */
.container-fluid {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
}

/* ── Dark mode: slider marks and tooltip ─────────────────────────── */
[data-theme="dark"] .rc-slider-mark-text {
    color: #e8e0d6 !important;
}
[data-theme="dark"] .rc-slider-tooltip-inner {
    color: #e8e0d6 !important;
    background: #2a2621 !important;
}

/* ── Dark-mode overrides for Plotly chart text ───────────────────── */
[data-theme="dark"] .chart-wrap .js-plotly-plot text {
    fill: #e8e0d6 !important;
}
[data-theme="dark"] .chart-wrap .js-plotly-plot .gridlayer line {
    stroke: rgba(200,190,180,0.12) !important;
}

/* ── Responsive ───────────────────────────────────────────────────── */
@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: 12px; }
    .header-title { font-size: 15px; }
    .app-header { padding: 0 18px; }
    .app-header .header-sub { display: none; }

    /* Editorial responsive */
    .home-hero { padding: 48px 24px 44px; }
    .section-header { padding: 44px 24px 22px; }
    .editorial-lead { font-size: 16px; }
    .home-hero__grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .home-hero__logo {
        order: -1;          /* logo on top of text on mobile */
    }
    .home-hero__logo img {
        max-width: 220px;
    }
    .stats-strip__item {
        flex: 1 1 50%;
        padding: 18px 20px;
        border-right: 1px solid var(--border-card);
    }
    .stats-strip__item:nth-child(2n) { border-right: none; }
}

/* Tablet — keep side-by-side but smaller logo */
@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: 260px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE SIDEBAR  —  hamburger toggle + mobile drawer
   ═══════════════════════════════════════════════════════════════════════ */

/* Hamburger button — hidden on desktop, shown on tablet/mobile */
#sidebar-hamburger {
    display: none;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 8px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    color: var(--header-text);
    padding: 3px 9px;
    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;
}

/* Full-screen overlay — shown on mobile when sidebar is open */
#sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 1090;
    cursor: pointer;
}
html.sidebar-open #sidebar-overlay { display: block; }

/* ── Plotly modebar: style the download camera button ─────────────── */
.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;
}

/* ── Responsive breakpoint: tablet and below (< 992px) ────────────── */
@media (max-width: 991px) {

    /* Show hamburger */
    #sidebar-hamburger { display: flex; }

    /* Sidebar becomes a fixed off-canvas drawer */
    .sidebar-col {
        position: fixed !important;
        top: 56px;                                   /* below header */
        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;
    }

    /* Slide in when open */
    html.sidebar-open .sidebar-col {
        transform: translateX(0);
        box-shadow: 4px 0 32px rgba(0,0,0,0.28);
    }

    /* Main column takes full width */
    .main-col {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        padding: 8px 12px !important;
    }

    /* Close sidebar when a nav link is clicked (page change) */
    .nav-link-item { pointer-events: auto; }
}


/* ═══════════════════════════════════════════════════════════════════════
   Empty states & error handling
   Graceful feedback when data is missing or a combination has no results.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Shared empty / error container ─────────────────────────────────── */
.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: 36px;
    line-height: 1;
    opacity: 0.7;
}

.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: 'Roboto Condensed', monospace;
    font-size: 11px;
    color: var(--text-muted);
    background: var(--bg-input);
    border: 1px solid var(--border-input);
    border-radius: 4px;
    padding: 4px 10px;
    margin-top: 4px;
    word-break: break-all;
    max-width: 520px;
}

/* ── KPI strip empty state ──────────────────────────────────────────── */
.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: var(--radius);
}

.kpi-strip--empty__icon {
    font-size: 18px;
    opacity: 0.6;
}

/* ── Timeseries empty state ─────────────────────────────────────────── */
.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: 24px;
    opacity: 0.5;
}

.chart-empty__text {
    font-family: var(--font-ui);
    font-size: 13px;
    color: var(--text-muted);
    max-width: 360px;
}

/* ── Delta mode warning (reference data missing) ────────────────────── */
.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) 25%, var(--border-card));
    border-radius: var(--radius);
    font-family: var(--font-ui);
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.delta-warning__icon {
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Focus-visible accessibility 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 — refined placeholder
   ═══════════════════════════════════════════════════════════════════════ */
.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-display);
    font-variation-settings: "opsz" 144, "SOFT" 30;
    font-size: clamp(26px, 4vw, 36px);
    font-weight: 400;
    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-ui);
    font-size: 10px;
    font-weight: 700;
    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: 15px;
    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-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--text-muted);
    border: 1px solid var(--border-card);
    padding: 8px 20px;
    border-radius: 2px;
    opacity: 0;
    animation: fade-up 0.7s var(--ease-out-expo) 0.5s forwards;
}

/* Thermal divider line above coming-soon content */
.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%);
    border-radius: 1px;
    opacity: 0;
    animation: fade-up 0.7s var(--ease-out-expo) 0.35s forwards;
}

/* ─────────────────────────────────────────────────────────────────────── */
/* Heatwaves page — top tab strip                                           */
/* ─────────────────────────────────────────────────────────────────────── */
.hw-tabs {
    background: var(--bg-card);
}
.hw-tab {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid transparent;
    border-radius: 8px 8px 0 0;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    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);
    background: rgba(184, 74, 31, 0.06);
}
.hw-tab:active {
    transform: scale(0.97);
    transition-duration: 100ms;
}
.hw-tab--active {
    color: var(--text-primary);
    background: var(--bg-input);
    border-color: var(--border-input) var(--border-input) transparent var(--border-input);
}
.hw-tab--active::after {
    content: '';
    display: block;
    height: 2px;
    margin: 4px -16px -10px;
    background: linear-gradient(90deg,
        var(--thermal-warm) 0%, var(--thermal-hot) 100%);
}

/* ─── Tab icons (Lucide-style, monochrome SVG via CSS mask) ──────────────
   Inline SVG data URIs are used as `mask-image`; the visible colour is
   driven by `background-color: currentColor`, so the icon inherits the
   text colour of the parent button (muted when inactive, primary when
   active) — exactly like the emoji it replaced, but identical across
   every OS / browser / font-stack.
   The mask trick (instead of <img src=…>) is what makes the icon
   themeable; rendered <img> SVGs can't pick up CSS currentColor.

   Aligned inline with `vertical-align` so the parent .hw-tab can stay
   inline-block — this preserves the .hw-tab--active::after gradient
   underline (a flex layout on .hw-tab would re-flow ::after as a
   sibling flex item, breaking the underline). */
.tab-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-color: currentColor;
    vertical-align: -4px;
    margin-right: 8px;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}
/* Heatwaves tab icon. Flame fits the 24x24 viewBox much more uniformly
   than the previous thermometer (which was narrow and visually about
   30% smaller than the calendar / bars at the same box size). */
.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 — refresh status pill (toast + loading spinner) ────────
   Sits to the LEFT of the #live-refresh button.  Idle: empty/invisible.
   While fetching: shows "↻ Loading…" with a rotating glyph (`.is-loading`
   class is toggled by the callback's `running` parameter).  After success:
   shows "✓ Up to date — bulletin HH:MM" and self-clears in 3 s
   (handled by a tiny clientside callback).  */
.live-fetch-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 4px 12px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
    background: transparent;
    border-radius: 14px;
    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 {
    /* Hide the pill entirely when there's no message — keeps the
       toolbar visually tidy in the idle state. */
    padding: 0;
    min-height: 0;
}
.live-fetch-status.is-loading {
    color: var(--accent);
    background: var(--accent-soft, rgba(184,74,31,0.10));
}
.live-fetch-status.is-loading::before {
    content: "↻";
    display: inline-block;
    font-size: 14px;
    animation: live-spin 900ms linear infinite;
}
@keyframes live-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
/* Success-toast variant — the "✓" prefix from the callback text marks
   a successful fetch.  Use an attribute selector so we don't paint
   error messages (which start with "Failed:" / "Eșec:") in green. */
.live-fetch-status:not(.is-loading):not(:empty) {
    color: var(--text-muted);
    background: rgba(120,120,120,0.08);
}

/* ═══════════════════════════════════════════════════════════════════════
   LIVE PAGE — toolbar, metric selector, date presets, hour control
   ═══════════════════════════════════════════════════════════════════════ */
.live-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.live-hint {
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 12px;
    max-width: 78ch;
    line-height: 1.5;
}

/* Toolbar shell — one parchment card; groups wrap gracefully */
.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: var(--radius);
    box-shadow: var(--shadow);
}
.live-tb-group {
    display: flex;
    align-items: center;
    gap: 8px;
}
.live-tb-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    white-space: nowrap;
}
/* Thin vertical separator between toolbar groups (hidden once wrapped) */
.live-tb-sep {
    width: 1px;
    align-self: stretch;
    min-height: 26px;
    background: var(--border-card);
}

/* Metric dropdown — fixed width so the toolbar doesn't jump on selection */
.live-metric-dd {
    width: 196px;
    font-family: var(--font-ui);
}
.live-metric-dd .Select-control { min-height: 34px !important; }

/* Preset chips: Now / Today / Yesterday */
.live-chip {
    appearance: none;
    border: 1px solid var(--border-input);
    background: var(--bg-input);
    color: var(--text-secondary);
    border-radius: 999px;
    padding: 6px 14px;
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 600;
    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(--accent);
    background: var(--accent-soft);
}
.live-chip:active { transform: scale(0.96); }
.live-chip--accent {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
}
.live-chip--accent:hover {
    background: var(--accent-light);
    border-color: var(--accent-light);
    color: #fff;
}

/* Hour control — ‹  ☀ 14:00  ›  + slider */
.live-hour-group { gap: 6px; }
.live-step {
    appearance: none;
    border: 1px solid var(--border-input);
    background: var(--bg-input);
    color: var(--text-primary);
    border-radius: var(--radius-sm);
    width: 34px;
    height: 34px;
    font-size: 20px;
    font-weight: 700;
    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),
                transform 100ms var(--ease-out);
}
.live-step:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--accent);
}
.live-step:active { transform: scale(0.92); }
.live-hour-readout {
    min-width: 64px;
    text-align: center;
    font-family: var(--font-ui);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--text-primary);
    background: var(--bg-input);
    border: 1px solid var(--border-input);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    white-space: nowrap;
}

/* Anomaly tab — the prominent "Is it hot right now?" toggle */
.live-anom-tab {
    appearance: none;
    border: none;
    border-radius: 999px;
    padding: 8px 18px;
    font-family: var(--font-ui);
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.01em;
    color: #fff;
    cursor: pointer;
    white-space: nowrap;
    background: linear-gradient(90deg,
        var(--thermal-warm) 0%, var(--thermal-hot) 100%);
    box-shadow: var(--shadow);
    transition: filter 150ms var(--ease-out),
                box-shadow 150ms var(--ease-out),
                transform 100ms var(--ease-out);
}
.live-anom-tab:hover { filter: brightness(1.06); }
.live-anom-tab:active { transform: scale(0.97); }
.live-anom-tab.is-active {
    box-shadow: 0 0 0 3px rgba(120, 30, 15, 0.30), var(--shadow);
    filter: saturate(1.12) brightness(1.03);
}

/* DatePickerSingle — restyled to match the atlas inputs */
.live-datepick .SingleDatePickerInput {
    background: var(--bg-input) !important;
    border: 1px solid var(--border-input) !important;
    border-radius: var(--radius-sm) !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-ui) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 7px 10px !important;
    border: none !important;
}
.live-datepick .DateInput_input__focused {
    border-bottom: 2px solid var(--accent) !important;
}
.live-datepick .DateInput_fang { display: none !important; }
/* Calendar surface — always light parchment, accent-selected day */
.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;
    color: var(--text-primary) !important;
}
.DayPickerKeyboardShortcuts_show__bottomRight::before {
    border-right-color: var(--accent) !important;
}

/* Dark-mode: keep the light-on-input inputs readable */
[data-theme="dark"] .live-datepick .SingleDatePickerInput {
    background: #f7f1ea !important;
    border-color: #ccc3b6 !important;
}
[data-theme="dark"] .live-datepick .DateInput_input { color: #2c2520 !important; }
[data-theme="dark"] .live-hour-readout,
[data-theme="dark"] .live-step,
[data-theme="dark"] .live-chip {
    background: var(--bg-input);
    border-color: var(--border-input);
}

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

/* Table styling inside dash-card for heatwaves page */
.dash-card table th,
.dash-card table td {
    padding: 4px 8px;
    border-bottom: 1px solid var(--border-input);
    text-align: left;
}
.dash-card table th {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════════════
   Home 2026: evidence-led climate atlas
   The page behaves like a research index, not a marketing-card grid.
   ═══════════════════════════════════════════════════════════════════════ */
.home-page {
    background: var(--bg-body);
    min-height: calc(100vh - 56px);
}

.home-hero {
    position: relative;
    overflow: hidden;
    padding: 92px 72px 0;
    background-color: var(--bg-sidebar);
    background-image:
        linear-gradient(var(--border-card) 1px, transparent 1px),
        linear-gradient(90deg, var(--border-card) 1px, transparent 1px);
    background-size: 64px 64px;
    background-position: -1px -1px;
    border-bottom: 1px solid var(--border-card);
}
.home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--bg-sidebar);
    opacity: 0.90;
    pointer-events: none;
}
.home-hero::after { content: none; }

.home-hero__mast {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(430px, 0.92fr);
    gap: 96px;
    align-items: end;
    max-width: 1380px;
    margin: 0 auto;
}
.home-hero__text {
    min-width: 0;
    padding-bottom: 76px;
}

.home-hero .editorial-eyebrow,
.home-hero .editorial-h1,
.home-hero .editorial-lead,
.home-hero .editorial-cta-row {
    opacity: 1;
    animation: none;
}
.editorial-eyebrow {
    display: block;
    margin: 0 0 28px;
    color: var(--text-muted);
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.8px;
    line-height: 1.3;
    text-transform: uppercase;
}
.editorial-eyebrow::before { content: none; }
.editorial-h1 {
    max-width: 11ch;
    margin: 0 0 26px;
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: 68px;
    font-weight: 420;
    letter-spacing: -2.4px;
    line-height: 0.98;
}
.editorial-lead {
    max-width: 57ch;
    margin: 0 0 34px;
    color: var(--text-secondary);
    font-family: var(--font-ui);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.62;
}
.editorial-cta-row {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
}
.editorial-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0 6px;
    border: 0;
    border-bottom: 1px solid currentColor;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    line-height: 1;
    text-decoration: none;
    text-transform: uppercase;
    transition: color 180ms var(--ease-out), border-color 180ms var(--ease-out);
}
.editorial-cta.primary,
.editorial-cta.primary:hover,
.editorial-cta.ghost,
.editorial-cta.ghost:hover {
    border-color: currentColor;
    background: transparent;
    box-shadow: none;
    transform: none;
}
.editorial-cta.primary { color: var(--accent); }
.editorial-cta:hover { color: var(--thermal-extreme); }
.editorial-cta:active { opacity: 0.68; transform: none; }
.editorial-cta .arrow { transition: transform 180ms var(--ease-out); }
.editorial-cta:hover .arrow { transform: translate(2px, -1px); }

.atlas-plate {
    align-self: end;
    padding: 0 0 58px;
    color: var(--text-primary);
}
.atlas-plate__header,
.atlas-plate__source {
    display: flex;
    justify-content: space-between;
    gap: 24px;
}
.atlas-plate__header {
    align-items: start;
    padding: 16px 0 18px;
    border-top: 1px solid var(--text-primary);
}
.atlas-plate__title,
.atlas-plate__folio,
.atlas-plate__source span:first-child {
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.atlas-plate__note {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 12px;
}
.atlas-plate__folio {
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}
.atlas-plate__plot {
    display: grid;
    gap: 22px;
    min-height: 238px;
    padding: 28px 22px;
    border-top: 1px solid var(--border-card);
    border-bottom: 1px solid var(--border-card);
    background-image: repeating-linear-gradient(
        90deg,
        transparent 0,
        transparent calc(12.5% - 1px),
        var(--border-card) calc(12.5% - 1px),
        var(--border-card) 12.5%
    );
}
.atlas-track__label {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 8px;
    color: var(--text-secondary);
    font-size: 11px;
    letter-spacing: 0.4px;
}
.atlas-track__label span:last-child {
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}
.atlas-track__rule {
    height: 7px;
    background: var(--module-accent, var(--accent));
}
.atlas-track--history { --module-accent: var(--thermal-cold); width: 82%; }
.atlas-track--projection { --module-accent: var(--thermal-hot); width: 92%; margin-left: 8%; }
.atlas-track--present { --module-accent: var(--thermal-extreme); width: 28%; margin-left: 72%; }
.atlas-plate__source {
    align-items: baseline;
    padding-top: 15px;
    color: var(--text-muted);
    font-size: 10px;
    line-height: 1.4;
}
.atlas-plate__source span:last-child {
    text-align: right;
    letter-spacing: 0.35px;
}
.home-hero__coordinates {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 24px;
    max-width: 1380px;
    margin: 0 auto;
    padding: 12px 0;
    border-top: 1px solid var(--border-card);
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.25px;
    text-transform: uppercase;
}
.home-hero__coordinates span:last-child { margin-left: auto; }

.coverage-band {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    background: var(--bg-body);
    border-bottom: 1px solid var(--border-card);
}
.coverage-band__item {
    display: flex;
    flex-direction: column;
    gap: 9px;
    min-width: 0;
    padding: 18px 24px;
    border-right: 1px solid var(--border-card);
}
.coverage-band__item:last-child { border-right: 0; }
.coverage-band__label {
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.2;
    text-transform: uppercase;
}
.coverage-band__value {
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: 16px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    letter-spacing: -0.2px;
}

.section-header {
    display: grid;
    grid-template-columns: minmax(260px, 0.82fr) minmax(320px, 1.18fr);
    column-gap: 96px;
    max-width: 1380px;
    margin: 0 auto;
    padding: 86px 0 34px;
    border-bottom: 0;
}
.section-header__eyebrow {
    grid-column: 1 / -1;
    margin: 0 0 20px;
    color: var(--accent);
    font-size: 10px;
    letter-spacing: 1.7px;
}
.section-header__title {
    max-width: 16ch;
    margin: 0;
    font-family: var(--font-display);
    font-size: 40px;
    font-weight: 430;
    letter-spacing: -1px;
    line-height: 1.06;
}
.section-header__desc {
    align-self: end;
    max-width: 58ch;
    margin: 0;
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.65;
}

.atlas-index {
    max-width: 1380px;
    margin: 0 auto;
    padding: 0 0 96px;
    background: transparent;
}
.atlas-index__rows { border-bottom: 1px solid var(--border-card); }
.atlas-module-link {
    display: block;
    color: inherit;
    text-decoration: none;
}
.atlas-module {
    display: grid;
    grid-template-columns: 78px minmax(210px, 0.82fr) minmax(360px, 1.3fr) 152px;
    gap: 30px;
    align-items: start;
    min-height: 180px;
    padding: 30px 6px 30px 0;
    border-top: 1px solid var(--border-card);
    background: transparent;
    transition: background-color 180ms var(--ease-out), color 180ms var(--ease-out);
}
.atlas-module-link:hover .atlas-module {
    background: var(--bg-sidebar);
}
.atlas-module-link:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}
.atlas-module__number {
    color: var(--module-accent);
    font-family: var(--font-ui);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: 1.2px;
}
.atlas-module__kicker {
    margin-bottom: 10px;
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}
.atlas-module__title {
    margin: 0 0 7px;
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: 29px;
    font-weight: 480;
    letter-spacing: -0.5px;
    line-height: 1.05;
}
.atlas-module__subtitle {
    margin: 0;
    color: var(--module-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.55px;
    line-height: 1.35;
    text-transform: uppercase;
}
.atlas-module__desc {
    max-width: 60ch;
    margin: 0 0 18px;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.58;
}
.atlas-module__tag {
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.9px;
    text-transform: uppercase;
}
.atlas-module__end {
    justify-self: end;
    align-self: center;
    text-align: right;
}
.atlas-module__action,
.atlas-module__soon {
    color: var(--text-primary);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}
.atlas-module__arrow {
    display: inline-block;
    margin-left: 10px;
    color: var(--module-accent);
    transition: transform 180ms var(--ease-out);
}
.atlas-module-link:hover .atlas-module__arrow { transform: translate(3px, -3px); }
.atlas-module.is-disabled { opacity: 0.48; }
.atlas-module__soon {
    padding-bottom: 5px;
    border-bottom: 1px solid var(--border-card);
    color: var(--text-muted);
}

.home-footer {
    border-top: 1px solid var(--border-card);
    background: var(--bg-sidebar);
}
.home-footer__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    max-width: 1380px;
    margin: 0 auto;
    padding: 34px 0;
}
.home-footer__project {
    display: flex;
    align-items: center;
    gap: 20px;
    max-width: 720px;
}
.home-footer__logo {
    width: 66px;
    height: 46px;
    object-fit: contain;
    filter: saturate(0.75);
}
.home-footer__label,
.home-footer__meta {
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.home-footer__label { margin-bottom: 5px; }
.home-footer__link {
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    text-decoration: none;
}
.home-footer__link:hover { color: var(--accent); }
.home-footer__meta { white-space: nowrap; }

/* Shared shell controls: text labels instead of emoji or pill decoration. */
.header-main { min-width: 0; flex: 1; }
.header-brand { flex: 0 0 auto; }
#theme-toggle-btn,
#lang-toggle-btn {
    min-width: 38px;
    height: 28px;
    justify-content: center;
    padding: 0 9px;
    border: 1px solid var(--border-card);
    border-radius: 0;
    background: transparent;
    color: var(--header-text);
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.9px;
    line-height: 1;
    text-transform: uppercase;
}
#theme-toggle-btn:hover,
#lang-toggle-btn:hover {
    border-color: var(--accent);
    background: var(--accent-soft);
    transform: none;
}

@media (max-width: 1480px) {
    .home-hero__mast,
    .home-hero__coordinates,
    .section-header,
    .atlas-index,
    .home-footer__inner {
        max-width: none;
        margin-left: 48px;
        margin-right: 48px;
    }
    .home-hero { padding-left: 0; padding-right: 0; }
}

@media (max-width: 1120px) {
    .home-hero__mast {
        grid-template-columns: minmax(0, 1fr) minmax(360px, 0.9fr);
        gap: 56px;
    }
    .editorial-h1 { font-size: 54px; }
    .coverage-band { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .coverage-band__item:nth-child(3) { border-right: 0; }
    .coverage-band__item:nth-child(-n+3) { border-bottom: 1px solid var(--border-card); }
    .atlas-module {
        grid-template-columns: 52px minmax(190px, 0.8fr) minmax(300px, 1.2fr) 118px;
        gap: 22px;
    }
    .header-title { display: none; }
    .header-nav { overflow-x: auto; scrollbar-width: none; }
    .header-nav::-webkit-scrollbar { display: none; }
    .nav-link-item { padding-left: 9px; padding-right: 9px; }
}

@media (max-width: 780px) {
    .home-hero { padding-top: 58px; }
    .home-hero__mast {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-left: 24px;
        margin-right: 24px;
    }
    .home-hero__text { padding-bottom: 34px; }
    .editorial-eyebrow { margin-bottom: 20px; }
    .editorial-h1 { max-width: 10ch; font-size: 43px; letter-spacing: -1.5px; }
    .editorial-lead { font-size: 15px; line-height: 1.58; }
    .atlas-plate { padding-bottom: 30px; }
    .atlas-plate__plot { min-height: 210px; padding-left: 12px; padding-right: 12px; }
    .home-hero__coordinates {
        margin-left: 24px;
        margin-right: 24px;
        gap: 14px;
    }
    .home-hero__coordinates span:nth-child(2) { display: none; }
    .coverage-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .coverage-band__item:nth-child(3) { border-right: 1px solid var(--border-card); }
    .coverage-band__item:nth-child(2n) { border-right: 0; }
    .coverage-band__item:nth-child(-n+4) { border-bottom: 1px solid var(--border-card); }
    .section-header {
        grid-template-columns: 1fr;
        gap: 18px;
        margin-left: 24px;
        margin-right: 24px;
        padding-top: 62px;
    }
    .section-header__eyebrow { margin-bottom: 4px; }
    .section-header__title { font-size: 34px; }
    .atlas-index {
        margin-left: 24px;
        margin-right: 24px;
        padding-bottom: 72px;
    }
    .atlas-module {
        grid-template-columns: 40px minmax(0, 1fr);
        gap: 18px;
        min-height: 0;
        padding: 26px 0;
    }
    .atlas-module__heading,
    .atlas-module__summary,
    .atlas-module__end { grid-column: 2; }
    .atlas-module__summary { margin-top: -6px; }
    .atlas-module__end { justify-self: start; text-align: left; }
    .atlas-module__title { font-size: 27px; }
    .home-footer__inner {
        align-items: flex-start;
        flex-direction: column;
        margin-left: 24px;
        margin-right: 24px;
    }
    .app-header { padding-left: 12px; padding-right: 12px; }
    .header-main { gap: 6px !important; }
    .header-brand { display: none !important; }
    .header-nav { max-width: calc(100vw - 118px); }
    .nav-link-item { padding: 8px 8px; font-size: 10px; white-space: nowrap; }
    #theme-toggle-btn { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Methodology 2026: editorial research record
   Numbered evidence, navigable sections, and semantic provenance colour.
   ═══════════════════════════════════════════════════════════════════════ */
.method-page {
    min-height: calc(100vh - 56px);
    background-color: var(--surface-document);
    background-image: linear-gradient(
        90deg,
        transparent calc(50% - 1px),
        oklch(0.585 0.030 72 / 0.07) calc(50% - 1px),
        oklch(0.585 0.030 72 / 0.07) 50%,
        transparent 50%
    );
    color: var(--text-primary);
}
.method-shell {
    display: grid;
    grid-template-columns: minmax(170px, 210px) minmax(0, 820px);
    justify-content: center;
    gap: 92px;
    width: min(100%, 1280px);
    margin: 0 auto;
    padding: 64px 44px 112px;
}

.method-rail {
    position: sticky;
    top: 84px;
    align-self: start;
    min-width: 0;
    padding-top: 8px;
    color: var(--text-muted);
    font-family: var(--font-ui);
}
.method-rail__eyebrow,
.method-rail__label,
.method-header__eyebrow,
.method-section__kicker,
.method-index__label,
.method-footer__kicker {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.35px;
    line-height: 1.3;
    text-transform: uppercase;
}
.method-rail__eyebrow {
    padding-bottom: 17px;
    border-bottom: 1px solid var(--line-strong);
    color: var(--text-primary);
}
.method-rail__nav { margin-top: 34px; }
.method-rail__label { margin-bottom: 12px; }
.method-rail__nav a {
    display: grid;
    grid-template-columns: 27px minmax(0, 1fr);
    gap: 9px;
    padding: 9px 0;
    border-top: 1px solid var(--border-card);
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.25;
    text-decoration: none;
    transition: color 150ms var(--ease-out), padding-left 150ms var(--ease-out);
}
.method-rail__nav a:last-child { border-bottom: 1px solid var(--border-card); }
.method-rail__nav a:hover {
    padding-left: 4px;
    color: var(--accent);
}
.method-rail__nav a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}
.method-rail__number {
    color: var(--accent);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: 0.8px;
}
.method-rail__scope {
    margin-top: 34px;
    padding-top: 14px;
    border-top: 1px solid var(--line-strong);
    font-size: 10px;
    letter-spacing: 0.35px;
    line-height: 1.75;
}
.method-rail__source {
    color: var(--state-info);
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.method-document { min-width: 0; }
.method-header {
    padding-bottom: 8px;
    border-top: 1px solid var(--text-primary);
}
.method-header__eyebrow {
    margin: 14px 0 30px;
    color: var(--accent);
}
.method-header h1 {
    max-width: 10ch;
    margin: 0 0 25px;
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: clamp(48px, 5.4vw, 68px);
    font-weight: 430;
    letter-spacing: -2px;
    line-height: 0.98;
}
.method-header__lead {
    max-width: 67ch;
    margin: 0 0 38px;
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1.7;
}
.method-ledger {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    border-top: 1px solid var(--line-strong);
    border-bottom: 1px solid var(--line-strong);
}
.method-ledger > div {
    min-width: 0;
    padding: 15px 15px 16px;
    border-right: 1px solid var(--border-card);
}
.method-ledger > div:first-child { padding-left: 0; }
.method-ledger > div:last-child { border-right: 0; }
.method-ledger dt {
    margin-bottom: 7px;
    color: var(--text-muted);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.method-ledger dd {
    margin: 0;
    color: var(--text-primary);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    line-height: 1.35;
}

.method-section { margin-top: 90px; }
.method-section__header {
    scroll-margin-top: 78px;
    margin-bottom: 34px;
}
.method-section__kicker {
    margin-bottom: 13px;
    color: var(--accent);
}
.method-section__title {
    max-width: 22ch;
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 450;
    letter-spacing: -0.7px;
    line-height: 1.06;
}
.method-section__intro {
    max-width: 68ch;
    margin: 18px 0 0;
    color: var(--text-secondary);
    font-size: 15px;
    line-height: 1.68;
}

.method-note-list { border-bottom: 1px solid var(--line-strong); }
.method-note {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr);
    gap: 22px;
    padding: 24px 0 26px;
    border-top: 1px solid var(--border-card);
}
.method-note:first-child { border-top-color: var(--line-strong); }
.method-note__number {
    padding-top: 3px;
    color: var(--state-info);
    font-family: var(--font-ui);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: 1px;
}
.method-note__title {
    margin: 0 0 8px;
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.28;
}
.method-note__copy {
    margin: 0;
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.66;
}
.method-note--warning {
    margin: 0 -18px;
    padding-right: 18px;
    padding-left: 18px;
    background: var(--state-warning-soft);
    box-shadow: inset 3px 0 0 var(--state-warning);
}
.method-note--warning .method-note__number { color: var(--state-warning); }

.method-index-list { border-bottom: 1px solid var(--line-strong); }
.method-index {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 20px;
    padding: 30px 0 32px;
    border-top: 1px solid var(--border-card);
    scroll-margin-top: 78px;
}
.method-index:first-child { border-top-color: var(--line-strong); }
.method-index__number {
    padding-top: 3px;
    color: var(--thermal-hot);
    font-size: 10px;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    letter-spacing: 1px;
}
.method-index__title {
    margin: 0 0 18px;
    color: var(--text-primary);
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -0.25px;
    line-height: 1.12;
}
.method-index__definition {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    gap: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--border-card);
}
.method-index__label {
    padding-top: 3px;
    color: var(--text-muted);
}
.method-index__definition p,
.method-index__plain p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 13.5px;
    line-height: 1.62;
}
.method-index__plain {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    gap: 18px;
    margin-top: 16px;
    padding: 15px 16px;
    background: var(--state-info-soft);
    box-shadow: inset 2px 0 0 var(--state-info);
}
.method-index__plain .method-index__label { color: var(--state-info); }
.method-index__plain p { color: var(--text-primary); }
.method-index__reference {
    margin: 14px 0 0;
    color: var(--text-muted);
    font-size: 11px;
    font-style: italic;
    line-height: 1.45;
}
.method-index__reference span {
    font-style: normal;
    font-weight: 700;
    letter-spacing: 0.35px;
}

.method-attribution {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr);
    gap: 20px;
    margin-top: 28px;
    padding: 24px 22px;
    border-top: 1px solid var(--state-info);
    border-bottom: 1px solid var(--state-info);
    background: var(--state-info-soft);
}
.method-attribution__mark {
    color: var(--state-info);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
}
.method-attribution h3 {
    margin: 0 0 10px;
    color: var(--text-primary);
    font-size: 15px;
}
.method-attribution p {
    margin: 0 0 9px;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.58;
}
.method-attribution p:last-child { margin-bottom: 0; }
.method-attribution a { color: var(--state-info); text-underline-offset: 2px; }
.method-attribution__disclaimer { font-style: italic; }

.method-footer {
    margin-top: 94px;
    padding-top: 22px;
    border-top: 1px solid var(--text-primary);
}
.method-footer__kicker { color: var(--accent); }
.method-footer p {
    max-width: 68ch;
    margin: 14px 0 19px;
    color: var(--text-secondary);
    font-size: 13px;
    font-style: italic;
    line-height: 1.6;
}
.method-footer a {
    color: var(--text-primary);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-decoration: none;
    text-transform: uppercase;
}
.method-footer a:hover { color: var(--accent); }

@media (max-width: 900px) {
    .method-shell {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 48px 32px 88px;
    }
    .method-rail { display: none; }
}

@media (max-width: 620px) {
    .method-shell { padding: 34px 20px 72px; }
    .method-header__eyebrow { margin-bottom: 22px; }
    .method-header h1 {
        font-size: 44px;
        letter-spacing: -1.3px;
    }
    .method-header__lead { font-size: 15px; }
    .method-ledger { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .method-ledger > div { border-bottom: 1px solid var(--border-card); }
    .method-ledger > div:nth-child(2n) { border-right: 0; }
    .method-ledger > div:nth-last-child(-n+2) { border-bottom: 0; }
    .method-ledger > div:nth-child(3) { padding-left: 0; }
    .method-section { margin-top: 68px; }
    .method-section__title { font-size: 31px; }
    .method-note {
        grid-template-columns: 34px minmax(0, 1fr);
        gap: 10px;
        padding: 21px 0 23px;
    }
    .method-note--warning {
        margin-right: -10px;
        margin-left: -10px;
        padding-right: 10px;
        padding-left: 10px;
    }
    .method-index {
        grid-template-columns: 1fr;
        gap: 9px;
        padding: 27px 0 29px;
    }
    .method-index__definition,
    .method-index__plain {
        grid-template-columns: 1fr;
        gap: 7px;
    }
    .method-index__plain { padding: 14px; }
    .method-index__title { font-size: 22px; }
    .method-attribution {
        grid-template-columns: 1fr;
        gap: 9px;
        padding: 20px 16px;
    }
}