/* ═══════════════════════════════════════════════════════════════════
   TOPLINA — vizualni jezik aplikacije (CGP v5.2)

   Aplikacija govori tišje od naslovnice: veliki zaobljeni vogali,
   fotografske kartice, pilule, mehka senca. Paleta ostane Terminina
   (papir, medenina, črnilo), spremenijo se samo oblike.

   Ta datoteka se na straneh aplikacije (najdi, moj, skupnost, ponudnik,
   plosca, rezervacija) naloži za postavitev.css in tam povozi tri pravila
   iz CGP §1: strop radija, ploščice in prepoved senc. Naslovnica obdrži
   obravnavo Orrerij.

   Aplikacija bere enako mirno kot spletna stran in ne glasneje: temni
   zastori in karamelne ploskve so se umaknili papirju. Fotografija živi v
   zgornjem pasu kartice, besedilo je črnilo na papirju kot na strani,
   izbrano stanje je medenina kot na strani, senca pa je tišja.
   ═══════════════════════════════════════════════════════════════════ */
:root{
  --r-kartica:26px;            /* kartice kot v referenci */
  --r-drobno:16px;             /* kontrole */
  --r-foto:18px;               /* fotografska polja */
  --senca:0 6px 22px rgba(23,27,46,.05), 0 1px 4px rgba(23,27,46,.04);
  /* novi žetoni v5.2 — topla lestvica za fotografske kartice */
  --pesek:#E8D9C0;             /* svetli konec tople ploskve */
  --karamela:#C89B6D;          /* temni konec tople ploskve */
  --pesek-2:#DFCBAD;           /* tihi temnejši konec ploskve */
}

/* kartice: mehka senca namesto gravure, več zraka */
.card,.pcard,.plan,.pplan,.panel,.auth-card,.sestavi,.pravno-kazalo{
  box-shadow:var(--senca);border-color:rgba(23,27,46,.06)
}

/* gumbi so tabletke; tarče ostanejo ≥ 44 px */
.btn,.tab,.cat,.time,.pill{border-radius:999px}
.btn{padding:12px 22px}
/* Tarča 44 px: z oblogo 10 px je zavihek meril 40 px (izmerjeno na
   moj.html in plošči). Višina se doda okoli besedila, pisava ostane. */
.tab{padding:10px 18px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}

/* vnosna polja: mehko zaobljena, tiha obroba */
input,textarea,select{border-radius:var(--r-drobno)}

/* kartica salona: fotografija (ali tiha topla ploskev) živi v zgornjem
   pasu, besedilo je črnilo na papirju — isti občutek kot stran */
.pcard{position:relative;overflow:hidden;padding:0;min-height:210px;
  display:flex;flex-direction:column;justify-content:flex-end;
  background-color:var(--plosca-hi,#FFFDF9);
  background-image:none;background-color:var(--pesek);
  background-repeat:no-repeat;background-size:cover;background-position:center top}
.pcard .phead{margin:0;padding:14px 16px 4px;background:var(--plosca-hi,#FFFDF9)}
.pcard .pav{position:absolute;top:14px;left:14px;z-index:1;box-shadow:var(--senca)}
.pcard .pav ~ .ptext{margin-left:0}
.pcard .rate{margin:0;padding:2px 16px 14px;background:var(--plosca-hi,#FFFDF9)}
.pcard .rate .star{color:var(--medenina)}

/* mreže fotografij: večji zamik, mehkejši vogali */
.obj-grid{gap:10px}
.obj-grid .celica{border-radius:var(--r-foto)}
#foto-grid{gap:10px}
#foto-grid > div{border-radius:var(--r-foto) !important}

/* zgornji trak z velikim pozdravom pusti dihati */
main > h1:first-of-type,#acc-name,#dash-name{letter-spacing:-.02em}

/* preklopi in izbirniki tudi na plošči tabletke */
.bill-toggle button{border-radius:999px}

/* ── proste ure na kartici seznama (referenca 2) ─────────────────────
   Tabletke so obvestilo, ne gumbi: kartica je ena sama povezava in
   gnezdenje povezav ni dovoljeno. Klik na kartico odpre profil, kjer
   so ure žive. */
.pcard .ure{display:flex;flex-wrap:wrap;gap:8px;
  padding:2px 16px 6px;background:var(--plosca-hi,#FFFDF9)}
/* Proste ure so v seznamu edini kategorijin znak: tihi ton skupine z njenim
   akcentom kot besedilom. Barva tu ni okras — po njej se seznam bere po
   dejavnosti, še preden obiskovalka prebere kategorijo. */
.pcard .ure span{font-family:var(--num);font-size:var(--t-xs);letter-spacing:.02em;
  background:var(--kat-mavrica-tiha) var(--kat-tih);color:var(--kat-na-tihem);border:1px solid transparent;
  border-radius:999px;padding:7px 14px}

/* ── profil ponudnika: fotografija v zgornjem pasu, ime na papirju ── */
.pkartica{position:relative;overflow:hidden;border-radius:var(--r-kartica);
  min-height:280px;display:flex;flex-direction:column;justify-content:flex-end;
  background-color:var(--plosca-hi,#FFFDF9);
  background-image:none;background-color:var(--pesek);
  background-repeat:no-repeat;background-size:cover;background-position:center top;
  box-shadow:var(--senca);padding:0}
.pkartica .avatar{position:absolute;top:16px;left:16px;box-shadow:var(--senca)}
.pkartica[data-slika] .avatar{display:none}
.pkartica .pkartica-t{padding:16px 20px 18px;background:var(--plosca-hi,#FFFDF9)}

/* ── mikrointerakcije: odziv na dotik, mehak dvig, vzmet ───────────── */
@media(prefers-reduced-motion:no-preference){
  .btn,.tab,.cat,.time,.pcard,.obj-grid .celica{
    transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .22s,
      border-color .15s,background .15s,color .15s}
  .btn:active,.tab:active,.cat:active,.time:active{transform:scale(.96)}
  /* brez sence: kartica ne lebdi (taste, 24. 10.; del 1) */
  .pcard:focus-visible{transform:translateY(-2px)}@media (hover:hover) and (pointer:fine){.pcard:hover{transform:translateY(-2px)}}
  .obj-grid .celica:active{transform:scale(.97)}
}

/* ── izbira dneva kot kartice (referenca »Courts«) ───────────────────
   Izbrani dan je medeninast — isti poudarek kot gumbi na strani;
   ostali so tihe bele kartice. Vnos datuma ostane za dneve naprej. */
.dnevi{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 12px;
  scrollbar-width:none}
.dnevi::-webkit-scrollbar{display:none}
.dnevi .dan{flex:0 0 auto;min-width:64px;min-height:72px;border-radius:var(--r-foto);
  border:1px solid var(--meja);background:var(--plosca-hi,#FFFDF9);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font-family:var(--num);color:var(--slonovina)}
.dnevi .dan b{font-size:var(--t-xl);font-weight:600;line-height:1}
.dnevi .dan span{font-size:var(--t-micro);letter-spacing:.08em;text-transform:uppercase;
  color:var(--telo-2)}
.dnevi .dan.sel{background:var(--medenina);border-color:var(--medenina)}
.dnevi .dan.sel b,.dnevi .dan.sel span{color:var(--na-tanu,#FCF8F0)}
@media(prefers-reduced-motion:no-preference){
  .dnevi .dan{transition:transform .22s cubic-bezier(.22,1,.36,1),background .15s,border-color .15s}
  .dnevi .dan:active{transform:scale(.95)}
}

/* Izbrano stanje je povsod medenina — isti jezik kot gumbi na strani. */
.pill.sel,.tab.on,.cat.on{background:var(--medenina);border-color:var(--medenina);color:var(--na-tanu,#FCF8F0)}
/* Brez prosojnosti — glej isto pravilo v podoba.css. */
.pill.sel small{color:var(--na-tanu,#FCF8F0)}

/* ── poteg s pripenjanjem ───────────────────────────────────────────
   Vodoravni trakovi se pod prstom listajo in pripnejo na element: dnevi,
   kategorije, ure na kartici, fotografije. Zgrajeno na vgrajenem
   scroll-snap in ne na skripti, zato ohrani napravin lastni zalet, dela
   s tipkovnice in nikoli ne zatika. */
.dnevi,.cats,.pcard .ure{scroll-snap-type:x proximity}
.dnevi .dan,.cats .cat,.pcard .ure span{scroll-snap-align:start}
.cats{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:6px}
.cats::-webkit-scrollbar{display:none}
.pcard .ure{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.pcard .ure::-webkit-scrollbar{display:none}

/* fotografije na profilu salona in v skupnosti: na telefonu vodoravni
   swipe trak, na širokem ostane mreža */
@media(max-width:640px){
  #foto-grid{display:flex !important;overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;padding-bottom:8px}
  #foto-grid::-webkit-scrollbar{display:none}
  #foto-grid > div{flex:0 0 72%;scroll-snap-align:center;aspect-ratio:1}
}

/* ── uvod ob prvem vstopu (onboarding; pin 3) ────────────────────────
   Tri liste v swipe traku s pripenjanjem, papir na papirju, medenina
   samo na dejanjih. Pokaže se enkrat; Esc ali Preskoči ga konča. */
/* podlago in zameglitev nosi pravilo NADSLOJI v podoba.css */
.uvod{position:fixed;inset:0;z-index:80;
  display:flex;flex-direction:column}
.uvod-trak{flex:1;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none}
.uvod-trak::-webkit-scrollbar{display:none}
.uvod-list{flex:0 0 100%;scroll-snap-align:center;display:flex;
  flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:40px 28px;gap:14px}
.uvod-znak{width:64px;height:64px}
/* krogla iz delcev na prvem listu: 460 px platno, izrisano na 220 */
.uvod-krogla{width:min(58vw,220px);height:auto;aspect-ratio:1;display:block;margin:0 auto 4px}
.uvod-list h2{font-family:var(--display);font-weight:600;font-size:var(--t-2xl);
  color:var(--slonovina);letter-spacing:-.02em}
.uvod-list p{max-width:38ch;color:var(--telo);font-size:var(--t-base);line-height:1.6}
.uvod-kat{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:420px}
.uvod-noga{display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:16px 22px calc(20px + env(safe-area-inset-bottom,0))}
.uvod-noga .btn-link{min-height:44px;color:var(--telo-2)}
.uvod-pike{display:flex;gap:8px}
.uvod-pike span{width:8px;height:8px;border-radius:50%;background:var(--meja)}
.uvod-pike span.on{background:var(--medenina)}
.uvod .btn-p{background:var(--medenina);border-color:var(--medenina);color:var(--na-tanu,#FCF8F0)}

/* ── uvod v aplikaciji, razširjen po kompletu »planet9« (8. 10. 2026) ──
   Dobrodošlica z znakom, jezik, tri koristi, kategorije, konec z
   Ustvari račun / Prijava. Listi, ki so višji od zaslona (jezik), se
   drsajo navpično; sredina ostane, kadar je prostora dovolj. */
.uvod-list{overflow-y:auto;justify-content:safe center;scrollbar-width:none}
.uvod-list::-webkit-scrollbar{display:none}
.uvod-list h2.uvod-znamka{font-family:var(--display);font-weight:200;font-size:clamp(30px,9vw,40px);
  letter-spacing:.16em;min-height:0;margin:2px 0 0}
.uvod-pozdrav p{font-family:var(--display);font-weight:300;font-size:var(--t-lg);color:var(--telo);max-width:24ch}
.uvod-ikona{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;
  color:var(--medenina);margin-bottom:6px}
.uvod-ikona svg{width:34px;height:34px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.uvod-jeziki{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
  width:100%;max-width:420px;margin-top:4px}
.uvod-jeziki .cat{justify-content:center;width:100%;min-height:44px;padding:0 12px;
  font-size:var(--t-md);white-space:normal}
.uvod-dejanja{display:flex;flex-direction:column;gap:10px;width:100%;max-width:320px;margin-top:10px}
.uvod-dejanja .btn{justify-content:center;min-height:48px;width:100%}
.uvod-list .uvod-pogoji{font-size:var(--t-sm);color:var(--telo-2);margin-top:8px}
.uvod-pogoji a{color:var(--telo);text-decoration:underline;text-underline-offset:3px;
  display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
.uvod-noga .btn-p.uvod-skrit{visibility:hidden}
.uvod-pike{flex-wrap:wrap;justify-content:center}
@media (max-width:360px){.uvod-jeziki{grid-template-columns:1fr}}

/* ── zaklep s kodo (zaklep.js) ─────────────────────────────────────────
   Bela ploskev čez vso aplikacijo (zastor ni prosojen: pod njim so
   termini in sporočila). Znak zgoraj, pozdrav, štiri pike, številčnica
   s tarčami 72 px. Napačna koda ne trese ničesar: pove jo besedilo z
   znakom in rob pik v barvi napake. */
.zaklep{position:fixed;inset:0;z-index:2147483000;background:var(--ohisje);color:var(--slonovina);
  display:flex;flex-direction:column;align-items:center;overflow-y:auto;
  padding:calc(10px + env(safe-area-inset-top,0)) 22px calc(18px + env(safe-area-inset-bottom,0))}
.zaklep-vrh{position:relative;width:100%;max-width:420px;min-height:52px;
  display:flex;align-items:center;justify-content:center}
.zaklep-nazaj{position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  color:var(--slonovina)}
.zaklep-nazaj svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.zaklep-sredina{flex:1;width:100%;max-width:340px;display:flex;flex-direction:column;
  align-items:center;justify-content:safe center;text-align:center;padding:12px 0}
.zaklep h1{font-family:var(--display);font-weight:300;font-size:clamp(26px,7.4vw,32px);
  line-height:1.15;letter-spacing:.005em;color:var(--slonovina);margin:0 0 8px}
.zaklep h1:focus{outline:none}
.zaklep-lead{font-size:var(--t-md);line-height:1.45;color:var(--telo-2);max-width:30ch;margin:0 0 24px}
.zaklep-pike{display:flex;gap:18px;justify-content:center;margin:0 0 6px}
.zaklep-pike span{width:14px;height:14px;border-radius:50%;
  border:1.5px solid var(--rob-k);background:transparent;transition:background-color .15s,border-color .15s}
.zaklep-pike span.polna{background:var(--slonovina);border-color:var(--slonovina)}
.zaklep-pike.napaka span{border-color:var(--napaka)}
.zaklep-sporocilo{min-height:52px;width:100%;display:flex;align-items:center;justify-content:center}
.zaklep-sporocilo .note{margin:0;font-size:var(--t-sm);line-height:1.4;max-width:100%;text-align:left}
.zaklep-tipke{display:grid;grid-template-columns:repeat(3,72px);gap:14px 26px;justify-content:center}
.zaklep-tipka{width:72px;height:72px;border-radius:50%;padding:0;margin:0;cursor:pointer;
  display:grid;place-items:center;font-family:var(--num);font-weight:300;font-size:28px;line-height:1;
  color:var(--slonovina);-webkit-tap-highlight-color:transparent;
  transition:background-color .15s,transform .14s}
.zaklep-tipka svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.zaklep-tipka:active{transform:scale(.97)}
.zaklep-tipka:focus-visible,.zaklep-nazaj:focus-visible,.zaklep-pozabljena:focus-visible{
  outline:2px solid var(--medenina);outline-offset:3px}
.zaklep-dejanja{display:flex;flex-direction:column;align-items:center;gap:4px;margin-top:20px}
.zaklep-kljuc{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px}
.zaklep-kljuc svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round}
.zaklep-kljuc[hidden]{display:none}
.zaklep-pozabljena{min-height:44px;padding:0 12px;font-size:var(--t-md);color:var(--telo);
  text-decoration:underline;text-underline-offset:3px}
@media (max-height:680px){
  .zaklep-tipke{grid-template-columns:repeat(3,64px);gap:10px 24px}
  .zaklep-tipka{width:64px;height:64px;font-size:26px}
  .zaklep-lead{margin-bottom:16px}
}
@media (prefers-reduced-motion:reduce){
  .zaklep-tipka,.zaklep-pike span{transition:none}
  .zaklep-tipka:active{transform:none}
}

/* ── Varnost: ključi in koda (hitra-prijava.js) ─────────────────────────
   Iste mere kot vrstice Nastavitev (moj.html): ikona 22, ime, vrednost,
   puščica; ločnica med vrsticami od ikone naprej. Na plošči ista skupina. */
.hp-ovoj{margin-top:26px}
.hp-ovoj h3{margin-bottom:10px}
.hp-skupina[hidden]{display:none}
.hp-vrsta{position:relative;display:flex;align-items:center;gap:14px;width:100%;min-height:56px;
  margin:0;padding:8px 14px 8px 16px;background:transparent;border:0;text-align:left;
  font:inherit;font-size:var(--t-md);color:var(--slonovina);cursor:pointer}
div.hp-vrsta{cursor:default;padding-right:6px}
.hp-vrsta+.hp-vrsta::before{content:"";position:absolute;top:0;left:52px;right:0;border-top:1px solid var(--meja2)}
@media (hover:hover) and (pointer:fine){button.hp-vrsta:hover{background:var(--tan-sled)}}
.hp-vrsta:focus-visible,.hp-odstrani:focus-visible{outline:2px solid var(--medenina);outline-offset:-3px}
.hp-ik{flex:none;width:22px;height:22px;display:grid;place-items:center;color:var(--telo)}
.hp-ik svg,.hp-pusc svg,.hp-odstrani svg{width:20px;height:20px;fill:none;stroke:currentColor;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hp-ime{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;line-height:1.35}
.hp-pod{font-size:var(--t-sm);color:var(--telo-2)}
.hp-vred{font-size:var(--t-sm);color:var(--telo);white-space:nowrap}
.hp-pusc{flex:none;width:18px;height:18px;display:grid;place-items:center;color:var(--telo-2)}
.hp-pusc svg{width:18px;height:18px}
.hp-odstrani{flex:none;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  cursor:pointer;background:transparent;color:var(--telo)}
@media (hover:hover) and (pointer:fine){.hp-odstrani:hover{background:var(--tan-sled);color:var(--slonovina)}}
.hp-odstrani:disabled{opacity:.5;cursor:default}