/* ============================================================================
   RADDAR - klimatski tab

   PAZI NA ULOGE BOJA U styles.css:
       --ink   = POZADINA stranice   (tamna u tamnoj temi, svijetla u svijetloj)
       --paper = TEKST               (obrnuto)
   Imena zvuce obrnuto nego sto jesu. Prvi put sam ih zamijenio, pa je naslov bio
   iste boje kao podloga - element je postojao, imao sirinu i visinu, i bio posve
   nevidljiv. Za tekst se koristi --paper, za pozadinu --ink.
   Koristi postojece varijable boja iz styles.css, pa se ne razilazi s ostatkom
   suceljа kad se tema promijeni.
   ========================================================================= */

.klima-wrap {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* --- odabir indeksa --- */
.klima-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.klima-idx-btn {
    border: 1px solid var(--line-soft);
    background: transparent;
    color: var(--fog-dim);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 12.5px;
    line-height: 1.2;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}

.klima-idx-btn:hover {
    color: var(--paper);
    border-color: var(--fog);
}

.klima-idx-btn.active {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--paper);
}

/* --- naslov odabranog indeksa --- */
.klima-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
}

.klima-head h3 {
    margin: 0;
    font-size: 17px;
    color: var(--paper);
}

.klima-head .klima-def {
    font-size: 12.5px;
    color: var(--fog-dim);
}

.klima-head .klima-unit {
    font-size: 11.5px;
    color: var(--fog);
    border: 1px solid var(--line-soft);
    border-radius: 4px;
    padding: 1px 6px;
}

/* --- toplinska karta tjedan x podrucje --- */
.klima-grid-scroll {
    overflow-x: auto;
    padding-bottom: 4px;
}

.klima-grid {
    border-collapse: separate;
    border-spacing: 1px;
    font-size: 11px;
}

.klima-grid th {
    font-weight: 500;
    color: var(--fog-dim);
    font-size: 10.5px;
    padding: 0 4px;
    white-space: nowrap;
}

.klima-grid th.klima-row-head {
    text-align: right;
    position: sticky;
    left: 0;
    background: var(--panel);
    z-index: 2;
    padding-right: 8px;
}

.klima-grid th.klima-month {
    text-align: left;
    color: var(--fog);
}

.klima-cell {
    width: 13px;
    height: 18px;
    padding: 0;
    border-radius: 2px;
    cursor: pointer;
    /* Osnovna podloga da se NULA vidi. Bez nje je celija s 0 % posve prozirna,
       pa red izgleda prazno - a "nikad" i "nema podataka" moraju izgledati
       razlicito, jer to nisu iste tvrdnje. */
    background: color-mix(in srgb, var(--line-soft) 45%, transparent);
}

.klima-cell:hover {
    outline: 2px solid var(--paper);
    outline-offset: -1px;
}

/* Ljestvica: iste boje koje sustav vec koristi za lose/srednje/dobro. */
.klima-cell.k1 { background: color-mix(in srgb, var(--mint) 22%, transparent); }
.klima-cell.k2 { background: color-mix(in srgb, var(--mint) 45%, transparent); }
.klima-cell.k3 { background: color-mix(in srgb, var(--mint) 68%, transparent); }
.klima-cell.k4 { background: color-mix(in srgb, var(--mint) 85%, transparent); }
.klima-cell.k5 { background: var(--mint); }

.klima-cell.w1 { background: color-mix(in srgb, var(--coral) 22%, transparent); }
.klima-cell.w2 { background: color-mix(in srgb, var(--coral) 45%, transparent); }
.klima-cell.w3 { background: color-mix(in srgb, var(--coral) 68%, transparent); }
.klima-cell.w4 { background: color-mix(in srgb, var(--coral) 85%, transparent); }
.klima-cell.w5 { background: var(--coral); }

.klima-cell.n1 { background: color-mix(in srgb, var(--amber) 22%, transparent); }
.klima-cell.n2 { background: color-mix(in srgb, var(--amber) 45%, transparent); }
.klima-cell.n3 { background: color-mix(in srgb, var(--amber) 68%, transparent); }
.klima-cell.n4 { background: color-mix(in srgb, var(--amber) 85%, transparent); }
.klima-cell.n5 { background: var(--amber); }

/* "nema podataka" mora izgledati drukcije od nule - nula je tvrdnja */
.klima-cell.na {
    background: repeating-linear-gradient(45deg,
        var(--line-soft) 0 3px, transparent 3px 6px);
    cursor: default;
}

/* --- odabrana celija --- */
.klima-detalj {
    min-height: 40px;
    font-size: 13px;
    color: var(--paper);
    border-left: 3px solid var(--line-soft);
    padding: 6px 0 6px 12px;
}

/* Prazna kutija je inace samo okomita crta koja visi ni od cega. */
.klima-detalj:empty { border: none; min-height: 0; padding: 0; }

.klima-detalj .klima-big {
    font-size: 22px;
    font-weight: 600;
}

.klima-detalj .klima-sub {
    color: var(--fog-dim);
    font-size: 12px;
}

/* --- legenda --- */
.klima-legend {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    color: var(--fog-dim);
    flex-wrap: wrap;
}

.klima-legend .sw {
    display: inline-block;
    width: 16px;
    height: 12px;
    border-radius: 2px;
}

/* --- upozorenja --- */
.klima-caveats {
    font-size: 12px;
    color: var(--fog-dim);
    line-height: 1.55;
    border-top: 1px solid var(--line-soft);
    padding-top: 10px;
}

.klima-caveats b {
    color: var(--paper);
    font-weight: 600;
}

.klima-caveats ul {
    margin: 6px 0 0;
    padding-left: 18px;
}

.klima-poruka {
    font-size: 13px;
    color: var(--fog-dim);
    padding: 24px 0;
    text-align: center;
}

.klima-poruka.greska {
    color: var(--coral);
}

@media (max-width: 640px) {
    .klima-cell { width: 10px; height: 16px; }
    .klima-grid th.klima-row-head { font-size: 10px; }
}


/* ============================================================================
   NACINI RADA
   ========================================================================= */

/* Traka nacina je glavna navigacija taba, a izgledala je kao red sitnih
   pomocnih gumba: aktivni se razlikovao samo tanjim rubom. Sada je nosac -
   udubljena traka, u njoj cetiri jednaka polja, aktivno podignuto i obojano. */
.klima-modes {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 10px;
}

.klima-modes-traka {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1 1 520px;
    min-width: 0;
    background: var(--panel-soft);
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    padding: 6px;
}

.klima-mode-btn {
    flex: 1 1 170px;
    min-width: 0;
    border: 1px solid transparent;
    background: transparent;
    color: var(--fog-dim);
    border-radius: 10px;
    padding: 9px 12px;
    font-size: 13px;
    cursor: pointer;
    text-align: left;
    line-height: 1.3;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.klima-mode-btn:hover { background: var(--panel-raised); }

.klima-mode-btn strong {
    display: block;
    color: var(--paper);
    font-size: 13.5px;
    font-weight: 600;
}

.klima-mode-btn small {
    font-size: 11.5px;
    color: var(--fog-dim);
}

.klima-mode-btn.active {
    background: var(--panel-raised);
    border-color: var(--signal);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
}

.klima-mode-btn.active strong { color: var(--signal); }

/* Znak u vlastitom kvadratu: aktivni nacin se prepoznaje i periferno, bez
   citanja naslova. */
.klima-mode-znak {
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--panel-raised);
    border: 1px solid var(--line-soft);
}

.klima-mode-btn.active .klima-mode-znak {
    background: var(--signal-dim);
    border-color: var(--signal);
}

/* "Napomene" nije peto pitanje nego pomoc, pa stoji izvan trake i drukcije se
   boji - inace bi covjek mislio da je i to jedan od nacina gledanja podataka. */
.klima-mode-info {
    flex: 0 0 auto;
    align-self: center;
    border: 1px solid var(--line-soft);
    border-radius: 14px;
    background: var(--panel);
    padding: 10px 14px;
}

.klima-mode-info .klima-mode-znak {
    width: auto;
    height: auto;
    background: transparent;
    border-color: transparent;
    font-size: 15px;
}

.klima-mode-info.active {
    background: var(--amber-dim);
    border-color: var(--amber);
}

.klima-mode-info.active strong { color: var(--amber); }
.klima-mode-info.active .klima-mode-znak {
    background: transparent;
    border-color: transparent;
}

/* --- odabir regije / uvjeta --- */
.klima-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.klima-row-label {
    font-size: 12px;
    color: var(--fog-dim);
    min-width: 92px;
}

.klima-chip {
    border: 1px solid var(--line-soft);
    background: transparent;
    color: var(--fog-dim);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 12.5px;
    cursor: pointer;
}

.klima-chip:hover { color: var(--paper); border-color: var(--fog); }

.klima-chip.active {
    background: var(--paper);
    color: var(--ink);
    border-color: var(--paper);
}

.klima-chip.sea.active { background: var(--mint); border-color: var(--mint); color: var(--ink); }

/* --- rang lista (nacin "gdje") --- */
.klima-rang {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.klima-rang-row,
.klima-os {
    display: grid;
    /* Sirine su ZADANE, ne 'max-content'. Rang lista i os su dvije odvojene
       mreze; dok su se stupci racunali iz sadrzaja, gumb ▶ u osi je razvukao
       drugi stupac i os se razisla s trakama za dva piksela. */
    grid-template-columns: 22px 152px 132px 1fr 46px;
    grid-template-areas: "m i t s b";
    align-items: center;
    gap: 10px;
    padding: 5px 8px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: var(--paper);
}

.klima-rang-row:hover { background: var(--panel-raised); }

.klima-rang-row .mjesto { grid-area: m; color: var(--fog-dim); font-size: 12px; text-align: right; }
.klima-rang-row .ime    { grid-area: i; }
.klima-rang-row .tjedan { grid-area: t; color: var(--paper); font-size: 12px; }
.klima-rang-row .klima-strip-box { grid-area: s; }
.klima-rang-row .bod    { grid-area: b; }
.klima-os .klima-strip-os { grid-area: s; }

.klima-bar {
    height: 8px;
    border-radius: 4px;
    background: var(--line-soft);
    overflow: hidden;
}

.klima-bar span {
    display: block;
    height: 100%;
    background: var(--mint);
    border-radius: 4px;
}

/* --- traka cijele godine u retku ranga --- */
.klima-strip {
    display: flex;
    gap: 1px;
    height: 14px;
}

.klima-strip i {
    flex: 1 1 0;
    border-radius: 1px;
    background: color-mix(in srgb, var(--line-soft) 45%, transparent);
}

.klima-strip i.k1 { background: color-mix(in srgb, var(--mint) 22%, transparent); }
.klima-strip i.k2 { background: color-mix(in srgb, var(--mint) 45%, transparent); }
.klima-strip i.k3 { background: color-mix(in srgb, var(--mint) 68%, transparent); }
.klima-strip i.k4 { background: color-mix(in srgb, var(--mint) 85%, transparent); }
.klima-strip i.k5 { background: var(--mint); }

/* Predlozeni termin: crtica ISPOD trake. Ranije su se tjedni izvan termina
   prigusivali, ali uz termin od jednog tjedna to zatamni 51 od 52 i traka
   prestane pokazivati kako sezona tece - a to joj je jedini posao. */
.klima-strip-box { display: flex; flex-direction: column; gap: 2px; }

.klima-strip-mk { display: flex; gap: 1px; height: 3px; }
.klima-strip-mk i { flex: 1 1 0; border-radius: 2px; }
.klima-strip-mk i.u { background: var(--mint); }

/* Odabrani tjedan kroz sve trake: okomita veza s osi i kartom. */
.klima-strip i.utjednu {
    box-shadow: 0 0 0 1.5px var(--paper);
    position: relative;
    z-index: 1;
}

.klima-strip i.na {
    background: repeating-linear-gradient(45deg,
        var(--line-soft) 0 3px, transparent 3px 6px);
}

.klima-strip-os {
    display: flex;
    font-size: 9.5px;
    color: var(--fog-dim);
}

.klima-strip-os span { flex: 1 1 0; text-align: left; white-space: nowrap; }

/* Os NIJE .klima-rang-row: inace je svako prebrojavanje redaka ranga broji kao
   jedno podrucje viska. */
.klima-os { padding: 0 8px; }

.klima-rang-row .bod { text-align: right; font-weight: 600; font-size: 13px; }

/* --- upozorenje ako se stil nije ucitao --- */
.klima-css-warn {
    border: 2px solid #E28B7D;
    background: rgba(226, 139, 125, 0.12);
    color: #8a3b2c;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.5;
}

@media (max-width: 640px) {
    /* Na uskom zaslonu traka ide u svoj red, a ne van - ona JE odgovor na
       "kada", pa je krivo nju sakriti prvu. */
    .klima-rang-row,
    .klima-os {
        grid-template-columns: 20px 1fr 40px;
        grid-template-areas: "m i b" "t t t" "s s s";
        gap: 4px 8px;
        padding: 8px;
    }
    .klima-rang-row .tjedan { font-size: 11.5px; }
    .klima-os { display: none; }
}


/* ============================================================================
   KARTA PODRUCJA

   SVG, ne Leaflet: stranica se otvara s file:// i bez mreze, pa pozadinske
   plocice ne moraju stici. Kopno iz maske 'lsm' daje obalu uvijek, i boji se
   temom stranice umjesto da se s njom svadja.
   ========================================================================= */

/* Karta lijevo, poredak desno, klizac preko cijele sirine. Na uskom zaslonu
   sve u jedan stupac. */
.klima-karta-wrap {
    display: grid;
    grid-template-columns: minmax(280px, 620px) minmax(170px, 1fr);
    grid-template-areas: "g g" "k b" "r r";
    gap: 10px 16px;
    align-items: start;
}

.klima-karta-glava { grid-area: g; }
.klima-karta       { grid-area: k; }
.klima-bocna       { grid-area: b; }

/* --- poredak uz kartu --- */
.klima-bocna {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-self: stretch;
}

.klima-bocna-red {
    display: grid;
    grid-template-columns: minmax(88px, 1fr) minmax(40px, 2fr) 56px;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    border-radius: 6px;
    padding: 4px 6px;
    font-size: 12.5px;
    color: var(--paper);
    cursor: pointer;
    text-align: left;
}

.klima-bocna-red:hover { background: var(--panel-raised); }
.klima-bocna-red .ime { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.klima-bocna-red .br  { text-align: right; color: var(--fog-dim); font-variant-numeric: tabular-nums; }

.klima-bocna-red .tr {
    display: block;
    height: 7px;
    border-radius: 4px;
    background: color-mix(in srgb, var(--line-soft) 55%, transparent);
    overflow: hidden;
}

.klima-bocna-red .tr i { display: block; height: 100%; border-radius: 4px; }
.klima-bocna-red .tr i.k1, .klima-bocna-red .tr i.k2, .klima-bocna-red .tr i.k3,
.klima-bocna-red .tr i.k4, .klima-bocna-red .tr i.k5 { background: var(--mint); }
.klima-bocna-red .tr i.w1, .klima-bocna-red .tr i.w2, .klima-bocna-red .tr i.w3,
.klima-bocna-red .tr i.w4, .klima-bocna-red .tr i.w5 { background: var(--coral); }
.klima-bocna-red .tr i.n1, .klima-bocna-red .tr i.n2, .klima-bocna-red .tr i.n3,
.klima-bocna-red .tr i.n4, .klima-bocna-red .tr i.n5 { background: var(--amber); }

.klima-karta-glava {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 13.5px;
    color: var(--paper);
}

.klima-karta-glava b { font-weight: 600; }
.kt-opis { font-size: 12px; color: var(--fog-dim); }

/* Sirina se ogranicava, inace se SVG rastegne preko cijelog stupca i karta
   pluta u praznini: preserveAspectRatio je centrira, a okvir ostane sirok. */
.klima-karta {
    position: relative;
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    background: var(--panel);
    padding: 8px;
    overflow: hidden;
    width: 100%;
    max-width: 620px;
}

.klima-karta svg {
    display: block;
    width: 100%;
    max-height: 460px;
}

/* Podloga: obris zemlje bez ijedne plocice. Razlika kopno/more mora biti
   vidljiva - inace se ne vidi da je ono sto gledas obala. */
/* fill-rule: evenodd je OBAVEZAN. Kopno je jedan lik s rupom (Jadranom); uz
   zadano 'nonzero' ovisi o smjeru prstenova hoce li se rupa probusiti ili ne -
   i more je bilo zaliveno kopnom, pa se obala uopce nije vidjela. */
.kt-kopno {
    fill: color-mix(in srgb, var(--fog) 30%, transparent);
    fill-rule: evenodd;
}

.kt-more { fill: color-mix(in srgb, var(--mint) 10%, transparent); }
.kt-ploha { fill-rule: evenodd; }

/* Obala kao tanka crta: bez nje se pri jakim bojama podrucja izgubi granica
   mora i kopna, pa se ne zna sto je otok a sto zaljev. */
.kt-obala {
    fill: none;
    fill-rule: evenodd;
    stroke: color-mix(in srgb, var(--fog) 80%, transparent);
    stroke-width: 1.2;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}



.kt-pod .kt-ploha, .kt-pod rect { transition: opacity .12s; }

/* "Nema podataka" nije nula. Srafura je ista tvrdnja kao u tablici. */
.kt-nema { fill: url(#kt-srafura); }
.kt-srafura-pod  { fill: transparent; }
.kt-srafura-crta { fill: color-mix(in srgb, var(--fog-dim) 22%, transparent); }
.kt-v    { fill: color-mix(in srgb, var(--line-soft) 55%, transparent); }

.kt-v.k1 { fill: color-mix(in srgb, var(--mint) 22%, transparent); }
.kt-v.k2 { fill: color-mix(in srgb, var(--mint) 45%, transparent); }
.kt-v.k3 { fill: color-mix(in srgb, var(--mint) 68%, transparent); }
.kt-v.k4 { fill: color-mix(in srgb, var(--mint) 85%, transparent); }
.kt-v.k5 { fill: var(--mint); }

.kt-v.w1 { fill: color-mix(in srgb, var(--coral) 22%, transparent); }
.kt-v.w2 { fill: color-mix(in srgb, var(--coral) 45%, transparent); }
.kt-v.w3 { fill: color-mix(in srgb, var(--coral) 68%, transparent); }
.kt-v.w4 { fill: color-mix(in srgb, var(--coral) 85%, transparent); }
.kt-v.w5 { fill: var(--coral); }

.kt-v.n1 { fill: color-mix(in srgb, var(--amber) 22%, transparent); }
.kt-v.n2 { fill: color-mix(in srgb, var(--amber) 45%, transparent); }
.kt-v.n3 { fill: color-mix(in srgb, var(--amber) 68%, transparent); }
.kt-v.n4 { fill: color-mix(in srgb, var(--amber) 85%, transparent); }
.kt-v.n5 { fill: var(--amber); }

.kt-obrub {
    fill: none;
    stroke: color-mix(in srgb, var(--paper) 32%, transparent);
    stroke-width: 1;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}

.kt-pod.istaknuto .kt-obrub { stroke: var(--paper); stroke-width: 2.2; }

/* Kad je mis nad jednim podrucjem, ostala se priguse - inace se na maloj karti
   ne vidi koje je bas ono nad kojim stojis. */
.kt-hover .kt-pod:not(.kt-nad) .kt-ploha,
.kt-hover .kt-pod:not(.kt-nad) rect { opacity: .3; }
.kt-pod.kt-nad .kt-obrub { stroke: var(--paper); stroke-width: 2.4; }

.kt-ime.istaknuto { font-weight: 700; opacity: 1; }

.kt-ime {
    font-size: .15px;
    fill: var(--paper);
    paint-order: stroke;
    stroke: var(--ink);
    stroke-width: .05px;
    stroke-linejoin: round;
    pointer-events: none;
    opacity: .85;
}

.klima-oblacic {
    position: absolute;
    top: 8px;
    right: 8px;
    display: none;
    flex-direction: column;
    gap: 1px;
    background: var(--panel-raised, var(--panel));
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 12.5px;
    color: var(--paper);
    pointer-events: none;
    max-width: 60%;
}

.klima-oblacic.vidljiv { display: flex; }
.klima-oblacic .kt-broj { font-size: 17px; font-weight: 600; }

/* ============================================================================
   OS TJEDANA

   Nije zaseban klizac nego DIO iste tablice (odnosno iste mreze) kao toplinska
   karta, pa se stupci poklapaju po gradnji. Raniji <input type=range> bio je
   siri od karte i nije se vidjelo da njegov polozaj odgovara stupcu - covjek
   nije imao razloga pomisliti da pomice tjedne.
   ========================================================================= */

.klima-wpick {
    cursor: pointer;
    background: color-mix(in srgb, var(--line-soft) 55%, transparent);
    border-radius: 2px;
}

.klima-wpick:hover { background: var(--fog); }
.klima-wpick.odabran { background: var(--paper); }

/* u tablici: <th> koji dijeli stupac s celijama toplinske karte */
.klima-os-red th.klima-wpick {
    height: 9px;
    padding: 0;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.klima-os-red th.klima-row-head { padding-right: 6px; }

/* ispod rang liste: <i> u istoj mrezi kao trake godina */
.klima-os-pick i {
    flex: 1 1 0;
    height: 10px;
    border-radius: 2px;
    cursor: pointer;
}

/* Odabrani tjedan na osi mora biti ocito jaci od oznake termina ispod traka -
   to su dvije razlicite tvrdnje. */
.klima-os-pick i.odabran { background: var(--paper); }

.klima-os .klima-strip-box { grid-area: s; }
.klima-os .klima-os-gumb { grid-area: i; }
.klima-os .tjedan { grid-area: t; font-size: 12px; color: var(--fog-dim); }

/* --- remi: svi krajevi jednaki ---
   Kad odabrani uvjet u tom tjednu ne razlikuje krajeve, poredak je nasumican.
   Bez ove napomene ekran izgleda kao da alat ne reagira na promjene. */
.klima-remi {
    grid-area: r;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--paper);
    border-left: 3px solid var(--amber);
    padding: 4px 0 4px 10px;
    margin-top: 6px;
}

.klima-play {
    border: 1px solid var(--line-soft);
    background: transparent;
    color: var(--paper);
    border-radius: 999px;
    width: 22px;
    height: 22px;
    font-size: 9px;
    line-height: 1;
    cursor: pointer;
    flex: none;
}

.klima-play:hover { border-color: var(--fog); }



/* --- tezina uvjeta --- */
.klima-tez {
    margin-left: 5px;
    font-size: 10.5px;
    font-weight: 700;
    opacity: .75;
}

/* --- slicna podrucja --- */
.klima-slicni {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-left: 3px solid var(--line-soft);
    padding: 4px 0 4px 12px;
}

.klima-slicni-glava { font-size: 13px; color: var(--paper); }
.klima-slicni-red { display: flex; flex-wrap: wrap; gap: 6px; }

/* --- veza tablice, karte i popisa --- */
.klima-grid tr.odabran th.klima-row-head { color: var(--paper); font-weight: 600; }
.klima-cell.utjednu { outline: 1px solid var(--fog); outline-offset: -1px; }

@media (max-width: 860px) {
    .klima-karta-wrap {
        grid-template-columns: 1fr;
        grid-template-areas: "g" "k" "b" "r";
    }
}

@media (max-width: 640px) {
    .klima-karta svg { max-height: 300px; }
    .klima-oblacic { max-width: 75%; }
}

.klima-ocisti { color: var(--coral); border-color: color-mix(in srgb, var(--coral) 40%, transparent); }
.klima-ocisti:hover { color: var(--coral); border-color: var(--coral); }

/* --- susjedne zemlje, gradovi, natpisi --- */
.kt-susjed {
    fill: color-mix(in srgb, var(--fog) 12%, transparent);
    stroke: color-mix(in srgb, var(--fog) 30%, transparent);
    stroke-width: .8;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}

.kt-drzava {
    font-size: .13px;
    fill: var(--fog-dim);
    letter-spacing: .02px;
    pointer-events: none;
    opacity: .8;
}

.kt-grad {
    fill: var(--ink);
    stroke: var(--paper);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
    pointer-events: none;
}

.kt-grad-ime {
    font-size: .12px;
    fill: var(--paper);
    paint-order: stroke;
    stroke: var(--ink);
    stroke-width: .045px;
    stroke-linejoin: round;
    pointer-events: none;
    opacity: .9;
}

/* ============================================================================
   UVOD I UPUTE

   Tab je narastao na kartu, tablicu, poredak i tri nacina rada. Bez rijeci koje
   kazu sto je sto, covjek pred njim ne zna ni odakle poceti - to je i receno.
   ========================================================================= */

.klima-mode-btn {
    display: flex;
    align-items: center;
    gap: 9px;
}

.klima-mode-znak { font-size: 17px; line-height: 1; }
.klima-mode-tekst { display: flex; flex-direction: column; min-width: 0; }

/* --- tab "Napomene" --- */

/* Tekst preko 1300 px sirine se ne cita; kartica se drzi mjere retka. */
.klima-body.klima-nap { max-width: 880px; }

.klima-nap-t {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--fog);
    max-width: 78ch;
}

.klima-nap-t b { color: var(--paper); font-weight: 600; }

.klima-nap-lista {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--fog);
    max-width: 78ch;
}

.klima-nap-lista li { margin-bottom: 4px; }
.klima-nap-lista b { color: var(--paper); font-weight: 600; }

.klima-nap-tbl {
    border-collapse: collapse;
    font-size: 12.5px;
    width: 100%;
}

.klima-nap-tbl th,
.klima-nap-tbl td {
    text-align: left;
    vertical-align: top;
    padding: 5px 10px 5px 0;
    border-bottom: 1px solid var(--line-soft);
}

.klima-nap-tbl th {
    color: var(--paper);
    font-weight: 600;
    white-space: nowrap;
}

.klima-nap-tbl td { color: var(--fog); }
.klima-nap-tbl td.sitno { color: var(--fog-dim); white-space: nowrap; }

/* Ograda o projekcijama je jedina koja se smije previdjeti - dobiva boju. */
.klima-kartica-vazno { border-color: var(--amber); }
.klima-kartica-vazno > header h3 { color: var(--amber); }
.klima-kartica-vazno .klima-caveats { border-top: none; padding-top: 0; }

/* Redak koji vodi u napomene umjesto odlomka ograde ispod odgovora. */
.klima-vodi { margin: 0; }

.klima-vodi-gumb {
    background: transparent;
    border: none;
    padding: 0;
    font: inherit;
    font-size: 12.5px;
    color: var(--fog-dim);
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: var(--line);
    text-underline-offset: 3px;
}

.klima-vodi-gumb:hover { color: var(--signal); }

.klima-upute {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--fog-dim);
    margin: 0;
    max-width: 720px;
}

.klima-legend-nas { color: var(--paper); }

/* --- sklopive napomene --- */
.klima-napomene summary {
    cursor: pointer;
    color: var(--paper);
    font-size: 12.5px;
    padding: 2px 0;
}

.klima-napomene summary:hover { color: var(--mint); }
.klima-napomene[open] summary { margin-bottom: 4px; }

/* ============================================================================
   PROMJENE KROZ GODINE
   ========================================================================= */

.klima-brojke {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.klima-brojka {
    display: flex;
    flex-direction: column;
    gap: 1px;
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    padding: 10px 14px;
    min-width: 150px;
}

.klima-brojka .nas { font-size: 11.5px; color: var(--fog-dim); }
.klima-brojka .br  { font-size: 24px; font-weight: 600; color: var(--paper); line-height: 1.15; }
.klima-brojka .dod { font-size: 11.5px; color: var(--fog-dim); }

.klima-brojka.gore  .br { color: var(--coral); }
.klima-brojka.dolje .br { color: var(--mint); }
.klima-brojka.prazna .br { color: var(--fog-dim); }

/* --- stupci po godinama --- */
.klima-godine { display: flex; flex-direction: column; gap: 6px; }

/* Visina se vise ne zadaje: stupac sada nosi i odstupanje ispod sebe, pa mu
   sadrzaj odredjuje visinu. Fiksnih 150 px rezalo bi odstupanje. */
.klima-godine-graf {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 4px;
    padding-bottom: 2px;
}

.klima-godina {
    flex: 1 0 auto;
    max-width: 64px;
    min-width: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
}

.klima-godina .vrh { font-size: 11px; color: var(--fog-dim); }
.klima-godina .god { font-size: 11px; color: var(--fog-dim); }

.klima-godina .traka {
    position: relative;
    width: 100%;
    flex: none;              /* inace ga flex stisne i visine se raziđu */
    display: flex;
    align-items: flex-end;
    background: color-mix(in srgb, var(--line-soft) 30%, transparent);
    border-radius: 4px;
    overflow: hidden;
}

.klima-godina .traka i { display: block; width: 100%; border-radius: 4px 4px 0 0; }
.klima-godina .traka { overflow: visible; }
/* Crta medijana je bila 2 px sira od stupca i na mobitelu prelijevala stranicu. */
.klima-godina .crta { left: 0; right: 0; }
.klima-godina .traka i.k1, .klima-godina .traka i.k2, .klima-godina .traka i.k3,
.klima-godina .traka i.k4, .klima-godina .traka i.k5 { background: var(--mint); }
.klima-godina .traka i.w1, .klima-godina .traka i.w2, .klima-godina .traka i.w3,
.klima-godina .traka i.w4, .klima-godina .traka i.w5 { background: var(--coral); }
.klima-godina .traka i.n1, .klima-godina .traka i.n2, .klima-godina .traka i.n3,
.klima-godina .traka i.n4, .klima-godina .traka i.n5 { background: var(--amber); }
.klima-godina .traka i.nema { background: none; }

.klima-godina .traka .crta {
    position: absolute;
    left: -2px;
    right: -2px;
    height: 0;
    border-top: 1px dashed var(--paper);
    opacity: .6;
    pointer-events: none;
}

/* --- presuda o trendu --- */
.klima-trend {
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--fog-dim);
    border-left: 3px solid var(--line-soft);
    padding: 6px 0 6px 12px;
}

.klima-trend b { color: var(--paper); font-weight: 600; }
.klima-trend.jasan { border-left-color: var(--mint); }

.klima-sanse { display: flex; flex-direction: column; gap: 8px; }

/* --- odstupanje od medijana ---
   Stupci po godinama idu od nule i cuvaju razmjer; odstupanje pokazuje promjenu,
   koja se u njima ne vidi (67 i 79 dana izgledaju jednako). Ide UNUTAR stupca
   godine: kao zasebna traka preko cijele sirine razilazilo se sa stupcima. */
/* Sirina mora biti 100 %: stupac godine je flex-stupac s align-items:center, pa
   bi se ova kutija stisnula na sirinu sadrzaja - a sadrzaj joj je apsolutno
   pozicioniran, dakle sirine nula, i traka se nije vidjela. */
.klima-anom-st {
    width: 100%;
    height: 40px;
    position: relative;
    margin-top: 4px;
    border-top: 1px dashed var(--line-soft);
    border-bottom: 1px dashed var(--line-soft);
}

.klima-anom-st i {
    position: absolute;
    left: 10%;
    right: 10%;
    border-radius: 2px;
    background: var(--fog);
}

.klima-anom-st i.gore  { bottom: 50%; }
.klima-anom-st i.dolje { top: 50%; }
.klima-anom-st i.dobro { background: var(--mint); }
.klima-anom-st i.lose  { background: var(--coral); }

/* ============================================================================
   TREND UZ SVAKI PRIKAZ
   Promjena kroz godine ne stoji samo u svom nacinu rada nego i uz odgovore na
   "kada", "gdje" i "usporedi" - jer se covjek i to pita dok bira kamo ide.
   ========================================================================= */

.klima-sloj {
    grid-area: g;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: -2px;
}

.klima-karta-wrap {
    grid-template-areas: "g g" "l l" "k b" "r r";
}

.klima-karta-glava { grid-area: g; }
.klima-sloj { grid-area: l; }

/* --- stupac trenda u tablici --- */
.klima-grid th.klima-trend-h {
    text-align: right;
    padding-left: 10px;
    color: var(--fog);
    position: sticky;
    right: 0;
    background: var(--panel);
}

.klima-trend-c {
    padding: 0 2px 0 10px;
    font-size: 11px;
    white-space: nowrap;
    text-align: right;
    color: var(--fog-dim);
    font-variant-numeric: tabular-nums;
    position: sticky;
    right: 0;
    background: var(--panel);
}

.klima-trend-c.dobro { color: var(--mint); }
.klima-trend-c.lose  { color: var(--coral); }
.klima-trend-c.slabo { color: var(--fog); }
.klima-trend-c.cekam { color: var(--line-soft); }

/* --- znacka trenda u rang listi --- */
.klima-znacka {
    grid-area: z;
    font-size: 12px;
    text-align: center;
    color: var(--fog-dim);
    min-width: 16px;
}

.klima-znacka.dobro { color: var(--mint); }
.klima-znacka.lose  { color: var(--coral); }
.klima-znacka.slabo { color: var(--fog); }

.klima-rang-row,
.klima-os {
    grid-template-columns: 22px 152px 132px 1fr 46px 18px;
    grid-template-areas: "m i t s b z";
}

@media (max-width: 640px) {
    .klima-rang-row,
    .klima-os {
        grid-template-columns: 20px 1fr 40px 18px;
        grid-template-areas: "m i b z" "t t t t" "s s s s";
    }
}

/* ============================================================================
   „KAKO SE MIJENJA" — dva stupca

   Pokazatelji su prije bili niz gumba koji se prelamao u dva-tri reda, pa je
   slijed na ekranu bio "gumbi, gumbi, slika, tablica": bez reda, i bez toga da
   se vidi kako stoje ostali pokazatelji. Sad su svi lijevo kao popis, uz svaki
   krivulja kroz godine i smjer, a desno je sve o odabranome.
   ========================================================================= */

.klima-promjene-raspored {
    display: grid;
    grid-template-columns: minmax(210px, 250px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.klima-pokazatelji {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border: 1px solid var(--line-soft);
    border-radius: 10px;
    padding: 8px;
    background: var(--panel);
}

.klima-pok-nas {
    font-size: 11.5px;
    color: var(--fog-dim);
    padding: 2px 8px 6px;
}

.klima-pok {
    display: grid;
    grid-template-columns: 1fr 62px 16px;
    align-items: center;
    gap: 8px;
    border: none;
    background: transparent;
    border-radius: 7px;
    padding: 6px 8px;
    font-size: 12.5px;
    color: var(--fog-dim);
    cursor: pointer;
    text-align: left;
}

.klima-pok:hover { background: var(--panel-raised); color: var(--paper); }

.klima-pok.active {
    background: var(--panel-raised);
    color: var(--paper);
    font-weight: 600;
    box-shadow: inset 2px 0 0 var(--paper);
}

.klima-pok .ime { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.klima-pok .zn { text-align: center; font-size: 11.5px; }
.klima-pok .zn.dobro { color: var(--mint); }
.klima-pok .zn.lose  { color: var(--coral); }
.klima-pok .zn.slabo { color: var(--fog); }

.klima-krivulja { width: 62px; height: 20px; display: block; overflow: visible; }

.kr-linija {
    fill: none;
    stroke: var(--fog);
    stroke-width: 1.4;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.kr-zadnja { fill: var(--paper); }
.klima-pok.active .kr-linija { stroke: var(--paper); }

.klima-promjene-glavno { min-width: 0; }

@media (max-width: 820px) {
    .klima-promjene-raspored { grid-template-columns: 1fr; }
    .klima-pokazatelji {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 4px;
    }
    .klima-pok-nas { flex: 0 0 100%; }
    .klima-pok { grid-template-columns: auto 40px 14px; }
    .klima-krivulja { width: 40px; }
}

/* ============================================================================
   KARTICE

   Sve je prije bilo ravan niz blokova: naslov, opis, jos jedan opis, prekidac,
   karta, cetiri retka uputa, tablica, legenda, zakljucak — bez ijedne granice
   koja kaze sto ide s cime, pa je stranica djelovala razbacano. Kartica je ta
   granica: zaglavlje nosi naslov, kratak opis i prekidace, tijelo nosi sadrzaj.
   ========================================================================= */

.klima-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.klima-kartica {
    border: 1px solid var(--line-soft);
    border-radius: 12px;
    background: var(--panel);
    padding: 12px 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
}

.klima-kartica > header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--line-soft);
    padding-bottom: 8px;
}

.klima-kartica > header h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--paper);
}

.klima-kartica > header .opis {
    font-size: 12px;
    color: var(--fog-dim);
}

.klima-kartica > header .desno { margin-left: auto; }

.klima-kartica-tijelo {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

/* Traka s kontrolama je niza i bez naslova. */
.klima-traka { padding: 10px 16px; }
.klima-traka .klima-kartica-tijelo { gap: 6px; }

/* Karta popunjava karticu do ruba - okvir vec ima kartica. */
.klima-kartica-karta .klima-karta {
    border: none;
    border-radius: 8px;
    padding: 0;
    max-width: none;
    background: transparent;
}

/* Karta ne treba biti visoka koliko i bocni popis - inace ispod popisa ostane
   prazna trecina kartice. */
.klima-kartica-karta .klima-karta svg { max-height: 400px; }

.klima-kartica-karta .klima-karta-wrap {
    grid-template-columns: minmax(260px, 1.15fr) minmax(200px, 1fr);
    gap: 8px 20px;
}

/* Pravilo iznad je specificnije od onoga u @media na vrhu datoteke i dolazi
   poslije njega, pa je na uskom zaslonu drzalo dva stupca i bocni popis je
   virio 125 px izvan stranice. Isti prijelom se mora ponoviti i ovdje. */
@media (max-width: 860px) {
    .klima-kartica-karta .klima-karta-wrap { grid-template-columns: 1fr; }
}

/* Prekidac sloja u zaglavlju kartice nema vlastitu oznaku "Boja". */
.klima-kartica > header .klima-sloj {
    grid-area: auto;
    margin: 0;
    gap: 5px;
}

.klima-kartica > header .klima-sloj .klima-row-label {
    min-width: 0;
    font-size: 11.5px;
}

.klima-kartica > header .klima-sloj .klima-chip {
    padding: 3px 10px;
    font-size: 11.5px;
}

/* Čipovi krajeva: jedan blok koji se prelama unutar sebe, s oznakom lijevo -
   prije je zadnji "Južni Jadran" ostajao sam u novom retku preko cijele sirine. */
.klima-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1 1 0;
    min-width: 0;
}