/* ═══════════════════════════════════════════════════════════════════
   TERMINA — ENA TEMA (CGP v11)

   Bela je podlaga strani in aplikacije. Ena sama. Espresso je bil do v11
   druga tema, izbirna ob uvodu in v Računu; odstranjen je in se ne vrača.
   Izbire ni — ne v uvodu, ne v Računu — in `prefers-color-scheme` ne
   preklaplja ničesar.

   Zakaj je odstranjen in ne le skrit: dve temi sta dvojna resnica. Vsak
   nov žeton je bilo treba določiti dvakrat in IZMERITI dvakrat, vsak
   posnetek narediti dvakrat, vsaka prosojnost pa je pod seboj imela dve
   različni podlagi. To je bila polovica dela pri vsaki spremembi barve.
   Ena tema pomeni, da je izmerjena vrednost dokončna.

   Krem #F2EADF je bil podlaga od v8 do v10 in je zdaj samo še barva
   ZNAMKE: obrnjena ploskev, kartica prijave, toplina v črnilu, karamela
   in fotografija. Karamelna tema je bila zgrajena in isti dan opuščena;
   karamela je grafični akcent, nikoli podlaga.

   Formalni jezik: oprana fotografija kot oder, ENA obrnjena ploskev na
   pogled (razred .poudarek), karamela za akcente in stanja, tanek
   razprt Outfit, Archivo za besedilo, vse mehko zaobljeno. Besedni znak
   je TERMINA s karamelnim krožcem nad črko I — krožec je znak sam,
   nikoli pika iz pisave.

   Selektor je pisan kot `:root:root` in to ni tipkarska napaka.
   Prej je bil `:root, :root[data-tema="krem"]` in je zaradi atributa
   tehtal (0,2,0). Ko je atribut odšel s temo, je ostal samo goli
   `:root` (0,1,0) — in `postavitev.css`, plast prejšnje identitete,
   ima `:root[data-theme="light"]` (0,2,0). Tiho je zmagala stara
   paleta »Orrerij«: stran je bila #F3ECE0 namesto bele, črnilo #171B2E
   namesto #241C14. Nobena meritev tega ni ujela, ker tudi stara paleta
   presega prag — merilnik meri razmerja, ne pravilne barve.
   Podvojeni `:root` vrne (0,2,0) brez atributa; ob enaki specifičnosti
   odloči vrstni red, ta datoteka pa se nalaga zadnja.

   Ta plast se nalaga zadnja na vsaki strani in prepiše žetone in oblike
   prejšnjih identitet. Pravila, ki veljajo samo za aplikacijo, so v
   aplikacija.css.

   Izmerjeno na IZRISANIH pikslih, vrstico za vrstico. Ključna razmerja:
     #241C14 na #FFFFFF  16,15:1   naslovi
     #3d3428 na #FFFFFF  11,76:1   besedilo
     #6b5d4b na #FFFFFF   6,14:1   drugotno
     #8a5b26 na #FFFFFF   5,60:1   vloga karamele NA belem
                                   (karamela sama pade na 3,8)
   Prijavni zaslon je edini temen oder in ima svoja razmerja; merjena so
   pri njem, v prijava.css.
   ═══════════════════════════════════════════════════════════════════ */

/* Stran se vodoravno ne premika. Na iOS-u je vsak piksel čez rob dovolj, da
   se da stran z gumijastim odbojem povleči levo in desno (lastnica, s
   telefona, 16. 9. 2026). Pravilo stoji TU in ne v aplikacija.css, ker to
   velja za vsako stran, tudi za tiste brez vrstice zavihkov (plošča,
   pozabljeno geslo). `clip` in ne samo `hidden`: hidden na html naredi iz
   njega drsnik, clip pa vsebino odreže brez drsnika; kjer clip ni podprt,
   obvelja hidden iz prve vrstice. Navpično drsenje ostane nedotaknjeno. */
/* `overscroll-behavior-y:contain` ubije gumijasti odboj na vrhu in s tem
   vgrajeno osvežitev brskalnika: od 17. 9. 2026 poteg navzdol osveži stran
   po naše (potez.js s kazalcem .osvezi), da je poteza v aplikaciji in v
   brskalniku ena in ista. */
html{overflow-x:hidden;overflow-x:clip;overscroll-behavior-x:none;overscroll-behavior-y:contain;
  /* domača aplikacija, ne spletna stran: brez sivega pravokotnika ob dotiku
     in brez povečave besedila v ležečem iPhonu (del 1, pregled mobile-native) */
  -webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* Dolg pritisk na gumb ne označi napisa in ne odpre sistemskega menija. */
button,.btn,.tab,.chip,.cat,.pill,.zavihki a,.steklo-krog,.steklo-pilula,.steklo-cip,.zk{
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body{overflow-x:hidden;overflow-x:clip;max-width:100%}

/* ── poteg navzdol osveži stran (potez.js) ──────────────────────────── */
/* Kazalec je medeninast obroč, ki se med potegom POLNI: dolžina loka je
   natanko toliko, kolikor je poteze do praga, in ko je krog sklenjen, se v
   sredini prikaže jedro — od tam naprej je to znak Termine (obroč okoli
   jedra) in pomeni »zdaj spusti«. Prej je bil lok ves čas enako dolg in se je
   zavrtel šele po spustu: kdor znaka ni poznal, iz njega ni mogel prebrati,
   koliko mu še manjka (lastnica, 24. 9. 2026).
   Ploskve pod njim NI: bel krogec z obrobo in senco je bil videti kot
   okvara, ne kot znak (lastnica, 25. 9. 2026). Podlage tudi ne potrebuje —
   bela je edina podlaga strani, poteza pa se zgodi na vrhu, kjer je vedno
   bela. Obroč je v medenini (#8a5b26) in ne v karameli: rob krmilnega
   elementa mora na belem doseči 3:1, karamela sama pade.
   Ker plošče ni, je znak večji (28 px namesto 24), da ostane enako viden. */
.osvezi{
  position:fixed;top:0;left:50%;z-index:60;
  width:34px;height:34px;margin-left:-17px;
  display:grid;place-items:center;
  transform:translateY(-40px);opacity:0;pointer-events:none;
}
.osvezi-krog{
  grid-area:1/1;width:28px;height:28px;display:block;
  /* Lok se riše od vrha in v smeri urinega kazalca: tako ga bere vsak, ki je
     kdaj videl uro ali trak napredka. */
  transform:rotate(-90deg);
}
.osvezi-sled{fill:none;stroke:var(--medenina-nisa);stroke-width:2.5}
.osvezi-lok{
  fill:none;stroke:var(--medenina);stroke-width:2.5;stroke-linecap:round;
  /* obseg pri r=13 je 81,68; dashoffset nastavlja potez.js po dolžini poteze */
  stroke-dasharray:81.68;stroke-dashoffset:81.68;
}
/* Jedro: pika sredi obroča, znak Termine. Pride šele, ko je krog poln, in je
   zato edini del kazalca, ki pomeni STANJE, ne napredka. */
.osvezi-jedro{
  grid-area:1/1;width:7px;height:7px;border-radius:50%;
  background:var(--medenina);place-self:center;
  transform:scale(0);opacity:0;
  transition:transform .16s cubic-bezier(.2,.9,.3,1.4),opacity .16s ease-out;
}
/* Napet pomeni »zdaj spusti«. Brez ploskve to pove jedro in nič drugega —
   prej je k temu pristavil še obarvan rob krogca, ki ga ni več. */
.osvezi.napet .osvezi-jedro{transform:scale(1);opacity:1}
.osvezi.tece{
  transform:translateY(calc(14px + env(safe-area-inset-top,0)));opacity:1;
  transition:transform .2s ease-out,opacity .2s ease-out;
}
/* Med nalaganjem se poln krog ne bi nikjer premaknil, zato se skrči v lok in
   zavrti — to je edini del poteze, ki traja dlje od prsta. */
.osvezi.tece .osvezi-krog{animation:osvezi-vrti .7s linear infinite}
.osvezi.tece .osvezi-lok{stroke-dasharray:22 60;stroke-dashoffset:0}
.osvezi.tece .osvezi-jedro{transform:scale(1);opacity:1}
@keyframes osvezi-vrti{from{transform:rotate(-90deg)}to{transform:rotate(270deg)}}
@media(prefers-reduced-motion:reduce){
  .osvezi.tece{transition:none}
  .osvezi-jedro{transition:none}
  .osvezi.tece .osvezi-krog{animation:none}
  .osvezi.tece .osvezi-lok{stroke-dasharray:81.68;stroke-dashoffset:0}
}

/* ── napredek nalaganja videa (zgodbe.js naloziVideo, 21. 10. 2026) ──── */
/* Isti obroč kot poteg navzdol, a v vrstici sporočila pod gumbom Objavi:
   lok se polni z deležem poslanih bajtov (stroke-dashoffset nastavlja
   zgodbe.js), sklenjen krog z jedrom pomeni »naloženo«. Številke ni —
   odstotek pove le bralniku zaslona (role=progressbar). Obroč je medenina
   na nišni sledi, kot pri potegu: rob pomenske grafike mora doseči 3:1,
   karamela sama na svetlem pade. */
.nalaganje{display:inline-flex;align-items:center;gap:10px;min-height:34px;vertical-align:middle}
.nalaganje-obroc{display:grid;place-items:center;width:34px;height:34px;flex:none}
.nalaganje-obroc .osvezi-krog,.nalaganje-obroc .osvezi-jedro{grid-area:1/1}
.nalaganje-obroc .osvezi-lok{transition:stroke-dashoffset .3s linear}
.nalaganje.koncano .osvezi-jedro{transform:scale(1);opacity:1}
.nalaganje-t{font-size:var(--t-sm);color:var(--telo)}
@media(prefers-reduced-motion:reduce){
  .nalaganje-obroc .osvezi-lok,.nalaganje .osvezi-jedro{transition:none}
}

/* ── shared by both themes: typefaces and rounding ─────────────────── */
:root{
  /* Nova podoba (28. 10. 2026): Manrope je ena pisava vmesnika — naslovi,
     besedilo in vse številke. Outfit (--znamka-pisava) ostane besednemu
     znaku TERMINA in velikemu naslovu naslovnice. */
  --display:"Manrope",system-ui,-apple-system,sans-serif;
  --body:"Manrope",system-ui,-apple-system,sans-serif;
  --num:"Manrope",system-ui,-apple-system,sans-serif;
  --znamka-pisava:"Outfit",system-ui,sans-serif;

  /* rounding: large 36, card 28, controls 16, pills 999 */
  --r-drobno:  16px;
  --r-polje:   16px;
  --r-kartica: 28px;
  --r-velika:  36px;
  --r-foto:    22px;
  --r-oval:    999px;

  --skala:none; --skala-gosta:none;
  --karamela:#C89B6D;   /* the brand's graphic voice, independent of theme */
  --oder-1:#4a3826; --oder-2:#31251a;  /* stand-in for photography */

  /* Znak napake. Risan SVG s potezo 1,7 (CGP §7), vstavljen kot maska,
     da prevzame barvo besedila in s tem barvo teme. */
  --znak-napaka:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23000" stroke-width="1.7" stroke-linecap="round"><circle cx="12" cy="12" r="9"/><path d="M12 7.4v5.4"/><circle cx="12" cy="16.6" r=".95" fill="%23000" stroke="none"/></svg>');
}

/* Napake nikoli niso označene samo z barvo (WCAG 1.4.1: barva ne sme biti
   edini nosilec pomena — barvno slep bralec vidi navadno sivo besedilo).
   Pred besedilom stoji risan znak, ki prevzame barvo napake. */
.note.err{display:flex;gap:8px;align-items:flex-start}
.note.err::before{
  content:"";flex:0 0 auto;width:16px;height:16px;margin-top:.16em;
  background:currentColor;
  -webkit-mask:var(--znak-napaka) center/contain no-repeat;
  mask:var(--znak-napaka) center/contain no-repeat;
}
.note.err:empty{display:none}

/* ── EDINA TEMA — bela stran, črnilna obrnjena ploskev ──────────────
   Obrnjena ploskev (--i-*) je tu temna: na svetli podlagi polariteto
   obrne črnilo, ne krema. */
:root:root{
  color-scheme:light;
  /* GIBANJE — en jezik za vso aplikacijo (lastnica, 28. 10. 2026, nova
     podoba, del 1; po skillih Apple Design in Emila Kowalskega). Tri
     krivulje namesto šestih: --ease-out za prihode, pritiske in korake,
     --ease-in-out za premike po zaslonu, --ease-drawer za liste in ogled
     zgodb. Pritisk 140 ms, majhni pojavi 200, plošče 240, list 420 noter
     in 260 ven (izhod je vedno hitrejši). */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --ease-drawer:cubic-bezier(.32,.72,0,1);
  --t-press:140ms;
  --t-small:200ms;
  --t-panel:240ms;
  --t-sheet-in:420ms;
  --t-sheet-out:260ms;

  /* Lestvica na BELI podlagi (v10). Krem je bil podlaga in kartica je
     stala nad njo svetlejša; na belem tega koraka navzgor ni več. Zato se
     obrne: stran je bela, ploskve pod njo pa se rahlo pogreznejo v topel
     ton. Toplina ni izginila — preselila se je v črnilo, karamelo in
     obrnjeno ploskev. Belo brez tega bi bilo mrzlo in ne mirno.

     Vrednosti niso izbrane po občutku: vsaka je krem stopnja, prevedena
     na beli izhod z ohranjenim razmerjem korakov (~2,5 % svetlosti med
     sosednjima ploskvama, kolikor je bilo na kremu). */
  --ohisje:    #FFFFFF;   /* stran */
  --globina:   #F3EFE9;   /* noga, dno */
  --noc:       #F6F2EC;   /* dvignjena ploskev, krmilni elementi */
  --plosca:    #FFFFFF;   /* kartica: bela z lasastim robom */
  --plosca-hi: #FFFFFF;
  --mleko:     #FFFFFF;
  --papir-2:   #FAF7F2;   /* vdolbina vnosnih polj */
  --vdolbina:  #FAF7F2;
  --vdolbina-2:#FAF7F2;
  --kartica:   var(--plosca);

  --slonovina: #241C14;   /* naslovi — 16,15:1 na belem (14,07 na kremu) */
  --sij:       #241C14;
  --telo:      #3d3428;   /* 11,76:1 */
  --telo-2:    #6b5d4b;   /* 6,14:1; na kremu je meril 5,35 */
  --kamen:     #6b5d4b;
  --kamen-d:   #3d3428;
  --noc-telo:  #3d3428;
  --bled:      #6b5d4b;   /* Nadnapis na belem stopnjo dobi (#7a6b57 meri
                             4,97 in bi zdržal), a ostaja pri tej vrednosti:
                             ena stopnja manj je ena stopnja manj za
                             vzdrževati, dobiček pa je komaj viden. */
  --napaka:    #A8391A;   /* 6,19:1 */

  --medenina:  #8a5b26;   /* akcent — 5,60:1 (karamela sama pade na 3,8) */
  --medenina-d:#6d4213;
  /* --mrak je vijolična #5B4C92 iz prejšnje podobe (postavitev.css).
     Petinštirideset pravil po straneh jo še bere; namesto lovljenja vsakega
     posebej je žeton preusmerjen na akcent teme. Brez tega se ura
     rezervacije izriše vijolično. */
  --mrak:var(--medenina); --mrak-d:var(--medenina-d);
  --svit:      #8a5b26;
  --terakota:  #C89B6D;   /* graphics, not text */
  --na-tanu:   #FFFFFF;
  /* znak kot slika: na svetli ploskvi so obroči črnilo (gl. .znak-slika) */
  --znak-slika:url('/_v/8cf1e3aa86c4/znak-krogi-krem.svg');

  --gravura:   rgba(36,28,20,.14);
  --gravura-2: rgba(36,28,20,.08);
  --meja:      rgba(36,28,20,.16);
  --meja2:     rgba(36,28,20,.10);
  --rob:       rgba(36,28,20,.14);
  --rob-2:     rgba(36,28,20,.08);
  --rob-k:     rgba(36,28,20,.52);
  --senca:     0 14px 34px rgba(92,64,32,.10), 0 2px 6px rgba(92,64,32,.07);
  --senca-pilula:0 8px 20px rgba(92,64,32,.12);
  /* dvig ploskve, ki leži čez rob odra (iskalno polje kategorije) */
  --senca-dvig:  0 14px 34px -14px rgba(36,28,20,.50);
  --steklo:    rgba(255,255,255,.72);
  /* steklo NA ODRU (temna fotografija): prosojna ploskev in lasast rob za
     znak skupine in drugi gumb na junaku kategorije. Izmerjeno na pikslih. */
  --steklo-oder:     rgba(255,255,255,.12);
  --steklo-oder-rob: rgba(242,232,216,.30);
  /* ploščica podjetja na orbiti: temno steklo, da ime ostane berljivo čez delce */
  --steklo-oder-temno: rgba(28,23,20,.78);
  /* podlaga plasti, ki pokrije aplikacijo (glej »NADSLOJI« nižje) */
  --nadsloj:   rgba(255,255,255,.94);

  --nav-bg:    rgba(255,255,255,.92);
  --tan-mehki: rgba(138,91,38,.10);
  --tan-sij:   rgba(138,91,38,.16);
  --tan-sled:  rgba(138,91,38,.08);
  --medenina-nisa:rgba(138,91,38,.10);
  --karamela-rob:rgba(138,91,38,.45);
  --akcent-ton:#6d4213;

  /* delci krogle na temnem odru naslovnice: slonovina in karamela */
  --pika:          242,232,216;
  --pika-poudarek: 200,155,109;
  --prah:          rgba(138,91,38,.30);
  --prah-topli:    rgba(36,28,20,.22);

  --pesek:#E4D2B8; --pesek-2:#D8C3A4;
  --ikona-obrat:none; --ikona-obrat-p:invert(1) brightness(1.3);
  --foto-napis:#FFFFFF; --foto-zastor:rgba(36,28,20,.74);
  --foto-filter:sepia(.4) saturate(.85) brightness(.95);
  --foto-blend:#c9b49a;

  /* emphasised surface = ink */
  --i-bg:#1C1714; --i-bg-2:#2a2119; --i-cip:#2a2119;
  --i-naslov:#F2E8D8; --i-telo:#E4DACA; --i-telo-2:#C9BBA6;
  --i-akcent:#C89B6D; --i-na-tanu:#1C1714; --i-vdolbina:#2a2119;
  --i-rob:rgba(242,234,223,.16); --i-rob-2:rgba(242,234,223,.09);
  --i-rob-k:rgba(242,234,223,.42);
  --i-gumb:#FFFFFF; --i-gumb-tekst:#241C14; --i-gumb-hover:#ffffff;
  --i-napaka:#E0937A;
  /* Steklena različica poudarjene ploskve, za edino mesto, kjer plava nad
     fotografijo (prijava.css). Sestavljena je proti temu odru in tam
     izmerjena; ni --i-bg z ugibano prosojnostjo. */
  --i-steklo:rgba(28,23,20,.95);
  /* Prijava: polje je BELO v obeh temah in gumb TEMEN v obeh. To ni
     posledica teme, ampak navada roke — v svetlo polje se vpisuje, tudi
     kadar kartica okoli njega ni svetla. Gumb je zato najtemnejši del
     kartice in ne najsvetlejši; krožec s puščico ostane bel in je tisto,
     kar oko na njem najde. Na črnilni kartici gumb potrebuje lasast rob,
     sicer se od nje loči za 1,15:1 in nima oblike. */
  --i-polje:#F2EADF; --i-na-polju:#241C14;
  --i-na-polju-tih:#6b5d4b; --i-polje-rob:rgba(36,28,20,.28); --i-polje-fokus:#8a5b26;
  --prijava-gumb:#0F0C0A; --prijava-gumb-tekst:#F2EADF; --prijava-gumb-rob:rgba(242,234,223,.42);
  /* znak na poudarjeni ploskvi — nasprotna datoteka od --znak-slika, ker je
     polariteta tam obrnjena */
  --i-znak-slika:url('/_v/f67d564f2174/znak-krogi.svg');

  /* dediščinska imena, ki jih še berejo pravila prejšnjih podob */
  --krem:var(--i-bg); --krem-2:var(--i-bg-2); --crnilo:var(--i-naslov); --ink:var(--i-gumb);
}

html,body{background:var(--ohisje)}

/* ── typography: thin, widely tracked ──────────────────────────────── */
h1,h2,h3,.card h2,.onboard h2,.stat .v,.ty .serif,#auth h1,#auth h2,#cm-title,
.pplan h3,.fpost .nm,.post .nm,.flist .nm,.list .t,.appt .svc,
.pstoritve li .t,.pkartica h1,.pstanje h1,.uvod-list h2{
  font-family:var(--display);
  font-weight:300;
  letter-spacing:.01em;
  color:var(--slonovina);
}
h1{font-weight:200;letter-spacing:.012em;line-height:1.12}
/* Naslov je ENE barve. Poudarjena beseda ostane pokončna in barve ne
   spremeni: dvobarven naslov bere kot dva glasova v enem stavku
   (lastnica, 6. 9. 2026). */
h1 em,h2 em{font-style:normal;color:inherit}
strong,b{color:var(--slonovina);font-weight:600}
.avatar,.pav,.fav{font-family:var(--display);font-weight:400}

/* nadnapisi (edina dovoljena drobna vloga): verzalke, razprto, tiho */
.nadnapis,.who,.meta,.pkartica .meta,.card .ttl,.fhead{
  font-family:var(--display);font-weight:400;
  text-transform:uppercase;letter-spacing:.22em;
  font-size:11px;color:var(--bled);
}

/* ── wordmark: TERMINA with a circle above the letter I ─────────────
   The circle sits ABOVE the I, not after the A. A capital I carries no
   dot, so the wordmark supplies one: the caramel circle is the
   "reserved hour" and remains the same mark, now inside the word
   rather than trailing it.

   The circle is an empty element, not a glyph. At Outfit 200 a dot
   from the typeface would be too thin and would scale differently from
   the rings of the icon.

   Zaradi sledi .16em nosi okvir črke prazen pas na desni, zato sredina
   POTEZE ni sredina okvirja: krožec se umakne levo za pol koraka sledi.

   Vrednost je .08em in je bila preverjena dvakrat. Prva meritev je bila
   napačna po metodi: posnela je okvir `.crka-i`, krožec pa je absolutno
   postavljen NAD ta okvir in je iz posnetka izpadel — primerjala je torej
   steblo s steblom in vrnila 0,00. Druga meritev je posnela CEL napis in
   pri šestih velikostih (19, 20, 22, 34, 64, 120 px) primerjala težišče
   karamelnega krožca s težiščem stebla: .08em ima najmanjši povprečni
   odmik (0,23 px), .084em in več pa ga povečajo. Pri 120 px, kjer je
   meritev najbolj natančna, je .08em pri +0,24 px in .084em pri −0,76 —
   ničla je torej okoli .081em in razlike ni vredno loviti. Ostanek
   ±0,25 px pri majhnih velikostih se z vrednostjo NE spreminja: to je
   šum merilnika, ne odmik. */
.znamka{
  font-family:var(--znamka-pisava,"Outfit");font-weight:200;
  font-size:19px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--slonovina);line-height:1;
  display:inline-flex;align-items:center;min-height:44px;
}
.znamka .crka-i{position:relative;display:inline-block}
.znamka .pika-i{
  position:absolute;left:calc(50% - .08em);top:-.17em;
  width:.19em;height:.19em;border-radius:50%;
  background:var(--medenina);transform:translateX(-50%);
}
footer .znamka{font-size:22px}

/* ── glava in noga ─────────────────────────────────────────────────── */
nav::after{display:none}
footer::before{display:none}
nav{background:var(--nav-bg);border-bottom:1px solid var(--gravura-2)}
footer{background:var(--globina);border-top:1px solid var(--gravura-2)}
footer .fgroup a{color:var(--telo)}
@media (hover:hover) and (pointer:fine){footer .fgroup a:hover{color:var(--slonovina)}}

/* Izbirnik jezika: pilula s kratico (.jezik-pilula), ki jo zgradi in
   obleče i18n.js — sistemski <select> leži neviden čez njo. Barve pridejo
   iz žetonov (--rob-k, --telo), zato jo obrnjena ploskev prebarva sama. */

/* ── zavihki z drsečo ploskvijo (drsnik.js) ────────────────────────
   Ploskev izbranega zavihka je en element, ki zdrsne pod novega; barvo
   in radij mu da stran (moj.html črnilo, plosca.html karamela), ker
   sta zavihka tam različna. Brez JS razreda .z-drsnikom ni in zavihek
   ohrani svojo podlago. */
.tabs.z-drsnikom{position:relative}
.tabs.z-drsnikom .tab{position:relative;z-index:1}
.tabs.z-drsnikom .tab.on{background:transparent;border-color:transparent}
.tab-drsnik{position:absolute;left:0;top:0;z-index:0;pointer-events:none;opacity:0;
  border-radius:var(--r-drobno);background:var(--mrak);
  transition:transform 220ms var(--ease-out),width 220ms var(--ease-out),height .2s,opacity .2s}
@media(prefers-reduced-motion:reduce){.tab-drsnik{transition:none}}

/* ── moč gesla (geslo-moc.js): štirje odseki pod poljem, besedilo pove,
   kaj manjka. Polni odsek je medenina, prazen tanka meja; besedilo bere
   žeton besedila. Na temnem odru prijave žetoni --i-* to prebarvajo sami. */
/* Oko ob golem vnosu (vabilo): vrsta z vnosom in krogom 44 px. */
.oko-vrsta{display:flex;gap:8px;align-items:center}
.oko-vrsta input{flex:1;min-width:0}
.oko-vrsta .polje-oko{flex:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--gravura);background:transparent;color:var(--telo);display:grid;place-items:center;padding:0;cursor:pointer}
.oko-vrsta .polje-oko svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.oko-vrsta .polje-oko .oko-crta{display:none}
.oko-vrsta .polje-oko[aria-pressed="true"]{border-color:var(--medenina);color:var(--medenina)}
.oko-vrsta .polje-oko[aria-pressed="true"] .oko-crta{display:block}
.geslo-moc{margin:8px 4px 0}
.geslo-moc[hidden],.geslo-moc[data-nacin="login"]{display:none}
.geslo-crta{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.geslo-crta i{display:block;height:4px;border-radius:999px;background:var(--gravura);transition:background .18s}
.geslo-moc[data-moc="1"] .geslo-crta i:nth-child(-n+1),
.geslo-moc[data-moc="2"] .geslo-crta i:nth-child(-n+2),
.geslo-moc[data-moc="3"] .geslo-crta i:nth-child(-n+3){background:var(--medenina)}
.geslo-moc[data-moc="4"] .geslo-crta i{background:var(--karamela)}
.geslo-besedilo{margin:6px 0 0;font-size:var(--t-sm);color:var(--telo-2)}
@media(prefers-reduced-motion:reduce){.geslo-crta i{transition:none}}

/* ── gumbi: pilule; glavni je KREMNA ploskev s črnilom ────────────── */
.btn{
  border-radius:999px;
  font-family:var(--body);font-weight:500;
  font-size:var(--t-md);letter-spacing:.01em;
  padding:12px 24px;
}
/* Dotik (po zgledu Lively, lastnica 27. 9. 2026): gumb se ob pritisku
   rahlo stisne in vrne — telo pod prstom, ne samo barva. Samo transform,
   brez postavitve; ob manj gibanja ostane mirno. */
.btn{transition:transform var(--t-press) var(--ease-out),background .15s,border-color .15s,color .15s}
.btn:active{transform:scale(.97)}
.btn-p{background:var(--krem);border:1px solid var(--krem);color:var(--crnilo)}
/* Lebdenje: en odtenek svetlejše ČRNILO, ne bela. --krem je na svetli
   strani vzdevek za --i-bg (črnilo) in --crnilo za kremno; bela podlaga s
   kremnim napisom je merila 1,2:1 — gumb je ob lebdenju in po dotiku na
   iPhonu (lepljivi hover) izginil. */
@media (hover:hover) and (pointer:fine){.btn-p:hover{background:var(--krem-2);border-color:var(--krem-2);color:var(--crnilo)}}
.btn-p:disabled{opacity:.55}
.btn-s{background:transparent;border:1px solid var(--rob-k);color:var(--slonovina)}
@media (hover:hover) and (pointer:fine){.btn-s:hover{border-color:var(--medenina);color:var(--medenina);background:transparent}}
.btn-link,.steps .go{color:var(--medenina)}
@media (hover:hover) and (pointer:fine){.btn-link:hover,.steps .go:hover{color:var(--slonovina)}}
a.btn:not(.btn-p):not(.btn-s):not(.btn-link){
  background:var(--krem);border:1px solid var(--krem);color:var(--crnilo);font-weight:500;
}
@media (hover:hover) and (pointer:fine){a.btn:not(.btn-p):not(.btn-s):not(.btn-link):hover{
  background:var(--krem-2);border-color:var(--krem-2);color:var(--crnilo);
}}
.skip{background:var(--krem);color:var(--crnilo);border-radius:999px}

/* krmilni elementi: pilule; izbrani = karamela s črnilom (7,28:1) */
.tab,.chip,.cat,.cats button,.time,.pill,.bill-toggle button{border-radius:999px}
.bill-toggle{border-radius:999px;border-color:var(--gravura);background:var(--plosca)}
.tab.on,.chip.on,.cat.on,.cats button.on,.bill-toggle button.on,
.pill.sel{
  background:var(--medenina);border-color:var(--medenina);
  color:var(--na-tanu);font-weight:600;
}
/* Izbrana ura: SAMO obroč z odmikom, notranjost ostane mirna — polna
   karamela je za to ploščico pretežka.
   Sama krepka pisava se na fotografiji zaslona pod kotom izgubi, obroč
   pa izbiro pove tudi od daleč. Odmik je prazen — skozenj se vidi PRAVA
   podlaga, zato obroč deluje na vsaki ploskvi brez sestavljanja barv.
   Rob tabletke potemni v medenino, da se obroč in tabletka bereta kot
   en element. Ob fokusu s tipkovnico obroč potemni v črnilo. */
.time.sel{
  border-color:var(--medenina);color:var(--slonovina);font-weight:600;
  outline:2px solid var(--medenina-d);outline-offset:2px;
}
.time.sel:focus-visible{outline-color:var(--slonovina)}
.poudarek .time.sel{border-color:var(--i-akcent);color:var(--i-naslov);outline-color:var(--i-akcent)}
/* Nobene prosojnosti. Pri .75 se krem #F2EADF nad karamelo #8A5B26 zlije v
   #D8C6B0 in besedilo na izrisanih pikslih meri 3,49:1 — pod pragom, in to
   prav na vrstici, ki nosi ime salona in ceno. Hierarhijo nosita velikost
   in teža, barva ostane polna. Izmerjeno 4,86:1.

   Prosojnost se nikoli ne prenaša z ene podlage na drugo: sestavi jo s
   podlago in izmeri znova. */
.pill.sel small{color:var(--na-tanu)}
.time,.times .time{background:var(--noc);border:1px solid var(--gravura);color:var(--slonovina)}
@media (hover:hover) and (pointer:fine){.time:hover{border-color:var(--medenina)}}
.time.gone{color:var(--telo-2)}
/* Osnovno pravilo zgoraj z .times .time premaga .time.sel in izbiro tiho
   razveljavi. Izbira se zato tu izreče
   še enkrat, z isto težo in ZA osnovnim pravilom: mirna notranjost,
   medeninast rob — obroč nosi pravilo .time.sel zgoraj. */
.times .time.sel{background:var(--noc);border-color:var(--medenina);color:var(--slonovina)}

/* Ikone kategorij so ENOLINIJSKE pri vsaki velikosti: brez tega se poteza
   1,6 ob povečavi ploščice debeli sorazmerno in nežna črta postane
   polnjen glif. Poteza je zato 1,6 IZRISANIH pikslov, ne 1,6 enot
   mreže — ikona pri 22 px in pri 56 px riše isto tanko črto. */
.ik :where(path,circle,rect,line,ellipse,polyline){vector-effect:non-scaling-stroke}

/* Stran se NIKOLI ne premika vodoravno: že za 17 px preširok element
   zamakne stran in ob robu pusti bel trak.
   Pravi vzrok je vedno preširok element in ga testi lovijo prek
   scrollWidth — clip je varnostni pas za naprave, ki jih merilnik ne
   pokrije. Prav clip in ne hidden: hidden bi zlomil lepljivo glavo. */
html,body{overflow-x:clip}

/* Potrditvena polja POVSOD v termininem kroju: sistemski kvadratek na
   iOS štrli iz podobe, vsaka platforma ga riše
   po svoje. appearance:none in lastna risba: mehki kvadratek v papirju,
   obkljukan medenina s kremno kljukico. Kljukica je vrisan SVG s
   kremom #F2EADF — ista vrednost kot žeton, ker background-image
   žetonov ne zna brati. */
input[type=checkbox]{
  appearance:none;-webkit-appearance:none;flex:none;
  width:24px;height:24px;margin:0;padding:0;cursor:pointer;
  border:1.5px solid var(--rob-k);border-radius:8px;
  background:var(--papir-2) center/14px no-repeat;
  transition:background-color .15s,border-color .15s;
}
input[type=checkbox]:checked{
  background-color:var(--medenina);border-color:var(--medenina);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5' fill='none' stroke='%23F2EADF' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
input[type=checkbox]:focus-visible{outline:2px solid var(--medenina);outline-offset:2px}
@media(prefers-reduced-motion:reduce){input[type=checkbox]{transition:none}}

/* input fields: dark recess, caramel focus */
input,select,textarea{
  background:var(--papir-2);border:1px solid var(--gravura);
  color:var(--slonovina);border-radius:var(--r-polje);
  font-size:var(--t-vnos);
}
/* Polje se v vrstici skrči in nikoli ne štrli iz svojega mesta. Brez
   min-width:0 ima polje v flex ali grid vrstici najmanjšo širino svoje
   vsebine: na iPhonu sta se zato »Od« in »Do« v urniku dneva prekrivala
   (lastnica, 7. 10. 2026), na 320 px pa je gumb Pošlji v Pomoči zdrsnil
   z zaslona. server/prekrivanje.mjs to meri na izrisu. */
input,select,textarea{min-width:0;max-width:100%}
/* Datum in ura: Safari na iPhonu jima da svojo obliko in najmanjšo širino,
   ki ne posluša stolpca. appearance:none ju vrne med navadna polja; brez
   vrednosti bi se prazno polje sesedlo, zato najmanjša višina dotika. */
input[type=date],input[type=time],input[type=datetime-local],input[type=month]{
  -webkit-appearance:none;appearance:none;min-height:44px;box-sizing:border-box;text-align:left;
}
input::-webkit-date-and-time-value{text-align:left;margin:0}
input::placeholder,textarea::placeholder{color:var(--telo-2)}
input:focus,textarea:focus,select:focus{border-color:var(--medenina)}
:focus-visible{outline:2px solid var(--medenina);outline-offset:3px;border-radius:6px}
input[type=date]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator{filter:var(--ikona-obrat,none);opacity:.7;cursor:pointer}

/* ── kartice: temne ploskve s tihim robom in mehko senco ──────────── */
.card,.izpostavek,.izbira,.stat,.pplan,.fpost,.lc,.ty,.s,.onboard,.publine,.auth-card,.cm-c,
.panel,.who-band,.plan,.pstanje,.form,.pstoritve li,.summary{
  background:var(--plosca);
  border:1px solid var(--gravura-2);
  border-radius:var(--r-kartica);
  box-shadow:var(--senca);
  color:var(--telo);
}
.card.hi,.onboard,.pplan.hi{background:var(--plosca-hi)}
.pplan.hi,.card.hi,.plan.hi{border-color:var(--karamela-rob)}
.bk .date,.appt .date{background:var(--noc);color:var(--telo);border-radius:var(--r-drobno)}
/* Ura na dvignjeni ploskvi: #8a5b26 na kremni podlagi drži 4,88:1, na
   dvignjenem --noc pa pade na 4,42 (izmerjeno na izrisanih pikslih), zato
   tam velja temnejša stopnja. */
.bk .date .hm,.appt .date .hm{color:var(--medenina-d)}

/* na dvignjenih ploskvah tiha stopnja pade pod prag — tam govori drugotna */
:is(.card,.pplan,.panel,.who-band,.plan,.fpost,.post,.form,.pstanje) :is(.nadnapis,.who,.meta,.card .ttl){
  color:var(--telo-2);
}

/* ── POUDAREK: ploskev z obrnjeno polariteto ─────────────────────────
   Na pogled je natanko ena — glavna kartica ali dejanje. V temni temi je
   kremna, v svetlih črnilna; vrednosti pridejo iz žetonov --i-* teme,
   zato je to pravilo v vsaki temi enako. */
.poudarek{
  --ohisje:var(--i-bg);
  --plosca:var(--i-bg); --plosca-hi:var(--i-bg-2); --noc:var(--i-cip);
  --mleko:var(--i-bg-2); --kartica:var(--i-bg);
  --slonovina:var(--i-naslov); --sij:var(--i-naslov);
  --telo:var(--i-telo); --telo-2:var(--i-telo-2);
  --kamen:var(--i-telo-2); --kamen-d:var(--i-telo); --noc-telo:var(--i-telo);
  --bled:var(--i-telo-2);
  --medenina:var(--i-akcent); --svit:var(--i-akcent); --terakota:var(--i-akcent);
  --na-tanu:var(--i-na-tanu);
  --papir-2:var(--i-vdolbina); --vdolbina:var(--i-vdolbina); --vdolbina-2:var(--i-vdolbina);
  --gravura:var(--i-rob); --gravura-2:var(--i-rob-2);
  --meja:var(--i-rob); --meja2:var(--i-rob-2); --rob:var(--i-rob); --rob-2:var(--i-rob-2);
  --rob-k:var(--i-rob-k);
  --napaka:var(--i-napaka);
  background:var(--i-bg);
  color:var(--i-telo);
  border-radius:var(--r-velika);
  box-shadow:var(--senca);
  border:none;
}
.poudarek .btn-p{background:var(--i-gumb);border-color:var(--i-gumb);color:var(--i-gumb-tekst)}
@media (hover:hover) and (pointer:fine){.poudarek .btn-p:hover{background:var(--i-gumb-hover);border-color:var(--i-gumb-hover);color:var(--i-gumb-tekst)}}
.poudarek .pill.sel,.poudarek .tab.on,
.poudarek .cat.on,.poudarek .cats button.on{
  background:var(--i-gumb);border-color:var(--i-gumb);color:var(--i-gumb-tekst)}
/* izbrana ura na obrnjeni ploskvi: mirna notranjost, akcenten obroč —
   isto načelo kot na svetlem (pravilo .time.sel + .poudarek zgoraj) */
.poudarek .times .time.sel{background:var(--noc);border-color:var(--i-akcent);color:var(--i-naslov)}
.poudarek input,.poudarek select,.poudarek textarea{
  background:var(--i-vdolbina);border-color:var(--i-rob);color:var(--i-naslov)}
.poudarek .znamka{color:var(--i-naslov)}
.poudarek .znamka .pika-i{background:var(--i-akcent)}
/* stanjska pilula na poudarjeni ploskvi */
.poudarek .cip{background:var(--i-cip);color:var(--i-naslov);border-radius:999px;
  font-size:var(--t-micro);letter-spacing:.08em;padding:6px 12px;display:inline-block}

/* ── NADSLOJI: plasti, ki pokrijejo aplikacijo ──────────────────────
   Uvod, prvi vstop, izbirnik države, list z inspiracijo — vse, kar se
   postavi ČEZ aplikacijo, jo pusti videti in jo razostri. Ostrina je
   tisto, kar pove, v katerem od obeh prostorov je bralka; neprosojna
   ploskev pove le, da je nekaj drugega izginilo. Isti prijem kot na
   prijavi in isti razlog.

   Eno pravilo, ker so plasti razsute po štirih datotekah in bi se
   jezik med njimi razšel. Podlaga je žeton, določen v OBEH temah;
   prosojnost se med podlagami ne prevzema, zato se meri na izrisanih
   pikslih (server/test-piksli.mjs).

   Kdor doda novo plast, naj ji da razred .nadsloj — ime v tem seznamu
   je zapis o preteklosti, ne način dela. */
.nadsloj{isolation:isolate}
/* Dve številki, obe izmerjeni in ne izbrani po občutku.

   POLMER 24. Chromium vzorči zameglitev ozadja samo znotraj okvira
   elementa in ob robu zadnjo vrsto pikslov razvleče, zato plast čez cel
   zaslon dobi OSTER PAS ob robu, širok približno toliko kot polmer.
   Preverjeno na petnajstvrstični sintetični strani: pri 40 px je bil pas
   ~110 px in napisi ob levem robu so ostali povsem berljivi, pri 16 px
   ~30 px. Razlitje plasti čez zaslon ne pomaga — ozadje je odrezano na
   zaslon, ne na element.

   PROSOJNOST .94. Ker se pasu ne da odpraviti, se ga utiša: pri .90 je
   bilo skozenj mogoče brati nogo strani, pri .94 je aplikacija še vedno
   navzoča, a ne več berljiva. Plast, skozi katero se da brati, ni
   globina, ampak nered. */
.nadsloj::before,#intro::before,#country-modal::before,.uvod::before,.insp-list::before{
  content:"";position:fixed;inset:0;z-index:-1;
  background:var(--nadsloj);
  -webkit-backdrop-filter:blur(24px) saturate(1.1);
  backdrop-filter:blur(24px) saturate(1.1);
}
/* Izbirnik države: brez sijev in brez gradientov. */
#country-modal::before{
  background:var(--nadsloj);
}
/* Brez zameglitve prosojnost ni slog, ampak nečitljivost: aplikacija bi
   ostro prosevala skozi besedilo. Tam je ploskev neprosojna. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .nadsloj::before,#intro::before,#country-modal::before,.uvod::before,.insp-list::before{
    background:var(--ohisje)}
  #country-modal::before{background:var(--noc)}
}

/* ── glass (floating pills, back buttons) ──────────────────────────── */
.steklo{background:var(--steklo-gosto,var(--steklo));backdrop-filter:blur(9px);
  border:1px solid var(--gravura-2);border-radius:999px;color:var(--slonovina)}

/* ── photography: always washed, never raw ─────────────────────────── */
.pcard[data-slika],.pkartica[data-slika],.pfoto.ima{
  background-color:var(--foto-blend);background-blend-mode:luminosity;
}
img.oprana,.pimg img,.fpost .pimg img,#foto-grid img{
  filter:var(--foto-filter);
}
/* Zastor je RAVEN, brez gradienta. Fotografija je
   enakomerno oprana, napis na njej meri kontrast na najsvetlejši liski. */
.pfoto.ima::after{
  background:var(--foto-zastor);
}

/* Izpostavljena ploščica v orbiti: karamelna obroba na odru. */
.ochip.hl{
  background:transparent;border:1px solid var(--karamela-rob);
  color:var(--medenina);font-weight:500;border-radius:999px;
  letter-spacing:.14em;text-transform:uppercase;font-size:var(--t-micro);
}

/* Značka nad naslovom je NADNAPIS, ne gumb. S pilulo okoli sebe je bila
   videti kot nekaj, kar se da klikniti, in je tekmovala z gumboma pod
   naslovom — trije ovali eden pod drugim, od katerih je eden mrtev.
   Ostane samo črka: karamela kot besedilo je medenina (5,60:1). */
.badge{
  background:none;border:0;padding:0;border-radius:0;
  color:var(--medenina);font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;font-size:var(--t-micro);
}

/* ── junak naslovnice: ena obrnjena ploskev, krogla za besedilom ──────
   Lastnica je iz petih predlogov (13. 9. 2026) izbrala tega: črnilna
   ploskev čez vso prvo stran, krogla velika in ZA besedilom, najmanj
   elementov. Drznost tu ni v okrasju, ampak v tem, koliko je izpuščeno.

   Fotografije v junaku ni več; ploskev je .poudarek (ena obrnjena na
   pogled, CGP §5), krogla je tekstura in ne slika ob strani. Imen storitev
   na njej tu NI: ime čez naslov ni plast, ampak nesreča — imena ostanejo
   tam, kjer krogla stoji sama (uvod aplikacije). Rahel karamelni sij za
   kroglo je žeton --i-akcent, razredčen; brez njega je ploskev ravna. */
.oder-hero{
  position:relative;overflow:hidden;
  background:var(--i-bg);
  border-radius:0 0 var(--r-velika) var(--r-velika);
  box-shadow:none;border:0;
  min-height:min(86vh,720px);
  display:flex;align-items:center;
}
.oder-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 60% at 50% 42%,rgba(200,155,109,.10),transparent 70%);
}
.oder-hero .hero-c{
  position:relative;z-index:1;
  width:100%;text-align:center;
  padding-top:72px;padding-bottom:72px;
}
/* Slog očesa nosi h1 junaka: od 27. 9. 2026 so to trije velelniki
   »Najdi. Izberi. Potrdi.« (lastnica), drobno in ne kot velik naslov.
   Pravilo zato nosi vse, kar bi sicer prevzel h1: težo, višino vrstice,
   širino. */
.oder-hero .hero-oko{
  /* Večje od mikro oznake (lastnica, 26. 9. 2026): to je edini naslov
     junaka. Sled se z velikostjo rahlo umakne, da vrstica na telefonu
     ostane v eni vrsti. */
  font-family:var(--num);font-weight:400;font-size:clamp(13px,3.6vw,16px);letter-spacing:.24em;
  line-height:1.4;text-transform:uppercase;color:var(--i-akcent);margin:0 auto 26px;max-width:none;
}
/* Naslov v treh velelnikih je odstranjen; pravilo ostaja za oder drugih
   strani, ki h1 še nosijo. */
.oder-hero h1{
  font-family:var(--display);font-weight:200;letter-spacing:-.015em;
  font-size:clamp(44px,7.4vw,92px);line-height:.98;
  margin:0 auto 22px;color:var(--i-naslov);max-width:16ch;
}
.oder-hero .lede{max-width:66ch;color:var(--i-telo);margin:0 auto 32px}

/* Iskanje: ena svetla pilula na odru z znakom, poljem in gumbom. Ploskev in
   napis sta žetona svetlega gumba na obrnjeni ploskvi (--i-gumb), zato ni
   nove barve. */
.iskanje{
  display:flex;align-items:center;gap:6px;
  max-width:580px;min-height:60px;padding:6px 6px 6px 18px;margin:0 auto;
  background:var(--i-gumb);border-radius:999px;
  box-shadow:var(--senca-dvig);
}
.iskanje .isk-znak{flex:none;width:20px;height:20px;fill:none;stroke:var(--i-gumb-tekst);stroke-width:1.7;opacity:.7}
.iskanje input{
  flex:1;min-width:0;height:48px;border:0;background:transparent;
  font-family:var(--body);font-size:var(--t-vnos);color:var(--i-gumb-tekst);
  padding:0 8px;
}
.iskanje input::placeholder{color:var(--i-gumb-tekst);opacity:.72}
.iskanje input:focus{outline:none}
.iskanje:focus-within{outline:2px solid var(--i-akcent);outline-offset:3px}
.iskanje input::-webkit-search-cancel-button{-webkit-appearance:none}
/* Gumb v piluli je črnilo na belem, ne belo na belem: pilula je svetla
   ploskev (--i-gumb), zato gumb na njej obrne isti par nazaj. */
.oder-hero .iskanje .btn-p{
  flex:none;height:48px;padding:0 22px;border-radius:999px;
  background:var(--i-gumb-tekst);border-color:var(--i-gumb-tekst);color:var(--i-gumb);
}
@media (hover:hover) and (pointer:fine){.oder-hero .iskanje .btn-p:hover{background:var(--i-bg);border-color:var(--i-bg);color:var(--i-gumb)}}

/* Skupine kot steklene pilule na odru: ikona in ime, vodoravna vrsta, ki
   se na telefonu drsi. Samo zasedene skupine (script.js). */
.hero-skupine{
  /* je <nav>, a ni glava: pravila za glavo (steklo, rob, lepljivost) se izničijo */
  position:static;background:none;border:0;backdrop-filter:none;padding:0;z-index:auto;
  display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:26px;min-height:44px;
}
.hero-skupine::after{display:none}
.hero-skupine a{
  display:inline-flex;align-items:center;gap:8px;
  min-height:44px;padding:0 16px 0 12px;border-radius:999px;
  background:var(--steklo-oder);border:1px solid var(--steklo-oder-rob);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:var(--i-naslov);font-size:var(--t-sm);white-space:nowrap;
  transition:background-color .18s,border-color .18s;
}
@media (hover:hover) and (pointer:fine){.hero-skupine a:hover{border-color:var(--i-naslov)}}
.hero-skupine .ik{width:18px;height:18px;flex:none;color:var(--i-akcent)}

/* Zavihki registratorja, ki visijo z dna odra (predlog C, 8. 10. 2026).
   Prvi, »Vse«, je bel (--i-gumb je bela strani) in se zlije s stranjo pod
   odrom — kot zavihek, ki je odprt. Ostali so steklo na odru. */
.oder-hero:has(.viseci){padding-bottom:58px}
.hero-skupine.viseci{
  position:absolute;left:0;right:0;bottom:0;z-index:6;margin:0;min-height:0;
  display:flex;flex-wrap:nowrap;justify-content:center;align-items:flex-end;gap:6px;
  padding:0 var(--rob-strani,28px);
}
.hero-skupine.viseci a{
  min-height:46px;padding:0 18px;border:0;border-radius:var(--r-polje) var(--r-polje) 0 0;
  background:var(--steklo-oder);
  box-shadow:inset 0 1px 0 var(--steklo-oder-rob),inset 1px 0 0 var(--steklo-oder-rob),inset -1px 0 0 var(--steklo-oder-rob);
}
@media (hover:hover) and (pointer:fine){.hero-skupine.viseci a:hover{background:rgba(255,255,255,.18)}}
.hero-skupine.viseci a.vse{min-height:52px;background:var(--i-gumb);color:var(--i-gumb-tekst);box-shadow:none;font-weight:500}
.hero-skupine.viseci a:focus-visible{outline:2px solid var(--i-akcent);outline-offset:-4px}

/* Podjetja na orbiti (predlog C). Krožnice se ne riše; položaj, velikost
   in prosojnost vsake ploščice postavi script.js po globini na elipsi.
   Ploščica je temno steklo z robom, da ime ostane berljivo tudi tam, kjer
   gre čez delce krogle; napis je --i-naslov kot drugje na odru. */
.orbita-podjetij{position:absolute;inset:0;z-index:3;pointer-events:none}
.oder-hero .hero-c{pointer-events:none}
.oder-hero .hero-c > *{pointer-events:auto}
.orbita-podjetij .op{
  position:absolute;left:0;top:0;pointer-events:auto;
  display:inline-flex;align-items:center;gap:9px;min-height:44px;padding:0 16px 0 6px;
  border-radius:999px;white-space:nowrap;
  /* Prosojna pilula (lastnica, 12. 10. 2026: »ozadje naredi prosojno«):
     brez temne ploskve in brez zameglitve, samo lasnica in napis na odru. */
  background:transparent;
  box-shadow:inset 0 0 0 1px var(--steklo-oder-rob);
  color:var(--i-naslov);font-size:var(--t-sm);text-decoration:none;
  will-change:transform,opacity;
}
.orbita-podjetij .op img{width:32px;height:32px;border-radius:50%;object-fit:cover;flex:none}
/* Začetnica podjetja brez fotografije: krog iste mere kot fotografija,
   lasnica stekla in črka v barvi napisa (izmerjena na temnem steklu). */
.orbita-podjetij .op .op-zac{width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;
  box-shadow:inset 0 0 0 1px var(--steklo-oder-rob);font-family:var(--display);font-weight:300;font-size:15px;line-height:1;color:var(--i-naslov)}
.orbita-podjetij .op span{max-width:16ch;overflow:hidden;text-overflow:ellipsis}
@media (hover:hover) and (pointer:fine){.orbita-podjetij .op:hover{box-shadow:inset 0 0 0 1px var(--i-naslov)}}
.orbita-podjetij .op:focus-visible{outline:2px solid var(--i-akcent);outline-offset:3px}

/* Listek: termin kot vstopnica (predlog C). Zgoraj kdo in kaj, spodaj
   kdaj in koliko, vmes perforacija z zarezama. Zareza je krog barve
   podlage (--listek-zarez), obrobljen z isto lasnico kot listek, in
   odrezan na polovico — tako bere kot izrez in ne kot pika. */
.listek{
  --listek-zarez:var(--ohisje,#fff);
  position:relative;background:var(--plosca,#fff);border-radius:var(--r-kartica);
  box-shadow:inset 0 0 0 1px var(--gravura);
  display:flex;flex-direction:column;min-width:0;
}
.listek-glava{padding:20px 22px 16px;display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.listek-kat{display:inline-flex;align-items:center;gap:7px;font-size:var(--t-xs);color:var(--kamen);margin-bottom:6px}
.listek-kat .ik{width:16px;height:16px;flex:none;color:var(--medenina)}
.listek-ime{font-family:var(--display);font-weight:300;font-size:var(--t-xl);line-height:1.15;margin:0;color:var(--slonovina);overflow-wrap:anywhere}
.listek-opis{margin:0;font-size:var(--t-sm);color:var(--telo)}
.listek-rez{position:relative;height:0;margin:0 18px;border-top:2px dashed var(--gravura)}
.listek-rez::before,.listek-rez::after{
  content:"";position:absolute;top:-14px;width:26px;height:26px;border-radius:50%;
  background:var(--listek-zarez);box-shadow:inset 0 0 0 1px var(--gravura);
}
.listek-rez::before{left:-31px;clip-path:inset(0 0 0 50%)}
.listek-rez::after{right:-31px;clip-path:inset(0 50% 0 0)}
.listek-noga{padding:14px 22px 18px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.listek-kdaj{display:flex;align-items:baseline;gap:8px;margin-right:auto}
.listek-ura{font-family:var(--num);font-weight:200;font-size:34px;line-height:1;font-variant-numeric:tabular-nums;color:var(--slonovina)}
.listek-kdaj > span,.listek-cena{font-size:var(--t-sm);color:var(--telo)}
.listek-noga .btn{min-height:44px}

/* Bon kot kartica (8. 10. 2026, po zgledu bančnega »Order a Card«).
   Darilni bon v razmerju bančne kartice 1,586 : 1 in z radijem 22 (--r-foto).
   Ena oblika kartice z NOTRANJIMI žetoni: data-oblika zamenja samo žetone,
   pravila za ime, znesek, kodo in veljavnost so ena sama. Velikosti so v
   enotah vsebnika (cqi), da ima ista kartica ista razmerja v vrtiljaku, na
   strani bona in v Mojih bonih; spodnja meja drži drobni tisk berljiv.

   Oblike in kontrast (izmerjeno na izrisanih pikslih, server/test-piksli.mjs,
   prizori bk-*):
     krem    kremna kartica znamke; črnilo na kremu, drugotno #6b5d4b (5,35)
     crnilo  obrnjena ploskev (.poudarek, žetoni --i-*): krem napis,
             karamelna pika nad I
     bel     »Karamela«: bela kartica; karamela riše valove iz vogala, kjer
             ni besedila — karamela je risba in nikoli podlaga pod napisom
     foto    oprana fotografija ponudnika (sepija) za zastorom; napis je
             vedno na zastoru, brez fotografije stoji temen nadomestek odra */
:root{--bon-krem:#F2EADF}
.bk-kartica{
  container-type:inline-size;
  position:relative;isolation:isolate;overflow:hidden;
  width:100%;aspect-ratio:1.586;
  background:var(--plosca);color:var(--telo);
  -webkit-print-color-adjust:exact;print-color-adjust:exact;
}
.bk-kartica[data-oblika]{border-radius:var(--r-foto)}
.bk-kartica[data-oblika="krem"]{background:var(--bon-krem);--ohisje:var(--bon-krem)}
.bk-kartica[data-oblika="crnilo"]{background:var(--i-bg)}
.bk-kartica[data-oblika="foto"]{
  background:var(--oder-2);
  --slonovina:var(--foto-napis);--telo:var(--foto-napis);--telo-2:var(--i-telo);
  --medenina:var(--i-akcent);
}
.bk-foto{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;filter:var(--foto-filter)}
.bk-zastor{position:absolute;inset:0;z-index:0;background:var(--foto-zastor)}
.bk-valovi{position:absolute;right:0;bottom:0;z-index:0;width:31cqi;height:31cqi;pointer-events:none}
.bk-valovi circle{fill:none;stroke:var(--karamela);stroke-width:1.5px;vector-effect:non-scaling-stroke}
.bk-notri{
  position:relative;z-index:1;height:100%;box-sizing:border-box;
  padding:6cqi 7cqi 6.4cqi;display:flex;flex-direction:column;
}
.bk-glava{display:flex;align-items:flex-start;justify-content:space-between;gap:4cqi;min-width:0}
.bk-ime{
  font-family:var(--display);font-weight:300;font-size:max(13px,5.2cqi);line-height:1.2;
  color:var(--slonovina);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.bk-kartica .znamka{font-size:max(18px,5cqi);min-height:0;flex:none;color:var(--slonovina);margin-top:.2em}
.bk-kartica .znamka .pika-i{background:var(--medenina)}
.bk-sredina{margin-top:auto;display:flex;flex-direction:column;gap:.8cqi;min-width:0}
.bk-oznaka,.bk-od{font-size:max(11px,3.5cqi);line-height:1.3;color:var(--telo-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-znesek{
  font-family:var(--num);font-weight:200;font-size:13cqi;line-height:1;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;color:var(--slonovina);white-space:nowrap;
}
.bk-noga{margin-top:4.6cqi;display:flex;align-items:flex-end;gap:7cqi;min-height:1em}
.bk-polje{display:flex;flex-direction:column;gap:.6cqi;min-width:0}
.bk-l{font-size:max(10.5px,3.1cqi);line-height:1.2;color:var(--telo-2)}
.bk-koda,.bk-velja{
  font-family:var(--num);font-weight:400;font-size:max(12px,4.1cqi);line-height:1.15;
  font-variant-numeric:tabular-nums;color:var(--slonovina);white-space:nowrap;
}
.bk-koda{letter-spacing:.06em}
/* Darilni list (SVG) se meri zunaj vidnega polja, kadar na zaslonu stoji
   kartica (bon-slika.js, pikaIzrisa). */
.bon-meri{position:absolute;left:-12000px;top:0;width:1000px;pointer-events:none}

/* Razdelek prostih terminov pod odrom naslovnice. */
.prosto-listki{padding-top:40px;padding-bottom:8px}
.pl-glava{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:18px}
.pl-glava h2{margin:0}
.pl-vsi{display:inline-flex;align-items:center;min-height:44px;font-size:var(--t-sm);color:var(--medenina);text-decoration:underline;text-underline-offset:3px}
.pl-vrsta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
@media(max-width:980px){.pl-vrsta{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.pl-vrsta{grid-template-columns:minmax(0,1fr)}}
.skrito-vidno{position:absolute;width:1px;height:1px;overflow:hidden;margin:0;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

@media (prefers-reduced-motion: reduce){
  .orbita-podjetij .op{will-change:auto}
}
.hero-vec{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:18px;
  font-family:var(--num);font-size:var(--t-xs);letter-spacing:.12em;text-transform:uppercase;
  color:var(--i-telo-2);
}
.hero-vec svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}
@media (hover:hover) and (pointer:fine){.hero-vec:hover{color:var(--i-naslov)}}

/* Krogla iz delcev: jedro Termine, tu ZA besedilom in razredčena, da je
   naslov na njej berljiv; delci so slonokoščeni s karamelnimi poudarki
   (--pika*). Kontrast naslova se meri na izrisanih pikslih, ne na barvi. */
.oder-hero canvas{
  position:absolute;left:50%;top:47%;transform:translate(-50%,-50%);
  width:min(78vmin,680px);height:auto;aspect-ratio:1;opacity:.62;
}

/* Imena storitev, ki se izluščijo iz delca (krogla.js). Napisi so besedilo
   in ne risba na platnu: na platnu bi bili pri povečavi mehki, merilnik
   kontrasta pa bi namesto njih izmeril podlago in javil, da je vse prav.

   Plast leži nad platnom in NE prestreza kazalca — pod njo ni ničesar za
   klikniti, prestrežen klik pa bi bil klik v prazno. */
.krogla-imena{position:absolute;inset:0;pointer-events:none;
  width:min(100%,460px);aspect-ratio:1;margin:auto}
.krogla-ime{position:absolute;display:flex;flex-direction:column;align-items:center;gap:7px;
  white-space:nowrap;opacity:0;will-change:opacity,transform}
/* Pika je karamela in zasveti: halo okoli nje je isti ton, le razredčen, da
   se svetloba bere kot svetloba in ne kot druga barva. */
.krogla-ime .ki-pika{width:6px;height:6px;border-radius:50%;
  background:var(--medenina,#C89B6D);flex:none;
  box-shadow:0 0 0 3px rgba(200,155,109,.20), 0 0 12px 2px rgba(200,155,109,.55)}
/* Besedilo je --foto-napis in ne --slonovina: ime leži na OPRANI FOTOGRAFIJI,
   in za besedilo na njej obstaja svoj žeton. --slonovina je črnilo, ki se
   obrne samo znotraj .poudarek — na fotografski ploskvi zunaj njega je bilo
   ime temno na temnem in se ni videlo. Karamela pa je grafični akcent: ime
   mora doseči 4,5:1 kot vsako drugo besedilo.
   Velikost postavi krogla.js po globini delca — bližja pika, večje ime. */
.krogla-ime b{font-family:var(--num,var(--body));font-weight:300;
  letter-spacing:.04em;color:var(--foto-napis,#F2E8D8);line-height:1.2;
  /* Ime leži na delcih, ne na prazni ploskvi. Temen halo ga dvigne z njih;
     na temnem odru se ne vidi drugje kot za črkami. */
  text-shadow:0 1px 10px rgba(26,19,12,.75), 0 0 3px rgba(26,19,12,.6)}

@media (prefers-reduced-motion: reduce){
  /* Brez giba ni izluščanja: krogla nariše en sam okvir in imena nikoli ne
     nastanejo. Plast ostane prazna in ne zaseda ničesar. */
  .krogla-imena{display:none}
}

@media(max-width:900px){
  /* Ožji stolpec: ime bi zašlo čez rob odra, zato ga tu ni. */
  .krogla-imena{display:none}
}
@media(max-width:760px){
  .oder-hero{border-radius:0 0 var(--r-kartica) var(--r-kartica);min-height:0}
  .oder-hero .hero-c{padding-top:40px;padding-bottom:48px}
  /* Na telefonu krogla ne stoji ZA besedilom (tam je motila branje),
     ampak nad njim: vrh odra je njen, okoli nje krožijo podjetja,
     iskanje je pod njo (predlog C, 8. 10. 2026). */
  .oder-hero canvas{top:150px;width:min(72vw,300px);opacity:.6}
  .oder-hero .hero-c{padding-top:296px}
  .oder-hero:has(.viseci){padding-bottom:52px}
  .oder-hero h1{font-size:var(--t-3xl)}
  .iskanje{flex-wrap:wrap;padding:8px;border-radius:var(--r-kartica);gap:4px}
  .iskanje .isk-znak{margin-left:10px}
  .iskanje input{flex:1 1 60%}
  .oder-hero .iskanje .btn-p{flex:1 1 100%;justify-content:center;border-radius:999px;margin-top:4px}
  .hero-skupine{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    margin-inline:calc(-1 * var(--rob-strani,28px));padding-inline:var(--rob-strani,28px)}
  .hero-skupine::-webkit-scrollbar{display:none}
  .hero-skupine.viseci{justify-content:flex-start;margin:0;padding:0 var(--r-kartica)}
  .orbita-podjetij .op{font-size:var(--t-xs);padding-right:12px}
  .orbita-podjetij .op img,.orbita-podjetij .op .op-zac{width:28px;height:28px}
  .orbita-podjetij .op span{max-width:14ch}
  .oder-hero .hero-c{padding-bottom:24px}
}

/* koraki »Kako deluje«: karamelne števke Outfit 200 (CGP §2.3) */
.arch .cap{background:transparent;border:none;box-shadow:none;width:auto;height:auto}
.arch .cap svg{display:none}
.arch .cap::before{
  content:counter(korak, decimal-leading-zero);
  font-family:var(--display);font-weight:200;font-size:44px;
  color:var(--medenina);line-height:1;
}
.arches{counter-reset:korak}
.arch{counter-increment:korak}
.bub .ic{box-shadow:none}

/* country picker */
#country-modal{background:var(--ohisje)}
.cm-c{border-radius:var(--r-drobno)}
.cm-c.hint{border-color:var(--medenina);background:var(--tan-mehki)}
#intro{background:var(--globina)}
#intro .znak{width:96px;height:96px}

/* Znak kot slika na ploskvi, katere barva sledi temi. znak-krogi.svg nosi
   kremne obroče s prosojnostjo, ki na kremni ploskvi izginejo: izmerjeno na
   izrisanih pikslih je zunanji obroč tam dosegel le 1,34:1 pri pragu 3:1 za
   grafiko in vidno je ostalo samo karamelno jedro. Vpisana pot do slike temi
   brez skripte ne more slediti, žeton pa lahko: tema je atribut na korenskem
   elementu, nastavljen sinhrono, zato preklop nikoli ne utripne. */
.znak-slika{
  background-image:var(--znak-slika);
  background-size:contain;background-repeat:no-repeat;background-position:center;
  display:block;
}
.cm-sig .znak-slika{width:30px;height:30px}

/* app onboarding screen */
.uvod-znak{width:76px;height:76px}
.uvod [tabindex="-1"]:focus-visible{outline:none}
.uvod .btn-p{background:var(--krem);border-color:var(--krem);color:var(--crnilo)}
.uvod-pike span{background:rgba(242,234,223,.22)}
.uvod-pike span.on{background:var(--medenina)}

/* ponudniški profil: kartica s fotografijo je uvodni prizor */
.pglava .pfoto{display:none}
.pglava{padding-bottom:0}
.pkartica{align-items:stretch;gap:0;border-radius:var(--r-velika);overflow:hidden}
.pkartica .pkartica-t{background:transparent;text-align:center;padding:22px 20px 6px}
.pkartica h1{
  font-weight:200;letter-spacing:.16em;text-transform:uppercase;
  font-size:var(--t-xl);color:var(--foto-napis);
}
.pkartica .meta{color:var(--foto-napis);opacity:.82;letter-spacing:.22em}
.pkartica .rate,.pkartica .rate *,.pkartica .rate .brez-ocen{color:var(--foto-napis)}
.pkartica .rate{background:transparent;margin:0;padding:2px 20px 20px;text-align:center}
.pkartica:not([data-slika]){background:var(--oder-1)}
.pkartica[data-slika]::before{
  content:"";position:absolute;inset:0;
  background:var(--foto-zastor);
  pointer-events:none;
}
.pkartica>*{position:relative}
.pkartica .avatar{display:none}

/* storitve: črtan seznam s karamelnimi cenami */
.pstoritve{display:block;overflow:visible;margin:0;padding:0}
.pstoritve li{
  background:transparent;border:none;box-shadow:none;border-radius:0;
  min-width:0;max-width:none;padding:14px 2px;
  display:flex;flex-direction:row;align-items:baseline;justify-content:space-between;gap:14px;
  border-bottom:1px solid var(--gravura-2);
}
.pstoritve li:last-child{border-bottom:none}
.pstoritve li .t{font-weight:300;font-size:var(--t-base)}
.pstoritve li .m{color:var(--medenina);font-family:var(--num);font-weight:400}
/* dodatek k storitvi: zamaknjen, da bere kot podrejen glavni storitvi */
.pstoritve li.dodatek{padding-left:18px}
/* Lokacije: naslov ni cena in ne sme biti karamelen. Bere se kot besedilo,
   po katerem se stranka orientira, in ob daljšem zapisu ostane poravnan
   levo. */
.plokacije li .m{color:var(--telo);font-family:var(--body);text-align:right}
.plokacije li .m a{color:var(--medenina);text-decoration:underline;text-underline-offset:3px;
  display:inline-block;min-height:44px;line-height:44px;margin:-12px 0}

/* Kje smo: podlaga kot fotografija (oprana, zaobljena, karamelna oznaka je
   edini poudarek), pod njo naslov in dve poti ven. Slika ima razmerje, da
   stran ne skoči, ko pride. */
.zem-slika{display:block;border-radius:var(--r-foto);overflow:hidden;border:1px solid var(--gravura-2);
  background:var(--meja2);aspect-ratio:640/300;margin:0 0 12px}
.zem-slika img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.85)}
.zem-slika:focus-visible{outline:2px solid var(--medenina);outline-offset:3px}
.zem-naslov{margin:0 0 12px;color:var(--telo)}
.zem-poti{display:flex;gap:10px;flex-wrap:wrap;margin:0}
.zem-poti .btn{min-height:44px}

/* rating star */
.ic-star{fill:var(--medenina)}

/* izbirnik: ikona koledarja na kremu */
.poudarek input[type=date]::-webkit-calendar-picker-indicator{filter:var(--ikona-obrat-p,none)}

/* ── pogovori: seznam niti in mehurčki ──────────────────────────────
   Razmerje je sledenje. Lastna sporočila so karamela s črnilom (7,28:1),
   sogovornikova pa dvignjena ploskev v tonu strani. */
.pog-vrstica{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:none;border:none;border-bottom:1px solid var(--gravura-2);
  padding:12px 2px;min-height:56px;cursor:pointer;
  color:var(--telo);font:inherit;font-size:var(--t-md);
}
.pog-vrstica:last-child{border-bottom:none}
.pog-vrstica .pav{
  flex:none;width:42px;height:42px;border-radius:50%;
  background:var(--medenina);color:var(--na-tanu);
  display:grid;place-items:center;font-family:var(--display);font-weight:400;
  font-size:var(--t-base);
}
/* Začetnica stoji na ponudnikovi lastni barvi, kadar je njegova skupina
   znana (CGP v9); brez skupine ostane karamela znamke. Pastel je presvetel,
   da bi svoj rob držal proti vrstici, zato s sabo prinese lasast rob. */
.pog-vrstica[data-kat] .pav{background:var(--kat-mavrica) var(--kat-pastel);color:var(--kat-na-pastelu);
  border:1px solid var(--kat-tekst)}
.pog-vrstica .kdo{min-width:0;flex:1}
.pog-vrstica .kdo b{display:block;color:var(--slonovina);font-weight:500}
.pog-vrstica .zadnje{display:block;color:var(--telo-2);font-size:var(--t-sm);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pog-vrstica .kdaj{flex:none;font-family:var(--num);font-size:var(--t-xs);color:var(--telo-2)}
.pog-vrstica .pika-n{flex:none;width:9px;height:9px;border-radius:50%;background:var(--medenina)}

.nit{display:flex;flex-direction:column;gap:8px;max-height:420px;overflow-y:auto;
  padding:4px 2px 12px;overscroll-behavior:contain}
.msg{max-width:78%;padding:10px 14px;border-radius:18px;
  font-size:var(--t-md);line-height:1.5;white-space:pre-wrap;word-break:break-word}
.msg.moje{align-self:flex-end;background:var(--medenina);color:var(--na-tanu);
  border-bottom-right-radius:6px}
.msg.njihovo{align-self:flex-start;background:var(--noc);color:var(--slonovina);
  border:1px solid var(--gravura-2);border-bottom-left-radius:6px}
.msg .kdaj{display:block;font-family:var(--num);font-size:10.5px;
  letter-spacing:.04em;margin-top:3px;color:inherit}
.nit-forma{display:flex;gap:10px;margin-top:6px}
.nit-forma input{flex:1;min-height:44px}
/* prošnje za pogovor (Instagram, lastnica 7. 9. 2026): izbira Pogovori ali
   Prošnje s števcem, oznaka »prošnja poslana« v vrstici in vrstica z
   odločitvijo nad nitjo */
.pog-nacin{margin-bottom:12px}
.pog-nacin .n{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;margin-left:8px;
  border-radius:999px;background:var(--medenina);color:var(--na-tanu);font-family:var(--num);font-size:11px;line-height:1}
.tab.on .n{background:var(--ohisje);color:var(--medenina)}
.pog-nacin .n[hidden]{display:none}
.pog-vrstica .oznaka{display:block;margin-top:2px;font-family:var(--num);font-size:var(--t-micro);
  letter-spacing:.06em;text-transform:uppercase;color:var(--medenina)}
.prosnja-vrstica{border:1px solid var(--gravura);border-radius:var(--r-drobno);padding:12px 14px;margin:0 0 12px;
  background:var(--papir-2)}
.prosnja-vrstica p{margin:0 0 10px;font-size:var(--t-sm);color:var(--telo)}
.prosnja-gumbi{display:flex;gap:8px;flex-wrap:wrap}
.prosnja-gumbi .btn{min-height:44px}
/* v kremni kartici si mehurčki prek žetonov zamenjajo vlogi (.krem) */
.krem .msg.njihovo{background:var(--krem-cip,#E2D5C2);border-color:transparent}

/* ponudba termina v niti: KREMNA kartica — edino svetlo dejanje v pogledu.
   Žeton je --i-polje (krem znamke) in ne --krem: ta je v v11 črnilo, in
   kartica je bila z njim temna z nevidnim besedilom (izmerjeno 28. 9.). */
.msg.ponudba{
  background:var(--i-polje);color:var(--i-na-polju);border:none;
  border-radius:var(--r-kartica);border-bottom-left-radius:6px;
  display:flex;flex-direction:column;gap:4px;align-items:flex-start;
  padding:14px 16px;max-width:86%;
}
.msg.ponudba .p-naslov{
  font-family:var(--display);font-weight:400;font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--i-na-polju-tih);
}
.msg.ponudba b{font-family:var(--display);font-weight:300;font-size:var(--t-lg);color:var(--i-na-polju)}
.msg.ponudba .p-kdaj{font-family:var(--num);font-size:var(--t-sm);color:var(--i-na-polju-tih)}
.msg.ponudba .p-stanje{font-size:var(--t-sm);font-weight:600;color:var(--i-polje-fokus);margin-top:4px}
/* darilni bon v niti: koda je stvar, ki jo stranka pokaže — večja, razprta */
.msg.ponudba.bon .p-koda{
  font-family:var(--num);font-size:var(--t-lg);letter-spacing:.14em;color:var(--i-na-polju);
  padding:6px 12px;border:1px solid var(--i-polje-rob);border-radius:999px;margin-top:2px;
}
.msg.ponudba.bon .p-besedilo{font-size:var(--t-sm);color:var(--i-na-polju);margin-top:4px;line-height:1.45}
.msg.ponudba .btn-p{
  margin-top:8px;background:var(--ink);border-color:var(--ink);color:#F2EADF;
}
@media (hover:hover) and (pointer:fine){.msg.ponudba .btn-p:hover{background:#33281e;border-color:#33281e;color:#F2EADF}}
/* srček na zgodbo v niti (zgodbe.js): sličica zgodbe nad besedilom; ko
   zgodba poteče, slike ni več in ostane besedilo */
.msg.odziv .odziv-slika{display:block;width:56px;height:74px;object-fit:cover;border-radius:10px;margin-bottom:6px}

/* obrazec za ponudbo v plošči */
.ponudba-forma{margin-top:10px;padding:14px 16px;border:1px solid var(--gravura-2);
  border-radius:var(--r-drobno);display:grid;gap:4px}
.ponudba-forma .fld{margin-bottom:6px}
.ponudba-forma .btn{justify-self:start}

@media(prefers-reduced-motion:reduce){
  .btn{transition:none}
}

/* akcent na obarvani ploskvi (--tan-mehki) je odtenek presvetel: #8a5b26
   tam meri 4,27, zato opomba govori v temnejši stopnji */
.demo-note,.tmpl{color:var(--akcent-ton)}

/* pike uvoda: na kremu je --meja skoraj nevidna in vidna je bila samo
   dejavna pika, zato je trak štirih strani bral kot ena */
.uvod-pike span{background:var(--telo-2);opacity:.32}
.uvod-pike span.on{background:var(--medenina);opacity:1}

/* ── vabilo na domači zaslon in obvestila (namestitev.js) ─────────────
   Vodoravna vrstica, ne pasica čez zaslon: to je ponudba ob dejanju in
   ne obvestilo sistema. Tiho stanje (»Termina je nameščena«) nima gumba,
   zato dobi šibkejši rob in nič ozadja — vrstica, ki nič ne zahteva, ne
   sme tekmovati s tisto, ki nekaj ponuja.

   Tarča križca je 44 px, ker je to prva stvar, ki jo bo kdo pritisnil s
   palcem, in zgrešen križec na kartici, ki se ne da zapreti, je jeza. */
.namest{display:flex;align-items:center;gap:16px;flex-wrap:wrap;position:relative;
  /* Desno 56 px za križec (44 px + rob): na širšem zaslonu so gumbi
     stali pod njim in »Vklopi obvestila« se je s križcem prekrival 28 px
     (server/prekrivanje.mjs). */
  margin-top:18px;padding:16px 56px 16px 18px;border:1px solid var(--rob-k);
  border-radius:var(--r-kartica);background:var(--vdolbina);text-align:left}
.namest.tiho{background:none;border-color:var(--meja);padding:12px 56px 12px 16px}
.namest-t{flex:1 1 220px;min-width:0}
.namest-t b{display:block;font-family:var(--display);font-weight:400;
  font-size:var(--t-base);color:var(--slonovina)}
.namest-p{font-size:var(--t-sm);color:var(--telo);margin-top:3px;max-width:52ch}
.namest .namest-ios{display:block;font-size:var(--t-sm);color:var(--kamen);margin-top:6px}
.namest-d{display:flex;gap:10px;flex-wrap:wrap}
.namest-d .btn{min-height:44px}
.namest-x{position:absolute;top:4px;right:4px;width:44px;height:44px;display:grid;
  place-items:center;background:none;border:0;cursor:pointer;font-size:20px;line-height:1;
  color:var(--kamen);font-family:inherit;border-radius:var(--r-drobno)}
@media (hover:hover) and (pointer:fine){.namest-x:hover{color:var(--slonovina)}}
.namest.tiho .namest-p{margin-top:0;color:var(--kamen)}
@media(max-width:520px){
  .namest{align-items:flex-start;padding-right:52px}
  /* Dva gumba drug ob drugem sta na telefonu dva stolpca po 46 %, in
     »Vklopi obvestila« se v njiju zlomi čez dve vrstici. Eden pod drugim
     ostaneta cela in tarča ostane 44 px. */
  .namest-d{width:100%;flex-direction:column;align-items:stretch}
  .namest-d .btn{justify-content:center}
}

/* ── puščica nazaj v gumbih (lastnica, 29. 9. 2026) ─────────────────
   Vsak korak nazaj je ista puščica »<« kot v glavi strani: v obrobljenem
   gumbu čarovnika (.btn .ic) in v besedilni povezavi nazaj na seznam
   pogovorov (.nazaj-pov). Znak je risba iz črt, ne besedilo. */
.btn .ic,.nazaj-pov .ic{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.nazaj-pov{display:inline-flex;align-items:center;gap:4px;min-height:44px}