:root {
    color-scheme: dark;

    --bg-1: #0e131b;
    --bg-2: #142130;

    --panel: rgba(31, 42, 57, .88);
    --panel-soft: rgba(255, 255, 255, .035);
    --panel-border: rgba(255, 255, 255, .10);

    --text: #f4f7fb;
    --muted: #9caabd;

    --accent: #83cfff;
    --accent-strong: #4fc3ff;
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    background: var(--bg-1);
}

body {
    min-height: 100vh;
    margin: 0;

    background:
        radial-gradient(
            circle at 82% 0,
            rgba(72, 153, 216, .16),
            transparent 38rem
        ),
        linear-gradient(
            145deg,
            var(--bg-1) 0%,
            #121a25 52%,
            var(--bg-2) 100%
        );

    color: var(--text);

    font:
        16px/1.5
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


/* HEADER */

.public-header {
    width: min(100% - 2rem, 70rem);
    margin: 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding:
        max(1rem, env(safe-area-inset-top))
        0
        1rem;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: .7rem;

    color: inherit;
    text-decoration: none;
}

.brand-mark {
    display: grid;
    place-items: center;

    width: 2.5rem;
    height: 2.5rem;

    border:
        1px solid
        rgba(131, 207, 255, .40);

    border-radius: .85rem;

    background:
        rgba(131, 207, 255, .06);
}

.brand-mark svg {
    width: 1.55rem;
    height: 1.55rem;

    stroke: var(--accent);

    stroke-width: 1.6;
}

.brand-dot {
    fill: #14b8a6;
    stroke: none;
}

.brand-copy {
    display: grid;
    line-height: 1;
}

.brand-copy strong {
    font-size: .95rem;
}

.brand-copy b {
    color: var(--accent);
}

.brand-copy small {
    margin-top: .22rem;

    color: var(--muted);

    font-size: .55rem;
    letter-spacing: .20em;
}

.header-time {
    display: grid;
    gap: .08rem;

    text-align: right;

    font-variant-numeric: tabular-nums;
}

.header-time time {
    color: var(--accent);

    font-size: .88rem;
    font-weight: 650;
}

.header-time span {
    color: var(--muted);

    font-size: .68rem;
}


/* MAIN */

.public-shell {
    width: min(100% - 2rem, 70rem);
    margin: 0 auto;

    display: grid;
    grid-template-columns:
        minmax(0, .95fr)
        minmax(28rem, 1.05fr);

    align-items: center;
    gap: clamp(2.5rem, 7vw, 7rem);

    min-height:
        calc(100vh - 8.5rem);

    padding:
        clamp(2.5rem, 7vh, 6rem)
        0;
}


/* HERO */

.intro {
    align-self: center;
}

.eyebrow,
.section-label {
    color: var(--accent);

    font-size: .72rem;
    font-weight: 800;

    letter-spacing: .16em;

    text-transform: uppercase;
}

.eyebrow {
    display: inline-flex;
    align-items: center;

    gap: .55rem;
}

.eyebrow i {
    display: block;

    width: .48rem;
    height: .48rem;

    border-radius: 50%;

    background:
        var(--accent-strong);

    box-shadow:
        0 0 1rem
        rgba(79, 195, 255, .8);
}

h1 {
    max-width: 9ch;

    margin:
        1.1rem
        0
        1rem;

    font-size:
        clamp(
            3.2rem,
            6.6vw,
            6rem
        );

    line-height: .93;

    letter-spacing: -.065em;
}

h1 span {
    color: var(--accent);
}

.intro p {
    max-width: 31rem;

    margin: 0;

    color: var(--muted);

    font-size:
        clamp(
            1rem,
            1.6vw,
            1.15rem
        );
}


/* WEATHER PANEL */

.weather-panel {
    width: 100%;

    padding:
        clamp(1.35rem, 3vw, 2.1rem);

    border:
        1px solid
        var(--panel-border);

    border-radius: 1.6rem;

    background:
        linear-gradient(
            145deg,
            rgba(38, 51, 69, .92),
            rgba(25, 35, 48, .94)
        );

    box-shadow:
        0 1.6rem 5rem
        rgba(0, 0, 0, .28);

    backdrop-filter: blur(1rem);
}

.weather-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 1rem;
}

.weather-panel h2 {
    margin: .35rem 0 0;

    font-size:
        clamp(
            1.35rem,
            3vw,
            1.8rem
        );

    letter-spacing: -.03em;
}

.weather-icon {
    flex: 0 0 auto;

    display: grid;
    place-items: center;

    width: 3.4rem;
    height: 3.4rem;

    border-radius: 1rem;

    background:
        rgba(131, 207, 255, .12);

    color: var(--accent);

    font-size: 2rem;
}


/* TEMPERATURE */

.temperature-block {
    margin:
        1.8rem
        0
        1.5rem;
}

.temperature-row {
    display: flex;
    align-items: flex-start;

    gap: .45rem;
}

.temperature-row strong {
    font-size:
        clamp(
            4.8rem,
            10vw,
            7rem
        );

    line-height: .84;

    letter-spacing: -.075em;

    font-variant-numeric:
        tabular-nums;
}

.temperature-row span {
    margin-top: .55rem;

    color: var(--accent);

    font-size: 1.35rem;
    font-weight: 700;
}

.weather-status {
    min-height: 1.6rem;

    margin:
        1.15rem
        0
        0;

    color: var(--muted);
}


/* DETAIL GRID */

.weather-details {
    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: .7rem;
}

.detail-card {
    min-width: 0;

    padding: .9rem;

    border:
        1px solid
        rgba(255, 255, 255, .07);

    border-radius: 1rem;

    background:
        var(--panel-soft);
}

.detail-card span,
.detail-card strong,
.detail-card small {
    display: block;
}

.detail-label {
    color: var(--muted);

    font-size: .69rem;
    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: .08em;
}

.detail-card strong {
    overflow: hidden;

    margin-top: .28rem;

    color: var(--text);

    font-size: 1.05rem;

    white-space: nowrap;

    text-overflow: ellipsis;

    font-variant-numeric:
        tabular-nums;
}

.detail-card small {
    margin-top: .14rem;

    color: #75859a;

    font-size: .67rem;
}


/* TREND */

.trend-card {
    display: flex;
    align-items: center;

    gap: .85rem;

    margin-top: .75rem;

    padding: .9rem 1rem;

    border:
        1px solid
        rgba(131, 207, 255, .10);

    border-radius: 1rem;

    background:
        rgba(131, 207, 255, .045);
}

.trend-icon {
    flex: 0 0 auto;

    display: grid;
    place-items: center;

    width: 2.35rem;
    height: 2.35rem;

    border-radius: .7rem;

    background:
        rgba(131, 207, 255, .12);

    color: var(--accent);

    font-size: 1.15rem;
    font-weight: 900;
}

.trend-card span {
    display: block;

    color: var(--muted);

    font-size: .69rem;
}

.trend-card strong {
    display: block;

    margin-top: .08rem;

    font-size: .9rem;
}


/* SOURCE */

.weather-source {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: .45rem;

    margin-top: 1.1rem;

    color: #75859a;

    font-size: .7rem;
}


/* FOOTER */

.public-footer {
    width: min(100% - 2rem, 70rem);

    margin: 0 auto;

    display: flex;

    gap: .45rem;

    padding:
        0
        0
        max(1.3rem, env(safe-area-inset-bottom));

    color: #64748b;

    font-size: .72rem;
}


/* TABLET */

@media (max-width: 900px) {

    .public-shell {
        grid-template-columns: 1fr;

        gap: 2.3rem;

        min-height: auto;

        padding:
            3rem
            0
            3.5rem;
    }

    h1 {
        max-width: none;

        font-size:
            clamp(
                3rem,
                12vw,
                5.5rem
            );
    }

    h1 br {
        display: none;
    }

    .weather-panel {
        max-width: 44rem;
    }
}


/* MOBILE */

@media (max-width: 600px) {

    .public-header {
        width:
            min(
                100% - 1.4rem,
                70rem
            );
    }

    .public-shell {
        width:
            min(
                100% - 1.4rem,
                70rem
            );

        padding:
            2.4rem
            0
            2.8rem;
    }

    .brand-copy strong {
        font-size: .9rem;
    }

    .header-time span {
        display: none;
    }

    h1 {
        margin-top: .9rem;

        font-size:
            clamp(
                2.7rem,
                14.5vw,
                4.3rem
            );
    }

    .intro p {
        font-size: .95rem;
    }

    .weather-panel {
        padding: 1.15rem;

        border-radius: 1.35rem;
    }

    .temperature-row strong {
        font-size:
            clamp(
                4.6rem,
                25vw,
                6rem
            );
    }

    .weather-details {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .detail-card {
        padding: .82rem;
    }

    .public-footer {
        width:
            min(
                100% - 1.4rem,
                70rem
            );
    }
}


/* VERY SMALL */

@media (max-width: 360px) {

    .weather-details {
        grid-template-columns: 1fr;
    }
}


/* PUBLIC HISTORY */

.public-data-stack {
    width: min(100% - 2rem, 70rem);
    margin: 0 auto;
    display: grid;
    gap: 1rem;
    padding: 0 0 3.5rem;
}

.data-card {
    min-width: 0;
    padding: clamp(1.15rem, 3vw, 1.7rem);
    border: 1px solid var(--panel-border);
    border-radius: 1.35rem;
    background: linear-gradient(145deg, rgba(38, 51, 69, .78), rgba(25, 35, 48, .86));
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, .16);
}

.data-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.data-card h2 {
    margin: .35rem 0 0;
    font-size: clamp(1.2rem, 2.6vw, 1.55rem);
    letter-spacing: -.035em;
}

.data-status {
    flex: 0 0 auto;
    max-width: 14rem;
    color: var(--muted);
    font-size: .72rem;
    text-align: right;
}

.chart-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .65rem;
    margin-top: 1.25rem;
}

.control-group {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
}

.control-group button {
    min-height: 2.75rem;
    padding: .45rem .72rem;
    border: 1px solid rgba(255, 255, 255, .10);
    border-radius: .7rem;
    background: rgba(255, 255, 255, .035);
    color: var(--muted);
    font: inherit;
    font-size: .74rem;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.control-group button:hover,
.control-group button:focus-visible {
    border-color: rgba(131, 207, 255, .42);
    color: var(--text);
    outline: none;
}

.control-group button[aria-pressed="true"] {
    border-color: rgba(131, 207, 255, .52);
    background: rgba(131, 207, 255, .14);
    color: var(--accent);
}

.chart-frame {
    position: relative;
    min-height: 17.5rem;
    margin-top: 1rem;
    padding: .35rem .15rem .1rem;
    border: 1px solid rgba(255, 255, 255, .055);
    border-radius: 1rem;
    background: rgba(5, 10, 16, .18);
}

.weather-chart {
    display: block;
    width: 100%;
    height: auto;
    min-height: 17rem;
    overflow: visible;
}

.weather-chart .chart-grid {
    stroke: rgba(255, 255, 255, .09);
    stroke-width: 1;
}

.weather-chart .chart-axis-label,
.weather-chart .chart-x-label {
    fill: #8292a7;
    font-family: inherit;
    font-size: 11px;
}

.weather-chart .chart-line {
    fill: none;
    stroke: var(--accent-strong);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3;
}

.weather-chart .chart-area {
    fill: url(#chartFill);
    opacity: .8;
}

.weather-chart .chart-dot {
    fill: var(--bg-2);
    stroke: var(--accent);
    stroke-width: 2;
}

.chart-empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1.25rem;
    color: var(--muted);
    font-size: .85rem;
    text-align: center;
}

.chart-empty[hidden] {
    display: none;
}

.chart-caption {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: .65rem;
    color: var(--muted);
    font-size: .72rem;
}

.daily-weather-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: .55rem;
    margin-top: 1.15rem;
}

.daily-weather-item {
    min-width: 0;
    padding: .78rem .65rem;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: .9rem;
    background: var(--panel-soft);
}

.daily-weather-item strong,
.daily-weather-item span,
.daily-weather-item small {
    display: block;
}

.daily-weather-item strong {
    overflow: hidden;
    color: var(--text);
    font-size: .82rem;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.daily-weather-item > span {
    margin-top: .28rem;
    color: var(--accent);
    font-size: .92rem;
    font-variant-numeric: tabular-nums;
}

.daily-weather-item small {
    margin-top: .24rem;
    color: var(--muted);
    font-size: .68rem;
    line-height: 1.35;
}

.daily-empty {
    grid-column: 1 / -1;
    padding: 1rem;
    border: 1px dashed rgba(255, 255, 255, .12);
    border-radius: .9rem;
    color: var(--muted);
    font-size: .84rem;
}

.statistics-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .65rem;
    margin-top: 1.15rem;
}

.stat-card {
    min-width: 0;
    padding: .85rem;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: .9rem;
    background: var(--panel-soft);
}

.stat-card span,
.stat-card strong {
    display: block;
}

.stat-card span {
    min-height: 2.1em;
    color: var(--muted);
    font-size: .7rem;
    line-height: 1.35;
}

.stat-card strong {
    margin-top: .4rem;
    color: var(--text);
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
    .public-data-stack {
        padding-bottom: 3rem;
    }

    .daily-weather-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .public-data-stack {
        width: min(100% - 1.4rem, 70rem);
        gap: .85rem;
        padding-bottom: 2.5rem;
    }

    .data-card {
        padding: 1.05rem;
        border-radius: 1.15rem;
    }

    .data-card-head {
        display: block;
    }

    .data-status {
        display: block;
        max-width: none;
        margin-top: .4rem;
        text-align: left;
    }

    .chart-controls {
        align-items: stretch;
        display: grid;
        grid-template-columns: 1fr;
    }

    .control-group {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .range-group {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .control-group button {
        padding-inline: .4rem;
        font-size: .7rem;
    }

    .chart-frame {
        min-height: 14rem;
        margin-inline: -.35rem;
    }

    .weather-chart {
        min-height: 13.7rem;
    }

    .daily-weather-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .statistics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* DESKTOP LAYOUT POLISH */

.public-data-stack {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr);
    align-items: stretch;
}

.chart-card {
    grid-column: 1 / -1;
}

.daily-card,
.statistics-card {
    display: flex;
    min-width: 0;
    min-height: 100%;
    flex-direction: column;
}

.daily-weather-grid,
.statistics-grid {
    align-content: start;
}

.chart-frame {
    height: clamp(300px, 27vw, 340px);
    min-height: 0;
}

.weather-chart {
    height: 100%;
    min-height: 0;
}

@media (max-width: 1020px) {
    .public-data-stack {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

@media (max-width: 900px) {
    .daily-weather-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 800px) {
    .public-data-stack {
        grid-template-columns: minmax(0, 1fr);
    }

    .chart-card,
    .daily-card,
    .statistics-card {
        grid-column: 1 / -1;
    }

    .chart-frame {
        height: clamp(260px, 38vw, 300px);
    }
}

@media (max-width: 600px) {
    .chart-frame {
        height: clamp(230px, 63vw, 260px);
    }

    .weather-chart {
        min-height: 0;
    }
}
/* INTERACTIVE WEATHER CENTER */
html, body { overflow-x: hidden; }
body { background-size: 140% 140%; animation: publicAmbient 26s ease-in-out infinite alternate; }
.weather-icon { color: var(--accent); font-size: 2.2rem; text-shadow: 0 0 1.4rem rgba(131,207,255,.32); }
.data-card, .weather-panel { transition: none; }
#freshnessLabel.is-stale { color: #f5c77b; }
.trend-card { display: grid; grid-template-columns: auto minmax(0,1fr) minmax(0,1fr); }
.trend-copy { min-width: 0; }
.pressure-trend-copy { padding-left: .85rem; border-left: 1px solid rgba(131,207,255,.13); }
.chart-frame { touch-action: pan-y; }
.weather-chart { cursor: crosshair; }
.weather-chart .chart-line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: drawWeatherLine 1.2s cubic-bezier(.2,.7,.2,1) forwards; }
.weather-chart .chart-area { opacity: 0; animation: fadeWeatherArea .9s ease .18s forwards; }
.chart-crosshair { stroke: rgba(255,255,255,.46); stroke-width: 1; stroke-dasharray: 3 4; pointer-events: none; }
.chart-highlight { fill: var(--accent); stroke: var(--bg-2); stroke-width: 3; filter: drop-shadow(0 0 .35rem rgba(131,207,255,.8)); pointer-events: none; }
.chart-tooltip { position: absolute; z-index: 2; max-width: min(15rem,calc(100% - 1rem)); padding: .42rem .62rem; border: 1px solid rgba(131,207,255,.3); border-radius: .6rem; background: rgba(13,20,29,.94); color: var(--text); font-size: .72rem; line-height: 1.3; pointer-events: none; box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.28); }
.chart-tooltip[hidden] { display: none; }
.wide-card { grid-column: 1 / -1; }
.insight-grid { display: grid; grid-template-columns: minmax(0,1.18fr) minmax(0,.82fr); gap: 1rem; align-items: stretch; }
.insight-grid > .data-card { min-width: 0; height: 100%; }
.kpi-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .65rem; margin-top: 1.1rem; }
.kpi-feature, .kpi-mini, .comparison-row, .highlight-item, .month-item { min-width: 0; border: 1px solid rgba(255,255,255,.07); border-radius: .9rem; background: var(--panel-soft); }
.kpi-feature, .kpi-mini { padding: .82rem; }
.kpi-label-row, .kpi-feature > small, .kpi-mini > span, .kpi-mini > small { color: var(--muted); font-size: .69rem; }
.kpi-label-row { display: flex; justify-content: space-between; gap: .5rem; }
.kpi-feature strong, .kpi-mini strong { display: block; margin-top: .28rem; color: var(--text); font-size: clamp(1rem,2vw,1.35rem); font-variant-numeric: tabular-nums; }
.kpi-feature > small, .kpi-mini > small { display: block; margin-top: .18rem; }
.mini-sparkline { display: block; width: 100%; height: 2.1rem; margin-top: .45rem; overflow: visible; }
.mini-sparkline-line { fill: none; stroke: var(--accent-strong); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.pressure-deltas { grid-column: 1 / -1; }
.delta-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .35rem; margin-top: .55rem; }
.delta-grid span { color: var(--muted); font-size: .68rem; }
.delta-grid b { display: block; margin-top: .12rem; color: var(--text); font-size: .8rem; font-variant-numeric: tabular-nums; }
.comparison-grid { display: grid; gap: .55rem; margin-top: 1.1rem; }
.comparison-row { display: flex; align-items: center; justify-content: space-between; gap: .7rem; padding: .82rem .9rem; }
.comparison-row span { color: var(--muted); font-size: .78rem; }
.comparison-row strong { color: var(--text); font-size: .88rem; font-variant-numeric: tabular-nums; }
.comparison-row strong.is-positive { color: #9de4c1; }
.comparison-row strong.is-negative { color: #f5a8a8; }
.comparison-row strong.is-neutral { color: var(--muted); }
.data-empty { display: grid; place-items: center; min-height: 6rem; padding: 1rem; border: 1px dashed rgba(255,255,255,.12); border-radius: .9rem; color: var(--muted); font-size: .8rem; text-align: center; }
.highlights-grid, .month-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .55rem; margin-top: 1.1rem; }
.highlight-item, .month-item { padding: .76rem; }
.highlight-item span, .month-item span { display: block; color: var(--muted); font-size: .68rem; }
.highlight-item strong, .month-item strong { display: block; margin-top: .28rem; color: var(--accent); font-size: .98rem; font-variant-numeric: tabular-nums; }
.highlight-item small, .month-item small { display: block; margin-top: .16rem; color: #8292a7; font-size: .66rem; }
.windrose-controls { margin-top: 1rem; }
.windrose-layout { display: grid; grid-template-columns: minmax(12rem,1fr) minmax(8rem,.75fr); align-items: center; gap: .6rem; margin-top: .45rem; }
.windrose { display: block; width: 100%; max-width: 16rem; margin: 0 auto; }
.windrose-ring, .windrose-spoke { fill: none; stroke: rgba(255,255,255,.12); stroke-width: 1; }
.windrose-area { fill: rgba(131,207,255,.22); stroke: var(--accent-strong); stroke-width: 2; stroke-linejoin: round; }
.windrose-center { fill: var(--accent); }
.windrose-label { fill: var(--muted); font-family: inherit; font-size: 12px; font-weight: 700; }
.windrose-summary { display: grid; gap: .1rem; }
.windrose-summary strong { margin-top: .4rem; color: var(--accent); font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.windrose-summary span { color: var(--muted); font-size: .68rem; }
.rain-heatmap { display: grid; grid-template-columns: repeat(10,minmax(0,1fr)); gap: .28rem; margin-top: 1.1rem; }
.rain-day { display: grid; place-items: center; min-width: 0; min-height: 2rem; padding: .15rem; border: 1px solid rgba(255,255,255,.08); border-radius: .45rem; color: var(--text); font: inherit; font-size: .68rem; cursor: help; }
.rain-day:hover, .rain-day:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.rain-level-0 { background: rgba(255,255,255,.035); color: var(--muted); }
.rain-level-1 { background: rgba(131,207,255,.12); }
.rain-level-2 { background: rgba(79,195,255,.28); }
.rain-level-3 { background: rgba(79,195,255,.52); }
.rain-level-missing { background: rgba(255,255,255,.02); color: #718096; border-style: dashed; }
.heatmap-legend { display: flex; align-items: center; gap: .28rem; margin-top: .75rem; color: var(--muted); font-size: .66rem; }
.heatmap-legend i { width: .72rem; height: .72rem; border-radius: .2rem; }
.annual-chart-frame { position: relative; min-height: 17rem; margin-top: 1rem; padding: .35rem .15rem .1rem; border: 1px solid rgba(255,255,255,.055); border-radius: 1rem; background: rgba(5,10,16,.18); }
.annual-chart { display: block; width: 100%; height: 19rem; }
.annual-rain-bar { fill: rgba(79,195,255,.36); }
.annual-temp-line { fill: none; stroke: var(--accent-strong); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.annual-temp-dot { fill: var(--accent); stroke: var(--bg-2); stroke-width: 2; }
.annual-legend { display: flex; flex-wrap: wrap; gap: .75rem 1.2rem; margin-top: .65rem; color: var(--muted); font-size: .7rem; }
.annual-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.legend-line, .legend-bar { display: inline-block; width: 1.1rem; height: .18rem; border-radius: 1rem; background: var(--accent-strong); }
.legend-bar { height: .65rem; background: rgba(79,195,255,.45); }
.annual-table { display: grid; gap: .45rem; margin-top: 1rem; }
.annual-row { display: grid; grid-template-columns: 1.1fr repeat(5,minmax(0,1fr)); align-items: center; gap: .55rem; padding: .58rem .7rem; border: 1px solid rgba(255,255,255,.06); border-radius: .7rem; background: var(--panel-soft); color: var(--muted); font-size: .68rem; font-variant-numeric: tabular-nums; }
.annual-row strong { color: var(--text); }
@keyframes publicAmbient { from { background-position: 0% 0%; } to { background-position: 100% 12%; } }
@keyframes drawWeatherLine { to { stroke-dashoffset: 0; } }
@keyframes fadeWeatherArea { to { opacity: .8; } }
.reveal { opacity: 0; transform: translateY(.75rem); }
.reveal.is-visible { opacity: 1; transform: translateY(0); transition: opacity .55s ease, transform .55s ease; }
@media (max-width: 1020px) { .insight-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }
@media (max-width: 800px) { .insight-grid { grid-template-columns: minmax(0,1fr); } .windrose-layout { grid-template-columns: minmax(12rem,.9fr) minmax(8rem,.7fr); } .annual-row { grid-template-columns: repeat(3,minmax(0,1fr)); } .annual-row strong { grid-column: 1 / -1; } }
@media (max-width: 600px) { .trend-card { grid-template-columns: auto minmax(0,1fr); } .pressure-trend-copy { grid-column: 2; padding-left: 0; border-left: 0; } .kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .kpi-feature { grid-column: 1 / -1; } .pressure-deltas { grid-column: 1 / -1; } .windrose-layout { grid-template-columns: 1fr; } .windrose-summary { grid-template-columns: repeat(3,minmax(0,1fr)); gap: .25rem; } .windrose-summary span { grid-row: 2; } .rain-heatmap { grid-template-columns: repeat(7,minmax(0,1fr)); } .annual-chart-frame { min-height: 14rem; } .annual-chart { height: 14rem; } .annual-row { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 360px) { .kpi-grid { grid-template-columns: 1fr; } .kpi-feature, .pressure-deltas { grid-column: auto; } .delta-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (prefers-reduced-motion: reduce) { .reveal, .reveal.is-visible { opacity: 1; transform: none; transition: none; } }

/* LIVE SUPPLEMENTS */
.live-supplement-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .65rem; margin-top: .7rem; }
.detail-card-accent { border-color: rgba(131,207,255,.13); background: linear-gradient(145deg, rgba(131,207,255,.07), rgba(255,255,255,.025)); }
.data-quality { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid rgba(255,255,255,.07); color: #8292a7; font-size: .68rem; font-variant-numeric: tabular-nums; }
#freshnessLabel.is-fresh::before { content: ""; display: inline-block; width: .38rem; height: .38rem; margin: 0 .35rem .06rem 0; border-radius: 50%; background: #78ddb3; box-shadow: 0 0 .55rem rgba(120,221,179,.75); }
.weather-panel.is-refreshing { animation: dataRefresh .65s ease both; }

/* TODAY TIMELINE */
.timeline-controls { margin-top: 1.05rem; }
.timeline-frame { position: relative; height: 15rem; min-height: 13rem; margin-top: .8rem; padding: .25rem .15rem .1rem; border: 1px solid rgba(255,255,255,.055); border-radius: 1rem; background: rgba(5,10,16,.18); touch-action: pan-y; }
.today-timeline-chart { display: block; width: 100%; height: 100%; cursor: crosshair; overflow: visible; }
.timeline-area { fill: url(#todayTimelineFill); opacity: .8; }
.timeline-line { fill: none; stroke: #9de4c1; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; animation: drawWeatherLine 1s cubic-bezier(.2,.7,.2,1) forwards; }
.timeline-highlight { fill: #9de4c1; }
button[hidden] { display: none !important; }

/* RAIN, SOLAR AND EXTREME VALUE BLOCKS */
.metric-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .55rem; margin-top: 1.1rem; }
.metric-item, .special-value-item { min-width: 0; padding: .78rem; border: 1px solid rgba(255,255,255,.07); border-radius: .9rem; background: var(--panel-soft); }
.metric-item span, .metric-item strong, .metric-item small, .special-value-item span, .special-value-item strong, .special-value-item small { display: block; }
.metric-item span, .special-value-item span { color: var(--muted); font-size: .68rem; }
.metric-item strong, .special-value-item strong { margin-top: .28rem; color: var(--accent); font-size: 1rem; font-variant-numeric: tabular-nums; }
.metric-item small, .special-value-item small { margin-top: .16rem; color: #8292a7; font-size: .66rem; }
.special-values-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .6rem; margin-top: 1.1rem; }
@keyframes dataRefresh { 0% { box-shadow: 0 1.6rem 5rem rgba(0,0,0,.28); } 45% { box-shadow: 0 1.6rem 5rem rgba(0,0,0,.28), 0 0 .9rem rgba(131,207,255,.13); } 100% { box-shadow: 0 1.6rem 5rem rgba(0,0,0,.28); } }
@media (max-width: 900px) { .live-supplement-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } .special-values-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 600px) { .live-supplement-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .timeline-frame { height: 13.5rem; min-height: 12rem; margin-inline: -.35rem; } .metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .special-values-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 360px) { .live-supplement-grid, .metric-grid, .special-values-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .weather-panel.is-refreshing, .timeline-line { animation: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }

/* PUBLIC WEATHER FINETUNE */
@media (min-width: 901px) {
    .public-shell {
        grid-template-columns: minmax(0, .88fr) minmax(32rem, 1.12fr);
    }

    .weather-panel .detail-card strong {
        overflow: visible;
        white-space: normal;
        text-overflow: clip;
        overflow-wrap: anywhere;
    }

    .live-supplement-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.weather-panel .detail-card strong {
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
    overflow-wrap: anywhere;
}

.insight-grid {
    align-items: start;
}

.insight-grid > .data-card {
    height: auto;
    min-height: 0;
}

.month-availability {
    display: grid;
    gap: .55rem;
    padding: .85rem;
    border: 1px solid rgba(131, 207, 255, .13);
    border-radius: .9rem;
    background: var(--panel-soft);
}

.month-availability strong {
    color: var(--accent);
    font-size: .95rem;
    font-variant-numeric: tabular-nums;
}

.month-availability small {
    color: var(--muted);
    font-size: .7rem;
    line-height: 1.4;
}

.month-progress {
    height: .45rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, .09);
}

.month-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--accent-strong), var(--accent));
}

.station-region-note {
    color: #8292a7;
    font-size: .66rem;
}

/* ================================================================
   DLHOME_PUBLIC_LEGACY_DESIGN_POLISH_2026
   Visuelle Rückbesinnung auf das hochwertige DL-Home-Wetterdesign.
   Die bestehenden Datenblöcke und Funktionen bleiben unverändert.
   ================================================================ */

:root {
    --bg-1: #08111c;
    --bg-2: #14263a;
    --panel: rgba(19, 34, 51, .82);
    --panel-soft: rgba(255, 255, 255, .045);
    --panel-border: rgba(164, 201, 235, .16);
    --text: #f5f8fc;
    --muted: #a1b2c7;
    --accent: #83dff1;
    --accent-strong: #62c7ff;
}

body {
    background:
        radial-gradient(circle at 18% 0%, rgba(79, 195, 255, .15), transparent 34rem),
        radial-gradient(circle at 91% 8%, rgba(142, 103, 255, .16), transparent 32rem),
        linear-gradient(145deg, var(--bg-1) 0%, var(--bg-2) 100%);
}

.public-header,
.public-shell,
.public-data-stack,
.public-footer {
    width: min(calc(100% - 3rem), 90rem);
}

.public-header {
    min-height: 4.9rem;
    padding: .7rem 1rem;
    border: 1px solid rgba(164, 201, 235, .13);
    border-radius: 1.35rem;
    background: rgba(7, 17, 29, .45);
    box-shadow: 0 .9rem 2.8rem rgba(0, 0, 0, .14);
    backdrop-filter: blur(1.25rem);
}

.header-context {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.header-location {
    display: grid;
    gap: .08rem;
    text-align: right;
}

.header-location small {
    color: #8194aa;
    font-size: .62rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.header-location strong {
    color: var(--text);
    font-size: .78rem;
    font-weight: 650;
}

.section-nav {
    width: min(calc(100% - 3rem), 90rem);
    margin: 1.1rem auto 0;
    display: flex;
    gap: .3rem;
    overflow-x: auto;
    padding: .3rem;
    border: 1px solid rgba(164, 201, 235, .13);
    border-radius: 1rem;
    background: rgba(7, 17, 29, .52);
    box-shadow: 0 .7rem 2.3rem rgba(0, 0, 0, .12);
    backdrop-filter: blur(1rem);
    scrollbar-width: thin;
}

.section-nav a {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    padding: .45rem .95rem;
    border: 1px solid transparent;
    border-radius: .72rem;
    color: #a8b8ca;
    font-size: .78rem;
    font-weight: 650;
    text-decoration: none;
    transition: color .18s ease, background .18s ease, border-color .18s ease;
}

.section-nav a:hover,
.section-nav a:focus-visible,
.section-nav a[aria-current="page"] {
    color: var(--accent);
    border-color: rgba(131, 223, 241, .16);
    background: rgba(131, 223, 241, .08);
    outline: none;
}

.brand-mark {
    border-color: rgba(131, 223, 241, .48);
    background: linear-gradient(145deg, rgba(131, 223, 241, .16), rgba(142, 103, 255, .10));
    box-shadow: 0 0 1.8rem rgba(98, 199, 255, .15);
}

.public-shell {
    grid-template-columns: minmax(0, .9fr) minmax(34rem, 1.1fr);
    gap: clamp(3rem, 6vw, 7rem);
    min-height: min(720px, calc(100vh - 7rem));
    padding: clamp(3rem, 7vh, 5.5rem) 0 3.5rem;
}

.intro h1 {
    max-width: 10ch;
    font-size: clamp(4rem, 6.2vw, 6.6rem);
    line-height: .9;
    text-shadow: 0 1.2rem 3rem rgba(0, 0, 0, .18);
}

.intro p {
    max-width: 34rem;
    font-size: clamp(1.05rem, 1.5vw, 1.22rem);
    line-height: 1.6;
}

.weather-panel {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(1.6rem, 3vw, 2.45rem);
    border-color: rgba(164, 201, 235, .24);
    border-radius: 2rem;
    background:
        linear-gradient(145deg, rgba(30, 57, 82, .96), rgba(32, 35, 72, .92));
    box-shadow:
        0 2rem 6rem rgba(0, 0, 0, .3),
        inset 0 1px 0 rgba(255, 255, 255, .09);
}

.weather-panel::before,
.weather-panel::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;
}

.weather-panel::before {
    width: 32rem;
    height: 32rem;
    right: -13rem;
    top: -16rem;
    background: radial-gradient(circle, rgba(131, 223, 241, .24), rgba(98, 199, 255, .07) 42%, transparent 72%);
}

.weather-panel::after {
    width: 26rem;
    height: 26rem;
    left: -17rem;
    bottom: -17rem;
    border: 1px solid rgba(142, 103, 255, .20);
    box-shadow: 0 0 0 3rem rgba(142, 103, 255, .035), 0 0 0 6rem rgba(98, 199, 255, .025);
}

.weather-panel-head,
.temperature-block,
.weather-details,
.live-supplement-grid,
.trend-card,
.weather-source {
    position: relative;
    z-index: 1;
}

.temperature-block {
    margin: 2.25rem 0 1.75rem;
}

.temperature-row strong {
    font-size: clamp(5.8rem, 10vw, 8.2rem);
    text-shadow: 0 .8rem 2.6rem rgba(131, 223, 241, .18);
}

.weather-status {
    margin-top: 1.3rem;
    font-size: .94rem;
}

.detail-card {
    padding: 1rem;
    border-color: rgba(164, 201, 235, .13);
    border-radius: 1.1rem;
    background: rgba(5, 14, 25, .22);
}

.detail-card strong {
    color: #f7fbff;
    font-size: 1.12rem;
}

.live-supplement-grid {
    gap: .7rem;
}

.detail-card-accent {
    background: linear-gradient(145deg, rgba(131, 223, 241, .10), rgba(255, 255, 255, .025));
}

.trend-card {
    margin-top: .9rem;
    padding: 1rem 1.1rem;
    border-color: rgba(131, 223, 241, .15);
    background: rgba(131, 223, 241, .055);
}

.analysis-divider {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: .9rem;
    margin-top: .2rem;
    color: var(--muted);
}

.forecast-section {
    grid-column: 1 / -1;
    padding: clamp(1.25rem, 2.2vw, 1.8rem);
    border: 1px solid rgba(164, 201, 235, .14);
    border-radius: 1.5rem;
    background: linear-gradient(145deg, rgba(25, 52, 76, .86), rgba(12, 28, 46, .78));
    box-shadow: 0 1.35rem 3.7rem rgba(0, 0, 0, .18), inset 0 1px 0 rgba(131, 223, 241, .06);
}

.forecast-section-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.forecast-section h2 {
    margin: .35rem 0 0;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    letter-spacing: -.045em;
}

.forecast-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: .65rem;
    margin-top: 1.2rem;
}

.forecast-item {
    min-width: 0;
    padding: .95rem .8rem;
    border: 1px solid rgba(164, 201, 235, .12);
    border-radius: 1rem;
    background: rgba(255, 255, 255, .04);
}

.forecast-item-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .4rem;
}

.forecast-item-head strong {
    color: var(--text);
    font-size: .88rem;
}

.forecast-item-head small,
.forecast-item > small {
    color: var(--muted);
    font-size: .67rem;
}

.forecast-temperature {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .35rem;
    margin-top: .85rem;
}

.forecast-temperature strong {
    color: #b8edff;
    font-size: 1.45rem;
    font-variant-numeric: tabular-nums;
}

.forecast-temperature span {
    color: var(--muted);
    font-size: .72rem;
}

.forecast-item p {
    min-height: 2.7em;
    margin: .65rem 0 .45rem;
    color: var(--muted);
    font-size: .68rem;
    line-height: 1.45;
}

.analysis-divider .section-label {
    flex: 0 0 auto;
    font-size: .68rem;
}

.analysis-divider-line {
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, rgba(131, 223, 241, .35), transparent);
}

.analysis-divider-note {
    flex: 0 0 auto;
    color: #8194aa;
    font-size: .7rem;
}

.public-data-stack {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.2rem;
    align-items: start;
    padding-bottom: 4rem;
}

.public-data-stack > .wide-card {
    grid-column: 1 / -1;
}

.public-data-stack > .daily-card {
    grid-column: span 7;
}

.public-data-stack > .statistics-card {
    grid-column: span 5;
}

.data-card {
    padding: clamp(1.25rem, 2.2vw, 1.8rem);
    border-color: rgba(164, 201, 235, .14);
    border-radius: 1.5rem;
    background: linear-gradient(145deg, rgba(24, 43, 64, .78), rgba(13, 27, 44, .74));
    box-shadow: 0 1.25rem 3.5rem rgba(0, 0, 0, .17), inset 0 1px 0 rgba(255, 255, 255, .035);
}

.data-card h2 {
    font-size: clamp(1.35rem, 2.1vw, 1.75rem);
}

.data-status {
    max-width: 18rem;
    font-size: .75rem;
}

.chart-card {
    padding: clamp(1.45rem, 2.8vw, 2.1rem);
    border-radius: 1.75rem;
    background: linear-gradient(145deg, rgba(25, 52, 76, .9), rgba(9, 24, 40, .84));
    box-shadow: 0 1.8rem 5.5rem rgba(0, 0, 0, .22), inset 0 1px 0 rgba(131, 223, 241, .07);
}

.chart-card h2 {
    font-size: clamp(1.5rem, 2.4vw, 2rem);
}

.chart-frame,
.timeline-frame,
.annual-chart-frame {
    border-color: rgba(164, 201, 235, .10);
    background: rgba(3, 10, 18, .24);
}

.kpi-grid,
.highlights-grid,
.month-grid,
.metric-grid,
.special-values-grid {
    gap: .7rem;
}

.kpi-feature,
.kpi-mini,
.comparison-row,
.highlight-item,
.month-item,
.metric-item,
.special-value-item,
.stat-card {
    border-color: rgba(164, 201, 235, .12);
    border-radius: 1rem;
    background: rgba(255, 255, 255, .035);
}

.kpi-feature strong,
.kpi-mini strong,
.highlight-item strong,
.month-item strong,
.metric-item strong,
.special-value-item strong,
.stat-card strong {
    color: #b8edff;
}

.compare-card,
.month-card {
    height: auto;
    min-height: 0;
    align-self: start;
}

.windrose-card,
.rain-heatmap-card,
.rain-details-card,
.solar-card {
    min-height: 100%;
}

.windrose {
    filter: drop-shadow(0 0 1.2rem rgba(98, 199, 255, .10));
}

.annual-card {
    background: linear-gradient(145deg, rgba(25, 43, 66, .82), rgba(12, 27, 44, .76));
}

.public-footer {
    padding-bottom: max(1.3rem, env(safe-area-inset-bottom));
}

@media (hover: hover) and (min-width: 901px) {
    .control-group button:hover,
    .control-group button:focus-visible {
        transform: translateY(-1px);
    }
}

@media (max-width: 1020px) {
    .public-shell {
        grid-template-columns: minmax(0, .9fr) minmax(28rem, 1.1fr);
    }

    .public-data-stack > .daily-card,
    .public-data-stack > .statistics-card {
        grid-column: 1 / -1;
    }
}

@media (max-width: 800px) {
    .public-header,
    .public-shell,
    .public-data-stack,
    .public-footer {
        width: min(calc(100% - 1.4rem), 90rem);
    }

    .public-shell {
        grid-template-columns: 1fr;
        min-height: auto;
        gap: 2rem;
        padding-top: 2.6rem;
    }

    .section-nav {
        width: min(calc(100% - 1.4rem), 90rem);
        margin-top: .75rem;
    }

    .analysis-divider-note {
        display: none;
    }

    .forecast-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .analysis-divider-line {
        min-width: 2rem;
    }

    .public-data-stack {
        grid-template-columns: 1fr;
    }

    .public-data-stack > .daily-card,
    .public-data-stack > .statistics-card,
    .public-data-stack > .wide-card {
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {
    .public-header {
        padding-inline: .7rem;
        border-radius: 1rem;
    }

    .header-context {
        gap: .65rem;
    }

    .header-location {
        display: none;
    }

    .public-shell {
        padding-top: 2.2rem;
    }

    .weather-panel {
        border-radius: 1.35rem;
    }

    .analysis-divider {
        gap: .6rem;
    }

    .analysis-divider .section-label {
        font-size: .61rem;
    }

    .public-data-stack {
        gap: .85rem;
        padding-bottom: 2.5rem;
    }

    .data-card,
    .chart-card,
    .forecast-section {
        border-radius: 1.2rem;
    }

    .forecast-section-head {
        display: block;
    }

    .forecast-grid {
        grid-template-columns: 1fr;
    }

    .forecast-item p {
        min-height: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .data-card,
    .weather-panel,
    .control-group button {
        transition: none !important;
    }
}

/* Weather Center 2026 — public root only. Data and protected routes are unchanged. */
:root {
    --bg-1: #07121f;
    --bg-2: #102239;
    --panel: rgba(20, 38, 58, .86);
    --panel-border: rgba(172, 213, 241, .22);
    --panel-soft: rgba(146, 202, 232, .065);
    --text: #f5faff;
    --muted: #b9cee0;
    --accent: #8ceadd;
    --accent-strong: #7cc8fa;
}

html { scroll-behavior: smooth; scroll-padding-top: 6.2rem; }
body {
    background: radial-gradient(circle at 10% 4%, rgba(52, 184, 206, .18), transparent 36rem),
        radial-gradient(circle at 91% 3%, rgba(124, 112, 226, .17), transparent 36rem),
        linear-gradient(145deg, #07121f, #0d1c30 57%, #101d32);
    background-size: auto;
    animation: none;
}
.public-header, .section-nav, .public-shell, .public-footer { width: min(calc(100% - 3rem), 90rem); }
.public-header { margin-top: .8rem; border-color: var(--panel-border); background: rgba(9, 23, 38, .72); }
.brand-mark { width: 3rem; height: 3rem; border-radius: 1rem; }
.brand-mark svg { width: 1.8rem; height: 1.8rem; }
.brand-copy strong { font-size: 1.12rem; letter-spacing: -.03em; }
.brand-copy small { font-size: .69rem; letter-spacing: .12em; }
.header-location small, .header-time span { color: var(--muted); font-size: .76rem; }
.header-time time { color: var(--accent); font-size: .94rem; }
.section-nav { position: sticky; top: .45rem; z-index: 20; margin-top: .65rem; border-color: var(--panel-border); background: rgba(9, 23, 38, .92); backdrop-filter: blur(22px); scrollbar-width: none; }
.section-nav::-webkit-scrollbar { display: none; }
.section-nav a { color: var(--muted); font-size: .8rem; }
.section-nav a[aria-current="page"] { color: #071f28; border-color: #9aede5; background: linear-gradient(135deg, #8ceadd, #9edcff); box-shadow: 0 4px 16px rgba(101, 223, 220, .22); }
.section-nav a:focus-visible, .control-group button:focus-visible, .rain-day:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.public-shell { grid-template-columns: repeat(12, minmax(0, 1fr)); min-height: 0; align-items: start; gap: 1.2rem; padding: 1.4rem 0 2rem; }
.public-shell > * { min-width: 0; grid-column: 1 / -1; }
.wx-icon { display: inline-block; flex: none; width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.13em; overflow: visible; }

/* Single atmospheric composition spanning headline and live conditions. */
.hero-stage {
    position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: center; gap: clamp(1.5rem, 4vw, 4rem); overflow: hidden;
    min-height: 35rem; padding: clamp(1.4rem, 3.5vw, 3rem);
    border: 1px solid rgba(176, 225, 244, .29); border-radius: 2rem;
    background: linear-gradient(112deg, #153b53 0%, #133247 46%, #283358 100%);
    box-shadow: 0 2rem 6rem rgba(1, 9, 20, .4), inset 0 1px 0 rgba(255,255,255,.15);
}
.hero-stage[data-weather="sun"] { background: linear-gradient(112deg, #1d4a5b, #154257 52%, #424366); }
.hero-stage[data-weather="rain"] { background: linear-gradient(112deg, #18384f, #162b48 52%, #293453); }
.hero-stage[data-weather="wind"] { background: linear-gradient(112deg, #184452, #1d3b50 52%, #34375d); }
.hero-stage[data-weather="fog"] { background: linear-gradient(112deg, #294653, #1d354a 52%, #42485b); }
.hero-stage[data-weather="night"] { background: linear-gradient(112deg, #101f36, #16243f 52%, #292747); }
.hero-atmosphere { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero-atmosphere::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(176, 245, 232, .12), transparent 45%, rgba(169, 175, 245, .11)); background-size: 210% 100%; animation: root-light 18s ease-in-out infinite alternate; }
.hero-orb { position: absolute; top: -11rem; right: 23%; width: 31rem; height: 31rem; border-radius: 50%; background: radial-gradient(circle, rgba(127, 223, 230, .24), rgba(112, 159, 255, .07) 43%, transparent 72%); animation: root-orb 14s ease-in-out infinite alternate; }
.hero-stage[data-weather="sun"] .hero-orb { background: radial-gradient(circle, rgba(255, 222, 147, .29), rgba(137, 221, 210, .09) 47%, transparent 72%); }
.hero-stage[data-weather="night"] .hero-orb { background: radial-gradient(circle, rgba(169, 187, 255, .19), transparent 72%); }
.hero-cloud { position: absolute; width: 10rem; height: 2.4rem; border-radius: 4rem; background: rgba(220, 242, 255, .11); filter: blur(5px); animation: root-drift 35s linear infinite alternate; }
.hero-cloud::before { content: ""; position: absolute; left: 2rem; bottom: 0; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: inherit; }
.hero-cloud-one { top: 20%; right: 26%; }
.hero-cloud-two { top: 31%; right: 3%; transform: scale(.6); animation-delay: -12s; }
.hero-stage[data-weather="night"] .hero-particles { position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(228, 239, 255, .74) 1px, transparent 2px); background-size: 68px 87px; opacity: .35; }
.hero-stage[data-weather="rain"] .hero-particles { position: absolute; inset: 0; background-image: repeating-linear-gradient(112deg, transparent 0 40px, rgba(168, 213, 249, .21) 41px, transparent 43px, transparent 95px); background-size: 150% 150%; opacity: .28; animation: root-rain 8s linear infinite; }
.hero-stage[data-weather="wind"] .hero-particles { position: absolute; inset: 0; background: repeating-linear-gradient(170deg, transparent 0 60px, rgba(164, 236, 228, .14) 61px, transparent 63px, transparent 110px); animation: root-rain 13s linear infinite; }
.hero-stage .intro, .hero-stage .weather-panel { position: relative; z-index: 1; min-width: 0; }
.hero-stage .intro { align-self: start; padding: clamp(3.5rem, 7vw, 7rem) clamp(.4rem, 2vw, 1.7rem) .8rem; }
.hero-stage .intro h1 { max-width: 11ch; margin: 1.2rem 0 1.4rem; color: #fff; font-size: clamp(3.3rem, 5.4vw, 5.9rem); line-height: .95; text-wrap: balance; }
.hero-stage .intro h1 span { color: #a4f2eb; }
.hero-stage .intro p { max-width: 34rem; color: #e2edf7; font-size: clamp(1rem, 1.3vw, 1.18rem); }
.hero-stage .eyebrow, .hero-stage .section-label { color: #acf1e9; }
.intro-live { display: inline-flex; align-items: center; gap: .7rem; margin-top: 2rem; padding: .65rem .85rem; border: 1px solid rgba(182, 238, 236, .24); border-radius: 99px; background: rgba(5, 19, 32, .26); color: #e5f5fc; font-size: .84rem; }
.live-beacon { width: .55rem; height: .55rem; border-radius: 50%; background: #9af3d9; box-shadow: 0 0 0 5px rgba(140,234,221,.16); animation: root-beacon 2.8s ease-in-out infinite; }
.hero-stage.is-stale .live-beacon { background: #f1c68c; box-shadow: 0 0 0 5px rgba(241,198,140,.18); animation: none; }
.hero-stage .weather-panel { padding: clamp(1.25rem, 2vw, 1.9rem); border: 1px solid rgba(211, 239, 250, .29); background: linear-gradient(148deg, rgba(6, 24, 40, .72), rgba(21, 39, 64, .74)); box-shadow: 0 1.5rem 4rem rgba(2, 13, 28, .24), inset 0 1px 0 rgba(255,255,255,.14); backdrop-filter: blur(22px); }
.hero-stage .weather-panel::before { opacity: .4; }
.hero-stage .weather-panel::after { opacity: .2; }
.weather-panel-head h2 { color: #f6fcff; }
.weather-icon { width: 5.3rem; height: 5.3rem; border: 1px solid rgba(222, 245, 255, .23); border-radius: 1.5rem; background: radial-gradient(circle at 30% 25%, rgba(255, 224, 157, .24), rgba(131, 208, 244, .09) 70%); color: #f9dfa6; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 0 2rem rgba(251, 213, 154, .12); }
.weather-icon .wx-icon { font-size: 3.2rem; filter: drop-shadow(0 0 .4rem currentColor); animation: root-icon 5s ease-in-out infinite; }
.hero-stage[data-weather="rain"] .weather-icon, .hero-stage[data-weather="fog"] .weather-icon { color: #abd9ff; }
.hero-stage[data-weather="night"] .weather-icon { color: #c9d5ff; }
.temperature-block { margin: 1rem 0 1.1rem; }
.temperature-row strong { color: #fff; font-size: clamp(5rem, 7vw, 7rem); }
.temperature-row span { color: #c6f2ed; }
.weather-status { color: #e2eff9; min-height: 0; margin-top: .75rem; font-weight: 650; }
.weather-details { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.detail-card { padding: .72rem .78rem; border-color: rgba(190, 224, 244, .19); background: rgba(156, 213, 242, .065); }
.detail-label { display: flex !important; align-items: center; gap: .4rem; color: #c4dded; font-size: .7rem; letter-spacing: .035em; }
.detail-label .wx-icon { color: #9ce5dc; font-size: 1.12rem; }
.detail-card strong { color: #f8fcff; font-size: 1rem; }
.detail-card small { color: #bbcfdf; font-size: .68rem; }
.live-supplement-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.trend-card { background: rgba(108, 209, 216, .09); border-color: rgba(149, 234, 229, .25); }
.trend-card span { color: #c6d9e9; }
.weather-source { color: #c3d9e8; line-height: 1.5; }
.station-region-note { color: #b7ccdd; }
.public-footer { color: var(--muted); font-size: .76rem; }

/* Forecast: an honest model module with strong glyphs and swipeable hours. */
.forecast-section { margin: 0; padding: clamp(1.2rem, 2.5vw, 2rem); border-color: var(--panel-border); background: linear-gradient(145deg, rgba(24, 53, 76, .88), rgba(12, 28, 47, .86)); }
.hourly-section { background: linear-gradient(135deg, rgba(24, 58, 73, .91), rgba(13, 32, 53, .9)); }
.forecast-context { color: var(--muted); font-size: .83rem; margin: .35rem 0 .8rem; }
.forecast-section-head .data-status, .data-status { color: var(--muted); opacity: 1; }
.hourly-forecast-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(9.3rem, 10.3rem); gap: .7rem; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; padding: .4rem .1rem .9rem; scrollbar-color: rgba(140, 210, 237, .55) transparent; }
.hourly-item { display: flex; flex-direction: column; align-items: center; min-width: 0; min-height: 14rem; gap: .32rem; padding: .9rem .65rem; border: 1px solid rgba(186, 223, 243, .18); border-radius: 1.15rem; background: rgba(205, 235, 249, .055); scroll-snap-align: start; font-variant-numeric: tabular-nums; transition: transform .2s ease, border-color .2s ease, background .2s ease; }
.hourly-item.is-next { border-color: rgba(140, 237, 223, .6); background: linear-gradient(160deg, rgba(105, 223, 217, .17), rgba(153, 180, 251, .065)); }
.hourly-item time { color: #e0eff8; font-size: .9rem; font-weight: 800; }
.hourly-item > .wx-icon { font-size: 2.65rem; color: #f5dba4; margin: .2rem 0; }
.hourly-item .wx-rain, .hourly-item .wx-heavy-rain, .hourly-item .wx-showers, .hourly-item .wx-sleet, .hourly-item .wx-snow { color: #a9d9ff; }
.hourly-item .wx-storm { color: #dec6ff; }
.hourly-condition { min-height: 1.6em; color: #e1f0f8; font-size: .73rem; font-weight: 700; text-align: center; }
.hourly-item strong { color: #fff; font-size: 1.48rem; margin: .2rem 0; }
.hourly-fact { width: 100%; color: #c3d9e8; font-size: .73rem; white-space: nowrap; }
.hourly-fact .wx-icon { margin-right: .15rem; color: #9bdfed; }
.forecast-grid { gap: .65rem; }
.forecast-item { display: flex; flex-direction: column; min-height: 15.5rem; border-color: rgba(177, 219, 243, .2); background: linear-gradient(160deg, rgba(187, 224, 245, .075), rgba(114, 165, 213, .035)); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.forecast-item-head strong { font-size: .9rem; }
.forecast-item-head small, .forecast-item > small, .forecast-item p { color: #bbd3e4; font-size: .74rem; }
.forecast-item > small .wx-icon { color: #a1e5e0; }
.forecast-symbol { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; margin: .5rem 0 .25rem; color: #f5daa2; }
.forecast-symbol .wx-icon { font-size: 2.8rem; filter: drop-shadow(0 0 .55rem rgba(255, 211, 152, .2)); }
.forecast-symbol:has(.wx-rain), .forecast-symbol:has(.wx-heavy-rain), .forecast-symbol:has(.wx-showers), .forecast-symbol:has(.wx-sleet), .forecast-symbol:has(.wx-snow) { color: #acd9ff; }
.forecast-symbol:has(.wx-storm) { color: #e0cbff; }
.forecast-symbol span { color: #dbeafa; font-size: .73rem; font-weight: 750; }
.forecast-temperature { margin-top: auto; }
.forecast-temperature strong { color: #f7fbff; font-size: 1.65rem; }
.forecast-temperature span { color: #c5d8e7; font-size: .84rem; }
.forecast-item p { min-height: 0; line-height: 1.5; }

/* Analytical surfaces retain their own color and information hierarchy. */
.analysis-divider-note, .highlight-item small, .month-item small, .metric-item small, .special-value-item small, .data-quality { color: var(--muted); }
.public-data-stack { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1rem; }
.public-data-stack > .daily-card { grid-column: span 7; }
.public-data-stack > .statistics-card { grid-column: span 5; }
.public-data-stack > .wide-card { grid-column: 1 / -1; }
.data-card { min-width: 0; border-color: var(--panel-border); background: linear-gradient(145deg, rgba(20, 42, 63, .88), rgba(12, 28, 46, .82)); }
.data-card h2 { letter-spacing: -.04em; }
.data-card-head .section-label { display: flex; align-items: center; gap: .4rem; }
.data-card-head .section-label .wx-icon { font-size: 1.05rem; }
.chart-card { background: linear-gradient(140deg, rgba(23, 55, 75, .94), rgba(10, 26, 44, .88)); }
.chart-frame, .timeline-frame, .annual-chart-frame { border-color: rgba(169, 211, 241, .2); background: rgba(3, 15, 30, .36); }
.chart-empty[hidden] { display: none; }
.weather-chart .chart-axis-label, .weather-chart .chart-x-label, .chart-axis-label, .chart-x-label { fill: #c5d7e7; font-size: 11px; }
.weather-chart .chart-grid, .chart-grid { stroke: rgba(188, 220, 239, .2); }
.chart-dot { fill: #183b57; stroke: #a4ebde; stroke-width: 2; }
.weather-chart .chart-line { stroke: #91e9e2; filter: drop-shadow(0 0 3px rgba(113,229,218,.36)); }
.chart-extreme { fill: #0e2944; stroke: #fff0bb; stroke-width: 2.5; }
.chart-latest { fill: #a4f0e6; stroke: #123849; stroke-width: 3; filter: drop-shadow(0 0 5px rgba(123,239,218,.8)); }
.chart-tooltip { background: rgba(8, 26, 42, .97); border-color: rgba(148, 233, 224, .5); color: #f6fbff; box-shadow: 0 .8rem 2rem rgba(0,0,0,.42); }
.chart-crosshair { stroke: #a5e6e2; }
.control-group button { min-height: 2.5rem; color: #d2e4f1; border-color: rgba(183,220,240,.2); }
.control-group button[aria-pressed="true"] { color: #082630; background: #a4ebe3; border-color: #a4ebe3; box-shadow: 0 4px 18px rgba(118,230,217,.2); }
.kpi-feature, .kpi-mini, .comparison-row, .highlight-item, .month-item, .metric-item, .special-value-item, .stat-card { border-color: rgba(175, 213, 242, .19); background: rgba(168, 210, 235, .055); }
.kpi-feature:first-child { background: linear-gradient(145deg, rgba(93, 201, 210, .14), rgba(168, 210, 235, .055)); }
.kpi-feature strong, .kpi-mini strong, .highlight-item strong, .month-item strong, .metric-item strong, .special-value-item strong, .stat-card strong { color: #e9fbff; }
.detail-card, .kpi-feature, .kpi-mini, .stat-card, .metric-item, .special-value-item { transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.kpi-label-row span, .kpi-mini > span, .stat-card > span { color: var(--muted); }
.kpi-label-row .wx-icon, .kpi-mini > span .wx-icon, .stat-card > span .wx-icon { color: #94e6de; margin-right: .35rem; font-size: 1.13rem; }
.comparison-row span { display: inline-flex; align-items: center; gap: .35rem; color: #d3e5f1; }
.comparison-row .wx-icon { color: #9ddfdc; }
.comparison-row strong.is-positive { color: #b4f2d2; }
.comparison-row strong.is-negative { color: #ffc1ba; }
.windrose-area { fill: rgba(123, 224, 219, .3); stroke: #95eadf; filter: drop-shadow(0 0 7px rgba(112,222,218,.3)); }
.windrose-ring, .windrose-spoke { stroke: rgba(175,218,241,.22); }
.windrose-label { fill: #c4dded; }
.rain-heatmap .rain-level-missing { color: #a8bdd2; }
.month-availability { grid-column: 1 / -1; }
.month-rain-bars { display: flex; align-items: end; gap: 3px; height: 5rem; padding: .5rem .15rem .1rem; border-bottom: 1px solid rgba(169,215,239,.3); }
.month-rain-bars > span { flex: 1 1 0; height: var(--rain-height); min-height: 3px; border-radius: .2rem .2rem 0 0; background: linear-gradient(#a1e8f6, #5397d6); }
.month-rain-bars > span.is-missing { background: transparent; border: 1px dashed rgba(169,215,239,.4); }
.annual-single { display: flex; align-items: center; gap: 1.5rem; text-align: left; }
.annual-single .wx-icon { font-size: 4rem; color: #f0d49d; }
.annual-single span { color: #a6e6e1; font-size: .7rem; font-weight: 800; letter-spacing: .12em; }
.annual-single strong { display: block; color: #f8fbff; font-size: 1.7rem; }
.annual-single p { color: #c1d8e7; margin: .2rem 0 0; }

@keyframes root-light { to { background-position: 100% 50%; } }
@keyframes root-orb { to { transform: translate3d(-1rem, 1.2rem, 0) scale(1.06); } }
@keyframes root-drift { to { translate: -3rem 1rem; } }
@keyframes root-rain { to { background-position: 130px 100px; } }
@keyframes root-beacon { 50% { box-shadow: 0 0 0 8px rgba(140,234,221,.04); } }
@keyframes root-icon { 50% { transform: scale(1.05); } }
@media (hover: hover) {
    .forecast-item:hover, .hourly-item:hover, .data-card:hover, .detail-card:hover, .kpi-feature:hover, .kpi-mini:hover, .stat-card:hover, .metric-item:hover { transform: translateY(-2px); border-color: rgba(141,231,225,.37); box-shadow: 0 1.2rem 3.4rem rgba(0, 10, 26, .19); }
}
@media (max-width: 1120px) {
    .hero-stage { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 1rem; }
    .hero-stage .intro h1 { font-size: clamp(3.3rem, 5.5vw, 4.6rem); }
    .forecast-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .public-data-stack > .daily-card, .public-data-stack > .statistics-card { grid-column: 1 / -1; }
}
@media (max-width: 800px) {
    .public-header, .section-nav, .public-shell, .public-footer { width: min(calc(100% - 1.5rem), 90rem); }
    .public-shell { grid-template-columns: 1fr; }
    .hero-stage { grid-template-columns: 1fr; gap: 1.4rem; padding: 1.4rem; }
    .hero-stage .intro { padding: .5rem; }
    .hero-stage .intro h1 { font-size: clamp(3.1rem, 9vw, 5rem); }
    .public-data-stack { grid-template-columns: 1fr; }
    .public-data-stack > .daily-card, .public-data-stack > .statistics-card, .public-data-stack > .wide-card { grid-column: 1 / -1; }
    .forecast-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .public-header, .section-nav, .public-shell, .public-footer { width: calc(100% - 1rem); }
    .public-header { margin-top: .4rem; }
    .section-nav { top: .2rem; }
    .section-nav a { font-size: .76rem; min-height: 2.7rem; }
    .public-shell { gap: .9rem; padding-top: .9rem; }
    .hero-stage { padding: 1.1rem; border-radius: 1.4rem; }
    .hero-stage .intro h1 { font-size: clamp(3rem, 12vw, 4.2rem); }
    .intro-live { font-size: .75rem; margin-top: 1.2rem; }
    .hero-stage .weather-panel { padding: 1rem; }
    .weather-icon { width: 4rem; height: 4rem; border-radius: 1.1rem; }
    .weather-icon .wx-icon { font-size: 2.5rem; }
    .temperature-row strong { font-size: clamp(4.4rem, 18vw, 6rem); }
    .weather-details, .live-supplement-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .detail-card { padding: .7rem; }
    .trend-card { grid-template-columns: auto minmax(0, 1fr); }
    .pressure-trend-copy { grid-column: 2; padding-left: 0; border-left: 0; }
    .forecast-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
    .forecast-item { padding: .8rem .7rem; min-height: 15rem; }
    .hourly-forecast-strip { grid-auto-columns: 9.2rem; }
    .chart-frame { overflow: hidden; }
    .data-card { padding: 1rem; }
    .stat-card strong, .metric-item strong { overflow-wrap: anywhere; }
}
@media (max-width: 420px) {
    .forecast-grid { grid-template-columns: 1fr; }
    .forecast-item { min-height: 0; }
    .forecast-symbol { flex-direction: row; align-items: center; gap: .65rem; }
    .forecast-symbol .wx-icon { font-size: 2.2rem; }
    .forecast-temperature { margin-top: .25rem; }
    .detail-card strong { overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
    .hero-atmosphere *, .hero-atmosphere::after, .weather-icon .wx-icon, .live-beacon, .weather-chart .chart-line, .weather-chart .chart-area, .timeline-line { animation: none !important; }
    .weather-chart .chart-line, .timeline-line { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
    .weather-chart .chart-area { opacity: .8 !important; }
    .reveal, .reveal.is-visible { opacity: 1 !important; transform: none !important; transition: none !important; }
    .forecast-item, .hourly-item, .detail-card, .kpi-feature, .kpi-mini, .stat-card, .metric-item { transform: none !important; }
}

/* Public forecast experience · 2026-09-26 */
.wx-icon.wx-scene { stroke: none; fill: none; filter: drop-shadow(0 5px 8px rgba(2, 15, 38, .22)); }
.weather-icon .wx-icon.wx-scene { filter: drop-shadow(0 6px 14px rgba(252, 211, 132, .32)); }
.wx-sun, .wx-moon { animation: wx-breathe 9s ease-in-out infinite; }
.wx-cloud, .wx-overcast, .wx-partly, .wx-partly-night { animation: wx-drift 11s ease-in-out infinite; }
.wx-rain, .wx-heavy-rain, .wx-showers, .wx-drizzle, .wx-sleet, .wx-snow { animation: wx-breathe 6s ease-in-out infinite; }
.wx-storm { animation: wx-flash 16s ease-in-out infinite; }
.wx-wind { animation: wx-drift 8s ease-in-out infinite; }
@keyframes wx-breathe { 50% { transform: scale(1.045); } }
@keyframes wx-drift { 50% { transform: translateX(2px); } }
@keyframes wx-flash { 0%, 89%, 93%, 100% { filter: drop-shadow(0 4px 8px rgba(3,16,36,.2)); } 91% { filter: drop-shadow(0 0 15px rgba(255,232,164,.65)); } }
.hero-stage { transition: background 1.1s ease; }
.hero-stage[data-weather="neutral"] { background: linear-gradient(110deg, #173c50, #122e49 58%, #303958); }
.hero-stage[data-weather="sun"] .hero-orb { animation: wx-breathe 18s ease-in-out infinite; }
.hero-stage[data-weather="fog"] .hero-cloud, .hero-stage[data-weather="night"] .hero-cloud { opacity: .18; }
.hero-stage[data-weather="rain"] .hero-particles { opacity: .19; }
.section-nav { scroll-snap-type: x proximity; }
.section-nav a { scroll-snap-align: center; }
.carousel-shell { position: relative; min-width: 0; }
.hourly-forecast-strip, .two-week-strip { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-inline: contain; }
.hourly-forecast-strip::-webkit-scrollbar, .two-week-strip::-webkit-scrollbar { display: none; }
.hourly-forecast-strip:focus-visible, .two-week-strip:focus-visible { outline: 2px solid #9cefe5; outline-offset: 2px; }
.carousel-arrow { position: absolute; z-index: 3; top: 42%; width: 2.8rem; height: 2.8rem; border: 1px solid rgba(210,242,255,.48); border-radius: 50%; background: rgba(8,27,44,.85); color: #f3fbff; font-size: 2rem; line-height: 1; backdrop-filter: blur(12px); cursor: pointer; box-shadow: 0 10px 25px rgba(0,9,24,.3); }
.carousel-arrow.previous { left: -.75rem; }
.carousel-arrow.next { right: -.75rem; }
.carousel-arrow:disabled { opacity: 0; pointer-events: none; }
.carousel-arrow:not(:disabled):hover { background: #315b78; transform: scale(1.06); }
.carousel-arrow:focus-visible, .radar-play-controls button:focus-visible, #radarTimeline:focus-visible, .two-week-item:focus-visible { outline: 2px solid #a8f3e9; outline-offset: 3px; }
.hourly-item > .wx-icon.wx-scene { color: inherit; font-size: 3.25rem; }
.hourly-item { min-height: 16rem; }
.hourly-item.is-next::before { content: "NÄCHSTE STUNDE"; color: #a5eee2; font-size: .57rem; font-weight: 800; letter-spacing: .07em; }
.hourly-temperature-trend { display: flex; align-items: center; gap: 1rem; min-height: 3rem; padding: .15rem .7rem; margin-bottom: .35rem; border-radius: .7rem; background: rgba(95,175,205,.08); }
.hourly-temperature-trend span { flex: none; font-size: .72rem; color: #d6eaf4; }
.hourly-temperature-trend svg { width: 100%; height: 2.5rem; }
.hourly-temperature-trend polyline { fill: none; stroke: #ffd08e; stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.two-week-section { background: linear-gradient(145deg, rgba(25,58,80,.96), rgba(18,33,59,.95)); }
.two-week-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(11rem, 12rem); gap: .7rem; padding: .4rem .2rem 1rem; }
.two-week-item { display: flex; flex-direction: column; gap: .33rem; padding: 1rem .85rem; border: 1px solid rgba(176,219,244,.23); border-radius: 1.1rem; background: linear-gradient(155deg, rgba(189,225,252,.1), rgba(82,146,194,.06)); scroll-snap-align: start; cursor: pointer; transition: transform .2s, border-color .2s; }
.two-week-item.is-next, .two-week-item.is-selected { border-color: rgba(143,236,227,.78); background: linear-gradient(145deg, rgba(88,198,198,.2), rgba(75,124,176,.11)); }
.two-week-item:hover { transform: translateY(-3px); }
.two-week-item .daily-glyph { width: 4.4rem; height: 4.4rem; margin: .25rem auto; }
.two-week-item .daily-condition { color: #f1f8ff; font-size: .87rem; min-height: 2.3rem; text-align: center; }
.two-week-item > span { color: #d4e8f5; font-size: .75rem; }
.daily-temperatures { display: flex; align-items: baseline; justify-content: space-between; margin: .25rem 0 .6rem; border-bottom: 1px solid rgba(200,234,247,.16); padding-bottom: .6rem; }
.daily-temperatures strong { color: #fff4dc; font-size: 1.5rem; }
.daily-temperatures span { color: #c5e7ff; font-size: 1.12rem; }
.daily-temperatures strong, .daily-temperatures span { white-space: nowrap; }
.trend-section { background: linear-gradient(145deg, #19374f, #10263e 65%, #1c3053); }
.forecast-trend-controls { display: flex; width: max-content; max-width: 100%; overflow-x: auto; scrollbar-width: none; margin: .9rem 0; }
.trend-frame { position: relative; min-height: 310px; border: 1px solid rgba(182,224,246,.16); border-radius: 1.2rem; background: linear-gradient(180deg, rgba(19,44,67,.65), rgba(10,29,48,.63)); }
#forecastTrendChart { display: block; width: 100%; height: clamp(280px, 29vw, 380px); touch-action: pan-y; }
.forecast-gridline { stroke: rgba(195,226,244,.2); stroke-dasharray: 4 7; }
.forecast-axis { fill: #d0e4f1; font-size: 13px; font-family: inherit; }
.forecast-line { fill: none; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; animation: trend-reveal .8s ease both; }
.forecast-line.primary { stroke: #ffce83; }
.forecast-line.secondary { stroke: #82ceff; stroke-width: 2.6; }
.forecast-band { fill: url(#forecastBand); }
.forecast-cloud-area { fill: rgba(132,194,236,.17); }
.forecast-rain-bar { fill: #6bbfff; }
.forecast-point { fill: #ffdea3; stroke: #243c52; stroke-width: 2; }
.forecast-point.low { fill: #95d9ff; }
.forecast-crosshair { stroke: #b2f6ee; stroke-width: 1.5; stroke-dasharray: 4 5; }
.forecast-trend-tooltip { position: absolute; z-index: 5; top: 3.3rem; max-width: min(23rem, calc(100% - 1rem)); padding: .7rem .9rem; border: 1px solid #9ee2eb; border-radius: .7rem; background: #102b42; color: #f4faff; font-size: .82rem; box-shadow: 0 12px 30px rgba(0,12,28,.5); pointer-events: none; animation: wx-breathe .25s ease both 1; }
@keyframes trend-reveal { from { opacity: .15; } to { opacity: 1; } }
.radar-section { background: linear-gradient(140deg, #19394c, #0f2c47 65%, #19344f); }
.radar-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(13rem, .7fr); gap: clamp(.8rem, 2vw, 2rem); margin-top: 1rem; }
.radar-map { position: relative; aspect-ratio: 1 / .79; overflow: hidden; border: 1px solid #7197ae; border-radius: 1rem; background: repeating-linear-gradient(35deg, #24495c 0 24px, #2b5260 25px 48px); }
.radar-tiles, #radarOverlay { position: absolute; inset: 0; width: 100%; height: 100%; }
.radar-tiles { overflow: hidden; opacity: .78; }
.radar-tiles img { position: absolute; display: block; max-width: none; }
#radarOverlay { object-fit: fill; pointer-events: none; opacity: 0; transition: opacity .32s ease; }
#radarOverlay.frame-ready { opacity: .87; }
.radar-marker { position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: center; transform: translate(-50%, -50%); text-align: center; white-space: nowrap; }
.radar-marker i { width: 17px; height: 17px; border: 4px solid #fff; border-radius: 50%; background: #ef725b; box-shadow: 0 0 0 7px rgba(239,114,91,.25), 0 3px 12px #102333; }
.radar-marker span { margin-top: .5rem; padding: .2rem .5rem; border-radius: .4rem; background: rgba(8,31,47,.87); color: #fff; font-size: .76rem; font-weight: 800; }
.radar-map-credit { position: absolute; bottom: .3rem; right: .3rem; z-index: 2; padding: .15rem .4rem; background: rgba(8,27,42,.8); color: #f1f8ff; font-size: .65rem; }
.radar-side { display: flex; flex-direction: column; gap: .7rem; color: #dcecf7; min-width: 0; }
.radar-kicker { color: #99e4dc; font-size: .7rem; font-weight: 800; letter-spacing: .12em; }
.radar-side > strong { color: #fff; font-size: clamp(1.2rem, 2vw, 1.75rem); }
.radar-side > p { line-height: 1.55; font-size: .85rem; }
.radar-play-controls { display: flex; gap: .45rem; }
.radar-play-controls button { padding: .55rem .7rem; border: 1px solid rgba(175,222,246,.4); border-radius: .65rem; background: rgba(114,185,215,.14); color: #fff; cursor: pointer; white-space: nowrap; }
.radar-play-controls button:hover { background: rgba(114,185,215,.31); }
#radarTimeline { width: 100%; accent-color: #8ee7dc; cursor: pointer; }
.radar-range-labels, .radar-legend { display: flex; justify-content: space-between; align-items: center; gap: .3rem; color: #c6dfeb; font-size: .69rem; }
.radar-legend { margin-top: .5rem; }
.radar-legend i { flex: 1; height: .68rem; border-radius: .2rem; background: #4188c0; }
.radar-legend i:nth-of-type(2) { background: #81d4ed; }
.radar-legend i:nth-of-type(3) { background: #f6bf65; }
.radar-legend i:nth-of-type(4) { background: #e46677; }
.radar-side small { color: #bfd9e7; }
@media (max-width: 800px) { .radar-layout { grid-template-columns: 1fr; } .radar-map { aspect-ratio: 1 / .72; } }
@media (max-width: 520px) { .two-week-strip { grid-auto-columns: minmax(10.5rem, 69%); } .hourly-forecast-strip { grid-auto-columns: minmax(9.5rem, 62%); } .carousel-arrow { width: 2.2rem; height: 2.2rem; font-size: 1.55rem; } .radar-map { aspect-ratio: 1; } .radar-marker span { font-size: .64rem; } .forecast-trend-controls button { font-size: .73rem; } .forecast-axis { font-size: 15px; } .daily-temperatures strong { font-size: 1.3rem; } .daily-temperatures span { font-size: .95rem; } }
@media (prefers-reduced-motion: reduce) { .wx-icon, .hero-orb, .forecast-line, .forecast-trend-tooltip { animation: none !important; } .hourly-forecast-strip, .two-week-strip { scroll-behavior: auto; } }

/* Visual acceptance: keep the live reading ahead of decorative hero copy. */
.hero-stage .intro { align-self: center; padding: 1rem clamp(.4rem, 2vw, 1.7rem); }
.hero-stage .intro h1 { font-size: clamp(3.25rem, 4.7vw, 5.1rem); }
.hero-stage .weather-panel { padding: clamp(1rem, 1.7vw, 1.45rem); }
.hero-stage .temperature-block { margin: .7rem 0 .85rem; }
.hero-stage .weather-details, .hero-stage .live-supplement-grid { gap: .42rem; }
.hero-stage .detail-card { padding: .55rem .65rem; }
.hero-stage .trend-card { margin-top: .6rem; padding: .7rem .85rem; }
.hero-stage .weather-source { margin-top: .65rem; }

@media (max-width: 800px) {
    .hero-stage .intro { padding: .2rem .3rem; }
}
@media (max-width: 600px) {
    .hero-stage { gap: .8rem; padding: .85rem; }
    .hero-stage .intro h1 { font-size: clamp(2.55rem, 10.5vw, 3.6rem); margin: .65rem 0; line-height: .98; }
    .hero-stage .intro p { display: none; }
    .intro-live { margin-top: .45rem; padding: .5rem .7rem; }
    .hero-stage .weather-panel { padding: .85rem; }
    .hero-stage .temperature-block { margin: .65rem 0 .8rem; }
    .hero-stage .detail-card { padding: .6rem; }
    .hourly-section .carousel-shell, .two-week-section .carousel-shell { margin-top: 3rem; }
    .hourly-section .carousel-arrow, .two-week-section .carousel-arrow { top: -2.9rem; width: 2.75rem; height: 2.75rem; }
    .hourly-section .carousel-arrow.previous, .two-week-section .carousel-arrow.previous { left: auto; right: 3rem; }
    .hourly-section .carousel-arrow.next, .two-week-section .carousel-arrow.next { right: 0; }
    .radar-play-controls button { min-height: 2.75rem; }
    .forecast-day-label:nth-last-child(2) { display: none; }
}

/* Premium public weather: weather is the composition, not a uniform dashboard. */
.public-header, .section-nav, .public-shell, .public-footer { width: min(calc(100% - 2.5rem), 93rem); }
.public-shell { column-gap: 1.3rem; row-gap: 1.4rem; }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-width: 2.8rem; min-height: 2.8rem; padding: .4rem .8rem; border: 1px solid rgba(176,221,240,.35); border-radius: 1rem; color: #effaff; background: rgba(139,194,227,.12); font: inherit; font-size: .83rem; cursor: pointer; }
.theme-toggle:hover, .theme-toggle:focus-visible { border-color: #9dece3; background: rgba(135,220,225,.22); outline-offset: 3px; }
.section-nav a { min-height: 2.75rem; display: inline-flex; align-items: center; }
.hero-stage { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); min-height: 31rem; background-image: linear-gradient(125deg, #13394f 0%, #173550 52%, #303757 100%); }
.hero-stage[data-weather="storm"] { background-image: linear-gradient(125deg, #182a43, #242743 55%, #343450); }
.hero-stage[data-weather="storm"] .hero-atmosphere::after { animation: storm-glimmer 18s ease-in-out infinite; }
.hero-stage[data-weather="sun"] .hero-atmosphere::after { background: radial-gradient(circle at 65% 30%, rgba(255,207,112,.22), transparent 55%); }
.hero-atmosphere::after { background-size: auto; animation: hero-shimmer 18s ease-in-out infinite alternate; will-change: transform; }
.hero-stage[data-weather="rain"] .hero-particles, .hero-stage[data-weather="wind"] .hero-particles { background-size: auto; animation: weather-drift 14s linear infinite; will-change: transform; }
.hero-stage .intro h1 { font-size: clamp(3.1rem, 4.4vw, 5rem); }
.hero-stage .weather-panel { border-radius: 1.4rem; }
.weather-panel-head { align-items: start; }
.weather-icon { flex-shrink: 0; }
.weather-icon .wx-icon.wx-scene { animation: wx-breathe 10s ease-in-out infinite; }
.weather-details { grid-template-columns: repeat(3, minmax(0,1fr)); }
.live-supplement-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
.hero-stage .detail-card { border-radius: .8rem; }
.hero-stage .detail-card:first-child { background: rgba(155,227,216,.13); }
.temperature-row strong { font-variant-numeric: tabular-nums; letter-spacing: -.08em; }
.trend-card { border-radius: 1rem; }
.forecast-section { border-radius: 1.4rem; box-shadow: 0 1rem 3rem rgba(1,12,27,.13); }
.hourly-forecast-strip, .two-week-strip { padding-bottom: .65rem; }
.hourly-item { align-items: flex-start; position: relative; min-height: 17.5rem; border-radius: 1.05rem; background: linear-gradient(158deg, rgba(213,238,255,.1), rgba(71,128,173,.045)); }
.hourly-item .hourly-glyph { align-self: center; }
.hourly-condition { width: 100%; }
.hourly-item > strong { width: 100%; text-align: center; font-size: 1.62rem; }
.hourly-fact { font-size: .76rem; white-space: normal; line-height: 1.45; }
.hourly-fact .wx-icon { font-size: 1rem; }
.hourly-item.is-next { box-shadow: inset 0 0 0 1px rgba(156,244,230,.25), 0 .4rem 1.7rem rgba(63,175,200,.15); }
.forecast-grid { grid-template-columns: repeat(7, minmax(0,1fr)); }
.forecast-item { border-radius: 1.05rem; }
.forecast-item, .hourly-item, .two-week-item { animation: card-arrive .48s ease both; }
.forecast-item:nth-child(3n+2), .hourly-item:nth-child(3n+2), .two-week-item:nth-child(3n+2) { animation-delay: .06s; }
.forecast-item:nth-child(3n), .hourly-item:nth-child(3n), .two-week-item:nth-child(3n) { animation-delay: .12s; }
.forecast-symbol .wx-icon { font-size: 3.45rem; }
.forecast-temperature strong { font-size: 1.95rem; }
.forecast-temperature span { font-size: .9rem; }
.two-week-item { min-height: 17.8rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.11); }
.two-week-item .daily-glyph { width: 4.9rem; height: 4.9rem; }
.two-week-item .daily-temperatures strong { font-size: 1.7rem; }
.two-week-item .daily-temperatures span { font-size: 1.12rem; }
.two-week-item.is-selected { box-shadow: 0 0 0 1px rgba(140,234,223,.4), 0 .7rem 2rem rgba(8,26,47,.3); }
.forecast-line.primary { stroke: #8cdefb; }
#forecastTrendChart[data-metric="wind"] .forecast-line.primary { stroke: #7ee6d2; }
#forecastTrendChart[data-metric="wind"] .forecast-line.secondary { stroke: #d5edff; }
#forecastTrendChart[data-metric="precipitation"] .forecast-line.secondary { stroke: #b6e8ff; }
#forecastTrendChart[data-metric="cloud"] .forecast-line.primary { stroke: #b3c7ff; }
.forecast-active-point { fill: #a6eff3; stroke: #103755; stroke-width: 3; filter: drop-shadow(0 0 5px rgba(130,240,242,.6)); pointer-events: none; }
.forecast-trend-tooltip[hidden] { display: none; }
.forecast-trend-tooltip { animation: none; line-height: 1.5; }
.weather-chart[data-metric="temperature"] .chart-line { stroke: #8bdfff; }
.weather-chart[data-metric="precipitation"] .chart-line { stroke: #6bbfff; }
.weather-chart[data-metric="wind"] .chart-line { stroke: #78e4d7; }
.weather-chart[data-metric="humidity"] .chart-line { stroke: #8fe2b1; }
.weather-chart[data-metric="pressure"] .chart-line { stroke: #b1b0ff; }
.chart-axis-label, .chart-x-label, .forecast-axis, .windrose-label { fill: #ccdeee; }
.chart-tooltip, .forecast-trend-tooltip { color: #f6fbff; background: #102b42; }
.kpi-grid { grid-template-columns: repeat(6, minmax(0,1fr)); }
.kpi-feature { grid-column: span 3; background: linear-gradient(145deg, rgba(77,181,209,.18), rgba(97,160,206,.055)); }
.kpi-mini { grid-column: span 2; }
.kpi-mini.pressure-deltas { grid-column: span 4; }
.kpi-feature strong { font-size: clamp(1.35rem, 2vw, 2.1rem); }
.kpi-mini strong { font-size: 1.35rem; }
.statistics-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
.stat-card:nth-child(1), .stat-card:nth-child(2) { background: rgba(93,202,202,.13); }
.rain-details-card { background: linear-gradient(150deg, rgba(21,61,91,.97), rgba(13,29,51,.88)); }
.solar-card { background: linear-gradient(150deg, rgba(74,70,63,.59), rgba(26,42,61,.92)); }
.rain-heatmap-card { background: linear-gradient(145deg, rgba(19,49,76,.94), rgba(9,30,51,.88)); }
.radar-section { border-color: rgba(123,214,244,.4); box-shadow: 0 1rem 4rem rgba(21,117,157,.19); }
.radar-layout { grid-template-columns: minmax(0, 8fr) minmax(19rem, 4fr); align-items: start; }
.radar-map { aspect-ratio: 1 / .78; min-height: 24rem; box-shadow: inset 0 0 4rem rgba(5,26,47,.28); }
.radar-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; opacity: 0; pointer-events: none; transition: opacity .36s ease; }
#radarOverlay.frame-active, #radarOverlayNext.frame-active { opacity: .88; }
.radar-marker i { box-shadow: 0 0 0 7px rgba(239,114,91,.28), 0 0 22px rgba(240,153,101,.65), 0 3px 12px #102333; }
.radar-play-controls button { min-height: 2.8rem; }
.radar-ticks { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: .35rem; }
.radar-ticks button { position: static; min-height: 2.75rem; padding: .25rem; border: 1px solid rgba(171,217,241,.24); border-radius: .55rem; background: rgba(143,194,229,.08); color: #d8eaf7; font: inherit; font-size: .73rem; cursor: pointer; }
.radar-ticks button:hover, .radar-ticks button:focus-visible { border-color: #9fe8e4; outline-offset: 2px; }
.radar-ticks button[aria-current="true"] { color: #092a35; border-color: #b4f1e7; background: #a3e9de; font-weight: 850; box-shadow: 0 0 1.1rem rgba(129,225,222,.3); }
.radar-ticks button:not([aria-current="true"]):nth-child(n+8) { border-bottom-color: rgba(150,202,250,.53); }
.radar-legend { gap: .45rem; }
.radar-legend i { height: .85rem; border: 1px solid rgba(255,255,255,.14); }
.source-section { padding: clamp(1.3rem, 3vw, 2rem); border: 1px solid var(--panel-border); border-radius: 1.3rem; background: rgba(18,41,64,.72); }
.source-section h2 { margin: .3rem 0 1rem; font-size: clamp(1.4rem,2vw,2rem); }
.source-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .8rem; }
.source-grid p { margin: 0; padding: 1rem; border-left: 2px solid #8ceadd; background: rgba(127,202,231,.06); color: var(--muted); font-size: .87rem; }
.source-grid strong { display: block; margin-bottom: .35rem; color: var(--text); }
@keyframes hero-shimmer { to { transform: translate3d(2%,0,0); opacity: .75; } }
@keyframes weather-drift { to { transform: translate3d(-4%,7%,0); } }
@keyframes storm-glimmer { 0%,87%,90%,100% { opacity: .16; } 88% { opacity: .27; } }
@keyframes card-arrive { from { opacity: .4; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 1180px) {
    .forecast-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
    .radar-layout { grid-template-columns: minmax(0, 7fr) minmax(16rem,5fr); }
    .source-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 800px) {
    .public-header, .section-nav, .public-shell, .public-footer { width: calc(100% - 1.25rem); }
    .hero-stage { grid-template-columns: 1fr; min-height: 0; }
    .radar-layout { grid-template-columns: 1fr; }
    .radar-map { aspect-ratio: 1 / .72; min-height: 0; }
    .radar-side { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: center; }
    .radar-side > p, .radar-play-controls, .radar-side > label, #radarTimeline, .radar-ticks, .radar-range-labels, .radar-legend, .radar-side > small { grid-column: 1 / -1; }
    .forecast-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 600px) {
    .public-header, .section-nav, .public-shell, .public-footer { width: calc(100% - 1rem); }
    .header-context { gap: .4rem; }
    .theme-toggle { padding: .3rem; }
    .theme-toggle span { display: none; }
    .hero-stage { padding: .85rem; }
    .hero-stage .intro { padding: 0 .2rem; }
    .hero-stage .intro .eyebrow { font-size: .7rem; }
    .hero-stage .intro h1 { font-size: clamp(2.15rem,9vw,3.15rem); line-height: 1; margin: .35rem 0; }
    .hero-stage .intro h1 span br { display: none; }
    .intro-live { margin-top: .3rem; }
    .hero-stage .weather-panel { padding: .8rem; }
    .temperature-row strong { font-size: clamp(4.1rem,17vw,5.4rem); }
    .weather-details, .live-supplement-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .forecast-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .forecast-item { min-height: 16rem; }
    .forecast-item p, .forecast-item > small { font-size: .76rem; }
    .hourly-forecast-strip { grid-auto-columns: minmax(9.5rem,64%); }
    .two-week-strip { grid-auto-columns: minmax(10.5rem,71%); }
    .radar-map { aspect-ratio: 1; }
    .radar-ticks { grid-template-columns: repeat(5,minmax(0,1fr)); }
    .radar-ticks button { font-size: .72rem; }
    .kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .kpi-feature, .kpi-mini, .kpi-mini.pressure-deltas { grid-column: span 2; }
    .kpi-mini:not(.pressure-deltas) { grid-column: span 1; }
    .source-grid { grid-template-columns: 1fr; }
    .forecast-trend-controls button, .control-group button { min-height: 2.75rem; }
    .chart-tooltip { font-size: .78rem; }
}
@media (max-width: 420px) {
    .forecast-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .forecast-item { padding: .7rem .55rem; }
    .forecast-symbol { flex-direction: column; align-items: flex-start; }
    .forecast-symbol .wx-icon { font-size: 2.65rem; }
    .forecast-temperature { flex-direction: column; align-items: start; gap: 0; }
    .forecast-temperature strong { font-size: 1.65rem; }
    .radar-ticks { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .hero-stage .weather-details, .hero-stage .live-supplement-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .hero-stage .detail-card { padding: .45rem .4rem; }
    .hero-stage .detail-card strong { font-size: .91rem; }
    .hero-stage .detail-card small { font-size: .66rem; }
    .two-week-strip { grid-auto-columns: clamp(12.5rem, 66vw, 16rem); }
}

/* Optional explicit light theme. The live hero remains dark for legible white type. */
html[data-theme="light"] { color-scheme: light; --bg-1: #f3f8fb; --bg-2: #e7f0f6; --panel: #fff; --panel-soft: #f1f7fb; --panel-border: #b9cfdd; --text: #183149; --muted: #476277; --accent: #117b81; --accent-strong: #196ba0; background: #edf5fa; }
html[data-theme="light"] body { color: var(--text); background: radial-gradient(circle at 18% 6%, #daf1f3, transparent 35rem), linear-gradient(#f2f8fc,#e9f1f8); }
html[data-theme="light"] .public-header, html[data-theme="light"] .section-nav { color: #17344b; background: rgba(253,255,255,.94); border-color: #b6cfdd; }
html[data-theme="light"] .header-time time, html[data-theme="light"] .brand-mark svg { color: #116e80; stroke: #116e80; }
html[data-theme="light"] .section-nav a { color: #375970; }
html[data-theme="light"] .section-nav a[aria-current="page"] { color: #093638; background: #b9eee6; border-color: #88cfc9; }
html[data-theme="light"] .theme-toggle { color: #153b52; background: #e8f4f9; border-color: #a6cad9; }
html[data-theme="light"] .forecast-section, html[data-theme="light"] .data-card, html[data-theme="light"] .source-section { background: linear-gradient(145deg, #fff, #f0f7fb); border-color: #b9cfdd; box-shadow: 0 .8rem 2.8rem rgba(37,81,112,.08); }
html[data-theme="light"] .section-label, html[data-theme="light"] .forecast-section h2, html[data-theme="light"] .data-card h2, html[data-theme="light"] .source-section h2 { color: #163c52; }
html[data-theme="light"] .forecast-context, html[data-theme="light"] .forecast-section-head .data-status, html[data-theme="light"] .data-status, html[data-theme="light"] .analysis-divider-note, html[data-theme="light"] .chart-caption, html[data-theme="light"] .source-grid p { color: #476277; }
html[data-theme="light"] .hourly-item, html[data-theme="light"] .two-week-item, html[data-theme="light"] .forecast-item, html[data-theme="light"] .kpi-feature, html[data-theme="light"] .kpi-mini, html[data-theme="light"] .stat-card, html[data-theme="light"] .comparison-row, html[data-theme="light"] .metric-item, html[data-theme="light"] .highlight-item, html[data-theme="light"] .month-item, html[data-theme="light"] .special-value-item, html[data-theme="light"] .daily-weather-item, html[data-theme="light"] .annual-row { background: #f1f8fc; border-color: #b8d1df; color: #294960; }
html[data-theme="light"] .hourly-item.is-next, html[data-theme="light"] .two-week-item.is-next, html[data-theme="light"] .two-week-item.is-selected { background: #e1f6f4; border-color: #69bcb5; }
html[data-theme="light"] .hourly-item time, html[data-theme="light"] .hourly-condition, html[data-theme="light"] .hourly-item strong, html[data-theme="light"] .hourly-fact, html[data-theme="light"] .forecast-item-head strong, html[data-theme="light"] .forecast-item-head small, html[data-theme="light"] .forecast-item p, html[data-theme="light"] .forecast-item > small, html[data-theme="light"] .forecast-symbol span, html[data-theme="light"] .forecast-temperature strong, html[data-theme="light"] .forecast-temperature span, html[data-theme="light"] .two-week-item .daily-condition, html[data-theme="light"] .two-week-item > span, html[data-theme="light"] .two-week-item .daily-temperatures strong, html[data-theme="light"] .two-week-item .daily-temperatures span { color: #23465b; }
html[data-theme="light"] .hourly-item.is-next::before { color: #176d70; }
html[data-theme="light"] .hourly-temperature-trend, html[data-theme="light"] .chart-frame, html[data-theme="light"] .timeline-frame, html[data-theme="light"] .annual-chart-frame, html[data-theme="light"] .trend-frame { background: #eaf3f9; border-color: #b9cfdd; }
html[data-theme="light"] .hourly-temperature-trend span, html[data-theme="light"] .forecast-axis, html[data-theme="light"] .chart-axis-label, html[data-theme="light"] .chart-x-label, html[data-theme="light"] .windrose-label { color: #2b516a; fill: #2b516a; }
html[data-theme="light"] .chart-grid, html[data-theme="light"] .forecast-gridline { stroke: rgba(44,89,122,.22); }
html[data-theme="light"] .control-group button { background: #edf5fa; border-color: #a8c9d9; color: #294b63; }
html[data-theme="light"] .control-group button[aria-pressed="true"] { color: #063e43; background: #a5e6df; border-color: #6ac3bc; }
html[data-theme="light"] .kpi-feature strong, html[data-theme="light"] .kpi-mini strong, html[data-theme="light"] .stat-card strong, html[data-theme="light"] .metric-item strong, html[data-theme="light"] .special-value-item strong, html[data-theme="light"] .highlight-item strong, html[data-theme="light"] .month-item strong, html[data-theme="light"] .annual-row strong, html[data-theme="light"] .source-grid strong { color: #153e55; }
html[data-theme="light"] .kpi-label-row span, html[data-theme="light"] .kpi-mini > span, html[data-theme="light"] .stat-card > span, html[data-theme="light"] .data-quality, html[data-theme="light"] .metric-item small, html[data-theme="light"] .special-value-item small, html[data-theme="light"] .highlight-item small, html[data-theme="light"] .month-item small, html[data-theme="light"] .annual-legend, html[data-theme="light"] .comparison-row span { color: #476278; }
html[data-theme="light"] .radar-side, html[data-theme="light"] .radar-side > strong { color: #183c54; }
html[data-theme="light"] .radar-kicker, html[data-theme="light"] .radar-side small, html[data-theme="light"] .radar-range-labels, html[data-theme="light"] .radar-legend { color: #365b73; }
html[data-theme="light"] .radar-play-controls button, html[data-theme="light"] .radar-ticks button { color: #22455d; background: #e7f2f9; border-color: #a6c7d8; }
html[data-theme="light"] .radar-ticks button[aria-current="true"] { color: #09353e; background: #afe9df; }
html[data-theme="light"] .source-grid p { background: #eef7fa; }
html[data-theme="light"] .chart-tooltip, html[data-theme="light"] .forecast-trend-tooltip { color: #f6fbff; background: #102b42; }
html[data-theme="light"] .public-footer { color: #48677b; }

/* Final editorial pass: a connected weather narrative, not identical tiles. */
.public-shell { row-gap: clamp(1.05rem, 1.65vw, 1.8rem); }
.public-shell > .forecast-section, .public-shell > .analysis-divider { scroll-margin-top: 5.5rem; }
.public-data-stack [id] { scroll-margin-top: 5.5rem; }
.forecast-section-head h2, .data-card-head h2 { font-size: clamp(1.48rem, 2.15vw, 2.1rem); letter-spacing: -.045em; }
.section-label, .radar-kicker { font-size: .75rem; letter-spacing: .125em; font-weight: 800; }
.public-shell strong, .public-footer strong, .radar-side > strong { font-variant-numeric: tabular-nums; }
.hero-stage { min-height: 34rem; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); box-shadow: 0 2rem 5rem rgba(1,11,27,.38), inset 0 1px rgba(255,255,255,.15); }
.hero-stage .intro h1 { font-size: clamp(3.6rem, 4.6vw, 5.65rem); }
.hero-stage .weather-panel { border-color: rgba(207,240,255,.21); background: linear-gradient(150deg, rgba(11,37,58,.59), rgba(13,31,53,.49)); }
.weather-panel-head { align-items: center; gap: 1rem; }
.weather-icon { width: clamp(6.8rem, 9vw, 9.4rem); height: clamp(6.8rem, 9vw, 9.4rem); border-radius: 2rem; }
.weather-icon .wx-icon, .weather-icon .wx-icon.wx-scene { font-size: clamp(5.7rem, 8vw, 8.2rem); filter: drop-shadow(0 12px 14px rgba(1,16,36,.38)); }
.temperature-row strong { font-size: clamp(6rem, 8vw, 8.6rem); line-height: 1; letter-spacing: -.08em; }
.weather-status { font-size: 1.04rem; color: #e5f7fc; }
.hero-stage[data-weather="sun"] .hero-orb { animation-duration: 28s; }
.hero-stage[data-weather="rain"] .hero-particles { opacity: .12; animation-duration: 24s; }
.hero-stage[data-weather="night"] .hero-particles { opacity: .18; background-size: 103px 119px; }
.hero-cloud { opacity: .65; animation-duration: 52s; }
.hero-stage .detail-card { border-color: rgba(191,226,244,.11); background: rgba(157,215,242,.05); }
.hero-stage .detail-card strong { font-size: 1.06rem; }
.hero-stage .detail-card small, .detail-label { font-size: .75rem; }
.hourly-section, #dailyForecastSection, .two-week-section { border-color: rgba(166,218,241,.17); background: linear-gradient(150deg, rgba(24,53,74,.77), rgba(14,34,57,.68)); box-shadow: 0 .9rem 2rem rgba(2,13,28,.12); }
.radar-section, .trend-section, .chart-card, #todaySection { border-color: rgba(145,218,238,.29); box-shadow: 0 1.5rem 4rem rgba(1,14,31,.24), inset 0 1px rgba(255,255,255,.07); }
.hourly-forecast-strip { grid-auto-columns: clamp(10.8rem, 12.2vw, 12.4rem); gap: .8rem; }
.hourly-item { padding: 1.05rem .9rem; min-height: 18.2rem; }
.hourly-item > .wx-icon.wx-scene { font-size: 4.1rem; }
.hourly-item.is-next { border-color: #9be9dc; background: linear-gradient(155deg, rgba(93,211,210,.23), rgba(84,132,185,.08)); box-shadow: 0 .35rem 1.5rem rgba(85,208,214,.17), inset 0 1px rgba(255,255,255,.1); }
.hourly-item.is-next::before { font-size: .75rem; }
.hourly-item .hourly-fact, .hourly-condition { font-size: .78rem; }
.carousel-arrow { opacity: .65; transition: opacity .2s, transform .2s, background .2s; }
.carousel-shell:hover .carousel-arrow:not(:disabled), .carousel-arrow:focus-visible { opacity: 1; }
.forecast-grid { gap: .85rem; }
.forecast-item { padding: 1.05rem .9rem; min-height: 19rem; }
.forecast-symbol { align-items: center; margin: .8rem 0 .4rem; }
.forecast-symbol .wx-icon { font-size: 4rem; }
.forecast-symbol span { font-size: .82rem; }
.forecast-item-head small, .forecast-item > small, .forecast-item p { font-size: .78rem; }
.forecast-temperature strong { font-size: 2.1rem; }
.two-week-strip { grid-auto-columns: clamp(11.9rem, 14.3vw, 13.4rem); gap: .8rem; }
.two-week-item { min-height: 20rem; padding: 1.1rem; }
.two-week-item .daily-glyph { width: 5.5rem; height: 5.5rem; }
.two-week-item .daily-temperatures strong { font-size: 2.05rem; }
.two-week-item > span { font-size: .8rem; }
.trend-frame, .chart-frame, .timeline-frame, .annual-chart-frame { background: linear-gradient(180deg, rgba(14,37,61,.89), rgba(9,28,50,.82)); border-color: rgba(170,220,242,.25); }
.chart-axis-label, .chart-x-label, .forecast-axis, .windrose-label, .annual-chart text { fill: #bdcee0; font-size: 13px; }
.chart-grid, .forecast-gridline { stroke: rgba(192,225,247,.19); }
.forecast-point, .chart-dot, .chart-highlight { transition: r .18s ease, filter .18s ease; }
.forecast-point:hover, .chart-dot:hover, .chart-highlight:hover { r: 7px; filter: drop-shadow(0 0 5px #9de8f2); }
.chart-tooltip, .forecast-trend-tooltip { border-radius: .85rem; backdrop-filter: blur(18px); box-shadow: 0 1.2rem 3rem rgba(0,13,32,.45); }
.radar-layout { grid-template-columns: minmax(0, 8fr) minmax(19rem, 4fr); }
.radar-map { aspect-ratio: 1 / .7; min-height: 27rem; border-color: rgba(174,226,248,.6); }
.radar-frame { transition: opacity .26s ease; }
.radar-map.is-loading::after { content: ""; position: absolute; z-index: 4; top: 1rem; right: 1rem; width: 1.05rem; height: 1.05rem; border: 2px solid rgba(255,255,255,.3); border-top-color: #c5f6f1; border-radius: 50%; animation: radar-spin 1s linear infinite; }
@keyframes radar-spin { to { transform: rotate(360deg); } }
.radar-marker i { position: relative; width: 21px; height: 21px; background: #fff; border: 5px solid #51bed5; box-shadow: 0 0 0 7px rgba(93,220,229,.26), 0 0 20px #152c45; }
.radar-marker i::after { content: ""; position: absolute; inset: -13px; border: 2px solid rgba(201,249,252,.8); border-radius: 50%; animation: radar-pulse 3.5s ease-out infinite; }
@keyframes radar-pulse { 0% { transform: scale(.75); opacity: .8; } 100% { transform: scale(1.9); opacity: 0; } }
.radar-play-controls { justify-content: center; }
#radarPlay { flex: 1; max-width: 12rem; font-weight: 800; background: rgba(119,218,222,.22); border-color: rgba(154,236,228,.55); }
.radar-ticks button { font-size: .78rem; }
.radar-ticks button:not([aria-current="true"]):nth-child(-n+7) { background: rgba(99,157,213,.12); }
.radar-ticks button:not([aria-current="true"]):nth-child(n+8) { background: rgba(138,198,185,.12); }
.more-statistics { grid-column: 1 / -1; min-width: 0; }
.more-statistics > summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; cursor: pointer; list-style: none; padding: 1.2rem 1.6rem; border: 1px solid rgba(166,217,239,.22); border-radius: 1.25rem; background: linear-gradient(110deg, rgba(47,96,115,.42), rgba(18,44,68,.55)); transition: background .2s; }
.more-statistics > summary::-webkit-details-marker { display: none; }
.more-statistics > summary:hover { background: rgba(58,111,130,.44); }
.more-statistics > summary:focus-visible { outline: 2px solid #a5f0e6; outline-offset: 3px; }
.more-statistics > summary > span:first-child { display: flex; flex-direction: column; gap: .15rem; }
.more-statistics > summary small { font-size: .75rem; letter-spacing: .12em; color: #a4e5df; }
.more-statistics > summary strong { font-size: clamp(1.2rem, 2vw, 1.65rem); color: var(--text); }
.more-statistics > summary span span { font-size: .85rem; color: var(--muted); }
.more-chevron { font-size: 2rem; color: #a5e8dd; transition: transform .2s; }
.more-statistics[open] .more-chevron { transform: rotate(180deg); }
.more-statistics-content { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 1rem; padding-top: 1rem; }
.more-statistics-content > * { grid-column: 1 / -1; min-width: 0; }
.more-statistics-content .data-card { border-color: rgba(162,211,239,.13); box-shadow: none; background: linear-gradient(150deg, rgba(22,47,68,.69), rgba(11,31,52,.7)); }
.more-statistics-content .insight-grid { min-width: 0; }
.source-section { padding: 1.2rem 1.5rem; border-color: rgba(156,207,230,.16); background: rgba(21,41,62,.52); box-shadow: none; }
.source-section h2 { font-size: 1.25rem; }
.source-explainer { max-width: 84ch; margin: 0 0 1.2rem; color: var(--muted); font-size: .91rem; line-height: 1.6; }
.source-explainer h3 { margin: 0 0 .5rem; color: var(--text); font-size: 1rem; }
.source-explainer p { margin: .55rem 0; }
.source-grid p { padding: .6rem .8rem; font-size: .8rem; }
.source-section .data-quality { margin-top: .8rem; padding: .75rem 0 0; border-top: 1px solid rgba(170,216,238,.18); font-size: .8rem; }
.public-footer { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 1.2rem; padding: 1.6rem 0 2.5rem; border-top: 1px solid var(--panel-border); font-size: .8rem; }
.public-footer > div { display: flex; flex-direction: column; gap: .25rem; }
.public-footer small { color: #9bc8d4; font-size: .75rem; font-weight: 800; letter-spacing: .08em; }
.footer-brand strong { color: var(--text); font-size: 1.05rem; }
.back-to-top:not([hidden]) { display: grid; place-items: center; position: fixed; z-index: 10; right: max(1.1rem, env(safe-area-inset-right)); bottom: max(1.3rem, env(safe-area-inset-bottom)); width: 3rem; height: 3rem; border: 1px solid rgba(176,229,237,.5); border-radius: 50%; background: rgba(15,45,66,.88); color: #efffff; font-size: 1.5rem; backdrop-filter: blur(14px); box-shadow: 0 .5rem 1.5rem rgba(3,16,32,.35); cursor: pointer; }
.back-to-top:hover { background: #28667a; }
html[data-theme="light"] .more-statistics > summary { background: #e7f3f7; border-color: #b7cedb; }
html[data-theme="light"] .more-statistics > summary strong, html[data-theme="light"] .footer-brand strong { color: #173a50; }
html[data-theme="light"] .more-statistics > summary small, html[data-theme="light"] .public-footer small { color: #246677; }
html[data-theme="light"] .more-statistics-content .data-card { background: #f8fcfe; border-color: #d2e1e9; }
html[data-theme="light"] .trend-frame, html[data-theme="light"] .chart-frame, html[data-theme="light"] .timeline-frame, html[data-theme="light"] .annual-chart-frame { background: #eaf3f9; }
html[data-theme="light"] .annual-chart text { fill: #2b516a; }
html[data-theme="light"] .back-to-top { background: #e5f5f8; color: #17485c; border-color: #9cbfce; }
@media (max-width: 1180px) { .forecast-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } .public-footer { grid-template-columns: repeat(3,minmax(0,1fr)); } }
@media (max-width: 800px) {
    .public-shell > #radarSection { order: 1; }
    .public-shell > #dailyForecastSection { order: 2; }
    .public-shell > #twoWeekSection { order: 3; }
    .public-shell > #trendSection { order: 4; }
    .public-shell > .analysis-divider { order: 5; }
    .public-shell > .public-data-stack { order: 6; }
    .public-shell > #dataSourceSection { order: 7; }
    .radar-layout { grid-template-columns: 1fr; }
    .radar-map { min-height: 0; aspect-ratio: 1 / .72; }
    .forecast-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .hero-stage { grid-template-columns: 1fr; min-height: 0; }
    .more-statistics-content { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .hero-stage { gap: .5rem; padding: 1rem; }
    .hero-stage .intro h1 { font-size: clamp(2.2rem, 9vw, 3.2rem); }
    .hero-stage .intro p { font-size: .88rem; margin: .35rem 0; }
    .hero-stage .weather-panel { padding: .8rem; }
    .weather-icon { width: 5.1rem; height: 5.1rem; border-radius: 1.25rem; }
    .weather-icon .wx-icon, .weather-icon .wx-icon.wx-scene { font-size: 4.65rem; }
    .temperature-row strong { font-size: clamp(4.5rem, 18vw, 6rem); }
    .hero-stage .detail-card strong { font-size: .92rem; }
    .hero-stage .detail-card small, .detail-label { font-size: .76rem; }
    .hourly-forecast-strip { grid-auto-columns: minmax(10rem, 59%); }
    .two-week-strip { grid-auto-columns: minmax(12rem, 69%); }
    .forecast-item { padding: .8rem .65rem; min-height: 17rem; }
    .forecast-symbol .wx-icon { font-size: 3.2rem; }
    .forecast-item-head small, .forecast-item > small, .forecast-item p { font-size: .81rem; }
    .radar-map { aspect-ratio: 1; }
    .radar-ticks button { font-size: .8rem; }
    .more-statistics > summary { padding: 1rem; }
    .public-footer { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1.15rem .7rem; }
    .public-footer .footer-brand { grid-column: 1 / -1; }
    .back-to-top:not([hidden]) { right: .75rem; bottom: max(4.5rem, env(safe-area-inset-bottom)); width: 2.7rem; height: 2.7rem; }
}
@media (max-width: 420px) { .forecast-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .forecast-item { min-height: 18rem; } .hourly-forecast-strip { grid-auto-columns: 61%; } .two-week-strip { grid-auto-columns: 70%; } }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .hero-atmosphere::after, .hero-stage[data-weather="storm"] .hero-atmosphere::after, .hero-stage[data-weather="rain"] .hero-particles, .hero-stage[data-weather="wind"] .hero-particles, .weather-icon .wx-icon.wx-scene, .wx-icon, .forecast-line { animation: none !important; }
    .radar-frame, .forecast-item, .two-week-item, .hourly-item, .carousel-arrow { transition: none !important; }
    .radar-marker i::after, .radar-map.is-loading::after { animation: none !important; }
    .forecast-item, .hourly-item, .two-week-item { animation: none !important; }
}

/* Focused weather refinements: existing carousels, radar and statistics only. */
.hourly-section .carousel-arrow, .two-week-section .carousel-arrow {
    top: 29%; width: 3rem; height: 3rem; transform: translateY(-50%);
    opacity: .96; border-color: rgba(227, 249, 255, .85);
    background: rgba(8, 32, 51, .96); box-shadow: 0 5px 18px rgba(0, 11, 29, .5);
}
.hourly-section .carousel-arrow.previous, .two-week-section .carousel-arrow.previous { left: .35rem; right: auto; }
.hourly-section .carousel-arrow.next, .two-week-section .carousel-arrow.next { right: .35rem; }
.hourly-section .carousel-arrow:disabled, .two-week-section .carousel-arrow:disabled { opacity: .42; cursor: default; }
.hourly-section .carousel-arrow:not(:disabled):hover, .two-week-section .carousel-arrow:not(:disabled):hover { transform: translateY(-50%) scale(1.06); }

.radar-marker i {
    width: 21px; height: 21px; border: 3px solid #fff; background: #ef745e;
    box-shadow: 0 0 0 6px rgba(12, 48, 65, .72), 0 0 0 9px rgba(255, 255, 255, .83), 0 3px 15px rgba(0, 15, 30, .7);
}
.radar-marker i::after { inset: -13px; border-color: rgba(255, 255, 255, .65); animation: none; }
.radar-marker span { border: 1px solid rgba(228, 249, 255, .8); background: rgba(7, 30, 47, .96); box-shadow: 0 4px 13px rgba(0, 15, 30, .48); }
.radar-play-controls button { min-width: 2.8rem; min-height: 2.8rem; border-color: rgba(170, 230, 241, .7); background: rgba(25, 73, 96, .9); font-weight: 750; }
.radar-play-controls button:hover { background: #28677a; }
#radarPlay { background: rgba(76, 175, 182, .32); border-color: #9be9df; }
#radarTimeline { accent-color: #a5eee2; }
html[data-theme="light"] .radar-play-controls button { background: #dceef5; border-color: #749bad; color: #173c52; }
html[data-theme="light"] #radarPlay { background: #c6eee7; border-color: #479d9c; color: #153b49; }

.public-data-stack .kpi-label-row, .public-data-stack .kpi-feature > small,
.public-data-stack .kpi-mini > span, .public-data-stack .kpi-mini > small,
.public-data-stack .delta-grid span, .public-data-stack .comparison-row span,
.public-data-stack .highlight-item span, .public-data-stack .highlight-item small,
.public-data-stack .month-item span, .public-data-stack .month-item small,
.public-data-stack .metric-item span, .public-data-stack .metric-item small,
.public-data-stack .special-value-item span, .public-data-stack .special-value-item small,
.public-data-stack .stat-card span, .public-data-stack .windrose-summary span,
.public-data-stack .heatmap-legend, .public-data-stack .annual-legend,
.public-data-stack .annual-row, .public-data-stack .data-quality {
    font-size: .79rem; line-height: 1.45; color: #d2e5f1;
}
.public-data-stack .chart-axis-label, .public-data-stack .chart-x-label,
.public-data-stack .windrose-label, .public-data-stack .annual-chart text { fill: #d8e9f5; }
html[data-theme="light"] .public-data-stack .kpi-label-row,
html[data-theme="light"] .public-data-stack .kpi-feature > small,
html[data-theme="light"] .public-data-stack .kpi-mini > span,
html[data-theme="light"] .public-data-stack .kpi-mini > small,
html[data-theme="light"] .public-data-stack .delta-grid span,
html[data-theme="light"] .public-data-stack .comparison-row span,
html[data-theme="light"] .public-data-stack .highlight-item span,
html[data-theme="light"] .public-data-stack .highlight-item small,
html[data-theme="light"] .public-data-stack .month-item span,
html[data-theme="light"] .public-data-stack .month-item small,
html[data-theme="light"] .public-data-stack .metric-item span,
html[data-theme="light"] .public-data-stack .metric-item small,
html[data-theme="light"] .public-data-stack .special-value-item span,
html[data-theme="light"] .public-data-stack .special-value-item small,
html[data-theme="light"] .public-data-stack .stat-card span,
html[data-theme="light"] .public-data-stack .windrose-summary span,
html[data-theme="light"] .public-data-stack .heatmap-legend,
html[data-theme="light"] .public-data-stack .annual-legend,
html[data-theme="light"] .public-data-stack .annual-row,
html[data-theme="light"] .public-data-stack .data-quality { color: #34546a; }
html[data-theme="light"] .public-data-stack .chart-axis-label,
html[data-theme="light"] .public-data-stack .chart-x-label,
html[data-theme="light"] .public-data-stack .windrose-label,
html[data-theme="light"] .public-data-stack .annual-chart text { fill: #34546a; }

.wx-sun { animation: wx-calm-sun 16s ease-in-out infinite; }
.wx-cloud, .wx-overcast, .wx-partly, .wx-partly-night { animation: wx-calm-cloud 19s ease-in-out infinite; }
.wx-rain, .wx-heavy-rain, .wx-showers, .wx-drizzle { animation: wx-calm-rain 12s ease-in-out infinite; }
@keyframes wx-calm-sun { 50% { transform: scale(1.012); opacity: .94; } }
@keyframes wx-calm-cloud { 50% { transform: translateX(1px); } }
@keyframes wx-calm-rain { 50% { transform: translateY(1px); opacity: .94; } }
.weather-icon .wx-icon.wx-scene.wx-sun { animation: wx-calm-sun 16s ease-in-out infinite; }
.weather-icon .wx-icon.wx-scene:is(.wx-cloud, .wx-overcast, .wx-partly, .wx-partly-night) { animation: wx-calm-cloud 19s ease-in-out infinite; }
.weather-icon .wx-icon.wx-scene:is(.wx-rain, .wx-heavy-rain, .wx-showers, .wx-drizzle) { animation: wx-calm-rain 12s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
    .wx-sun, .wx-cloud, .wx-overcast, .wx-partly, .wx-partly-night,
    .wx-rain, .wx-heavy-rain, .wx-showers, .wx-drizzle,
    .weather-icon .wx-icon.wx-scene { animation: none !important; transform: none !important; opacity: 1; }
    .hourly-section .carousel-arrow, .two-week-section .carousel-arrow { transition: none !important; }
}

/* Local weather context: compact readable summaries, using the existing panels and colors. */
.local-day-section { padding: 1.1rem clamp(1.2rem, 2.5vw, 2rem); }
.local-day-section .forecast-section-head h2 { margin-bottom: .25rem; }
.local-day-summary { max-width: 72ch; margin: .55rem 0; color: var(--text); line-height: 1.65; }
.local-day-section .forecast-context { margin-bottom: 0; }
.local-day-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; margin-top: .8rem; }
.local-day-facts:empty { display: none; }
.local-day-facts > div { display: flex; flex-direction: column; gap: .2rem; min-width: 0; padding: .7rem .85rem; border: 1px solid var(--panel-border); border-radius: .75rem; background: var(--panel-soft); }
.local-day-facts span { color: var(--muted); font-size: .78rem; }
.local-day-facts strong { color: var(--text); font-size: 1rem; }
.local-context p { max-width: 85ch; margin: .7rem 0 0; color: var(--muted); line-height: 1.7; }
.radar-section > .forecast-context, .two-week-section > .forecast-context { max-width: 90ch; line-height: 1.6; }
@media (max-width: 800px) {
    .public-shell > #tomorrowWeatherSection { order: 1; }
    .public-shell > #dailyForecastSection { order: 2; }
    .public-shell > #radarSection { order: 3; }
    .public-shell > #twoWeekSection { order: 4; }
    .public-shell > #trendSection { order: 5; }
    .public-shell > .analysis-divider { order: 6; }
    .public-shell > .public-data-stack { order: 7; }
    .public-shell > #localWeatherSection { order: 8; }
    .public-shell > #dataSourceSection { order: 9; }
}
@media (max-width: 600px) {
    .local-day-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .local-context p { line-height: 1.55; }
}

/* Public weather, phone layout. Desktop/tablet grids and weather logic stay intact. */
.mobile-weather-nav { display: none; }
.weather-more { display: block; margin-top: .42rem; }
.weather-more-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .42rem; }
.weather-more > summary, .mobile-explainer > summary, .hourly-extra > summary { display: none; }
@media (min-width: 601px) {
    .weather-more::details-content, .mobile-explainer::details-content { content-visibility: visible; display: block; }
}
.hourly-extra, .hourly-extra > div { display: contents; }
.mobile-explainer > p { color: var(--muted); font-size: .85rem; line-height: 1.6; }
.forecast-grid:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
html[data-theme="light"] .hero-stage .section-label { color: #acf1e9; }
html[data-theme="light"] .hero-stage .trend-card strong { color: #f6fcff; }
html[data-theme="light"] .hero-stage .trend-card span { color: #c6d9e9; }
html[data-theme="light"] .hero-stage .trend-icon { color: #a4f2eb; }

@media (max-width: 600px) {
    html { scroll-padding-top: 1rem; }
    body { padding-bottom: calc(5.25rem + env(safe-area-inset-bottom)); }
    .section-nav { display: none; }
    .mobile-weather-nav {
        position: fixed; z-index: 60; right: .45rem; bottom: max(.4rem, env(safe-area-inset-bottom)); left: .45rem;
        display: grid; grid-auto-flow: column; grid-auto-columns: minmax(3.3rem, 1fr); gap: .12rem;
        padding: .35rem; border: 1px solid var(--panel-border); border-radius: 1.15rem;
        background: #102639; box-shadow: 0 .35rem 1.4rem rgba(1, 12, 26, .45);
        overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: none;
    }
    .mobile-weather-nav a {
        display: grid; place-items: center; min-width: 0; min-height: 2.75rem;
        padding: .2rem .1rem; border-radius: .78rem; color: #d8eaf6;
        font-size: .72rem; font-weight: 750; text-decoration: none; white-space: nowrap;
    }
    .mobile-weather-nav a[aria-current="page"] { color: #0c3038; background: #9ee9e2; }
    .mobile-weather-nav a:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }
    html[data-theme="light"] .mobile-weather-nav { background: #f6fbff; border-color: #a8c5d6; }
    html[data-theme="light"] .mobile-weather-nav a { color: #2b4c63; }
    html[data-theme="light"] .mobile-weather-nav a[aria-current="page"] { color: #0c383a; background: #afe8df; }
    html[data-theme="light"] .mobile-weather-nav a:focus-visible { outline-color: #165277; }
    .back-to-top:not([hidden]) { bottom: calc(4.9rem + env(safe-area-inset-bottom)); right: .6rem; width: 2.75rem; height: 2.75rem; }

    .public-shell { row-gap: .85rem; padding-top: .7rem; }
    .public-shell > #todayWeatherSection { order: 1; }
    .public-shell > #forecastSection { order: 2; }
    .public-shell > #tomorrowWeatherSection { order: 3; }
    .public-shell > #dailyForecastSection { order: 4; }
    .public-shell > #radarSection { order: 5; }
    .public-shell > #twoWeekSection { order: 6; }
    .public-shell > #trendSection { order: 7; }
    .public-shell > .analysis-divider { order: 8; }
    .public-shell > .public-data-stack { order: 9; }
    .public-shell > #localWeatherSection { order: 10; }
    .public-shell > #dataSourceSection { order: 11; }
    .hero-stage { gap: .18rem; padding: .5rem; border-radius: 1.25rem; }
    .hero-stage .intro { padding: 0 .1rem; }
    .hero-stage .intro .eyebrow { display: none; }
    .hero-stage .intro h1 { max-width: none; margin: .05rem 0 .18rem; font-size: clamp(1.85rem, 7.7vw, 2.2rem); line-height: 1.02; }
    .hero-stage .intro h1 span br { display: none; }
    .intro-live { margin: .1rem 0 0; padding: .25rem .55rem; font-size: .72rem; }
    .hero-stage .weather-panel { padding: .55rem; }
    .hero-stage .weather-panel-head .section-label { font-size: .65rem; letter-spacing: .07em; }
    .weather-panel-head h2 { font-size: clamp(1.05rem, 4.2vw, 1.3rem); line-height: 1.2; }
    .weather-icon { width: 3rem; height: 3rem; border-radius: .85rem; }
    .weather-icon .wx-icon, .weather-icon .wx-icon.wx-scene { font-size: 2.65rem; }
    .hero-stage .temperature-block { margin: .12rem 0 .28rem; }
    .temperature-row strong { font-size: clamp(3.35rem, 13vw, 4rem); }
    .weather-status { margin-top: .2rem; font-size: .84rem; }
    .hero-stage .weather-details { grid-template-columns: repeat(2, minmax(0,1fr)); gap: .35rem; }
    .hero-stage .weather-details > .detail-card:first-child {
        grid-column: 1 / -1; display: grid; grid-template-columns: 5.5rem minmax(0,1fr);
        grid-template-rows: auto auto; align-items: center; column-gap: .35rem;
    }
    .hero-stage .weather-details > .detail-card:first-child .detail-label { grid-column: 1; grid-row: 1; }
    .hero-stage .weather-details > .detail-card:first-child strong { grid-column: 2; grid-row: 1 / 3; }
    .hero-stage .weather-details > .detail-card:first-child small { grid-column: 1; grid-row: 2; }
    .hero-stage .detail-card { padding: .4rem .55rem; min-height: 0; }
    .hero-stage .detail-card strong { overflow: visible; white-space: normal; font-size: 1.08rem; line-height: 1.25; text-overflow: clip; overflow-wrap: anywhere; }
    .hero-stage .detail-card small { font-size: .74rem; }
    .hero-stage .detail-label { display: flex !important; flex-wrap: wrap; gap: .25rem; min-width: 0; font-size: .73rem; line-height: 1.3; letter-spacing: .01em; overflow-wrap: anywhere; }
    .hero-stage .detail-label .wx-icon { flex: none; }
    .weather-more { display: block; grid-column: 1 / -1; }
    .weather-more > summary, .mobile-explainer > summary, .hourly-extra > summary { display: flex; align-items: center; min-height: 2.75rem; cursor: pointer; }
    .weather-more > summary { padding: .55rem .8rem; border: 1px solid rgba(163,225,235,.35); border-radius: .75rem; color: #e1f5f8; font-size: .84rem; font-weight: 750; }
    .weather-more > summary:focus-visible, .mobile-explainer > summary:focus-visible, .hourly-extra > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    .weather-more-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .45rem; margin-top: .45rem; }
    .weather-more .live-supplement-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .45rem; margin-top: .45rem; }
    .hero-stage .trend-card { grid-template-columns: 2rem minmax(0,1fr); gap: .15rem .5rem; min-height: 0; padding: .4rem .55rem; margin-top: .3rem; }
    .hero-stage .trend-copy strong { font-size: .84rem; }
    .hero-stage .pressure-trend-copy { grid-column: 2; padding-left: 0; border-left: 0; }
    .hero-stage .weather-source { min-height: 0; margin-top: .22rem; gap: .08rem .3rem; font-size: .68rem; line-height: 1.25; }

    .forecast-section { padding: .9rem; }
    .forecast-section-head h2, .data-card-head h2 { line-height: 1.2; }
    .forecast-context { margin: .3rem 0 .55rem; line-height: 1.5; }
    .hourly-section .carousel-shell, .two-week-section .carousel-shell { margin-top: 0; }
    .hourly-section .carousel-arrow, .two-week-section .carousel-arrow { display: none; }
    .hourly-forecast-strip { grid-auto-columns: clamp(7.6rem, 38vw, 9.4rem); gap: .5rem; min-height: 15.5rem; }
    .hourly-item { min-height: 0; padding: .65rem .55rem; gap: .2rem; }
    .hourly-item > .wx-icon.wx-scene { font-size: 2.45rem; }
    .hourly-item > strong { font-size: 1.38rem; margin: 0; }
    .hourly-condition { min-height: 0; line-height: 1.25; }
    .hourly-fact { font-size: .74rem; }
    .hourly-extra { display: block; width: 100%; }
    .hourly-extra > summary { justify-content: center; padding: .25rem; font-size: .7rem; line-height: 1.25; color: #d6edf3; }
    .hourly-extra > div { display: grid; gap: .25rem; padding-top: .2rem; }
    .hourly-temperature-trend { min-height: 2.4rem; }

    #dailyForecastSection .forecast-grid { display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: clamp(10.5rem, 52vw, 12.75rem); gap: .5rem; min-height: 17rem; overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x proximity; scrollbar-width: thin; }
    #dailyForecastSection .forecast-item { min-height: 0; padding: .7rem; scroll-snap-align: start; }
    #dailyForecastSection .forecast-symbol .wx-icon { font-size: 2.65rem; }
    #dailyForecastSection .forecast-temperature strong { font-size: 1.45rem; }
    #dailyForecastSection .forecast-item p, #dailyForecastSection .forecast-item > small { min-height: 0; font-size: .75rem; line-height: 1.3; }
    .two-week-strip { grid-auto-columns: clamp(10.5rem, 51vw, 12rem); gap: .5rem; min-height: 15rem; }
    .two-week-item { min-height: 0; padding: .7rem; }
    .two-week-item .daily-glyph { width: 3.1rem; height: 3.1rem; margin: 0 auto; }
    .two-week-item .daily-condition { min-height: 0; }
    .two-week-item .daily-temperatures { margin: 0; padding-bottom: .35rem; }
    .forecast-trend-controls { display: flex; flex-wrap: nowrap; width: 100%; gap: .3rem; overflow-x: auto; }
    .forecast-trend-controls button { flex: none; min-height: 2.75rem; white-space: nowrap; }
    .trend-frame { min-height: 0; }
    #forecastTrendChart { height: 285px; }

    .radar-section { display: flex; flex-direction: column; }
    .radar-section > .radar-layout { order: 1; }
    .radar-section > .forecast-context { order: 2; margin: .5rem 0 0; }
    .radar-section > .mobile-explainer { order: 3; }
    .radar-map { aspect-ratio: 1 / .86; }
    .radar-side { gap: .45rem; }
    .radar-side > p { order: 8; margin: 0; }
    .radar-side > small { order: 9; }
    .radar-play-controls button { min-height: 2.75rem; }
    #radarTimeline { min-height: 2.75rem; }
    .radar-ticks { grid-template-columns: repeat(3,minmax(0,1fr)); gap: .35rem; }
    .radar-ticks button:not([aria-current="true"]):not([data-offset="-60"]):not([data-offset="-30"]):not([data-offset="0"]):not([data-offset="30"]):not([data-offset="60"]):not([data-offset="120"]) { display: none; }
    .radar-ticks button[data-kind="forecast"]:not([aria-current="true"]) { border-bottom: 2px solid #9ecaff; }
    .radar-ticks button[data-kind="observation"]:not([aria-current="true"]) { border-bottom: 2px solid #83e6da; }
    #radarKind { font-weight: 750; }

    .data-card { padding: .85rem; }
    .public-data-stack { gap: .75rem; }
    .chart-controls .control-group, .timeline-controls { display: flex; flex-wrap: nowrap; gap: .35rem; overflow-x: auto; scrollbar-width: thin; }
    .chart-controls .control-group button, .timeline-controls button { flex: none; min-height: 2.75rem; padding: .45rem .65rem; font-size: .76rem; white-space: nowrap; }
    .chart-frame, .timeline-frame { margin-inline: -.4rem; }
    #weatherChart .chart-axis-label, #weatherChart .chart-x-label,
    #todayTimelineChart .chart-axis-label, #todayTimelineChart .chart-x-label { font-size: 22px; }
    #weatherChart .chart-axis-label, #todayTimelineChart .chart-axis-label { transform: translateX(14px); }
    .chart-tooltip, .forecast-trend-tooltip { max-width: min(18rem, calc(100% - 1rem)); }
    .daily-weather-grid { grid-template-columns: 1fr; gap: .4rem; }
    .daily-weather-item { display: grid; grid-template-columns: 1.8rem 2.5rem 3.2rem minmax(0,1fr); align-items: center; gap: .1rem .45rem; padding: .5rem .65rem; }
    .daily-weather-item > .wx-icon { grid-column: 1; }
    .daily-weather-item > strong { grid-column: 2; }
    .daily-weather-item > small:first-of-type { grid-column: 3; }
    .daily-weather-item > span { grid-column: 4; margin: 0; font-weight: 750; text-align: right; }
    .daily-weather-item > small:last-child { grid-column: 2 / -1; margin: 0; font-size: .74rem; line-height: 1.35; white-space: normal; }

    .mobile-explainer { margin: .35rem 0; }
    .mobile-explainer > summary { padding: .4rem .65rem; border: 1px solid var(--panel-border); border-radius: .65rem; color: var(--accent); font-size: .82rem; font-weight: 750; }
    .mobile-explainer > p, .mobile-explainer .source-explainer { margin-top: .6rem; }
    .local-context p { margin-top: .5rem; }
    .source-section { padding: 1rem; }
    html[data-theme="light"] .weather-more > summary { color: #e1f5f8; }
}
@media (max-width: 420px) {
    .mobile-weather-nav a { font-size: .7rem; }
}
@media (max-width: 400px) {
    .mobile-weather-nav a { font-size: .66rem; }
}
@media (max-width: 380px) {
    .mobile-weather-nav { right: .25rem; left: .25rem; gap: .08rem; padding: .25rem; }
    .mobile-weather-nav a { font-size: .63rem; }
    .hero-stage .intro h1 { font-size: 1.85rem; }
}

/* Forecast fallback occupies the strip, not a single narrow card. */
.hourly-forecast-strip:has(> .data-empty),
.two-week-strip:has(> .data-empty) {
    display: block; min-height: 0; padding: 0; overflow: visible;
}
.carousel-shell:has(.data-empty) .carousel-arrow { display: none; }
.hourly-section:has(.hourly-forecast-strip > .data-empty) .hourly-temperature-trend { display: none; }
.hourly-forecast-strip > .data-empty,
.two-week-strip > .data-empty,
#dailyForecastSection .forecast-grid > .data-empty {
    display: flex; align-items: center; justify-content: center;
    width: 100%; min-height: 0; padding: .75rem 1rem;
    overflow-wrap: anywhere;
}
@media (max-width: 600px) {
    #dailyForecastSection .forecast-grid:has(> .data-empty) {
        display: block; min-height: 0; overflow: visible;
    }
}

/* Forecast-only compact columns. The desktop cards and data sources remain unchanged. */
.forecast-compact-facts { display: none; }
#dailyForecastSection .forecast-grid:has(> .data-empty) {
    display: block; min-height: 0; overflow: visible;
}

@media (max-width: 800px) {
    #forecastSection, #dailyForecastSection, #twoWeekSection { padding: .8rem; }
    #dailyForecastSection .forecast-grid {
        display: grid; grid-template-columns: none; grid-auto-flow: column;
        grid-auto-columns: clamp(7.2rem, 16vw, 8.5rem); gap: .3rem;
        min-height: 0; margin-top: .5rem; overflow-x: auto;
        overscroll-behavior-inline: contain; scroll-snap-type: x proximity;
    }
    #dailyForecastSection .forecast-item {
        min-width: 0; min-height: 0; padding: .5rem .4rem; gap: .12rem;
        border-radius: .7rem; scroll-snap-align: start;
    }
    #dailyForecastSection .forecast-item:first-child {
        border-color: rgba(143,236,227,.7);
        background: linear-gradient(160deg, rgba(105,223,217,.14), rgba(114,165,213,.035));
    }
    #dailyForecastSection .forecast-item:first-child .forecast-item-head strong { color: #a5eee2; }
    #dailyForecastSection .forecast-item-head { gap: .12rem; }
    #dailyForecastSection .forecast-item-head strong { font-size: .81rem; }
    #dailyForecastSection .forecast-item-head small { font-size: .63rem; white-space: nowrap; }
    #dailyForecastSection .forecast-symbol { margin: .2rem 0 0; gap: .05rem; }
    #dailyForecastSection .forecast-symbol .wx-icon { font-size: 2rem; }
    #dailyForecastSection .forecast-symbol span {
        width: 100%; min-height: 2.2em; font-size: .68rem; line-height: 1.1;
        text-align: center; overflow-wrap: anywhere;
    }
    #dailyForecastSection .forecast-temperature {
        flex-direction: column; align-items: center; gap: 0; margin: .05rem 0 .12rem;
        font-variant-numeric: tabular-nums;
    }
    #dailyForecastSection .forecast-temperature strong { font-size: 1.12rem; line-height: 1.12; }
    #dailyForecastSection .forecast-temperature span { font-size: .72rem; line-height: 1.12; }
    #dailyForecastSection .forecast-item > p, #dailyForecastSection .forecast-item > small { display: none; }
    #dailyForecastSection .forecast-compact-facts {
        display: grid; gap: .08rem; width: 100%; padding-top: .22rem;
        border-top: 1px solid rgba(191,226,244,.14);
        color: #bbd3e4; font-size: .62rem; line-height: 1.22;
        font-variant-numeric: tabular-nums;
    }
    #dailyForecastSection .forecast-compact-facts span { overflow-wrap: anywhere; }
    html[data-theme="light"] #dailyForecastSection .forecast-item:first-child {
        background: #e1f6f4; border-color: #69bcb5;
    }
    html[data-theme="light"] #dailyForecastSection .forecast-item:first-child .forecast-item-head strong,
    html[data-theme="light"] #dailyForecastSection .forecast-compact-facts { color: #23465b; }

    #forecastSection .hourly-forecast-strip {
        grid-auto-columns: clamp(7.4rem, 16vw, 8.5rem); min-height: 0;
        gap: .3rem; padding: .15rem 0 .35rem; scroll-snap-type: x proximity;
    }
    #forecastSection .hourly-item {
        min-height: 0; padding: .5rem .35rem; gap: .12rem;
        border-radius: .7rem; scroll-snap-align: start;
    }
    #forecastSection .hourly-item time { width: 100%; text-align: center; font-size: .77rem; }
    #forecastSection .hourly-item > .wx-icon.wx-scene { align-self: center; font-size: 2rem; margin: 0; }
    #forecastSection .hourly-item > strong { font-size: 1rem; margin: .05rem 0; }
    #forecastSection .hourly-condition { min-height: 2.2em; font-size: .68rem; line-height: 1.1; overflow-wrap: anywhere; }
    #forecastSection .hourly-fact { font-size: .64rem; line-height: 1.2; overflow-wrap: anywhere; }
    #forecastSection .hourly-item.is-next::before { font-size: .54rem; line-height: 1.2; }

    #twoWeekSection .two-week-strip {
        grid-auto-columns: clamp(7.2rem, 16vw, 8.5rem); min-height: 0;
        gap: .3rem; padding: .15rem 0 .35rem; scroll-snap-type: x proximity;
    }
    #twoWeekSection .two-week-item {
        min-width: 0; min-height: 0; padding: .5rem .4rem; gap: .1rem;
        border-radius: .7rem; scroll-snap-align: start;
    }
    #twoWeekSection .two-week-item .forecast-item-head { gap: .12rem; }
    #twoWeekSection .two-week-item .forecast-item-head strong { font-size: .81rem; }
    #twoWeekSection .two-week-item .forecast-item-head small { font-size: .63rem; white-space: nowrap; }
    #twoWeekSection .two-week-item .daily-glyph { width: 2rem; height: 2rem; margin: .16rem auto 0; }
    #twoWeekSection .two-week-item .daily-condition {
        min-height: 2.2em; font-size: .68rem; line-height: 1.1; overflow-wrap: anywhere;
    }
    #twoWeekSection .two-week-item .daily-temperatures {
        flex-direction: column; align-items: center; gap: 0;
        margin: .05rem 0 .1rem; padding-bottom: .16rem;
    }
    #twoWeekSection .two-week-item .daily-temperatures strong { font-size: 1.12rem; line-height: 1.12; }
    #twoWeekSection .two-week-item .daily-temperatures span { font-size: .72rem; line-height: 1.12; }
    #twoWeekSection .two-week-item > span {
        font-size: .62rem; line-height: 1.22; font-variant-numeric: tabular-nums;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 600px) {
    #forecastSection, #dailyForecastSection, #twoWeekSection { padding: .65rem; }
    #forecastSection .forecast-section-head, #dailyForecastSection .forecast-section-head,
    #twoWeekSection .forecast-section-head { gap: .2rem .5rem; }
    #forecastSection .forecast-context, #dailyForecastSection .forecast-context,
    #twoWeekSection .forecast-context { margin: .2rem 0 .4rem; }
    #dailyForecastSection .forecast-grid, #twoWeekSection .two-week-strip {
        grid-auto-columns: clamp(5.05rem, 21.1vw, 5.9rem); gap: .25rem;
    }
    #forecastSection .hourly-forecast-strip {
        grid-auto-columns: clamp(5.45rem, 24vw, 6.2rem); gap: .25rem;
    }
    #forecastSection .hourly-item, #dailyForecastSection .forecast-item,
    #twoWeekSection .two-week-item { padding: .42rem .32rem; }
    #forecastSection .hourly-extra > summary {
        min-height: 2.75rem; padding: .15rem 0; font-size: .61rem;
    }
    #forecastSection .hourly-temperature-trend { margin-bottom: .22rem; }
}

/* Keep the desktop wording; only the narrow columns use short fact labels. */
.two-week-compact-facts { display: none; }
@media (max-width: 800px) {
    #twoWeekSection .two-week-full-fact { display: none; }
    #twoWeekSection .two-week-compact-facts {
        display: grid; gap: .08rem; padding-top: .22rem;
        border-top: 1px solid rgba(191,226,244,.14);
        color: #d4e8f5; font-size: .62rem; line-height: 1.22;
        font-variant-numeric: tabular-nums;
    }
    #twoWeekSection .two-week-compact-facts span { overflow-wrap: anywhere; }
    html[data-theme="light"] #twoWeekSection .two-week-compact-facts { color: #23465b; }
    #forecastSection .hourly-rain-separator { display: none; }
    #forecastSection .hourly-rain-amount { display: block; text-align: center; }
}

@media (max-width: 800px) {
    html[data-theme="light"] :is(#forecastSection, #dailyForecastSection, #twoWeekSection) {
        background: linear-gradient(145deg, #fff, #f0f7fb);
        border-color: #b9cfdd;
    }
}

/* Dedicated phone forecast: one shared, four-column surface, not scaled desktop cards. */
.mobile-day-strip, .mobile-day-detail { display: none; }
.mobile-day-detail[hidden] { display: none !important; }
@media (max-width: 600px) {
    #dailyForecastSection #forecastGrid, #twoWeekSection .carousel-shell { display: none; }
    #dailyForecastSection .mobile-day-strip, #twoWeekSection .mobile-day-strip {
        display: grid; width: 100%; box-sizing: border-box;
        grid-auto-flow: column; grid-auto-columns: calc((100% - .5rem) / 4);
        gap: .125rem; padding: 0; margin-top: .35rem;
        border: 1px solid rgba(177,219,243,.25); border-radius: .9rem;
        background: rgba(166,218,241,.055);
        overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain;
        scroll-snap-type: x proximity; scrollbar-width: none;
    }
    .mobile-day-strip::-webkit-scrollbar { display: none; }
    .mobile-day-strip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    #dailyForecastSection .mobile-day-strip:has(> .data-empty),
    #twoWeekSection .mobile-day-strip:has(> .data-empty) {
        display: block; overflow: visible;
    }
    .mobile-day-strip > .data-empty { width: 100%; box-sizing: border-box; }
    .mobile-day-column {
        display: grid; place-items: center; align-content: start;
        grid-template-rows: 1.2rem .9rem 2.6rem 1.5rem 1.1rem 1.25rem 1.05rem 1rem;
        gap: .1rem; min-width: 0; width: 100%; box-sizing: border-box;
        margin: 0; padding: .45rem .12rem .5rem;
        border: 0; border-left: 1px solid rgba(177,219,243,.15);
        background: transparent; color: var(--text); text-align: center;
        font: inherit; font-variant-numeric: tabular-nums;
        scroll-snap-align: start; cursor: pointer;
    }
    .mobile-day-column:first-child { border-left: 0; }
    .mobile-day-column.is-first {
        background: rgba(105,223,217,.12);
        box-shadow: inset 0 2px rgba(143,236,227,.78);
    }
    .mobile-day-column.is-selected { background: rgba(105,223,217,.2); }
    .mobile-day-column:focus-visible { outline: 2px solid #a5eee2; outline-offset: -3px; border-radius: .4rem; }
    .mobile-day-weekday { font-size: .78rem; line-height: 1; }
    .mobile-day-date { color: var(--muted); font-size: .64rem; line-height: 1; white-space: nowrap; }
    .mobile-day-column .wx-icon.mobile-day-icon { align-self: center; font-size: 2rem; }
    .mobile-day-max { font-size: 1.18rem; line-height: 1; white-space: nowrap; }
    .mobile-day-min { color: var(--muted); font-size: .86rem; line-height: 1; white-space: nowrap; }
    .mobile-day-risk { color: #9debe6; font-size: .76rem; font-weight: 700; line-height: 1; white-space: nowrap; }
    .mobile-day-rain { color: #d7ebf7; font-size: .66rem; line-height: 1; white-space: nowrap; }
    .mobile-day-wind { color: var(--muted); font-size: .61rem; line-height: 1; white-space: nowrap; }
    #dailyForecastSection .mobile-day-detail:not([hidden]),
    #twoWeekSection .mobile-day-detail:not([hidden]) {
        display: block; margin-top: .5rem; padding: .6rem .7rem;
        border: 1px solid rgba(143,236,227,.45); border-radius: .75rem;
        background: rgba(12,32,50,.78);
    }
    .mobile-day-detail-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
    .mobile-day-detail-head strong { font-size: .85rem; }
    .mobile-day-close {
        flex: none; min-width: 2.75rem; min-height: 2.75rem; padding: 0;
        border: 1px solid var(--panel-border); border-radius: .55rem;
        background: var(--panel-soft); color: var(--text); font-size: 1.4rem; cursor: pointer;
    }
    .mobile-day-detail dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .3rem .7rem; margin: .25rem 0 0; }
    .mobile-day-detail dl > div { min-width: 0; }
    .mobile-day-detail dt { color: var(--muted); font-size: .68rem; }
    .mobile-day-detail dd { margin: 0; font-size: .79rem; overflow-wrap: anywhere; }
    html[data-theme="light"] .mobile-day-strip {
        background: #f1f8fc; border-color: #b8d1df;
    }
    html[data-theme="light"] .mobile-day-column { border-left-color: #d4e3eb; color: #23465b; }
    html[data-theme="light"] .mobile-day-column.is-first,
    html[data-theme="light"] .mobile-day-column.is-selected { background: #e1f6f4; }
    html[data-theme="light"] .mobile-day-risk { color: #166d74; }
    html[data-theme="light"] .mobile-day-rain { color: #315975; }
    html[data-theme="light"] .mobile-day-detail:not([hidden]) {
        background: #f1f8fc; border-color: #69bcb5;
    }
}

/* Phone-only hourly overview: four equal columns; secondary data opens on tap. */
.mobile-hour-strip, .mobile-hour-detail { display: none; }
.mobile-hour-detail[hidden] { display: none !important; }
@media (max-width: 600px) {
    #forecastSection .carousel-shell, #forecastSection .hourly-temperature-trend { display: none; }
    #forecastSection .mobile-hour-strip {
        display: grid; width: 100%; box-sizing: border-box;
        grid-auto-flow: column; grid-auto-columns: calc((100% - .5rem) / 4);
        gap: .125rem; margin-top: .4rem; padding: 0;
        border: 1px solid rgba(177,219,243,.25); border-radius: .9rem;
        background: rgba(166,218,241,.055);
        overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain;
        scroll-snap-type: x proximity; scrollbar-width: none;
    }
    #forecastSection .mobile-hour-strip::-webkit-scrollbar { display: none; }
    #forecastSection .mobile-hour-strip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    #forecastSection .mobile-hour-strip:has(> .data-empty) { display: block; overflow: visible; }
    #forecastSection .mobile-hour-strip > .data-empty { width: 100%; box-sizing: border-box; }
    #forecastSection .mobile-hour-column {
        display: grid; place-items: center; align-content: start;
        grid-template-rows: 1.25rem 2.45rem 1.5rem 1.1rem 1rem;
        gap: .1rem; min-width: 0; width: 100%; box-sizing: border-box;
        margin: 0; padding: .48rem .1rem .55rem;
        border: 0; border-left: 1px solid rgba(177,219,243,.15);
        background: transparent; color: var(--text); text-align: center;
        font: inherit; font-variant-numeric: tabular-nums;
        scroll-snap-align: start; cursor: pointer;
    }
    #forecastSection .mobile-hour-column:first-child { border-left: 0; }
    #forecastSection .mobile-hour-column.is-next {
        background: rgba(105,223,217,.12);
        box-shadow: inset 0 2px rgba(143,236,227,.78);
    }
    #forecastSection .mobile-hour-column.is-selected { background: rgba(105,223,217,.2); }
    #forecastSection .mobile-hour-column:focus-visible { outline: 2px solid #a5eee2; outline-offset: -3px; border-radius: .4rem; }
    #forecastSection .mobile-hour-column time { color: var(--text); font-size: .78rem; line-height: 1; font-weight: 750; white-space: nowrap; }
    #forecastSection .mobile-hour-column .wx-icon.mobile-hour-icon { align-self: center; font-size: 2rem; }
    #forecastSection .mobile-hour-column strong { font-size: 1.05rem; line-height: 1; white-space: nowrap; }
    #forecastSection .mobile-hour-risk { color: #9debe6; font-size: .76rem; font-weight: 700; line-height: 1; white-space: nowrap; }
    #forecastSection .mobile-hour-rain { color: #d7ebf7; font-size: .66rem; line-height: 1; white-space: nowrap; }
    #forecastSection .mobile-hour-detail:not([hidden]) {
        display: block; margin-top: .5rem; padding: .6rem .7rem;
        border: 1px solid rgba(143,236,227,.45); border-radius: .75rem;
        background: rgba(12,32,50,.78);
    }
    #forecastSection .mobile-hour-detail-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
    #forecastSection .mobile-hour-detail-head strong { font-size: .85rem; }
    #forecastSection .mobile-hour-close {
        flex: none; min-width: 2.75rem; min-height: 2.75rem; padding: 0;
        border: 1px solid var(--panel-border); border-radius: .55rem;
        background: var(--panel-soft); color: var(--text); font-size: 1.4rem; cursor: pointer;
    }
    #forecastSection .mobile-hour-detail dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .3rem .7rem; margin: .25rem 0 0; }
    #forecastSection .mobile-hour-detail dl > div { min-width: 0; }
    #forecastSection .mobile-hour-detail dt { color: var(--muted); font-size: .68rem; }
    #forecastSection .mobile-hour-detail dd { margin: 0; font-size: .79rem; overflow-wrap: anywhere; }
    html[data-theme="light"] #forecastSection .mobile-hour-strip { background: #f1f8fc; border-color: #b8d1df; }
    html[data-theme="light"] #forecastSection .mobile-hour-column { border-left-color: #d4e3eb; color: #23465b; }
    html[data-theme="light"] #forecastSection .mobile-hour-column.is-next,
    html[data-theme="light"] #forecastSection .mobile-hour-column.is-selected { background: #e1f6f4; }
    html[data-theme="light"] #forecastSection .mobile-hour-risk { color: #166d74; }
    html[data-theme="light"] #forecastSection .mobile-hour-rain { color: #315975; }
    html[data-theme="light"] #forecastSection .mobile-hour-detail:not([hidden]) { background: #f1f8fc; border-color: #69bcb5; }
}

/* Visible swipe-position indicator beneath the phone-only hourly strip. */
.mobile-hour-swipebar { display: none; }
.mobile-hour-swipebar[hidden] { display: none !important; }
@media (max-width: 600px) {
    #forecastSection .mobile-hour-swipebar {
        display: block; position: relative; height: .35rem;
        margin: .4rem .4rem 0; border-radius: 999px;
        background: rgba(177,219,243,.23); overflow: hidden;
    }
    #forecastSection .mobile-hour-swipebar span {
        position: absolute; top: 0; left: 0; height: 100%; border-radius: inherit;
        background: #91e8e0;
    }
    html[data-theme="light"] #forecastSection .mobile-hour-swipebar { background: #bdd2de; }
    html[data-theme="light"] #forecastSection .mobile-hour-swipebar span { background: #168477; }
}