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

   Bela je podlaga strani in aplikacije. Ena sama. Espresso je bil od v7
   do v11 druga tema, ki jo je uporabnica izbrala ob uvodu ali pozneje v
   Računu; 17. 8. 2026 je odstranjen in se ne vrača. Izbire ni več — ne v
   uvodu, ne v Računu, in `prefers-color-scheme` še vedno 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.
   ═══════════════════════════════════════════════════════════════════ */
/* ── shared by both themes: typefaces and rounding ─────────────────── */
:root{
  /* brand typefaces: Outfit carries headings, labels and every numeral */
  --display:"Outfit",system-ui,sans-serif;
  --body:"Archivo",system-ui,-apple-system,sans-serif;
  --num:"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 */

  /* Error mark. A drawn SVG with a 1.7 stroke (CGP §7), inserted as a
     mask so it takes the text colour and therefore the theme's colour. */
  --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>');
}

/* Errors are never signalled by colour alone (WCAG 1.4.1: colour must not
   be the only carrier of meaning — a colour-blind reader sees plain grey
   text). A drawn mark precedes the text and takes the error colour in both
   themes. */
.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;

  /* 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 is the violet #5B4C92 of an earlier identity (postavitev.css).
     Forty-five rules across the pages still read it; rather than hunting
     each one down, the token is redirected to the theme accent. Without
     this the booking hour renders violet. */
  --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('/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);
  --steklo:    rgba(255,255,255,.72);
  /* 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;

  --pika:          138,91,38;
  --pika-poudarek: 36,28,20;
  --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;
  /* Raven zastor junaka — gradientov ni (lastnica, 30. 8. 2026). .78 je
     na najtemnejši liski fotografije padel (značka 4,19; izmerjeno),
     .88 drži medenino in kamen nad 4,5:1 povsod. */
  --hero-zastor:rgba(255,255,255,.88);

  /* 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;
  /* glass version of the emphasised surface, for the one place where it
     floats over photography (prijava.css). Composed against that stage
     and measured there; it is not --i-bg with an alpha guessed onto it. */
  --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);
  /* the mark on the emphasised surface — the opposite file of --znak-slika,
     because the polarity is inverted there */
  --i-znak-slika:url('/znak-krogi.svg');

  /* legacy names still read by rules from earlier identities */
  --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,#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}
h1 em,h2 em{font-style:normal;color:var(--medenina)}
strong,b{color:var(--slonovina);font-weight:600}
.avatar,.pav,.fav{font-family:var(--display);font-weight:400}

/* overlines (the only permitted small role): caps, tracked, muted */
.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(--display);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}

/* ── header and footer ─────────────────────────────────────────────── */
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)}
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. */

/* ── buttons: pills; the primary one is a CREAM surface with ink ──── */
.btn{
  border-radius:999px;
  font-family:var(--body);font-weight:500;
  font-size:var(--t-md);letter-spacing:.01em;
  padding:12px 24px;
}
.btn-p{background:var(--krem);border:1px solid var(--krem);color:var(--crnilo)}
.btn-p:hover{background:#fff;border-color:#fff;color:var(--crnilo)}
.btn-p:disabled{opacity:.55}
.btn-s{background:transparent;border:1px solid var(--rob-k);color:var(--slonovina)}
.btn-s:hover{border-color:var(--medenina);color:var(--medenina);background:transparent}
.btn-link,.steps .go{color:var(--medenina)}
.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;
}
a.btn:not(.btn-p):not(.btn-s):not(.btn-link):hover{
  background:#fff;border-color:#fff;color:var(--crnilo);
}
.skip{background:var(--krem);color:var(--crnilo);border-radius:999px}

/* controls: pills; selected = caramel with ink (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 (zahteva
   lastnice, 28. 8. 2026 — polna karamela je bila zanjo 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)}
/* No opacity at all. At .75, cream #F2EADF over caramel #8A5B26 blends to #D8C6B0
   and the text measures 3.49:1 on rendered pixels — below threshold, on the
   very line that carries the salon name and the price. Hierarchy is carried
   by size and weight; the colour stays solid. Measured 4.86:1.

   Opacity is never carried across from one ground to another: compose it with
   the ground and measure again. */
.pill.sel small{color:var(--na-tanu)}
.time,.times .time{background:var(--noc);border:1px solid var(--gravura);color:var(--slonovina)}
.time:hover{border-color:var(--medenina)}
.time.gone{color:var(--telo-2)}
/* Osnovno pravilo zgoraj je z .times .time nekoč premagalo .time.sel in
   izbiro tiho razveljavilo (najdba lastnice). 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 (lastnica, 29. 8.,
   po zgledu nevtralnega linestyle nabora): brez tega se je poteza 1,6
   ob povečavi ploščice debelila sorazmerno in nežna črta je postala
   polnjen glif. Poteza je odslej 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 (lastnica, 29. 8.: element,
   preširok za 17 px, je stran zamaknil in ob robu pustil 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 (lastnica, 29. 8.):
   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);
}
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}

/* ── cards: dark surfaces with a quiet border and a soft shadow ───── */
.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)}
/* Hour on a raised surface: #8a5b26 holds 4.88:1 on the cream ground but
   falls to 4.42 on the raised --noc (measured on rendered pixels), so a
   darker step applies there. */
.bk .date .hm,.appt .date .hm{color:var(--medenina-d)}

/* on raised surfaces the muted step falls below threshold — the secondary speaks there */
:is(.card,.pplan,.panel,.who-band,.plan,.fpost,.post,.form,.pstanje) :is(.nadnapis,.who,.meta,.card .ttl){
  color:var(--telo-2);
}

/* ── EMPHASIS: a surface with inverted polarity ──────────────────────
   There is exactly one per view — the principal card or action. In the
   dark theme it is cream, in light themes ink; the values come from the
   theme's --i-* tokens, so this rule is identical in every theme. */
.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)}
.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)}
/* status pill on the emphasised surface */
.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 — gradientov ni (lastnica, 30. 8. 2026). */
#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);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: gradientov ni (lastnica, 30. 8. 2026). 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);
}

/* ── landing hero: washed photography as a stage (CGP §2.2) ────────── */
.oder-hero{
  position:relative;
  /* funkcija gradient tu samo ZLAGA eno barvo nad fotografijo — izris je
     raven zastor, ne preliv */
  background-image:
    linear-gradient(var(--hero-zastor), var(--hero-zastor)),
    url('/oder.jpg');
  background-size:cover;background-position:center;
  border-bottom:1px solid var(--gravura-2);
}
/* sepia on the background: the photograph is already warm; the scrim washes it into a stage */
.oder-hero .hero-c{padding-top:96px;padding-bottom:96px;text-align:left}
.oder-hero h1,.oder-hero .lede{margin-left:0;margin-right:auto}
.oder-hero .badge{margin-bottom:22px;display:inline-block}
.oder-hero h1{max-width:15ch;font-size:var(--t-display);margin:14px 0 16px}
.oder-hero .lede{max-width:52ch;color:var(--telo-2)}
/* Junak je poravnan levo, dejanji pa sta ostali na sredini iz časa, ko je bil
   junak sredinski: naslov ob levem robu in gumba na sredini bereta kot dva
   različna razdelka. */
.oder-hero .cta{margin-top:26px;justify-content:flex-start}
@media(max-width:760px){
  .oder-hero .hero-c{padding-top:64px;padding-bottom:64px}
}

/* "How it works" steps: caramel Outfit-200 numerals (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}

/* The mark as an image on a surface whose colour follows the theme.
   znak-krogi.svg carries cream rings with opacity, which disappear on a
   cream surface: measured on rendered pixels, the outer ring reached only
   1.34:1 there against a 3:1 threshold for graphics, leaving just the caramel
   core visible. A literal image path cannot follow the theme without script,
   but a token can: the theme is an attribute on the root element, set
   synchronously, so switching never flashes. */
.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)}

/* provider profile: the photo card is the opening scene */
.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}

/* services: a ruled list with caramel prices */
.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}
/* Locations: an address is not a price and must not be caramel. It reads as
   text a customer navigates by, and stays left-aligned when it runs long. */
.plokacije li .m{color:var(--telo);font-family:var(--body);text-align:right}

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

/* select: calendar icon on cream */
.poudarek input[type=date]::-webkit-calendar-picker-indicator{filter:var(--ikona-obrat-p,none)}

/* ── conversations: thread list and bubbles ─────────────────────────
   The relationship is following. Own messages are caramel with ink
   (7.28:1); the other party's are a raised surface in the page's own tone. */
.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);
}
/* The initial stands on the provider's own colour where their group is known
   (CGP v9); without a group it stays the brand's caramel. The pastel is too
   light to hold its own edge against the row, so it brings its hairline. */
.pog-vrstica[data-kat] .pav{background: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}
/* inside a cream card the bubbles swap roles through tokens (.krem) */
.krem .msg.njihovo{background:var(--krem-cip,#E2D5C2);border-color:transparent}

/* an appointment offer in a thread: a CREAM card — the one light action in the view */
.msg.ponudba{
  background:var(--krem);color:#3d3428;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:#6b5d4b;
}
.msg.ponudba b{font-family:var(--display);font-weight:300;font-size:var(--t-lg);color:#241C14}
.msg.ponudba .p-kdaj{font-family:var(--num);font-size:var(--t-sm);color:#6b5d4b}
.msg.ponudba .p-stanje{font-size:var(--t-sm);font-weight:600;color:#8a5b26;margin-top:4px}
.msg.ponudba .btn-p{
  margin-top:8px;background:var(--ink);border-color:var(--ink);color:#F2EADF;
}
.msg.ponudba .btn-p:hover{background:#33281e;border-color:#33281e;color:#F2EADF}

/* offer form on the dashboard */
.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}
}

/* the accent on a tinted surface (--tan-mehki) is a shade too light:
   #8a5b26 measures 4.27 there, so the note speaks in the darker step */
.demo-note,.tmpl{color:var(--akcent-ton)}

/* onboarding dots: on cream --meja was nearly invisible and only the
   active dot showed, so a strip of four pages read as one */
.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;
  margin-top:18px;padding: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 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)}
.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}
}