/* ATLAS — na GDS-u (novi moduli SAMO na GDS-u). Boje ISKLJUČIVO iz /gds/genesis-tokens.css,
   komponente iz /gds/genesis-ui.css. Ovdje samo RASPORED i stanja kroz tokene — nijedna hex boja. */
*{box-sizing:border-box}
/* [hidden] mora pobijediti klase s display (.spil{display:grid}) — bez ovoga prazan spil prekriva stranicu (Z52 harness, 15.9.2026) */
[hidden]{display:none!important}
body{margin:0;background:var(--boja-pozadina);color:var(--boja-tekst);font-family:var(--font-osnovni);font-size:var(--tekst-m);line-height:1.55;padding-bottom:var(--razmak-6)}
body.spil-otvoren{overflow:hidden}
a{color:var(--boja-akcija)}
code{font-family:var(--font-mono);font-size:.88em;background:var(--boja-pozadina-2);padding:0 4px;border-radius:var(--radijus-s)}
.omot{max-width:1180px;margin:0 auto;padding:0 var(--razmak-4)}
header{position:sticky;top:0;z-index:5;background:var(--boja-pozadina-2);border-bottom:1px solid var(--boja-rub);box-shadow:var(--sjena-1)}
.zag{display:flex;align-items:center;gap:var(--razmak-4);padding:var(--razmak-3) var(--razmak-4);max-width:1180px;margin:0 auto;flex-wrap:wrap}
.marka{font-weight:800;font-size:var(--tekst-l);display:flex;align-items:center;gap:var(--razmak-2);flex-wrap:wrap}
.marka b{color:var(--boja-akcija);font-weight:700}
.pod{color:var(--boja-tekst-3);font-size:var(--tekst-xs);font-family:var(--font-mono)}
.desno{margin-left:auto;display:flex;gap:var(--razmak-2);flex-wrap:wrap}
.svjezina{display:flex;align-items:center;gap:var(--razmak-2);padding:var(--razmak-1) var(--razmak-3);border:1px solid var(--boja-rub);border-radius:var(--radijus-m);font-size:var(--tekst-s)}
.svjezina.ZASTARJELO{border-color:var(--boja-upozorenje);background:var(--boja-upozorenje-podloga)}
.tocka{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none;background:var(--boja-tekst-3)}
.tocka.OK{background:var(--boja-uspjeh)} .tocka.ALARM{background:var(--boja-greska)} .tocka.ZASTARJELO{background:var(--boja-upozorenje)}

.uvod{padding-block:var(--razmak-6) var(--razmak-4)}
h1{font-size:var(--tekst-xl);line-height:1.1;margin:0 0 var(--razmak-3);text-wrap:balance}
.teza{max-width:70ch;color:var(--boja-tekst-2);margin:0 0 var(--razmak-2)}
section{margin-top:var(--razmak-6)}
h2{font-size:var(--tekst-xs);text-transform:uppercase;letter-spacing:.14em;color:var(--boja-tekst-3);margin:0 0 var(--razmak-3);font-weight:600}

/* stub oznake: oblik + boja (ne samo boja) */
.mk{display:inline-block;width:12px;height:12px;border:1.5px solid var(--boja-tekst-3);border-radius:2px;flex:none;vertical-align:middle}
.mk.DA{background:var(--boja-uspjeh);border-color:var(--boja-uspjeh)}
.mk.DJELOMICNO{border-color:var(--boja-upozorenje);background:linear-gradient(135deg,var(--boja-upozorenje) 50%,transparent 50%)}
.mk.NE{border-style:dashed}
.mk.NEPOZNATO{border-color:var(--boja-info);background:repeating-linear-gradient(45deg,var(--boja-info) 0 1.5px,transparent 1.5px 4px)}
.zastarjelo .mk{opacity:.45}

.lijevak{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--razmak-3)}
.lijevak .gds-kartica{padding:var(--razmak-3) var(--razmak-4)}
.lijevak .broj{font-size:var(--tekst-xl);font-weight:800;font-variant-numeric:tabular-nums;line-height:1}
.lijevak .broj small{font-size:var(--tekst-xs);color:var(--boja-tekst-3);font-weight:600}
.legenda{display:flex;flex-wrap:wrap;gap:var(--razmak-2) var(--razmak-4);margin:var(--razmak-3) 0;font-size:var(--tekst-xs);color:var(--boja-tekst-3)}
.legenda span{display:inline-flex;align-items:center;gap:6px}
.matrica{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--razmak-3);margin-bottom:var(--razmak-4)}
.matrica h4{margin:0 0 var(--razmak-1);font-size:var(--tekst-xs);color:var(--boja-tekst-3);font-weight:600}
.red-m{all:unset;box-sizing:border-box;display:grid;grid-template-columns:30px repeat(3,14px) 10px;gap:6px;align-items:center;padding:3px 6px;border-radius:var(--radijus-s);cursor:pointer;width:100%}
.red-m:hover,.red-m:focus-visible{background:var(--boja-pozadina-2);outline:none}
.red-m .i{font-family:var(--font-mono);font-size:var(--tekst-xs);font-weight:600}
.tablica-omot{overflow-x:auto;padding:0}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:var(--tekst-s)}
th,td{text-align:left;padding:var(--razmak-2) var(--razmak-3);border-bottom:1px solid var(--boja-rub);vertical-align:top}
th{font-size:var(--tekst-xs);color:var(--boja-tekst-3);text-transform:uppercase;letter-spacing:.08em}
td.mono{font-family:var(--font-mono);font-size:var(--tekst-xs)}

.segment{display:grid;grid-template-columns:minmax(0,170px) minmax(0,1fr);gap:var(--razmak-5);border-top:2px solid var(--boja-rub);padding-top:var(--razmak-5)}
.seg-slovo{font-size:72px;font-weight:900;line-height:.85;color:var(--boja-akcija)}
.seg-ime{font-weight:700;margin-top:var(--razmak-2)}
.seg-bok{position:sticky;top:90px;align-self:start}
.ideje{display:flex;flex-direction:column;gap:var(--razmak-3)}
.ideja{scroll-margin-top:90px}
.ideja.o3{border-color:var(--boja-akcija);box-shadow:var(--sjena-2)}
.ideja-zag{display:flex;align-items:baseline;gap:var(--razmak-3);flex-wrap:wrap}
.ideja-zag .id{font-family:var(--font-mono);font-weight:700;color:var(--boja-akcija)}
.ideja-zag h3{margin:0;font-size:var(--tekst-l);line-height:1.25;flex:1;min-width:200px;text-wrap:balance}
.ocjena{display:inline-flex;gap:3px}
.ocjena i{width:9px;height:9px;border:1.5px solid var(--boja-akcija);border-radius:1px}
.ocjena i.puna{background:var(--boja-akcija)}
.nosi{margin:var(--razmak-2) 0 0;max-width:72ch}
.polja{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--razmak-3) var(--razmak-5);margin:var(--razmak-3) 0 0}
.polje dt{font-size:var(--tekst-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--boja-tekst-3);margin-bottom:2px}
.polje dd{margin:0;font-size:var(--tekst-s);color:var(--boja-tekst-2)}
.polje.siroko{grid-column:1/-1}
.stubovi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--boja-rub);border:1px solid var(--boja-rub);border-radius:var(--radijus-s);margin-top:var(--razmak-3);overflow:hidden}
.stubovi div{background:var(--boja-povrsina);padding:var(--razmak-2) var(--razmak-3);font-size:var(--tekst-xs);color:var(--boja-tekst-2)}
.stubovi b{display:flex;align-items:center;gap:6px;font-size:var(--tekst-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--boja-tekst);margin-bottom:2px}
.zivo{margin-top:var(--razmak-3);padding-top:var(--razmak-2);border-top:1px dashed var(--boja-rub);display:flex;flex-wrap:wrap;gap:var(--razmak-2);align-items:center;font-size:var(--tekst-xs)}
.cip{font-family:var(--font-mono);font-size:var(--tekst-xs);padding:1px 6px;border:1px solid var(--boja-rub);border-radius:var(--radijus-s);color:var(--boja-tekst-2)}
.cip.PAO,.cip.ALARM{border-color:var(--boja-greska);color:var(--boja-greska);background:var(--boja-greska-podloga)}
.cip.OK,.cip.NIJE_U_KVARU{border-color:var(--boja-uspjeh);color:var(--boja-uspjeh)}
.cip.NEPOZNATO{border-style:dashed;color:var(--boja-info);border-color:var(--boja-info)}
.alarm-sonde{margin-top:var(--razmak-2);font-size:var(--tekst-xs);color:var(--boja-greska);font-family:var(--font-mono)}
.registar{margin-top:var(--razmak-2);font-size:var(--tekst-xs);color:var(--boja-tekst-3)}
.tijek{margin-top:var(--razmak-2);display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:var(--tekst-xs)}

/* spil (slajdovi) */
.spil{position:fixed;inset:0;z-index:50;background:var(--boja-pozadina);display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.spil-vrh,.spil-dno{display:flex;align-items:center;gap:var(--razmak-3);padding:var(--razmak-2) var(--razmak-4);border-bottom:1px solid var(--boja-rub);flex-wrap:wrap}
.spil-dno{border-bottom:0;border-top:1px solid var(--boja-rub)}
.spil-seg{display:flex;gap:4px;flex-wrap:wrap;flex:1}
.spil-seg button{font:inherit;font-size:var(--tekst-xs);background:transparent;color:var(--boja-tekst-2);border:1px solid var(--boja-rub);border-radius:var(--radijus-s);padding:3px 8px;cursor:pointer}
.spil-seg button[aria-current="true"]{background:var(--boja-akcija);color:var(--boja-tekst-na-akciji);border-color:var(--boja-akcija)}
.napredak{flex:1;display:flex;gap:2px;height:6px;min-width:120px}
.napredak i{flex:1;background:var(--boja-rub);border-radius:1px}
.napredak i.gotov{background:var(--boja-akcija-podloga)} .napredak i.sad{background:var(--boja-akcija)} .napredak i.razmak{flex:.4;background:transparent}
.pozornica{overflow-y:auto;padding:var(--razmak-5) var(--razmak-5)}
.slajd{max-width:1180px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;justify-content:center}
.slajd h1{font-size:clamp(32px,6vw,72px)}
.slajd-ideja{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:var(--razmak-6);align-items:start}
.slajd-ideja h2.naslov{font-size:clamp(26px,3.6vw,48px);line-height:1.05;text-transform:none;letter-spacing:0;color:var(--boja-tekst);font-weight:800;margin:var(--razmak-2) 0 var(--razmak-3)}
.slajd-ideja .nosi{font-size:var(--tekst-l);color:var(--boja-tekst)}
.ljestve .korak{display:grid;grid-template-columns:20px minmax(0,1fr);gap:var(--razmak-3);padding-bottom:var(--razmak-3)}
.ljestve .korak .mk{width:20px;height:20px}
.ljestve .korak b{display:block;margin-bottom:2px}
.ljestve .korak p{margin:0;font-size:var(--tekst-s);color:var(--boja-tekst-2)}
.seg-slajd{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--razmak-6);align-items:center}
.seg-slajd .seg-slovo{font-size:clamp(120px,22vw,280px)}
.seg-popis button{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:var(--razmak-3);align-items:center;width:100%;padding:var(--razmak-2);border-bottom:1px solid var(--boja-rub)}
.seg-popis button:hover,.seg-popis button:focus-visible{background:var(--boja-pozadina-2)}
.seg-popis .tri{display:flex;gap:4px}

@media (max-width:820px){
  .segment,.slajd-ideja,.seg-slajd{grid-template-columns:1fr}
  .seg-bok{position:static;display:flex;align-items:flex-end;gap:var(--razmak-3)}
  .seg-slovo{font-size:56px}
  .polja,.stubovi,.lijevak{grid-template-columns:1fr}
  .matrica{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}