/* ═══════════════════════════════════════════════════════════════════
   TERMINA — STEKLO (CGP v12, lastnica 16. 10. 2026)

   Termina ostane Termina — isti besedni znak, isti pisavi, iste barve —
   le da stoji v mehki, megleni ATMOSFERI z MLEČNIM STEKLOM namesto
   ravnih belih ploskev. Nevtralni pogledi dihajo v karameli in kremi,
   pogled ENE ponudnice (in stran ene skupine) pa v barvi njene skupine.

   Datoteka se naloži samo na straneh z atmosfero (index, najdi, odkrij,
   blizu, moj, skupnost, sporocila, racun, kategorija, ponudnik,
   rezervacija, termin), vedno PRED eleganca.css. Plošča, skrbnik in
   prijavni oder je ne nalagajo in ostanejo, kot so.

   Kaj je tu:
     1. žetoni atmosfere (§4) — nevtralni na :root, izpeljani pod
        [data-kat] IZKLJUČNO iz že izmerjenih --kat-* (nove barve skupin
        ni nobene);
     2. žetoni stekla (§5) z nadomestkom brez backdrop-filter in polnim
        belim pri prefers-reduced-transparency;
     3. .atmosfera — pripeta okrasna plast pod stranjo (in .atm-oder,
        temnejši oder za velik bel naslov, ki drsi z vsebino);
     4. stekleni gradniki (kartica, ploščica, okrogel gumb, pilula, čip,
        iskalna vrstica, plavajoča vrstica) in gibanje prihoda.

   Preobleka OBSTOJEČIH skupnih gradnikov (kartice, čipi, vrstica
   zavihkov …) je v eleganca.css pod [data-atmosfera], ker je tam dom
   vsakega pravila o škatlah in ker se mora naložiti za pravili, ki jih
   prepiše.

   Kontrast se meri na IZRISANIH pikslih (server/test-piksli.mjs, prizori
   steklo-*). Lise so izmerjene tako, da drugotno besedilo (#6b5d4b) tudi
   na najtemnejši točki tihe atmosfere ostane nad 4,5:1; zato je pastelna
   lisa tu tišja kot na risbi lastnice (.85) — dostopnost ima prednost
   (navodila §9).
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. žetoni atmosfere ──────────────────────────────────────────── */

:root{
  /* nevtralna Termina */
  --atm-vrh:   #a87a52;   /* samo vrh odra naslovnice (.atm-oder) */
  --atm-1:     #c89b6d;
  --atm-2:     #e9dccb;
  --atm-3:     #f6f1ea;   /* dno */
  --lisa-a:    #8a5b26;   /* temna lisa (pod velikim belim naslovom) */
  --lisa-b:    #d8b48c;   /* pastelna lisa */
  --lisa-c:    #f2eadf;   /* svetla lisa (krem znamke) */
  --atm-poudarek: #8a5b26; /* = besedilo akcenta na svetlem */
  /* polnilo atmosfere: pri skupini njen pastel; nevtralno je karamela,
     ki ni podlaga — zato samo omešano z belo (aktivni zavihek, pilula
     Potrdi) ali kot grafika. Izbrana ura je črnilo (lastnica, 18. 10. 2026). */
  --atm-polnilo:  #c89b6d;

  /* TIHA atmosfera — podlaga strani, na kateri stoji vsebina. Vrh je
     krem znamke in ne karamela: --atm-1 je kot podlaga drobnega besedila
     pretemna (#6b5d4b na njej meri 2,5:1). Tretja lisa je --atm-2. Pri
     skupini sta to --kat-ohisje in --kat-globina (spodaj). */
  --atm-tiho-vrh:  #f2eadf;
  --atm-tiho-lisa: #e9dccb;

  /* fotografija ponudnika kot atmosfera (glej .atmosfera[data-foto]) */
  --atm-foto: none;
  --atm-foto-moc: .55;    /* koliko fotografije pride skozi; več = temneje */

  /* ── 2. mlečno steklo (§5) ── */
  --steklo:          rgba(255,255,255,.55);   /* okrogli gumbi, pilule */
  --steklo-gosto:    rgba(255,255,255,.78);   /* kartice z besedilom */
  /* TANKO steklo (lastnica, 27. 10. 2026: »glass efekt« na kartah zanimanj
     in vrstici zavihkov): najbolj prosojno, samo pod znaki in kratkimi
     imeni v črnilu. Izmerjeno na pikslih (zate-steklo, zavihki-ikone),
     tudi nad fotografijo objave. --steklo ga ne more nositi: podoba.css ga
     z :root:root postavi na 72 %. */
  --steklo-tanko:    rgba(255,255,255,.5);
  --steklo-rob:      rgba(255,255,255,.75);
  /* OKVIRČEK (lastnica, 17. 10. 2026: »bolj strukturiraj v forme«):
     steklena škatla naslovnice z VIDNIM okvirjem — bel rob stekla se na
     svetli atmosferi ne bere kot okvir, zato lasnica črnila. Ni nova
     barva, je --gravura. */
  --steklo-okvir:    var(--gravura);
  --steklo-zamegli:  blur(22px) saturate(140%);
  /* Senca samo na tem, kar res lebdi (lastnica, 24. 10. 2026, različica B
     po taste skillu): mirujoče steklo, kartice in gumbi so brez sence in
     se ločijo s steklom in lasnico. Žeton ostane, da se ne zlomijo
     seznami senc (0 0 #0000 je veljavna prazna senca). Lebdeče ostane
     --steklo-senca-plava (vrstica zavihkov, spodnje vrstice, meniji). */
  --steklo-senca:    0 0 #0000;
  /* plavajoči gradniki (vrstica zavihkov, spodnja vrstica): višje, zato
     daljša senca iste barve */
  --steklo-senca-plava: 0 16px 34px -14px rgba(110,80,50,.34),
                        inset 0 1px 0 rgba(255,255,255,.9);
  /* temna ploskev, ki lebdi na atmosferi (junak strani skupine): ista
     topla senca, brez svetlega notranjega roba, ki bi na temnem žarel */
  --steklo-senca-oder: 0 0 #0000;
  /* steklo, ki postane ČRNILO (izbran čip, glavni gumb na steklu): ista
     topla senca BREZ svetlega notranjega odseva — na črnilu se odsev vidi
     kot bela črta na vrhu (lastnica, 18. 10. 2026) */
  --steklo-senca-crnilo: 0 0 #0000;
  --steklo-senca-plava-crnilo: 0 16px 34px -14px rgba(110,80,50,.34);
  /* radiji stekla: kartice 30, ploščice mreže 26 (CGP 36/28/16 ostanejo
     zgornja meja), pilule in gumbi polni krog */
  --r-steklo-kartica: 30px;
  --r-steklo-ploscica: 26px;

  /* maska mavričnega obroča: polna ploskev MINUS vsebina = pas roba
     (barva je tu samo prekrivnost maske, ne vidna barva) */
  --obroc-maska: linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);

  /* gibanje prihoda (§7): bledenje + dvig 8 px */
  --steklo-prihod: 260ms;
}

/* Vsaka skupina, izpeljano iz že izmerjenih žetonov kategorije. Velja na
   vsakem vsebniku z data-kat; atmosfera ga bere s telesa (kategorija,
   ponudnik, termin) ali s sebe (rezervacija nastavi data-kat neposredno
   na .atmosfera, ker telo tam ostane nevtralno). Ponudnik brez skupine
   nima data-kat in ostane na nevtralnih žetonih zgoraj. */
[data-kat]{
  --atm-vrh:   var(--kat-globina);
  --atm-1:     var(--kat-ohisje);
  --atm-2:     var(--kat-plosca);
  --atm-3:     var(--kat-plosca-hi);
  --lisa-a:    var(--kat-foto-1);
  --lisa-b:    var(--kat-pastel);
  --lisa-c:    var(--kat-tih);
  --atm-poudarek: var(--kat-tekst);
  --atm-polnilo:  var(--kat-pastel);
  --atm-tiho-vrh:  var(--kat-ohisje);
  --atm-tiho-lisa: var(--kat-globina);
}

/* Frizerstvo (lastnica, 16. 10. 2026): pastelna MAVRICA. Vsaka lisa je
   drug del mavrice in ne isti pastel trikrat — skupaj dihajo kot oprana
   mavrica pod stranjo. Tudi te barve niso nove: so postaje frizerske
   mavrice iz kategorije.css (--kat-m-*), izmerjene tam. Lisi na tihi
   atmosferi (2, 3) stojita v tihih tonih, ker je pod njima drobno
   besedilo strani (#6b5d4b ≥ 4,5:1 na izrisanih pikslih). Žetoni --lisa-*
   in --atm-* ostanejo izpeljani kot pri vsaki skupini; lise jih le
   prepišejo s svojimi --atm-lisa-* (brez njih pade lisa na --lisa-*). */
[data-kat="frizer"]{
  --atm-lisa-1: linear-gradient(140deg,var(--kat-m-roza),var(--kat-m-sivka) 55%,var(--kat-m-nebo));
  --atm-lisa-2: linear-gradient(160deg,var(--kat-m-maslo-t),var(--kat-m-meta-t));
  --atm-lisa-3: linear-gradient(200deg,var(--kat-m-nebo-t),var(--kat-m-breskev-t));
  --atm-oder-lisa: linear-gradient(150deg,var(--kat-m-sivka),var(--kat-m-nebo));
}

/* Brez zameglitve prosojnost ni slog, ampak nečitljivost: steklo je
   gosto in ne zamegljuje. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root{--steklo:rgba(255,255,255,.78);--steklo-tanko:rgba(255,255,255,.78)}
}
/* »Povečaj kontrast« (iOS, macOS, Windows): steklo postane polno belo z
   robom v črnilu, brez zameglitve (del 1, pregled mobile-native). */
@media (prefers-contrast:more){
  :root{
    --steklo:#FFFFFF; --steklo-gosto:#FFFFFF; --steklo-tanko:#FFFFFF;
    --steklo-rob:var(--slonovina,#241C14); --steklo-zamegli:none;
  }
}
/* Kdor prosi za manj prosojnosti, dobi polno belo ploskev z lasnico. */
@media (prefers-reduced-transparency:reduce){
  :root{
    --steklo:#FFFFFF; --steklo-gosto:#FFFFFF; --steklo-tanko:#FFFFFF;
    --steklo-rob:rgba(36,28,20,.14);          /* = --gravura */
    --steklo-zamegli:none;
    --steklo-senca:none; --steklo-senca-plava:none; --steklo-senca-oder:none;
  }
}

/* ── 3. stran na atmosferi ────────────────────────────────────────── */

/* Bela ni več podlaga strani: podlaga je atmosfera (.atmosfera, pripeta
   pod vsebino). Telo je zato prozorno, platno pa nosi dno atmosfere za
   primer, ko se okno potegne čez rob. html nosi data-atmosfera v HTML, da
   je podlaga prava že ob prvem izrisu. */
html[data-atmosfera]{background:var(--atm-3)}
html[data-atmosfera] body{background:transparent}

/* Pripeta, okrasna plast: navpičen preliv, tri lise in rahlo zrno.
   Ne drsi z vsebino, ni tarča in nima vsebine (aria-hidden v HTML). */
.atmosfera{
  position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;
  isolation:isolate;contain:strict;
  background:linear-gradient(180deg,var(--atm-tiho-vrh) 0%,var(--atm-3) 62%,var(--atm-3) 100%);
}
.atmosfera .lisa{
  position:absolute;display:block;border-radius:50%;
  filter:blur(48px);
}
/* pastelna lisa zgoraj desno */
.atmosfera .lisa-1{
  width:min(84vw,640px);height:min(68vw,520px);
  right:-26vw;top:-12vh;background:var(--atm-lisa-1,var(--lisa-b));opacity:.65;
}
/* svetla lisa levo na sredini */
.atmosfera .lisa-2{
  width:min(66vw,560px);height:min(60vw,500px);
  left:-28vw;top:34vh;background:var(--atm-lisa-2,var(--lisa-c));opacity:.9;
}
/* globina spodaj desno */
.atmosfera .lisa-3{
  width:min(76vw,620px);height:min(56vw,460px);
  right:-20vw;bottom:-8vh;background:var(--atm-lisa-3,var(--atm-tiho-lisa));opacity:.85;
}
/* zrno: SVG feTurbulence kot slika (CSP img-src data: je dovoljen) */
.atmosfera::after{
  content:"";position:absolute;inset:0;opacity:.18;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Fotografija ponudnika kot atmosfera (profil, korak datum in ura).
   Nastavi jo atmosfera.js (TerminaAtmosfera.foto(url)): data-foto na
   .atmosfera in --atm-foto kot url(). Fotografija je vedno OPRANA
   (--foto-filter, sepija) in močno zamegljena (36 px), lise skupine
   ležijo čez njo. --atm-foto-moc pove, koliko je pride skozi; napis na
   njej vedno stoji na steklu ali na zastoru (.atm-oder). */
.atmosfera::before{
  content:"";position:absolute;inset:-72px;opacity:0;
  background:var(--atm-foto) center/cover no-repeat;
  filter:var(--foto-filter,sepia(.4)) blur(36px);
  transform:scale(1.08);
}
.atmosfera[data-foto]::before{opacity:var(--atm-foto-moc)}

/* Počasno premikanje lis (20–40 s, ±20 px) — samo, če obiskovalka ni
   prosila za manj gibanja. Brez odboja, brez paralakse ob drsenju. */
@media (prefers-reduced-motion:no-preference){
  .atmosfera .lisa{will-change:transform;animation:atm-plovi 34s ease-in-out infinite alternate}
  .atmosfera .lisa-2{animation-duration:28s;animation-direction:alternate-reverse}
  .atmosfera .lisa-3{animation-duration:40s}
}
/* V aplikaciji lise mirujejo (del 1): pod vsakim steklom bi premik vsak
   trenutek znova sprožil zameglitev — baterija in gladkost drsenja; ±20 px
   v 34 s se skozi 22 px zameglitve tako in tako ne vidi. */
[data-nativno] .atmosfera .lisa{animation:none;will-change:auto}
@keyframes atm-plovi{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-20px,16px,0)}
}

/* ODER ATMOSFERE — temnejši vrh za velik bel naslov (naslovnica, ime
   ponudnika na profilu). Ni pripet: pripada naslovu in z njim odide, zato
   steklene kartice pod njim nikoli ne drsijo čez temno liso (drobno
   besedilo na steklu nad temnim bi padlo pod 4,5:1). Postavi se kot prvi
   otrok body (ali pozicioniranega junaka):
     <div class="atm-oder" aria-hidden="true"><i class="lisa lisa-1"></i>
       <i class="lisa lisa-2"></i><i class="lisa lisa-3"></i></div>
   Višino nastavi --atm-oder-visina. Nevtralno je vrh --atm-vrh (le
   naslovnica), pri skupini --kat-globina; temnino pod napisom nosi
   --lisa-a. Bel naslov na njem mora na izrisanih pikslih doseči 3:1,
   podnapis 4,5:1 — če ne, se lisa premakne ali potemni, obrob črk ne. */
.atm-oder{
  position:absolute;left:0;right:0;top:0;z-index:-1;overflow:hidden;pointer-events:none;
  height:var(--atm-oder-visina,78vh);
  background:linear-gradient(180deg,var(--atm-vrh) 0%,var(--atm-1) 40%,transparent 100%);
  -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 62%,transparent 100%);
}
.atm-oder .lisa{position:absolute;display:block;border-radius:50%;filter:blur(46px)}
/* temna lisa pod naslovom */
.atm-oder .lisa-1{width:min(72vw,620px);height:min(80vw,560px);left:6%;top:8%;background:var(--lisa-a);opacity:.75}
/* pastelna lisa ob njej */
.atm-oder .lisa-2{width:min(52vw,460px);height:min(56vw,420px);right:-8%;top:22%;background:var(--atm-oder-lisa,var(--lisa-b));opacity:.6}
/* druga, manjša temna lisa levo */
.atm-oder .lisa-3{width:min(40vw,340px);height:min(40vw,340px);left:-6%;top:44%;background:var(--lisa-a);opacity:.45}

/* ── 4. stekleni gradniki ─────────────────────────────────────────── */

/* Skupni rokopis stekla: zamegljena prosojna ploskev, lasast svetel rob,
   topla mehka senca. Besedilo na steklu je vedno črnilo ali --telo;
   --telo-2 sme samo na gostem steklu (.steklo-kartica). */
.steklo-kartica,.steklo-ploscica,.steklo-krog,.steklo-pilula,.steklo-cip,
.steklo-iskanje,.steklo-plava>*{
  -webkit-backdrop-filter:var(--steklo-zamegli);backdrop-filter:var(--steklo-zamegli);
  border:1px solid var(--steklo-rob);box-shadow:var(--steklo-senca);
}

/* Steklo, ki je ČRNILO (obrnjena ploskev .poudarek): brez svetlega
   notranjega odseva in brez zameglitve — na temnem se odsev vidi kot bela
   črta na vrhu (lastnica, 18. 10. 2026; pregled temniRobovi v test-piksli). */
.steklo-kartica.poudarek,.steklo-ploscica.poudarek,.steklo-krog.poudarek,.steklo-pilula.poudarek,.steklo-cip.poudarek{
  box-shadow:var(--steklo-senca-crnilo);-webkit-backdrop-filter:none;backdrop-filter:none}

/* Kartica z besedilom (»Prosto danes«, storitev, koledar, novica). */
.steklo-kartica{
  background:var(--steklo-gosto);border-radius:var(--r-steklo-kartica);
  padding:20px 20px 22px;color:var(--telo);
}
/* Ploščica mreže (bento na profilu). S fotografijo nosi napis na zastoru
   (.steklo-ploscica.foto + zastor strani); brez nje je gosto steklo. */
.steklo-ploscica{
  position:relative;overflow:hidden;min-width:0;
  background:var(--steklo-gosto);border-radius:var(--r-steklo-ploscica);
  padding:15px 16px;color:var(--telo);
}

/* Okrogel gumb (nazaj, obvestila, listanje). 48 px vidno, tarča ≥ 44. */
.steklo-krog{
  display:inline-grid;place-items:center;flex:none;
  width:48px;height:48px;min-width:44px;min-height:44px;padding:0;
  border-radius:50%;background:var(--steklo);color:var(--slonovina);cursor:pointer;
  transition:background-color .18s ease-out,transform var(--t-press,140ms) var(--ease-out,ease-out);
}
/* Stisk ob dotiku na vseh steklenih gumbih (del 1: gumb mora odgovoriti v
   trenutku dotika, ne šele ob spustu). */
.steklo-krog:active,button.steklo-pilula:active,a.steklo-pilula:active,.steklo-cip:active{transform:scale(.96)}
@media (prefers-reduced-motion:reduce){.steklo-krog:active,button.steklo-pilula:active,a.steklo-pilula:active,.steklo-cip:active{transform:none}}
.steklo-krog svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover) and (pointer:fine){.steklo-krog:hover{background:var(--steklo-gosto)}}

/* Steklena pilula (»Sledim«, korak »2 / 3«, napis z ikono). */
.steklo-pilula{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;
  border-radius:999px;background:var(--steklo);color:var(--slonovina);
  font-family:var(--body);font-size:var(--t-sm);font-weight:500;line-height:1.2;
  text-decoration:none;
}
/* pika v barvi akcenta (Sledim): akcent pogleda, ne barva znaka */
.steklo-pilula .pika{flex:none;width:7px;height:7px;border-radius:50%;background:var(--atm-poudarek)}
button.steklo-pilula,a.steklo-pilula{cursor:pointer;transition:background-color .18s ease-out,transform var(--t-press,140ms) var(--ease-out,ease-out)}
@media (hover:hover) and (pointer:fine){button.steklo-pilula:hover,a.steklo-pilula:hover{background:var(--steklo-gosto)}}

/* Čip skupine (lastnica, 16. 10. 2026): steklena pilula BREZ ikone in
   BREZ pike — skupino pove ROB v barvi njene pike (--kat-pastel), kot pri
   karticah »Kaj te zanima«. Čip nosi data-kat sam. Pastel na svetli
   atmosferi meri ~1,4:1 in steklo pod njim mejo ne loči (~1,1:1), zato
   rob dobi isto lasnico kot pika (.kat-pika): 1 px --kat-tekst zunaj
   pastelnega roba — tako meja kontrole drži 3:1, barva ostane pastel.
   Na temnem odru lasnica ni potrebna (pastel tam sveti sam). Brez
   data-kat (»Vse«) je čip navadno steklo. */
.steklo-cip{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;
  border-radius:999px;background:var(--steklo);color:var(--slonovina);
  font-family:var(--body);font-size:var(--t-sm);font-weight:500;white-space:nowrap;
  text-decoration:none;cursor:pointer;transition:background-color .18s ease-out,transform var(--t-press,140ms) var(--ease-out,ease-out);
}
.steklo-cip[data-kat]:not([data-kat=""]){
  position:relative;
  border:2px solid var(--kat-pastel);
  box-shadow:0 0 0 1px var(--kat-tekst),var(--steklo-senca);
}
.poudarek .steklo-cip[data-kat]:not([data-kat=""]){box-shadow:var(--steklo-senca)}
.steklo-cip .kat-pika{display:none}
@media (hover:hover) and (pointer:fine){.steklo-cip:hover{background:var(--steklo-gosto)}}
/* izbran čip je ČRNILO (eleganca: karamela ni podlaga); pastelni rob
   ostane in na črnilu sveti sam, lasnica odpade */
.steklo-cip[aria-pressed="true"],.steklo-cip.on,.steklo-cip[aria-current="page"],.steklo-cip[aria-selected="true"]{
  background:var(--slonovina);border-color:var(--slonovina);color:var(--na-tanu);
  box-shadow:var(--steklo-senca-crnilo);-webkit-backdrop-filter:none;backdrop-filter:none}
.steklo-cip[data-kat]:not([data-kat=""])[aria-pressed="true"],
.steklo-cip[data-kat]:not([data-kat=""]).on{border-color:var(--kat-pastel);box-shadow:var(--steklo-senca-crnilo)}

/* MAVRIČNI OBROČ (Frizerstvo, lastnica 16. 10. 2026). Kjer je barva
   skupine ROB, leži čez 2 px pastelnega roba obroč iz --kat-mavrica:
   ::after z enako zaobljenostjo, maska pusti samo pas roba (sredina je
   izrezana, zato steklo pod njim ostane steklo). border-image bi
   pilulo naredil oglato. Pri skupini brez mavrice je obroč »none« in
   ostane pastelni rob. Meja kontrole je še vedno lasnica --kat-tekst
   zunaj (≥ 3:1), mavrica je barvni pas. Junak strani skupine (temni oder)
   dobi isti obroč na svojem robu (kot okras, ni kontrola). */
.steklo-cip[data-kat]:not([data-kat=""])::after,
[data-atmosfera] .skupine .sk[data-kat]:not([data-kat=""]) .sk-p::after,
.kjunak.poudarek::after{
  content:"";position:absolute;inset:-2px;border-radius:inherit;padding:2px;
  background:var(--kat-mavrica);pointer-events:none;
  -webkit-mask:var(--obroc-maska);-webkit-mask-composite:xor;
  mask:var(--obroc-maska);mask-composite:exclude;
}
/* Oder ima overflow:hidden in rob 1 px: obroč leži znotraj roba. */
.kjunak.poudarek::after{inset:0}

/* Iskalna vrstica (»Najdi storitev …«). Vnos je otrok brez lastne podlage. */
.steklo-iskanje{
  display:flex;align-items:center;gap:10px;min-height:54px;padding:0 8px 0 18px;
  border-radius:28px;background:var(--steklo-gosto);color:var(--telo);
}
.steklo-iskanje svg{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.steklo-iskanje input{
  flex:1;min-width:0;height:48px;border:0;background:transparent;padding:0 4px;
  font-family:var(--body);font-size:var(--t-vnos);color:var(--slonovina);
}
.steklo-iskanje input::placeholder{color:var(--telo);opacity:1}
.steklo-iskanje input:focus{outline:none}
.steklo-iskanje:focus-within{outline:2px solid var(--medenina);outline-offset:2px}

/* Plavajoča spodnja vrstica: vsebnik za par okrogel gumb + široka pilula
   + okrogel gumb (listanje, Potrdi, iskanje na profilu). Vsebnik je
   prozoren; steklo nosijo otroci. V aplikaciji stoji NAD vrstico
   zavihkov, ne namesto nje. */
.steklo-plava{
  position:fixed;left:16px;right:16px;z-index:30;
  bottom:calc(16px + env(safe-area-inset-bottom,0));
  max-width:560px;margin:0 auto;
  display:flex;align-items:center;justify-content:center;gap:8px;
  pointer-events:none;
}
.steklo-plava>*{pointer-events:auto;box-shadow:var(--steklo-senca-plava)}
.steklo-plava>.steklo-krog{width:56px;height:56px;background:var(--steklo-gosto)}
[data-nativno] .steklo-plava{bottom:calc(98px + env(safe-area-inset-bottom,0))}

/* Fokus na steklu: karamelni obroč 2 px, kot povsod (CGP §5). */
.steklo-krog:focus-visible,.steklo-pilula:focus-visible,.steklo-cip:focus-visible{
  outline:2px solid var(--medenina);outline-offset:2px;
}

/* ── gibanje prihoda (§7) ─────────────────────────────────────────── */
/* Odpiranje kartic in prehod med koraki: mirno bledenje in dvig 8 px,
   260 ms, ease-out, brez odboja. Razred se doda elementu, ko se pokaže
   (ali se odvzame in doda znova za ponovni prihod). */
.steklo-prihod{animation:steklo-prihod var(--steklo-prihod) ease-out both}
@keyframes steklo-prihod{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .steklo-prihod{animation:none}
  .steklo-krog,.steklo-cip,button.steklo-pilula,a.steklo-pilula{transition:none}
}