:root{
  --beton:#d7dad4; --papir:#fafaf7; --tinta:#16191b; --olovka:#5c6560;
  --linija:#c0c5bc; --plava:#2a5da8; --metar:#f5c518;
  --ok:#2e7d4f; --upoz:#b7730f; --los:#bf3a2b;
  --naslov:"Barlow Condensed",Impact,sans-serif;
  --tekst:"Inter",system-ui,sans-serif;
  --broj:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--beton);color:var(--tinta);font-family:var(--tekst);
     font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased}

/* zaglavlje — traka kao drveni metar */
.traka{background:var(--metar);border-bottom:2px solid var(--tinta);position:relative;padding:16px 20px 22px}
.traka h1{font-family:var(--naslov);font-size:clamp(26px,5vw,42px);letter-spacing:.02em;
          text-transform:uppercase;margin:0;line-height:.95}
.traka p{margin:4px 0 0;font-size:13px;font-weight:500;max-width:64ch}
.traka::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;
  background-image:repeating-linear-gradient(to right,var(--tinta) 0 1px,transparent 1px 10px);opacity:.55}

/* izbornik kalkulatora */
.izbornik{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.izbornik button{font-family:var(--naslov);text-transform:uppercase;letter-spacing:.05em;
  font-size:13px;padding:6px 13px;background:transparent;color:var(--tinta);
  border:1.5px solid var(--tinta);border-radius:2px;cursor:pointer}
.izbornik button[aria-current=true]{background:var(--tinta);color:var(--metar)}
.izbornik button:hover{background:rgba(0,0,0,.12)}

.omot{max-width:1240px;margin:0 auto;padding:20px}
.mreza{display:grid;grid-template-columns:340px minmax(0,1fr);gap:20px;align-items:start}
@media(max-width:900px){.mreza{grid-template-columns:1fr}}

.ploca{background:var(--papir);border:1px solid var(--linija);border-radius:2px;padding:16px}
.ploca + .ploca{margin-top:16px}
.ploca > h2{font-family:var(--naslov);text-transform:uppercase;letter-spacing:.06em;
  font-size:16px;margin:0 0 14px;padding-bottom:8px;border-bottom:1px solid var(--linija);color:var(--olovka)}

.polje{margin-bottom:13px}
.polje > label{display:block;font-size:12px;font-weight:600;letter-spacing:.03em;
  text-transform:uppercase;color:var(--olovka);margin-bottom:4px}
.polje textarea{width:100%;font-family:var(--broj);font-size:14px;line-height:1.45;
  padding:8px 10px;border:1px solid var(--linija);border-radius:2px;background:#fff;
  color:var(--tinta);resize:vertical}
.polje textarea:focus{outline:2px solid var(--plava);outline-offset:1px}
.polje input[type=number],.polje select{width:100%;font-family:var(--broj);font-size:16px;
  padding:8px 10px;border:1px solid var(--linija);border-radius:2px;background:#fff;color:var(--tinta)}
.polje input:focus,.polje select:focus,button:focus-visible{outline:2px solid var(--plava);outline-offset:1px}
.polje label .jed{font-weight:400;text-transform:none;letter-spacing:0;opacity:.75}
.pomoc{font-size:11.5px;color:var(--olovka);margin-top:3px}

.stepper{display:flex;gap:6px}
.stepper input{flex:1;text-align:center}
.stepper button{width:40px;font-family:var(--broj);font-size:18px;background:var(--tinta);
  color:var(--metar);border:none;border-radius:2px;cursor:pointer}
.stepper button:hover{background:var(--plava)}

.kartice{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:1px;background:var(--linija);border:1px solid var(--linija)}
.kartica{background:var(--papir);padding:12px 14px}
.kartica .oznaka{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--olovka);font-weight:600}
.kartica .vrijednost{font-family:var(--broj);font-weight:600;font-size:24px;line-height:1.15;
  margin-top:2px;font-variant-numeric:tabular-nums}
.kartica .jedinica{font-size:13px;color:var(--olovka);font-weight:400}
.kartica.istaknuto{background:var(--metar)}
.kartica.istaknuto .oznaka{color:#5a4a00}

.provjere{list-style:none;margin:0;padding:0}
.provjere li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;
  align-items:baseline;padding:7px 0;border-bottom:1px dotted var(--linija);font-size:13.5px}
.provjere li:last-child{border-bottom:none}
.znak{font-weight:700;font-family:var(--broj);text-align:center}
.st-ok .znak{color:var(--ok)} .st-upoz .znak{color:var(--upoz)} .st-los .znak{color:var(--los)}
.provjere .mjera{font-family:var(--broj);font-size:12.5px;color:var(--olovka);
  white-space:nowrap;font-variant-numeric:tabular-nums}
.provjere .opis{color:var(--olovka);font-size:12px;display:block}

.crtez{background:#fff;border:1px solid var(--linija);padding:8px}
.crtez svg{display:block;width:100%;height:auto}

.alati{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.alati button{font-family:var(--naslov);text-transform:uppercase;letter-spacing:.05em;
  font-size:14px;padding:9px 16px;background:var(--tinta);color:var(--papir);
  border:none;border-radius:2px;cursor:pointer}
.alati button:hover{background:var(--plava)}
.napomena{font-size:11.5px;color:var(--olovka);margin-top:18px;padding-top:12px;border-top:1px solid var(--linija)}

@media print{
  /* Na papir ide radni list: mjere, crtež i provjere.
     Upute, česta pitanja, poveznice i izbornici ostaju na ekranu. */
  body{background:#fff;font-size:11pt}
  .traka{background:#fff;border-bottom:1.5px solid #000;padding:0 0 8px}
  .traka::after,.izbornik,.alati,.mrvice,.precaci,.prednosti,
  .trazilica,.nema-rezultata,.podnozje a{display:none}
  .tekst,.uvodnik{display:none}
  .traka h1{font-size:22pt;margin:0}
  .traka p{font-size:9.5pt;max-width:none}
  .omot{padding:0;max-width:none}
  .mreza{grid-template-columns:1fr;gap:10px}
  .ploca{border:1px solid #999;break-inside:avoid;padding:10px 12px;margin-top:10px}
  .ploca > h2{font-size:12pt;margin-bottom:8px}
  .polje{margin-bottom:6px}
  .polje .pomoc{display:none}
  .kartice{grid-template-columns:repeat(4,1fr)}
  .kartica{padding:6px 8px}
  .kartica .vrijednost{font-size:14pt}
  .crtez{break-inside:avoid}
  .crtez svg{max-height:15cm}
  .provjere li{padding:4px 0;font-size:10pt}
  .podnozje{border-top:1px solid #999;margin-top:12px;padding:8px 0;font-size:8.5pt}
  .ispis-zaglavlje{display:block;font-family:var(--broj);font-size:9pt;
    color:#555;margin-bottom:4px}
}

/* ---------- statične stranice ---------- */
.mrvice{font-size:12px;font-weight:600;letter-spacing:.03em;margin-bottom:6px}
.mrvice a{color:inherit}
.tekst{background:var(--papir);border:1px solid var(--linija);border-radius:2px;
  padding:22px 26px;margin-top:16px;max-width:74ch}
.tekst h2{font-family:var(--naslov);text-transform:uppercase;letter-spacing:.05em;
  font-size:19px;margin:26px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--linija)}
.tekst h2:first-child{margin-top:0}
.tekst h3{font-family:var(--naslov);text-transform:uppercase;letter-spacing:.04em;
  font-size:14px;color:var(--olovka);margin:16px 0 6px}
.tekst p{margin:0 0 12px}
.tekst ul{margin:0 0 12px;padding-left:20px}
.tekst li{margin-bottom:5px}
.tekst .jed{color:var(--olovka);font-family:var(--broj);font-size:13px}
.tekst details{border-bottom:1px dotted var(--linija);padding:10px 0}
.tekst details:last-of-type{border-bottom:none}
.tekst summary{cursor:pointer;font-weight:600}
.tekst details p{margin:8px 0 0;color:#333}
.tekst .veze{list-style:none;padding:0}
.tekst .veze li{padding:6px 0;border-bottom:1px dotted var(--linija)}
.uvodnik{margin-top:0;margin-bottom:16px}

.katalog{list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1px;
  background:var(--linija);border:1px solid var(--linija)}
.katalog li{background:var(--papir)}
.katalog a{display:block;padding:12px 14px;text-decoration:none;color:inherit}
.katalog a:hover{background:var(--metar)}
.katalog strong{display:block;font-family:var(--naslov);text-transform:uppercase;
  letter-spacing:.04em;font-size:16px}
.katalog span{display:block;font-size:12.5px;color:var(--olovka);margin-top:2px}

.podnozje{max-width:1240px;margin:24px auto 40px;padding:16px 20px;
  border-top:1px solid var(--linija);font-size:12px;color:var(--olovka)}
.podnozje p{margin:0 0 6px}
@media print{.podnozje,.mrvice{display:none}}


/* ---------- naslovnica ---------- */
.trazilica{margin-bottom:14px}
.trazilica label{display:block;font-family:var(--naslov);text-transform:uppercase;
  letter-spacing:.05em;font-size:15px;color:var(--olovka);margin-bottom:6px}
.trazilica input{width:100%;font-family:var(--tekst);font-size:18px;padding:11px 13px;
  border:1.5px solid var(--tinta);border-radius:2px;background:#fff}
.trazilica input:focus{outline:2px solid var(--plava);outline-offset:1px}
.trazilica .pomoc{margin-top:6px}

.precaci{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.precaci a{font-family:var(--naslov);text-transform:uppercase;letter-spacing:.04em;
  font-size:13px;padding:5px 11px;background:var(--papir);color:var(--tinta);
  border:1px solid var(--linija);border-radius:2px;text-decoration:none}
.precaci a:hover{background:var(--metar);border-color:var(--tinta)}
.precaci a span{color:var(--olovka);font-family:var(--broj);font-size:11px;margin-left:3px}

.prednosti{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1px;background:var(--linija);border:1px solid var(--linija);margin-bottom:16px}
.prednosti div{background:var(--papir);padding:12px 14px;font-size:12.5px;color:var(--olovka)}
.prednosti strong{display:block;font-family:var(--naslov);text-transform:uppercase;
  letter-spacing:.04em;font-size:14px;color:var(--tinta);margin-bottom:3px}

.skupina h2 .broj{font-family:var(--broj);font-size:12px;color:var(--olovka);
  font-weight:400;margin-left:6px}
.katalog a{display:block;padding:11px 14px;text-decoration:none;color:inherit}
.katalog .sto{display:block;font-size:12.5px;color:var(--olovka);margin-top:2px}
.katalog .daje{display:block;font-family:var(--broj);font-size:11px;color:var(--plava);
  margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.katalog li[hidden]{display:none}
.nema-rezultata{background:var(--papir);border:1px solid var(--linija);
  padding:16px;font-size:14px;color:var(--olovka)}

/* ---------- list za ispis ---------- */
.ispis-zaglavlje{display:none}