/* ═════ CAN — NADZORNA PLOČA (cluster) ═════════════════════════════════════
   ⚠️ PRENESENO IZ HANDOFFA, NE IZVEDENO. `design_handoff_can_grafikoni/README.md`
   traži piksel-točnu reprodukciju boja, tipografije, omjera i sjena. Svaka
   vrijednost ovdje je PREPISANA iz `mockups/OSIRIS_NEO_can_nadzorna_mockup.html`,
   koji tu geometriju već nosi. Postotak umjesto piksela, „približno isto" i
   „ovako se bolje skalira" su izvođenje — i svaki od pet krugova ispravaka na
   mockupu imao je točno taj uzrok.

   ⚠️ TOKENI SU LOKALNI NA `.disp`, ne globalni: cluster je zaslon vozila usred
   svijetle aplikacije, pa mu tamne boje ne smiju curiti van.

   ⚠️ VLASTITA TIPOGRAFIJA: `Barlow Semi Condensed` za tekst, `IBM Plex Mono` za
   SVE brojke. Ne nameće mu se Plus Jakarta Sans — cluster je zaslon vozila.

   ⚠️ LJUSKA MODALA NIJE OVDJE (`.canm`, `.tabs`, `.btn`, `body`, `:root`) — nju
   aplikacija već ima i ne dira se. */
/* ═══ LJUSKA CAN MODALA — ⚠️ ŠIRA NEGO DANAS: 1040 → 1340 px ═══ */ .canm { width:1340px;max-width:100%;background:#fff;border-radius:14px;display:flex; flex-direction:column;overflow:hidden;box-shadow:0 30px 80px rgba(15,23,42,.45) }

/* ⚠️ STALNA VISINA (13.09.2026., Mladen: „kad se biraju tabovi mijenja se veličina
   modala pa stalno skače — neka modal bude iste veličine za sve tabove i neka
   bude kao Grafikoni").

   `.canm` je do danas imao SIRINU i NAJVECU visinu, ali NE i visinu — pa je bio
   visok koliko i sadrzaj. Izmjereno na 1920×1080: Greske (DTC) 360 px, cluster
   721, Tablica 960, Grafikoni 994 (udare u 92vh). Svaki klik na tab premjestio bi
   podnozje.

   ⚠️ BROJ JE 940, I DO NJEGA SE DVAPUT MJERILO (14.09.2026.).

   Ovdje je do danas stajalo `min(92vh, 1080px)` uz obrazlozenje: „s 940 bi se
   Grafikoni SKRATILI za 54 px, a Tablica (960) bi usla u skrol". Kad je stigao
   obvezujuci mockup (`OSIRIS_NEO_can_modal_spojeni_tab_mockup.html`) s 940,
   mjereno je PONOVNO — i to u APLIKACIJI, ne na mockupu:

       1920×1080, 940 px:  Grafikoni 769 sadrzaja u 769 vidljivih → NE KLIZE
       1920×1080, 1080 px: Grafikoni 823 u 823                    → ne klize
       1366×768:           707 u oba slucaja (92vh reze oba)      → ne klize

   ⚠️ STARO OBRAZLOZENJE JE BILO KRIVO U JEDNOM DIJELU, i to se zapisuje a ne
   prešucuje: Tablica ima 1811 px sadrzaja i KLIZI VEC NA 1080. Nije ju 940
   gurnulo u skrol — bila je ondje i prije.
   ⚠️ Grafikoni se na 940 doista SKRATE za 54 px, ali se ne reziu: zaslon nema
   vlastitu visinu nego ispuni onu koja mu se da. „Skraceno" je ondje manje, ne
   odsjeceno — a `.canm__b` ima `overflow: auto` i razliku ionako preuzima.

   ⚠️ OVDJE, A NE U `osiris.css`: `.canm` je definiran na DVA mjesta i ova se
   datoteka ucitava ZADNJA (`index.html:30` naspram `:27`), pa visina ne ovisi o
   redoslijedu. Dvije ljuske za jedan modal su zamka i prijavljene su zasebno.
   `.canm__b` vec ima `overflow:auto` i `flex:1`, pa razliku preuzima on. */
.canm { height: min(92vh, 940px); }
/* ⚠️ CETIRI PRAVILA `.pgl` UKLONJENA 01.09.2026. Prekidac pogleda unutar taba
   vise ne postoji — njegove cetiri stavke su podignute u traku tabova, u jedan
   red. Pravila bez korisnika su mrtvi sloj, isto kao `.canm__tabs` jucer. */
/* ═══ CLUSTER — vrijednosti DOSLOVNO iz handoffa (README: high-fidelity) ═══ */
/* ⚠️ VISINA JE 520 px, kao zaslon u handoffu (1360×520). Na 600 px pločice
   „Satova" postanu previsoke, brojčanik pluta s prazninom iznad, a vrijednost
   sjedne na glavčinu umjesto ispod nje. Visina zaslona je dio dizajna.

   ⚠️ DOPUNA 13.09.2026.: RAZLOG SE ODNOSIO NA PLOČICE „SATOVA", A TAJ TAB VIŠE NE
   POSTOJI — spojen je s „Vremenskom crtom". Komentar se zato ne briše nego
   prepisuje: za CLUSTER i za CRTU razlog ne vrijedi, pa oni smiju ispuniti tijelo
   modala (`.ekran--puni`). Za TRAKE vrijedi i dalje, i one ostaju na 520.
   ⚠️ 520 je od danas DONJA granica, ne fiksna mjera: na niskom prozoru zaslon se
   ne stišće ispod handoffa nego tijelo modala skrola. */ .ekran { --ink:#F2F3F5;--dim:#9AA0A8;--faint:#5B6068;--red:#FF5F52;--cyan:#4FC3F7;--green:#31D158;--amber:#FFAB2E;--line:#2A2D33; height:520px;position:relative;overflow:hidden }
.disp { position:absolute;inset:0;display:flex;flex-direction:column;color:var(--ink); font-family:'Barlow Semi Condensed',sans-serif;min-height:0; background:radial-gradient(120% 100% at 50% -10%,#2C323C 0%,#242A33 55%,#1E232A 100%) }
.disp.light { --ink:#202A36;--dim:#6E7986;--faint:#8A929C; background:radial-gradient(120% 100% at 50% -10%,#FBFCFD 0%,#EAEFF4 55%,#DDE4EB 100%);color:#202A36 }
.status { display:flex;align-items:center;gap:26px;padding:10px 120px 8px 22px;flex:none;font-size:15px; color:var(--dim);border-bottom:1px solid #262930;position:relative;z-index:2 }
.disp.light .status { border-bottom-color:#C9D2DC;color:#5A6674 }
.status b { color:var(--ink);font-weight:600 }
.status .ok { color:var(--green);font-weight:700 }
.status .sp { margin-left:auto }
.divider { height:1px;background:#262930;margin:0 22px;position:relative;z-index:2 }
.disp.light .divider { background:#C9D2DC }
/* 1 — numerička traka */ .strip { display:grid;grid-template-columns:repeat(6,1fr);padding:5px 22px;gap:2px 26px;z-index:2;flex:none;position:relative }
.pid { line-height:1 }
.pid .row { display:flex;align-items:flex-start;gap:3px }
.pid .v { font-size:34px;font-weight:600;letter-spacing:-.01em;font-family:'IBM Plex Mono',monospace }
.pid .u { font-size:15px;color:var(--dim);align-self:flex-end;padding-bottom:5px }
/* Litre uz postotak goriva (04.09.2026.) — isti ton kao jedinica, jer je to
   ista velicina u drugoj mjeri, ne druga plocica. */
.pid .l { font-size:15px;color:var(--dim);align-self:flex-end;padding-bottom:5px;margin-left:4px;white-space:nowrap;font-family:'IBM Plex Mono',monospace }
.disp.light .pid .l { color:#78838F }
.pid .mm { display:flex;flex-direction:column;font-size:12px;color:var(--faint);padding-top:2px; line-height:1.15;margin-left:auto;text-align:right;font-family:'IBM Plex Mono',monospace }
.pid .mm .hi { color:var(--dim) }
.pid .lb { font-size:14px;color:#b9bec5;margin-top:3px;max-width:150px;line-height:1.1 }
.disp.light .pid .lb { color:#5C6672 }
.pid.alarm .v,.pid.alarm .mm .hi { color:var(--red) }
.gauges { flex:1;min-height:0;display:flex;align-items:center;justify-content:center;gap:24px; padding:0 18px 6px;z-index:2;position:relative }
.gauges svg { overflow:visible;height:100%;max-height:100%;width:auto;max-width:100%; filter:drop-shadow(0 14px 22px rgba(0,0,0,.62)) }
.disp.light .gauges svg { filter:drop-shadow(0 10px 18px rgba(30,50,80,.22)) }
/* ⚠️ CLUSTER — novi dizajn nadzorne ploče (handoff, 29.08.): PET satova, brzina u sredini veća. Svaki SVG nosi `--gw` (svoju širinu), a `margin-bottom` ga podiže tako da se LICA svih brojčanika poravnaju s najvećim — bez toga bi manji visjeli po dnu. Formula je iz handoffa, ne izvedena. */ /* ⚠️ NAMJERNO ODSTUPANJE OD HANDOFFA — Mladen, 29.08.: „satove u nadzornoj ploči treba dignuti gore". Handoff ima `padding:0 22px 2px`. `--dizanje` je JEDINA ručica: povećaj da satovi idu više, smanji da padnu. Diže SVIH PET jednako, pa poravnanje lica ostaje netaknuto. */ .gauges.cluster { --dizanje:34px;gap:14px;align-items:flex-end; padding:0 22px calc(2px + var(--dizanje)) }
.gauges.cluster svg { flex:none;max-height:none;width:var(--gw);height:calc(var(--gw)*1.34); margin-bottom:calc((245px - var(--gw))*.34 - 10px) }
/* ═══ NADZORNA PLOCA U TRI STUPCA (14.09.2026.) ════════════════════════════
   Mladen: „nadzornu plocu treba organizirati da brzina vozila bude centralno, a
   ovi satovi lijevo i desno, jedan ispod drugog."
   Preneseno iz mockupa `OSIRIS_NEO_can_karta_i_nadzorna_mockup.html`.

   ⚠️ MIJENJA SE RASPORED, NE MJERE. Brojcanici i dalje nose `--gw` u pikselima
   (186 / 245 iz handoffa), a `cluster()` ih tako i dodjeljuje. Mockup to
   potvrduje: u njemu su tocno cetiri `width="186"` i jedan `width="245"`.

   ⚠️ `auto auto auto`, NE `1fr 1fr 1fr`: stupci se sire po sadrzaju, pa sredisnji
   sat ostaje u sredini i kad bocni stupci nemaju jednak broj satova. S `1fr` bi
   se prazniji stupac rastegnuo i gurnuo sredinu ustranu. */
.cl3 { display: grid; grid-template-columns: auto auto auto; gap: 0 40px;
  align-items: center; justify-content: center; padding: 10px 18px 18px; }
.cl3__s { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.cl3__c { display: flex; align-items: center; justify-content: center; }
/* ⚠️ DVA SATA ILI MANJE: mreza dobiva TOCNO onoliko stupaca koliko je djece.
   `cluster()` prazan `<div>` ne crta, ali to nije dovoljno: sa zadanim
   `auto auto` i jednim djetetom drugi stupac je 0 px, a ZLIJEB OD 40 px ostaje —
   pa je sat pomaknut ulijevo za pola zlijeba (izmjereno: mreza `245px 0px`).
   `grid-auto-flow: column` stvara stupac po djetetu, pa zlijeba nema kad nema
   susjeda. */
.cl3--sam { grid-template-columns: none; grid-auto-flow: column; }
/* ⚠️ PODIZANJE (`--dizanje`) VRIJEDI ZA JEDAN RED, ne za stupac. U tri stupca
   satovi stoje jedan ISPOD drugog, pa poravnanje lica nema sto poravnavati —
   `margin-bottom` iz formule bi im samo razmaknuo razmake. Zato ga ovdje
   ponistavamo, a formula za jednoredni raspored ostaje netaknuta iznad. */
.cl3 svg { margin-bottom: 0 }
.cl3.gauges.cluster { padding: 10px 18px 18px; align-items: center }
/* ⚠️ ZASLON ISPUNJAVA TIJELO — SAMO ONDJE GDJE JE TO DOBITAK (13.09.2026.).
   Modal je od danas stalne visine, pa je na 1920×1080 ispod zaslona ostajalo
   303 px praznog bijelog. Tko smije narasti odlucuje `htmlPogled`: nadzorna ploca
   dobiva `ekran--puni`, vremenska crta `ekran--spoj`, trake nista.

   ⚠️ NADZORNA PLOCA NE IDE NA `auto`, i to je odluka a ne propust. Ona koristi
   ISTI `.disp` s `position: absolute; inset: 0`; u spremniku bez zadane visine
   tamni zaslon padne na nulu — tocno onaj kvar zbog kojeg spojeni tab treba
   `position: relative`. Ondje je `height: 100%` ono sto zaslon drzi uspravno.
   ⚠️ I po naravi su razlicite: nadzorna ploca je INSTRUMENT (tamna ploha je sama
   po sebi sadrzaj, pa je praznina oko brojcanika ploca), a spojeni tab je POPIS
   I CRTA — sadrzaj koji raste.
   ⚠️ NIJEDAN BROJCANIK NE MIJENJA VELICINU: `.gauges.cluster svg` ima `width`
   u pikselima (`var(--gw)`) i vec je centriran (`align-items:center`), pa visak
   postaje tamna praznina OKO njega — sto je i bio zahtjev. */
.ekran--puni { height: 100%; min-height: 520px }
/* ═══ SPOJENI TAB — PO OBVEZUJUCEM MOCKUPU (14.09.2026.) ═══════════════════
   `OSIRIS_NEO_can_modal_spojeni_tab_mockup.html`

   ⚠️ OVDJE JE DO DANAS STAJAO `.ekran--puni .minis { grid-auto-rows: 115px }` I
   TO JE BILO KRIVO. Obrazlozenje je glasilo: „plocica je do danas bila STISNUTA,
   pa bi `auto` znacilo da naraste". Mjerenje je bilo tocno (115 px po retku u
   zaslonu od 520), ali je rjesavalo KRIVI PROBLEM: stiskalo je plocicu da tijelo
   modala ne klizi — a klizanje ondje nije kvar nego cijena, i `.canm__b`
   (`overflow: auto`) ju je predvidio.
   ⚠️ I prekrsilo je izricitu zabranu: „Ne diraj izgled `.mini` — vec imam to kako
   izgleda". Sa 196 px na 89 px plocica nije zadrzala svoju visinu nego ju je
   izgubila.

   ⚠️ `.disp` MORA U TOK. On je `position: absolute; inset: 0`; u zaslonu bez
   zadane visine NE DAJE VISINU, pa se cijeli tamni dio srusi na nulu i ne vidi
   se nista. Zato `position: relative; inset: auto` — to nije stilska sitnica.

   ⚠️ ZASLON RASTE SA SADRZAJEM (`height: auto`), plocice zadrze SVOJU visinu
   (`grid-auto-rows: auto`, 196 px), a crta uzme ostatak. Tijelo modala klizi. */
.ekran--spoj { height: auto; overflow: visible }
.ekran--spoj .disp { position: relative; inset: auto }
/* ═══ SPOJENI TAB: PLOCICE LIJEVO, KARTA DESNO (14.09.2026.) ═══════════════
   Iz mockupa `OSIRIS_NEO_can_karta_i_nadzorna_mockup.html`.

   ⚠️ KARTA IMA STALAN STUPAC, ne ostatak. Slobodnih polja ima `8 - N`, a N je
   razlicit po vozilu (izmjereno: Doblo 6, Kangoo i Vivaro 7, Twingo 1) — karta
   „u ostatak" bila bi kod Twinga preko sest polja, kod Kangooa preko jednog, a
   s osam pojmova ne bi je bilo. Stalan stupac to uklanja kao pitanje.

   ⚠️ `minmax(0, 1fr)`, NIKAD `1fr`: zadano `min-width: auto` brani stupcu s
   plocicama da se suzi ispod svog sadrzaja, pa bi karta isklizula iz zaslona. */
.spoj-gore { display: grid; grid-template-columns: minmax(0, 1fr) 392px;
  gap: 14px; padding: 14px 22px 4px; align-items: stretch; }
/* ⚠️ TRI STUPCA, ne cetiri: cetvrti je otisao karti. Sedam plocica time prelazi
   u TRECI red i blok naraste — tijelo modala klizi, sto je krug o stalnoj visini
   vec predvidio (`.canm__b { overflow: auto }`). */
.spoj-gore .minis { flex: none; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; padding: 0; }
.spoj-gore .mini { height: 196px; align-self: auto; }

/* ═══ CRTA NA VRHU, PLOCICE U DVA REDA (19.09.2026.) ══════════════════════
   Mladen: „kad imamo vise od 6 parametara ne vidi se vremenska crta."
   Iz mockupa `OSIRIS_NEO_can_crta_na_vrhu_mockup.html` — raspored, ne brojke.

   ⚠️ KARTA POKRIVA SAMO PRVI REDAK. Lijevi stupac prvog retka nosi CRTU pa PRVE
   TRI plocice; karta mu je susjed i time joj visina postaje crta + razmak +
   jedan red plocica, umjesto cijelog bloka. Ostatak plocica ide punom sirinom u
   drugi redak, ISPOD karte.
   ⚠️ `align-items: start` na drugom retku nije potreban: `.r2` se proteze preko
   oba stupca, pa nema susjeda s kojim bi se poravnavao. */
.sg2 { grid-template-rows: auto auto; align-items: stretch; }
.sg2 .sg2__l { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
/* ⚠️ CRTA UNUTAR STUPCA NEMA VLASTITU UVLAKU: nju daje `.spoj-gore`. Zatecena
   `.vc { padding: 6px 22px 14px }` ovdje bi je uvukla drugi put. */
.sg2 .sg2__l .vc { padding: 0; }
.sg2 .r1 { flex: none; }

/* ⚠️ VISINA PLOCICE SE IZVODI IZ SIRINE, NE PREPISUJE (19.09.2026.). Mockup ima
   150 px gore i 164 dolje — to su vrijednosti za SEDAM plocica. Kod osam ih drugi
   red ima pet, plocica je uza i brojcanik nizi; svaka brojka u CSS-u bila bi
   tocna za jedan broj plocica i kriva za ostale.

   ⚠️ LUK SE NE SMANJUJE, NESTAJE PRAZNA TRAKA OKO NJEGA — i to je izmjereno, ne
   pretpostavljeno. `svg.mg` je zamjenski element: `preserveAspectRatio` (zadani
   `meet`) uklapa `viewBox` 200x95 po mjerilu `min(sirina/200, visina/95)` i
   ostatak ostavlja PRAZNIM. Danas je kutija 237x160,3, a mjerilo
   `min(1,185; 1,687) = 1,185` — dakle luk je vec sada 237x112,6, a 47,7 px je
   prazno. S izvedenom visinom kutija postaje 237x112,7: ISTA brojka. Sirina
   ostaje 237 u oba slucaja; da se sat smanjivao, prva bi pala ona.
   Vidljiva promjena je jedino da se naziv primakne brojcaniku — tocno kako je na
   odobrenom mockupu.

   ⚠️ SAMO UNUTAR `.spoj-gore`. Puna nadzorna ploca i trake ostaju kakve jesu. */
/* ⚠️ `grid-auto-rows: auto` MORA UZ `height: auto`, inace se ne dogodi nista.
   Osnovni `.minis` nosi `grid-auto-rows: 1fr`, pa se redak rasteze na visinu
   stupca, a plocica se rasteze s njim — izmjereno: visina je ostala 196 px iako
   je `height: auto` bio na snazi. Visina se izvodi tek kad je RED prestane
   nametati. */
/* ⚠️ TRI RAZINE (`.spoj-gore .minis .mini`), NE DVIJE — i to je mjereno, ne
   stilski. `.ekran--spoj .mini { height: 196px }` ima istu specificnost (0,2,0) i
   stoji NIZE u datoteci, pa je pobjedivao redoslijedom: `height: auto` je bio na
   snazi i nije mijenjao nista (izmjereno: plocica je ostala 196 px, a preglednik
   je za nju nabrojio oba pravila). Dodatna razina cini prvenstvo neovisnim o
   tome tko je gdje u datoteci. */
/* ⚠️ I UVLAKA TRAZI TRI RAZINE, iz istog razloga kao visina: `.ekran--spoj .minis
   { padding: 14px 22px 4px }` stoji nize i istom specificnoscu vraca uvlaku koju
   je `.spoj-gore .minis { padding: 0 }` maknuo. Izmjereno: red je bio 158,5 px
   visok oko plocice od 140,5 — 14 px iznad i 4 ispod, tocno ta uvlaka. Zbog tih
   4 px dno karte nije sjedalo na dno prvog reda. */
.spoj-gore .minis.r1, .spoj-gore .minis.r2 { padding: 0; }
.spoj-gore .minis { grid-auto-rows: auto; align-content: start; }
.spoj-gore .minis .mini { height: auto; }
.spoj-gore .minis .mini svg.mg { width: 100%; height: auto; flex: none; }
/* ⚠️ USPRAVNA UVLAKA 6 px, VODORAVNA OSTAJE 12. Da se dirne vodoravna, sadrzaj bi
   se prosirio i brojcanik bi NARASTAO — smanjivanje visine povecalo bi sat. */
.spoj-gore .minis .mini { padding: 6px 12px; }

/* ⚠️ IKONA U GORNJI LIJEVI, VRIJEDNOST U GORNJI DESNI KUT (Mladen, 18.09.2026.:
   „vrijednosti stavi gore desno u plocici, tekst ostavi dolje, ikone u gornji
   lijevi kut"). Kutovi su prazni i na crtezu: luk je isjecak kruga u `viewBox`
   200x95, pa gore lijevo i gore desno nema linija — vrijednost i ikona zato
   smiju stajati preko svg-a. */
.spoj-gore .minis .mini .ic { left: 8px; top: 8px; width: 26px; height: 26px; }
/* ⚠️ `margin-top: -25px` iz osnovnog pravila (`:202`) ovdje se PONISTAVA, a ondje
   OSTAJE: ono vrijedi za punu nadzornu plocu i za trake, gdje vrijednost jest u
   toku i uvlaci se u brojcanik. Izlaskom iz toka visina se mijenja za 4,1 px
   (19 x 1,1 - 25); posto se visina ovdje izvodi, to se rijesi samo. */
.spoj-gore .minis .mini .mv { position: absolute; right: 10px; top: 6px;
  margin-top: 0; text-align: right; z-index: 3; }
/* ⚠️ DRUGI RED IMA STUPAC PO PLOCICI, BEZ BROJKE U CSS-u. `repeat(N-3, …)` bi
   trazilo da netko zna N — a N je po vozilu razlicit (Twingo 1, Doblo 6, Kangoo
   i Vivaro 7, najvise 8). `grid-auto-flow: column` stvara stupac po djetetu, pa
   se broj izvodi sam i ostaje tocan i kad `MINI_BROJ` jednom naraste. */
.sg2 .r2 { grid-column: 1 / -1; grid-template-columns: none;
  grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
/* Spremnik karte — ispunjava svoj stupac po visini plocica. */
.spoj-karta { min-height: 0; border-radius: 12px; overflow: hidden;
  background: #151B28; border: 1px solid rgba(255,255,255,.07); }
/* ⚠️ OZNAKA NA KURSORU. Ista navy boja kao tamni dio traga (`#0F2C4D`) i kao
   kursor na traci — jedno vrijeme, tri prikaza, pa i jedna boja. Bijeli obrub
   je zato da se vidi i nad tamnim tragom i nad svijetlom kartom. */
.can-oznaka { width: 14px; height: 14px; border-radius: 50%;
  background: var(--brand-primary-dark, #0F2C4D); border: 2px solid #fff;
  box-shadow: 0 1px 6px rgba(15,23,42,.5); }
.ekran--spoj .minis { flex: none; grid-auto-rows: auto; padding: 14px 22px 4px }
.ekran--spoj .mini { height: 196px; align-self: auto }
.ekran--spoj .vc { padding: 6px 22px 14px }

/* 2 — satovi (mini pločice) */ .minis { flex:1;min-height:0;display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr; gap:12px;padding:12px 56px 14px 26px;position:relative;z-index:2 }
.mini { position:relative;background:linear-gradient(#151B28,#1D2434);border:1px solid rgba(255,255,255,.08); border-radius:16px;box-shadow:inset 0 2px 8px rgba(0,0,0,.85),inset 0 0 22px rgba(110,165,240,.09); padding:12px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end; align-self:end;height:calc(100% - 26px);gap:0;min-height:0;overflow:hidden }
.disp.light .mini { background:linear-gradient(#FFFFFF,#EDF1F6);border-color:rgba(25,45,70,.13); box-shadow:inset 0 1px 0 #fff,0 2px 10px rgba(30,50,80,.10);border:1px solid rgba(25,45,70,.13) }
.mini::before { content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(78% 62% at 50% 34%,rgba(130,180,250,.15) 0%,rgba(120,170,240,.06) 48%,transparent 80%) }
.disp.light .mini::before { background:radial-gradient(78% 62% at 50% 30%,rgba(255,255,255,.9),transparent 75%) }
.mini::after { content:"";position:absolute;inset:0;border-radius:16px;pointer-events:none; background:linear-gradient(172deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,.02) 22%,transparent 40%); box-shadow:inset 0 2px 8px rgba(0,0,0,.85),inset 0 -1px 0 rgba(255,255,255,.05) }
.disp.light .mini::after { background:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6) }
.mini .ic { position:absolute;left:24px;top:29px;width:34px;height:34px;z-index:3;fill:none; stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round; filter:url(#engrave) drop-shadow(0 1.4px 0 rgba(255,255,255,.16)) }
.mini .ic.ok { color:#31D158 }
.mini .ic.warn { color:#FFB33C }
.mini .ic.alarm { color:#FF5F52 }
/* ⚠️ BROJČANIK ISPUNJAVA PLOČICU. `max-width:200px` ga je držao malenim i ostavljao prazninu iznad — u handoffu luk se proteže gotovo preko cijele širine pločice. */ .mini svg.mg { flex:1 1 auto;min-height:0;height:100%;width:auto;max-width:100%;aspect-ratio:200/95 }
/* ⚠️ NEGATIVNA MARGINA uvlači vrijednost u brojčanik tako da sjedne U RAVNINU s natpisima min/maks na krajevima luka — ne na glavčinu. Handoff ima -25px pri širini pločice ~266 px; postotak drži isti omjer na svakoj širini (-25 / 266 = -9,4 %), jer se postotna margina računa od širine roditelja. */ .mini .mv { font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:19px;font-weight:500;color:#C6D8EE; letter-spacing:-.01em;line-height:1.1;flex:none;margin-top:-25px;text-shadow:0 0 10px rgba(130,180,255,.3) }
.mini .mv i { font-style:normal;font-size:11px;font-weight:500;color:#6B7380;margin-left:3px }
.mini .mv.alarm { color:#FF8A7A;text-shadow:0 0 12px rgba(255,95,82,.45) }
.disp.light .mini .mv { color:#16202C }
.disp.light .mini .mv i { color:#7A8593 }
.mini .mk { font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#6B7380; font-weight:500;text-align:center;line-height:1.2;flex:none;white-space:nowrap }
.disp.light .mini .mk { color:#6E7986 }
.pager { position:absolute;right:14px;top:50%;transform:translateY(-50%);display:flex; flex-direction:column;gap:9px;z-index:3 }
.pager span { width:26px;height:26px;border-radius:50%;display:grid;place-items:center; font-size:12px;font-weight:600;color:#8a9099;border:1.5px solid #3a3e46;cursor:pointer }
.pager span.on { background:#4FA3FF;color:var(--cyan);border-color:var(--cyan) }
/* 3 — trake s min/maks */ .bars { flex:1;min-height:0;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:repeat(3,1fr); column-gap:26px;padding:6px 56px 8px 22px;z-index:2;align-content:start;gap:0;position:relative }
.bar { --st:#4FC3F7;padding:7px 0 0;border-bottom:1px solid #33373e }
.bar.warn { --st:#FFB33C }
.bar.alarm { --st:#FF5F52 }
.bar .t { display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:12px }
.bar .n { font-size:19px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.bar .val { font-size:26px;font-weight:600;text-align:right;color:var(--st);font-family:'IBM Plex Mono',monospace }
.bar .val i { font-size:13px;color:var(--dim);font-style:normal;padding-left:2px }
.bar .s { font-size:12px;color:var(--faint);display:flex;gap:9px;padding:1px 0 4px;font-family:'IBM Plex Mono',monospace }
.bar .s b { color:#c8ccd2;font-weight:600 }
.disp.light .bar .s b { color:#2A3644 }
.bar .track { height:11px;background:#151920;border-radius:6px;overflow:hidden; box-shadow:inset 0 2px 5px rgba(0,0,0,.85),inset 0 0 0 1px rgba(255,255,255,.04) }
.disp.light .bar .track { background:#D9E0E8;box-shadow:inset 0 2px 4px rgba(20,40,70,.22),inset 0 0 0 1px rgba(255,255,255,.7) }
.bar .fill { height:100%;border-radius:6px;background:var(--st); box-shadow:6px 0 14px -2px var(--st),10px 0 22px -6px var(--st);transition:width .35s linear,background .3s,box-shadow .3s }
/* 4 — vremenski trend */ .trend { flex:1;min-height:0;display:flex;flex-direction:column;padding:8px 20px 10px;z-index:2;gap:6px;position:relative }
.legend { display:flex;gap:14px;padding-bottom:8px;font-size:13px;color:var(--dim);flex:none;flex-wrap:nowrap }
.legend i { width:14px;height:3px;border-radius:2px;display:block;margin-right:7px;vertical-align:2px }
.legend b { color:var(--ink);font-family:'IBM Plex Mono',monospace;font-weight:600;margin-left:6px;font-size:14px }
.plot { flex:1;min-height:0;position:relative }
.plot canvas { position:absolute;inset:0;width:100%;height:100% }
/* prekidač teme — dvostanje, u jeziku alatne trake iz handoffa (okrugli gumbi gore desno) */ .tema { position:absolute;right:16px;top:10px;z-index:6;display:flex;align-items:center;gap:0; background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);border-radius:999px;padding:3px }
/* ⚠️ SVIJETLA TEMA — 14 pravila prenesenih DOSLOVNO iz handoffa (29.08.). Bez ovih se brojcanici ne presvlace: lice, kvacice, brojke i vrijednost ostaju tamni na svijetloj podlozi. Trazi `data-gauge`, `.gv` i `.mn` na SVG-u — zato ih `gauge()` sada emitira. */ .disp.light .status b { color:#1D2733 }
.disp.light .pid .u,.disp.light .pid .mm { color:#78838F }
.disp.light .tool,.disp.light .pager span { border-color:#B9C3CE;color:#6C7684 }
.disp.light .mini .ic { filter:drop-shadow(0 1px 0 rgba(255,255,255,.9)) drop-shadow(0 -.5px .5px rgba(0,0,0,.35)) }
.disp.light [stroke="#4E5966"] { stroke:#C3CCD6 }
.disp.light [stroke="#6B7686"] { stroke:#8D99A6 }
.disp.light .mn { fill:#39444F }
.disp.light .bar { border-bottom-color:#CBD4DE }
.disp.light .bar .s { color:#7A8593 }
.disp.light .legend { color:#5A6674 }
.disp.light .legend b { color:#1D2733 }
.disp.light svg[data-gauge] circle[fill^="url(#fc"] { fill:#E9EEF4 }
.disp.light svg[data-gauge] text { fill:#4A5764 }
.disp.light svg[data-gauge] .gv { fill:#141C26 }
.disp.light .tema { background:rgba(20,40,70,.05);border-color:rgba(20,40,70,.13) }
.tema button { width:30px;height:26px;border:0;background:none;border-radius:999px;cursor:pointer; color:#7C8794;display:grid;place-items:center;font-size:14px;line-height:1 }
.tema button.on { background:rgba(255,255,255,.14);color:#EAF0F8 }
.disp.light .tema button.on { background:#fff;color:#243040;box-shadow:0 1px 3px rgba(30,50,80,.18) }

/* ═══ VREMENSKA CRTA (mockup `OSIRIS_NEO_can_vremenska_crta_mockup.html`) ═════
   ⚠️ VRIJEDNOSTI SU IZ MOCKUPA, ne procijenjene. Mjeri ih par „CAN modal" u
   `tools/stil-mjera.mjs`; mijenja li se oblik, mijenja se PRVO u mockupu.
   ⚠️ Krivulja se u RUPI PREKIDA (`M` umjesto `L` u putanji), a rupa je
   osjencana. Spojena crta preko rupe tvrdila bi da znamo sto je bilo izmedu
   dva ocitanja — a ne znamo. */
.vc { padding:10px 22px 18px; min-height:0 }
.vc__glava { display:flex;align-items:baseline;gap:14px;margin-bottom:8px }
.vc__glava h4 { font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:#79828F;font-weight:600 }
.vc__kada { font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:19px;
  font-weight:600;color:#EEF3FA }
.vc__idx { font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;color:#6B7380 }
.vc__legenda { margin-left:auto;display:flex;gap:14px;font-size:11.5px;color:#79828F;
  align-items:center }
.vc__legenda span { display:flex;align-items:center;gap:6px }
.vc__legenda i { width:12px;height:3px;border-radius:2px;display:block }
/* ⚠️ `touch-action: none` (19.09.2026.): bez njega povlacenje po traci na
   dodirniku pomice STRANICU umjesto kursora — preglednik potez protumaci kao
   klizanje jer nitko nije rekao da ga ne smije. Ide zajedno s hvatanjem
   pokazivaca u `oziviCrtu`; jedno bez drugoga radi samo misem. */
.tr { position:relative;height:74px;border-radius:10px;background:#141922;
  border:1px solid rgba(255,255,255,.07);overflow:hidden;cursor:ew-resize;user-select:none;
  touch-action:none }
.tr svg { position:absolute;inset:0;width:100%;height:100%;display:block }
.tr .rupa { position:absolute;top:0;bottom:0;
  background:repeating-linear-gradient(45deg,rgba(255,171,46,.20) 0 5px,rgba(255,171,46,.06) 5px 10px);
  border-left:1px solid rgba(255,171,46,.5);border-right:1px solid rgba(255,171,46,.5) }
.tr .kursor { position:absolute;top:0;bottom:0;width:2px;background:#fff;
  box-shadow:0 0 10px rgba(255,255,255,.75);pointer-events:none }
.tr .kursor::after { content:"";position:absolute;top:-1px;left:-4px;width:10px;height:10px;
  border-radius:50%;background:#fff;box-shadow:0 0 10px rgba(255,255,255,.9) }
.os { display:flex;justify-content:space-between;font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:10.5px;color:#5B6068;margin-top:6px }
.upr { display:flex;align-items:center;gap:9px;margin-top:11px }
.upr button { width:34px;height:34px;border-radius:9px;border:1px solid rgba(255,255,255,.12);
  background:#1B212B;color:#C6D8EE;font-size:16px;cursor:pointer;display:flex;
  align-items:center;justify-content:center }
.upr button.play { background:#2A6BC4;border-color:#2A6BC4;color:#fff;width:40px;height:40px;font-size:19px }
.upr .brzina { margin-left:4px;display:flex;gap:5px }
.upr .brzina span { padding:5px 9px;border-radius:7px;border:1px solid rgba(255,255,255,.12);
  font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11.5px;color:#79828F;cursor:pointer }
.upr .brzina span.on { background:#2A6BC4;border-color:#2A6BC4;color:#fff }
.upr .veza { margin-left:auto;display:flex;align-items:center;gap:8px;font-size:12px;color:#79828F }
.upr .veza b { color:#C6D8EE;font-weight:600 }
/* Svijetla tema zaslona — isti parovi boja kao ostatak ploce. */
.disp.light .tr { background:#EFF3F7;border-color:#C9D2DC }
.disp.light .vc__kada { color:#202A36 }
.disp.light .upr button { background:#fff;border-color:#C9D2DC;color:#2A4A72 }