/* =========================================================================
   Vreme — Cerkniško jezero
   Vizualni jezik iOS 26 "Liquid Glass":

   1. Vsebina leži na barvitem, mehko zamegljenem ozadju.
   2. Ploskve nad njo so steklo — poltransparentne, z močnim backdrop-filter
      (blur + saturate), tako da barva ozadja prosevá skoznje.
   3. Vsaka steklena ploskev ima svetel rob na zgornji strani (odsev svetlobe)
      in mehko senco spodaj, kar ustvari občutek plavajoče plasti.
   4. Robovi so izrazito zaobljeni, tipografija velika in kontrastna.

   Postavitev je mobilna najprej; nad 720 px preide v več stolpcev.
   ========================================================================= */

/* ---------- barvne spremenljivke ---------- */

:root {
    color-scheme: light dark;

    --radius-lg: 30px;
    --radius-md: 22px;
    --radius-sm: 16px;

    --text: #0b1220;
    --text-dim: rgba(11, 18, 32, 0.58);
    --text-faint: rgba(11, 18, 32, 0.38);

    --glass-bg: rgba(255, 255, 255, 0.5);
    --glass-bg-strong: rgba(255, 255, 255, 0.68);
    --glass-edge: rgba(255, 255, 255, 0.85);
    --glass-border: rgba(255, 255, 255, 0.4);
    --glass-shadow: 0 18px 40px -18px rgba(15, 30, 60, 0.45);

    --accent: #0a84ff;
    --warm: #ff9f0a;
    --cool: #64d2ff;

    --page-bg: #dbeafe;

    /* Barve madežev v ozadju; app.js jih prepiše glede na uro in temperaturo. */
    --blob-a: #7cc4ff;
    --blob-b: #ffd6a5;
    --blob-c: #c4b5fd;

    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);

    /* Barve vremenskih ikon; ločene od ostalih, da jih je mogoče uglasiti
       posebej za svetlo in temno temo. */
    --icon-sun: #f5a524;
    --icon-moon: #9aa8c4;
    --icon-cloud: #b7c5d8;
    --icon-cloud-dark: #8b9ab1;
    --icon-rain: #3f9bd8;
    --icon-snow: #8fc8ec;
    --icon-bolt: #f0a020;
}

@media (prefers-color-scheme: dark) {
    :root {
        --text: #f4f6fb;
        --text-dim: rgba(244, 246, 251, 0.62);
        --text-faint: rgba(244, 246, 251, 0.38);

        --glass-bg: rgba(28, 30, 38, 0.52);
        --glass-bg-strong: rgba(28, 30, 38, 0.72);
        --glass-edge: rgba(255, 255, 255, 0.22);
        --glass-border: rgba(255, 255, 255, 0.12);
        --glass-shadow: 0 22px 46px -20px rgba(0, 0, 0, 0.8);

        --page-bg: #070b16;

        --blob-a: #1d4ed8;
        --blob-b: #7c3aed;
        --blob-c: #0e7490;

        --icon-sun: #ffc65c;
        --icon-moon: #dbe3f2;
        --icon-cloud: #93a3bd;
        --icon-cloud-dark: #6f7f99;
        --icon-rain: #6cc0f0;
        --icon-snow: #b6ddf5;
        --icon-bolt: #ffc65c;
    }
}

/* ---------- osnove ---------- */

* { box-sizing: border-box; }

/* Varovalka: nobena slika ne sme biti širša od svojega vsebnika, sicer na
   telefonu razpre stran in se pojavi vodoravno drsenje. */
img, svg, video { max-width: 100%; }

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    background: var(--page-bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
    font-size: 17px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;

    /* Na iPhonu preprečimo, da bi se cela stran gugala; drsenje prevzame #app. */
    overscroll-behavior-y: contain;
}

/* Besedila v vmesniku ni smiselno izbirati; polja z vrednostmi so izjema. */
body { -webkit-user-select: none; user-select: none; }
.hero-value, .metric-value { -webkit-user-select: text; user-select: text; }

/* ---------- ozadje ---------- */

.backdrop {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    background: var(--page-bg);
}

.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.6;
    transition: background 1.2s ease;
    will-change: transform;
}

.blob-a { width: 78vmax; height: 78vmax; top: -30vmax; left: -22vmax; background: var(--blob-a); }
.blob-b { width: 62vmax; height: 62vmax; top: 22vmax;  right: -26vmax; background: var(--blob-b); opacity: 0.48; }
.blob-c { width: 54vmax; height: 54vmax; bottom: -24vmax; left: 8vmax;  background: var(--blob-c); opacity: 0.42; }

/* Tanka koprena čez madeže: barve ostanejo, a se umirijo toliko, da steklene
   ploskve nad njimi jasno izstopajo in besedilo ohrani kontrast. */
.backdrop::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.2));
}

@media (prefers-color-scheme: dark) {
    .backdrop::after {
        background: linear-gradient(180deg, rgba(4, 8, 18, 0.42), rgba(4, 8, 18, 0.62));
    }
}

@media (prefers-reduced-motion: no-preference) {
    .blob-a { animation: drift-a 34s ease-in-out infinite alternate; }
    .blob-b { animation: drift-b 41s ease-in-out infinite alternate; }
}

@keyframes drift-a { to { transform: translate3d(6vmax, 4vmax, 0) scale(1.08); } }
@keyframes drift-b { to { transform: translate3d(-5vmax, -6vmax, 0) scale(0.94); } }

/* ---------- steklo ---------- */

.glass {
    position: relative;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--glass-shadow);

    /* Jedro učinka: ozadje se skozi ploskev vidi zamegljeno in bolj nasičeno. */
    -webkit-backdrop-filter: blur(30px) saturate(190%);
    backdrop-filter: blur(30px) saturate(190%);
}

/* Svetlobni odsev na zgornjem robu — od tod občutek debeline stekla. */
.glass::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(to bottom, var(--glass-edge), transparent 55%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
}

/* Brskalniki brez backdrop-filter (starejši Android) dobijo motno ploskev,
   da besedilo ostane berljivo. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass { background: var(--glass-bg-strong); }
}

/* ---------- postavitev ---------- */

#app {
    max-width: 1100px;
    margin: 0 auto;
    padding:
        calc(var(--safe-top) + 18px)
        max(18px, env(safe-area-inset-left))
        calc(var(--safe-bottom) + 120px)
        max(18px, env(safe-area-inset-right));
}

.view { animation: rise 0.42s cubic-bezier(0.22, 1, 0.36, 1); }

@keyframes rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .view { animation: none; }
}

.view-head { margin: 6px 4px 20px; }

.eyebrow {
    margin: 0;
    font-size: 15px;
    font-weight: 590;
    color: var(--text-dim);
    letter-spacing: 0.01em;
}

.title {
    margin: 2px 0 0;
    font-size: clamp(34px, 9vw, 44px);
    font-weight: 730;
    letter-spacing: -0.025em;
    line-height: 1.05;
}

.subtle { margin: 6px 0 0; font-size: 15px; color: var(--text-dim); }

.card { padding: 20px; margin-bottom: 18px; }

.card-head {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.card-head h2 {
    margin: 0;
    font-size: 19px;
    font-weight: 640;
    letter-spacing: -0.01em;
}

/* ---------- trenutno stanje ---------- */

.hero {
    padding: 30px 24px 26px;
    margin-bottom: 18px;
    text-align: center;
}

.wicon { display: block; width: 100%; height: 100%; overflow: visible; }

.hero-icon {
    width: 78px;
    height: 78px;
    margin: 0 auto 4px;
}

.hero-icon:empty { display: none; }

.hero-temp {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 4px;
    line-height: 1;
}

.hero-value {
    font-size: clamp(84px, 26vw, 132px);
    font-weight: 300;
    letter-spacing: -0.045em;
    font-variant-numeric: tabular-nums;
}

.hero-unit {
    font-size: clamp(30px, 8vw, 42px);
    font-weight: 300;
    color: var(--text-dim);
    margin-top: 0.35em;
}

.delta-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 14px;
    padding: 9px 17px;
    border-radius: 999px;
    font-size: 15.5px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.42);
    border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: blur(14px) saturate(170%);
    backdrop-filter: blur(14px) saturate(170%);
}

@media (prefers-color-scheme: dark) {
    .delta-pill { background: rgba(255, 255, 255, 0.1); }
}

.delta-pill.is-warmer { color: #d9480f; }
.delta-pill.is-cooler { color: #0b6bcb; }
.delta-pill.is-same   { color: var(--text-dim); }

@media (prefers-color-scheme: dark) {
    .delta-pill.is-warmer { color: #ffb35c; }
    .delta-pill.is-cooler { color: #6fc9ff; }
}

.hero-note { margin: 14px 0 0; font-size: 14px; color: var(--text-faint); }

.metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.metric {
    padding: 16px 18px;
    border-radius: var(--radius-md);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
}

.metric-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.metric-value {
    margin-top: 6px;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.metric-value small { font-size: 15px; font-weight: 500; color: var(--text-dim); margin-left: 2px; }

/* ---------- segmentni izbirnik ---------- */

.seg {
    display: flex;
    gap: 3px;
    padding: 3px;
    margin-bottom: 16px;
    border-radius: 999px;
    background: rgba(120, 130, 150, 0.16);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

.seg button {
    flex: 1;
    min-height: 36px;
    padding: 7px 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-dim);
    font: inherit;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease;
}

.seg button.is-active {
    background: var(--glass-bg-strong);
    color: var(--text);
    box-shadow: 0 2px 8px -2px rgba(15, 30, 60, 0.3);
}

/* Sedem vodomernih postaj v en pas ne gre — „Veliki Obrh“ in „Malenščica“
   bi se stisnila v nečitljive ostanke. Zato se ta izbirnik prelomi v čipe,
   ki se prilegajo besedilu. Vse postaje ostanejo vidne hkrati; drsni pas bi
   jih polovico skril, ne da bi kdo vedel zanje. */
.seg-wrap {
    flex-wrap: wrap;
    row-gap: 3px;
    border-radius: var(--radius-sm);
}
.seg-wrap button {
    flex: 0 1 auto;
    min-height: 32px;
    padding: 6px 12px;
    font-size: 13.5px;
}

/* Ozki telefoni: pasovi s petimi enotami (3 dni … vse) sicer prekipijo. */
@media (max-width: 400px) {
    .seg button { padding-left: 6px; padding-right: 6px; font-size: 13px; }
    .seg-wrap button { padding-left: 10px; padding-right: 10px; font-size: 12.5px; }
}

@media (max-width: 340px) {
    .seg button { font-size: 12px; }
}

.seg-small { margin: 0; flex: 0 1 auto; }
.seg-small button { flex: 0 0 auto; font-size: 13.5px; min-height: 30px; padding: 5px 11px; }

/* ---------- graf ---------- */

.chart-host { width: 100%; }
.chart-host svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart-foot { margin-top: 12px; }

.chart-empty {
    padding: 40px 10px;
    text-align: center;
    color: var(--text-dim);
}

/* ---------- zgodovina ---------- */

.history-list { display: flex; flex-direction: column; }

.history-row {
    display: grid;
    grid-template-columns: 92px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 12px 2px;
    border-top: 1px solid var(--glass-border);
}

.history-row:first-child { border-top: 0; }

.history-day { font-size: 14.5px; font-weight: 600; }
.history-day small { display: block; font-weight: 500; color: var(--text-faint); font-size: 12.5px; }

/* Vodoravni pas prikaže dnevni razpon temperature glede na razpon celotnega
   obdobja — tako se hitro vidi, kateri dan je bil topel in kateri hladen. */
.range-track {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: rgba(120, 130, 150, 0.2);
}

.range-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--cool), var(--warm));
}

.history-temps {
    font-size: 14.5px;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.history-temps b { font-weight: 640; }
.history-temps span { color: var(--text-dim); }

.history-precip { color: var(--accent); font-size: 12.5px; }

/* ---------- napoved ---------- */

.link-more {
    border: 0;
    background: transparent;
    color: var(--accent);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 2px;
}

.forecast-day {
    display: grid;
    grid-template-columns: 78px 38px 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 13px 2px;
    border-top: 1px solid var(--glass-border);
}

.forecast-icon { width: 38px; height: 38px; }

.forecast-day:first-child { border-top: 0; }

.forecast-when { font-size: 14.5px; font-weight: 600; }
.forecast-when small { display: block; font-weight: 500; font-size: 12.5px; color: var(--text-faint); }

.forecast-desc { font-size: 14px; color: var(--text-dim); }
.forecast-desc small { display: block; font-size: 12.5px; color: var(--text-faint); }

.forecast-temps {
    text-align: right;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.forecast-temps b { font-weight: 640; }
.forecast-temps span { color: var(--text-dim); }

/* Popravljena vrednost stoji pod napovedano, da je razlika takoj vidna. */
.forecast-corrected {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--accent);
}

.forecast-note {
    margin-top: 14px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-faint);
}

/* ---------- statistika ---------- */

/* Ena izstopajoča številka na vrhu kartice (percentil, vsota padavin …). */
.stat-lead {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 4px 0 10px;
}

.stat-lead b {
    font-size: clamp(38px, 11vw, 52px);
    font-weight: 620;
    letter-spacing: -0.03em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.stat-lead span { font-size: 17px; color: var(--text-dim); }

/* Vrstica ime → vrednost, uporabljena v rekordih in števcih. */
.stat-rows { display: flex; flex-direction: column; }

.stat-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 2px;
    border-top: 1px solid var(--glass-border);
}

.stat-row:first-child { border-top: 0; }
.stat-row dt { color: var(--text-dim); font-size: 15px; }
.stat-row dd { margin: 0; font-weight: 620; font-variant-numeric: tabular-nums; text-align: right; }
.stat-row dd small { display: block; font-weight: 500; font-size: 12.5px; color: var(--text-faint); }

/* Mreža klimatskih števcev. */
.counter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
}

.counter {
    padding: 14px;
    border-radius: var(--radius-sm);
    background: rgba(120, 130, 150, 0.13);
    text-align: center;
}

.counter b {
    display: block;
    font-size: 28px;
    font-weight: 640;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.counter span { font-size: 12.5px; color: var(--text-dim); }

/* Kazalnik megle. */
.fog-pill {
    display: inline-block;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 14.5px;
    font-weight: 600;
    background: rgba(120, 130, 150, 0.16);
}

.fog-pill.is-likely { background: rgba(56, 189, 248, 0.28); }

/* Koledarska toplotna karta: ena vrstica na mesec, en stolpec na dan v mesecu.
   Vodoravno drsenje je dovoljeno znotraj kartice, da stran nikoli ne postane
   širša od zaslona. */
.calendar { overflow-x: auto; padding-bottom: 4px; }
.calendar-inner { min-width: 320px; }

.calendar-month {
    display: grid;
    grid-template-columns: 44px repeat(31, 1fr);
    gap: 2px;
    align-items: center;
    margin-bottom: 3px;
}

/* Oznaka meseca mora ostati v eni vrstici, sicer se vrstice koledarja
   razmaknejo neenakomerno. */
.calendar-label {
    font-size: 11px;
    color: var(--text-dim);
    white-space: nowrap;
}

.calendar-cell {
    aspect-ratio: 1;
    border-radius: 2.5px;
    background: rgba(120, 130, 150, 0.14);
    min-height: 9px;
}

.calendar-scale {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 12px;
    color: var(--text-dim);
}

.calendar-scale i {
    flex: 1;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, #4f7fd0, #7fc4e8, #f2e6a0, #f0a860, #d94f3d);
}

/* ---------- navedba vira ---------- */

.credit {
    margin: 26px 4px 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-faint);
    text-align: center;
}

.credit a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}
/* Trije viri, vsak v svoji vrstici — na telefonu se v enem odstavku zlijejo
   v kašo, iz katere ni razvidno, kaj je čigavo. */
.credit p { margin: 0 0 4px; }
.credit b { font-weight: 600; }
.credit .subtle { font-size: 11.5px; }

/* ---------- zavihki ---------- */

.tabbar {
    position: fixed;
    left: 50%;
    bottom: calc(var(--safe-bottom) + 14px);
    transform: translateX(-50%);
    z-index: 20;

    display: flex;
    gap: 4px;
    padding: 6px;
    border-radius: 999px;
    width: min(500px, calc(100vw - 24px));
}

/* Pri petih zavihkih mora napis ostati v eni vrstici tudi na ozkem zaslonu. */
.tab span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
}

.tab {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 8px 2px 7px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-dim);
    font: inherit;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.24s ease, color 0.24s ease;
    -webkit-tap-highlight-color: transparent;
}

.tab svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tab.is-active {
    color: var(--text);
    background: var(--glass-bg-strong);
}

/* ---------- obvestilo o povezavi ---------- */

.offline-bar {
    position: fixed;
    top: calc(var(--safe-top) + 8px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;

    padding: 9px 18px;
    border-radius: 999px;
    font-size: 13.5px;
    font-weight: 600;
    color: #fff;
    background: rgba(200, 60, 40, 0.9);
    box-shadow: 0 10px 24px -12px rgba(0, 0, 0, 0.6);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

/* ---------- osveževanje s potegom navzdol ---------- */

.refresh-hint {
    position: fixed;
    top: calc(var(--safe-top) + 6px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 25;

    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    opacity: 0;
    pointer-events: none;
}

.refresh-hint svg { width: 18px; height: 18px; fill: none; stroke: var(--text); stroke-width: 2; stroke-linecap: round; }
.refresh-hint.is-spinning svg { animation: spin 0.9s linear infinite; }

@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- široki zasloni ---------- */

@media (min-width: 720px) {
    body { font-size: 17px; }

    #app { padding-bottom: calc(var(--safe-bottom) + 130px); }

    .hero { display: flex; align-items: center; justify-content: center; gap: 40px; text-align: left; padding: 36px 40px; }
    .hero-temp { justify-content: flex-start; }
    .hero-side { text-align: left; }

    .metric-grid { grid-template-columns: repeat(4, 1fr); }

    .history-row { grid-template-columns: 130px 1fr auto; }
}

@media (min-width: 980px) {
    /* Na namizju ostane vsebina zbrana na sredini in ne razleze čez cel zaslon. */
    .view { max-width: 960px; margin: 0 auto; }
}

/* ===========================================================================
   VODNI DEL
   =========================================================================== */

/* Preklop vreme/voda. Plavajoča kapsula desno zgoraj, pod varnim območjem
   statusne vrstice — na iPhonu bi sicer zlezla pod izrez. */
.mode-switch {
    position: fixed;
    top: calc(var(--safe-top) + 10px);
    right: 14px;
    z-index: 30;
    display: flex;
    gap: 2px;
    padding: 4px;
    border-radius: 999px;
}

.mode {
    display: grid;
    place-items: center;
    width: 40px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    transition: background .2s, color .2s;
}

.mode svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mode.is-active {
    background: var(--glass-bg-strong);
    color: var(--accent);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

/* Glave pogledov morajo pustiti prostor kapsuli. */
.view-head { padding-right: 96px; }

/* --- stanje jezera --- */

.lake-state {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--accent);
    margin-bottom: 2px;
}

.big-note {
    font-size: 17px;
    line-height: 1.45;
    margin: 0;
}

/* --- lestvica pragov --- */

.ladder {
    display: flex;
    flex-direction: column-reverse;   /* najvišji prag zgoraj */
    gap: 0;
    margin: 4px 0 12px;
}

.rung {
    display: grid;
    grid-template-columns: 74px 12px 1fr;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    border-top: 1px solid var(--glass-border);
}

/* Lestvica je obrnjena (column-reverse), zato je vizualno na vrhu zadnji otrok. */
.rung:last-child { border-top: 0; }

.rung-value {
    font-variant-numeric: tabular-nums;
    font-size: 13px;
    color: var(--text-dim);
    text-align: right;
}

.rung-dot {
    display: block;          /* inline span ne upošteva width/height */
    width: 10px;
    height: 10px;
    border-radius: 50%;
    justify-self: center;
}

.rung-label { font-size: 14px; line-height: 1.3; }

/* Trenutna gladina med pragovi. */
.rung-now {
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    border-radius: 10px;
    padding: 8px 6px;
    margin: 2px 0;
}

.rung-now .rung-label { font-weight: 650; color: var(--accent); }
.rung-now .rung-value { color: var(--accent); }

/* Vir podatka o pragu je viden, ker se uradni, izmerjeni in ocenjeni ne
   smejo zliti v eno. */
.src-official  { background: var(--accent); }
.src-measured  { background: #34c759; }
.src-derived   { background: var(--warm); }
.src-estimated { background: var(--text-faint); }
.src-literature { background: #af52de; }

.src {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin: 0 4px 0 10px;
    vertical-align: -1px;
}

.ladder-legend { font-size: 12px; margin: 0; }
.ladder-legend .src:first-child { margin-left: 0; }

/* --- trodnevna projekcija --- */

.proj {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 8px;
}

.proj-day {
    text-align: center;
    padding: 10px 4px;
    border-radius: var(--radius-sm);
    background: var(--glass-bg);
}

.proj-day b {
    display: block;
    font-size: 19px;
    font-variant-numeric: tabular-nums;
}

.proj-day span { font-size: 12px; color: var(--text-dim); }

/* --- pritoki --- */

.trib {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;
}

.trib-name { font-size: 15px; font-weight: 600; }
.trib-sub { font-size: 12.5px; color: var(--text-dim); margin: 2px 0 0; }

.trib-value {
    font-size: 21px;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.trib-value small { font-size: 12px; color: var(--text-dim); }

/* Vodoravni trak: kje je trenutna vrednost med pragovi. */
.gauge {
    position: relative;
    height: 6px;
    border-radius: 999px;
    background: var(--glass-bg);
    margin-top: 10px;
    overflow: hidden;
}

.gauge-fill {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--cool), var(--accent));
}

.gauge-mark {
    position: absolute;
    top: -3px;
    width: 2px;
    height: 12px;
    background: var(--text-faint);
}

.trib-none { color: var(--text-faint); font-size: 14px; }

/* --- zgodovina in poplave --- */

.rank {
    display: grid;
    grid-template-columns: 26px 1fr auto;
    gap: 10px;
    align-items: baseline;
    padding: 7px 0;
    border-top: 1px solid var(--glass-border);
    font-size: 14px;
}

.rank:first-of-type { border-top: 0; }
.rank i { font-style: normal; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.rank b { font-variant-numeric: tabular-nums; font-weight: 650; }

/* Atribut `hidden` postavi display:none v privzeti tabeli slogov brskalnika,
   to pa povozi vsako avtorsko pravilo z `display`. Ker imata .tabbar in
   .delta-pill svoj display, bi skrita ostala vidna — od tod to pravilo.
   Velja za vso aplikacijo, ker se `hidden` uporablja na več mestih. */
[hidden] { display: none !important; }

/* Vremenski hero postavi ikono in temperaturo v vrsto; pri jezeru pa gre za
   stanje, številko in koto, kar mora teči navzdol. Isto velja za Cerkniščico. */
#view-lake .hero,
#view-creek .hero {
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

/* --- radar ------------------------------------------------------------ */

/* Podlaga in sloj padavin sta ločeni sliki istega okvira in projekcije. Okvir
   drži razmerje 800 : 600, da stran ob nalaganju ne poskoči. */
/* Predogled na kartici: gumb, ki odpre karto. */
.radar-frame {
    display: block;
    position: relative;
    width: 100%;
    margin-top: 10px;
    padding: 0;
    aspect-ratio: 800 / 600;
    border: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--glass-bg);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.radar-base,
.radar-layer {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    user-select: none;
    -webkit-user-drag: none;
}
.radar-expand {
    position: absolute;
    right: 8px;
    bottom: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.85);
    color: #16203a;
    font-size: 12.5px;
    font-weight: 650;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* --- radar čez cel zaslon --------------------------------------------- */

.radar-full {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: #0b1020;
}
/* Pod odprto karto se stran ne sme premikati. */
body.radar-open { overflow: hidden; }
body.radar-open .tabbar,
body.radar-open .mode-switch { display: none !important; }

.radar-map {
    position: absolute;
    inset: 0;
}

/* Vrstici nad karto morata biti nad Leafletovimi sloji (ti gredo do 800). */
.radar-full-top,
.radar-full-bottom {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    pointer-events: none;
}
.radar-full-top {
    top: 0;
    padding-top: calc(var(--safe-top) + 12px);
    background: linear-gradient(to bottom, rgba(8, 12, 24, 0.55), transparent);
}
.radar-full-bottom {
    bottom: 0;
    padding-bottom: calc(var(--safe-bottom) + 14px);
    background: linear-gradient(to top, rgba(8, 12, 24, 0.6), transparent);
}
.radar-full-top > *,
.radar-full-bottom > * { pointer-events: auto; }

.radar-full-time {
    flex: 1;
    color: #fff;
    font-size: 16px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.radar-icon {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
    color: #16203a;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* Na karti sta gumb in drsnik na temnem, zato svetla različica. */
.radar-full .radar-play {
    background: rgba(255, 255, 255, 0.9);
    color: #16203a;
}
/* Opomba: tu je bilo pravilo, ki je združevalo `::-webkit-slider-runnable-track`
   in `::-moz-range-track` v en seznam izbirnikov. Tako pravilo je neveljavno v
   obeh brskalnikih — neznan psevdoelement podre cel seznam — zato ni nikoli
   učinkovalo. Nadomeščata ga ločeni pravili spodaj. */

/* ---------- urna lestvica pod drsnikom ---------- */

.slider-wrap {
    flex: 1;
    min-width: 0;
    position: relative;
}
.slider-wrap .radar-slider { width: 100%; }

/* Oznake se ravnajo po **sredini gumba** drsnika in ne po širini vrstice:
   gumb je širok 20 pik in se na robovih ustavi 10 pik pred njim, zato bi
   preprost odstotek na obeh koncih zgrešil za pol gumba. */
.time-scale {
    position: relative;
    height: 15px;
    margin-top: 1px;
    pointer-events: none;
}
.time-scale i {
    position: absolute;
    top: 0;
    width: 1px;
    height: 4px;
    background: rgba(255, 255, 255, 0.4);
}
.time-scale i.is-day {
    height: 7px;
    background: rgba(255, 255, 255, 0.7);
}
.time-scale i.is-now {
    width: 2px;
    height: 9px;
    background: var(--accent);
}
.time-scale span {
    position: absolute;
    top: 5px;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.9);
    font-size: 9.5px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}
.time-scale span.is-day { font-weight: 700; }
.time-scale span.is-now { color: var(--accent); font-weight: 700; }

/* Prehojeni del traku je obarvan — brez tega drsnik na dolgem oknu ne pove,
   kje v njem si, dokler ne prebereš napisa zgoraj. */
.radar-full .radar-slider::-webkit-slider-runnable-track {
    background:
        linear-gradient(to right,
            var(--accent) 0 var(--fill, 0%),
            rgba(255, 255, 255, 0.35) var(--fill, 0%) 100%);
}
.radar-full .radar-slider::-moz-range-track {
    background:
        linear-gradient(to right,
            var(--accent) 0 var(--fill, 0%),
            rgba(255, 255, 255, 0.35) var(--fill, 0%) 100%);
}

/* Leafletovi napisi na temni podlagi zaslona. */
.radar-full .leaflet-control-attribution {
    background: rgba(255, 255, 255, 0.82);
    font-size: 10px;
}
.radar-full .leaflet-bottom.leaflet-right { margin-bottom: 74px; }

/* Reliefna karta v temni temi zaslepi. Zatemnimo samo podlago — barvne
   lestvice padavin se ne sme dotakniti, sicer postane nerazumljiva. */
@media (prefers-color-scheme: dark) {
    .radar-base { filter: brightness(0.7) saturate(0.85); }
}
:root[data-theme="dark"] .radar-base { filter: brightness(0.7) saturate(0.85); }
:root[data-theme="light"] .radar-base { filter: none; }

.radar-time {
    font-size: 15px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.radar-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
}
.radar-play {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 999px;
    background: var(--glass-bg-strong);
    color: var(--text);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* Drsnik mora biti na dotik dovolj velik; privzeti je na telefonu pretanek. */
.radar-slider {
    flex: 1;
    min-width: 0;
    height: 28px;
    margin: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
.radar-slider::-webkit-slider-runnable-track {
    height: 5px;
    border-radius: 3px;
    background: var(--glass-bg-strong);
}
.radar-slider::-moz-range-track {
    height: 5px;
    border-radius: 3px;
    background: var(--glass-bg-strong);
}
.radar-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    margin-top: -7.5px;
    border: 0;
    border-radius: 50%;
    background: var(--accent);
}
.radar-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 50%;
    background: var(--accent);
}

/* --- padavine po zaledju ---------------------------------------------- */

/* Kartica na prvem zaslonu */

.precip-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid var(--glass-border);
}
.precip-row:last-child { border-bottom: 0; }

.precip-swatch {
    flex: 0 0 auto;
    width: 12px;
    height: 12px;
    border-radius: 3px;
}
.precip-name {
    flex: 1;
    min-width: 0;
    font-size: 14.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.precip-mm {
    flex: 0 0 auto;
    font-size: 15px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}
.precip-dry {
    margin: 4px 0 0;
    font-size: 14.5px;
    color: var(--text-dim);
}

.map-open {
    display: block;
    width: 100%;
    margin-top: 12px;
    padding: 11px;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--glass-bg-strong);
    color: var(--text);
    font: inherit;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* Karta čez cel zaslon — okvir je skupen z radarjem, tu je le vsebina. */

/* Krmilja plavajo pod zgornjo vrstico. Leafletovi sloji gredo do 800. */
.precip-controls {
    position: absolute;
    left: 14px;
    right: 14px;
    top: calc(var(--safe-top) + 60px);
    z-index: 900;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.precip-seg {
    margin: 0;
    background: rgba(255, 255, 255, 0.9);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.precip-seg button { color: #46516b; }
.precip-seg button.is-active { color: #16203a; }

/* Napis pod krmilji: pove, kaj vir sploh je. Brez tega bi „Izmerjeno“ na
   25-kilometrski mreži brali kot meritev na tistem mestu. */
.precip-full-note {
    position: absolute;
    left: 14px;
    right: 14px;
    top: calc(var(--safe-top) + 104px);
    z-index: 900;
    margin: 0;
    max-width: 30em;
    color: rgba(255, 255, 255, 0.92);
    font-size: 11.5px;
    line-height: 1.35;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
    pointer-events: none;
}

.precip-legend {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: calc(var(--safe-bottom) + 84px);
    z-index: 900;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 6px;
    pointer-events: none;
}
.precip-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    color: #fff;
    font-size: 10.5px;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}
.precip-legend-item i {
    width: 13px;
    height: 13px;
    border-radius: 3px;
}
.precip-legend-unit {
    color: rgba(255, 255, 255, 0.85);
    font-size: 10.5px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

/* Vrednost sedi na točki kot ploščica s številko. Zatič bi povedal le, kje
   točka je; tu je pomembno predvsem, koliko je na njej padlo. */
.precip-chip-wrap { background: none; border: 0; }
.precip-chip {
    display: inline-block;
    padding: 2px 7px;
    border: 1.5px solid rgba(255, 255, 255, 0.85);
    border-radius: 999px;
    background: #c8d4e4;
    color: #16203a;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.5;
    white-space: nowrap;
    transform: translate(-50%, -50%);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

/* Mreža je gostejša od poimenovanih točk: pri 5,5 km in približevanju 10 je
   med sosednjima ploščicama okoli 36 pik, zato mora biti ožja. */
.precip-chip.is-dense {
    padding: 1px 5px;
    font-size: 10.5px;
    border-width: 1px;
}

/* Suha točka v gosti mreži se skrči v piko. */
.precip-chip.is-dot {
    width: 8px;
    height: 8px;
    padding: 0;
    opacity: 0.7;
}

/* --- vodna bilanca ---------------------------------------------------- */

/* Priteka / odteka / razlika. Tri številke v vrsti, ker jih človek bere kot
   enačbo in ne kot seznam. */
/* Tri celice ob zaliti gladini, dve ob suhem polju — od tod samodejni stolpci
   namesto trdno določenih treh. */
.balance {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 8px;
}
.balance-cell {
    text-align: center;
    padding: 12px 4px;
    border-radius: var(--radius-sm);
    background: var(--glass-bg);
}
.balance-value {
    display: block;
    font-size: 18px;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}
.balance-label {
    display: block;
    margin-top: 2px;
    font-size: 12px;
    color: var(--text-dim);
}
.balance-dry .balance-value  { color: var(--text-dim); }
.balance-in .balance-value   { color: #34c759; }
.balance-out .balance-value  { color: var(--warm); }
.balance-up .balance-value   { color: #c0392b; }
.balance-down .balance-value { color: var(--accent); }

.balance-verdict {
    margin: 12px 0 0;
    font-size: 15.5px;
    line-height: 1.5;
}

/* --- napoved gladine -------------------------------------------------- */

.chart-host-short { margin-bottom: 12px; }

.mini-chart { display: block; width: 100%; height: auto; }
.mini-band {
    fill: var(--accent);
    opacity: 0.14;
}
.mini-line {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}
.mini-dot { fill: var(--accent); }
.mini-axis {
    fill: var(--text-dim);
    font-size: 9px;
    font-family: inherit;
}

/* Pas negotovosti ob napovedani vrednosti — brez njega bi številka
   obljubljala natančnost, ki je nima. */
.proj-band { color: var(--text-faint); }

/* Kar model ne zna. Stoji na zaslonu in ne v dokumentaciji. */
.warn {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--warm) 12%, transparent);
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-dim);
}

/* --- verjetnost prestopa ---------------------------------------------- */

.outlook {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.outlook-cell {
    text-align: center;
    padding: 14px 6px;
    border-radius: var(--radius-sm);
    background: var(--glass-bg);
}
.outlook-value {
    display: block;
    font-size: 26px;
    font-weight: 680;
    font-variant-numeric: tabular-nums;
}
.outlook-label { display: block; font-size: 13px; }
.outlook-rain {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--text-dim);
}

/* Preglednica, iz katere verjetnost izhaja. Vidna je zato, ker je izmerjena
   iz zgodovine in ne izračunana — število dni v razredu pove, koliko ji je
   mogoče verjeti. */
.prob-row {
    display: grid;
    grid-template-columns: 5.5em 1fr 3em 4.5em;
    align-items: center;
    gap: 8px;
    padding: 7px 0;
    font-size: 13.5px;
}
.prob-row + .prob-row { border-top: 1px solid var(--glass-border); }
.prob-range { color: var(--text-dim); }
.prob-bar {
    height: 6px;
    border-radius: 3px;
    background: var(--glass-bg);
    overflow: hidden;
}
.prob-bar i {
    display: block;
    height: 100%;
    background: var(--accent);
}
.prob-value {
    text-align: right;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}
.prob-days {
    text-align: right;
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}

/* Vodni meni ima šest zavihkov namesto petih; na ozkih zaslonih mora besedilo
   nekoliko popustiti, da se „Cerkniščica“ ne prelomi v tri pike. */
.tabbar-water .tab { font-size: 10.5px; padding-left: 1px; padding-right: 1px; }
.tabbar-water .tab span { font-size: 10px; }

@media (max-width: 360px) {
    .tabbar-water .tab span { font-size: 9px; }
}