/* ==========================================================================
   CRO-CLIMATE / site.css, uz tokens.css verzije 2
   Izvedeno iskljucivo iz tokens.css. U ovoj datoteci nema ni jedne hex
   vrijednosti. Ako neka boja, mjera ili radijus nedostaje, dodaje se u
   tokens.css, ne ovdje.

   Dva registra. Geometrija i podloga dolaze iz varijabli koje registar
   postavlja, pa se ovdje ne pise ni jedan uvjet na data-registar osim tamo
   gdje se razlika ne moze izraziti varijablom.

   Redoslijed ucitavanja, postavljen u _quarto.yml:
     1. tokens.css              varijable i registri
     2. assets/fonts/fonts.css  @font-face
     3. ova datoteka

   Sadrzaj
     1. Osnova i pristupacnost
     2. Tipografija
     3. Raspored
     4. Zaglavlje i navigacija
     5. Podnozje
     6. Kartice i mreze
     7. Oznake, obavijesti, prazna stanja
     8. Upravljanje prikazom
     9. Tablice
    10. Legenda
    11. Metapodaci prikaza
    12. Karta
   ========================================================================== */

/* --- 1. Osnova i pristupacnost -------------------------------------------- */

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

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  color: var(--c-ink);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-body);
  line-height: var(--lh-body);
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  background-attachment: fixed;
}

/* Fokus je uvijek vidljiv. Akcent nosi 6,9 prema 1 na bijelom, ali prsten se
   crta i preko obojenih ploha, pa uz njega ide tamna vlas koja nosi kontrast
   bez obzira na podlogu. */
:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
  box-shadow: 0 0 0 1px var(--c-ink);
}

.preskoci {
  position: absolute;
  left: var(--sp-4);
  top: var(--sp-2);
  z-index: 100;
  padding: var(--sp-2) var(--sp-4);
  background: var(--c-paper);
  color: var(--c-ink);
  border: 1px solid var(--c-line);
  border-radius: var(--r-control);
  font-weight: var(--fw-mid);
  transform: translateY(-200%);
  transition: transform var(--dur) var(--ease);
}

.preskoci:focus {
  transform: translateY(0);
}

/* Quarto emitira prazan okvir naslovnog bloka i kada je partial prazan. */
#title-block-header:empty {
  display: none;
}

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

/* --- 2. Tipografija ------------------------------------------------------- */

h1,
h2,
h3,
h4 {
  font-family: var(--f-display);
  font-weight: var(--fw-head);
  color: var(--c-ink);
  line-height: var(--lh-head);
  letter-spacing: var(--ls-h);
  margin: 0 0 var(--sp-4);
  text-wrap: balance;
}

h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}

h2 {
  font-size: var(--fs-h2);
  margin-top: var(--sp-7);
}

h3 {
  font-size: var(--fs-h3);
  margin-top: var(--sp-5);
}

p,
ul,
ol {
  margin: 0 0 var(--sp-4);
}

li + li {
  margin-top: var(--sp-1);
}

a {
  color: var(--c-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--c-accent-dark);
  text-decoration-thickness: 2px;
}

strong {
  font-weight: var(--fw-mid);
}

code,
kbd,
samp {
  font-family: var(--f-mono);
  font-size: 0.92em;
}

/* Nadnaslov nosi tezinu, ne razvucenost. Verzal s razmakom znakova pripadao je
   prvoj verziji identiteta. */
.eyebrow {
  display: block;
  font-family: var(--f-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-mid);
  color: var(--c-accent);
  margin: 0 0 var(--sp-2);
}

.lead {
  font-size: var(--fs-lead);
  color: var(--c-ink-2);
  max-width: var(--w-text);
}

/* Metapodaci su tekst, pa idu u Ink 3, nikad u Ink nontext. Ink nontext nosi
   3,3 prema 1 i sluzi samo crtama osi i ikonama. */
.meta-tekst {
  font-family: var(--f-mono);
  font-size: var(--fs-small);
  color: var(--c-ink-3);
  font-variant-numeric: tabular-nums;
}

/* BRAND.md, odjeljak 6: broj koji stoji sam ide u pismo sucelja, broj koji se
   slaze jedan ispod drugoga ide u Fira Mono. Wix Madefor nema tablicne
   znamenke, znamenke su mu devet razlicitih sirina, pa se stupac ne bi
   poravnao. tabular-nums ostaje, jer ne smeta i proradit ce ako pismo jednom
   dobije to svojstvo. */
.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Brojevi u stupcu: tablice, osi, ljestvica legende. */
.is-num,
.legenda__oznaka {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
}

/* --- 3. Raspored --------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--w-page);
  margin-inline: auto;
  padding-inline: var(--sp-4);
}

.wrap--wide {
  max-width: var(--w-wide);
}

.prose {
  max-width: var(--w-text);
}

main {
  flex: 1 0 auto;
  padding-block: var(--sp-6) var(--sp-8);
}

section + section {
  margin-top: var(--sp-7);
}

.sekcija-mist {
  background: var(--c-surface-2);
  border-block: 1px solid var(--c-line);
  padding-block: var(--sp-6);
  padding-inline: var(--sp-4);
  margin-block: var(--sp-7);
  margin-inline: calc(var(--sp-4) * -1);
}

hr {
  border: 0;
  border-top: 1px solid var(--c-line);
  margin-block: var(--sp-6);
}

@media (min-width: 768px) {
  .wrap {
    padding-inline: var(--sp-5);
  }

  main {
    padding-block: var(--sp-7) var(--sp-9);
  }

  .sekcija-mist {
    padding-inline: var(--sp-5);
    margin-inline: calc(var(--sp-5) * -1);
  }
}

/* --- 4. Zaglavlje i navigacija -------------------------------------------- */

/* Zaglavlje je bijelo i tiho. U registru izloga propusta preljev podloge, u
   registru podataka stoji na cistoj bijeloj. */
.site-header {
  background: transparent;
  border-bottom: 1px solid var(--c-line);
}

.site-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 3.5rem;
  padding-block: var(--sp-3);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  color: var(--c-ink);
  text-decoration: none;
  font-family: var(--f-display);
  font-weight: var(--fw-head);
  font-size: var(--fs-h3);
  letter-spacing: var(--ls-display);
}

.brand:hover {
  color: var(--c-ink);
  text-decoration: underline;
  text-decoration-color: var(--c-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

.brand img {
  display: block;
  width: 2rem;
  height: 2rem;
  border-radius: var(--r-control);
}

.brand__sub {
  display: block;
  font-family: var(--f-body);
  font-size: var(--fs-micro);
  font-weight: var(--fw-body);
  letter-spacing: normal;
  color: var(--c-ink-3);
}

.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background: transparent;
  color: var(--c-ink);
  border: 1px solid var(--c-line);
  border-radius: var(--r-control);
  padding: var(--sp-2) var(--sp-3);
  font: inherit;
  font-size: var(--fs-small);
  cursor: pointer;
}

.nav-toggle:hover {
  background: var(--c-surface-2);
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-5);
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-nav li {
  margin: 0;
}

.site-nav a {
  display: inline-block;
  padding-block: var(--sp-2);
  color: var(--c-ink-2);
  font-size: var(--fs-small);
  font-weight: var(--fw-mid);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.site-nav a:hover {
  color: var(--c-ink);
  border-bottom-color: var(--c-line);
}

/* Odabrana stavka nosi podcrtu u akcentu, to je jedino mjesto gdje akcent
   stoji u navigaciji. */
.site-nav a[aria-current] {
  color: var(--c-ink);
  border-bottom-color: var(--c-accent);
}

@media (max-width: 767px) {
  [data-nav-panel] {
    display: none;
    padding-bottom: var(--sp-3);
  }

  [data-nav-panel][data-nav-open] {
    display: block;
  }

  .site-nav ul {
    flex-direction: column;
    gap: 0;
  }

  .site-nav a {
    display: block;
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--c-line);
  }
}

@media (min-width: 768px) {
  .nav-toggle {
    display: none !important;
  }
}

/* --- 5. Podnozje --------------------------------------------------------- */

.site-footer {
  background: var(--c-surface-2);
  border-top: 1px solid var(--c-line);
  color: var(--c-ink-2);
  padding-block: var(--sp-7) var(--sp-6);
  margin-top: var(--sp-8);
}

.site-footer h2 {
  color: var(--c-ink);
  font-size: var(--fs-h3);
  margin-top: 0;
}

.site-footer__grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
}

.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-footer li + li {
  margin-top: var(--sp-2);
}
/* Nositelj i licencije, troje odvojeno: nositelj, licencija sadrzaja i
   licencije podataka. Isto razlikovanje stoji u LICENSE. */
.site-footer__pravno {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-line);
  display: grid;
  gap: var(--sp-2);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--c-ink-2);
}

.site-footer__pravno p {
  margin: 0;
}

@media (min-width: 768px) {
  .site-footer__grid {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

/* --- 6. Kartice i mreze --------------------------------------------------- */

.card-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}

.card-grid > li {
  margin: 0;
}

@media (min-width: 560px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-5);
  }
}

/* Ploha i radijus kartice dolaze iz registra: prozirno bijelo i 12 px u
   izlogu, cisto bijelo i 4 px u podacima. */
.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: var(--sp-2);
  background: var(--c-card);
  border: 1px solid var(--c-card-line);
  border-radius: var(--r-card);
  padding: var(--sp-5);
}

.card h3 {
  margin: 0;
  font-size: var(--fs-h3);
}

.card p {
  margin: 0;
  color: var(--c-ink-2);
  font-size: var(--fs-small);
}

.card__footer {
  margin-top: auto;
  padding-top: var(--sp-3);
}

/* --- 7. Oznake, obavijesti, prazna stanja --------------------------------- */

.oznaka {
  display: inline-block;
  font-size: var(--fs-micro);
  font-weight: var(--fw-mid);
  padding: var(--sp-1) var(--sp-2);
  border-radius: var(--r-control);
  background: var(--c-surface-2);
  color: var(--c-ink-2);
  border: 1px solid var(--c-line);
}

.obavijest {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  border: 1px solid var(--c-accent);
  border-left-width: 3px;
  border-radius: var(--r-card);
  background: var(--c-accent-bg);
  color: var(--c-ink);
  padding: var(--sp-4);
  margin-block: var(--sp-5);
}

.obavijest p {
  margin: 0;
  max-width: var(--w-text);
}

.obavijest__naslov {
  font-weight: var(--fw-mid);
  color: var(--c-accent-dark);
  font-size: var(--fs-small);
}

/* Obavijest koja nosi ogradu, ne upozorenje. */
.obavijest--tiha {
  background: var(--c-surface-2);
  border-color: var(--c-line);
  border-left-color: var(--c-ink);
}

.obavijest--tiha .obavijest__naslov {
  color: var(--c-ink);
}

.prazno {
  display: grid;
  place-content: center;
  gap: var(--sp-3);
  text-align: center;
  min-height: 18rem;
  padding: var(--sp-6);
  border: 1px dashed var(--c-line);
  border-radius: var(--r-card);
  background: var(--c-surface-2);
}

.prazno h3 {
  margin: 0;
}

.prazno p {
  margin: 0 auto;
  max-width: 48ch;
  color: var(--c-ink-2);
}

/* --- 8. Upravljanje prikazom --------------------------------------------- */

.upravljanje {
  display: grid;
  gap: var(--sp-4);
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  padding: var(--sp-4);
  margin-block: var(--sp-5);
}

.polje {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  min-width: 0;
}

.polje > label,
.polje > .polje__naslov {
  font-size: var(--fs-small);
  font-weight: var(--fw-mid);
  color: var(--c-ink);
}

/* Izbornik u upravljanju izgleda kao ostala polja: isti rub, radijus i tekst.
   Prije je nosio izgled preglednika, pa je na stranici izloženosti bio jedini
   element koji ne dolazi iz tokena. */
.polje > select {
  font: inherit;
  font-size: var(--fs-small);
  color: var(--c-ink);
  background: var(--c-paper);
  border: 1px solid var(--c-ink-3);
  border-radius: var(--r-control);
  padding: var(--sp-2) var(--sp-3);
  max-width: 100%;
}

.polje__pomoc {
  font-size: var(--fs-micro);
  color: var(--c-ink-3);
}

select,
input[type="text"],
input[type="search"] {
  font: inherit;
  font-size: var(--fs-small);
  color: var(--c-ink);
  background: var(--c-paper);
  border: 1px solid var(--c-ink-3);
  border-radius: var(--r-control);
  padding: var(--sp-2) var(--sp-3);
  width: 100%;
}

input[type="range"] {
  width: 100%;
  accent-color: var(--c-accent);
}

.gumb-skupina {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.gumb {
  font: inherit;
  font-size: var(--fs-small);
  font-weight: var(--fw-mid);
  color: var(--c-ink);
  background: var(--c-paper);
  border: 1px solid var(--c-ink-3);
  border-radius: var(--r-control);
  padding: var(--sp-2) var(--sp-4);
  cursor: pointer;
  text-decoration: none;
}

.gumb:hover {
  background: var(--c-surface-2);
  color: var(--c-ink);
}

.gumb.is-active {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-paper);
}

.gumb--glavni {
  background: var(--c-ink);
  border-color: var(--c-ink);
  color: var(--c-paper);
}

.gumb--glavni:hover {
  background: var(--c-accent-dark);
  border-color: var(--c-accent-dark);
  color: var(--c-paper);
}

.stanje-adrese {
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  color: var(--c-ink-3);
  word-break: break-all;
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-radius: var(--r-control);
  padding: var(--sp-2) var(--sp-3);
}

@media (min-width: 768px) {
  .upravljanje {
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    align-items: end;
  }

  .upravljanje > .upravljanje__puni {
    grid-column: 1 / -1;
  }
}

/* --- 9. Tablice ---------------------------------------------------------- */

.tablica-okvir {
  overflow-x: auto;
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  background: var(--c-paper);
}

table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--fs-small);
}

caption {
  text-align: left;
  padding: var(--sp-4);
  border-bottom: 1px solid var(--c-line);
  color: var(--c-ink-2);
  font-size: var(--fs-small);
}

th,
td {
  text-align: left;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--c-line);
  vertical-align: top;
}

/* Zaglavlje tablice nosi jaku vlas, koja je u registru podataka crna. */
thead th {
  background: var(--c-surface-2);
  color: var(--c-ink);
  font-weight: var(--fw-mid);
  white-space: nowrap;
  position: sticky;
  top: 0;
  border-bottom: var(--rule-strong);
}

tbody th {
  font-weight: var(--fw-body);
  color: var(--c-ink);
}

tbody tr:last-child th,
tbody tr:last-child td {
  border-bottom: 0;
}

.is-num {
  text-align: right;
}

.is-nodata {
  color: var(--c-ink-3);
  font-style: italic;
}

/* Jedinica cija vrijednost dolazi iz jedne jedine celije mreze. */
.is-jedna-celija {
  color: var(--c-accent-dark);
  font-weight: var(--fw-mid);
}

/* Alati iznad tablice: trazenje i poveznica na cijeli skup. Poveznica stoji
   iznad, jer za rad s cijelim skupom nitko ne koristi tablicu u pregledniku. */
.tablica-alati {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}

/* Trazenje i filtar stoje jedno uz drugo i lome se pod sebe na uskom zaslonu.
   Oba polja nosi ista komponenta, pa nose i isti razred. */
.tablica-alati__polja {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--sp-4);
}

.tablica-alati__polje {
  display: grid;
  gap: var(--sp-2);
}

.tablica-alati__polje label {
  font-size: var(--fs-small);
  font-weight: var(--fw-mid);
  color: var(--c-ink-2);
}

.tablica-alati__polje input,
.tablica-alati__polje select {
  font: inherit;
  font-size: var(--fs-small);
  color: var(--c-ink);
  background: var(--c-paper);
  border: 1px solid var(--c-ink-3);
  border-radius: var(--r-control);
  padding: var(--sp-2) var(--sp-3);
  min-width: 16rem;
}

/* Filtar je duzi od polja za trazenje, jer nosi imena zupanija, ali ne smije
   razgurati red na uskom zaslonu. */
.tablica-alati__polje select {
  max-width: 100%;
}

.tablica-alati__preuzmi {
  margin: 0;
  font-size: var(--fs-small);
  text-align: right;
  max-width: 28rem;
}

.tablica-alati__opis {
  display: block;
  color: var(--c-ink-3);
  font-size: var(--fs-micro);
}

/* Sortiranje je gumb u zaglavlju, da se do njega dodje tabulatorom. */
.tablica__sort {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-2);
  font: inherit;
  font-weight: var(--fw-mid);
  color: var(--c-ink);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: inherit;
}

.tablica__sort:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.18em;
}

.tablica__sort.is-active {
  color: var(--c-accent-dark);
}

.is-num .tablica__sort {
  flex-direction: row-reverse;
}

/* Razina i godina uz naslov stupca. Ide u Ink 2, jer je tekst, i u manju
   veličinu, jer je opis stupca a ne stupac. */
.tablica__podnaslov {
  display: block;
  font-weight: var(--fw-body);
  font-size: var(--fs-micro);
  color: var(--c-ink-2);
  white-space: nowrap;
}

/* Strelica je znak, dakle tekst, pa ide u Ink 3. Ink nontext nosi 3,3 prema 1
   i sluzi crtama i ikonama, nikad znakovima. */
.tablica__strelica {
  font-size: var(--fs-micro);
  color: var(--c-ink-3);
}

.tablica__sort.is-active .tablica__strelica {
  color: var(--c-accent-dark);
}

/* Podnozje s gumbom i brojem prikazanih redaka. Bez beskonacnog pomicanja: ono
   krade tipkovnicu, ne kaze koliko je ostalo i ne moze se zaustaviti. */
.tablica-podnozje {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}

.tablica-podnozje__stanje {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--c-ink-2);
  font-variant-numeric: tabular-nums;
}

.gumb--tiho {
  border-color: var(--c-line);
  background: var(--c-surface-2);
}

.gumb--tiho:hover {
  background: var(--c-paper);
  border-color: var(--c-ink-3);
}

/* Puni oblik navodjenja granica, ispod okvira karte. Otvorena dozvola trazi
   vise od imena ustanove, pa ovo ne stane u oznaku unutar karte. */
.karta__izvor {
  margin: var(--sp-3) 0 0;
  font-size: var(--fs-micro);
  color: var(--c-ink-2);
  max-width: 60ch;
}

/* Tablica na uskom zaslonu: redak postaje blok, naziv stupca stoji uz
   vrijednost. Razlog je izmjeren na 360 piksela: u tablicu izlozenosti stanu
   dva stupca od pet, a na stranici preuzimanja je izvan zaslona ostajao bas
   stupac s poveznicom na datoteku, dakle svrha stranice. Pomicanje postrance
   postoji, ali ga nista ne najavljuje, pa se do podatka ne dolazi.

   Granica je ista kao za omjer karte, 560 piksela, da stranica ne mijenja
   raspored na dva razlicita mjesta.

   Zaglavlje ostaje u dokumentu, samo se ne vidi, jer nosi imena stupaca za
   citac ekrana. Uloge tablice upisuje `table.js`, jer promjena `display`
   tablici skida znacenje. */
@media (max-width: 560px) {
  .tablica--blokovi thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .tablica--blokovi tbody tr {
    display: block;
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--c-line);
  }

  .tablica--blokovi tbody tr:last-child {
    border-bottom: 0;
  }

  .tablica--blokovi tbody th,
  .tablica--blokovi tbody td {
    display: block;
    border: 0;
    padding: var(--sp-2) var(--sp-4);
    text-align: left;
  }

  /* Ime stupca **iznad** vrijednosti, ne uz nju: naslovi su duzi od vrijednosti
     pa bi u dva stupca "Promjena, dana u godini" islo u tri retka dok bi
     vrijednost stajala u jednom. */
  .tablica--blokovi tbody [data-oznaka]::before {
    content: attr(data-oznaka);
    display: block;
    /* Naslov stupca je tekst, pa ide u pismo teksta i onda kad je vrijednost
       broj. `tokens.css` kaze da je --f-mono za tehnicke metapodatke. */
    font-family: var(--f-body);
    font-style: normal;
    font-weight: var(--fw-body);
    font-size: var(--fs-micro);
    color: var(--c-ink-2);
  }

  /* Brojevi se u bloku citaju slijeva, jer vise ne stoje jedan ispod drugoga
     pa desno poravnanje nema sto poravnati. */
  .tablica--blokovi tbody .is-num {
    text-align: left;
    font-variant-numeric: tabular-nums;
  }

  .tablica--blokovi tbody th {
    font-weight: var(--fw-mid);
  }
}

/* --- 10. Legenda --------------------------------------------------------- */

.legenda {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-block: var(--sp-4);
}

.legenda__naslov {
  font-size: var(--fs-small);
  font-weight: var(--fw-mid);
}

/* Neprekidna traka, po BRAND.md odjeljku 4. Ista boja koju dobiva karta ide u
   preljev, pa se legenda i karta ne mogu razici. */
.legenda__traka {
  height: 0.75rem;
  border: 1px solid var(--c-line);
  border-radius: var(--r-control);
  max-width: 34rem;
}

/* Oznake stoje ispod trake, na svom mjestu u domeni. Nula nije na sredini kad
   domena nije simetricna, pa se polozaj racuna, ne rasporedjuje. */
.legenda__oznake {
  position: relative;
  height: 1.1rem;
  max-width: 34rem;
  font-size: var(--fs-micro);
  color: var(--c-ink-2);
}

.legenda__oznaka {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}

.legenda__oznaka:first-child { transform: none; }
.legenda__oznaka:last-child { transform: translateX(-100%); }

.legenda__stanja {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.legenda__stanja li {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0;
  font-size: var(--fs-micro);
  color: var(--c-ink-2);
  padding-right: var(--sp-3);
}

.legenda__uzorak {
  width: 1.25rem;
  height: 0.75rem;
  border-radius: var(--r-control);
  border: 1px solid var(--c-line);
  flex: none;
}

/* Dva stanja bez vrijednosti se razlikuju i u legendi, ne samo u tekstu. */
.uzorak-nema { background: var(--c-nodata); }
.uzorak-more { background: var(--c-nosea); }

/* Uzorak neslaganja u legendi. Kosa crta iz istih tokena kojima je nacrtana i
   na karti, jer bi druga boja tvrdila drugo stanje. Razmak je gušći nego na
   karti, da se u kvadratiću od jednog retka vidi barem dvije crte. */
.uzorak-neslaganja {
  background:
    repeating-linear-gradient(
      45deg,
      var(--uzorak-crta) 0,
      var(--uzorak-crta) 1px,
      var(--uzorak-rub) 1px,
      var(--uzorak-rub) 2px,
      transparent 2px,
      transparent 4px
    ),
    var(--c-surface-2);
}

.legenda__opis {
  font-size: var(--fs-micro);
  color: var(--c-ink-3);
}

/* --- 11. Metapodaci prikaza ---------------------------------------------- */

.izvor {
  border: 1px solid var(--c-line);
  border-top: var(--rule-strong);
  border-radius: 0 0 var(--r-card) var(--r-card);
  background: var(--c-paper);
  padding: var(--sp-4);
  margin-top: var(--sp-5);
}

.izvor h3 {
  margin: 0 0 var(--sp-3);
  font-family: var(--f-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-mid);
  color: var(--c-ink-2);
}

.izvor dl {
  display: grid;
  gap: var(--sp-2) var(--sp-4);
  grid-template-columns: 1fr;
  margin: 0;
}

.izvor dt {
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  color: var(--c-ink-3);
}

.izvor dd {
  margin: 0 0 var(--sp-3);
  font-size: var(--fs-small);
}

.izvor__preuzimanje {
  margin: var(--sp-4) 0 var(--sp-2);
  font-size: var(--fs-small);
  border-top: 1px solid var(--c-line);
  padding-top: var(--sp-3);
}

@media (min-width: 560px) {
  .izvor dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .izvor dl {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* --- 12. Karta ------------------------------------------------------------ */

.karta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-block: var(--sp-5);
}

/* Visina okvira izlazi iz sirine, ne postavlja se brojem. Hrvatska je u
   Mercatoru gotovo kvadratna, oko 6 stupnjeva sirine na oko 5,9 stupnjeva
   visine mjereno u projekciji, pa vrlo nizak i vrlo sirok okvir ostavlja
   prazninu lijevo i desno, a nizak okvir odreze kartu. Omjer je zato dio
   okvira, a najveca visina cuva da karta na sirokom ekranu ne preraste zaslon. */
/* Omjer je blizu omjera same Hrvatske, koja je u Mercatoru gotovo kvadratna.
   Sto je okvir siri od nje, to je vise prazne plohe sa strane, jer se kadar
   racuna iz granica podataka pa uklapanje odlucuje uza strana.

   Uz najvecu visinu ide i najveca sirina izvedena iz nje. Bez toga na niskom
   prozoru visinu odreze vh, sirina ostane puna, i okvir se rastegne u vrlo
   siroku traku s praznim rubovima. Ovako se okvir suzi umjesto da se izobliči. */
.karta__platno {
  --omjer-karte: 1;
  position: relative;
  width: 100%;
  aspect-ratio: var(--omjer-karte);
  max-height: var(--v-karte);
  max-width: calc(var(--v-karte) * var(--omjer-karte));
  margin-inline: auto;
  border: 1px solid var(--c-line);
  border-radius: var(--r-card);
  background: var(--c-paper);
  overflow: hidden;
}

/* Na uskom zaslonu je okvir karte visi od kvadrata. Razlog je oblik zemlje:
   Hrvatska je u Mercatoru gotovo kvadratna, pa kvadratno platno nema praznog
   pojasa u koji bi oznaka stala, i svaki njezin redak ulazi u kopno. Visi
   okvir stvara taj pojas bez ijednog skracenja teksta, a oznaka je ono zbog
   cega snimka zaslona uopce nesto znaci.

   Izmjereno na 360 piksela, oznaka u donjem lijevom kutu: pri omjeru 1 skriva
   11,7 posto nacrtanih celija, pri 0,85 4,7, pri 0,8 3,1, pri 0,75 0,2, pri
   0,7 nijednu. Uzet je 0,75, jer daje veliku rezervu uz nizu kartu, dakle uz
   manje pomicanja na telefonu.
   Na sirokom zaslonu omjer ostaje kakav je bio, jer ondje oznaka zauzima 3
   posto platna i nema sto skriti. */
@media (max-width: 560px) {
  .karta__platno {
    --omjer-karte: 0.75;
  }
}

@media (min-width: 768px) {
  .karta__platno {
    --omjer-karte: 1.25;
  }
}

/* Vidljivo stanje pogreske na karti. Prazan bijeli okvir bez objasnjenja
   citatelj tumaci kao da podatka nema, a podatak postoji i stoji u tablici. */
.karta__kvar {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: var(--sp-2);
  padding: var(--sp-5);
  background: var(--c-surface-2);
  border-left: 3px solid var(--c-accent);
}

.karta__kvar-naslov {
  font-family: var(--f-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-head);
  color: var(--c-ink);
}

.karta__kvar-tekst {
  margin: 0;
  max-width: 48ch;
  color: var(--c-ink-2);
  font-size: var(--fs-small);
}

/* Tehnicki razlog stoji uz poruku, jer prazna karta koja ne kaze zasto je
   prazna trosi sate. Ide u mono, kao i svaka poruka stroja. */
.karta__kvar-razlog {
  margin: 0;
  max-width: 64ch;
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  color: var(--c-ink-3);
}

/* Koliko celija stoji iza prosjeka po jedinicama. Stoji izmedju karte i
   legende, jer se cita uz kartu, a ne uz razrede boja. */
.karta__razlucivost {
  margin: var(--sp-3) 0 0;
  padding-left: var(--sp-3);
  border-left: 2px solid var(--c-accent);
  max-width: 62ch;
  color: var(--c-ink-2);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
}

.karta__razlucivost .is-num {
  color: var(--c-ink);
  font-weight: var(--fw-mid);
}

/* Oznaka projekcije, unutar okvira karte. Snimka zaslona odsijeca sve izvan
   okvira, a karta projekcije bez oznake izgleda kao karta mjerenja, pa oznaka
   ne smije stajati samo uz legendu. Lezi uz gornji rub i ne prima pokazivac. */
/* Oznaka stoji uz **donji lijevi** rub, ne uz gornji. Izmjereno na 360
   piksela: ista oznaka uz gornji rub skriva 17,6 posto nacrtanih celija, jer
   je vodoravna traka preko sjeverne Hrvatske, a uz donji rub 2,9 posto, jer
   ondje lezi nad Jadranom. Sirina od 70 posto spusta to na 1,1. Mjera je udio
   podatka, ne udio platna: potpis karte zauzima 12,1 posto platna a skriva
   0,5 posto celija. */
.karta__oznaka-projekcije {
  position: absolute;
  bottom: var(--sp-2);
  left: var(--sp-2);
  z-index: 4;
  pointer-events: none;
  display: grid;
  gap: var(--sp-1);
  /* 85 posto, ne 70: pri obje sirine oznaka skriva nula celija, otkad je okvir
     visi, a pri 85 posto blok stane u tri retka umjesto u cetiri. */
  width: 85%;
  max-width: 46ch;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-accent);
  border-radius: var(--r-card);
  background: var(--c-paper);
  color: var(--c-ink);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
}

.karta__oznaka-projekcije .karta__oznaka-red.je-manji {
  color: var(--c-ink-2);
  font-size: var(--fs-micro);
}

/* Opis se pozicionira iz JS-a, unutar okvira karte. Ne prima pokazivac, jer bi
   inace bjezao ispred njega. */
.karta__opis {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  pointer-events: none;
  display: grid;
  gap: var(--sp-1);
  width: max-content;
  max-width: 18rem;
  padding: var(--sp-3);
  background: var(--c-paper);
  border: 1px solid var(--c-line);
  border-left: 3px solid var(--c-accent);
  border-radius: var(--r-control);
  box-shadow: 0 1px 3px rgb(22 22 26 / 12%);
}

.karta__opis-naziv {
  font-family: var(--f-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-mid);
  color: var(--c-ink);
}

.karta__opis-nad {
  font-size: var(--fs-micro);
  color: var(--c-ink-3);
}

/* Broj se slaze uz druge brojeve, u karti i u tablici, pa ide u Fira Mono,
   po BRAND.md odjeljku 6. */
.karta__opis-broj {
  font-family: var(--f-mono);
  font-weight: var(--fw-mid);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-h3);
  color: var(--c-ink);
  line-height: 1.1;
}

.karta__opis-broj--nema {
  font-size: var(--fs-small);
  color: var(--c-ink-2);
}

.karta__opis-jedinica {
  font-size: var(--fs-micro);
  color: var(--c-ink-2);
  margin-top: calc(var(--sp-1) * -1);
}

/* Broj u opisu ide u Fira Mono, ali se ne poravnava desno kao u tablici, jer
   ovdje ne stoji u stupcu. */
.karta__opis-num {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
}

.karta__opis-broj--nema {
  font-family: var(--f-body);
  font-weight: var(--fw-body);
  font-size: var(--fs-body);
  color: var(--c-ink-3);
}

.karta--bez-skripte .karta__platno::after {
  content: "Karta traži JavaScript. Isti podaci nalaze se u tablici ispod.";
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  padding: var(--sp-5);
  text-align: center;
  font-size: var(--fs-small);
  color: var(--c-ink-2);
}

.tablica-okvir tbody tr.is-active {
  background: var(--c-accent-bg);
  box-shadow: inset 3px 0 0 0 var(--c-accent);
}

.tablica-okvir tbody tr[tabindex] {
  cursor: default;
}

/* MapLibre crta kontrole vlastitim razredima. Ovdje se usklađuju s nasim
   radijusima i vlasima, boje ostaju iz tokens.css. */
.maplibregl-ctrl-group {
  border: 1px solid var(--c-line) !important;
  border-radius: var(--r-control) !important;
  box-shadow: none !important;
}

.maplibregl-ctrl-attrib {
  font-size: var(--fs-micro);
}

.maplibregl-ctrl-attrib a {
  color: var(--c-ink-3);
}

/* Strelice na krajevima legende. Domena je odsjecena po kvantilu, pa krajnja
   boja znaci "toliko i vise", ne "najvise izmjereno". */
.legenda__traka-red { display: flex; align-items: center; gap: var(--sp-1); }
.legenda__traka-red .legenda__traka { flex: 1; }
.legenda__strelica { color: var(--c-ink-3); font-size: var(--fs-micro); line-height: 1; }

/* Element skriven atributom `hidden` mora nestati, bez obzira na to sto mu
   razred kaze o `display`. Bez ovoga razred s `display: grid` nadjaca zadano
   ponasanje atributa, jer je iste tezine a dolazi kasnije, pa element ostane
   nacrtan prazan. Tako je na stranicama bez projekcije stajao prazan bijeli
   okvir s crvenom vlasi u gornjem lijevom kutu karte.

   Pravilo je opce namjerno: pisati ga po razredu znacilo bi da sljedeci
   element s `display` i `hidden` ponovi isti kvar. */
[hidden] { display: none !important; }

/* Mjesto izbora scenarija. Kad se scenariji ne razlikuju mjerljivo, ovdje
   umjesto gumba stoji recenica s izmjerenom brojkom. Najmanja visina je ista u
   oba slucaja, da se pri prebacivanju razdoblja upravljanje ne pomice pod
   rukom: visina jednog reda gumba, plus naslov polja. */
.polje--scenarij {
  /* Slot mora biti jednako visok i s gumbima i s recenicom, inace se pri
     prebacivanju razdoblja upravljanje pomakne pod rukom. Mjera je visina vise
     od dvoje: naslov polja, razmak i tri retka sitnog teksta.

     Recenica je duljinom ogranicena da u ovu visinu stane pri sirini stranice.
     Na vrlo uskom zaslonu moze prijeci u cetvrti redak i tada slot naraste za
     jedan redak, sto je zabiljezeno i nije rijeseno. */
  min-height: 6rem;
}

.polje__umjesto {
  margin: 0;
  max-width: 52ch;
  color: var(--c-ink-2);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
}

/* Napomene ispod karte. Prije su stajale u samoj karti, gdje su na 360 piksela
   prekrivale 35,5 posto platna, izmjereno. */
.karta__napomene {
  margin-top: var(--sp-5);
  display: grid;
  gap: var(--sp-3);
}

.karta__napomena {
  margin: 0;
  max-width: var(--w-text);
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--c-ink-2);
}