/* Izgled po smjeru C (ciklus 41, specs/41-prototip.html): Figtree, bijela podloga,
   gust popis s crtom, jedna plava. Jedan stupac na mobitelu (od 360 px),
   ograničena širina na računalu; bez vodoravnog skrolanja stranice. */

@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fontovi/figtree-400.72de3fc9.woff2") format("woff2");
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fontovi/figtree-600.b1e611e9.woff2") format("woff2");
}
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fontovi/figtree-700.2ba60b8f.woff2") format("woff2");
}

/* Tokeni: svaki ima vrijednost i u tamnoj temi (tests/test_stil.py), a tekst na
   podlozi na kojoj stoji daje najmanje 4,5 : 1. */
:root {
  --pozadina: #ffffff;
  --plosa: #ffffff;
  --tekst: #17181a;
  --blijedo: #6a6d73;
  --rub: #e4e5e8;
  --naglasak: #2d4bd6;
  --naglasak-blago: #e9edfc;
  --na-naglasku: #ffffff;
  --zeleno: #187538;
  --crveno: #c2311f;
  --zuto: #8f6200;
  --plosa-oznake: #eef0f3;
  --okolina: #6a1b9a;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --pozadina: #141517;
    --plosa: #141517;
    --tekst: #e9eaed;
    --blijedo: #9a9ea6;
    --rub: #2a2c31;
    --naglasak: #93a9ff;
    --naglasak-blago: #1d2447;
    --na-naglasku: #141517;
    --zeleno: #6fd48b;
    --crveno: #ff8d84;
    --zuto: #e6c35c;
    --plosa-oznake: #24262b;
    --okolina: #7b1fa2;
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--pozadina);
  color: var(--tekst);
  font: 15px/1.45 "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overflow-wrap: anywhere;
}

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

:focus-visible { outline: 2px solid var(--naglasak); outline-offset: 2px; }

/* Ljestvica: h1 1,4 rem, h2 1,1 rem, h3 oznaka skupine; meta 0,86 em. */
h1, main > h1 { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; margin: 8px 0; }
h2 { font-size: 1.1rem; font-weight: 700; line-height: 1.3; }
section h3 {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--blijedo);
  margin: 0 0 8px;
}
.meta { color: var(--blijedo); font-size: 0.86em; margin: 2px 0; }
time, td, .cijena, .brojke, .plocica b { font-variant-numeric: tabular-nums; }

main {
  max-width: 880px;
  margin: 0 auto;
  padding: 8px 16px 48px;
}

/* Zaglavlje: jedan red; rjeđe stranice su u izborniku „Više” (`details`, radi bez skripte). */
.glava { border-bottom: 1px solid var(--rub); }
.glava-red {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 16px;
  height: 44px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.glava .ime { font-weight: 700; color: var(--tekst); text-decoration: none; white-space: nowrap; }
.glava nav { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.glava nav a, .glava summary {
  color: var(--blijedo);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.glava nav a[aria-current="page"], .glava summary.tu, .glava details[open] summary { color: var(--tekst); }
.glava .usko { display: block; }
.glava .siroko { display: none; }
@media (min-width: 640px) {
  .glava .usko { display: none; }
  .glava .siroko { display: inline; }
}

details.izbornik > summary { list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; }
details.izbornik > summary::-webkit-details-marker { display: none; }

details.vise { position: relative; }
details.vise .popis {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  z-index: 20;
  min-width: 190px;
  display: grid;
  gap: 2px;
  padding: 6px;
  background: var(--plosa);
  border: 1px solid var(--rub);
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
}
details.vise .popis a, details.vise .popis .tko { padding: 7px 10px; border-radius: 6px; color: var(--tekst); }
details.vise .popis a:hover { background: var(--plosa-oznake); }
details.vise .popis a[aria-current="page"] { background: var(--naglasak-blago); }
details.vise .popis .tko { color: var(--blijedo); border-top: 1px solid var(--rub); margin-top: 4px; padding-top: 9px; }
details.vise .popis form { margin: 0; }
details.vise .popis button { width: 100%; text-align: left; }

/* Polja i gumbi: jedna obitelj gumba po ulozi (glavni, obični, opasno, tiho). */
button, select, input, textarea {
  font: inherit;
  color: var(--tekst);
  background: var(--plosa);
  border: 1px solid var(--rub);
  border-radius: 6px;
  padding: 7px 10px;
  max-width: 100%;
}
button, .gumb {
  display: inline-block;
  font: inherit;
  line-height: 1.3;
  color: var(--tekst);
  background: var(--plosa);
  border: 1px solid var(--rub);
  border-radius: 6px;
  padding: 7px 12px;
  text-decoration: none;
  cursor: pointer;
}
.gumb.glavni, button.glavni {
  background: var(--naglasak);
  border-color: var(--naglasak);
  color: var(--na-naglasku);
  font-weight: 600;
}
.gumb.opasno, button.opasno { color: var(--crveno); border-color: var(--crveno); }
.gumb.tiho, button.tiho { background: none; border-color: transparent; color: var(--blijedo); }
button:disabled { opacity: 0.4; cursor: default; }

.napomena {
  background: var(--plosa-oznake);
  border-left: 4px solid var(--zuto);
  padding: 8px 12px;
  border-radius: 6px;
}

/* Brojke današnjeg dana: svaka je filtar; na mobitelu se red pomiče sam, ne stranica. */
.danas {
  display: flex;
  gap: 8px;
  margin: 0 0 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.danas::-webkit-scrollbar { display: none; }
.plocica {
  flex: 1 0 auto;
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 12px;
  border: 1px solid var(--rub);
  border-radius: 8px;
  color: var(--blijedo);
  font-size: 0.86em;
  text-decoration: none;
  white-space: nowrap;
}
.plocica b { color: var(--tekst); font-size: 1.05rem; font-weight: 700; }
a.plocica:hover, a.plocica.aktivna { border-color: var(--naglasak); background: var(--naglasak-blago); }

/* Pregled pretraga (ciklus 47): na mobitelu sklopljen redak ispod pločica, na računalu
   pločice u jednom retku. Rastvoren se otvara u toku stranice, ne preko nje. */
.pregled-pretraga {
  border: 1px solid var(--rub);
  border-radius: 8px;
  margin: 0 0 6px;
  font-size: 0.9rem;
}
.pregled-pretraga summary {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 3px 12px;
  color: var(--blijedo);
}
.pregled-pretraga summary b { color: var(--tekst); }
.pregled-pretraga summary .strelica { margin-left: auto; }
.pregled-pretraga ul, .pregled-siroko { list-style: none; margin: 0; padding: 0; }
.pregled-pretraga li a, .pregled-siroko li a {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 12px;
  border-top: 1px solid var(--rub);
  color: var(--tekst);
  text-decoration: none;
}
.pregled-pretraga li a > span:last-child, .pregled-siroko li a > span:last-child {
  color: var(--blijedo);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.pregled-pretraga .tiha, .pregled-siroko .tiha { color: var(--blijedo); font-size: 0.86em; font-weight: 400; }
.pregled-siroko { display: none; }
@media (min-width: 640px) {
  .pregled-pretraga { display: none; }
  .pregled-siroko { display: flex; gap: 8px; margin: 0 0 6px; overflow-x: auto; scrollbar-width: none; }
  .pregled-siroko li { flex: 1 0 auto; }
  .pregled-siroko li a {
    flex-direction: column;
    gap: 0;
    padding: 3px 12px;
    border: 1px solid var(--rub);
    border-radius: 8px;
    font-size: 0.9rem;
  }
  .pregled-siroko li a > span:first-child { font-weight: 600; }
  .pregled-siroko li a:hover { border-color: var(--naglasak); background: var(--naglasak-blago); }
}

/* Stranica oglasa (ciklus 47): poruka nalaza sklopljena, tuđe pretrage po jedan redak. */
details.poruka-nalaza-sklop summary { cursor: pointer; color: var(--blijedo); font-weight: 600; }
details.poruka-nalaza-sklop[open] summary { margin-bottom: 8px; }
.po-pretrazi ul.prekrseni { margin: 2px 0; padding-left: 20px; }
.ne-pripada, .ne-prolazi { color: var(--blijedo); margin: 8px 0; }
.ne-pripada span, .ne-prolazi span { color: var(--tekst); }
.stavka .na-njuskalu { margin-top: 6px; }

/* Zašto nije došao (ciklus 21). */
.zasto {
  display: flex;
  gap: 8px;
  margin: 0 0 6px;
}
.zasto input { flex: 1 1 auto; min-width: 0; }
.zasto button { flex: 0 0 auto; }

/* Čipovi filtara: izbor je link s punim upitom, pa rade bez skripte i bez „Prikaži”.
   Na mobitelu je red čipova svoj klizač, a otvoren popis visi ispod cijelog reda
   (blok `.filtri` mu je okvir), pa ga klizač ne reže i ne izlazi preko ruba ekrana. */
nav.filtri { position: relative; margin: 0 0 6px; }
/* Obrazac s izborom (pojeftinjenja): polja u redu koji se lomi. */
form.filtri { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
form.filtri select { flex: 1 1 140px; min-width: 0; }
.cipovi {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.cipovi::-webkit-scrollbar { display: none; }
.cip-filtra {
  flex: none;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--rub);
  border-radius: 999px;
  background: var(--plosa);
  font-size: 0.9em;
  white-space: nowrap;
}
.cip-filtra summary { padding: 5px 12px; }
.cip-filtra .vrijednost {
  display: inline-block;
  max-width: 13em;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
}
.cip-filtra .strelica { color: var(--blijedo); }
.cip-filtra.aktivan { background: var(--naglasak-blago); border-color: var(--naglasak); font-weight: 600; }
.cip-filtra.aktivan summary { padding-right: 4px; }
.cip-filtra .makni { padding: 5px 12px 5px 6px; text-decoration: none; font-weight: 700; }
.cip-filtra ul {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 20;
  list-style: none;
  margin: 0;
  padding: 6px;
  display: grid;
  gap: 2px;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--plosa);
  border: 1px solid var(--rub);
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
  white-space: normal;
  font-weight: 400;
}
.cip-filtra ul a { display: block; padding: 7px 10px; border-radius: 6px; color: var(--tekst); text-decoration: none; }
.cip-filtra ul a:hover { background: var(--plosa-oznake); }
.cip-filtra ul a[aria-current] { background: var(--naglasak-blago); font-weight: 600; }
.cip-filtra li.legenda-izbora { padding: 6px 10px 2px; margin-top: 4px; border-top: 1px solid var(--rub); color: var(--blijedo); font-size: 0.86em; }
@media (min-width: 640px) {
  .cipovi { flex-wrap: wrap; overflow: visible; }
  .cip-filtra { position: relative; }
  .cip-filtra ul { right: auto; min-width: 220px; width: max-content; max-width: 420px; }
}

/* Feed: redci s crtom, grupirani po zagrebačkom danu. */
.feed { display: grid; }
/* Naslov dana s tri i više brojki lomi se u dva retka na 390 px, pa su razmaci
   iznad prvog retka feeda tijesni da on i tada počne unutar 220 px (Cilj 41). */
h2.dan, h3.dan {
  font-size: 0.8rem;
  line-height: 1.25;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--blijedo);
  margin: 0;
  padding: 12px 0 4px;
  border-bottom: 1px solid var(--rub);
}
h2.dan .ime-dana, h3.dan .ime-dana { color: var(--tekst); }
.feed > h2.dan:first-child, .feed > h3.dan:first-child { padding-top: 4px; }

.stavka h2 { font-size: 1rem; font-weight: 600; margin: 0 0 1px; line-height: 1.3; }
.stavka h2 a { color: var(--tekst); text-decoration: none; }
.stavka p { margin: 1px 0; }
.stavka .vrsta, .stavka .meta { color: var(--blijedo); font-size: 0.86em; }
.stavka .dogadaj { font-size: 0.86em; }
.stavka .slika {
  display: block;
  border-radius: 6px;
  background: var(--plosa-oznake);
  overflow: hidden;
}
.stavka .slika img { width: 100%; height: 100%; object-fit: cover; display: block; }

.stavka.u-feedu {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 4px 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rub);
  align-items: start;
}
/* Sličica drži oba retka (tekst i ishod), da kratak redak nema rupu ispod teksta. */
.stavka.u-feedu .slika { width: 56px; aspect-ratio: 1; border-radius: 5px; grid-row: 1 / span 2; }
.stavka.u-feedu .tekst { min-width: 0; }
.stavka.u-feedu .meta-redak { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stavka.u-feedu .ishod {
  grid-column: 2;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 10px;
}
.stavka .cijena { font-weight: 600; white-space: nowrap; }
/* Iznos se ne lomi od jedinice („4.167 / €/m²”), kao u pojeftinjenjima. */
.brojke .cijela { white-space: nowrap; }
/* Stupac ishoda (ciklus 47): točka ili crvena prekršena vrijednost, pa €/m² zadnji.
   Dijelovi se ne lome iznutra, a lome se među sobom; dugačka vrijednost (49 znakova
   na produkciji) reže se `text-overflow`, cijela je u `title`. */
.stavka .presuda { min-width: 0; max-width: 100%; }
.stavka .presuda .dio { white-space: nowrap; }
.stavka .presuda .m2 { color: var(--blijedo); font-size: 0.86em; font-variant-numeric: tabular-nums; }
.krsi {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  color: var(--crveno);
  font-size: 0.86em;
  font-weight: 600;
}
.krsi .granica { color: var(--blijedo); font-weight: 400; }
/* Dosad najniža (pad) ili cijena ranijeg broja (ponovna objava). */
.stavka .stara { text-decoration: line-through; color: var(--blijedo); font-weight: 400; }
.tocka { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8em; font-weight: 600; white-space: nowrap; }
.tocka::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.tocka.javljen { color: var(--naglasak); }
.tocka.odbijen, .tocka.tiha { color: var(--blijedo); }
.tocka.pad, .tocka.nije-poslan { color: var(--zuto); }
/* Odbijen je prigušen, ali čitljiv: naslov, cijena i sličica; razlog ostaje pune boje. */
.stavka.prigusen h2 a, .stavka.prigusen .cijena { color: var(--blijedo); }
.stavka.prigusen .slika img { opacity: 0.7; }
@media (min-width: 640px) {
  .stavka.u-feedu { grid-template-columns: 64px minmax(0, 1fr) auto; }
  .stavka.u-feedu .slika { width: 64px; grid-row: 1; }
  .stavka.u-feedu .ishod {
    grid-column: 3;
    grid-row: 1;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    gap: 4px;
    max-width: 20rem;
  }
}

/* Vrh stranice oglasa: isti makro, pun redak s okvirom i pilulom ishoda. */
.stavka:not(.u-feedu) {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 12px;
  background: var(--plosa);
  border: 1px solid var(--rub);
  border-radius: 8px;
  padding: 10px;
}
.stavka:not(.u-feedu) .slika { width: 112px; aspect-ratio: 4 / 3; }
@media (min-width: 640px) {
  .stavka:not(.u-feedu) { grid-template-columns: 180px minmax(0, 1fr); }
  .stavka:not(.u-feedu) .slika { width: 180px; }
}

.oznaka {
  display: inline-block;
  font-size: 0.8em;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 999px;
  line-height: 1.5;
  background: var(--plosa-oznake);
}
.oznaka.javljen { color: var(--naglasak); }
.oznaka.odbijen { color: var(--crveno); }
.oznaka.nije-poslan { color: var(--zuto); }
.oznaka.presuda-da { color: var(--zeleno); }
.oznaka.presuda-ne { color: var(--crveno); }

.dalje, .natrag, .link { margin: 14px 0; }
.starije { font-weight: 600; }
.prazno { color: var(--blijedo); }

section { margin-top: 22px; }

.galerija {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}
@media (min-width: 640px) {
  .galerija { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.galerija figure { margin: 0; position: relative; }
.galerija img, .galerija .bez-fotke {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
  background: var(--plosa-oznake);
}
.galerija figcaption {
  position: absolute;
  top: 6px;
  left: 6px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0 7px;
  border-radius: 999px;
}

.poruka, .opis {
  white-space: pre-line;
  background: var(--plosa);
  border: 1px solid var(--rub);
  border-radius: 8px;
  padding: 10px 12px;
}

.neprovjereni { color: var(--blijedo); }

.polja {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 4px 12px;
  margin: 0;
  background: var(--plosa);
  border: 1px solid var(--rub);
  border-radius: 8px;
  padding: 10px 12px;
}
.polja dt { color: var(--blijedo); }
.polja dd { margin: 0; }

.cijene { width: 100%; border-collapse: collapse; background: var(--plosa); }
.cijene th, .cijene td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--rub); }
.cijene th { color: var(--blijedo); font-weight: 600; }

.prijava {
  max-width: 340px;
  margin: 18vh auto 0;
  display: grid;
  gap: 10px;
}
.prijava h1 { margin: 0 0 6px; }
.greska { color: var(--crveno); margin: 0; }
.upozorenje { color: var(--zuto); margin: 0; }

/* Pretrage (ciklus 19). */

.vrh-pretraga { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.vrh-pretraga h1 { margin: 8px 0; }

.problemi ul { margin: 4px 0 0; padding-left: 20px; }
.problemi h3 { margin: 0; }
.problemi h2 { margin: 0; font-size: 0.95rem; }

/* Popis pretraga: redak je link na stranicu pretrage, strelice su pored njega (ciklus 42). */
ul.popis-pretraga { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 8px; }
li.redak-pretrage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  background: var(--plosa);
  border: 1px solid var(--rub);
  border-radius: 8px;
  min-width: 0;
}
a.redak-link {
  display: grid;
  gap: 2px;
  align-self: stretch;
  padding: 10px 4px 10px 12px;
  color: var(--tekst);
  text-decoration: none;
  min-width: 0;
}
a.redak-link .ime { font-weight: 600; line-height: 1.3; }
a.redak-link:hover .ime { color: var(--naglasak); }
form.strelice { display: grid; margin: 0; padding-right: 2px; }
form.strelice button { min-width: 44px; min-height: 44px; padding: 0; border-color: transparent; background: none; font-size: 1.05rem; color: var(--blijedo); }
.oznaka.zamjena-oznaka { color: var(--naglasak); }

/* Zapisnik izmjena popisa (ciklus 46): unos je dva retka, vrijeme i tko, pa pretraga i radnja. */
ol.zapisnik { list-style: none; padding: 0; margin: 8px 0 0; }
ol.zapisnik li { border-top: 1px solid var(--rub); padding: 6px 0; overflow-wrap: anywhere; }
ol.zapisnik li p { margin: 2px 0; }

/* Stranica pretrage: odjeljci redom, svaki sa svojim obrascem (ciklus 42). */
section.odjeljak { border-top: 1px solid var(--rub); margin-top: 14px; padding-top: 2px; }
section.odjeljak h2 { margin: 8px 0 4px; }
section.odjeljak ul { margin: 2px 0; padding-left: 20px; }
.objasnjenje { color: var(--blijedo); font-size: 0.875rem; }
.oznaka.glasna { color: var(--naglasak); }
.oznaka.tiha { color: var(--blijedo); }
.ime-filtra { font-weight: 500; }
small.nestaje { color: var(--zuto); }
.zamjena {
  border-left: 4px solid var(--naglasak);
  background: var(--plosa-oznake);
  border-radius: 6px;
  padding: 6px 10px;
  margin: 6px 0;
}
.zamjena p { margin: 0 0 6px; }
.zamjena form { margin: 0; }

form.ukus { display: grid; gap: 4px; margin: 10px 0; }
form.ukus label { font-size: 0.875rem; color: var(--blijedo); }
textarea { width: 100%; line-height: 1.4; resize: vertical; }
form.ukus button { justify-self: start; }
form.pad { display: grid; gap: 4px; margin: 10px 0; }
form.pad .polja-pada { display: grid; grid-template-columns: minmax(0, max-content) 6em; justify-content: start; gap: 4px 8px; align-items: center; }
form.pad label { font-size: 0.875rem; color: var(--blijedo); }
form.pad input { width: 100%; }
form.pad button { justify-self: start; }

.radnje { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0 4px; }
.radnje form { margin: 0; display: flex; gap: 6px; }
details.url summary { color: var(--blijedo); font-size: 0.875rem; cursor: pointer; }
code { font-size: 0.8125rem; word-break: break-all; }

.vrste { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.vrste a {
  padding: 5px 10px;
  border: 1px solid var(--rub);
  border-radius: 999px;
  text-decoration: none;
  background: var(--plosa);
}
.vrste a[aria-current] { background: var(--naglasak); color: var(--na-naglasku); border-color: var(--naglasak); }

form.nova section, section.link { margin-top: 14px; }
form.nova h3, section.link h3 { margin: 0 0 6px; }
.filtar { display: grid; gap: 4px; margin: 8px 0; }
.raspon { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.raspon input, .raspon select, .filtar select { width: 100%; min-width: 0; }
.kvacice { display: grid; gap: 2px; }
label.kvacica { display: flex; gap: 8px; align-items: baseline; }
details.ostali { margin-top: 8px; }
details.ostali summary { cursor: pointer; font-weight: 500; }
fieldset.javljanje { border: 1px solid var(--rub); border-radius: 8px; margin: 12px 0; display: grid; gap: 4px; }
section.link { display: grid; gap: 6px; border: 1px solid var(--rub); border-radius: 8px; padding: 10px 12px; background: var(--plosa-oznake); }
section.link input[type=url] { width: 100%; }

.lokacije input[type=search] { width: 100%; margin-top: 6px; }
.odabrane { display: flex; flex-wrap: wrap; gap: 6px; }
.cip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--plosa-oznake);
  border-radius: 999px;
  padding: 2px 4px 2px 10px;
  font-size: 0.875rem;
  max-width: 100%;
}
.cip .makni { border: none; background: none; padding: 0 6px; }
.ponuda { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 2px; }
.ponuda button { width: 100%; text-align: left; }

/* Uređivač kriterija (ciklus 20). */
ul.ponuda-polja { padding-left: 20px; display: grid; gap: 6px; }
form.kriterij fieldset { border: 1px solid var(--rub); border-radius: 8px; margin: 12px 0; display: grid; gap: 4px; }
form.kriterij label.broj { display: block; font-size: 0.875rem; color: var(--blijedo); margin-top: 8px; }
form.kriterij input[name=broj] { width: 100%; margin: 4px 0 8px; }
table.ucinak td, table.ucinak th { white-space: nowrap; }
ul.primjeri { padding-left: 20px; display: grid; gap: 6px; }
ul.primjeri li, ul.neprovjereni li { overflow-wrap: anywhere; }

/* Zašto nije došao (ciklus 21). */
.po-pretrazi {
  background: var(--plosa);
  border: 1px solid var(--rub);
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 8px;
  overflow-wrap: anywhere;
}
.po-pretrazi p { margin: 2px 0; }
.po-pretrazi .ime { font-weight: 500; }
.po-pretrazi .vrsta { color: var(--blijedo); font-weight: 400; font-size: 0.875rem; }
.po-pretrazi .vrsta-glasna { color: var(--naglasak); }
.po-pretrazi[data-ishod="nevidjen"] .recenica { color: var(--blijedo); }
.noviji {
  background: var(--plosa-oznake);
  border-left: 4px solid var(--naglasak);
  padding: 8px 12px;
  border-radius: 6px;
}

/* Oznaka okoline (ciklus 32): ljubičasta, da se ne miješa s crvenom trakom kvara. */
.okolina {
  max-width: 880px;
  margin: 8px auto 0;
  padding: 6px 12px;
  background: var(--okolina);
  color: #ffffff;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  border-radius: 6px;
}

/* Stanje bota (ciklus 22). */
.traka {
  display: grid;
  gap: 6px;
  max-width: 880px;
  margin: 8px auto 0;
  padding: 0 16px;
}
/* Redak trake nije sav link od ciklusa 45: pojmovi u njemu su gumbi, a gumb u linku je
   neispravan HTML; adminu link „Stanje” stoji na kraju retka. */
.traka .redak-trake {
  margin: 0;
  background: var(--plosa);
  border-left: 4px solid var(--crveno);
  color: var(--crveno);
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 6px;
  overflow-wrap: anywhere;
}
.traka .redak-trake a { color: var(--crveno); }
/* Zdravlje (ciklus 49, prototip `specs/47-prototip.html`): prvi redak kaže radi li sve, pa
   redak po dijelu (`.postavke`, kao Postavke pretrage) i tablice tokova i ispada. */
.prvi-redak { margin: 10px 0 6px; overflow-wrap: anywhere; }
.prvi-redak.sve-u-redu b { color: var(--zeleno); }
.prvi-redak.ne-radi { display: grid; gap: 2px; border-left: 4px solid var(--crveno); padding: 4px 0 4px 10px; }
.prvi-redak.ne-radi p { margin: 0; }
.prvi-redak.ne-radi .uvjet { font-weight: 600; }
.postavke.zdravlje .postavka .ime { flex-basis: 5.5em; }
.postavke.zdravlje .vrijednost { overflow-wrap: anywhere; }
/* Crveni redak ispod vrijednosti (pretraga u kvaru, kvar modela, zastoj): cijela širina. */
.postavka .cijeli { flex: 1 1 100%; margin: 2px 0 0; overflow-wrap: anywhere; }
ul.kvarovi { list-style: none; padding: 0; display: grid; gap: 4px; }
ul.kvarovi li.kvar { border-left: 4px solid var(--crveno); padding-left: 10px; }
ul.kvarovi .ime-pretrage { font-weight: 500; }
/* Tablice Zdravlja: tri stupca na 390 px bez vodoravnog pomicanja; prvi stupac se lomi,
   vrijeme (datum i sat) ne. */
table.mala { font-size: 0.9375rem; }
table.mala td:first-child { overflow-wrap: anywhere; }
table.mala td:nth-child(n+2), table.mala th:nth-child(n+2) { text-align: right; }
table.mala th, table.mala .cijelo, table.mala td:nth-child(3) { white-space: nowrap; }
table.tokovi td:nth-child(2) { white-space: nowrap; }
table.mala tr.kvar td:first-child { border-left: 4px solid var(--crveno); }
table.mala .detalj { display: block; font-size: 0.875rem; }
table.mala td .meta { display: block; }

/* Statistika tržišta (ciklus 23). */
table.mjesta, table.tok { font-size: 0.9375rem; overflow-wrap: normal; }
table.mjesta th .meta, table.tok th .meta { display: block; font-weight: 400; }
table.mjesta td:nth-child(n+2), table.mjesta th:nth-child(n+2),
table.tok td:nth-child(n+2), table.tok th:nth-child(n+2) { text-align: right; }
table.mjesta td:nth-child(n+2), table.tok td { white-space: nowrap; }
table.mjesta td .meta, table.tok td .meta { font-size: 0.8125rem; }
table.mjesta tr.dubina-1 td:first-child { padding-left: 18px; }
table.mjesta tr.dubina-2 td:first-child { padding-left: 30px; }
table.mjesta tr.dubina-0 td { font-weight: 600; }
table.mjesta tr.sazet td { font-weight: 400; }
/* Zaglavlje stupaca ostaje vidljivo dok se tablica lista (ciklus 43); zaglavlje weba
   nije ljepljivo, pa je vrh 0. Crta je sjena, jer se rub `th` uz `border-collapse`
   ne lijepi s njim. */
table.mjesta thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--pozadina);
  white-space: nowrap;
  border-bottom: none;
  box-shadow: inset 0 -1px 0 var(--rub);
}
/* Sklopljena naselja (samo `/statistika`): skriva ih CSS uz `html.js` (skripta u
   `<head>`), pa bez JavaScripta tablica je cijela, a s njim nema bljeska ni pomaka. */
.trazi-mjesto, .rastvori { display: none; }
.js .trazi-mjesto { display: block; width: 100%; margin: 4px 0 8px; }
/* Razmak odozgo: kad se gumb prelomi ispod imena, link (18 px) i gumb trebaju 24 px
   sigurne površine (Lighthouse `target-size`, izmjereno 23,6 bez njega). */
.js .rastvori {
  display: inline-block;
  margin: 3px 0 0 4px;
  padding: 2px 6px;
  min-height: 24px;
  border: none;
  background: none;
  color: var(--naglasak);
  font-size: 0.8125rem;
  font-weight: 400;
  white-space: nowrap;
}
.rastvori[aria-expanded="true"] .strelica { display: inline-block; transform: rotate(180deg); }
.js table.sklopivo tr[data-skupina]:not(.otvoren) { display: none; }
/* Traženje: vidljiv je pogodak i njegov predak (i sklopljeno naselje), te skupina koju
   je gumb rastvorio za vrijeme traženja. */
.js table.sklopivo.trazi tbody tr:not(.pogodak) { display: none; }
.js table.sklopivo.trazi tbody tr.pogodak,
.js table.sklopivo.trazi tbody tr[data-skupina].otvoren { display: table-row; }
.premalo { color: var(--blijedo); }
table.tok td.novih { width: 40%; }
.uz-stupac { position: relative; text-align: right; }
.uz-stupac .stupac {
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  background: var(--plosa-oznake);
  border-radius: 3px;
}
.uz-stupac .broj { position: relative; }
table.tok tr.u-tijeku td { color: var(--blijedo); }
ul.pretrage-statistika { padding-left: 20px; display: grid; gap: 6px; }

/* Lijevak (ciklus 24; od ciklusa 49 samo na Pregledu pretrage) i Trošak (Pogon). */
section.lijevak, section.trosak { margin-top: 18px; }
section.lijevak h3, section.trosak h3 { margin: 12px 0 4px; }
/* Tiha pretraga je jedan redak dok se ne rastvori (ciklus 43). */
details.tiha > summary { cursor: pointer; }
details.tiha > summary h2 { display: inline; }
details.tiha > summary > .meta { display: block; margin-left: 18px; }
dl.stepenice dd { overflow-wrap: anywhere; }
table.rezu { font-size: 0.9375rem; }
table.rezu td:nth-child(2), table.rezu th:nth-child(2) { text-align: right; white-space: nowrap; }
table.rad-tjedni td .meta, table.trosak-tablica td .meta { white-space: nowrap; }
/* „listopad 2026.” u jednom retku gura tablicu na 384 px: Safari na 390 px
   s klasičnom trakom za pomicanje (373 px) i telefon od 375 px idu vodoravno. */
table.trosak-mjeseci td:first-child { white-space: normal; }

/* Pojeftinjenja (ciklus 27): tri stupca, cijena u dva retka, da 390 px ne ide vodoravno. */
table.pojeftinjenja { font-size: 0.9375rem; }
table.pojeftinjenja td:first-child { white-space: nowrap; }
table.pojeftinjenja td:nth-child(3), table.pojeftinjenja th:nth-child(3) { text-align: right; }
table.pojeftinjenja td:nth-child(2) { overflow-wrap: anywhere; }
.oznaka.ponovna { color: var(--naglasak); }
/* Iznos se ne lomi usred broja („112.42 5 €”); najniža i nova idu u dva retka. */
table.pojeftinjenja .cijela { white-space: nowrap; }

/* Upute (2026-10-26): tekst za čitanje, isti stupac kao ostatak. */

.upute { max-width: 680px; }
.upute h1 { margin: 8px 0 4px; }
.upute h2 { font-size: 1.1rem; margin: 26px 0 6px; padding-top: 10px; border-top: 1px solid var(--rub); }
.upute h3 { font-size: 0.95rem; margin: 14px 0 4px; }
.upute p, .upute li { line-height: 1.5; }
.upute ul { padding-left: 20px; margin: 4px 0; }
.upute code { background: var(--plosa-oznake); padding: 0 4px; border-radius: 3px; font-size: 0.9em; }
.upute pre { background: var(--plosa); border: 1px solid var(--rub); padding: 8px 10px; overflow-x: auto; font-size: 0.875rem; line-height: 1.4; }
.upute .sadrzaj { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0 0; padding: 0; list-style: none; font-size: 0.9375rem; }

/* Korisnici (ciklus 31): gumb se ne lomi usred riječi; ostatak tablice se lomi kao
   drugdje (globalni `anywhere`), jer ime do 20 znakova, chat i kod nemaju razmaka. */
table.korisnici form, table.kodovi form { margin: 0; }
table.korisnici button, table.kodovi button { white-space: nowrap; }

/* Uživo (ciklus 39): traka „sada”, krug kao vremenska crta (najnoviji gore), brojke dana. */
.sada-redak { font-size: 1.05rem; margin: 4px 0; }
details.krug { background: var(--plosa); border: 1px solid var(--rub); border-radius: 8px; padding: 8px 10px; margin: 8px 0; }
details.krug.u_tijeku { border-left: 4px solid var(--naglasak); }
details.krug.prekinut { border-left: 4px solid var(--crveno); }
details.krug summary { cursor: pointer; font-size: 0.9375rem; }
ol.crta { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 4px; }
/* Samo redci crte (`>`): presude pod karticom su `ul.presude li` i nisu redak crte
   (do ciklusa 43 su i one bile mreža s uskim stupcem pa se lomile riječ po riječ). */
ol.crta > li { display: grid; grid-template-columns: 4.6em minmax(0, 1fr); gap: 6px; font-size: 0.875rem; align-items: baseline; }
ol.crta > li > time { color: var(--blijedo); font-variant-numeric: tabular-nums; }
ol.crta > li > div > p { margin: 0; }
ol.crta > li.dohvat { color: var(--blijedo); }
ul.presude { margin: 2px 0 0; padding-left: 18px; }
table.uska { width: auto; min-width: 50%; margin-top: 8px; font-size: 0.875rem; }
table.uska td { overflow-wrap: normal; }
.uzivo h2, #uzivo-parametri h2 { margin: 0 0 6px; }
p.jos { margin: 6px 0 0; font-size: 0.875rem; }
.krug-redak { font-size: 0.9375rem; }
/* Povijest po satu (ciklus 43): redak sata s crtom, unutra linkovi na krugove. */
details.sat { border-bottom: 1px solid var(--rub); padding: 6px 0; }
#uzivo-povijest h2 { border-bottom: 1px solid var(--rub); padding-bottom: 6px; }
details.sat > summary { cursor: pointer; font-size: 0.9375rem; }
ul.krugovi-sata { list-style: none; margin: 6px 0 2px; padding: 0 0 0 16px; display: grid; gap: 6px; font-size: 0.875rem; }
ul.krugovi-sata a { color: var(--tekst); }
details.sat .prazno { margin: 4px 0 2px 16px; font-size: 0.875rem; }

/* Pojmovi (ciklus 45): riječ u botovom značenju je gumb bez okvira i plohe, točkasto
   podcrtan; dodir otvara oblačić (Popover API, top layer, bez skripte i z-indexa).
   Padding širi dodirnu metu na oko 24 px, a inline element ne mijenja visinu retka.
   Pravila stoje na kraju, da pregaze opće `button` (i `.zasto button`). */
button.pojam {
  display: inline;
  font: inherit;
  line-height: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: inherit;
  background: none;
  border: 0;
  border-radius: 0;
  /* Gumb je u retku atomska kutija, pa bi padding podigao redak: negativna margina ga
     vraća, a dodirna meta ostaje. */
  margin: -3px 0;
  padding: 3px 0;
  max-width: none;
  cursor: help;
  text-decoration: underline dotted var(--blijedo);
  text-underline-offset: 3px;
  -webkit-tap-highlight-color: transparent;
}
/* U zaglavlju stupca gumb stoji sam, bez teksta oko sebe, pa negativna margina samo
   preklopi dva gumba u susjednim retcima („Medijan €/m²” i „srednja polovina”):
   Lighthouse `target-size` (accessibility 96, /popravi ciklusa 45). */
th button.pojam { margin: 0; }
a.pojam-link { color: inherit; text-decoration: underline dotted var(--blijedo); text-underline-offset: 3px; }
/* Bez Popover API-ja (iOS < 17) `:popover-open` je nepoznat, pa drugo pravilo otpada i
   tekst ostaje skriven; s njim UA stil (`width: fit-content`, `margin: auto`) se pregazi,
   jer je na 390 px prelio desni rub. Uz dno ekrana na svim širinama. */
.oblacic { display: none; }
.oblacic:popover-open {
  display: block;
  position: fixed;
  inset: auto 16px 16px 16px;
  width: auto;
  height: auto;
  margin: 0;
  max-width: calc(100% - 32px);
  max-height: 40vh;
  overflow: auto;
  padding: 10px 14px;
  background: var(--plosa);
  color: var(--tekst);
  border: 1px solid var(--rub);
  border-radius: 8px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
}
@media (min-width: 640px) {
  .oblacic:popover-open { max-width: 560px; margin: 0 auto; }
}
p.legenda { color: var(--blijedo); font-size: 0.86em; margin: 6px 0; }
/* Rječnik i legenda na /upute. */
.upute dl.rjecnik { margin: 8px 0; }
.upute dl.rjecnik dt { font-weight: 700; margin-top: 12px; scroll-margin-top: 12px; }
.upute dl.rjecnik dd { margin: 2px 0 0; line-height: 1.5; }
.upute ul.legenda-popis li { margin: 4px 0; }
/* Povijest cijene: redak ovog broja kad nekretnina ima više brojeva (pravilo je falilo). */
table.cijene tr.ovaj td { font-weight: 700; }

/* Stranica pretrage s podtabovima (ciklus 48, prototip `specs/47-prototip.html`). */
nav.podtabovi {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--rub);
  margin: 10px 0 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
nav.podtabovi::-webkit-scrollbar { display: none; }
nav.podtabovi a {
  padding: 8px 10px;
  color: var(--blijedo);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
}
nav.podtabovi a[aria-current] { color: var(--tekst); border-bottom-color: var(--naglasak); }
nav.podtabovi a.van { margin-left: auto; color: var(--naglasak); }
/* Gumb koji izgleda kao link: male radnje u retku (makni, učini tihom). Visina 24 px drži
   Lighthouse `target-size`. */
button.veza {
  background: none;
  border: none;
  padding: 2px 0;
  min-height: 24px;
  color: var(--naglasak);
  font-weight: 600;
  font-size: 0.9em;
  cursor: pointer;
}
button.veza.opasno { color: var(--crveno); }
section.odjeljak ul.kriteriji.kratki { list-style: none; padding: 0; margin: 4px 0 8px; display: grid; }
ul.kriteriji.kratki li { padding: 6px 0; border-bottom: 1px solid var(--rub); }
ul.kriteriji.kratki .redak-kriterija { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
ul.kriteriji.kratki .redak { min-width: 0; overflow-wrap: anywhere; }
.male-radnje { display: flex; gap: 14px; align-items: baseline; white-space: nowrap; font-size: 0.9em; }
.male-radnje a { text-decoration: none; font-weight: 600; display: inline-block; padding: 2px 0; min-height: 24px; }
.male-radnje form { margin: 0; }
/* Javljanje: redak po postavci (ime, vrijednost, jedna radnja); otvoren obrazac pada je
   cijeli redak ispod. */
.postavke { display: grid; margin: 4px 0; }
.postavka {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--rub);
}
.postavka .ime { color: var(--blijedo); flex: 0 0 6.5em; }
.postavka .vrijednost { flex: 1 1 8em; min-width: 0; }
.postavka .radnja { margin: 0 0 0 auto; text-align: right; }
.postavka details.radnja > summary { color: var(--naglasak); font-weight: 600; font-size: 0.9em; cursor: pointer; list-style: none; min-height: 24px; }
.postavka details.radnja > summary::-webkit-details-marker { display: none; }
.postavka details.radnja[open] { flex-basis: 100%; text-align: left; }
.ukus-pregled {
  white-space: pre-line;
  color: var(--blijedo);
  font-size: 0.9rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 4px 0 8px;
}
details.uredi-ukus > summary { list-style: none; }
details.uredi-ukus > summary::-webkit-details-marker { display: none; }
details.uredi-ukus[open] > summary { margin-bottom: 4px; }
section.odjeljak.kraj { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: baseline; padding-top: 8px; }
section.odjeljak.kraj form { margin: 0; }
table.rezu td:nth-child(3), table.rezu th:nth-child(3) { text-align: right; white-space: nowrap; }
table.rad-tjedni tfoot td { font-weight: 600; border-top: 1px solid var(--rub); }
p.dalje { margin: 8px 0; }
/* Popis pretraga (ciklus 48): crven je samo redak pretrage koja kasni ili je u kvaru. */
li.redak-pretrage.crven { border-color: var(--crveno); border-left-width: 4px; }
p.zadnji-krug { margin: 8px 0 4px; }

/* Feedback (ciklus 50): obrazac, stavke s razgovorom, sličice. Puna slika se otvara
   linkom; sličica je ista slika umanjena CSS-om (zasebnih sličica nema). */
form.feedback-obrazac { display: grid; gap: 4px; margin: 10px 0 18px; }
form.feedback-obrazac label { font-size: 0.875rem; color: var(--blijedo); }
form.feedback-obrazac label.meta { margin-top: 4px; }
form.feedback-obrazac input[type="file"] { width: 100%; }
form.feedback-obrazac button.glavni { justify-self: start; margin-top: 6px; }
form.feedback-obrazac.povlaci { outline: 2px dashed var(--naglasak); outline-offset: 4px; }
ul.izabrane, ul.slike-feedbacka { list-style: none; padding: 0; margin: 6px 0; display: flex; flex-wrap: wrap; gap: 8px; }
ul.izabrane li { display: flex; align-items: center; gap: 2px; }
ul.izabrane img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; border: 1px solid var(--rub); }
ul.izabrane button { min-width: 44px; min-height: 44px; padding: 0; }
a.slika-feedbacka { display: block; line-height: 0; }
a.slika-feedbacka img { width: 96px; height: 96px; object-fit: cover; border-radius: 6px; border: 1px solid var(--rub); background: var(--plosa-oznake); }
article.stavka-feedbacka { border-top: 1px solid var(--rub); padding: 12px 0; scroll-margin-top: 8px; }
/* Riješena je prigušena bojom teksta, ne `opacity` (presedan `.stavka.prigusen`): prozirnost
   cijele stavke spušta `--blijedo` ispod 4,5:1 (2,96 svijetla, 4,11 tamna; Lighthouse, /popravi 50). */
article.stavka-feedbacka.stanje-rijeseno p.tekst { color: var(--blijedo); }
article.stavka-feedbacka.stanje-rijeseno img { opacity: 0.7; }
article.stavka-feedbacka p.tekst, blockquote.tekst { white-space: pre-wrap; margin: 6px 0; }
blockquote.tekst { border-left: 3px solid var(--rub); padding-left: 10px; margin-left: 0; }
ol.razgovor { list-style: none; padding: 0 0 0 12px; margin: 8px 0; border-left: 2px solid var(--rub); }
ol.razgovor li.odgovor { margin: 0 0 8px; }
ol.razgovor li.odgovor[data-uloga="admin"], ol.razgovor li.odgovor[data-uloga="agent"] { border-left: 2px solid var(--naglasak); margin-left: -14px; padding-left: 12px; }
.oznaka.stanje-otvoreno { color: var(--zuto); }
.oznaka.stanje-provjera { color: var(--naglasak); }
.oznaka.stanje-rijeseno { color: var(--zeleno); }
details.dopuna > summary { cursor: pointer; color: var(--naglasak); font-weight: 600; padding: 8px 0; }