/* ============================================================
   izlozenost.css — alat „Provera izloženosti" (/izlozenost/)

   Dva sloja, dve predaje:
   • HERO — predaja „predaja-hero-izlozenost" (S127), pravac C
     „traka instrumenta": gore ulaz, dole traka preko cele širine.
     Klase su `hx-*`, modifikator `pc` na sekciji.
   • OSTATAK STRANE — port design_handoff_izlozenost (S126): kartice,
     detalji, ograda, „Šta dalje", statične sekcije, futer. Klase `izl-*`.

   Tokeni su JEDNOM deklarisani, ovde na vrhu, i važe za oba sloja —
   vrednosti su iz S127 predaje (odeljak 7 njenog README-a).
   Telo ≥18px · sve interaktivno ≥44px · bez inline style · bez CDN-a.
   ============================================================ */

body.page-izlozenost{
  --al-bg:#0f0f0d; --al-plate:#141412; --al-plate2:#191917; --al-field:#0a0a09;
  --al-line:#262624; --al-line2:#343430;
  --al-hi:#ece9e3; --al-md:#c8c5be; --al-lo:#a0a09e; --al-mute:#8a8780; --al-faint:#5a5754; --al-mute-text:#8a8780;
  --al-brand:#c0392b; --al-brand-hi:#d44a3a;
  /* crvena kao TEKST: --al-brand/-hi nose i podloge i ivice, pa se ne diraju.
     Tamna uzima --brand-on-dark (#ee4130, S130); svetla ostaje na #b0301f. */
  --al-brand-text:var(--brand-on-dark); --al-brand-soft:rgba(192,57,43,.16);
  --al-accent:#ffd9a8;
  /* akcent nosi i podloge i obrise; tekst ide na -text (svetla tema nize) */
  --al-accent-text:var(--al-accent); --al-ok:#7fa168; --al-steel:#8fa9c4;
  /* semafor — rečnik: Sve je u redu / Potrebna pažnja / Upozorenje / Nedostupno */
  --izl-mirno:#7fa168; --izl-posla:#d9a441; --izl-gori:#c0392b; --izl-nedost:#8a8780;
  --izl-boja:var(--al-line2);
  /* Na vrlo širokim ekranima (4K, ultrawide) stubac raste jednom, do 1440 —
     posle toga blok stoji u sredini umesto da se razvlači. */
  --hx-wrap:1280px;
}
@media (min-width:1700px){ body.page-izlozenost{ --hx-wrap:1440px } }
html{ color-scheme:dark; }
html, body.page-izlozenost{ background:var(--al-bg); }
body.page-izlozenost{ color:var(--al-hi); font-family:var(--font-sans); font-size:18px; line-height:1.6; display:flex; flex-direction:column; min-height:100vh; min-height:100dvh; }
body.page-izlozenost > main#main{ display:flex; flex-direction:column; flex:1 0 auto; }
body.page-izlozenost ::selection{ background:var(--al-brand-soft); color:var(--al-hi); }
body.page-izlozenost a{ color:var(--al-md); }
body.page-izlozenost a:hover{ color:var(--al-brand-text); }

/* status → boja lampice; nasleđuje se na sve unutra */
[data-status="mirno"]{ --izl-boja:var(--izl-mirno); }
[data-status="ima_posla"]{ --izl-boja:var(--izl-posla); }
[data-status="gori"]{ --izl-boja:var(--izl-gori); }
[data-status="nedostupno"]{ --izl-boja:var(--izl-nedost); }

/* Lampica u telu strane (kartice). Hero ima svoju, `hx-lamp`. */
.izl-lamp{ width:10px; height:10px; flex:0 0 auto; background:var(--izl-boja); clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%); }
[data-status="nedostupno"] .izl-lamp{ background:transparent; box-shadow:inset 0 0 0 2px var(--izl-boja); }

.izl-wrap{ max-width:var(--container-wide,1280px); margin:0 auto; padding:0 28px; width:100%; }
@media (max-width:560px){ .izl-wrap{ padding:0 18px; } }

/* ============================================================
   HERO — predaja S127, pravac C „traka instrumenta".
   Sadrži: mono etiketu, okvir, tekst, formu, traku, faze, ćelije
   01–04, pozadinu („digitalni univerzum"), saće, obe teme.
   Jedan stil mono etikete, jedna skala razmaka (8/12/16/24/32/48/64),
   crvena samo na četiri mesta, boja statusa samo u lampici i prečki.
   ============================================================ */

/* ---- jedna mono etiketa za ceo blok ---- */
.hx-lab{font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--al-mute-text);margin:0}
.hx-lamp{width:10px;height:10px;flex:0 0 auto;background:var(--izl-boja);clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}
[data-izl-pan]:not([data-status]) .hx-lamp,.hx-cell:not([data-status]) .hx-lamp{background:transparent;box-shadow:inset 0 0 0 1.4px var(--al-faint)}

/* ---- hero okvir ---- */
.hx[hidden]{display:none}
.hx{position:relative;overflow:hidden;background:var(--al-bg);border-bottom:1px solid var(--al-line);display:flex;align-items:center;min-height:calc(100svh - var(--hdr-h,56px))}
.hx__in{position:relative;z-index:1;width:100%;max-width:var(--hx-wrap);margin:0 auto;padding:48px 28px 40px}
@media (max-width:560px){.hx__in{padding:32px 18px 28px}}

/* ---- tekst ---- */
.hx-kick{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hx-kick::before{content:"";width:6px;height:6px;flex:0 0 auto;background:var(--al-brand);clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}
.hx-kick .sep{color:var(--al-mute-text)}
.hx-h1{margin:24px 0 0;font-weight:600;font-size:clamp(32px,3.4vw,54px);line-height:1.06;letter-spacing:-.028em;color:var(--al-hi);text-wrap:balance}
.hx-h1 em{font-style:normal;color:var(--al-brand-text)}
.hx-lead{margin:16px 0 0;font-size:19px;line-height:1.6;color:var(--al-md);max-width:54ch;text-wrap:pretty}
.hx-lead b{color:var(--al-hi);font-weight:600}

/* ---- forma ---- */
.hx-form{margin:32px 0 0}
.hx-form__lab{display:block;margin:0 0 12px}
.hx-row{display:flex;align-items:stretch;gap:8px;flex-wrap:wrap}
.hx-in{flex:1 1 240px;min-width:0;min-height:58px;padding:0 18px;background:var(--al-field);border:1px solid var(--al-line2);border-left:2px solid var(--al-brand);border-radius:2px;color:var(--al-hi);font-family:var(--font-mono);font-size:21px;letter-spacing:-.01em}
.hx-in::placeholder{color:var(--al-mute-text)}
.hx-in:focus{outline:none;border-color:var(--al-mute);border-left-color:var(--al-brand)}
.hx-go{flex:0 0 auto;min-height:58px;min-width:140px;padding:0 26px;cursor:pointer;background:var(--al-brand);border:1px solid var(--al-brand);border-radius:2px;color:#fff;font-family:var(--font-sans);font-size:17px;font-weight:600;transition:background .15s,border-color .15s}
.hx-go:hover{background:var(--al-brand-hi);border-color:var(--al-brand-hi)}
.hx-go:focus-visible{outline:2px solid var(--al-hi);outline-offset:2px}
.hx-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.hx-note{display:flex;flex-wrap:wrap;gap:0 8px;margin:12px 0 0;font-size:16px;line-height:1.55;color:var(--al-lo)}
/* Ograničenje je činjenica, ne upozorenje: isti red, tiši ton od dve rečenice
   pred njim. Ne sme da izgleda kao da je nešto pošlo naopako. */
.hx-note__lim{color:var(--al-mute-text)}
.hx-err{display:flex;align-items:flex-start;gap:12px;margin:16px 0 0;padding:14px 16px;background:var(--al-plate);border:1px solid var(--al-line2);border-left:2px solid var(--al-brand);border-radius:2px}
.hx-err[hidden]{display:none}
.hx-err__k{flex:0 0 auto;margin-top:3px;color:var(--al-brand-text);font-weight:600;font-size:10.5px}
.hx-err__t{margin:0;font-size:18px;line-height:1.5;color:var(--al-hi)}

/* „Promeni unos" ostaje U TOKU (visibility, ne display) */
.hx-again{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:16px 0 0;visibility:hidden;opacity:0;transition:opacity .22s ease,visibility 0s linear .22s}
.hx-again.on{visibility:visible;opacity:1;transition:opacity .22s ease,visibility 0s}
.hx-again__btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 20px;cursor:pointer;background:none;border:1px solid var(--al-line2);border-radius:2px;color:var(--al-md);font-family:var(--font-sans);font-size:16px;font-weight:600;transition:color .15s,border-color .15s}
.hx-again__btn:hover{color:var(--al-hi);border-color:var(--al-mute)}
.hx-again__btn:focus-visible{outline:2px solid var(--al-brand);outline-offset:2px}
.hx-again__btn span[aria-hidden]{font-family:var(--font-mono);color:var(--al-mute-text)}
.hx-again__n{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--al-mute-text)}

/* ---- tri faze u istoj ćeliji mreže: nulti pomeraj ---- */
.hx-faze{display:grid}
.hx-faza{grid-area:1/1;display:flex;flex-direction:column;opacity:0;visibility:hidden;transition:opacity .22s ease,visibility 0s linear .22s}
.hx-faza[hidden]{display:none}
/* Ulaz i čekanje su niski, a okvir drži visinu najvišeg stanja — zato stoje u
   sredini rezervisane visine umesto da vise o gornju ivicu. */
.hx-faza[data-izl-faza="ulaz"],.hx-faza[data-izl-faza="cekaj"]{justify-content:center}
.hx-faza.on{opacity:1;visibility:visible;transition:opacity .22s ease,visibility 0s}
.hx-faza__k{margin:0 0 14px}
.hx-src{display:flex;gap:8px;flex-wrap:wrap}
.hx-src span{display:inline-flex;align-items:center;gap:9px;padding:8px 13px;background:var(--al-plate2);border:1px solid var(--al-line2);border-radius:2px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--al-md)}
.hx-src i{width:6px;height:6px;flex:0 0 auto;clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}
.hx-src span:nth-child(1) i{background:var(--al-steel)}
.hx-src span:nth-child(2) i{background:#c48a9e}
.hx-src span:nth-child(3) i{background:#93ab7c}
.hx-cekaj{display:flex;align-items:center;gap:13px}
/* Na telefonu traka NE prelazi u fazu čekanja — ostaje na „Ulaz · tri javna
   izvora", a napredak se javlja u redu ispod dugmeta, tamo gde čovek gleda dok
   čeka. Tri javna izvora su tačno ono što se u tom trenutku čita, pa prikaz nije
   ni netačan; da traka nešto radi vidi se po prečkama ćelija, koje pulsiraju.

   Kroz dva pokušaja (Denis, sa telefona, S127): prvo su se poruka ispod dugmeta
   i poruka u traci videle obe na istom ekranu čim je prvi ekran zbijen. Onda sam
   sakrio samo TEKST u traci — i ostala je etiketa sa samom tačkom nad praznim
   okvirom od 236px, što izgleda kao kvar. Sklanja se cela faza, ne njen tekst.

   Živa oblast time prelazi na red ispod dugmeta sama od sebe: skrivena faza je
   `visibility:hidden`, dakle van stabla pristupačnosti, pa poruku izgovara samo
   ono što se vidi. Na širokom ekranu tog reda nema i sve ostaje kako je bilo. */
@media (max-width:1080px){
  .pc.is-cekanje .hx-faza[data-izl-faza="ulaz"]{visibility:visible;opacity:1}
  .pc.is-cekanje .hx-faza[data-izl-faza="cekaj"]{visibility:hidden;opacity:0}
}
.hx-cekaj__dot{width:11px;height:11px;flex:0 0 auto;background:var(--al-accent);clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);animation:hxPuls 1.5s ease-in-out infinite}
@keyframes hxPuls{0%,100%{opacity:.35}50%{opacity:1}}
.hx-cekaj__t{margin:0;font-size:18px;color:var(--al-md)}
.hx-read{display:inline-block;max-width:100%;max-height:2.15em;overflow:hidden;word-break:break-word;overflow-wrap:anywhere;padding-bottom:8px;border-bottom:2px solid var(--al-brand);font-family:var(--font-mono);font-size:clamp(22px,2.6vw,34px);letter-spacing:-.02em;line-height:1.05;color:var(--al-hi)}
.hx-sum__w{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:16px 0 0}
.hx-sum__w .hx-lamp{width:14px;height:14px}
.hx-sum__word{font-size:24px;font-weight:600;letter-spacing:-.018em;line-height:1.1;color:var(--izl-boja)}
.hx-sum__cnt{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--al-lo)}
.hx-sum__t{margin:12px 0 0;font-size:18px;line-height:1.5;color:var(--al-md);text-wrap:pretty}

/* ---- ćelije 01–04 ---- */
.hx-cell{display:block;text-decoration:none;position:relative}
.hx-cell:not([data-status]){--izl-boja:var(--al-line2)}
.hx-cell__bar{display:block;height:3px;background:var(--izl-boja)}
.hx-cell__o{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--al-mute-text)}
.hx-cell__t{display:block;font-size:18px;line-height:1.3;color:var(--al-md)}
.hx-cell__m{display:block;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--al-mute-text)}
.hx-cell__st{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--izl-boja)}
.hx-cell:not([data-status]) .hx-cell__st{color:var(--al-mute-text)}
a.hx-cell:hover .hx-cell__t{color:var(--al-hi)}
a.hx-cell:focus-visible{outline:2px solid var(--al-brand);outline-offset:-2px}

.hx-stat{margin:0;font-family:var(--font-mono);font-size:10.5px;line-height:1.9;letter-spacing:.14em;text-transform:uppercase;color:var(--al-mute-text)}
.hx-stat b{color:var(--al-hi);font-weight:500}
.hx-stat .ok{color:var(--al-ok)}

/* ---- signal nadole (u toku, ne apsolutno) ---- */
.hx-dole{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 14px;text-decoration:none;color:var(--al-mute-text);font-family:var(--font-mono);font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;border:1px solid transparent;border-radius:2px;visibility:hidden;opacity:0;transition:opacity .22s ease,visibility 0s linear .22s,color .15s,border-color .15s}
.hx-dole.on{visibility:visible;opacity:1;transition:opacity .22s ease,visibility 0s,color .15s,border-color .15s}
.hx-dole:hover{color:var(--al-hi);border-color:var(--al-line2)}
.hx-dole:focus-visible{outline:2px solid var(--al-brand);outline-offset:2px}
/* Signal nadole stoji i posle ishoda (Denis, S127): kad nalaz stigne, čovek
   treba negde da bude upućen — dole je objašnjeno šta stavke znače. Posle
   ishoda menja i natpis („Šta ovo znači?") i dobija okvir. */
.hx-dole__t--ishod{display:none}
.hx.is-ishod .hx-dole__t{display:none}
.hx.is-ishod .hx-dole__t--ishod{display:inline}
.hx-dole__t[hidden],.hx-dole__t--ishod[hidden]{display:none}
.hx.is-ishod .hx-dole{color:var(--al-md);border-color:var(--al-line2);background:var(--al-plate2)}
.hx.is-ishod .hx-dole:hover{color:var(--al-hi);border-color:var(--al-mute)}
.hx-dole__s{font-size:14px;color:var(--al-brand-text);animation:hxDole 2.4s ease-in-out infinite}
@keyframes hxDole{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}

/* ---- POZADINA HERO-A: „digitalni univerzum" ----
   1) ZVEZDE (`bg-tacke`) — dve mreže sitnih tačaka različitog takta. Ako su
      tačke zvezde, onda i ploča mora da bude crnja i hladnija nego topli
      #0f0f0d, inače se ne čita kao nebo nego kao šum. Zato uz tačke ide i
      tamnija podloga.
   2) SITNO SAĆE (`bg-sace`) — hairline rešetka istih heksagona kao motiv, samo
      šest puta sitnija, ugašena maskom ka levo i ka ivicama. Veliki cvet je
      onda jedna ćelija ogromne mreže koja izlazi van ekrana.
   Obe mogu zajedno (`bg-tacke bg-sace`). Podrazumevane su zvezde. */
.hx.bg-tacke{background:#08080a}
.hx-mreza{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:none;opacity:.9;transition:opacity .5s ease}
.hx-mreza[hidden]{display:none}
.hx.bg-sace .hx-mreza{display:block}
.hx.bg-sace.is-cekanje .hx-mreza{animation:hxMreza 3.2s ease-in-out infinite}
@keyframes hxMreza{0%,100%{opacity:.55}50%{opacity:1}}
.hx.bg-tacke::before,.hx.bg-tacke::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none}
.hx::before,.hx::after{content:none}
.hx::before{background-image:
  radial-gradient(1.6px 1.6px at 12% 18%,rgba(255,217,168,.55),transparent 60%),
  radial-gradient(1.2px 1.2px at 34% 62%,rgba(255,217,168,.40),transparent 60%),
  radial-gradient(1.8px 1.8px at 58% 28%,rgba(236,233,227,.34),transparent 60%),
  radial-gradient(1.2px 1.2px at 74% 74%,rgba(255,217,168,.34),transparent 60%),
  radial-gradient(1.4px 1.4px at 88% 42%,rgba(143,169,196,.34),transparent 60%),
  radial-gradient(1.1px 1.1px at 22% 86%,rgba(255,217,168,.28),transparent 60%);
  background-size:460px 340px;animation:hxZv1 7.5s ease-in-out infinite}
.hx::after{background-image:
  radial-gradient(1.3px 1.3px at 8% 54%,rgba(236,233,227,.30),transparent 60%),
  radial-gradient(1.7px 1.7px at 46% 12%,rgba(255,217,168,.34),transparent 60%),
  radial-gradient(1.1px 1.1px at 66% 88%,rgba(143,169,196,.30),transparent 60%),
  radial-gradient(1.5px 1.5px at 92% 66%,rgba(255,217,168,.26),transparent 60%),
  radial-gradient(1.2px 1.2px at 78% 8%,rgba(236,233,227,.24),transparent 60%);
  background-size:680px 520px;animation:hxZv2 11s ease-in-out infinite}
@keyframes hxZv1{0%,100%{opacity:.5}50%{opacity:1}}
@keyframes hxZv2{0%,100%{opacity:.85}45%{opacity:.35}}

/* ---- SONDA ---------------------------------------------------
   Sitna sonda preleti gornjim delom ploče jednom u pedesetak sekundi i usput
   odašilje signal — prsten koji se širi i gasi. Telo je heksagon (oblik marke),
   ne crtež letelice. Ide samo uz zvezde, iznad zvezdanog polja a ispod svega
   što se čita; ne hvata pokazivač i ne utiče ni na šta u rasporedu. */
.hx-sonda{position:absolute;top:16%;left:0;z-index:0;pointer-events:none;display:none;width:14px;height:14px}
.hx.bg-tacke .hx-sonda{display:block;animation:hxLet 54s linear infinite}
.hx-sonda__t{position:absolute;inset:0;background:var(--al-accent);opacity:.75;clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);transform:scale(.42)}
.hx-sonda__t::before{content:"";position:absolute;right:100%;top:50%;width:64px;height:1px;margin-top:-.5px;background:linear-gradient(270deg,rgba(255,217,168,.55),rgba(255,217,168,0))}
.hx-sonda__s{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border:1px solid rgba(255,217,168,.55);border-radius:50%;opacity:0;animation:hxSignal 4.5s ease-out infinite}
@keyframes hxLet{
  0%{transform:translate(-8vw,0);opacity:0}
  6%{opacity:.55}
  50%{transform:translate(50vw,26px)}
  92%{opacity:.55}
  100%{transform:translate(108vw,54px);opacity:0}
}
@keyframes hxSignal{0%{transform:scale(.4);opacity:.85}70%{transform:scale(5.5);opacity:0}100%{transform:scale(5.5);opacity:0}}

/* ---- SAĆE KAO INSTRUMENT ----------------------------------
   Motiv više nije ukras: četiri dijagonalne latice su četiri provere
   (01 gore-levo, 02 gore-desno, 03 dole-desno, 04 dole-levo), centralni
   heksagon je ukupan nalaz. Dok provera traje latice pulsiraju redom u
   boji motiva; kad ishod stigne uzimaju boju svog statusa. Spoljni
   heksagoni ostaju hairline — ne boji se ceo crtež, samo cvet. */
.hx-hex{position:absolute;pointer-events:none;max-width:none;aspect-ratio:944/614}
.hx-hex__p polygon,.hx-hex__c polygon{transition:stroke .45s ease,stroke-width .45s ease,fill .45s ease,fill-opacity .45s ease}
.hx-hex__p[data-status] polygon[fill="none"],.hx-hex__c[data-status] polygon[fill="none"]{stroke:var(--izl-boja)}
.hx-hex__p[data-status] polygon[fill="none"]{stroke-width:1.7}
.hx-hex__c[data-status] polygon[fill="none"]{stroke-width:2}
.hx-hex__c[data-status] .hx-hex__w{fill:var(--izl-boja);fill-opacity:.09}
.hx-hex__p[data-status] .hx-hex__w{fill:var(--izl-boja);fill-opacity:.05}
.hx.is-cekanje .hx-hex__p polygon[fill="none"],.hx.is-cekanje .hx-hex__c polygon[fill="none"]{stroke:var(--al-accent)}
.hx.is-cekanje .hx-hex__p,.hx.is-cekanje .hx-hex__c{animation:hxScan 1.8s ease-in-out infinite}
.hx.is-cekanje .hx-hex__p[data-hex="2"]{animation-delay:.22s}
.hx.is-cekanje .hx-hex__p[data-hex="3"]{animation-delay:.44s}
.hx.is-cekanje .hx-hex__p[data-hex="4"]{animation-delay:.66s}
.hx.is-cekanje .hx-hex__c{animation-delay:.88s}
@keyframes hxScan{0%,100%{stroke-opacity:.22}45%{stroke-opacity:1}}

@media (prefers-reduced-motion:reduce){
  .hx.bg-tacke .hx-sonda{display:none}
  .hx::before,.hx::after{animation:none;opacity:.7}
  .hx.bg-sace.is-cekanje .hx-mreza{animation:none}
  .hx.is-cekanje .hx-hex__p,.hx.is-cekanje .hx-hex__c,.pc.is-cekanje .hx-cell__bar{animation:none}
  .hx-faza,.hx-again,.hx-dole{transition:none}
  .hx-cekaj__dot{animation:none;opacity:.8}
  .hx-dole__s{animation:none}
}

/* ============================================================
   PRAVAC C — TRAKA INSTRUMENTA
   Gore samo ulaz (naslov, uvod, veliko polje). Dole, uz donju ivicu
   ploče, traka od četiri segmenta preko cele širine — ista traka
   kasnije nosi i ishod. Panel kao poseban okvir nestaje: hero JESTE
   instrument.
   ============================================================ */
.pc{align-items:stretch;--pc-gut:28px}
/* Traka ide od ivice do ivice ekrana, a njen sadržaj stoji u istom stupcu kao
   tekst iznad — zato .hx__in ovde nema svoje padove nego ih nose deca. Na 4K se
   traka ne pretvara u ostrvo usred praznog ekrana. */
.pc .hx__in{display:flex;flex-direction:column;max-width:none;padding:0}
.pc .hx-top{position:relative;flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;width:100%;max-width:var(--hx-wrap);margin:0 auto;padding:24px 28px 48px}
/* Tekst i forma su uvek IZNAD motiva: motiv je apsolutno pozicioniran, pa bi
   inače crtao preko njih (polje jeste neprozirno, ali linije su prelazile preko
   naslova i dugmeta). */
.pc .hx-top>*:not(.hx-hex){position:relative;z-index:1}
.pc .hx-h1{max-width:20ch}
.pc .hx-lead{max-width:52ch}
.pc .hx-form{max-width:660px}
.pc .hx-in{min-height:66px;font-size:23px}
.pc .hx-go{min-height:66px}
.pc .hx-traka{margin:0;border-top:1px solid var(--al-line2);background:var(--al-plate)}
.pc .hx-traka__g{display:grid;grid-template-columns:minmax(300px,.9fr) minmax(0,1.4fr);align-items:stretch;width:100%;max-width:var(--hx-wrap);margin:0 auto}
.pc .hx-faze{min-height:224px;padding:22px var(--pc-gut);border-right:1px solid var(--al-line)}
.pc .hx-cells{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.pc .hx-cell{padding:22px 20px 20px;border-right:1px solid var(--al-line)}
/* Prva ćelija u redu stoji na istoj vertikali kao naslov, uvod i etiketa faze
   — traka ide do ivice ploče, ali njen sadržaj ne izlazi iz stupca strane. */
.pc .hx-cell:first-child{padding-left:var(--pc-gut)}
.pc .hx-cell:last-child{padding-right:var(--pc-gut)}
.pc .hx-cell:last-child{border-right:0}
.pc a.hx-cell:hover{background:var(--al-plate2)}
.pc .hx-cell__bar{position:absolute;left:0;right:0;top:0;margin:0}
.pc .hx-cell__t{margin:6px 0 0}
.pc .hx-cell__m{margin:6px 0 0}
.pc .hx-cell__st{margin:14px 0 0}
/* Vreme provere ne stoji više u glavi rezimea (bilo je pretrpano) nego u desnom
   uglu podnožja trake, ispod četvrte ćelije. U toku je i pre ishoda — pali se
   `visibility`-jem, pa podnožje ne menja visinu. */
.hx-foot__d{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:flex-end}
.hx-vreme{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--al-mute-text);visibility:hidden;opacity:0;transition:opacity .22s ease,visibility 0s linear .22s}
.hx-vreme.on{visibility:visible;opacity:1;transition:opacity .22s ease,visibility 0s}
.pc .hx-foot{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;width:100%;max-width:var(--hx-wrap);margin:0 auto;padding:14px 28px}
/* Motiv je vezan za gornji deo (ulaz), ne za celu ploču: tako na 4K ostaje uz
   stubac teksta umesto da odluta ka ivici ekrana. Spušten je do donje ivice
   ulaza, pa cvet ulazi u traku — isti predmet nosi i pitanje i odgovor. */
.pc .hx-hex{right:-16%;top:50%;bottom:auto;transform:translateY(-50%);width:62%;opacity:.9}
/* Prazna traka ne sme da bude siva ploča: prečke, brojevi i lampice stoje u
   boji motiva i stepenasto slabe s leva na desno — instrument je spreman,
   a nijedan status još nije izrečen. */
.pc .hx-traka{border-top-color:rgba(255,217,168,.20)}
/* Čitanje stoji u užem stupcu nego u druga dva pravca, pa je i krupnoća manja:
   ime domena od tridesetak znakova staje u jedan red, duže prelama u dva i tu
   se zaustavlja (visina je unapred zauzeta, pa traka ne raste). */
.pc .hx-read{font-size:clamp(19px,1.9vw,26px)}
.pc .hx-cell:not([data-status]) .hx-cell__bar{background:rgba(255,217,168,.34)}
.pc .hx-cell:nth-child(2):not([data-status]) .hx-cell__bar{background:rgba(255,217,168,.26)}
.pc .hx-cell:nth-child(3):not([data-status]) .hx-cell__bar{background:rgba(255,217,168,.19)}
.pc .hx-cell:nth-child(4):not([data-status]) .hx-cell__bar{background:rgba(255,217,168,.13)}
.pc .hx-cell:not([data-status]) .hx-cell__o{color:rgba(255,217,168,.62)}
.pc .hx-cell:not([data-status]) .hx-cell__st{color:var(--al-mute-text)}
.pc .hx-cell:not([data-status]) .hx-lamp{box-shadow:inset 0 0 0 1.4px rgba(255,217,168,.45)}
.pc.is-cekanje .hx-cell__bar{animation:hxBar 1.8s ease-in-out infinite}
.pc.is-cekanje .hx-cell:nth-child(2) .hx-cell__bar{animation-delay:.22s}
.pc.is-cekanje .hx-cell:nth-child(3) .hx-cell__bar{animation-delay:.44s}
.pc.is-cekanje .hx-cell:nth-child(4) .hx-cell__bar{animation-delay:.66s}
@keyframes hxBar{0%,100%{opacity:.3}45%{opacity:1}}
@media (max-width:1080px){
  .pc .hx-traka__g{grid-template-columns:minmax(0,1fr)}
  .pc .hx-faze{border-right:0;border-bottom:1px solid var(--al-line)}
  /* Na užem ekranu motiv ne ide iza teksta nego STOJI — između uvoda i polja,
     da prvi ekran ima tri jasna elementa: naslov, heksagon, polje za proveru.
     Ne vrti se; menja se samo boja (puls dok provera traje, status u ishodu). */
  .pc .hx-hex{position:static;display:block;width:min(320px,76vw);margin:20px auto 22px;opacity:1;transform:none;animation:none}
  /* Na telefonu je motiv objekat, ne vodeni žig: deblji potez, da se ne čita
     kao rupa u prostoru. */
  .pc .hx-hex polygon{stroke-width:2.1}
  .pc .hx-hex circle{r:3.4}
  /* Visina polja od 66px je DESKTOP mera i curila je na telefon: polje je bilo
     66, a dugme pored njega 58 — nesklad koji se vidi. Ovde se izjednačavaju.
     Slova ostaju iznad 16px, inače iOS zumira stranu pri fokusu. */
  .pc .hx-in{min-height:58px;font-size:20px}
}
/* Druga mogućnost za uzak ekran: motiv ostaje IZA teksta (ne u toku), a polje i
   naslov ga pokrivaju jer su iznad njega. Pali se klasom `mob-iza` na telu. */
@media (max-width:1080px){
  .mob-iza .pc .hx-hex{position:absolute;left:50%;top:56%;bottom:auto;right:auto;margin:0;width:106%;opacity:.5;transform:translate(-50%,-50%);animation:none}
}
@media (max-width:760px){
  .pc .hx-cells{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pc .hx-cell:nth-child(2n){border-right:0}
  .pc .hx-cell:nth-child(n+3){border-top:1px solid var(--al-line)}
  .pc .hx-cell:nth-child(2n+1){padding-left:var(--pc-gut)}
  .pc .hx-cell:nth-child(2n){padding-right:var(--pc-gut)}
  /* ⚑ STEPENASTO SLABLJENJE PREČKI VAŽI SAMO U NIZU (Denis, sa telefona, S127).
     Kad su četiri ćelije jedna do druge, pad .34 → .13 s leva na desno čita se
     kao namera. U rasporedu 2×2 gornje dve stoje jedna pored druge u različitoj
     jačini, a donje dve još slabije — i to više ne liči na gradaciju nego na
     grešku u crtanju. Zato su ovde sve četiri iste. */
  .pc .hx-cell:not([data-status]) .hx-cell__bar,
  .pc .hx-cell:nth-child(2):not([data-status]) .hx-cell__bar,
  .pc .hx-cell:nth-child(3):not([data-status]) .hx-cell__bar,
  .pc .hx-cell:nth-child(4):not([data-status]) .hx-cell__bar{background:rgba(255,217,168,.30)}
  .pc .hx-cell:not([data-status]) .hx-cell__o{color:rgba(255,217,168,.58)}
  .pc .hx-cell:not([data-status]) .hx-cell__st{color:var(--al-mute-text)}
}
@media (max-width:560px){
  .pc{--pc-gut:18px}
  /* ⚑ PRVI EKRAN TELEFONA MORA DA STANE IZNAD TABBARA (Denis, S127, sa živog
     telefona). Hero je visok 100svh − heder, ali fiksni tabbar jede još 48px na
     dnu, pa je red ispod dugmeta — onaj koji nosi tok provere i poziv na nalaz —
     završavao ISPOD njega: mereno 65px u nevidljivom. Zato je ceo ulaz zbijen po
     visini: mereno na 375×812, ušteda je 88px i red sada staje sa 23px rezerve.
     Ko menja ove vrednosti, meri ponovo — i to na ekranu sa tabbarom, ne u
     pregledu bez njega. */
  .pc .hx-top{padding:14px 18px 28px}
  .pc .hx-h1{margin-top:16px}
  .pc .hx-lead{margin-top:12px}
  .pc .hx-form{margin-top:0}
  .pc .hx-form__lab{margin-bottom:8px}
  .hx-slot{margin-top:10px}
  .pc .hx-faze{min-height:236px;padding:20px var(--pc-gut)}
  .pc .hx-foot{padding:14px 18px}
  /* Na telefonu ćelije ostaju 2x2: u jednoj koloni traka naraste preko 900px,
     pa se do četvrte provere stiže tek dugim listanjem. */
  .pc .hx-cells{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pc .hx-cell{padding:14px 14px 16px}
  .pc .hx-cell:nth-child(2n+1){padding-left:var(--pc-gut)}
  .pc .hx-cell:nth-child(2n){padding-right:var(--pc-gut);border-right:0}
  .pc .hx-cell:nth-child(n+3){border-top:1px solid var(--al-line)}
  .pc .hx-hex{width:min(238px,64vw);margin:25px auto 25px}
  /* Poziv da se pogledaju rezultati mora da se vidi i posle provere, i na
     telefonu — tamo podnožje trake ide u dva reda, a poziv preko cele širine. */
  .pc .hx-foot{flex-direction:column;align-items:stretch;gap:12px}
  .pc .hx-foot__d{width:100%;justify-content:space-between;gap:12px}
  /* Vreme provere na telefonu ne staje u isti red sa pozivom nadole, pa dobija
     svoj. Red mu je REZERVISAN i dok je prazno (min-height): niska stiže tek sa
     ishodom, pa bi se bez ovoga podnožje produžilo za 29px u trenutku kad nalaz
     stigne — a ništa u hero-u ne sme da promeni visinu (predaja S127, odeljak
     6). Mereno u pregledu na 375px: 128 → 157 bez ovoga, 157 u oba stanja s njim. */
  .pc .hx-vreme{flex:0 0 100%;min-height:1.6em;text-align:right}
}
/* Poziv u podnožju trake vodi na isto mesto kao dugme pored „Proveri", a na
   telefonu su oba u istom kratkom hodu — pa ovaj odlazi (Denis, S127). Na
   širokom ekranu OSTAJE: tamo dugme pored „Proveri" nosi drugi posao
   („Promeni unos"), pa bi bez ovoga poziva nestao jedini put nadole. */
@media (max-width:1080px){
  .pc .hx-dole{display:none}
}

/* --- NIZAK EKRAN: telefon sa trakom pregledača na dnu ----------------------
   Na 812px zbijanje iznad je dovoljno. Na 700px i niže nije — fali još
   četrdesetak piksela, a dalje smanjivanje slova bi probilo kanon (telo 18px).
   Zato ovde odlazi ono što nije informacija: nadnaslov `CP.IZL.01 · IZLOŽENOST
   · JAVNI PODACI` je oznaka sistema, ne odgovor na ijedno pitanje posetioca, i
   na dva reda troši 61px. Uz manji heksagon to je dovoljno da red ispod dugmeta
   stane (mereno na 375×700: 20px rezerve). */
@media (max-width:767px) and (max-height:740px){
  .pc .hx-kick{display:none}
  .pc .hx-h1{margin-top:0;font-size:28px}
  .pc .hx-hex{width:min(190px,52vw);margin:21px auto 21px}
}
/* Najniži ekrani (iPhone SE i slični): motiv se povlači još jednom. Slova se
   NE smanjuju dalje — telo ispod 18px probija kanon, a i besmisleno je štedeti
   na tekstu da bi ostao crtež. Mereno na 375×667: bez ovoga −15px, sa ovim +19. */
@media (max-width:767px) and (max-height:680px){
  .pc .hx-hex{width:min(150px,42vw);margin:19px auto 19px}
  .pc .hx-lead{margin-top:8px}
}

/* --- TASTATURA: tabbar ne sme da pluta iznad nje ---------------------------
   iOS pri otvaranju tastature NE skuplja prozor, pa fiksni element sa dna
   ostane da lebdi preko nje (Denis, sa telefona, S127). Dok se kuca u polje
   tabbar se sklanja — usput oslobodi svojih 48px baš u trenutku kad su
   najpotrebniji. Ne pomera raspored: tabbar je van toka, a donji razmak
   `main`-a ostaje.
   Klasu pali izlozenost.js na focus/blur polja. Prvo je bilo `:has(.hx-in:focus)`
   bez ijedne linije skripte, ali se to NE MOŽE izmeriti u našem pregledu —
   okno nije aktivno, `document.hasFocus()` je false, pa `:focus` ne hvata ni
   kad je polje activeElement. Brana koju ne mogu da isprobam ne ide na telefon. */
@media (max-width:767px){
  body.page-izlozenost.is-kucanje .cp-tabbar{display:none}
}

/* --- MESTO ISPOD DUGMETA: tri stanja, jedna visina -------------------
   Na telefonu prvi ekran staje na dugmetu „Proveri" — traka sa tokom i nalazom
   je ispod pregiba. Zato red ispod dugmeta menja sadržaj po fazi: pre unosa
   objašnjenje šta se šalje, dok provera traje ista poruka toka koja se vidi i
   na širokom ekranu, posle provere poziv na nalaz. Tri stanja stoje jedno preko
   drugog u istoj ćeliji mreže, pa je visina uvek najveća od njih i ništa ne
   poskoči. Na širokom ekranu ostaje samo objašnjenje — tok i nalaz se tamo vide
   u traci, bez listanja. */
.hx-slot{display:grid;margin:12px 0 0}
.hx-slot>*{grid-area:1 / 1;margin:0}
.hx-toku{display:flex;align-items:center;gap:11px;font-size:17px;line-height:1.45;color:var(--al-md)}
.hx-toku__d{width:10px;height:10px;flex:0 0 auto;background:var(--al-accent);clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);animation:hxPuls 1.5s ease-in-out infinite}
/* Treće stanje („Pogledajte nalaz ↓", u boji ukupnog statusa) je uklonjeno u
   S127: poziv na rezultate preselio se u dugme pored „Proveri". Ostala su dva —
   napomena i poruka toka — pa napomena sada ostaje i posle nalaza umesto da
   ustupi mesto. Ako se poziv ikad vrati OVDE, vraća se i gašenje napomene na
   `is-ishod`, i nosi boju statusa (`--izl-boja`), što dugme namerno ne radi. */
.hx-toku{visibility:hidden;opacity:0;transition:opacity .22s ease,visibility 0s linear .22s}
@media (min-width:1081px){ .hx-toku{display:none} }
@media (max-width:1080px){
  .pc .hx-note{transition:opacity .22s ease,visibility 0s linear .22s}
  .pc.is-cekanje .hx-note{visibility:hidden;opacity:0}
  .pc.is-cekanje .hx-toku{visibility:visible;opacity:1;transition:opacity .22s ease,visibility 0s}
  /* Kad nalaz postoji, ceo red ispod dugmeta odlazi (Denis, S127). Napomena
     „ništa se ne skenira i ništa se ne čuva" odgovara na pitanje koje čovek ima
     PRE klika; posle nalaza ne rešava ništa, a poziv na rezultate je preselio u
     dugme iznad. Red se SKLAPA, ne prazni — prazan okvir od pedesetak piksela
     između dugmeta i trake čitao bi se kao da nešto nedostaje.
     Ovo ne pomera prvi ekran: sve iznad reda ostaje na svom mestu, a ispod njega
     na telefonu nema ničega vidljivog — traka počinje tek ispod pregiba.
     NA ŠIROKOM EKRANU SE NE RADI: tamo je `.hx-top` vertikalno centriran, pa bi
     sklapanje reda pomerilo ceo ulaz — a to je upravo ono što se ne sme. */
  .pc.is-ishod .hx-slot{display:none}
}
@media (prefers-reduced-motion:reduce){ .hx-toku__d{animation:none} .hx-toku,.hx-note{transition:none} }

/* --- „PROMENI UNOS" U ISTOM REDU --------------------------------
   Na telefonu je desno od crvenog dugmeta ionako prazno, pa tu stoji povratak na
   novu proveru. Mesto mu je rezervisano i pre provere (visibility), tako da
   crveno dugme ne menja ni širinu ni položaj kad se ishod pojavi.
   Na širokom ekranu ostaje u svom redu, ispod polja. */
.hx-row .hx-again{flex:0 0 100%;margin:20px 0 0}
/* Dugme pored „Proveri" ima TRI natpisa i jedno mesto (Denis, S127):
     • širok ekran  → „Promeni unos" (prazni polje; nalaz se tamo vidi bez listanja)
     • telefon, pre provere → „Šta se gleda" (vodi na objašnjenje)
     • telefon, posle provere → „Rezultati ↓" (vodi na nalaz)
   Boja se NE menja ni u jednom stanju — ostaje tačno desktop paleta (prozirna
   podloga, hairline ivica, tekst u --al-md). Drugo crveno dugme pored „Proveri"
   otimalo bi mu pažnju, a ovo su sporedne radnje.
   Pre ove izmene je pola reda pored „Proveri" stajalo prazno dok ishoda nema. */
.hx-again__m,.hx-again__r{display:none}
@media (max-width:1080px){
  .hx-again__d{display:none}
  .hx-again__m{display:inline}
  .pc.is-ishod .hx-again__m{display:none}
  .pc.is-ishod .hx-again__r{display:inline}
  /* Na telefonu je dugme tu od prvog trenutka, ne tek sa nalazom — mesto mu je
     ionako bilo rezervisano, pa se ništa ne pomera. */
  .pc .hx-again{visibility:visible;opacity:1}
  .pc .hx-row{flex-wrap:wrap}
  .pc .hx-in{flex:1 1 100%}
  /* Tačno pola-pola: oba dugmeta iste širine I iste visine (58px fiksno,
     border-box) — tamno ima ivicu od 1px pa bi sa min-height ispalo više.
     Osnovica je `calc(50% - 4px)` (4px = pola razmaka reda od 8px), NE
     `flex:1 1 0`: uz `flex-basis:0` pregledač na osnovicu dodaje padinge i
     ivicu, pa je crveno dugme sa svojih 24px padinga ispadalo 25px šire od
     tamnog (mereno u pregledu S127: 178 : 153). Ako se promeni `gap` reda,
     menja se i ovih 4px. */
  .pc .hx-go{flex:0 0 calc(50% - 4px);width:auto;min-width:0;padding:0 12px;height:58px;min-height:0;box-sizing:border-box}
  .pc .hx-row .hx-again{flex:0 0 calc(50% - 4px);width:auto;min-width:0;margin:0;box-sizing:border-box}
  .pc .hx-again__btn{width:100%;height:58px;min-height:0;box-sizing:border-box;justify-content:center;gap:9px;padding:0 12px;font-size:17px;line-height:1;white-space:nowrap}
  .pc .hx-again__n{display:none}
}

/* ============================================================
   KARTICE — // PREDLOG (P1a/N2): mejl-provera je UDARNA i ide
   preko pune širine iznad ostale tri; ostale tri stoje u tri kolone
   (ne 2×2 sa jednom koja visi).
   ============================================================ */
.izl-res{ padding:44px 0 8px; }
.izl-res[hidden]{ display:none; }
.izl-cards{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin:18px 0 0; }
@media (max-width:1080px){ .izl-cards{ grid-template-columns:minmax(0,1fr); } }

.izl-card{ display:flex; flex-direction:column; padding:22px 24px 20px; background:var(--al-plate); border:1px solid var(--al-line); border-left:2px solid var(--izl-boja); border-radius:2px; }
@media (max-width:560px){ .izl-card{ padding:18px 16px; } }
.izl-card__top{ display:flex; align-items:center; gap:12px; margin:0 0 14px; }
.izl-card__st{ display:inline-flex; align-items:center; gap:9px; font-family:var(--font-mono); font-size:11.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--izl-boja); }
.izl-card__ord{ margin-left:auto; font-family:var(--font-mono); font-size:11.5px; color:var(--al-mute-text); }
.izl-card__h{ margin:0 0 12px; font-size:21px; font-weight:600; line-height:1.25; letter-spacing:-.014em; color:var(--al-hi); text-wrap:pretty; }
.izl-card__n{ margin:0 0 18px; font-size:18px; line-height:1.6; color:var(--al-md); text-wrap:pretty; }
.izl-card__foot{ margin-top:auto; }
.izl-card__p{ display:flex; gap:11px; margin:0; padding:15px 0 0; border-top:1px solid var(--al-line); font-size:18px; line-height:1.55; color:var(--al-hi); text-wrap:pretty; }
.izl-card__arrow{ flex:0 0 auto; color:var(--izl-boja); font-family:var(--font-mono); }

/* udarna (01) */
.izl-card--udar{ display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.55fr); gap:14px 40px; align-items:start; padding:26px 28px 24px; }
@media (max-width:1080px){ .izl-card--udar{ grid-template-columns:minmax(0,1fr); gap:0; padding:22px 24px 20px; } }
@media (max-width:560px){ .izl-card--udar{ padding:18px 16px; } }
.izl-card--udar .izl-card__l{ display:flex; flex-direction:column; }
.izl-card--udar .izl-card__h{ font-size:clamp(22px,2vw,27px); line-height:1.2; margin-bottom:12px; }
.izl-card--udar .izl-card__why{ margin:0; font-family:var(--font-mono); font-size:11.5px; line-height:1.6; letter-spacing:.08em; text-transform:uppercase; color:var(--al-mute-text); max-width:34ch; }
.izl-card--udar .izl-card__r{ display:flex; flex-direction:column; min-width:0; }
.izl-card--udar .izl-card__n{ font-size:19px; max-width:64ch; }
.izl-card--udar .izl-det{ grid-column:1/-1; }
@media (max-width:1080px){ .izl-card--udar .izl-card__why{ margin:0 0 16px; max-width:none; } }

/* ============================================================
   DETALJI (N5) — ne ispis iz konzole nego uredan par etiketa i zapisa.
   ============================================================ */
.izl-det{ margin:16px 0 0; border-top:1px solid var(--al-line); }
.izl-det > summary{ display:flex; align-items:center; gap:10px; min-height:44px; padding:10px 0 0; cursor:pointer; list-style:none; font-family:var(--font-mono); font-size:11.5px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--al-mute-text); }
.izl-det > summary::-webkit-details-marker{ display:none; }
.izl-det > summary::before{ content:"+"; width:14px; flex:0 0 auto; color:var(--al-mute-text); }
.izl-det[open] > summary::before{ content:"–"; }
.izl-det > summary:hover{ color:var(--al-hi); }
.izl-det > summary:focus-visible{ outline:2px solid var(--al-brand); outline-offset:2px; }
.izl-det__body{ padding:6px 0 4px; }

.izl-dl{ display:grid; grid-template-columns:minmax(120px,auto) minmax(0,1fr); gap:0 22px; margin:0; }
@media (max-width:640px){ .izl-dl{ grid-template-columns:minmax(0,1fr); gap:0; } }
.izl-dl dt{ padding:11px 0 0; font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--al-mute-text); border-top:1px solid var(--al-line); }
.izl-dl dd{ margin:0; padding:11px 0 11px; font-family:var(--font-mono); font-size:14px; line-height:1.55; color:var(--al-md); overflow-wrap:anywhere; border-top:1px solid var(--al-line); }
@media (max-width:640px){ .izl-dl dt{ border-top:1px solid var(--al-line); padding-bottom:2px; } .izl-dl dd{ border-top:0; padding-top:4px; } }
.izl-dl dd b{ color:var(--al-hi); font-weight:500; }
.izl-dl .izl-zapis{ display:block; margin-top:6px; padding:9px 12px; background:var(--al-field); border:1px solid var(--al-line); border-radius:2px; font-size:13px; color:var(--al-lo); }
.izl-dl dd .izl-nema{ color:var(--al-mute-text); }

/* poddomeni (P4/N6): označeni izdvojeni gore, sa razlogom; ostali sklopljeni */
.izl-pod__ozn{ margin:0 0 4px; }
.izl-pod__oznk{ margin:12px 0 10px; font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--al-mute-text); }
.izl-ozn{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1px; }
.izl-ozn li{ display:flex; align-items:baseline; padding:9px 13px; background:var(--al-plate2); border-left:2px solid var(--izl-posla); }
.izl-ozn__n{ font-family:var(--font-mono); font-size:15px; color:var(--al-hi); overflow-wrap:anywhere; }
.izl-pod__more{ margin:14px 0 0; }
.izl-pod__more > summary{ display:inline-flex; align-items:center; gap:10px; min-height:44px; cursor:pointer; list-style:none; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--al-mute-text); }
.izl-pod__more > summary::-webkit-details-marker{ display:none; }
.izl-pod__more > summary::before{ content:"+"; color:var(--al-mute-text); }
.izl-pod__more[open] > summary::before{ content:"–"; }
.izl-pod__more > summary:hover{ color:var(--al-hi); }
.izl-pod{ list-style:none; margin:6px 0 0; padding:0; columns:3; column-gap:26px; }
@media (max-width:900px){ .izl-pod{ columns:2; } }
@media (max-width:560px){ .izl-pod{ columns:1; } }
.izl-pod li{ break-inside:avoid; padding:5px 0; font-family:var(--font-mono); font-size:14px; color:var(--al-lo); overflow-wrap:anywhere; }
.izl-pod__jos{ margin:10px 0 0; font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; color:var(--al-mute-text); }

/* Objašnjenje po zapisima na vrhu „Detalja" (S126): nalaz gore odgovara na
   pitanje iz naslova, ovde stoji šta je tačno zatečeno — pa tehnika ne mora
   da bude u nalazu. Etiketa iznad njega (ključ det.objasnjenje) ima isti glas
   kao dt u .izl-dl, da blok „Detalji" ima jedan tipografski red. */
.izl-det__uvodk{ margin:0 0 6px; font-family:var(--font-mono); font-size:12px;
  letter-spacing:.06em; color:var(--al-mute-text); }
.izl-det__uvod{ margin:0 0 14px; font-size:17px; line-height:1.6; color:var(--al-md); max-width:74ch; }

/* ============================================================
   OGRADA — // PREDLOG (P9/N8): samo ovde, uz ishod. Iz sekcije
   „Granice" je uklonjena. Nije fusnota: puna širina, 17px.
   ============================================================ */
.izl-ograda{ display:flex; align-items:flex-start; gap:16px; margin:18px 0 0; padding:18px 22px; border:1px dashed var(--al-line2); border-radius:2px; }
@media (max-width:560px){ .izl-ograda{ flex-direction:column; gap:8px; padding:16px; } }
.izl-ograda__k{ flex:0 0 auto; margin-top:2px; font-family:var(--font-mono); font-size:10.5px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; color:var(--al-mute-text); }
/* 17px -> 18px: kanon Doc 04 traži minimum 18px za telo na desktopu;
   predaja je ovde i kod .izl-item__d ostala na 17. */
.izl-ograda__t{ margin:0; font-size:18px; line-height:1.55; color:var(--al-lo); max-width:88ch; text-wrap:pretty; }

/* ============================================================
   ŠTA DALJE (P2) — JEDAN blok, uvek isti, bez obzira na ukupni status.
   Ne vezuje se za crveno ni tonom ni pojavljivanjem. Red akcija je
   flex lista: prima još jednu stavku bez prepravke rasporeda.
   ============================================================ */
.izl-dalje{ padding:52px 0; border-top:1px solid var(--al-line); }
.izl-dalje[hidden]{ display:none; }
.izl-dalje__box{ display:grid; grid-template-columns:minmax(0,1fr) minmax(300px,.62fr); gap:34px 52px; align-items:start; padding:32px 34px; background:var(--al-plate); border:1px solid var(--al-line); border-radius:2px; }
@media (max-width:900px){ .izl-dalje__box{ grid-template-columns:minmax(0,1fr); gap:24px; padding:24px 20px; } }
.izl-dalje__h{ margin:0 0 14px; font-size:clamp(23px,2.2vw,29px); font-weight:600; line-height:1.2; letter-spacing:-.018em; color:var(--al-hi); text-wrap:balance; }
.izl-dalje__t{ margin:0; font-size:18px; line-height:1.62; color:var(--al-md); max-width:62ch; text-wrap:pretty; }
.izl-dalje__t + .izl-dalje__t{ margin-top:12px; }
.izl-dalje__lista{ list-style:none; margin:18px 0 0; padding:0; display:grid; gap:14px; max-width:62ch; }
.izl-dalje__lista li{ padding-left:26px; position:relative; }
.izl-dalje__lista li::before{ content:""; position:absolute; left:0; top:9px; width:8px; height:8px; background:var(--al-brand); clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%); }
.izl-dalje__lista b{ display:block; font-size:18px; font-weight:600; color:var(--al-hi); margin-bottom:2px; }
.izl-dalje__lista span{ display:block; font-size:18px; line-height:1.55; color:var(--al-lo); }
.izl-dalje__uslov{ margin:18px 0 0; padding-left:14px; border-left:2px solid var(--al-line2); font-size:18px; line-height:1.55; color:var(--al-mute-text); max-width:62ch; }

.izl-dalje__akcije{ display:flex; flex-direction:column; gap:10px; }
.izl-akcija{ display:flex; align-items:center; gap:16px; min-height:64px; padding:14px 20px; text-decoration:none; background:var(--al-plate2); border:1px solid var(--al-line2); border-radius:2px; transition:border-color .15s,background .15s; }
.izl-akcija:hover{ border-color:var(--al-mute); background:var(--al-plate); }
.izl-akcija:focus-visible{ outline:2px solid var(--al-brand); outline-offset:2px; }
.izl-akcija__tx{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.izl-akcija__t{ font-size:17px; font-weight:600; color:var(--al-hi); }
.izl-akcija__d{ font-size:14.5px; line-height:1.4; color:var(--al-lo); }
.izl-akcija__go{ margin-left:auto; flex:0 0 auto; font-family:var(--font-mono); color:var(--al-mute-text); }
/* Prva akcija je istaknuta ivicom, NE punom crvenom masom: blok stoji
   ispod ishoda koji sme da bude crven, a ponuda ne sme da se veže za njega
   ni tonom ni pojavljivanjem (P2). */
.izl-akcija--prva{ border-left:2px solid var(--al-brand); }
.izl-akcija--prva .izl-akcija__t{ font-size:18px; }
.izl-akcija--prva .izl-akcija__go{ color:var(--al-brand-text); }
.izl-akcija--prva:hover{ border-color:var(--al-mute); border-left-color:var(--al-brand); }

/* ============================================================
   FUTER (enc-ftr) — deljeni partial NEMA deljeni stylesheet: svaka strana
   koja ga koristi nosi svoju kopiju stilova (tako rade /lozinka/, /pomoc/,
   /zakon/, /incident/, /alati/, enciklopedija, /hitno/…). Bez ovog bloka
   strip se renderuje neoblikovan — bez mono fonta, bez razmaka, priljubljen
   uz levu ivicu prozora. Preuzeto 1:1 iz alat-lozinka.css.
   ============================================================ */
body.page-izlozenost .enc-ftr{
  background:#0a0a09; border-top:1px solid #2e2e2c; color:#a0a09e;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.04em;
}
body.page-izlozenost .enc-ftr-inner{
  padding:10px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
body.page-izlozenost .enc-ftr-l,
body.page-izlozenost .enc-ftr-r{ display:inline-flex; align-items:center; flex-wrap:wrap; gap:10px; }
body.page-izlozenost .enc-ftr a{ color:inherit; text-decoration:none; transition:color .12s; }
body.page-izlozenost .enc-ftr a:hover{ color:#ece9e3; }
body.page-izlozenost .enc-ftr .dot{ width:3px; height:3px; background:#3a3a37; border-radius:50%; display:inline-block; }

/* Mobilni footer: enc-ftr se sakriva, cp-tabbar preuzima (isti obrazac kao
   /lozinka/, /pomoc/ i /vesti/). main dobija donji razmak da ga fiksna traka
   ne pokrije — bez toga se futer podvlači pod tabbar. */
@media (max-width:767px){
  body.page-izlozenost .enc-ftr{ display:none; }
  body.page-izlozenost main{ padding-bottom:calc(48px + env(safe-area-inset-bottom, 0px)); }
}

/* ============================================================
   STATIČNE SEKCIJE — četiri pitanja / granice
   ============================================================ */
.izl-sec{ padding:52px 0; border-top:1px solid var(--al-line); }
.izl-sec__k{ margin:0 0 26px; font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--al-mute-text); }
.izl-sec__k b{ color:var(--al-mute-text); font-weight:500; }
.izl-grid2{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 52px; }
@media (max-width:820px){ .izl-grid2{ grid-template-columns:minmax(0,1fr); gap:22px; } }
.izl-item{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 16px; }
.izl-item__ord{ grid-row:1/3; font-family:var(--font-mono); font-size:12px; color:var(--al-mute-text); padding-top:5px; }
.izl-item__t{ margin:0; font-size:19px; font-weight:600; line-height:1.35; color:var(--al-hi); }
.izl-item__d{ margin:0; font-size:18px; line-height:1.6; color:var(--al-lo); max-width:56ch; text-wrap:pretty; }
.izl-item--ne .izl-item__ord{ color:var(--al-brand-text); }

/* ============================================================
   SVETLA TEMA
   Ista kompozicija na papiru: hartija umesto ploče, mastilo umesto svetla.
   „Univerzum" (zvezde i sonda) postoji samo na tamnoj — na beloj podlozi
   tačke nisu nebo nego prljavština, pa se gase. Motiv saća prelazi u toplo
   smeđu hairline liniju, kao pečat na hartiji.
   ============================================================ */
html[data-theme="light"]{ color-scheme:light; }
html[data-theme="light"], html[data-theme="light"] body.page-izlozenost{ background:#f4f4f2; }
html[data-theme="light"] body.page-izlozenost{
  --al-bg:#f4f4f2; --al-plate:#eceae4; --al-plate2:#e4e2db; --al-field:#fff;
  --al-line:#dcdad3; --al-line2:#c9c7c0;
  --al-hi:#1a1a18; --al-md:#33332f; --al-lo:#55534e; --al-mute:#6f6d67; --al-faint:#8d8b84; --al-mute-text:#666663;
  --al-brand:#b0331f; --al-brand-hi:#8f2818; --al-brand-soft:rgba(176,51,31,.12); --al-brand-text:#b0301f;
  --al-accent:#9a5a15; --al-accent-text:#935614; --al-ok:#4a5d3e; --al-steel:#3a5570;
  --izl-mirno:#3f7d33; --izl-posla:#b1730c; --izl-gori:#c02a1c; --izl-nedost:#6f6d67;
  color:var(--al-hi);
}
html[data-theme="light"] .hx.bg-tacke{ background:var(--al-bg) }
html[data-theme="light"] .hx.bg-tacke::before,
html[data-theme="light"] .hx.bg-tacke::after{ display:none }
html[data-theme="light"] .hx.bg-tacke .hx-sonda{ display:none }
html[data-theme="light"] .hx-mreza path{ stroke:rgba(154,90,21,.16) }
html[data-theme="light"] .hx-hex polygon[fill="none"]{ stroke:rgba(154,90,21,.30) }
html[data-theme="light"] .hx-hex polygon[stroke="none"]{ fill:rgba(154,90,21,.04) }
html[data-theme="light"] .hx-hex circle{ fill:rgba(154,90,21,.34) }
html[data-theme="light"] .hx.is-cekanje .hx-hex__p polygon[fill="none"],
html[data-theme="light"] .hx.is-cekanje .hx-hex__c polygon[fill="none"]{ stroke:rgba(154,90,21,.75) }
/* Latice i cvet uzimaju boju statusa I NA HARTIJI (Denis, S127). Bez ovoga
   pravilo iznad — koje ceo motiv prevodi u smeđu — gazi status po specifičnosti
   (0,3,2 prema 0,3,1), pa se instrument na svetloj temi ugasi u trenutku kad
   ima šta da pokaže. Puls dok provera traje ostaje smeđ: to pravilo je
   specifičnije od ovog, i tako treba — boja tek treba da se izrekne. */
html[data-theme="light"] .hx-hex__p[data-status] polygon[fill="none"],
html[data-theme="light"] .hx-hex__c[data-status] polygon[fill="none"]{ stroke:var(--izl-boja) }
html[data-theme="light"] .hx-hex__p[data-status] .hx-hex__w{ fill:var(--izl-boja); fill-opacity:.07 }
html[data-theme="light"] .hx-hex__c[data-status] .hx-hex__w{ fill:var(--izl-boja); fill-opacity:.12 }
html[data-theme="light"] .hx-go{ color:#fff }
html[data-theme="light"] .pc .hx-traka{ border-top-color:rgba(154,90,21,.28) }
html[data-theme="light"] .pc .hx-cell:not([data-status]) .hx-cell__bar{ background:rgba(154,90,21,.42) }
html[data-theme="light"] .pc .hx-cell:nth-child(2):not([data-status]) .hx-cell__bar{ background:rgba(154,90,21,.32) }
html[data-theme="light"] .pc .hx-cell:nth-child(3):not([data-status]) .hx-cell__bar{ background:rgba(154,90,21,.23) }
html[data-theme="light"] .pc .hx-cell:nth-child(4):not([data-status]) .hx-cell__bar{ background:rgba(154,90,21,.16) }
html[data-theme="light"] .pc .hx-cell:not([data-status]) .hx-cell__o{ color:rgba(122,72,17,.85) }
html[data-theme="light"] .pc .hx-cell:not([data-status]) .hx-cell__st{ color:#7a4811 }
html[data-theme="light"] .pc .hx-cell:not([data-status]) .hx-lamp{ box-shadow:inset 0 0 0 1.4px rgba(122,72,17,.6) }
/* Isto pravilo kao na tamnoj: u rasporedu 2×2 gradacija se čita kao greška, pa
   su sve četiri prečke iste. Stoji OVDE, posle svetlih pravila, jer su ona
   specifičnija od mobilnog bloka gore i inače bi ga pregazila. */
@media (max-width:760px){
  html[data-theme="light"] .pc .hx-cell:not([data-status]) .hx-cell__bar,
  html[data-theme="light"] .pc .hx-cell:nth-child(2):not([data-status]) .hx-cell__bar,
  html[data-theme="light"] .pc .hx-cell:nth-child(3):not([data-status]) .hx-cell__bar,
  html[data-theme="light"] .pc .hx-cell:nth-child(4):not([data-status]) .hx-cell__bar{ background:rgba(154,90,21,.36) }
}
html[data-theme="light"] .hx-cekaj__dot{ background:var(--al-accent) }
/* Na svetloj su statusne boje bile pretamne i čitale su se kao siva/smeđa —
   pojačane su i na pločama i u lampicama, uz zadržan kontrast na hartiji. */
html[data-theme="light"] .hx-sum__word{ font-weight:700 }
html[data-theme="light"] .hx-cell__bar{ height:4px }
html[data-theme="light"] .hx-cell__st{ font-weight:600 }
html[data-theme="light"] body.page-izlozenost .izl-akcija--prva{ border-left-color:var(--al-brand); }

/* ============================================================
   ŠTAMPA (P8) — ishod + detalji otvoreni; hrom i statične sekcije van.
   Čovek sam sačuva stranu kao PDF i prosledi je svom IT-ju.
   ============================================================ */
@media print{
  .hx-hex, .hx-mreza, .hx-sonda{ display:none !important; }
  body.page-izlozenost{ background:#fff; color:#111; display:block; font-size:11pt; }
  .hdr, .hdr-backdrop, .enc-ftr, .cp-tabbar, .skip-link,
  .hx-form, .hx-again, .hx-src, .hx-cekaj, .hx-stat, .hx-dole, .hx-slot,
  .izl-dalje, .izl-sec{ display:none !important; }
  .hx{ background:none; border-bottom:0; min-height:0; display:block; }
  .hx__in, .pc .hx__in{ display:block; padding:0; }
  .pc .hx-top{ display:block; padding:0; }
  .hx-lead{ display:none; }
  .hx-h1{ font-size:17pt; color:#111; }
  .pc .hx-traka{ background:none; border-top:1px solid #bbb; }
  .pc .hx-traka__g{ display:block; }
  .pc .hx-faze{ min-height:0; padding:0 0 10pt; border-right:0; }
  .hx-read{ color:#111; border-bottom-color:#444; }
  .pc .hx-cells{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-top:1px solid #bbb; }
  .pc .hx-cell{ padding:8pt 0; border-right:1px solid #ddd; }
  .hx-cell__t{ color:#222; }
  .pc .hx-foot{ display:none !important; }
  .izl-card, .izl-ograda{ background:none; border:1px solid #bbb; border-left:2px solid #444; break-inside:avoid; }
  .izl-cards{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .izl-card--udar{ grid-template-columns:minmax(0,1fr); }
  .izl-card__h, .hx-sum__word, .izl-dl dd b{ color:#111; }
  .izl-card__n, .izl-card__p, .hx-sum__t, .izl-dl dd{ color:#222; }
  .izl-det > summary{ display:none; }
  .izl-det:not([open]) > *:not(summary), .izl-pod__more:not([open]) > *:not(summary){ display:block; }
  .izl-res{ padding:0; }
}