/* BL24.info — stilovi
 *
 * Bez build koraka i bez frameworka: jedan fajl, tokeni na :root, tamna tema
 * preko [data-tema]. Sajt se gleda na telefonu, cesto na suncu i cesto u
 * zurbi, pa su prioriteti kontrast, velike dodirne mete i odsustvo pomjeranja
 * sadrzaja dok se ucitava.
 */

/* ---------------------------------------------------------------- tokeni */

/*
 * Jedan izvor istine po tokenu, kroz light-dark().
 *
 * Ranije su postojala dva bloka — :root i [data-tema="tamna"] — pa se svaka
 * boja morala mijenjati na dva mjesta. Gore od toga: nije postojao
 * prefers-color-scheme upit, pa je posjetilac sa telefonom u tamnoj temi
 * svejedno dobijao svijetlu, jer je CSS cekao izricit izbor.
 *
 * Sada `color-scheme: light dark` znaci "prati sistem", a prekidac ga
 * nadjacava postavljanjem data-tema.
 */
:root {
  color-scheme: light dark;

  --bg:          light-dark(#f4f6f9, #0b0f14);
  --povrsina:    light-dark(#ffffff, #141a22);
  --povrsina-2:  light-dark(#eef1f5, #1c242e);
  --ivica:       light-dark(#e0e5ec, #253040);
  --ivica-jaka:  light-dark(#cbd3de, #35435a);

  --tekst:       light-dark(#0d1219, #e9eef5);
  --tekst-tih:   light-dark(#5a6675, #9aa8b8);
  --tekst-tisi:  light-dark(#8a96a5, #6b7b8d);

  --brend:          light-dark(#0284c7, #38bdf8);
  --brend-svijetli: light-dark(#0369a1, #7dd3fc);
  --na-brendu:      light-dark(#ffffff, #06202e);

  --ok:            light-dark(#15803d, #4ade80);
  --ok-tanko:      light-dark(#dcfce7, #052e16);
  --radovi:        light-dark(#b45309, #fbbf24);
  --radovi-tanko:  light-dark(#fef3c7, #3a2a06);
  --kvar:          light-dark(#be123c, #fb7185);
  --kvar-tanko:    light-dark(#ffe4e6, #3f0d1a);
  --info:          light-dark(#1d4ed8, #60a5fa);
  --info-tanko:    light-dark(#dbeafe, #0c1f3d);
  --tiho:          light-dark(#52525b, #a1a1aa);
  --tiho-tanko:    light-dark(#e4e4e7, #27272a);

  /* Hrom: gornja traka, zaglavlje, pokretna traka i traka hitnih sluzbi.
     Ranije su bili zakucano tamni u obje teme, pa je prekidac izgledao kao
     da radi samo na pola ekrana. */
  --hrom:          light-dark(#e9edf3, #070b10);
  --hrom-2:        light-dark(#ffffff, #16212f);
  --hrom-grad:     light-dark(
                     linear-gradient(160deg, #ffffff 0%, #eef2f7 100%),
                     linear-gradient(160deg, #0d1622 0%, #16212f 100%));
  --hrom-tekst:    light-dark(#0d1219, #ffffff);
  --hrom-tih:      light-dark(#5a6675, #8fa0b4);
  --hrom-ivica:    light-dark(#dbe2ea, #223044);
  --hrom-traka:    light-dark(#e3edf7, #16212f);
  --hrom-traka-tekst: light-dark(#0b5f8a, #9fd4f0);
  --hrom-hover:    light-dark(#dde5ee, #16212f);
  --hrom-prozirno: light-dark(rgb(2 132 199 / 8%), rgb(255 255 255 / 8%));
  --hrom-prozirno-2: light-dark(rgb(2 132 199 / 16%), rgb(255 255 255 / 16%));
  --hrom-ivica-dugme: light-dark(rgb(2 132 199 / 35%), rgb(255 255 255 / 14%));

  --r-s: 8px;
  --r-m: 12px;
  --r-l: 16px;
  --r-pun: 999px;

  --sjenka-1: light-dark(0 1px 2px rgb(13 18 25 / 6%), 0 1px 2px rgb(0 0 0 / 40%));
  --sjenka-2: light-dark(0 4px 6px -1px rgb(13 18 25 / 8%), 0 4px 6px -1px rgb(0 0 0 / 50%));
  --sjenka-3: light-dark(0 20px 25px -5px rgb(13 18 25 / 14%), 0 20px 25px -5px rgb(0 0 0 / 60%));

  --sirina: 860px;
  --footer-h: 60px;

  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-broj: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

/* Prekidac nadjacava sistem. */
[data-tema="svijetla"] { color-scheme: light; }
[data-tema="tamna"]    { color-scheme: dark; }

/* ---------------------------------------------------------------- osnovno */

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

* { margin: 0; }

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

/* Atribut [hidden] ima samo UA stil display:none, koji gubi od bilo kojeg
   autorskog `display`. Bez ovoga .kartica{display:flex} ostaje vidljiva i
   kad je hidden=true — filter tada radi u JS-u a ne radi na ekranu. */
[hidden] { display: none !important; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--tekst);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Fiksna traka hitnih sluzbi ne smije prekriti sadrzaj, ni na iPhoneu
     gdje ispod nje stoji indikator za pocetni ekran. */
  padding-bottom: calc(var(--footer-h) + env(safe-area-inset-bottom));
}

a { color: var(--brend); }

button { font: inherit; color: inherit; }

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--povrsina);
  color: var(--tekst);
  padding: 10px 16px;
  border-radius: 0 0 var(--r-s) 0;
}
.skip:focus { left: 0; }

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

.omot {
  max-width: var(--sirina);
  margin-inline: auto;
  padding-inline: 16px;
}

/* ------------------------------------------------------------ meteo traka */

.meteo {
  background: var(--hrom);
  color: var(--hrom-tih);
  font-size: 0.75rem;
  border-bottom: 1px solid var(--hrom-ivica);
}

.meteo__omot {
  max-width: var(--sirina);
  margin-inline: auto;
  padding: 6px 16px;
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  min-height: 30px;
}

.meteo__stavka {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.meteo__stavka b {
  color: var(--hrom-tekst);
  font-variant-numeric: tabular-nums;
}

/* Sparkline vodostaja: sitan graf koji stoji uz broj i daje mu kontekst. */
.spark {
  display: block;
  width: 54px;
  height: 16px;
  overflow: visible;
}
.spark path {
  fill: none;
  stroke: var(--brend-svijetli);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* -------------------------------------------------------------- zaglavlje */

.zaglavlje {
  background: var(--hrom-grad);
  color: var(--hrom-tekst);
  border-bottom: 1px solid var(--hrom-ivica);
}

.zaglavlje__omot {
  max-width: var(--sirina);
  margin-inline: auto;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.brend {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
}

.brend__ime {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.brend__ime span { color: var(--brend-svijetli); }

.brend__podnaslov {
  display: block;
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--hrom-tih);
  letter-spacing: 0;
}

/* Puls grada: boja se racuna iz podataka, ne postavlja se rukom. */
.puls {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--boja-pulsa, #64748b);
  box-shadow: 0 0 0 0 var(--boja-pulsa, #64748b);
  animation: puls 2.4s ease-out infinite;
  flex: none;
}

@keyframes puls {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--boja-pulsa) 70%, transparent); }
  70%  { box-shadow: 0 0 0 9px color-mix(in srgb, var(--boja-pulsa) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--boja-pulsa) 0%, transparent); }
}

.dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 40px;
  padding: 0 14px;
  border-radius: var(--r-pun);
  border: 1px solid transparent;
  font-size: 0.85rem;
  font-weight: 650;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s, transform .05s;
  white-space: nowrap;
}
.dugme:active { transform: translateY(1px); }

.dugme--prijava {
  background: color-mix(in srgb, var(--brend) 14%, transparent);
  border-color: color-mix(in srgb, var(--brend) 45%, transparent);
  color: var(--brend);
}
.dugme--prijava:hover {
  background: var(--brend);
  color: var(--na-brendu);
}

.dugme--ikona {
  width: 40px;
  padding: 0;
  background: var(--hrom-prozirno);
  border-color: var(--hrom-ivica-dugme);
  color: var(--hrom-tih);
  font-size: 1rem;
}
.dugme--ikona:hover { background: var(--hrom-prozirno-2); color: var(--hrom-tekst); }

/* ------------------------------------------------------------------ traka */

.traka {
  background: var(--hrom-traka);
  border-bottom: 1px solid var(--hrom-ivica);
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 34px;
}

.traka__oznaka {
  flex: none;
  background: var(--kvar);
  color: #fff;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  margin-left: 12px;
  border-radius: var(--r-s);
  text-transform: uppercase;
}

.traka__prozor {
  flex: 1;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 20px, #000 calc(100% - 20px), transparent);
}

.traka__pokret {
  display: inline-flex;
  gap: 40px;
  padding-left: 100%;
  white-space: nowrap;
  font-size: 0.82rem;
  font-weight: 550;
  color: var(--hrom-traka-tekst);
  animation: klizi 38s linear infinite;
}
.traka:hover .traka__pokret,
.traka:focus-within .traka__pokret { animation-play-state: paused; }

@keyframes klizi {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-100%, 0, 0); }
}

/* ---------------------------------------------------------------- pretraga */

.alatke { padding-block: 18px 4px; }

.pretraga { position: relative; }

.pretraga__polje {
  width: 100%;
  min-height: 46px;
  padding: 10px 40px 10px 40px;
  font-size: 0.95rem;
  color: var(--tekst);
  background: var(--povrsina);
  border: 1px solid var(--ivica-jaka);
  border-radius: var(--r-m);
  box-shadow: var(--sjenka-1);
  transition: border-color .15s, box-shadow .15s;
}
.pretraga__polje::placeholder { color: var(--tekst-tisi); }
.pretraga__polje:focus {
  outline: none;
  border-color: var(--brend);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brend) 20%, transparent);
}

.pretraga__ikona,
.pretraga__brisi {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: var(--tekst-tih);
  line-height: 1;
}
.pretraga__ikona { left: 14px; pointer-events: none; }

.pretraga__brisi {
  right: 8px;
  width: 30px; height: 30px;
  display: none;
  place-items: center;
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.1rem;
}
.pretraga__brisi:hover { background: var(--povrsina-2); }
.pretraga__brisi[data-vidljivo="da"] { display: grid; }

.pilule {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding-bottom: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.pilule::-webkit-scrollbar { display: none; }

.pilula {
  flex: none;
  min-height: 34px;
  padding: 0 13px;
  background: var(--povrsina);
  color: var(--tekst-tih);
  border: 1px solid var(--ivica);
  border-radius: var(--r-pun);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.pilula:hover { border-color: var(--ivica-jaka); color: var(--tekst); }
.pilula[aria-pressed="true"] {
  background: var(--brend);
  border-color: var(--brend);
  color: var(--na-brendu);
}

/* ---------------------------------------------------------------- kartice */

.mreza {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 16px;
}

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

.kartica {
  position: relative;
  background: var(--povrsina);
  border: 1px solid var(--ivica);
  border-radius: var(--r-l);
  padding: 15px 16px 13px;
  box-shadow: var(--sjenka-1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

/* Traka u boji uz lijevu ivicu: status se prepoznaje prije citanja teksta. */
.kartica::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: var(--boja-statusa, var(--ivica-jaka));
}

.kartica[data-status="ok"]         { --boja-statusa: var(--ok);     --tanko: var(--ok-tanko); }
.kartica[data-status="radovi"]     { --boja-statusa: var(--radovi); --tanko: var(--radovi-tanko); }
.kartica[data-status="kvar"]       { --boja-statusa: var(--kvar);   --tanko: var(--kvar-tanko); }
.kartica[data-status="info"]       { --boja-statusa: var(--info);   --tanko: var(--info-tanko); }
.kartica[data-status="van_sezone"],
.kartica[data-status="nepoznato"]  { --boja-statusa: var(--tiho);   --tanko: var(--tiho-tanko); }

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

.kartica__ikona { font-size: 1.05rem; line-height: 1; }

.kartica__naslov {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-right: auto;
}

.znacka {
  flex: none;
  padding: 3px 9px;
  border-radius: var(--r-pun);
  font-size: 0.7rem;
  font-weight: 700;
  background: var(--tanko, var(--povrsina-2));
  color: var(--boja-statusa, var(--tekst-tih));
}

.kartica__tekst {
  font-size: 0.89rem;
  color: var(--tekst-tih);
  line-height: 1.5;
}

.kartica__naselja {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.oznaka-naselja {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--r-pun);
  background: var(--povrsina-2);
  color: var(--tekst-tih);
}

.kartica__dno {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 9px;
  border-top: 1px solid var(--ivica);
  font-size: 0.72rem;
  color: var(--tekst-tisi);
}

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

/* Zastarjelost se pokazuje, ne krije: podatak star dva dana koji izgleda
   svjeze gori je od vidljivo starog podatka. */
.kartica__vrijeme[data-staro="da"] {
  color: var(--radovi);
  font-weight: 650;
}

.kartica__izvor {
  margin-left: auto;
  color: var(--tekst-tih);
  text-decoration: none;
  font-weight: 600;
}
.kartica__izvor:hover { color: var(--brend); text-decoration: underline; }

/* Liste unutar kartica (apoteke, servisi) */
.lista { display: flex; flex-direction: column; }

.lista__red {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--ivica);
  font-size: 0.86rem;
}
.lista__red:last-child { border-bottom: 0; }

.lista__ime { margin-right: auto; }
.lista__ime b { font-weight: 650; color: var(--tekst); }
.lista__ime small { display: block; color: var(--tekst-tisi); font-size: 0.72rem; }

.poziv {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  background: var(--info-tanko);
  color: var(--info);
  border-radius: var(--r-s);
  font-size: 0.8rem;
  font-weight: 700;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.poziv:hover { background: var(--info); color: #fff; }

.napomena {
  font-size: 0.75rem;
  color: var(--tekst-tisi);
  background: var(--povrsina-2);
  border-radius: var(--r-s);
  padding: 8px 10px;
  line-height: 1.45;
}

/* ------------------------------------------------------- prazno / greska */

.prazno {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 20px;
  color: var(--tekst-tih);
  background: var(--povrsina);
  border: 1px dashed var(--ivica-jaka);
  border-radius: var(--r-l);
}
.prazno__ikona { font-size: 1.8rem; display: block; margin-bottom: 8px; }
.prazno__naslov { font-weight: 700; color: var(--tekst); margin-bottom: 4px; }
.prazno p { font-size: 0.86rem; }

/* Kostur dok podaci stizu — sprjecava skok sadrzaja. */
.kostur {
  background: var(--povrsina);
  border: 1px solid var(--ivica);
  border-radius: var(--r-l);
  padding: 16px;
  min-height: 132px;
}
.kostur__linija {
  height: 11px;
  border-radius: var(--r-pun);
  background: linear-gradient(90deg, var(--povrsina-2) 25%, var(--ivica) 50%, var(--povrsina-2) 75%);
  background-size: 200% 100%;
  animation: sjaj 1.4s ease-in-out infinite;
  margin-bottom: 10px;
}
.kostur__linija:nth-child(1) { width: 45%; }
.kostur__linija:nth-child(2) { width: 92%; }
.kostur__linija:nth-child(3) { width: 74%; }
.kostur__linija:nth-child(4) { width: 30%; margin-bottom: 0; }

@keyframes sjaj {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ------------------------------------------------------------- disclaimer */

.disclaimer {
  margin: 26px auto 8px;
  font-size: 0.73rem;
  line-height: 1.55;
  color: var(--tekst-tisi);
  text-align: center;
  max-width: 62ch;
}
.disclaimer b { color: var(--tekst-tih); }

/* -------------------------------------------------------- traka hitnih sl. */

.hitne {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 90;
  background: var(--hrom);
  border-top: 1px solid var(--hrom-ivica);
  padding-bottom: env(safe-area-inset-bottom);
}

.hitne__omot {
  max-width: var(--sirina);
  margin-inline: auto;
  height: var(--footer-h);
  display: flex;
  align-items: center;
  gap: 6px;
  padding-inline: 8px;
}

.hitne__veza {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  min-height: 46px;
  border-radius: var(--r-s);
  color: var(--hrom-tih);
  text-decoration: none;
  font-size: 0.66rem;
  transition: background-color .15s;
}
.hitne__veza:hover { background: var(--hrom-hover); }
.hitne__veza b {
  font-size: 0.95rem;
  color: var(--brend);
  font-variant-numeric: tabular-nums;
}

/* -------------------------------------------------------------- modal */

/* <dialog> je zatvoren dok nema [open]. Podrazumijevani display:none mora
   ostati na snazi, inace modal stoji otvoren pri ucitavanju stranice. */
.modal:not([open]) { display: none; }

.modal[open] {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 16px;
  border: 0;
  background: transparent;

  /* <dialog> ima UA stil width/height: fit-content, koji ponistava rastezanje
     od `inset: 0`. Bez izricitih dimenzija kutija ostane velicine sadrzaja u
     gornjem lijevom uglu, pa `place-items: center` centrira ploču unutar nje
     umjesto unutar ekrana. */
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}
.modal::backdrop {
  background: rgb(6 10 16 / 72%);
  backdrop-filter: blur(3px);
}

.modal__ploca {
  width: min(440px, 100%);
  max-height: min(86vh, 720px);
  overflow-y: auto;
  background: var(--povrsina);
  color: var(--tekst);
  border-radius: var(--r-l);
  box-shadow: var(--sjenka-3);
  padding: 18px;
}

.modal__vrh {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.modal__naslov { font-size: 1.05rem; font-weight: 700; margin-right: auto; }

.modal__zatvori {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  background: var(--povrsina-2);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--tekst-tih);
}
.modal__zatvori:hover { background: var(--ivica); color: var(--tekst); }

.polje { margin-bottom: 13px; }

.polje label {
  display: block;
  font-size: 0.8rem;
  font-weight: 650;
  margin-bottom: 5px;
}

.polje input,
.polje select,
.polje textarea {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  font: inherit;
  font-size: 0.9rem;
  color: var(--tekst);
  background: var(--bg);
  border: 1px solid var(--ivica-jaka);
  border-radius: var(--r-s);
  transition: border-color .15s, box-shadow .15s;
}
.polje textarea { resize: vertical; min-height: 76px; }
.polje input:focus,
.polje select:focus,
.polje textarea:focus {
  outline: none;
  border-color: var(--brend);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brend) 20%, transparent);
}

.polje__pomoc { font-size: 0.73rem; color: var(--tekst-tisi); margin-top: 4px; }

.dugme--glavno {
  width: 100%;
  min-height: 46px;
  background: var(--brend);
  color: var(--na-brendu);
  font-weight: 700;
  border: 0;
}
.dugme--glavno:hover { background: color-mix(in srgb, var(--brend) 85%, #000); }
.dugme--glavno:disabled { opacity: .6; cursor: progress; }

.poruka {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: var(--r-s);
  font-size: 0.84rem;
  line-height: 1.45;
}
.poruka[data-vrsta="uspjeh"] { background: var(--ok-tanko); color: var(--ok); }
.poruka[data-vrsta="greska"] { background: var(--kvar-tanko); color: var(--kvar); }
.poruka:empty { display: none; }

/* Med (honeypot): skriveno od ljudi, vidljivo botovima. Ne koristi
   display:none jer neki botovi to prepoznaju. */
.med {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

/* ---------------------------------------------------- pokret po zelji korisnika */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  /* Traka koja se ne krece mora biti citljiva u mirovanju. */
  .traka__pokret { padding-left: 12px; animation: none; }
  .puls { animation: none; }
}

/* Prazan rezultat pri filtriranju po naselju je dobra vijest, ne greska,
   pa i izgleda tako. */
.prazno[data-vrsta="mirno"] {
  border-style: solid;
  border-color: color-mix(in srgb, var(--ok) 35%, transparent);
  background: color-mix(in srgb, var(--ok-tanko) 60%, var(--povrsina));
}
.prazno[data-vrsta="mirno"] .prazno__naslov { color: var(--ok); }

/* Kartica cija vrijednost nije mogla biti provjerena pri zadnjem prolazu. */
.kartica__upozorenje {
  display: inline-block;
  align-self: flex-start;
  font-size: 0.7rem;
  font-weight: 650;
  padding: 3px 9px;
  border-radius: var(--r-pun);
  background: var(--radovi-tanko);
  color: var(--radovi);
}

/* ------------------------------------------------------- prijave građana */

/* Namjerno drugačije od ostatka kartice: prijava građana nije zvanični
   podatak i ne smije se čitati kao da jeste. Isprekidana ivica i oznaka
   "nije zvanično potvrđeno" su tu da ta razlika bude očigledna i onome ko
   samo preleti pogledom. */
/* Pojas na dnu kartice, van zvanicnog dijela.
   Prijava se prostire do ivica i ima svoju pozadinu, pa je granica prema
   zvanicnom podatku ocigledna: sve iznad podnozja je Elektrokrajina, sve
   ispod su gradjani. Ranije je stajala IZNAD podnozja, pa je izgledalo kao
   da zvanicni potpis i vrijeme vaze i za nju. */
.dojave {
  margin: 2px -16px -13px;
  padding: 10px 16px 12px;
  background: color-mix(in srgb, var(--radovi-tanko) 55%, transparent);
  border-top: 1px solid color-mix(in srgb, var(--radovi) 30%, transparent);
  border-radius: 0 0 calc(var(--r-l) - 1px) calc(var(--r-l) - 1px);
}

.dojave__naslov {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--radovi);
  margin-bottom: 6px;
}
.dojave__naslov span { font-weight: 500; opacity: .85; }

.dojave__lista {
  margin: 0;
  padding-left: 16px;
  font-size: 0.8rem;
  color: var(--tekst-tih);
  line-height: 1.45;
}
.dojave__lista li + li { margin-top: 4px; }
.dojave__lista b { color: var(--tekst); font-weight: 650; }
.dojave__lista time {
  display: block;
  font-size: 0.7rem;
  color: var(--tekst-tisi);
  font-variant-numeric: tabular-nums;
}
.dojave__jos { list-style: none; margin-left: -16px; color: var(--tekst-tisi); }

/* Statični kontakti unutar kartice (npr. servis klima na kartici grijanja).
   Odvojeni tankom linijom od teksta izvora, ali unutar zvaničnog dijela —
   to nije prijava građana nego stalna informacija. */
.lista--kontakti {
  border-top: 1px solid var(--ivica);
  padding-top: 2px;
}