@charset "UTF-8";

:root {
    --bg-1: #06355f;
    --bg-2: #0a6dae;
    --bg-3: #83cef3;
    --ink: #0a2d4d;
    --muted: #54718c;
    --white: #ffffff;
    --glass: rgba(255,255,255,.15);
    --glass-strong: rgba(255,255,255,.26);
    --glass-border: rgba(255,255,255,.34);
    --panel: rgba(244,250,255,.93);
    --panel-border: rgba(255,255,255,.78);
    --blue: #0878d8;
    --cyan: #31bbdf;
    --shadow: 0 16px 42px rgba(0,38,74,.22);
    --radius: 22px;
}

* { box-sizing: border-box; }

html {
    min-width: 320px;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    color: var(--ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at 76% 8%, rgba(255,255,255,.33), transparent 23%),
        radial-gradient(circle at 12% 35%, rgba(139,224,255,.28), transparent 32%),
        linear-gradient(145deg, var(--bg-1), var(--bg-2) 48%, var(--bg-3));
    background-attachment: fixed;
}

body::after {
    content: "";
    position: fixed;
    z-index: -3;
    inset: auto 0 0;
    height: 26vh;
    background:
        linear-gradient(to top, rgba(3,42,56,.45), transparent),
        radial-gradient(ellipse at 15% 100%, #204d43 0 17%, transparent 18%),
        radial-gradient(ellipse at 31% 110%, #2f6652 0 19%, transparent 20%),
        radial-gradient(ellipse at 62% 108%, #285f4f 0 20%, transparent 21%),
        radial-gradient(ellipse at 82% 105%, #346d57 0 18%, transparent 19%);
    filter: blur(1px);
}

button, input, select { font: inherit; }

button, a, select, input { -webkit-tap-highlight-color: transparent; }

a { color: inherit; }

.shell {
    width: min(1540px, calc(100% - 38px));
    margin-inline: auto;
}

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

.page-sky {
    position: fixed;
    inset: 0;
    overflow: hidden;
    z-index: -2;
    pointer-events: none;
}

.cloud {
    position: absolute;
    width: 330px;
    height: 96px;
    border-radius: 50%;
    background: rgba(255,255,255,.14);
    filter: blur(2px);
}
.cloud::before,
.cloud::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: inherit;
}
.cloud::before { width: 150px; height: 150px; left: 50px; top: -62px; }
.cloud::after { width: 190px; height: 190px; right: 35px; top: -86px; }
.cloud-a { top: 155px; right: -70px; opacity: .82; }
.cloud-b { top: 410px; left: -150px; transform: scale(.8); opacity: .5; }
.cloud-c { top: 850px; right: 20%; transform: scale(.55); opacity: .35; }

.site-header {
    position: sticky;
    top: 0;
    z-index: 20;
    padding: 12px 0;
    background: linear-gradient(180deg, rgba(0,53,100,.78), rgba(0,53,100,.52));
    border-bottom: 1px solid rgba(255,255,255,.2);
    box-shadow: 0 10px 32px rgba(0,28,63,.18);
    backdrop-filter: blur(20px) saturate(130%);
    -webkit-backdrop-filter: blur(20px) saturate(130%);
}

.header-inner {
    min-height: 92px;
    display: grid;
    grid-template-columns: minmax(300px, 480px) 1fr auto;
    gap: 28px;
    align-items: center;
}

.brand {
    display: flex;
    align-items: center;
    min-width: 0;
    text-decoration: none;
}

.brand img {
    display: block;
    width: min(100%, 445px);
    max-height: 76px;
    object-fit: contain;
    object-position: left center;
    filter: drop-shadow(0 5px 12px rgba(0,0,0,.22));
}

.main-nav {
    display: flex;
    justify-content: center;
    gap: 5px;
    min-width: 0;
}

.main-nav a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 13px 14px;
    color: rgba(255,255,255,.88);
    text-decoration: none;
    font-weight: 700;
    font-size: .92rem;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: 13px;
    transition: .18s ease;
}

.main-nav a:hover,
.main-nav a.active {
    color: #fff;
    background: rgba(255,255,255,.15);
    border-color: rgba(255,255,255,.19);
    box-shadow: inset 0 1px rgba(255,255,255,.17), 0 7px 18px rgba(0,41,88,.15);
}

.main-nav a span {
    font-size: 1.1rem;
}

.header-status {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 170px;
    color: #fff;
}

.status-dot {
    width: 11px;
    height: 11px;
    margin-top: 7px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: #46e48c;
    box-shadow: 0 0 0 5px rgba(70,228,140,.11), 0 0 16px #46e48c;
}

.header-status div {
    display: grid;
    gap: 1px;
}

.header-status small,
.header-status span { opacity: .72; font-size: .77rem; }
.header-status strong { font-size: .92rem; }

.menu-toggle { display: none; }

main {
    padding: 34px 0 25px;
}

.page-heading {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 24px;
    color: #fff;
    margin: 0 4px 18px;
    text-shadow: 0 2px 10px rgba(0,34,75,.27);
}

.page-heading h1 {
    margin: 3px 0 4px;
    font-size: clamp(2rem, 3vw, 3rem);
    line-height: 1.05;
}

.page-heading p { margin: 0; opacity: .86; }

.eyebrow {
    margin: 0;
    font-size: .75rem;
    font-weight: 850;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: #1684d1;
}

.page-heading .eyebrow { color: #bdeeff; }

.station-select,
.compact-select {
    display: grid;
    gap: 5px;
    font-size: .75rem;
    font-weight: 800;
}

.station-select select,
.compact-select select {
    min-height: 43px;
    padding: 0 42px 0 15px;
    border: 1px solid rgba(255,255,255,.34);
    border-radius: 12px;
    color: inherit;
    background: rgba(255,255,255,.13);
    outline: none;
}

.station-select select { min-width: 275px; color: #fff; }
.station-select option { color: #173750; }

.demo-note {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
    padding: 11px 15px;
    color: #e8f9ff;
    background: rgba(6,54,94,.37);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 14px;
    backdrop-filter: blur(13px);
    -webkit-backdrop-filter: blur(13px);
}

.demo-note strong {
    color: #fff;
    white-space: nowrap;
}

.demo-note span { opacity: .82; }

.summary-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 13px;
    margin-bottom: 15px;
}

.summary-card {
    min-height: 114px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 16px;
    color: #fff;
    background:
        linear-gradient(145deg, rgba(255,255,255,.17), rgba(255,255,255,.08));
    border: 1px solid var(--glass-border);
    border-radius: 18px;
    box-shadow: 0 10px 26px rgba(0,39,82,.16), inset 0 1px rgba(255,255,255,.17);
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
}

.summary-icon {
    width: 49px;
    height: 49px;
    flex: 0 0 49px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 1.45rem;
    background: linear-gradient(135deg, rgba(24,169,255,.95), rgba(103,102,238,.78));
    box-shadow: 0 8px 18px rgba(0,60,112,.25), inset 0 1px rgba(255,255,255,.35);
}
.icon-min { background: linear-gradient(135deg, #e677ae, #cb5d69); }
.icon-max { background: linear-gradient(135deg, #ffb45c, #e07149); }
.icon-avg { background: linear-gradient(135deg, #45d4ff, #3b83ed); }
.icon-sensor { background: linear-gradient(135deg, #41ddd5, #2397b7); }
.icon-compare { background: linear-gradient(135deg, #9d7cff, #6c59d8); }

.summary-card div {
    min-width: 0;
    display: grid;
}

.summary-card small {
    color: rgba(255,255,255,.76);
    font-size: .73rem;
    font-weight: 700;
}

.summary-card strong {
    margin: 2px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.13rem;
    white-space: nowrap;
}

.summary-card span:not(.summary-icon) {
    font-size: .76rem;
    color: rgba(255,255,255,.73);
}

.chart-card {
    margin-bottom: 16px;
    padding: 18px 20px 13px;
    background: var(--panel);
    border: 1px solid var(--panel-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.85);
    backdrop-filter: blur(19px) saturate(115%);
    -webkit-backdrop-filter: blur(19px) saturate(115%);
    overflow: hidden;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 8px;
}

.card-header h2 {
    margin: 2px 0 0;
    font-size: clamp(1.22rem, 2vw, 1.65rem);
}

.card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.icon-button {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid #c3d9e9;
    border-radius: 11px;
    color: #1a517e;
    background: linear-gradient(#fff, #e9f5fd);
    cursor: pointer;
    transition: .15s ease;
}

.icon-button:hover {
    transform: translateY(-1px);
    box-shadow: 0 7px 16px rgba(23,92,147,.14);
}

.chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 18px;
    margin: 2px 0 9px;
}

.legend-item {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 7px;
    border: 0;
    border-radius: 8px;
    color: #234764;
    background: transparent;
    cursor: pointer;
}

.legend-item:hover { background: #e5f1f9; }
.legend-item:not(.active) { opacity: .35; text-decoration: line-through; }

.legend-item i {
    display: block;
    width: 23px;
    height: 3px;
    border-radius: 10px;
    background: var(--legend-color);
}

.year-legend {
    max-height: 100px;
    padding: 4px 0 5px;
    overflow: auto;
    scrollbar-width: thin;
}

.year-legend .legend-item {
    font-size: .76rem;
    padding: 3px 5px;
}

.year-legend .legend-item i {
    width: 11px;
    height: 11px;
    border-radius: 2px;
}

.chart-frame {
    position: relative;
    height: 390px;
    min-width: 0;
    background:
        linear-gradient(rgba(214,233,247,.32) 1px, transparent 1px),
        linear-gradient(90deg, rgba(214,233,247,.32) 1px, transparent 1px),
        rgba(255,255,255,.44);
    background-size: 70px 44px;
    border: 1px solid #d3e4ef;
    border-radius: 14px;
    overflow: hidden;
}

.chart-frame canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.comparison-frame { height: 355px; }

.chart-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding-top: 11px;
}

.date-controls,
.zoom-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.date-controls label {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #355c78;
    font-size: .84rem;
    font-weight: 750;
}

.date-controls input,
.zoom-controls button,
.bottom-select select {
    min-height: 38px;
    border: 1px solid #c7dae8;
    border-radius: 10px;
    color: #264c68;
    background: linear-gradient(#fff, #edf6fc);
    outline: none;
}

.date-controls input { padding: 0 9px; }

.zoom-controls > span {
    margin-right: 4px;
    color: #355c78;
    font-size: .82rem;
    font-weight: 800;
}

.zoom-controls button {
    padding: 0 14px;
    cursor: pointer;
}

.zoom-controls button:hover,
.zoom-controls button.active {
    color: #fff;
    border-color: #087fe2;
    background: linear-gradient(135deg, #1287ea, #0869c6);
    box-shadow: 0 6px 13px rgba(0,113,212,.23);
}

.compact-select {
    color: #315674;
}

.compact-select select {
    min-width: 220px;
    min-height: 42px;
    color: #214b6a;
    background: linear-gradient(#fff, #eaf5fc);
    border-color: #c7dae8;
}

.comparison-controls {
    margin-top: 2px;
}

.bottom-select {
    display: flex;
    align-items: center;
    gap: 9px;
}

.bottom-select select { min-width: 245px; padding-inline: 12px; }

.chart-tooltip {
    position: absolute;
    min-width: 175px;
    max-width: 250px;
    padding: 9px 11px;
    color: #183951;
    background: rgba(255,255,255,.96);
    border: 1px solid #a9c7dc;
    border-radius: 9px;
    box-shadow: 0 12px 25px rgba(12,54,84,.23);
    pointer-events: none;
    font-size: .75rem;
    line-height: 1.45;
}

.chart-tooltip strong {
    display: block;
    margin-bottom: 4px;
    font-size: .8rem;
}

.tooltip-line {
    display: flex;
    justify-content: space-between;
    gap: 13px;
    white-space: nowrap;
}

.tooltip-line i {
    width: 8px;
    height: 8px;
    display: inline-block;
    margin-right: 6px;
    border-radius: 50%;
}

.info-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
    padding: 12px;
    color: #fff;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.32);
    border-radius: 17px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.info-strip article {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    padding: 8px 12px;
}

.info-strip article > span {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #095b91;
    background: rgba(255,255,255,.83);
}

.info-strip div { display: grid; min-width: 0; }
.info-strip strong { font-size: .88rem; }
.info-strip small { opacity: .77; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.site-footer {
    padding: 15px 0;
    color: #fff;
    background: rgba(1,50,91,.62);
    border-top: 1px solid rgba(255,255,255,.2);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.footer-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 24px;
    align-items: center;
}

.footer-inner > div:first-child { display: grid; }
.footer-inner small { opacity: .65; }

.footer-weather {
    display: flex;
    gap: 22px;
}

.footer-weather span {
    display: inline-flex;
    gap: 7px;
    align-items: center;
}

.footer-inner nav {
    justify-self: end;
    display: flex;
    gap: 17px;
}

.footer-inner nav a {
    color: rgba(255,255,255,.8);
    text-decoration: none;
    font-size: .85rem;
}

.footer-inner nav a:hover { color: #fff; text-decoration: underline; }

.chart-card:fullscreen {
    width: 100vw;
    height: 100vh;
    margin: 0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
}

.chart-card:fullscreen .chart-frame {
    flex: 1 1 auto;
    height: auto;
}

@media (max-width: 1260px) {
    .header-inner {
        grid-template-columns: minmax(260px, 390px) 1fr auto;
        gap: 14px;
    }
    .main-nav a { padding-inline: 9px; font-size: .82rem; }
    .summary-grid { grid-template-columns: repeat(3, 1fr); }
    .footer-inner { grid-template-columns: 1fr auto; }
    .footer-inner nav { display: none; }
}

@media (max-width: 900px) {
    .shell { width: min(100% - 24px, 760px); }

    .site-header { position: relative; }

    .header-inner {
        min-height: 75px;
        grid-template-columns: 1fr auto;
    }

    .brand img { max-height: 61px; max-width: 390px; }

    .menu-toggle {
        width: 46px;
        height: 42px;
        display: grid;
        place-content: center;
        gap: 5px;
        border: 1px solid rgba(255,255,255,.28);
        border-radius: 12px;
        background: rgba(255,255,255,.12);
    }

    .menu-toggle span:not(.sr-only) {
        width: 22px;
        height: 2px;
        display: block;
        border-radius: 3px;
        background: #fff;
    }

    .main-nav {
        grid-column: 1 / -1;
        display: none;
        grid-template-columns: repeat(2, 1fr);
        gap: 7px;
        padding-top: 8px;
    }

    .main-nav.open { display: grid; }
    .main-nav a { justify-content: center; }

    .header-status { display: none; }

    .page-heading { align-items: start; flex-direction: column; }
    .station-select { width: 100%; }
    .station-select select { width: 100%; }

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

    .chart-frame { height: 330px; }
    .comparison-frame { height: 350px; }

    .chart-controls {
        align-items: stretch;
        flex-direction: column;
    }

    .zoom-controls { justify-content: flex-end; }

    .info-strip { grid-template-columns: 1fr; }

    .footer-inner { grid-template-columns: 1fr; text-align: center; }
    .footer-weather { justify-content: center; flex-wrap: wrap; }
}

@media (max-width: 560px) {
    .shell { width: min(100% - 16px, 500px); }

    main { padding-top: 20px; }

    .brand img { max-width: 275px; }

    .page-heading h1 { font-size: 1.75rem; }

    .demo-note {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
        font-size: .8rem;
    }

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

    .summary-card { min-height: 88px; }

    .chart-card { padding: 14px 11px 11px; border-radius: 17px; }

    .card-header { align-items: flex-start; }

    .card-actions .compact-select { display: none; }

    .chart-frame {
        height: 310px;
        overflow-x: auto;
    }

    .chart-frame canvas {
        min-width: 650px;
    }

    .comparison-frame canvas { min-width: 820px; }

    .year-legend { max-height: 126px; }

    .date-controls {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        width: 100%;
    }

    .date-controls label { display: grid; gap: 4px; }
    .date-controls input { width: 100%; min-width: 0; }

    .zoom-controls {
        justify-content: flex-start;
        gap: 5px;
    }

    .zoom-controls button { padding-inline: 10px; font-size: .75rem; }

    .comparison-controls .bottom-select {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }

    .bottom-select select { width: 100%; min-width: 0; }

    .footer-weather { gap: 11px 15px; font-size: .82rem; }
}