/* ═══════════════════════════════════════════════════════════════════
   TERMINA — prijavni zaslon (moj.html in plosca.html)

   Ena datoteka za oboja vrata. Stranka se prijavi na moj.html, ponudnik
   na plosca.html; brez tega bi vsaka stran nosila svojo kopijo istih
   štiridesetih pravil. Dve kopiji se razideta, ena ne.

   Zaslon je oder, kot ga CGP že opisuje: oprana fotografija pod zastorom
   teme in natanko ena obrnjena ploskev na njej — kartica. Nič spodaj ne
   poimenuje barve: oder nastavi žetone --i-*, vsa pravila pa berejo te.

   Steklo je edino mesto, kjer žeton sam ne zadošča. Kako bere prosojna
   ploskev, je odvisno od tega, kaj leži pod njo, zato je --i-steklo
   sestavljeno proti TEMU odru in izmerjeno na izrisanih pikslih
   (server/test-piksli.mjs). Nikoli se ne prenese z drugega ozadja.

   Polje je pilula z risanim znakom v karamelnem obroču — obroč je lastna
   figura znamke, ista kot v ikoni, v velikosti dotikalne tarče.
   ═══════════════════════════════════════════════════════════════════ */

/* ── oder je fotografija, kartica steklo (lastnica, 7. 10. 2026) ─────
   Po predlogi »Login«: prosojna kartica nad fotografijo, polja kot obrisi
   v steklu, glavno dejanje polna pilula. Prej (do 7. 10.) je bila kartica
   kremna in neprozorna; zdaj je fotografija VIDNA skozi kartico, zato je
   to steklo in ne ploskev.

   Steklo je temno in ne belo: CGP pravi, da je oprana fotografija temna
   in napis na njej vedno na zastoru. Kartica JE ta zastor — temna tinta
   z mehko zameglitvijo — in kremni napis na njej je merjen na IZRISANIH
   pikslih nad najsvetlejšo liso odra (server/test-piksli.mjs), ne na
   barvi iz tega bloka. Prosojnost se ne prevzema z drugih podlag.

   Vse barve so žetoni na odru; pravila spodaj berejo --i-*, kartica je
   .poudarek in z njimi obrne tudi žetone strani (--telo, --plosca …).
   Krem (#F2EADF) je napis in glavni gumb; karamela ostane akcent in
   obroba fokusa, nikoli podlaga. */
#auth .auth-scene{
  /* oder: fotografija oprana, a vidna. Zastor je tanek (prej .74),
     ker na odru zunaj stekla ni napisa — zastor za napis je kartica. */
  --hero-zastor:rgba(28,19,13,.10);
  --foto-filter:sepia(.35) saturate(.85) brightness(.94);
  --foto-napis:#F2E8D8;

  /* steklo kartice: temna tinta + zameglitev odra pod njo */
  --i-steklo:rgba(28,20,14,.38);
  --i-steklo-rob:rgba(242,234,223,.34);
  --i-steklo-sij:rgba(242,234,223,.10);

  /* površine v steklu so prosojne plasti krema, ne polne barve */
  --i-bg:rgba(242,234,223,.06); --i-bg-2:rgba(242,234,223,.10); --i-cip:rgba(242,234,223,.10);
  --i-naslov:#F7F0E6; --i-telo:#EDE3D4; --i-telo-2:#D9CCB9;
  --i-akcent:#E3C59F; --i-na-tanu:#F2EADF; --i-vdolbina:rgba(242,234,223,.08);
  --i-rob:rgba(242,234,223,.24); --i-rob-2:rgba(242,234,223,.12);
  --i-rob-k:rgba(242,234,223,.62);
  /* izbrano in glavno = krem s črnilom (obrnjeno nad steklom) */
  --i-gumb:#F2EADF; --i-gumb-tekst:#241C14; --i-gumb-hover:#FFFFFF;
  --i-napaka:#F3B49E;
  /* polja: obris v steklu, kot na predlogi; rob 3:1 izmerjen v steklu */
  --i-polje:rgba(242,234,223,.07); --i-na-polju:#F7F0E6;
  --i-na-polju-tih:#E4D9CA; --i-polje-rob:rgba(242,234,223,.55); --i-polje-fokus:#E3C59F;
  --prijava-gumb:#F2EADF; --prijava-gumb-tekst:#241C14; --prijava-gumb-rob:transparent;
  /* zadržan gumb: krem, pridušen v steklo; črnilo na njem ostane berljivo */
  --prijava-gumb-zadrzan:rgba(242,234,223,.74);
  --i-znak-slika:url('/_v/f67d564f2174/znak-krogi.svg');
  --r-polje-prijava:16px;

  /* vrstica pod kartico stoji na odru, ne na strani */
  --steklo:rgba(28,19,13,.62); --slonovina:#F2E8D8; --gravura-2:rgba(242,234,223,.09);
}

/* ── oder ──────────────────────────────────────────────────────────
   Čez cel format, iz stolpca strani, in dovolj visok, da kartica sedi
   sredi zaslona in ne pod glavo. 100dvh in ne 100vh: na telefonu je
   brskalnikova lastna vrstica del višine vidnega polja in kartico bi
   potisnila pod pregib. */
#auth .auth-scene{
  margin:-34px calc(50% - 50vw) -90px;
  padding:64px 24px 72px;
  min-height:calc(100vh - 68px);
  min-height:calc(100dvh - 68px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  position:relative;overflow:hidden;
  /* nadomestek, dokler ni fotografije: temen v obeh temah (CGP) */
  background:var(--oder-1);
}
/* Fotografija: oprana in neostra.
   Ostrina je tista, ki postavi kartico spredaj in prostor zadaj — oster
   prostor tekmuje z obrazcem, ki stoji na njem. Plast je razlita 80 px
   čez okvir in rahlo povečana, ker zameglitev vzorči tisto, kar leži
   ZUNAJ njenega roba: pri inset:0 vse štiri stranice zbledijo v nič in
   oder dobi bled rob. */
#auth .auth-scene::before{
  content:"";position:absolute;inset:-80px;
  /* Grafični oder (lastnica, 7. 10. 2026: med fotografijo in grafiko je
     izbrala grafiko; slike ponudnikov pridejo pozneje, ko jih bo dovolj):
     risba iz znaka — karamelna pika z obroči na toplem temnem odru,
     znamka/prijava-oder.svg. Jedro stoji nad kartico, zato oder sidra
     zgoraj (50% 0%): obroči so vidni nad kartico in ob njej na vsaki
     širini. Steklo in zastor ostaneta, kot sta bila izmerjena na
     fotografiji; na temnejši grafiki merita višje. */
  background:url('/_v/4a96cc6cbc66/znamka/prijava-oder.svg') 50% 0%/cover no-repeat;
  /* Fotografija ostane razpoznavna: steklo kartice jo zamegli samo
     tam, kjer kartica stoji — to je učinek stekla. Neostrina odra je
     komaj 1 px, le da pomiri zrno fotografije. */
  filter:var(--foto-filter) blur(1px);
  transform:scale(1.05);
}
/* zastor, ki iz slike naredi oder */
#auth .auth-scene::after{
  content:"";position:absolute;inset:0;
  background:var(--hero-zastor);
}
#auth .auth-scene>*{position:relative;z-index:1}

/* ── the card ──────────────────────────────────────────────────────
   Oder ji da žetone in neprozorno podlago; tu podlaga postane steklo,
   rob pa se vrne kot lasnica, ker steklena kartica brez roba na
   fotografiji nima oblike. */
.auth-card{
  width:100%;max-width:420px;
  padding:28px 26px 24px;
  border-radius:var(--r-velika);
  background:var(--i-steklo);
  -webkit-backdrop-filter:blur(26px) saturate(1.2);
  backdrop-filter:blur(26px) saturate(1.2);
  /* rob stekla: svetla lasnica, zgoraj odsev — brez nje steklo na
     fotografiji nima oblike */
  border:1px solid var(--i-steklo-rob);
  box-shadow:inset 0 1px 0 var(--i-steklo-sij),0 24px 60px rgba(14,9,6,.38);
  display:flex;flex-direction:column;align-items:stretch;text-align:left;
  /* sistemski deli (koledar datuma, puščica izbirnika, kljukica) so
     svetli na temnem steklu; to ni temni način strani, samo kartice */
  color-scheme:dark;
}
/* Brskalnik vpisane podatke (samodejno izpolnjevanje) pobarva svetlo in
   napis črno — na steklu bi bila to bela lisa. Napis ostane žeton,
   podlaga ostane prosojna. */
.auth-card input:-webkit-autofill,.auth-card input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--i-na-polju);caret-color:var(--i-na-polju);
  transition:background-color 600000s 0s,color 600000s 0s;
}@media (hover:hover) and (pointer:fine){.auth-card input:-webkit-autofill:hover{
  -webkit-text-fill-color:var(--i-na-polju);caret-color:var(--i-na-polju);
  transition:background-color 600000s 0s,color 600000s 0s;
}}

/* sklop: obroča znaka ob besednem znaku, ena vrsta, NA SREDINI — po
   vzorcu Instagrama (lastnica, 4. 10. 2026) znamka stoji nad obrazcem kot
   naslov kartice, ne kot drobtina v kotu */
.auth-glava{display:flex;align-items:center;justify-content:center;gap:12px;margin:2px 0 22px}
.auth-sig{
  flex:none;width:46px;height:46px;border-radius:50%;
  border:1px solid var(--i-rob);background:var(--i-cip);
  /* Obroči pridejo iz žetona, ne iz stalne datoteke: na kremni kartici
     je berljiva različica s temnimi obroči, in kadar se ploskev pod njo
     spremeni, se z njo premakne tudi znak. Vpisan src bi ostal. */
  background-image:var(--i-znak-slika);
  background-repeat:no-repeat;background-position:center;background-size:28px 28px;
}
.auth-glava .znamka{font-size:var(--t-xl)}

/* ── vloga: Stranka ali Ponudnik ───────────────────────────────────
   Pilula z dvema poljema na vrhu kartice: trenutna vloga je črnilo,
   druga je povezava na drugo kartico (lastnica, 29. 9. 2026). Izbira
   med prijavo in novim računom je pod črto (.switch). Izmerjeno na
   kremu: telo na čipu 9,1:1, krem na črnilu 14,4:1. */
.auth-nacin{display:flex;gap:4px;padding:4px;margin-bottom:18px;
  border-radius:999px;background:var(--i-cip);border:1px solid var(--i-rob)}
.auth-nacin>*{flex:1 1 0;display:flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 12px;border:none;border-radius:999px;text-align:center;
  background:transparent;color:var(--i-telo);font-family:var(--body);font-size:var(--t-sm);
  font-weight:500;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  transition:background-color .18s ease-out,color .18s ease-out}
@media (hover:hover) and (pointer:fine){.auth-nacin a:hover{color:var(--i-naslov)}}
.auth-nacin .on{background:var(--i-gumb);color:var(--i-gumb-tekst);font-weight:600}
.auth-nacin a:focus-visible{outline:2px solid var(--i-akcent);outline-offset:2px;border-radius:999px}
@media(prefers-reduced-motion:reduce){.auth-nacin>*{transition:none}}

#auth h1,#auth h2{
  font-family:var(--display);font-weight:300;font-size:clamp(28px,7.4vw,34px);line-height:1.12;
  letter-spacing:-.02em;color:var(--i-naslov);margin-bottom:8px;
}
.auth-lead{font-size:var(--t-md);color:var(--i-telo);margin-bottom:22px;max-width:36ch;line-height:1.45}

/* ── polje ─────────────────────────────────────────────────────────
   Znak, oznaka in vnos v eni piluli. Oznaka ostane pravi <label> in
   ostane vidna: nadomestno besedilo, ki izgine ob prvi tipki, ni oznaka,
   ta obrazec pa se izpolnjuje tudi čez mesece.

   Oznaka PLAVA (po vzorcu Instagrama, lastnica, 4. 10. 2026): v praznem
   polju stoji v vrstici vnosa v velikosti besedila, ob fokusu ali vpisu
   (razred .polno, prijava.js) se skrči v drobni verzalni napis nad
   vrednostjo. Pilula je ves čas enako visoka: vnos ima zgoraj prostor za
   napis, oznaka pa je absolutna in ne premika postavitve. */
.auth-card .polje{
  display:flex;align-items:center;gap:12px;width:100%;
  margin-bottom:12px;padding:6px 16px;min-height:60px;
  border-radius:var(--r-polje-prijava);
  background:var(--i-polje);border:1px solid var(--i-polje-rob);
  transition:border-color .16s,box-shadow .16s;
}
.auth-card .polje-ik{
  flex:none;width:44px;height:44px;border-radius:50%;
  background:transparent;border:1px solid var(--i-polje-fokus);color:var(--i-polje-fokus);
  display:grid;place-items:center;
}
.auth-card .polje-ik svg{width:20px;height:20px;display:block}
.auth-card .polje-t{flex:1;min-width:0;position:relative;display:block;min-height:44px}
/* inline-block in ne block: škatla oznake, raztegnjena čez pilulo, je
   večinoma prazna in merilnik pikslov praznino prebere kot del poteze.
   Škatla objame besedo, zato se meri beseda. */
.auth-card .polje-lbl{
  position:absolute;left:0;top:50%;transform:translateY(-50%);
  display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-family:var(--body);font-size:var(--t-vnos);font-weight:400;letter-spacing:0;text-transform:none;
  color:var(--i-na-polju-tih);pointer-events:none;transform-origin:left top;
  transition:top .16s ease-out,transform .16s ease-out,font-size .16s ease-out,letter-spacing .16s ease-out;
}
.auth-card .polje:focus-within .polje-lbl,.auth-card .polje.polno .polje-lbl{
  top:0;transform:none;font-family:var(--num);font-size:var(--t-micro);
  font-weight:500;letter-spacing:.12em;text-transform:uppercase;
}
@media(prefers-reduced-motion:reduce){.auth-card .polje-lbl{transition:none}}
.auth-card .polje input{
  width:100%;padding:16px 0 0;margin:0;border:none;border-radius:0;background:none;
  font-family:var(--body);font-size:var(--t-vnos);color:var(--i-na-polju);
  min-height:44px;
}
/* dokler oznaka stoji v vrstici, je vnos (in z njim utripalka) pod njo neviden */
.auth-card .polje:not(:focus-within):not(.polno) input{color:transparent}
.auth-card .polje input:focus{outline:none;border:none;box-shadow:none}
.auth-card .polje input::placeholder{color:var(--i-na-polju-tih)}
/* Izbirnik (spol) in datum stojita v isti piluli kot vnos: brez lastnega
   roba in podlage, ista pisava in barva; puščico izbirnika riše sistem. */
.auth-card .polje select{
  width:100%;padding:16px 0 0;margin:0;border:none;border-radius:0;background:none;
  font-family:var(--body);font-size:var(--t-vnos);color:var(--i-na-polju);
  -webkit-text-fill-color:var(--i-na-polju);opacity:1;
  min-height:44px;appearance:auto;-webkit-appearance:menulist;
}
.auth-card .polje select:focus{outline:none}
.auth-card .polje select option{color:#241C14;background:#FFFFFF}
.auth-card .polje input[type="date"]{-webkit-appearance:none;appearance:none;min-height:44px}
/* Fokusni obroč pripada piluli in ne golemu vnosu v njej: vnos nima
   svojega roba, na katerega bi ga narisal, obroba na ravni strani pa bi
   pristala znotraj pilule in se zarezala ob njeno krivino. EN obroč,
   narisan tako, kot fokus riše preostala stran — rob spremeni barvo,
   obroba stoji zunaj njega. Tretji, mehkejši sij med njima bere kot
   madež. */
.auth-card .polje:focus-within{border-color:var(--i-polje-fokus);
  outline:2px solid var(--i-polje-fokus);outline-offset:3px}
.auth-card .polje:has(input[aria-invalid=true]){border-color:var(--i-napaka)}
/* »Pozabljeno geslo« je vrstica med polji in gumbom, levo, poravnana z
   robom pilule (lastnica, 29. 9. 2026); prej tabletka v polju za geslo.
   Povezava ima dotikalno tarčo 44 px z oblazinjenjem navzven, vrstica
   ostane besedilna. */
.auth-poz{display:flex;justify-content:flex-start;margin:-2px 0 14px;padding-left:16px;font-size:var(--t-sm)}
.auth-poz .btn-link{padding:12px 4px;margin:-12px -4px}
.auth-card .polje:has(.polje-oko){padding-right:6px}
/* Oko za prikaz gesla (geslo-moc.js): krog 44 px v piluli, isti rob kot
   dejanje; pritisnjeno stanje nosi fokusno barvo, črta čez oko pove »skrito«
   je zdaj »vidno«. */
.auth-card .polje-oko{
  flex:none;align-self:center;width:44px;height:44px;border-radius:50%;
  background:transparent;border:1px solid transparent;color:var(--i-na-polju);
  display:grid;place-items:center;padding:0;margin-left:4px;cursor:pointer;
  transition:border-color .16s,color .16s;
}
.auth-card .polje-oko svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.auth-card .polje-oko .oko-crta{display:none}
.auth-card .polje-oko[aria-pressed="true"]{border-color:var(--i-polje-fokus);color:var(--i-polje-fokus)}
.auth-card .polje-oko[aria-pressed="true"] .oko-crta{display:block}
@media (hover:hover) and (pointer:fine){.auth-card .polje-oko:hover{border-color:var(--i-polje-fokus);color:var(--i-polje-fokus)}}
.auth-card .polje-oko:focus-visible{outline:2px solid var(--i-polje-fokus);outline-offset:2px}
/* V prijavni piluli je gumb BESEDA »Prikaži« / »Skrij« (vzorec Instagrama),
   vidna šele, ko je v polju kaj vpisano; brez roba, ker je beseda dovolj. */
.auth-card .polje-oko.besedilo{
  width:auto;min-width:44px;padding:0 10px;border:none;border-radius:999px;
  font-family:var(--body);font-size:var(--t-sm);font-weight:600;color:var(--i-na-polju);
}
.auth-card .polje-oko.besedilo[hidden]{display:none}
.auth-card .polje-oko.besedilo[aria-pressed="true"]{color:var(--i-polje-fokus)}@media (hover:hover) and (pointer:fine){.auth-card .polje-oko.besedilo:hover{color:var(--i-polje-fokus)}}
/* Korak s kodo (potrditev e-naslova): kartica pokaže SAMO ta blok. */
.auth-card.koda-odprta > :not(#koda-korak){display:none}

/* Ponudnikova registracija je čarovnik s štirimi koraki in več polji, kot
   jih zmore vrsta pilul; ta obdržijo običajno obliko oznaka-nad-vnosom in
   prevzamejo samo obrnjene barve kartice. */
.auth-card .fld{width:100%;text-align:left;color:var(--i-telo);margin-bottom:12px}
.auth-card .two{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:520px){.auth-card .two{grid-template-columns:1fr}}

/* Polja čarovnika govorijo isti jezik kot prijavni piluli: bela vdolbina
   z izmerjenim robom, droben verzalni napis nad
   njo, in NOBEN izbirnik ni več surov sistemski — puščica je risana z
   barvo besedila, kot pri izbirniku jezika v glavi. */
.auth-card .fld{position:relative}
.auth-card .fld>span{
  display:inline-block;font-family:var(--body);font-size:var(--t-sm);
  font-weight:500;letter-spacing:0;text-transform:none;
  color:var(--i-telo);margin-bottom:7px;
}
.auth-card .fld input,.auth-card .fld select,.auth-card .fld textarea{
  width:100%;min-height:52px;padding:12px 16px;background:var(--i-polje);border:1px solid var(--i-polje-rob);
  color:var(--i-na-polju);border-radius:var(--r-polje-prijava);
}
.auth-card .fld select{
  appearance:none;-webkit-appearance:none;min-height:44px;
  padding-right:40px;cursor:pointer;
}
.auth-card .fld:has(select)::after{
  content:"";position:absolute;right:18px;bottom:23px;width:7px;height:7px;
  border-right:1.5px solid var(--i-na-polju-tih);
  border-bottom:1.5px solid var(--i-na-polju-tih);
  transform:rotate(45deg);pointer-events:none;
}
.auth-card .fld input:focus,.auth-card .fld select:focus,.auth-card .fld textarea:focus{
  border-color:var(--i-polje-fokus);outline:2px solid var(--i-polje-fokus);outline-offset:2px;
}
.auth-card input::placeholder,.auth-card textarea::placeholder{color:var(--i-telo-2)}
.auth-card input[aria-invalid=true]{border-color:var(--i-napaka)}

/* ── dejanje ───────────────────────────────────────────────────────
   Ena široka pilula; puščica jaha v krožcu na njenem koncu, v gumbovi
   lastni inverziji, zato svoje barve ne potrebuje. */
.auth-card .auth-submit{
  width:100%;min-height:56px;margin-top:6px;
  display:flex;align-items:center;justify-content:center;gap:14px;
  padding:7px 24px;border-radius:var(--r-oval);
  font-size:var(--t-md);font-weight:600;
  background:var(--prijava-gumb);color:var(--prijava-gumb-tekst);
  border:1px solid var(--prijava-gumb-rob);
}
@media (hover:hover) and (pointer:fine){.auth-card .auth-submit:hover{background:var(--prijava-gumb);border-color:var(--i-akcent)}}
/* Zadržan gumb (prijava.js): dokler polji nista vpisani, je gumb bled kot
   na Instagramu, a ne prosojen — besedilo ostane berljivo (krem na
   #5a4d3f meri 6,4:1), puščica počaka v tihem krogu. */
.auth-card .auth-submit.zadrzan{background:var(--prijava-gumb-zadrzan);border-color:transparent;cursor:default}
@media (hover:hover) and (pointer:fine){.auth-card .auth-submit.zadrzan:hover{border-color:transparent}}
.auth-card .auth-submit.zadrzan .auth-pusc{background:var(--i-rob-2);color:var(--prijava-gumb-tekst)}
@media (hover:hover) and (pointer:fine){.auth-card .auth-submit.zadrzan:hover .auth-pusc{transform:none}}
.auth-pusc{
  flex:none;width:44px;height:44px;border-radius:50%;
  background:var(--i-polje);color:var(--prijava-gumb);
  display:grid;place-items:center;
  transition:transform .22s cubic-bezier(.2,.7,.3,1);
}
.auth-pusc svg{width:20px;height:20px;display:block}
@media (hover:hover) and (pointer:fine){.auth-card .auth-submit:hover .auth-pusc{transform:translateX(3px)}}

.auth-card .note{width:100%;text-align:left;margin-top:12px}
.auth-card .note.err{color:var(--i-napaka)}
.auth-card .note.ok{color:var(--i-naslov)}
.auth-hr{width:100%;border:none;border-top:1px solid var(--i-rob);margin:18px 0 4px}
/* Prijava z Googlom ali Applom: obrisani piluli pod glavnim gumbom, med
   njima in obrazcem kratek »ali«. Obrisani sta namenoma — glavno dejanje na
   kartici ostane eno, tuji ponudnik je pot in ne poudarek. Logotipa sta
   znaka ponudnikov v njunih barvah (Googlov je barvni po njegovih pravilih,
   Applov v barvi besedila) in ne barvi Termine. */
.auth-sso{width:100%;display:grid;gap:10px;margin-top:6px}
.auth-sso-ali{display:flex;align-items:center;gap:12px;margin:8px 0 2px;
  font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--i-telo-2)}
.auth-sso-ali::before,.auth-sso-ali::after{content:"";flex:1;border-top:1px solid var(--i-rob)}
.auth-sso-gumb{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:48px;text-decoration:none}
.auth-sso-gumb svg{width:20px;height:20px;flex:none}
/* Prijava z Applom po Applovih smernicah (pregled pred oddajo 21. 10. 2026):
   bela ploskev s črnim znakom in napisom na temnem steklu, znak Appla v
   izvirni obliki, ista višina kot Google in pred njim. Barvi sta Applovi in
   ne Terminini, zato sta svoja žetona; črno na belem meri 21:1, bela ploskev
   na temnem steklu odra nad 3:1. Ob lebdenju se ne spreminja (smernice).
   Izbirnik mora prevladati nad a.btn:not(.btn-p):not(.btn-s):not(.btn-link)
   iz podoba.css in postavitev.css (0,4,1), zato .auth-sso in :not(.btn-s). */
.auth-sso{--apple-ploskev:#FFFFFF;--apple-znak:#000000}
.auth-sso .btn.auth-sso-gumb.sso-apple-hig:not(.btn-s){
  background:var(--apple-ploskev);border:1px solid var(--apple-ploskev);color:var(--apple-znak);font-weight:500}@media (hover:hover) and (pointer:fine){.auth-sso .btn.auth-sso-gumb.sso-apple-hig:not(.btn-s):hover{
  background:var(--apple-ploskev);border:1px solid var(--apple-ploskev);color:var(--apple-znak);font-weight:500}}
.auth-sso-gumb.sso-apple-hig .sso-apple-znak{width:18px;height:18px;margin-top:-2px}
.auth-sso-gumb.sso-apple-hig:focus-visible{outline:2px solid var(--i-polje-fokus);outline-offset:3px}
/* Prijava s ključem (hitra-prijava.js) stoji pod Googlom in Applom; kadar
   sta ta vidna, ločnica »ali« ne stoji dvakrat. Pri novem računu in v
   koraku s kodo je ni: ključ se doda v Nastavitvah, ko račun že obstaja. */
.auth-sso:not([hidden])~.auth-kljuc .auth-sso-ali{display:none}
.auth-kljuc[hidden],
.auth-card:has(#pass2-fld:not([hidden])) .auth-kljuc,
.auth-card:has(#reg-steps:not([hidden])) .auth-kljuc,
.auth-card:has(#koda-korak:not([hidden])) .auth-kljuc{display:none}
.auth-kljuc .auth-sso-gumb svg{fill:none;stroke:currentColor}
/* Kartica je steklo, zato je podlaga pod temi vrsticami žeton, zmešan s
   tem, kar tam počne fotografija — izmerjeno 221 namesto 242. Tiha
   stopnja tam pade na 4,33; drži besedilna stopnja. */
.auth-card .switch{margin-top:12px;font-size:var(--t-sm);color:var(--i-telo)}
/* Povezavo označuje podčrtaj in ne barva sama: akcent je edina vloga, ki
   mešanice ne preživi (4,4:1 na sestavljeni podlagi). */
.auth-card .btn-link{color:var(--i-naslov);text-decoration:underline;text-underline-offset:3px;font:inherit}
/* Dotikalna tarča 44 px brez višje vrstice: oblazinjenje navzven,
   negativni rob ga pobere nazaj, vrstica ostane besedilna. */
.auth-card .switch .btn-link{padding:12px 4px;margin:-12px -4px}
@media (hover:hover) and (pointer:fine){.auth-card .btn-link:hover{color:var(--i-akcent)}}
.auth-card .btn-s{border-color:var(--i-rob-k);color:var(--i-naslov)}
@media (hover:hover) and (pointer:fine){.auth-card .btn-s:hover{border-color:var(--i-akcent);color:var(--i-akcent)}}

/* ── druga kartica: preklop prijava ↔ nov račun ──────────────────────
   Po vzorcu Instagrama stoji vprašanje »Še nimaš računa?« v svoji manjši
   kartici pod obrazcem in ne pod črto v njem. Isto steklo, isti žetoni
   (--i-* z odra), zato merita enako kot kartica. */
.auth-druga{
  width:100%;max-width:420px;padding:16px 22px;text-align:center;
  border-radius:var(--r-kartica);
  background:var(--i-steklo);
  -webkit-backdrop-filter:blur(26px) saturate(1.2);backdrop-filter:blur(26px) saturate(1.2);
  border:1px solid var(--i-steklo-rob);box-shadow:inset 0 1px 0 var(--i-steklo-sij),0 18px 44px rgba(14,9,6,.30);
}
.auth-druga .switch{margin:0;font-size:var(--t-sm);color:var(--i-telo)}
.auth-druga .switch[hidden]{display:none}
.auth-druga .btn-link{color:var(--i-naslov);text-decoration:underline;text-underline-offset:3px;font:inherit;font-weight:600;padding:12px 4px;margin:-12px -4px}
@media (hover:hover) and (pointer:fine){.auth-druga .btn-link:hover{color:var(--i-akcent)}}
/* med korakom s kodo druge kartice ni: kartica kaže samo kodo */
#auth .auth-scene:has(.koda-odprta) .auth-druga,.auth-druga[hidden]{display:none}

/* ── vrstica pod kartico (ostane za strani brez druge kartice) ─────
   Stoji na fotografiji, zato stoji na svojem zastoru. Besedilo, položeno
   naravnost na oder, sedi na tem, kar slika tam pač počne. */
.auth-join{
  max-width:420px;text-align:center;font-size:var(--t-sm);
  padding:10px 20px;border-radius:var(--r-oval);
  background:var(--steklo-gosto,var(--steklo));color:var(--slonovina);
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  border:1px solid var(--gravura-2);
}

/* ── prihod ────────────────────────────────────────────────────────
   Eno gibanje: kartica se usede, vsebina pride za njo. */
@keyframes auth-vstop{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes auth-vrsta{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.auth-card{animation:auth-vstop .5s cubic-bezier(.16,.84,.3,1) both}
.auth-card>*{animation:auth-vrsta .42s cubic-bezier(.16,.84,.3,1) both;animation-delay:.10s}
.auth-card>*:nth-child(2){animation-delay:.15s}
.auth-card>*:nth-child(3){animation-delay:.19s}
.auth-card>*:nth-child(4){animation-delay:.23s}
.auth-card>*:nth-child(n+5){animation-delay:.27s}
.auth-join,.auth-druga{animation:auth-vrsta .42s cubic-bezier(.16,.84,.3,1) both;animation-delay:.34s}
@media(prefers-reduced-motion:reduce){
  .auth-card,.auth-card>*,.auth-join,.auth-druga{animation:none}
  @media (hover:hover) and (pointer:fine){.auth-card .auth-submit:hover .auth-pusc{transform:none}}
}

/* Na telefonu kartica ne sme pokriti celega odra (lastnica, 7. 10. 2026:
   »ozadje se ne vidi«): ob straneh ostane 28 px odra, zgoraj in spodaj
   več zraka, kartica je ožja in ima velik radij. Steklo je steklo šele,
   kadar je okoli njega kaj videti. */
@media(max-width:480px){
  #auth .auth-scene{padding:56px 28px 64px}
  .auth-card{padding:24px 18px 20px;border-radius:var(--r-velika)}
  .auth-druga{padding:14px 18px}
  .auth-card .polje{padding-right:12px}
  .auth-lead{margin-bottom:18px}
}

/* ── napredek registracije (lastnica, 7. 10. 2026) ──────────────────
   Po predlogi »Step 2 of 3«: korak z besedo nad naslovom in tanka vrstica
   petih odsekov. Opravljeni in trenutni odsek sta medenina, ostali tiha
   črta; stanje pove beseda, vrstica je okras (aria-hidden). */
.reg-napredek{width:100%;margin:0 0 14px}
.reg-napredek[hidden]{display:none}
.reg-korak{font-family:var(--body);font-size:var(--t-sm);font-weight:500;color:var(--i-telo);margin:0 0 9px}
.reg-crte{display:flex;gap:6px}
.reg-crte span{flex:1;height:4px;border-radius:999px;background:var(--i-rob)}
.reg-crte span.done,.reg-crte span.cur{background:var(--i-akcent)}

/* ── dejavnost s čipi ───────────────────────────────────────────────
   Po predlogi »choose your interests«: pilule v vrsticah, izbrana je črnilo
   s kremnim besedilom (kot vloga zgoraj), neizbrana bela z robom 3:1. */
.cat-izbor{width:100%;margin-bottom:8px}
.cat-izbor[hidden],.cat-sel[hidden],.cat-nasl[hidden],.cat-cipi[hidden]{display:none}
.cat-nasl{font-size:var(--t-sm);font-weight:500;color:var(--i-telo);margin:0 0 9px}
.cat-cipi{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.cat-cip{min-height:44px;padding:0 16px;border-radius:var(--r-oval);cursor:pointer;
  border:1px solid var(--i-rob-k);background:var(--i-polje);color:var(--i-naslov);
  font-family:var(--body);font-size:var(--t-sm);line-height:1.2;text-align:center;
  transition:background-color .14s ease-out,color .14s ease-out,border-color .14s ease-out}
@media (hover:hover) and (pointer:fine){.cat-cip:hover{border-color:var(--i-naslov)}}
.cat-cip[aria-checked="true"]{background:var(--i-gumb);border-color:var(--i-gumb);color:var(--i-gumb-tekst)}
.cat-cip:focus-visible{outline:2px solid var(--i-akcent);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.cat-cip{transition:none}}

/* ── Nazaj in Naprej ────────────────────────────────────────────────
   Nazaj je samo puščica (CLAUDE.md: nazaj in zapri vedno kot chevron) v
   krogu 52 px, Naprej je široka pilula črnila, kot glavni gumb. */
.auth-card .wiz-nav{display:flex;align-items:center;gap:10px;width:100%;margin-top:8px}
.auth-card .wiz-nav .btn-p{flex:1;min-height:56px;justify-content:center;border-radius:var(--r-oval);
  background:var(--prijava-gumb);color:var(--prijava-gumb-tekst);border-color:transparent;font-size:var(--t-md);font-weight:600}
.wiz-nazaj{flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;padding:0;cursor:pointer;
  border:1px solid var(--i-rob-k);background:var(--i-polje);color:var(--i-naslov)}
.wiz-nazaj svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover) and (pointer:fine){.wiz-nazaj:hover{border-color:var(--i-naslov)}}
.wiz-nazaj:focus-visible{outline:2px solid var(--i-akcent);outline-offset:2px}

/* Pogoji pod dejanjem — kot na predlogi, ki jo je naročnica prinesla.
   Ni nadomestek za privolitev: ta je potrditveno polje na zadnjem koraku,
   ker je privolitev dejanje in ne drobni tisk. Tu je samo pot do besedila. */
.auth-pogoji{
  width:100%;text-align:center;margin-top:14px;
  font-size:var(--t-sm);color:var(--i-telo-2);
}
.auth-pogoji a{color:var(--i-telo);text-decoration:underline;text-underline-offset:3px}
@media (hover:hover) and (pointer:fine){.auth-pogoji a:hover{color:var(--i-akcent)}}

/* ── soglasje: kljukica in besedilo v eni vrsti, tarča 44 px ─────────
   Registracija ponudnika (plosca.html) in prevzem profila na ključ
   (prevzem.html). Ena kopija za obe kartici. */
.auth-card .soglasje{display:flex;gap:11px;align-items:flex-start;width:100%;text-align:left;
  margin:4px 0 14px}
.auth-card .soglasje input[type=checkbox]{width:20px;height:20px;flex:none;margin-top:11px;
  accent-color:var(--i-gumb);cursor:pointer}
.auth-card .soglasje label{font-size:var(--t-sm);color:var(--i-telo);line-height:1.55;
  cursor:pointer;padding:8px 0;min-height:28px}
/* Povezava kot vse povezave na kartici: črnilo s podčrtajem. Karamelna
   #8a5b26 na kremni kartici izmeri 4,42:1 (piksli, 6. 10. 2026). */
.auth-card .soglasje a{color:var(--i-naslov);text-decoration:underline;text-underline-offset:2px}
@media (hover:hover) and (pointer:fine){.auth-card .soglasje a:hover{color:var(--i-akcent)}}
.auth-card .soglasje.manjka input[type=checkbox]{outline:2px solid var(--napaka);outline-offset:2px}

/* ── prevzem profila na ključ: kdo prevzema ─────────────────────────
   Slika profila v krogu nad naslovom: lastnik na prvi pogled vidi, da je
   to NJEGOV klub, pripravljen zanj. Brez slike blok ostane skrit. */
.prev-profil{display:flex;flex-direction:column;align-items:center;gap:10px;margin:2px 0 14px}
.prev-slika{width:76px;height:76px;border-radius:50%;object-fit:cover;
  box-shadow:0 0 0 2px var(--medenina)}
.prev-kat{font-family:var(--display);font-weight:300;font-size:var(--t-xs);letter-spacing:.14em;
  text-transform:uppercase;color:var(--i-telo);margin:0}

/* ── izbire na kartici registracije v istem slogu ───────────────────
   Paketi, obdobje in »kdo sme rezervirati« (lastnica, 7. 10. 2026): bela
   kartica z robom 16 px, izbrana je črnilo s kremnim besedilom — kot čip
   dejavnosti in vloga zgoraj. Samo na kartici registracije; Naročnina v
   plošči ima svoja pravila (#bill-pick v plosca.html). */
.auth-card .pkart{background:var(--i-polje);border-radius:var(--r-polje-prijava)}
.auth-card .pkart.on{background:var(--i-gumb);border-color:var(--i-gumb)}
.auth-card .pkart.on .pk-ime,.auth-card .pkart.on .pk-cena,.auth-card .pkart.on .pk-opis,
.auth-card .pkart.on .pk-cena small,.auth-card .pkart.on .pk-preizkus{color:var(--i-gumb-tekst)}
.auth-card .pkart .pk-preizkus{color:var(--i-akcent)}
.auth-card .paket-obdobje .pobd{min-height:44px;border-radius:var(--r-oval);background:var(--i-polje)}
.auth-card .paket-obdobje .pobd.on{background:var(--i-gumb);border-color:var(--i-gumb);color:var(--i-gumb-tekst)}
.auth-card .pm-g{width:44px;height:44px}
.auth-card .izbor-pot legend{font-size:var(--t-lg);color:var(--i-naslov)}
.auth-card .pot-mozn{background:var(--i-polje);border:1px solid var(--i-rob-k);border-radius:var(--r-polje-prijava)}
.auth-card .pot-mozn:has(input:checked){border:2px solid var(--i-gumb);background:var(--i-polje);padding:13px 15px}
.auth-card .pot-ime{color:var(--i-naslov);font-weight:500}
.auth-card .pot-opis{color:var(--i-telo)}
.auth-card .pot-mozn input[type=radio]{accent-color:var(--i-gumb)}

/* Znak v obroču in puščica v krožcu sta odšla s predlogo (lastnica,
   7. 10. 2026): oznaka v polju pove dovolj, gumb nosi samo besedo. */
.auth-card .polje-ik,.auth-card .auth-pusc{display:none}
/* Zadnji korak: puščica nazaj in Ustvari račun v eni vrsti (plosca.js
   prestavi gumb v .wiz-nav). */
.auth-card .wiz-nav .auth-submit{flex:1;width:auto;margin-top:0}
.auth-card .paket-uvod{display:none}

/* ── oznaka V polju (lastnica, 7. 10. 2026, po predlogi »Create your
   account«) ──────────────────────────────────────────────────────────
   Ime polja stoji v polju, ne nad njim. Ob fokusu ali vpisu se skrči v
   drobni napis ob zgornjem robu — kot pri prijavnih poljih — in ne izgine:
   nadomestno besedilo, ki ob prvi tipki izgine, ni oznaka. Primer
   (»npr. Atelje Lumen«) se pokaže šele ob fokusu, pod skrčeno oznako.
   Izbirnik ima vrednost vedno, zato je njegova oznaka vedno zgoraj. */
.auth-card .fld>span:first-child{
  position:absolute;left:17px;top:30px;transform:translateY(-50%);z-index:1;margin:0;
  max-width:calc(100% - 34px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  pointer-events:none;transform-origin:left top;
  font-family:var(--body);font-size:var(--t-vnos);font-weight:400;letter-spacing:0;text-transform:none;
  color:var(--i-na-polju-tih);
  transition:top .16s ease-out,transform .16s ease-out,font-size .16s ease-out;
}
.auth-card .fld:focus-within>span:first-child,
.auth-card .fld:has(input:not(:placeholder-shown))>span:first-child,
.auth-card .fld:has(select)>span:first-child{
  top:9px;transform:none;font-family:var(--num);font-size:var(--t-micro);
  font-weight:500;letter-spacing:.12em;text-transform:uppercase;
}
.auth-card .fld input,.auth-card .fld select{min-height:60px;padding:24px 16px 8px}
.auth-card .fld:not(:focus-within) input:placeholder-shown::placeholder{color:transparent}
.auth-card .fld:has(select)::after{bottom:auto;top:30px}
@media(prefers-reduced-motion:reduce){.auth-card .fld>span:first-child{transition:none}}
/* Polja v paru (.two) imajo med vrsticama isti razmik kot ostala: na
   telefonu sta en stolpec in razmik mreže se je prištel robu polja. */
.auth-card .two{row-gap:0}
/* »neobvezno« ob imenu polja v isti vrsti, ne pod njim. */
.auth-card .fld>.lbl-row{display:block}
.auth-card .fld>.lbl-row>span{display:inline}
.auth-card .fld>.lbl-row .opt{margin-left:8px;font-size:var(--t-micro)}