/* Pet pitanja — GENERIŠE tools/uvoz-pet-pitanja.py iz Cyberfy/price-proba/index.html.
   Ne menjati ručno. */
/* Boje su ocitane sa crvenapilula.rs/price/, nisu izmisljene.
   Svetla tema je predlog — sekcija je trenutno samo tamna.      */
:root, [data-theme="dark"] {
  --bg:#0F0F0D; --izdignuto:#151512; --fg:#ECE9E3; --tiho:#8C8980;
  --linija:#262623; --linija2:#3A3A35; --crvena:#C52828;
  --crvena2:#9B1919; --siva-lbl:#6A6A68; --zrno:.055; --ton:255,255,255;
}
[data-theme="light"] {
  --bg:#ECE9E3; --izdignuto:#E4E0D8; --fg:#0F0F0D; --tiho:#6E6B64;
  --linija:#D7D3CA; --linija2:#BCB7AC; --crvena:#C52828;
  --crvena2:#9B1919; --siva-lbl:#6E6B64; --zrno:.035; --ton:0,0,0;
}
:root {
  --r1:8px; --r2:16px; --r3:24px; --r4:32px; --r6:48px; --r8:64px; --r12:96px;
  /* Jedan list, jedna mera. Vodoravne mere idu po vw, uspravne po vh —
     zato isti ekran na 100% i na 125% daje isti raspored, samo tesnji.
     Prelom se NIKADA ne vodi po visini: to je ono sto je lomilo FHD.  */
  --mera: 1174px;                              /* mera sajta; gore se siri */
  --ivica: clamp(16px, 3.2vw, 44px);           /* od ivice ekrana do lista */
  --ploca-tekst: 181px;        /* ime (2 reda) + uloga (3) + sastavnica */
  --znak: 46px;                                /* znak napred/nazad */
  --znak-jaz: 30px;                            /* njegov razmak od kolone */
  /* Na telefonu se prevlaci prstom i znaka nema, pa mu se mesto NE
     oduzima — inace je kolona na 390px bila siroka svega 206.       */
  --sirina: min(100vw - 2 * var(--ivica), var(--mera));
  --okvirni: clamp(12px, 1.3vw, 30px);         /* od rama do sloga */
  --vivica: clamp(14px, calc(2.4 * var(--lvh)), 34px);
  --ploca: min(268px, calc(calc(52 * var(--lvh)) - var(--ploca-tekst) - var(--jaz-zaglavlje)));                   /* strana portreta */
  --jaz: clamp(26px, 2.8vw, 58px);             /* ploca | tekst */
  /* uspravni ritam */
  --v1: clamp(5px,  calc(.7 * var(--lvh)),  9px);   --v2: clamp(9px,  calc(1.3 * var(--lvh)), 17px);
  --v3: clamp(13px, calc(1.9 * var(--lvh)), 25px);  --v4: clamp(16px, calc(2.6 * var(--lvh)), 34px);
  --v6: clamp(22px, calc(3.8 * var(--lvh)), 50px);
  /* Zaglavlje ima svoj razmak, ne deli ga sa ostalim ritmom: sa 33px
     se citalo kao uvodni red sadrzaja umesto kao ravnopravan blok. */
  --jaz-zaglavlje: clamp(30px, calc(5.2 * var(--lvh)), 68px);
  --pojas: clamp(80px, min(9.3vw, calc(17 * var(--lvh))), 300px);  /* hodni postroj */
  --t11:11px; --t13:13px; --t15:15px; --t18:18px; --t22:22px; --t28:28px;
  --t38:38px; --t54:54px; --obrt:180s;
  /* Jedna mera za brzinu. Tocak cita --brzina/4, pa kotrljanje bez
     proklizavanja ostaje tacno i kad se brzina menja.              */
  --brzina: 42s;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin:0; background:var(--bg); color:var(--fg);
  font:400 var(--t18)/1.62 Inter, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing:antialiased;
  transition: background-color .3s ease, color .3s ease;
}


/* patina: zrno i vinjeta daju otisku telo */
.zrno { position:fixed; inset:0; width:100%; height:100%; z-index:4; pointer-events:none;
        opacity:var(--zrno); mix-blend-mode:overlay; }
.vinjeta { position:fixed; inset:0; z-index:1; pointer-events:none;
  background: radial-gradient(130% 95% at 50% 36%, transparent 48%, rgba(0,0,0,.42) 100%); }
[data-theme="light"] .vinjeta {
  background: radial-gradient(130% 95% at 50% 36%, transparent 52%, rgba(90,84,74,.16) 100%); }

/* nas tocak, ne genericki */
.masina { position:fixed; left:0; right:0; bottom:0; height:var(--pojas);
           pointer-events:none; z-index:0; opacity:var(--mas); }
.masina svg { width:100%; height:100%; }
.masina .sina  { stroke:var(--linija2); stroke-width:3; }
.masina #srafura line { stroke:var(--linija); stroke-width:1.4; }


/* Hodni postroj: pojas odvaja telo vagona (ceo list iznad) od onoga
   sto se kotrlja. Tockovi se vrte sest puta brze od tla, jer im je
   obim 168 a tlo predje 1008 po ciklusu — 1008 / 168 = 6 tacno.     */
.masina .sanduk { stroke:var(--tiho); }
.masina .sanduk.gornji { stroke-width:1.6; }
.masina .sanduk.donji  { stroke:var(--linija2); stroke-width:1; }
.masina .kvacilo { stroke:var(--tiho); stroke-width:2.4; stroke-linecap:round; }
.masina .navrtka { fill:var(--bg); stroke:var(--tiho); stroke-width:2; stroke-linejoin:round; }
.masina .ram    { stroke:var(--tiho); stroke-width:1.6; stroke-linecap:round; }
.masina .veza   { stroke:var(--tiho); stroke-width:1.2; }
.masina .obrtni { stroke:var(--tiho); stroke-width:1.4; }
.masina .obrtni-c { fill:var(--bg); stroke:var(--tiho); stroke-width:1.9; }
.masina .obrtni-t { fill:var(--tiho); stroke:none; }
.masina .guma   { fill:none; stroke:var(--tiho); stroke-width:1.2; }
.masina .luk    { fill:none; stroke:var(--linija2); stroke-width:1.2;
                  stroke-linecap:round; }
.masina .glava  { fill:none; stroke:var(--tiho); stroke-width:1.2; }
.masina .sina  { stroke:var(--tiho); stroke-width:2; }
.masina #srafura line { stroke:var(--linija2); stroke-width:1.3; }

/* CSS transformacije, bez petlje. transform-origin ide u CSS jer CSS
   transform gazi istoimeni SVG atribut.                              */
.masina .tocak, #srafura {
  animation: vrti var(--brzina, 56s) linear infinite; will-change: transform;
}
#srafura { animation-name: putuj; }
/* MORA posle skracenog `animation:` iznad — inace ga ono vrati na
   trajanje tla i tockovi se vrte cetiri puta sporije nego sto treba. */
.masina .tocak { animation-duration: calc(var(--brzina, 56s) / 4); }
@keyframes vrti { to { transform: rotate(360deg); } }
/* 1008 jedinica po obrtaju = 42 koraka srafure: tlo i tocak u koraku */
@keyframes putuj { to { transform: translateX(-1008px); } }

@media (prefers-reduced-motion: reduce) {
  .masina .tocak, #srafura { animation: none; }
}

.stub { position:relative; z-index:3; width:var(--sirina); margin:0 auto; padding:0; }

/* uvod */
.uvod { padding:var(--v4) 0 0; }
.oznaka { font:500 11px/1 'JetBrains Mono',monospace; letter-spacing:2.42px;
          text-transform:uppercase; color:var(--crvena2);
          display:flex; align-items:center; gap:10px; margin-bottom:var(--r2); }
h1 { font:700 clamp(28px,3.4vw,var(--t38))/1.04 Inter,sans-serif;
     letter-spacing:-.03em; margin:0; max-width:24ch; text-wrap:balance; }
.podnaslov { font-size:var(--t15); line-height:1.55; color:var(--tiho);
            text-wrap:pretty;
             max-width:68ch; margin:var(--r2) 0 0; }
.podnaslov b { color:var(--fg); font-weight:600; }

.metrika { display:flex; gap:var(--r6); flex-wrap:wrap; margin:var(--r3) 0 0;
           padding:var(--r2) 0; border-top:1px solid var(--linija2);
           border-bottom:1px solid var(--linija); }
.metrika div { display:flex; flex-direction:column; gap:6px; }
.metrika dt { font:500 var(--t11)/1 'JetBrains Mono',monospace; letter-spacing:.16em;
              color:var(--tiho); text-transform:uppercase; }
.metrika dd { margin:0; font:600 var(--t18)/1 Inter,sans-serif; letter-spacing:-.01em; }
.metrika dd span { color:var(--tiho); font-weight:400; font-size:var(--t15); }

/* sredina */
.sredina { position:relative; margin:var(--jaz-zaglavlje) 0 0; }
.okno { overflow:hidden; }
.pruga { display:flex; transition:transform .6s cubic-bezier(.32,.72,.28,1); }

/* Jedna gesta, dva takta: ploca pa tekst. Pokret odgovara na izbor
   i pokazuje sta se promenilo — nista se ne mice samo od sebe.   */
@keyframes slegni {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:none; }
}
.panel[data-stize] > div:first-child { animation:slegni .5s cubic-bezier(.2,.7,.2,1) both; }
.panel[data-stize] > div:last-child  { animation:slegni .5s cubic-bezier(.2,.7,.2,1) .09s both; }
/* Bez gornje ispune: razmak od zaglavlja vec daje .sredina, pa je ovo
   bio dvostruki razmak (mereno 56 + 22 = 78px do slike).            */
.panel { flex:0 0 100%; min-width:100%; padding:0 var(--okvirni) var(--v4);
         display:grid; grid-template-columns:var(--ploca) 1fr;
         gap:0 var(--jaz); align-items:start; }

.okvir { position:relative; width:var(--ploca); aspect-ratio:1/1; background:var(--izdignuto); }
.okvir img { width:100%; height:100%; object-fit:cover; display:block; }
.okvir::after { content:""; position:absolute; inset:0; border:1px solid var(--linija2); }
.ugao { position:absolute; width:14px; height:14px; border:0 solid var(--crvena); }
.ugao.gl{top:-5px;left:-5px;border-top-width:2px;border-left-width:2px}
.ugao.gd{top:-5px;right:-5px;border-top-width:2px;border-right-width:2px}
.ugao.dl{bottom:-5px;left:-5px;border-bottom-width:2px;border-left-width:2px}
.ugao.dd{bottom:-5px;right:-5px;border-bottom-width:2px;border-right-width:2px}

.sastavnica { margin-top:var(--r2); border-top:1px solid var(--linija); }
.sastavnica div { display:flex; justify-content:space-between; gap:var(--r2); padding:7px 0;
  border-bottom:1px solid var(--linija); font:400 var(--t11)/1.4 'JetBrains Mono',monospace;
  color:var(--tiho); }
.sastavnica b { color:var(--fg); font-weight:500; }

.panel h2 { font:700 var(--t28)/1.1 Inter,sans-serif; letter-spacing:-.025em; margin:0; }
.uloga { font:500 var(--t15)/1.5 Inter,sans-serif; color:var(--crvena);
         margin-top:var(--r1); max-width:74ch; }
/* 46ch je bila mera za tekst koji se cita; uloga je kratka oznaka.
   Medijana je 41 znak, Markova 72 — na 46ch je na jednom redu stajalo
   59% ljudi, na 74ch staje 84%. Najduza (145) se lomi i tako.      */
.biografija { font-size:var(--t15); color:var(--tiho); margin:var(--r2) 0 0; max-width:56ch; }

/* jedan dogadjaj po coveku */
.citat { margin:var(--r3) 0 0; padding:var(--r1) 0 var(--r1) var(--r2);
         border-left:2px solid var(--fg); font:600 var(--t22)/1.26 Inter,sans-serif;
         letter-spacing:-.02em; max-width:30ch; }

.odg { margin:var(--v3) 0 0; }
.par { position:relative; padding:var(--v2) 0; }
.par > * { position:relative; z-index:1; }
/* Traka ide preko cele sirine stranice, a ne samo kolone. Svaka je za
   nijansu svetlija od prethodne — jedva primetan stepenik, tek da se
   nazire dubina. Alfa ide 0 / 0,9 / 1,8 / 2,7 / 3,6 odsto.          */
.par::before {
  content:""; position:absolute; top:0; bottom:0; z-index:0;
  left:calc(-1 * var(--okvirni)); right:calc(-1 * var(--okvirni));
  border-top:1px solid var(--linija);
}
/* u listu traka ide od rama do rama, preko i ploce i teksta */
@media (min-width:900px) and (min-height:800px) {
  .par::before { left:calc(-1 * (var(--ploca) + var(--jaz) + var(--okvirni))); }
}
.par:first-child::before { border-top-color:var(--linija2); }
.pitanje { display:flex; gap:var(--r2); align-items:baseline; margin-bottom:10px; }
.pitanje .br { font:500 var(--t11)/1.7 'JetBrains Mono',monospace; color:var(--crvena);
               flex:0 0 auto; letter-spacing:.1em; }
.pitanje .q { font:500 var(--t15)/1.5 Inter,sans-serif; color:var(--tiho); max-width:60ch; }
.par p { margin:0 0 0 38px; max-width:62ch; font-size:var(--t15); line-height:1.58; }
.par i { font-style:normal; font-weight:600; color:var(--fg);
         box-shadow: inset 0 -.42em 0 color-mix(in srgb, var(--crvena) 24%, transparent); }

.okvir.cekanje img { opacity:.26; filter:grayscale(.5); }
.okvir.cekanje::after { border-style:dashed; }

.strelica { position:fixed; top:50%; transform:translateY(-50%);
             left:auto; right:auto; width:var(--znak); height:118px;
             padding:0; border:0; background:none; cursor:pointer;
             z-index:6; line-height:0; }
/* Znak stoji IZVAN kolone: do sada se prostirao do 183px dok kolona
   pocinje na 181, pa je pokret isao ispod nje.                       */
.strelica.levo  { left:  max(6px, (100vw - var(--sirina)) / 2 - var(--znak) - var(--znak-jaz)); }
.strelica.desno { right: max(6px, (100vw - var(--sirina)) / 2 - var(--znak) - var(--znak-jaz)); }
.strelica:focus-visible { outline:2px solid var(--crvena); outline-offset:4px; }

.mera { display:flex; align-items:center; gap:var(--r3); flex-wrap:wrap;
        padding:var(--r2) 0; }
.potpis { font-size:var(--t11); color:var(--tiho); }

/* Ram i uglovne oznake — isti potez kao uh-corner na sajtu. */
/* Ram uokviruje TELO vagona, pa se zavrsava na gornjoj ivici pojasa.
   Dok je isao do dna lista, donje cosne oznake su upadale medju
   tockove i srafuru — izgledale su kao zaostatak.                    */
.ram { position:fixed; z-index:5; pointer-events:none;
       top:var(--vivica); bottom:var(--pojas);
       left:50%; width:calc(var(--sirina) + 2 * var(--okvirni));
       margin-left:calc((var(--sirina) + 2 * var(--okvirni)) / -2); }
.ram .ug { position:absolute; width:16px; height:16px; border:0 solid var(--linija2); }
.ram .tl { top:0; left:0; border-top-width:1px; border-left-width:1px; }
.ram .tr { top:0; right:0; border-top-width:1px; border-right-width:1px; }
.ram .bl { bottom:0; left:0; border-bottom-width:1px; border-left-width:1px; }
.ram .br { bottom:0; right:0; border-bottom-width:1px; border-right-width:1px; }
.ram .lbl { position:absolute; top:-4px; font:400 10px/1 'JetBrains Mono',monospace;
             letter-spacing:1.4px; text-transform:uppercase; color:var(--siva-lbl); }
.ram .lbl-tl { left:26px; } .ram .lbl-tr { right:26px; }

/* Zaglavlje sprege: kote i brojke koje se stvarno menjaju. */
.sastav { display:flex; gap:var(--r4); flex-wrap:wrap; padding:var(--r2) 0 0;
          border-top:1px solid var(--linija); }
.sastav div { display:flex; flex-direction:column; gap:4px; }
.sastav span { font:400 10px/1 'JetBrains Mono',monospace; letter-spacing:1.4px;
               color:var(--siva-lbl); text-transform:uppercase; }
.sastav b { font:500 12px/1 'JetBrains Mono',monospace; color:var(--fg); }

/* Na telefonu u red staju tri stavke. Vrede zive brojke — obrtaji i
   predjeni put pokazuju da se nesto desava; Ø, razmak i obim su
   nepromenljivi i mogu da sacekaju siri ekran. Mera jedinice ostaje,
   jer predjeni put bez nje nema smisla.                             */
@media (max-width:899px) {
  .sastav div:nth-child(2), .sastav div:nth-child(3),
  .sastav div:nth-child(4) { display:none; }
}

/* Nagovestaj prevlacenja — samo na dodirnim ekranima, i samo dok
   covek jednom ne prevuce. Posle toga je smetnja.                 */
.prevuci { display:none; }
@media (pointer: coarse) {
  .prevuci { display:flex; align-items:center; gap:10px; justify-content:center;
             padding:var(--r2) 0 0; font:500 var(--t11)/1 'JetBrains Mono',monospace;
             letter-spacing:.16em; color:var(--tiho); }
  .prevuci svg { width:58px; height:12px; overflow:visible; }
  .prevuci path { stroke:var(--tiho); stroke-width:1.4; fill:none; }
  .prevuci .ruka { animation: mahni 2.4s ease-in-out infinite; }
  @keyframes mahni {
    0%,100% { transform: translateX(-8px); opacity:.35; }
    50%     { transform: translateX(8px);  opacity:1; }
  }
  .prevuci[hidden] { display:none; }
  .strelica { display:none; }        /* na dodiru se prevlaci, ne klika */
}
@media (pointer: coarse) and (prefers-reduced-motion: reduce) {
  .prevuci .ruka { animation:none; }
}
.napomena { font-size:var(--t13); color:var(--tiho); margin:var(--r2) 0 0;
            padding-left:var(--r2); border-left:2px solid var(--linija2); }
.potpis a { color:var(--tiho); }
.brojac { font:500 var(--t13)/1 'JetBrains Mono',monospace; color:var(--tiho); letter-spacing:.1em; }
.brojac b { color:var(--fg); display:inline-block; }
.brojac b.kuca { animation:kucni .34s ease; }
@keyframes kucni { 0%{transform:translateY(-6px);opacity:0} 100%{transform:none;opacity:1} }
.tema { margin-left:auto; font:500 var(--t11)/1 'JetBrains Mono',monospace; letter-spacing:.14em;
        background:none; border:1px solid var(--linija2); color:var(--tiho);
        padding:9px 12px; cursor:pointer; }
.tema:hover { color:var(--fg); border-color:var(--fg); }

.poziv { margin:var(--r12) 0 0; padding:var(--r8) 0; border-top:1px solid var(--linija2); }
.poziv h3 { font:700 var(--t38)/1.1 Inter,sans-serif; letter-spacing:-.025em; margin:0; max-width:20ch; }
.poziv p { color:var(--tiho); max-width:56ch; margin:var(--r3) 0 var(--r4); }

.kraj { padding:var(--r3) 0 var(--r4); font-size:var(--t13);
        color:var(--tiho); max-width:64ch; }
.kraj a { color:var(--fg); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .masina svg { animation:none; }
  .masina { transition:none; }
  .pruga, .strelica .znak, .panel[data-stize] > div:first-child,
  .panel[data-stize] > div:last-child { animation:none; }
  .brojac b.kuca { animation:none; }
}

@media (max-width:899px) {
  /* Pojas pripada listu, ne celoj stranici: fiksiran bi lebdeo preko
     uvoda i poziva dok se stranica skroluje.                        */
  .masina { position:absolute; }
  /* Bez bocne ispune: stub vec daje marginu. Sa 48px sa svake strane
     plus 16 stuba, od 390px ekrana je ostajalo 230 za sadrzaj.      */
  .panel { grid-template-columns:1fr; gap:var(--r4) 0; padding:0 0 var(--r4); }
  .okvir { width:100%; max-width:380px; }
  .citat { font-size:var(--t22); max-width:none; }
  .strelica { width:34px; height:92px; }
  .stub { padding:0 var(--r2) var(--pojas); }
  /* Nadnaslov mora da prodje ispod cosnog natpisa na ramu — na uzem
     ekranu natpis ide preko cele sirine pa su se preklapali.        */
  .uvod { padding-top:calc(var(--v4) + 22px); }
  .masina { opacity:.4; }
  h1 { max-width:none; }
}

/* ------------------------------------------------------------------ *
 *  LIST NA SVIM EKRANIMA                                             *
 *  Jedan raspored, cetiri mere lista. Nista se ne prerasporedjuje —   *
 *  samo se list siri i slog raste s njim.                             *
 *                                                                     *
 *   <900      ploca gore, tekst ispod, stranica se skroluje           *
 *   900-1279  list, uza ploca                                         *
 *   1280-1679 list, mera sajta 1174                                   *
 *   1680-2239 list 1392, slog korak gore                              *
 *   >=2240    list 1680, slog dva koraka gore, veca ploca             *
 * ------------------------------------------------------------------ */
@media (min-width:900px) and (max-width:1279px) {
  :root { --ploca:min(216px, calc(calc(50 * var(--lvh)) - var(--ploca-tekst) - var(--jaz-zaglavlje))); --jaz:30px; }
}
@media (min-width:1680px) {
  :root { --mera:1392px; --ploca:min(324px, calc(calc(52 * var(--lvh)) - var(--ploca-tekst) - var(--jaz-zaglavlje)));
          --t13:14px; --t15:16px; --t18:19px; --t22:24px; --t28:31px; --t38:44px; }
}
@media (min-width:2240px) {
  :root { --mera:1680px; --ploca:min(396px, calc(calc(52 * var(--lvh)) - var(--ploca-tekst) - var(--jaz-zaglavlje))); --okvirni:34px;
          --t11:12px; --t13:15px; --t15:18px; --t18:21px; --t22:27px;
          --t28:36px; --t38:54px; }
  .ram .ug { width:22px; height:22px; }
}

/* ------------------------------------------------------------------ *
 *  LIST — mora stajati POSLE osnovnih pravila.                        *
 *  Specificnost je ista, pa odlucuje red u izvoru: dok je ovaj blok    *
 *  bio na vrhu, osnovno `align-items:start` je gazilo `stretch` i      *
 *  kolona se nije rastezala — naraste na sadrzaj i prelije list.       *
 * ------------------------------------------------------------------ */
/* Sve se odvija na jednom ekranu: zaglavlje, radna povrsina, mera.
   Ispod 820 px visine stranica se opusta u obican skrol, jer na
   niskom ekranu jedan ekran znaci necitljivo sitan tekst.          */
@media (min-width:900px) and (min-height:800px) {
  /* Stranica se vise ne zakljucava. List je prvi ekran, a ispod njega
     se nastavlja obrazlozenje i poziv na skup. Ram, masina i strelice
     pripadaju listu, pa su u njemu apsolutni — ne lebde preko ostatka. */
  body { height:auto; overflow:visible; }
  .list { height:calc(100dvh - var(--hdr-h, 56px)); }
  .masina, .ram, .strelica { position:absolute; }
  /* I kolona mora biti vezana, ne samo redovi: `auto` traka uzima
     max-content i izleti iz kontejnera (merili smo 14997px).        */
  /* Tek ovde znak postoji, pa mu kolona pravi mesto izvan sebe. */
  :root { --sirina: min(100vw - 2 * (var(--ivica) + var(--znak) + var(--znak-jaz)), var(--mera)); }
  .stub { height:calc(100dvh - var(--hdr-h, 56px)); display:grid; grid-template-rows:auto 1fr auto;
          grid-template-columns:minmax(0, 1fr);
          padding-bottom:var(--pojas); }
  /* Razmak od zaglavlja mora i ovde: ovaj blok dolazi posle osnovnih
     pravila, pa bi margin:0 ponistio razmak zadat gore.            */
  .sredina { min-height:0; margin:var(--jaz-zaglavlje) 0 0;
             display:flex; flex-direction:column; }
  .okno { flex:1 1 auto; min-height:0; }
  .pruga { height:100%; }
  /* Kolone prelivaju u drugu tek kad imaju odredjenu visinu; bez toga
     panel samo odsece odgovore 03-05 i deluje kao da staju.        */
  /* align-items:start iz osnovnog pravila ne rasteze desnu kolonu,
     pa kolone nemaju odredjenu visinu u koju bi prelile. */
  /* Red mora biti ogranicen: bez ovoga je implicitni red 'auto', kolona
     sa tekstom naraste preko lista i .okno je tiho odsece — odgovori
     nestanu umesto da se skroluju. minmax(0,1fr) vezuje red za list.  */
  .panel { height:100%; min-height:0; align-items:stretch;
           grid-template-rows:minmax(0, 1fr); }
  .panel > .pitanja { display:flex; flex-direction:column; min-height:0; }
  /* mreza umesto multikolone: dve kolone pravi bez obzira na visinu */
  /* Pet odgovora je ~300 reci: u dve kolone oko 480 px. Na ekranu
     visine 1080 staje, na laptopu od 900 ne. Umesto da secem tekst,
     blok se sam skroluje — stranica i dalje stoji na jednom ekranu. */
  /* jedna kolona i skrol u samom bloku — dve kolone su gurale
     odgovore 02 i 04 van vidnog polja */
  /* Okno nosi protok; odgovori skroluju bez vidljive trake. Umesto nje
     stoji kota sa pet podeoka — kaze i koliko pitanja ima i gde si.   */
  .odg-okno { flex:1 1 auto; min-height:0;
              display:grid; grid-template-columns:auto minmax(0,1fr); gap:0 16px; }
  .odg { min-height:0; overflow-y:auto; scrollbar-width:none; }
  .odg::-webkit-scrollbar { display:none; }
  .par { position:relative; padding:var(--v2) 0; }
.par { break-inside:avoid; }
  .par:first-child::before { border-top-color:var(--linija2); }

  /* Uvod je zaglavlje nacrta, a ne hero. Stajao je 284px — trecinu
     lista — na tekstu koji se nikad ne menja, dok su odgovori imali
     188px. Naslov levo, metrika desno, u istoj traci.               */
  /* Vrh lista mora da dise. Stedeo sam ovde visinu za odgovore, a oni
     ionako skroluju — pa je usteda bila nikakva, a gusenje stvarno.
     Cosni natpis stoji na ramu, pa nadnaslov prolazi ispod njega.  */
  .uvod { display:grid; grid-template-columns:minmax(0,1fr) auto;
          align-items:end; gap:0 var(--jaz);
          padding:calc(var(--v4) + 28px) 0 0; }
  .uvod .oznaka { grid-column:1; grid-row:1; }
  .uvod h1 { grid-column:1; grid-row:2; font-size:clamp(26px, 2.42vw, 39px); }
  .uvod .podnaslov { grid-column:1; grid-row:3; max-width:64ch; margin-top:var(--v1); }
  .uvod .metrika { grid-column:2; border-top:0; border-bottom:0;
                   padding:0; margin:0; gap:var(--r4); }
}


/* ------------------------------------------------------------------ *
 *  ISPOD LISTA — obrazlozenje i poziv na skup                         *
 *  Isti potez kao zaglavlje lista: naslov levo, sadrzaj desno, na     *
 *  liniji. Bez kartica i senki; stranica ostaje nacrt.                *
 * ------------------------------------------------------------------ */
.list { position:relative; }
.posle { position:relative; z-index:3; padding:0 0 var(--r8); }
.posle .stub { height:auto; display:block; }
.blok { display:grid; grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);
        gap:var(--r3) var(--jaz); align-items:start;
        padding:var(--r6) 0; border-top:1px solid var(--linija2); }
.blok h2 { font:700 var(--t28)/1.12 Inter,sans-serif; letter-spacing:-.025em;
           margin:var(--r1) 0 0; max-width:18ch; }
.blok p { margin:0; font-size:var(--t15); line-height:1.62; color:var(--tiho);
          max-width:62ch; }
.blok .mesto { display:block; margin:var(--r2) 0 0; font:400 var(--t13)/1.5 'JetBrains Mono',monospace;
               color:var(--siva-lbl); }
.linkovi { display:flex; flex-wrap:wrap; gap:var(--r2); margin:var(--r4) 0 0; }
.link { font:500 var(--t11)/1 'JetBrains Mono',monospace; letter-spacing:.14em;
        text-transform:uppercase; color:var(--tiho); text-decoration:none;
        border:1px solid var(--linija2); padding:11px 18px;
        transition:color .18s ease, border-color .18s ease; }
.link:hover { color:var(--fg); border-color:var(--fg); }
.link.glavna { color:var(--fg); border-color:var(--crvena); }
.link.glavna:hover { background:var(--crvena); border-color:var(--crvena); color:#ECE9E3; }
.link:focus-visible { outline:2px solid var(--crvena); outline-offset:3px; }
@media (max-width:899px) {
  .blok { grid-template-columns:minmax(0,1fr); padding:var(--r4) 0; }
  .blok h2 { max-width:none; }
}

/* ------------------------------------------------------------------ *
 *  VAGON — 32 prozora, po jedan za svakog sagovornika.                *
 *  Nije ukras: zamenjuje apstraktno "01 / 32". Upaljen je prozor      *
 *  cijim odgovorima gledas, a svaki je i dugme. Telo vagona je ceo list, pa  *
 *  ovde stoje samo prozori — kupe u kom gledalac sedi.               *
 * ------------------------------------------------------------------ */
.vagon-red { display:flex; align-items:center; gap:var(--r2); min-width:0; }
.vagon { height:24px; width:auto; max-width:100%; overflow:visible; flex:0 1 auto; }
.vagon .telo  { fill:none; stroke:var(--linija2); stroke-width:1.4; }
.vagon .krov  { stroke:var(--linija); stroke-width:1; }
.vagon .veza  { stroke:var(--linija2); stroke-width:1.6; fill:none; }
.vagon .sina  { stroke:var(--linija); stroke-width:1.2; }
.vagon .prozor { fill:var(--izdignuto); stroke:var(--linija2); stroke-width:1;
                 cursor:pointer; transition:fill .22s ease, stroke .22s ease; }
.vagon .prozor:hover { stroke:var(--fg); }
/* upaljen prozor: svetlo iznutra, crveni okvir — jedno mesto, jedan covek */
.vagon .prozor.gori { fill:var(--crvena); stroke:var(--crvena); }
.vagon .prozor:focus-visible { outline:2px solid var(--crvena); outline-offset:2px; }
@media (prefers-reduced-motion: reduce) { .vagon .prozor { transition:none; } }
@media (max-width:899px) { .vagon { display:none; } }

.posle .potpis { padding:var(--r4) 0 0; border-top:1px solid var(--linija);
                 max-width:none; line-height:1.6; }

/* Kockice idu pod sliku: red prozora je sirok kao stubac sa portretom
   i poravnat s njim. Prozor je na ekranu oko 6px, pa svaki ima
   nevidljivo sire polje za pogodak — izgled sitan, klik pouzdan.     */
.vagon-red { display:flex; flex-direction:column; align-items:stretch; gap:11px;
             width:var(--ploca); margin-left:var(--okvirni); min-width:0; }
.vagon-red .brojac { align-self:flex-end; }
.vagon { width:100%; height:auto; flex:1 1 auto; overflow:visible; }
.vagon .meta { fill:transparent; cursor:pointer; }
.vagon .meta:focus-visible { outline:2px solid var(--crvena); outline-offset:1px; }
/* merenja se vracaju u donji red, levo od jezika i teme */
.mera .sastav { padding:0; border:0; margin:0; flex:1 1 auto; }

/* SR/EN i tema idu gore uz nadnaslov, pa donji red ostaje samo brojevima.
   Na niskom ekranu (720) to vraca oko 28px odgovorima.                  */
.prekidaci { display:flex; gap:10px; }
/* Jedan red, dve strane: kockice pod slikom levo, merenja desno —
   drze ravnotezu i stede ceo red visine.                           */
.mera { align-items:flex-end; gap:var(--jaz); }
.mera .vagon-red { flex:0 0 var(--ploca); }
.mera .sastav { flex:1 1 auto; justify-content:flex-end; }
@media (min-width:900px) and (min-height:800px) {
  /* Metrika ostaje GORE, u liniji sa nadnaslovom, uz desnu ivicu kolone.
     Prekidaci su otisli dole uz fotku; metrika nije isla s njima.     */
  .uvod .metrika { grid-row:1 / span 3; align-self:start; justify-self:end; }
  .mera { padding-top:var(--v1); }
}
/* Nizak ekran: raspored se NE menja, samo se slog i razmaci stisnu. */
@media (min-width:900px) and (max-height:835px) {
  /* Na niskom ekranu slika ne sme da spadne na 115px: dopunska
     biografija ustupa mesto, jer je identitet coveka preci.        */
  .ploca .biografija { display:none; }
  .uvod h1 { font-size:clamp(23px, 2vw, 31px); }
  .uvod .podnaslov { font-size:var(--t13); }
  .citat { font-size:var(--t18); }
}

/* Uvodni blok ide celom sirinom, ali u dve kolone: sirina je iskoriscena,
   a red ostaje ispod 80 znakova. Pun red od 1174px nosi oko 130.       */
/* Dve kolone samo gde ima sirine: .blok.uvodni je jaci od mobilnog
   pravila za .blok, pa je na telefonu naslov padao u stubac od 87px. */
@media (min-width:900px) {
  .blok.uvodni { grid-template-columns:minmax(0,.58fr) minmax(0,1.42fr); }
}
.blok.uvodni h2 { max-width:14ch; }
.kolone { columns:2; column-gap:var(--jaz); column-rule:1px solid var(--linija); }
.kolone p { margin:0 0 var(--r2); font-size:var(--t15); line-height:1.62;
            color:var(--tiho); break-inside:avoid; }
.kolone p:first-child { color:var(--fg); font-size:var(--t18); line-height:1.5; }
.kolone p:last-child { margin-bottom:0; }
@media (max-width:899px) { .kolone { columns:1; column-rule:none; } }

/* Kota sa pet podeoka: pet jednakih polja uz odgovore, po jedno za svako
   pitanje. Pali se ono cije je pitanje u vidiku.                        */
.kote-pitanja { display:none; }
@media (min-width:900px) and (min-height:800px) {
  /* Crvena stoji tu jer kota nosi posao — kaze gde si medju pet pitanja.
     Crta ispred citata je zato bela: ona samo istice, ne obavestava.  */
  .kote-pitanja { display:flex; flex-direction:column; gap:5px; padding:2px 0; }
  .kote-pitanja i { flex:1 1 0; width:2px; background:var(--linija);
                    transition:background .3s ease; }
  .kote-pitanja i.vid { background:var(--crvena); }
}
@media (prefers-reduced-motion: reduce) { .kote-pitanja i { transition:none; } }
.odg-okno { min-width:0; }

/* SR/EN i tema stoje u liniji sa gornjom ivicom fotografije i uz desnu
   ivicu kolone. Zato sede u .sredina, a ne u zaglavlju: panel ima
   padding var(--v4) var(--okvirni), pa su to tacno te dve mere.
   Van .okno su namerno — .okno ima overflow:hidden i odseklo bi ih.   */
@media (min-width:900px) and (min-height:800px) {
  .sredina > .prekidaci { position:absolute; z-index:4;
                          top:var(--v4); right:0; }
}
@media (max-width:899px) {
  .sredina > .prekidaci { justify-content:flex-end; margin:0 0 var(--r2); }
}

/* Pitanje bez odgovora drzi prostor umesto da ga nema: prosek izmerenih
   odgovora je 4,0 reda (95px pri visini reda 23,7). Tako raspored sada
   izgleda isto kao kad odgovor stigne.                                 */
.par.ceka p.uskoro { margin:0 0 0 38px; max-width:62ch;
                     font-size:var(--t15); line-height:1.58;
                     color:var(--siva-lbl); min-height:calc(4 * 1.58em); }
.par.ceka .q { color:var(--siva-lbl); }

/* Zvuk je prekidac uz SR / EN, iste porodice. Ukljucen dobija akcenat,
   kao glavni link u pozivu — jedan jezik za "ovo je upaljeno".        */
#zvuk[aria-pressed="true"] { color:var(--fg); border-color:var(--crvena); }


/* ------------------------------------------------------------------ *
 *  HEKSAGONI UZ NASLOVE                                               *
 *  Na sklopnom crtezu se delovi obelezavaju numerisanim balonom; kod  *
 *  Crvene pilule je taj oblik sestougaona navrtka. Blokovi su zato    *
 *  numerisani, a iza naslova stoji bleda navrtka kao vodeni zig —     *
 *  bogatije, a i dalje crtez, ne ukras.                               *
 * ------------------------------------------------------------------ */
.celo { position:relative; }
.navrtka-br { width:48px; height:44px; overflow:visible; flex:0 0 auto;
              margin-right:-4px; }
.navrtka-spolja { fill:none; stroke:var(--crvena); stroke-width:1.4; stroke-linejoin:round; }
.navrtka-unutra { fill:none; stroke:var(--linija2); stroke-width:1; stroke-linejoin:round; }
.navrtka-tekst  { font:500 13px 'JetBrains Mono',monospace; fill:var(--fg); letter-spacing:.04em; }
.navrtka-veza   { stroke:var(--linija2); stroke-width:1; }
.zig { position:absolute; z-index:0; pointer-events:none;
       left:-62px; top:50%; width:220px; height:200px;
       transform:translateY(-50%); opacity:.5; }
.zig-l { fill:none; stroke:var(--linija); stroke-width:1; stroke-linejoin:round; }
.celo > .oznaka, .celo > h2 { position:relative; z-index:1; }
@media (max-width:899px) { .zig { display:none; } }

/* ------------------------------------------------------------------ *
 *  NAPRED / NAZAD                                                     *
 *  Strelica je glavni oblik jer odmah kaze sta radi; jarbol, postolje *
 *  i svetiljka daju zeleznicki karakter a ne zaklanjaju znacenje.     *
 *  Ne reaguje na prelazak misem — samo na klik. Pre klika kaze da je  *
 *  ziv tako sto mu svetiljka tiho gori.                               *
 * ------------------------------------------------------------------ */
.strelica .jarbol   { stroke:var(--linija2); stroke-width:1.8; }
.strelica .postolje { fill:none; stroke:var(--linija2); stroke-width:1.3; stroke-linejoin:round; }
.strelica .kota     { stroke:var(--fg); stroke-width:1.6; }
.strelica .granicnik{ stroke:var(--linija2); stroke-width:1.4; }
.strelica .vrh      { fill:var(--fg); }
.strelica .znak     { transition:transform .26s cubic-bezier(.3,.8,.3,1); }
/* svetiljka gori dok ima kud da se ide — to je znak da je ziv */
.strelica .lampa    { fill:var(--crvena); stroke:none; opacity:.9; }
.strelica:hover:not([disabled]) .lampa { opacity:1; }
.strelica:hover:not([disabled]) .kota,
.strelica:hover:not([disabled]) .vrh   { stroke:var(--fg); }
/* pokret tek na klik */
.strelica.radi .znak { animation:znak-kreni .42s cubic-bezier(.3,.8,.3,1); }
@keyframes znak-kreni {
  40%  { transform:translateX(var(--pomak)); }
  100% { transform:none; }
}
.strelica.levo  { --pomak:-9px; }
.strelica.desno { --pomak: 9px; }
.strelica[disabled] { opacity:.3; cursor:default; }
.strelica[disabled] .lampa { fill:var(--linija2); opacity:1; }
@media (prefers-reduced-motion: reduce) { .strelica.radi .znak { animation:none; } }

/* ------------------------------------------------------------------ *
 *  PLOCA: slika, pa ime i uloga pod njom                              *
 *  Desna kolona time pocinje od vrha, pa svih pet pitanja ima ceo     *
 *  stubac umesto da krecu ispod imena, uloge, biografije i citata.    *
 * ------------------------------------------------------------------ */
.ploca { display:flex; flex-direction:column; min-height:0; }
/* Fotografija je fiksan kvadrat i puni sirinu ploce — ne smanjuje se
   po preostaloj visini. Da bi ploca ipak stala, sirina ploce je
   vezana za visinu ekrana (vidi --ploca), pa se podesava tamo.     */
.ploca .okvir { flex:0 0 auto; width:100%; height:auto; aspect-ratio:1/1; }
.ploca h2 { font-size:var(--t22); margin:var(--v2) 0 0; }
.ploca .uloga { max-width:none; margin-top:6px; font-size:var(--t13); line-height:1.45; }
.ploca .biografija { max-width:none; margin:var(--v2) 0 0; font-size:var(--t13); }
.ploca .citat { font-size:var(--t18); max-width:none; margin:var(--v2) 0 0;
                padding:4px 0 4px var(--r2); }
.ploca .sastavnica { margin-top:auto; }
.pitanja { display:flex; flex-direction:column; min-height:0; }
.pitanja .odg { margin-top:0; }

/* Ploca je licna karta: slika, ime, uloga, sastavnica. Citat i
   biografija su dopuna i pojavljuju se tek kad ekran ima visine —
   u stupcu od 140px citat uzme cetiri reda i izgura sastavnicu.   */
@media (max-height:1006px) { .ploca .citat, .ploca .biografija { display:none; } }
@media (min-height:1007px) { :root { --ploca-tekst: 251px; } }  /* + citat */

/* Prekid kruga: visina teksta pod slikom zavisila je od sirine ploce,
   a sirina ploce od visine teksta — pa nijedna konstanta nije mogla da
   bude tacna. Sada tekst ima poznat NAJVECI broj redova, pa je
   --ploca-tekst stvarna mera a ne procena. Puna titula ostaje u
   stranici (atribut title) i cita se na prelazak misem.             */
.ploca h2, .ploca .uloga { display:-webkit-box; -webkit-box-orient:vertical;
                           overflow:hidden; }
.ploca h2 { -webkit-line-clamp:2; }
.ploca .uloga { -webkit-line-clamp:3; }

/* "Pet pitanja" u crvenoj — isti potez kao hero na naslovnoj Crvene
   pilule, pa stranica govori istim jezikom kao i sajt.              */
h1 .zar { color:var(--crvena); }
/* .tema nosi margin-left:auto iz starog reda; u prekidacima to razdvaja
   dugmad za 90px umesto zadatih 10.                                  */
.prekidaci .tema { margin-left:0; }
/* Podloga u boji strane: kad linija pitanja padne na visinu dugmadi
   (na engleskom, gde napomena o prevodu gura prvo pitanje nize),
   kota se prekida oko natpisa — kao na nacrtu, a ne preko njega.    */
.prekidaci .tema { background:var(--bg); }

/* Preliv pri smeni jezika: stranica se ne ucitava ponovo, pa zvuk tece
   dalje i pregledac ne trazi novi dodir za ton.                      */
.stub { transition:opacity .17s ease; }
.stub.menja-se { opacity:0; }
@media (prefers-reduced-motion: reduce) {
  .stub { transition:none; }
  .stub.menja-se { opacity:1; }
}

/* Povratak na Price stoji u praznom cosnom natpisu gore levo — mesto
   gde na nacrtu stoji referenca, pa ne uzima visinu od sadrzaja.
   .ram ne prima klik, pa se njemu vraca.                            */
.ram .nazad { pointer-events:auto; text-decoration:none; display:inline-flex;
              align-items:center; gap:7px; padding:3px 0;
              transition:color .18s ease; }
.ram .nazad::before { content:""; width:14px; height:1px; background:currentColor;
                      position:relative; }
.ram .nazad::after { content:""; position:absolute; left:0; top:50%;
                     width:5px; height:5px; border-left:1px solid currentColor;
                     border-bottom:1px solid currentColor;
                     transform:translateY(-50%) rotate(45deg); }
.ram .nazad { position:relative; padding-left:7px; }
.ram .nazad:hover { color:var(--fg); }
.ram .nazad:focus-visible { outline:2px solid var(--crvena); outline-offset:3px; }

/* Točkovi: preneto iz style="" atributa (CSP sajta ih blokira). */
.masina .tocak[data-tocak="0"] { transform-origin:-2164.250px 100.0px;animation-delay:calc(var(--brzina, 56s) / 4 * -0.0000); }
.masina .tocak[data-tocak="1"] { transform-origin:-2075.750px 100.0px;animation-delay:calc(var(--brzina, 56s) / 4 * -0.3819); }
.masina .tocak[data-tocak="2"] { transform-origin:-1524.250px 100.0px;animation-delay:calc(var(--brzina, 56s) / 4 * -0.7638); }
.masina .tocak[data-tocak="3"] { transform-origin:-1435.750px 100.0px;animation-delay:calc(var(--brzina, 56s) / 4 * -0.1457); }
.masina .tocak[data-tocak="4"] { transform-origin:-964.250px 100.0px;animation-delay:calc(var(--brzina, 56s) / 4 * -0.5276); }
.masina .tocak[data-tocak="5"] { transform-origin:-875.750px 100.0px;animation-delay:calc(var(--brzina, 56s) / 4 * -0.9095); }
.masina .tocak[data-tocak="6"] { transform-origin:-324.250px 100.0px;animation-delay:calc(var(--brzina, 56s) / 4 * -0.2914); }
.masina .tocak[data-tocak="7"] { transform-origin:-235.750px 100.0px;animation-delay:calc(var(--brzina, 56s) / 4 * -0.6733); }
.masina .tocak[data-tocak="8"] { transform-origin:235.750px 100.0px;animation-delay:calc(var(--brzina, 56s) / 4 * -0.0552); }
.masina .tocak[data-tocak="9"] { transform-origin:324.250px 100.0px;animation-delay:calc(var(--brzina, 56s) / 4 * -0.4371); }
.masina .tocak[data-tocak="10"] { transform-origin:875.750px 100.0px;animation-delay:calc(var(--brzina, 56s) / 4 * -0.8190); }
.masina .tocak[data-tocak="11"] { transform-origin:964.250px 100.0px;animation-delay:calc(var(--brzina, 56s) / 4 * -0.2009); }
.masina .tocak[data-tocak="12"] { transform-origin:1435.750px 100.0px;animation-delay:calc(var(--brzina, 56s) / 4 * -0.5828); }
.masina .tocak[data-tocak="13"] { transform-origin:1524.250px 100.0px;animation-delay:calc(var(--brzina, 56s) / 4 * -0.9647); }
.masina .tocak[data-tocak="14"] { transform-origin:2075.750px 100.0px;animation-delay:calc(var(--brzina, 56s) / 4 * -0.3466); }
.masina .tocak[data-tocak="15"] { transform-origin:2164.250px 100.0px;animation-delay:calc(var(--brzina, 56s) / 4 * -0.7285); }
.masina .tocak[data-tocak="16"] { transform-origin:2635.750px 100.0px;animation-delay:calc(var(--brzina, 56s) / 4 * -0.1104); }
.masina .tocak[data-tocak="17"] { transform-origin:2724.250px 100.0px;animation-delay:calc(var(--brzina, 56s) / 4 * -0.4923); }
.masina .tocak[data-tocak="18"] { transform-origin:3275.750px 100.0px;animation-delay:calc(var(--brzina, 56s) / 4 * -0.8742); }
.masina .tocak[data-tocak="19"] { transform-origin:3364.250px 100.0px;animation-delay:calc(var(--brzina, 56s) / 4 * -0.2561); }

/* ---- Ugradnja u sajt (tools/uvoz-pet-pitanja.py) ----
   Stoti deo visine lista (ekran manje heder) — zamenjuje vh u merama strane. */
:root { --lvh: calc((100vh - var(--hdr-h, 56px)) / 100); }
/* Na telefonu je ram bio vezan za ekran; ispod lepljivog hedera bi mu gornji
   ugao i natpis „← Priče" otišli pod heder. Vezan za list (.list je relative). */
@media (max-width:899px) { .ram { position:absolute; } }
/* Unutrašnji luk točka (Denis, S144): u --linija2 je na tamnom merio ~1,6:1 i
   na slabijem IPS ekranu se nije video. Sredina između --linija2 i --tiho
   (guma) daje ~3:1 — vidljiv, a i dalje sporedan u odnosu na gumu. */
.masina .luk { stroke:color-mix(in srgb, var(--tiho) 55%, var(--linija2)); stroke-width:1.5; }
/* Mašinerija u konjaku (Denis, S144): crtala se u --tiho, istom tonu kao
   sporedni tekst (5,5:1 tamna, 4,9:1 svetla), pa je bila jaka kao tekst i na
   svetloj se lepila za njega. Topao ton je odvaja od teksta i bojom i snagom:
   linija 3,9:1 na tamnoj, 2,6:1 na svetloj. Tokeni su prepisani samo unutar
   .masina — paleta sajta ostaje siva i crvena. Luk ostaje sredina guma/sanduk.
   S145 (Denis: „boja je dobra, ali i dalje odvlači pažnju koliko i sadržaj"):
   isti konjak, 18 % bliže pozadini — linija 3,0:1 na tamnoj (bila 3,9),
   2,1:1 na svetloj (bila 2,6); luk 2,2 / 1,8. */
.masina { --tiho:#745A3B; --linija2:#3E3223; }
html[data-theme="light"] .masina, body[data-theme="light"] .masina { --tiho:#BB9C76; --linija2:#D3C2A6; }
/* Na telefonu je pojas bio na 40% providnosti; sa konjakom bi skoro nestao.
   Jačinu sada nosi samo boja — jedan mehanizam, ne dva naslagana. */
@media (max-width:899px) { .masina { opacity:1; } }
/* Biografija nije u budžetu --ploca-tekst (ime 2 + uloga 3 + citat), pa je
   ploču punila tek-tek na listu od 1080 — jedinoj proverenoj visini — a niže
   se prelivala: ime i uloga su se skupljali i sekli. Predaja kaže da je
   identitet preči od dopune, pa biografija čeka list od bar 1080 px. */
@media (max-height:1135px) { .ploca .biografija { display:none; } }
/* Heder, futer i baner za kolačiće nasleđuju slog od <body>, a strana telu
   daje svoj (proredak 1,62 umesto 1,7) — futer je bio 16 px niži nego na
   Naslovnoj i Uslugama. Vraća im se slog sajta (base.css body). */
.hdr, .ftA, .cpc { font-family:var(--font-sans); font-size:18px; line-height:1.7; font-weight:400; }
/* Bez strelica (Denis, S144: „baš su nezgrapne"). Na sledećeg sagovornika se
   prelazi prevlačenjem FOTOGRAFIJE — prstom ili mišem — strelicama na
   tastaturi i kockicama pod slikom. Natpis „prevucite" (skripta ga premešta u
   .sredina) stoji iznad fotografije na svakom ekranu, ne samo na dodiru. */
.strelica { display:none !important; }
.okvir { cursor:grab; touch-action:pan-y; user-select:none; -webkit-user-select:none; }
.okvir:active { cursor:grabbing; }
.okvir img { -webkit-user-drag:none; pointer-events:none; }
.sredina > .prevuci { display:flex; position:absolute; z-index:4; left:var(--okvirni);
  bottom:calc(100% + 9px); margin:0; padding:0; gap:10px; align-items:center;
  font:500 var(--t11)/1 'JetBrains Mono',monospace; letter-spacing:.16em; color:var(--tiho); }
/* Znak ostaje stalno (Denis, S144: „izgubili smo indikator") — strana ga je
   posle prvog prevlačenja skrivala; ovde je indikator, ne jednokratni savet. */
.sredina > .prevuci[hidden] { display:flex; }
.sredina > .prevuci svg { width:72px; height:15px; overflow:visible; }
.sredina > .prevuci path { stroke:var(--tiho); stroke-width:1.4; fill:none; }
.sredina > .prevuci .ruka { animation:mahni-pp 2.4s ease-in-out infinite; }
/* Tačka je na krajevima hoda padala na 35 % — na tamnom ekranu se čitalo kao
   da znak nestaje (Denis, S144). Sada 70 %. Znak na svom sloju: Safari ume da
   „trepne" elementom ispod sloja sa mix-blend (zrno). */
.sredina > .prevuci { transform:translateZ(0); }
/* Računar (Denis, S144): znak stoji desno, iznad linije razdvajanja, odmah
   iznad dugmadi ZVUK i SR/EN i poravnat sa desnom ivicom SR/EN. Tu je i
   navigacija: klik na levu polovinu = prethodni, na desnu = sledeći. */
@media (min-width:900px) {
  .sredina > .prevuci { left:auto; right:0; bottom:calc(100% + 9px); }
}
@media (hover:hover) and (pointer:fine) {
  .sredina > .prevuci { cursor:pointer; }
  /* Svetli samo strelica pod mišem (Denis, S144: „zato sam ih i razdvajao") —
     skripta stavlja na-levo / na-desno po polovini znaka. */
  .prevuci.na-levo .str-levo path, .prevuci.na-desno .str-desno path { stroke:var(--fg); }
}
/* Strelica koja nema kuda (prvi / poslednji sagovornik) ostaje prigušena. */
.prevuci.bez-levo .str-levo, .prevuci.bez-desno .str-desno { opacity:.3; }
.prevuci.bez-levo.na-levo, .prevuci.bez-desno.na-desno { cursor:default; }
.prevuci.bez-levo.na-levo .str-levo path, .prevuci.bez-desno.na-desno .str-desno path { stroke:var(--tiho); }
/* Tačka šeta samo unutar razmaka između strelica (±4), da ih ne dodiruje;
   na računaru miruje (Denis, S144). */
@keyframes mahni-pp { 0%,100% { transform:translateX(-4px); opacity:.7; } 50% { transform:translateX(4px); opacity:1; } }
@media (hover:hover) and (pointer:fine) { .sredina > .prevuci .ruka { animation:none; } }
@media (prefers-reduced-motion: reduce) { .sredina > .prevuci .ruka { animation:none; } }
/* „01 / 32" sam po sebi ne kaže čega (Denis, S144) — na telefonu dobija
   oznaku. Na računaru stoji odmah pod redom prozora vagona, a kolona pod
   slikom je uska (110 px na 1366) — oznaka bi ga prelomila u dva reda. */
@media (max-width:899px) {
  .brojac { white-space:nowrap; }
  .brojac::before { content:"Odgovorilo\00a0\00a0"; color:var(--siva-lbl); }
  html[lang="en"] .brojac::before { content:"Answered\00a0\00a0"; }
}
/* Kockice na telefonu: red od 32 je ispod 900 px skriven (prozor uži od 4 px),
   pa se ovde slažu u dva reda kao dugmad (skripta ih pravi i drži u koraku sa
   prozorima vagona). U redu je pola govornika (--kolone iz skripte), sada
   2 × 14 — sa 16 je drugi red ostajao do pola prazan (Denis, S145). Na širem
   ekranu ostaje vagon. */
.kocke { display:none; }
@media (max-width:899px) {
  .mera .vagon-red { flex:1 1 100%; width:100%; margin-left:0; }
  .kocke { display:grid; grid-template-columns:repeat(var(--kolone, 14), minmax(0, 1fr)); gap:7px 5px; }
  .kocka { appearance:none; -webkit-appearance:none; margin:0; padding:0; height:28px;
           border:1px solid var(--linija2); border-radius:0; background:var(--izdignuto); cursor:pointer; }
  .kocka.gori { background:var(--crvena); border-color:var(--crvena); }
  .kocka:focus-visible { outline:2px solid var(--crvena); outline-offset:2px; }
}
/* ==== Usklađivanje sa sajtom — nalazi dizajn provere (S144) ==== */

/* Kontrast (AA 4,5:1, standard sajta od S131). Tamna: tamnocrvena na tamnom
   je merila 2,33 (natpis), crvena 3,39 (uloga, brojevi pitanja), siva 3,54
   („← Priče", mere, „Odgovor uskoro."). Crveni tekst ide na sajtov token za
   crveno na tamnoj podlozi (--brand-on-plate, ~5,9); siva oznaka na 4,65 —
   i dalje tamnija od --tiho, pa redosled važnosti ostaje. Svetla: --tiho i
   siva oznaka su merile 4,39 → 4,87. Naslov „Pet pitanja" i grafika ostaju
   u crvenoj sajta (krupan tekst i crtež traže 3:1). */
/* data-theme stoji i na <html> i na <body>, a strana boje zadaje na oba —
   zato html[…], body[…] (jače od pravila strane [data-theme=…]). */
html[data-theme="dark"], body[data-theme="dark"] { --siva-lbl:#7E7D78; }
[data-theme="dark"] .oznaka,
[data-theme="dark"] .uloga,
[data-theme="dark"] .pitanje .br { color:var(--brand-on-plate, #f05942); }
html[data-theme="light"], body[data-theme="light"] { --tiho:#67645D; --siva-lbl:#67645D; }

/* Kote oko fotografije: uglovi vire 5 px van slike, a .okno (overflow:hidden,
   zbog klizanja) ih je seklo — gornja dva na računaru, sva četiri na telefonu.
   Okno se proširi za 6 px, panel vrati isto toliko unutra: sadržaj stoji gde
   je stajao, uglovi se vide, a od suseda ne viri ništa (njegovih 6 px je
   prazna ispuna). */
.okno { margin-top:-6px; }
.panel { padding-top:6px; }
@media (max-width:899px) {
  .okno { margin:-6px -6px 0; }
  .panel { padding:6px 6px var(--r4); }
}
/* Svi paneli u traci dobijaju visinu najvišeg (onog sa odgovorima), a mreža
   u nižem panelu je razvlačila redove — kod sagovornika bez odgovora otvarala
   se praznina između fotografije i pitanja (Denis, S144). Redovi od vrha;
   list (jedan ekran) ima svoje redove i ovo ga ne dira. */
@media (max-width:899px), (min-width:900px) and (max-height:799px) {
  .panel { align-content:start; }
  /* …i ispod pitanja: traka je bila visoka kao najviši panel (Markovih pet
     odgovora), pa je kod ostalih pod „Odgovor uskoro." zjapilo do kockica.
     Svaki panel ima svoju visinu, a okno prati prikazanog (skripta). */
  .pruga { align-items:flex-start; }
  .okno { transition:height .45s cubic-bezier(.32,.72,.28,1); }
}
@media (prefers-reduced-motion: reduce) { .okno { transition:none; } }

/* Razmaci. (1) „Vidimo se" je nasleđivao staro .poziv { margin-top:96px } —
   između blokova je bilo 144 px umesto 48. (2) Crvena uloga je na telefonu
   ležala na liniji sastavnice (0 px). (3) „← Priče" je ležao na natpisu
   „Pet pitanja" (0 px telefon, 5 px računar). */
.blok.poziv { margin-top:0; }
.ploca .uloga { margin-bottom:12px; }
/* Ime je bilo ~9 px ispod slike, a donje kote vire još 5 px — ime se lepilo
   za ugao (Denis, S144). Najmanje 14 px; u toku (telefon, nizak računar),
   gde visina nije tesna, 22 px. */
.ploca h2 { margin-top:max(var(--v2), 14px); }
@media (max-width:899px), (min-width:900px) and (max-height:799px) { .ploca h2 { margin-top:22px; } }
:root { --ploca-tekst:197px; }                                 /* +12 razmak iznad sastavnice, +4 ime */
@media (min-height:1007px) { :root { --ploca-tekst:267px; } }  /* isti prag kao citat */
@media (min-width:900px) and (min-height:800px) { .uvod { padding-top:calc(var(--v4) + 35px); } }
@media (max-width:899px) { .uvod { padding-top:calc(var(--v4) + 34px); } }

/* Telo teksta najmanje 18 px (canon, Doc 04: „minimum body 18px desktop").
   Odgovori, podnaslov i pasusi ispod lista bili su 15 px; pitanja idu na 16
   da ostanu korak ispod odgovora, a uvodni pasus korak iznad. Na 2240+ strana
   ionako ide krupnije — max() tada pušta njenu meru. Rezervisan prostor za
   neodgovorena pitanja je u em, pa raste zajedno sa slovima. */
.par p, .par.ceka p.uskoro, .uvod .podnaslov, .blok p, .kolone p { font-size:max(18px, var(--t15)); }
.kolone p:first-child { font-size:max(21px, var(--t18)); }
.pitanje .q { font-size:max(16px, var(--t15)); }

/* Zrno (Denis, S144: „učitava se ko neka spora baba"). Mreža nije kriva
   (TTFB 50 ms, load 0,56 s) — kriv je SVG feTurbulence koji se računa preko
   CELOG ekrana i stapa (overlay) sa svim ispod, dok se točkovi vrte: pregledač
   ga preračunava pri crtanju i skrolu. Isti filter, isti parametri, ali kao
   pločica 240 px koja se ponavlja — računa se jednom i pamti; stitchTiles
   čini da se šavovi ne vide. */
.zrno { display:none; }
body.page-pet-pitanja::before {
  content:""; position:fixed; inset:0; z-index:4; pointer-events:none;
  opacity:var(--zrno); mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E") repeat;
}
/* Futer iznad zrna i vinjete — pričvršćeni su preko celog ekrana i prljali
   su ga (tamniji pravougaonik ispod teksta). */
.ftA { z-index:7; }

/* Blokovi ispod lista na telefonu (Denis, S144: „nisu baš najlepše raspodeljeni
   u celine"). Između blokova je bilo 64 px, a unutar bloka 16–24 — premala
   razlika da bi se blok čitao kao celina. Sada 96 između, 12–16 unutra.
   Naslov „Crvena pilula i Cyber Security Summit" je na 14ch padao u tri
   kratka reda — na telefonu ide punom širinom. Dugmad su se lomila 2 + 1
   (Prijava sama ispod, kao zaostatak): glavno dugme ide puno na vrh, ostala
   dva jednaka ispod, sva tri visoka 44 px. */
@media (max-width:899px) {
  .posle .blok { padding:var(--r6) 0; row-gap:var(--r2); }
  .blok.uvodni h2 { max-width:none; }
  .celo > .oznaka { margin-bottom:12px; }
  .linkovi { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .linkovi .link { text-align:center; padding:16px 10px; }
  .linkovi .link.glavna { grid-column:1 / -1; order:-1; }
}

/* Uspravan tok na niskom računaru (list < 744 px, npr. 1280×720, 1366×768): strana
   teče — fotografija levo, odgovori desno bez unutrašnjeg skrola — umesto da
   sve gura na jedan ekran sa portretom od 72 px. Pojas i ram su u osnovnim
   pravilima pričvršćeni za ekran; ovde idu uz list, kao na telefonu.
   Portret ne zavisi od visine ekrana (u toku visina nije tesna). */
@media (min-width:900px) and (max-height:799px) {
  .masina, .ram { position:absolute; }
  .list .stub { padding-bottom:var(--pojas); }
  .uvod { padding-top:calc(var(--v4) + 34px); }
  :root { --ploca:clamp(200px, 21vw, 268px); }
  .sredina > .prekidaci { justify-content:flex-end; margin:0 0 var(--r2); }
}
/* Niži list (do ~1000 px): pojas sa točkovima na 12,5 % visine lista umesto
   17 % — ploči vraća ~30 px, a crtež ostaje isti, samo manji. */
@media (min-width:900px) and (min-height:800px) and (max-height:1056px) {
  :root { --pojas:clamp(80px, min(9.3vw, calc(12.5 * var(--lvh))), 300px); }
}

/* Ispod lista nema točkova, a pravilo lista je svakom .stub davalo donju
   ispunu visoku kao pojas — pod „Vidimo se" i pod potpisom zjapilo je po
   ~300 px pred futerom (Denis, S144, snimak). */
.posle .stub { padding-bottom:0; }

/* Partneri — pojas pred futerom. Isti potez kao blokovi iznad (linija,
   vazduh), ali centriran: ovo je potpis cele strane, ne još jedan blok. */
.partneri { display:grid; justify-items:center; gap:var(--r4);
  margin:var(--r6) 0 0; padding:var(--r8) 0 var(--r6); border-top:1px solid var(--linija2); }
.partneri-ozn { display:flex; align-items:center; gap:14px; margin:0;
  font:500 var(--t11)/1 'JetBrains Mono',monospace; letter-spacing:.24em;
  text-transform:uppercase; color:var(--tiho); }
.partneri-ozn i { width:28px; height:1px; background:var(--crvena); }
.partneri-ozn span::before { content:"Medijski partneri"; }
html[lang="en"] .partneri-ozn span::before { content:"Media partners"; }
.partneri-par { display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:var(--r4) clamp(28px, 4.5vw, 64px); --logo:64px; }
.partner-cp, .partner-cf { display:flex; align-items:center; text-decoration:none;
  transition:opacity .18s ease; }
.partner-cp { gap:16px; color:var(--fg); }
.partner-cp svg { height:var(--logo); width:auto; aspect-ratio:1005.84/1359.36; color:var(--crvena); }
.partner-cp span { font:400 calc(var(--logo) * .47)/1 'JetBrains Mono',monospace; letter-spacing:-.01em; }
.partner-cp b { font-weight:400; color:var(--crvena); }
/* Bez „×" (Denis, S144) — tanka linija razdvaja, a ne suprotstavlja. */
.partneri-x { width:1px; height:calc(var(--logo) * .8); background:var(--linija2); }
.partner-cf { position:relative; height:var(--logo); aspect-ratio:1152/400; }
.cf-natpis { position:absolute; inset:0; background:var(--fg);
  -webkit-mask:url("znaci/cyberfy-pun.png") left center / contain no-repeat;
          mask:url("znaci/cyberfy-pun.png") left center / contain no-repeat; }
.partner-cf img { position:absolute; left:0; top:0; height:100%; width:auto; }
@media (hover:hover) { .partner-cp:hover, .partner-cf:hover { opacity:.78; } }
.partner-cp:focus-visible, .partner-cf:focus-visible { outline:2px solid var(--crvena); outline-offset:6px; }
/* Telefon: par jedan pored drugog, kao jedna celina — uspravno je „×" u
   sredini čitalo kao spisak. Ispod 360 px par ne staje, pa ide uspravno. */
@media (max-width:899px) {
  .partneri { padding:var(--r6) 0 var(--r4); }
  .partneri-par { flex-wrap:nowrap; gap:16px; --logo:34px; }
  .partner-cp { gap:10px; }
}
@media (max-width:359px) {
  .partneri-par { flex-direction:column; --logo:40px; gap:var(--r2); }
  .partneri-x { width:40px; height:1px; }
}
.posle .potpis { text-align:center; border-top:0; padding-top:0; }

/* Marker u odgovorima (S145, Denis: na Androidu je bio debela svetla traka
   preko slova, tekst se nije čitao). Strana ga je crtala kao box-shadow sa
   color-mix(crvena 24 %, transparent) — novija mogućnost, a telefonski tamni
   režim za sajtove takvu providnu senku ume da „posvetli". Sada ista boja,
   unapred izračunata i puna (crvena 24 % preko pozadine teme), kao pozadinska
   traka ispod donje 0,42em slova; clone je drži i kad se naglasak prelomi. */
.par i { box-shadow:none; background:linear-gradient(#3B1513, #3B1513) 0 100% / 100% .42em no-repeat;
         -webkit-box-decoration-break:clone; box-decoration-break:clone; }
html[data-theme="light"] .par i, body[data-theme="light"] .par i {
  background-image:linear-gradient(#E3BBB6, #E3BBB6); }
/* Strana pregledaču kaže koje je teme — tamna tema je već tamna, pa telefonski
   „tamni režim za sajtove" nema šta da prerađuje (Chrome ga tada ne pali). */
html[data-theme="dark"] { color-scheme:dark; }
html[data-theme="light"] { color-scheme:light; }

/* Slika za objavu (S145, slika.js). Dugme je poslednji red bloka sa
   pitanjima, crveno da se razlikuje od prekidača. Računar: desno, u visini
   „Odgovora 5/5" (u listu se prozor sa odgovorima skrati za njega). Telefon:
   puna širina ispod petog odgovora. Boje pune, bez color-mix (vidi marker). */
.sl-kraj { flex:0 0 auto; align-self:flex-end; margin-top:10px; padding:9px 12px;
  font:500 11px/1 'JetBrains Mono',monospace; letter-spacing:.14em; text-transform:uppercase;
  color:#F05942; background:var(--bg); border:1px solid #C52828; border-radius:0; cursor:pointer; }
html[data-theme="light"] .sl-kraj, body[data-theme="light"] .sl-kraj { color:#C52828; }
@media (hover:hover) { .sl-kraj:hover { color:#fff; background:#C52828; } }
/* Desna ivica u liniji sa SR / EN (Denis, S145): prekidači stoje uz ivicu
   .sredina, a blok sa pitanjima se završava pre bočne ispune panela. */
@media (min-width:900px) { .sl-kraj { margin-right:calc(-1 * var(--okvirni)); } }
/* Jedan ekran: dugme je UNUTAR polja sa pitanjima, u donjem desnom uglu — par
   prekidačima koji leže preko gornjeg desnog ugla (Denis, S145: „ispod polja
   deluje kao afterthought"). Donja ivica u visini „Odgovora 5/5". Tekst u
   polju dobija na dnu prostor visine dugmeta, pa se kraj odgovora odmota
   iznad njega. Niži laptop i telefon: red ispod odgovora (tamo i prekidači
   stoje u svom redu, van polja). */
@media (min-width:900px) and (min-height:800px) {
  .pitanja { position:relative; }
  .sl-kraj { position:absolute; right:0; bottom:0; margin:0 calc(-1 * var(--okvirni)) 0 0; z-index:2; }
  .odg { padding-bottom:52px; }
}
.sl-kraj:focus-visible { outline:2px solid #C52828; outline-offset:3px; }
/* Telefon (Denis, S145: „opet deluje dodato tek tako"): preko cele širine
   polja — od broja pitanja do desne ivice, kao i kockice ispod — i odmah uz
   poslednji odgovor, ne posle praznog reda. */
@media (max-width:899px) {
  .sl-kraj { align-self:stretch; min-height:48px; margin:14px 0 0; padding:14px 16px;
    font-size:12px; line-height:1.4; letter-spacing:.12em; text-align:center; }
}
html.sl-otvoren, html.sl-otvoren body { overflow:hidden; }
.sl-preklop { position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center;
  padding:16px; background:rgba(0,0,0,.72); }
.sl-preklop[hidden] { display:none; }
.sl-prozor { width:100%; max-width:1080px; height:min(calc(100dvh - 32px), 900px); display:flex; flex-direction:column;
  background:var(--bg); color:var(--fg); border:1px solid var(--linija2); }
.sl-glava { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px;
  border-bottom:1px solid var(--linija2); }
.sl-naslov { font:500 12px/1.3 'JetBrains Mono',monospace; letter-spacing:.14em; text-transform:uppercase; }
.sl-zatvori { width:40px; height:40px; font:400 26px/1 Inter,sans-serif; color:var(--fg); background:transparent;
  border:1px solid var(--linija2); cursor:pointer; }
.sl-telo { flex:1 1 auto; display:grid; grid-template-columns:minmax(0,1fr) 300px; grid-template-rows:minmax(0,1fr);
  gap:20px; padding:16px; overflow:auto; min-height:0; }
/* Pregled (Denis, S145, iPhone Safari: pregled priče je virio iz okvira gore i
   dole). Pravilo umesto računanja: okvir ima određenu visinu — na računaru sav
   prostor pored kontrola, na telefonu deo vidljive visine — a slika ga puni sa
   object-fit: contain, pa je uvek cela i u srazmeri, kakav god da je format.
   (max-height na platnu u fleksu Safari ne poštuje pri crtanju.) */
.sl-pozornica { height:100%; min-height:0; padding:12px; background:var(--izdignuto); box-sizing:border-box; }
.sl-platno { display:block; width:100%; height:100%; object-fit:contain; }
.sl-kontrole { display:flex; flex-direction:column; gap:16px; }
.sl-grupa { display:flex; flex-direction:column; gap:8px; }
.sl-ozn { font:500 11px/1 'JetBrains Mono',monospace; letter-spacing:.16em; text-transform:uppercase; color:var(--tiho); }
.sl-seg { display:flex; flex-wrap:wrap; gap:6px; }
.sl-seg button { min-height:38px; padding:8px 11px; font:500 12px/1 'JetBrains Mono',monospace; letter-spacing:.06em;
  color:var(--tiho); background:var(--bg); border:1px solid var(--linija2); border-radius:0; cursor:pointer; }
.sl-seg button small { font-size:10px; opacity:.8; }
.sl-seg button[aria-pressed="true"] { color:var(--fg); border-color:#C52828; }
.sl-seg button[hidden] { display:none; }
@media (hover:hover) { .sl-seg button:hover { color:var(--fg); border-color:var(--fg); } }
.sl-seg button:focus-visible, .sl-zatvori:focus-visible, .sl-preuzmi:focus-visible { outline:2px solid #C52828; outline-offset:2px; }
.sl-preuzmi { min-height:48px; padding:14px; font:500 13px/1 'JetBrains Mono',monospace; letter-spacing:.14em;
  text-transform:uppercase; color:#fff; background:#C52828; border:0; border-radius:0; cursor:pointer; }
.sl-preuzmi[disabled] { opacity:.6; cursor:progress; }
.sl-poruka { margin:0; padding:10px 12px; font:400 14px/1.5 Inter,sans-serif; border-left:3px solid #C52828; background:var(--izdignuto); }
.sl-poruka[hidden] { display:none; }
@media (max-width:899px) {
  .sl-preklop { padding:0; align-items:stretch; }
  .sl-prozor { height:100dvh; border:0; }
  .sl-telo { grid-template-columns:1fr; grid-template-rows:auto; gap:14px; padding:12px 16px calc(20px + env(safe-area-inset-bottom, 0px)); }
  .sl-pozornica { height:46dvh; }
}

/* Podeli (S145): treći prekidač, iste porodice kao ZVUK i SR / EN. Posle
   kopiranja veze nosi isti akcenat kao upaljen zvuk dok traje potvrda. */
.prekidaci #podeli[hidden] { display:none; }
.prekidaci #podeli.kopirano { color:var(--fg); border-color:var(--crvena); }
/* Telefon: tri dugmeta i znak za prevlačenje dele jedan red. Na 375 px je
   ostajalo 4 px između znaka i dugmeta, a na 360 px bi se preklopili — pa
   se dugmad malo stegnu (razmak, bočna ispuna, prored slova). Ispod 360 px
   se skraćuje i znak. */
@media (max-width:899px) {
  .prekidaci { gap:6px; }
  .prekidaci .tema { padding-left:9px; padding-right:9px; letter-spacing:.1em; }
}
@media (max-width:359px) { .sredina > .prevuci svg { width:48px; } }

/* Kontura kupea (Denis, S144): donja ivica vagona između obrtnih postolja —
   sa okvira postolja (tik iznad točkova) kosinom ka zemlji, ravno do
   sledećeg postolja, pa kosinom gore. Crta je u samom crtežu (uvoz je pravi
   iz geometrije postolja i sanduka), istim potezom kao okvir postolja. */
.masina .kupe { fill:none; stroke:var(--tiho); stroke-width:1.6; stroke-linejoin:round; stroke-linecap:round; }

/* Ram se završavao tačno na vrhu pojasa, a crtež pojasa se kod širokog i
   niskog prozora seče odozgo (slice) — pa je linija crteža padala baš na
   donje kote rama i stapala se s njima (Denis, S144, snimak). Ram staje
   14 px iznad pojasa; kote ostaju odvojene kakav god da je prozor. */
.list > .ram { bottom:calc(var(--pojas) + 14px); }

/* Prazno mesto za fotografiju (Ana, S144: fotografije tek posle odobrenja).
   Na tehničkom crtežu namerno prazno mesto ide tankim krstom od ugla do ugla;
   u sredini šestougaona navrtka sa rednim brojem — pozicija na sklopnom
   crtežu, isti motiv kao numerisani blokovi ispod lista i isti broj kao
   „Sagovornik 02 / 32". Kote i isprekidan okvir ostaju. Polje SVG-a (viewBox
   1 0 42 44) centrira šestougao (x 3–41); padding-left poravnava letter-spacing
   iza poslednje cifre — broj je tačno u sredini (S144). */
.pruga { counter-reset:sagovornik; }
.panel { counter-increment:sagovornik; }
.okvir .bez-foto { position:absolute; inset:0;
  background:
    linear-gradient(to top right, transparent calc(50% - .6px), var(--linija2) 50%, transparent calc(50% + .6px)),
    linear-gradient(to bottom right, transparent calc(50% - .6px), var(--linija2) 50%, transparent calc(50% + .6px)); }
.okvir .bez-foto::after { content:counter(sagovornik, decimal-leading-zero);
  position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);
  width:clamp(48px, 24%, 70px); aspect-ratio:42/44; display:grid; place-items:center; padding-left:.04em;
  font:500 clamp(13px, 5%, 17px)/1 'JetBrains Mono',monospace; letter-spacing:.04em; color:var(--fg);
  background:var(--izdignuto) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1 0 42 44'%3E%3Cpath d='M41,22 L31.5,38.45 L12.5,38.45 L3,22 L12.5,5.55 L31.5,5.55 Z' fill='none' stroke='%23C52828' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Panel-najava „Nastavlja se" (S145): jedini bez odgovora, pa umesto rednog
   broja u šestouglu nosi znak pitanja. */
.okvir .bez-foto::after { content:"?"; padding-left:0; font:700 22px/1 Inter,sans-serif; letter-spacing:0; }

/* Kockice na telefonu: viša meta za prst (34 px); širu ne dozvoljava 16 kolona. */
@media (max-width:899px) { .kocka { height:34px; } }

/* Telefon: prekidači (ZVUK, SR/EN) su red iznad slike — natpis staje levo u isti red. */
/* Reč je višak (Denis, S144): znak — strelice i tačka koja klizi — kaže sam
   šta treba. Tačka je crvena i nosi signal; natpis ostaje samo za čitače
   ekrana (vizuelno skriven, ne obrisan). */
.sredina > .prevuci .ruka { fill:var(--crvena); }
.sredina > .prevuci > span { position:absolute; width:1px; height:1px; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }
.prevuci .pp-kratko { display:none; }
@media (max-width:899px) {
  .sredina { position:relative; }
  .sredina > .prevuci { left:0; bottom:auto; top:0; height:34px; }
  .prevuci .pp-dugo { display:none; }
  .prevuci .pp-kratko { display:inline; }
}
/* Točkovi na telefonu (Denis, S144: „vidi se da je nemušti desktop port"):
   na pojasu od 80 px postolja padaju na 135 i 443 px, pa se na 375 vidi jedno
   postolje i odsečak drugog. Na 60 px staju oba — ceo vagon u širini ekrana.
   Geometrija je ista (crtež se samo smanji), pa točak i tlo ostaju u koraku. */
@media (max-width:899px) { :root { --pojas:60px; } }
/* …i simetrično (Denis, S144): crtež je vezan za levu ivicu (xMin), pa su
   postolja (280 i 920 jed.) bila 101 px od leve, a 42 od desne ivice. Pomera
   se tako da sredina između njih (600 jed.) padne na sredinu ekrana; crtež je
   širi za 120 px da desno ne ostane prazno. Mera crteža: pojas / 166. */
@media (max-width:899px) {
  .masina { overflow:hidden; }
  /* max-width:none — base.css sajta svakom svg-u daje max-width:100%. */
  .masina svg { display:block; width:calc(100% + 120px); max-width:none;
                margin-left:calc(50% - var(--pojas) * 600 / 166); }
  /* Isto i za red brojki nad točkovima i brojač: na sredinu, kao vagon. */
  .mera .sastav { justify-content:center; }
  .vagon-red .brojac { align-self:center; }
}