/*
 * Kisiniai weather station - stylesheet.
 *
 * There is no CSS framework behind this file. Everything is built from the
 * tokens in the first block, which is also what makes the light and dark themes
 * a single set of value swaps rather than two stylesheets.
 *
 * Theme resolution, in order of precedence:
 *   1. :root[data-theme="dark"|"light"]  - the visitor's explicit choice
 *   2. @media (prefers-color-scheme)     - the operating system's setting
 *   3. :root                             - light, the default
 * The media block is guarded with :not([data-theme="light"]) so that choosing
 * light on an OS set to dark still wins.
 *
 * Series colours are validated for colour-vision deficiency and for contrast
 * against both surfaces; every chart also carries a legend or a direct label,
 * so no reading depends on hue alone.
 */

/* ------------------------------------------------------------------ tokens */

:root {
    color-scheme: light;

    /* Surfaces */
    --plane: #f2f1ee;
    --surface: #fbfaf8;
    --surface-2: #f0efec;
    --surface-3: #e7e6e1;

    /* Ink */
    --ink: #0b0b0b;
    --ink-2: #52514e;
    --ink-3: #7c7a74;

    /* Lines */
    --line: #e1e0d9;
    --line-strong: #c3c2b7;
    --ring: rgba(11, 11, 11, 0.10);

    /* Interaction */
    --accent: #2a78d6;
    --accent-soft: #e8f0fc;
    --accent-ink: #ffffff;
    --focus: #2a78d6;

    /* Status - fixed across themes, always paired with a shape and a word */
    --good: #0ca30c;
    --warning: #fab219;
    --serious: #ec835a;
    --critical: #d03b3b;
    --good-soft: #e6f5e6;
    --warning-soft: #fdf3dd;
    --serious-soft: #fceee7;
    --critical-soft: #fbe9e9;

    /* Chart series */
    --series-temp: #eb6834;
    --series-dew: #2a78d6;
    --series-humidity: #2a78d6;
    --series-pressure: #4a3aa7;
    --series-wind: #1baf7a;
    --series-gust: #4a3aa7;
    --series-rain: #2a78d6;
    --series-radiation: #eda100;
    --series-uv: #e87ba4;
    --grid: #e1e0d9;
    --axis: #c3c2b7;

    /* Weather icons */
    --wi-sun: #eda100;
    --wi-moon: #7c8db5;
    --wi-cloud: #7c7a74;
    --wi-precip: #2a78d6;
    --wi-bolt: #eda100;

    /* Sky, for the sun panel */
    --sky-top: rgba(42, 120, 214, 0.16);
    --sky-bottom: rgba(237, 161, 0, 0.10);

    /* Shape */
    --radius: 14px;
    --radius-sm: 9px;
    --gap: 1.25rem;
    --shadow: 0 1px 2px rgba(11, 11, 11, 0.05), 0 8px 24px -16px rgba(11, 11, 11, 0.22);

    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
}

/*
 * Dark is a selected palette, not an inversion: the series steps are the dark
 * column of the same eight hues, chosen against the dark surface.
 */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;

        --plane: #0d0d0d;
        --surface: #1a1a19;
        --surface-2: #232322;
        --surface-3: #2c2c2a;

        --ink: #ffffff;
        --ink-2: #c3c2b7;
        --ink-3: #918f88;

        --line: #2c2c2a;
        --line-strong: #383835;
        --ring: rgba(255, 255, 255, 0.10);

        --accent: #3987e5;
        --accent-soft: #16273c;
        --accent-ink: #08111d;
        --focus: #6da7ec;

        --good-soft: #10240f;
        --warning-soft: #2c2410;
        --serious-soft: #2c1d15;
        --critical-soft: #2c1414;

        --series-temp: #d95926;
        --series-dew: #3987e5;
        --series-humidity: #3987e5;
        --series-pressure: #9085e9;
        --series-wind: #199e70;
        --series-gust: #9085e9;
        --series-rain: #3987e5;
        --series-radiation: #c98500;
        --series-uv: #d55181;
        --grid: #2c2c2a;
        --axis: #383835;

        --wi-sun: #e0a52a;
        --wi-moon: #a9b6d4;
        --wi-cloud: #9a988f;
        --wi-precip: #5598e7;
        --wi-bolt: #e0a52a;

        --sky-top: rgba(57, 135, 229, 0.22);
        --sky-bottom: rgba(224, 165, 42, 0.10);

        --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px -16px rgba(0, 0, 0, 0.8);
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;

    --plane: #0d0d0d;
    --surface: #1a1a19;
    --surface-2: #232322;
    --surface-3: #2c2c2a;

    --ink: #ffffff;
    --ink-2: #c3c2b7;
    --ink-3: #918f88;

    --line: #2c2c2a;
    --line-strong: #383835;
    --ring: rgba(255, 255, 255, 0.10);

    --accent: #3987e5;
    --accent-soft: #16273c;
    --accent-ink: #08111d;
    --focus: #6da7ec;

    --good-soft: #10240f;
    --warning-soft: #2c2410;
    --serious-soft: #2c1d15;
    --critical-soft: #2c1414;

    --series-temp: #d95926;
    --series-dew: #3987e5;
    --series-humidity: #3987e5;
    --series-pressure: #9085e9;
    --series-wind: #199e70;
    --series-gust: #9085e9;
    --series-rain: #3987e5;
    --series-radiation: #c98500;
    --series-uv: #d55181;
    --grid: #2c2c2a;
    --axis: #383835;

    --wi-sun: #e0a52a;
    --wi-moon: #a9b6d4;
    --wi-cloud: #9a988f;
    --wi-precip: #5598e7;
    --wi-bolt: #e0a52a;

    --sky-top: rgba(57, 135, 229, 0.22);
    --sky-bottom: rgba(224, 165, 42, 0.10);

    --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 24px -16px rgba(0, 0, 0, 0.8);
}

/* ------------------------------------------------------------------- reset */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.5;
    color: var(--ink);
    background: var(--plane);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, dl, dd, figure, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }

svg { display: block; }

code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.85em;
    color: var(--ink-2);
}

:where(a) { color: var(--accent); }

:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
    border-radius: 4px;
}

/* --------------------------------------------------------------- utilities */

.shell {
    width: 100%;
    max-width: 1180px;
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
}

.dim {
    color: var(--ink-3);
    font-weight: 400;
}

.is-hidden { display: none !important; }

.is-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -120%);
    z-index: 20;
    padding: 0.6rem 1.1rem;
    background: var(--accent);
    color: var(--accent-ink);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    text-decoration: none;
    font-weight: 600;
}

.skip-link:focus { transform: translate(-50%, 0); }

.icon-sprite { position: absolute; }

.is-numeric { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ header */

.site-header {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: saturate(1.4) blur(6px);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.85rem;
}

.site-header__identity {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
}

.site-header__mark {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
}

.site-header__title {
    font-size: 1.05rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.site-header__region {
    font-size: 0.8rem;
    color: var(--ink-3);
    line-height: 1.3;
}

/* Theme switch: three states, because "auto" has to remain reachable. */
.theme-switch {
    display: flex;
    gap: 2px;
    padding: 3px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 999px;
}

.theme-switch__option {
    display: grid;
    place-items: center;
    width: 32px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ink-3);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.theme-switch__option svg { width: 17px; height: 17px; }

.theme-switch__option:hover { color: var(--ink); }

.theme-switch__option[aria-pressed="true"] {
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

/* -------------------------------------------------------------- page frame */

.page {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
    padding-block: clamp(1.25rem, 3vw, 2rem) 3rem;
}

.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: clamp(1rem, 2.4vw, 1.5rem);
}

.panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.panel__head .panel__title { margin-bottom: 0; }

.panel__title {
    font-size: 0.76rem;
    font-weight: 650;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 0.9rem;
}

.panel__source {
    font-size: 0.78rem;
    color: var(--ink-3);
}

.panel__empty {
    color: var(--ink-3);
    font-size: 0.9rem;
    padding-block: 0.5rem;
}

/* --------------------------------------------------------------- callouts */

.callout {
    border: 1px solid var(--line);
    border-left-width: 4px;
    border-radius: var(--radius-sm);
    padding: 0.9rem 1.1rem;
    background: var(--surface);
    font-size: 0.92rem;
}

.callout__title { font-weight: 650; }

.callout--info { border-left-color: var(--accent); background: var(--accent-soft); }
.callout--warning { border-left-color: var(--warning); background: var(--warning-soft); }
.callout--critical { border-left-color: var(--critical); background: var(--critical-soft); }

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 650;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--line);
}

.badge--good { background: var(--good-soft); border-color: var(--good); }
.badge--warning { background: var(--warning-soft); border-color: var(--warning); }
.badge--critical { background: var(--critical-soft); border-color: var(--critical); }

/* ----------------------------------------------------------- status strip */

.status {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.85rem;
    padding: 0.7rem 1rem;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    font-size: 0.88rem;
}

.status__dot { flex: none; }
.status__dot svg { width: 15px; height: 15px; fill: currentColor; }

.status--good .status__dot { color: var(--good); }
.status--warning .status__dot { color: var(--warning); }
.status--critical .status__dot { color: var(--critical); }
.status--muted .status__dot { color: var(--ink-3); }

.status__state { font-weight: 650; }

.status__meta {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-left: auto;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}

.status__note {
    flex-basis: 100%;
    color: var(--ink-3);
    font-size: 0.82rem;
}

/* ------------------------------------------------------------------- hero */

.hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--gap);
}

.panel--hero {
    display: flex;
    flex-direction: column;
}

.hero__value {
    font-size: clamp(3.4rem, 11vw, 5.2rem);
    font-weight: 300;
    line-height: 1;
    letter-spacing: -0.035em;
    margin-block: 0.2rem 0.5rem;
}

.hero__unit {
    font-size: 0.32em;
    font-weight: 500;
    letter-spacing: 0;
    margin-left: 0.12em;
    vertical-align: 0.9em;
    color: var(--ink-3);
}

.hero__secondary {
    color: var(--ink-2);
    font-size: 1rem;
}

.trend {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 1rem;
    font-size: 0.88rem;
    color: var(--ink-2);
}

.trend__glyph svg { width: 14px; height: 14px; fill: currentColor; }
.trend--up .trend__glyph { color: var(--serious); }
.trend--down .trend__glyph { color: var(--accent); }
.trend--flat .trend__glyph { color: var(--ink-3); }

/* ------------------------------------------------------------------- rain */

.rain__today {
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    flex-wrap: wrap;
    font-size: clamp(2rem, 6vw, 2.8rem);
    font-weight: 350;
    letter-spacing: -0.03em;
    line-height: 1.05;
}

.rain__unit {
    font-size: 0.4em;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--ink-3);
}

.rain__caption {
    font-size: 0.34em;
    color: var(--ink-3);
    letter-spacing: 0;
}

.rain__gauge {
    position: relative;
    height: 9px;
    margin-top: 0.9rem;
    border-radius: 999px;
    background: var(--surface-3);
    overflow: hidden;
}

.rain__gauge-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--series-rain);
    transition: width 0.4s ease;
}

.rain__scale {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    margin-top: 0.3rem;
}

.rain__facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: 0.75rem;
    margin-top: 1.1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--line);
}

.rain__facts dt, .wind__facts dt, .sun-facts dt, .summary-list dt {
    font-size: 0.74rem;
    color: var(--ink-3);
    letter-spacing: 0.01em;
}

.rain__facts dd, .wind__facts dd, .sun-facts dd {
    font-size: 0.98rem;
    font-weight: 550;
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ tiles */

.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.85rem;
}

.tile {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 0.85rem 0.95rem;
}

.tile__label {
    font-size: 0.74rem;
    color: var(--ink-3);
    line-height: 1.35;
    min-height: 2.1em;
}

.tile__value {
    font-size: 1.32rem;
    font-weight: 550;
    letter-spacing: -0.015em;
    font-variant-numeric: tabular-nums;
    margin-top: 0.15rem;
}

.tile__meter {
    height: 5px;
    margin-top: 0.55rem;
    border-radius: 999px;
    background: var(--surface-3);
    overflow: hidden;
}

.tile__meter span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--series-humidity);
}

.tile__note {
    display: inline-block;
    margin-top: 0.45rem;
    font-size: 0.74rem;
    font-weight: 650;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    border: 1px solid var(--line);
}

.tile__note--good { background: var(--good-soft); border-color: var(--good); }
.tile__note--warning { background: var(--warning-soft); border-color: var(--warning); }
.tile__note--serious { background: var(--serious-soft); border-color: var(--serious); }
.tile__note--critical { background: var(--critical-soft); border-color: var(--critical); }

/* ------------------------------------------------------------ split layout */

.split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--gap);
}

/* -------------------------------------------------------------- wind rose */

.wind {
    display: grid;
    grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
    align-items: center;
    gap: clamp(1rem, 3vw, 2rem);
}

.wind__rose { margin: 0; }

.wind-rose { width: 100%; height: auto; }

.wind-rose__track { stroke: var(--surface-3); }
.wind-rose__value {
    stroke: var(--series-wind);
    transition: stroke-dasharray 0.5s ease;
}

.wind-rose__tick {
    stroke: var(--line-strong);
    stroke-width: 1.5;
}

.wind-rose__tick.is-major {
    stroke: var(--ink-3);
    stroke-width: 2;
}

.wind-rose__labels text {
    fill: var(--ink-3);
    font-size: 11px;
    font-weight: 650;
    font-family: var(--font);
}

/*
 * The needle is rotated about the centre of the rose. transform-box keeps the
 * origin in the viewBox's own coordinates rather than the element's bounding
 * box, which would drift as the arrow is redrawn.
 */
.wind-rose__needle {
    transform: rotate(var(--wind-bearing, 0deg));
    transform-box: view-box;
    transform-origin: 100px 100px;
    transition: transform 0.6s cubic-bezier(0.34, 1.2, 0.64, 1);
}

.wind-rose__arrow { fill: var(--series-temp); }

.wind-rose__tail {
    stroke: var(--series-temp);
    stroke-width: 2.5;
    stroke-linecap: round;
    opacity: 0.35;
}

.wind-rose__gust {
    fill: var(--series-gust);
    opacity: 0.6;
}

.wind-rose__hub {
    fill: var(--surface);
    stroke: var(--line);
}

.wind-rose__speed {
    fill: var(--ink);
    font-size: 34px;
    font-weight: 350;
    letter-spacing: -0.03em;
    font-family: var(--font);
}

.wind-rose__unit {
    fill: var(--ink-3);
    font-size: 12px;
    font-family: var(--font);
}

.wind__facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.9rem 1rem;
}

.wind__facts dd { line-height: 1.35; }
.wind__facts dd .dim { display: block; font-size: 0.82rem; }

/* --------------------------------------------------------------- sun arc */

.sun-arc { margin: 0 0 1.1rem; }
.sun-arc__svg { width: 100%; height: auto; }

.sun-arc__sky-top { stop-color: var(--sky-top); }
.sun-arc__sky-bottom { stop-color: var(--sky-bottom); }

.sun-arc__track {
    stroke: var(--line);
    stroke-dasharray: 3 6;
}

.sun-arc__elapsed {
    stroke: var(--wi-sun);
    transition: stroke-dasharray 0.6s ease;
}

.sun-arc__horizon {
    stroke: var(--line-strong);
    stroke-width: 1.5;
}

.sun-arc__glow { fill: var(--wi-sun); opacity: 0.18; }
.sun-arc__disc { fill: var(--wi-sun); }
.sun-arc__rays { stroke: var(--wi-sun); stroke-width: 2; }
.sun-arc__moon { fill: var(--wi-moon); }

.sun-arc__ends text {
    fill: var(--ink-3);
    font-size: 11px;
    font-family: var(--font);
    font-variant-numeric: tabular-nums;
}

.panel--sun.is-night .sun-arc__fill { opacity: 0.4; }

.sun-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 0.9rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

.sun-facts dt {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.sun-facts__glyph svg { width: 14px; height: 14px; }
.sun-facts__glyph--rise { color: var(--wi-sun); }
.sun-facts__glyph--set { color: var(--wi-moon); }

.sun-next {
    margin-top: 0.9rem;
    font-size: 0.88rem;
    color: var(--ink-2);
    font-variant-numeric: tabular-nums;
}

.sun-twilight {
    margin-top: 0.25rem;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ weather icon */

.wi {
    fill: none;
    stroke-width: 1.7;
    stroke-linejoin: round;
    flex: none;
}

.wi--sm { width: 24px; height: 24px; }
.wi--md { width: 32px; height: 32px; }
.wi--lg { width: 40px; height: 40px; }

.wi .wi-sun { stroke: var(--wi-sun); }
.wi .wi-sun circle { fill: color-mix(in srgb, var(--wi-sun) 22%, transparent); }
.wi .wi-moon { stroke: var(--wi-moon); fill: color-mix(in srgb, var(--wi-moon) 20%, transparent); }
.wi .wi-star { stroke: var(--wi-moon); stroke-linecap: round; }
.wi .wi-cloud { stroke: var(--wi-cloud); fill: color-mix(in srgb, var(--wi-cloud) 12%, transparent); }
.wi .wi-precip { stroke: var(--wi-precip); }
.wi .wi-precip[fill="currentColor"] { fill: var(--wi-precip); }
.wi .wi-bolt { fill: var(--wi-bolt); stroke: none; }

/* --------------------------------------------------------------- forecast */

.hourly {
    margin-bottom: 1.25rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px solid var(--line);
}

.hourly__track {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 0.4rem;
    /* A single scrollbar in the strip, never on the page. */
    scrollbar-width: thin;
}

.hourly__item {
    display: grid;
    justify-items: center;
    gap: 0.3rem;
    flex: none;
    min-width: 68px;
    padding: 0.7rem 0.5rem;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    scroll-snap-align: start;
}

.hourly__item.is-night { background: var(--surface-3); }

.hourly__time {
    font-size: 0.75rem;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

.hourly__temp {
    font-size: 1.05rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.hourly__pop {
    font-size: 0.72rem;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

.hourly__pop.is-likely { color: var(--series-rain); font-weight: 600; }

.daily { display: flex; flex-direction: column; }

.daily__row {
    display: grid;
    grid-template-columns: 8.5rem 40px minmax(0, 1fr) 7.5rem minmax(140px, 1.1fr) 5rem;
    align-items: center;
    gap: 0.75rem;
    padding-block: 0.7rem;
    border-bottom: 1px solid var(--line);
}

.daily__row:last-child { border-bottom: 0; padding-bottom: 0; }

.daily__day { display: flex; flex-direction: column; line-height: 1.25; }
.daily__weekday { font-weight: 600; font-size: 0.92rem; }
.daily__date { font-size: 0.76rem; font-variant-numeric: tabular-nums; }

.daily__label {
    font-size: 0.86rem;
    color: var(--ink-2);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.daily__pop {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.82rem;
    color: var(--ink-3);
    font-variant-numeric: tabular-nums;
}

.daily__pop.is-likely { color: var(--series-rain); }
.daily__drop { width: 13px; height: 13px; fill: currentColor; opacity: 0.75; }

.daily__range {
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr) 2.4rem;
    align-items: center;
    gap: 0.5rem;
    font-variant-numeric: tabular-nums;
    font-size: 0.88rem;
}

.daily__low { color: var(--ink-3); text-align: right; }
.daily__high { font-weight: 600; }

.daily__bar {
    position: relative;
    display: block;
    height: 6px;
    border-radius: 999px;
    background: var(--surface-3);
}

.daily__bar-fill {
    position: absolute;
    top: 0;
    height: 100%;
    border-radius: 999px;
    /* Cool at the low end, warm at the high end - the same two hues the
       temperature chart uses for dew point and temperature. */
    background: linear-gradient(90deg, var(--series-dew), var(--series-temp));
}

.daily__wind {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
    justify-content: flex-end;
}

.daily__arrow svg {
    width: 13px;
    height: 13px;
    fill: var(--series-wind);
    transform: rotate(var(--wind-bearing, 0deg));
}

/* --------------------------------------------------------------- summary */

.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 0.9rem;
}

.summary-card {
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    padding: 0.95rem 1.05rem;
}

.summary-card__title {
    font-size: 0.88rem;
    font-weight: 650;
    margin-bottom: 0.7rem;
}

.summary-list { display: flex; flex-direction: column; gap: 0.55rem; }

.summary-list > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
}

.summary-list dd {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.summary-list__value { font-weight: 600; }
.summary-list dd .dim { display: block; font-size: 0.72rem; }

/* ---------------------------------------------------------------- charts */

.segmented {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 999px;
}

.segmented__option {
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ink-2);
    font: inherit;
    font-size: 0.82rem;
    font-weight: 550;
    padding: 0.35rem 0.85rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}

.segmented__option:hover { color: var(--ink); }

.segmented__option[aria-selected="true"] {
    background: var(--surface);
    color: var(--ink);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.chart-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.25rem;
    margin-top: 1rem;
}

.chart { margin: 0; }

.chart__title {
    font-size: 0.86rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
}

/*
 * Chart.js grows the canvas on every resize when the parent has no intrinsic
 * height, so the frame is what bounds it.
 */
.chart__frame {
    position: relative;
    height: 240px;
}

.chart__empty {
    display: grid;
    place-items: center;
    height: 100%;
    color: var(--ink-3);
    font-size: 0.85rem;
    background: var(--surface-2);
    border-radius: var(--radius-sm);
}

/* --------------------------------------------------------- sensor health */

.sensor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 0.85rem;
}

.sensor-card {
    background: var(--surface-2);
    border-radius: var(--radius-sm);
    padding: 0.85rem 0.95rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.sensor-card__name {
    font-size: 0.88rem;
    font-weight: 600;
}

.reading {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.reading__text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }

.reading__value {
    font-size: 0.9rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.reading__value .dim { font-weight: 400; font-size: 0.8rem; margin-left: 0.25rem; }

.reading__label {
    font-size: 0.73rem;
    color: var(--ink-3);
}

/* The gauge colour follows the state; the word beside it says the same thing. */
.reading--good { --state: var(--good); }
.reading--warning { --state: var(--warning); }
.reading--low { --state: var(--critical); }
.reading--unknown { --state: var(--ink-3); }

.battery {
    display: flex;
    align-items: center;
    gap: 1.5px;
    flex: none;
}

.battery__shell {
    position: relative;
    display: block;
    width: 34px;
    height: 17px;
    padding: 2.5px;
    border: 1.5px solid var(--line-strong);
    border-radius: 4px;
    background: var(--surface);
}

.battery__fill {
    display: block;
    height: 100%;
    min-width: 2px;
    border-radius: 1.5px;
    background: var(--state, var(--ink-3));
    transition: width 0.4s ease;
}

.battery__fill--unknown {
    width: 100%;
    background: repeating-linear-gradient(
        45deg,
        var(--line-strong) 0 3px,
        transparent 3px 6px
    );
}

.battery__cap {
    display: block;
    width: 3px;
    height: 7px;
    border-radius: 0 2px 2px 0;
    background: var(--line-strong);
}

.signal {
    display: flex;
    align-items: flex-end;
    gap: 2.5px;
    height: 18px;
    flex: none;
}

.signal__bar {
    display: block;
    width: 5px;
    border-radius: 1.5px;
    background: var(--surface-3);
    /* Each bar is taller than the one before it: 6px, 10px, 14px, 18px. */
    height: calc(2px + var(--bar) * 4px);
}

.signal__bar.is-on { background: var(--state, var(--ink-3)); }

/* ------------------------------------------------------------- disclosure */

.disclosure__summary {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.92rem;
    list-style: none;
    padding: 0.2rem 0;
}

.disclosure__summary::-webkit-details-marker { display: none; }

.disclosure__summary:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 3px;
}

.disclosure__count {
    font-size: 0.74rem;
    font-weight: 650;
    color: var(--ink-3);
    background: var(--surface-2);
    border-radius: 999px;
    padding: 0.05rem 0.5rem;
}

.disclosure__chevron {
    width: 16px;
    height: 16px;
    color: var(--ink-3);
    margin-left: auto;
    transition: transform 0.2s ease;
}

.disclosure[open] .disclosure__chevron { transform: rotate(180deg); }

/* ------------------------------------------------------------------ table */

.table-scroll {
    overflow-x: auto;
    margin-top: 0.9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.86rem;
}

.data-table th, .data-table td {
    text-align: left;
    padding: 0.5rem 0.8rem;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

.data-table thead th {
    font-size: 0.73rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-3);
    background: var(--surface-2);
}

.data-table tbody th { font-weight: 500; }
.data-table tbody tr:last-child th,
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table td.is-numeric { font-variant-numeric: tabular-nums; }

/* ----------------------------------------------------------------- footer */

.site-footer {
    border-top: 1px solid var(--line);
    background: var(--surface);
    padding-block: 1.5rem 2.25rem;
    color: var(--ink-3);
    font-size: 0.82rem;
    text-align: center;
}

.site-footer__meta { margin-top: 0.4rem; font-size: 0.76rem; }

/* ------------------------------------------------------------- responsive */

@media (max-width: 1000px) {
    .daily__row {
        grid-template-columns: 7rem 36px minmax(120px, 1fr) minmax(0, 1.2fr) 4.5rem;
    }
    .daily__pop { display: none; }
}

@media (max-width: 860px) {
    .hero, .split { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 680px) {
    .wind { grid-template-columns: minmax(0, 1fr); justify-items: center; }
    .wind__rose { max-width: 220px; width: 100%; }
    .wind__facts { width: 100%; }

    .daily__row {
        grid-template-columns: 5.5rem 32px minmax(0, 1fr);
        row-gap: 0.35rem;
    }
    .daily__label { grid-column: 1 / -1; }
    .daily__range { grid-column: 1 / -1; }
    .daily__wind { grid-column: 3; grid-row: 1; }

    .status__meta { margin-left: 0; width: 100%; }

    .chart__frame { height: 210px; }
}

/* ------------------------------------------------------------ preferences */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/*
 * In forced-colors mode the browser replaces every colour, so the meaning has
 * to survive on shape alone. The gauges keep their outlines and the filled part
 * is drawn in the system highlight colour.
 */
@media (forced-colors: active) {
    .panel, .tile, .status, .callout { border: 1px solid CanvasText; }
    .battery__fill, .signal__bar.is-on, .rain__gauge-fill, .tile__meter span {
        background: Highlight;
        forced-color-adjust: none;
    }
    .signal__bar { border: 1px solid CanvasText; }
    .theme-switch__option[aria-pressed="true"],
    .segmented__option[aria-selected="true"] { border: 2px solid Highlight; }
}