/* ── zgodbe (24 ur) ─────────────────────────────────────────────────────
   Trak krogcev na Domov, gumb Zgodbe na profilu, ogled čez cel zaslon in
   sestavljalec. Krogec je avatar v karamelnem obroču — obroč pove, da
   obstaja nekaj novega; po ogledu je obroč tih. Ogled stoji na črnilu
   (edina polna temna ploskev poleg prijave), napis vedno na zastoru. */
.zg-trak{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;padding:6px 2px 12px;
  margin:0 -2px 14px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.zg-trak::-webkit-scrollbar{display:none}
.zg-trak[hidden]{display:none}
.zg-krog{flex:none;scroll-snap-align:start;width:72px;display:flex;flex-direction:column;align-items:center;gap:6px;
  background:none;border:none;padding:0;cursor:pointer;font:inherit;color:var(--slonovina)}
.zg-krog:focus-visible{outline:2px solid var(--slonovina);outline-offset:3px;border-radius:12px}
.zg-obroc{width:64px;height:64px;border-radius:50%;padding:3px;
  background:conic-gradient(var(--karamela,#C89B6D),var(--medenina,#8a5b26),var(--karamela,#C89B6D));
  display:grid;place-items:center}
.zg-krog.videno .zg-obroc{background:var(--gravura-2)}
.zg-krog.nova .zg-obroc{background:none;border:1.5px dashed var(--gravura);padding:0}
.zg-av{width:100%;height:100%;border-radius:50%;background:#FFFFFF;border:2px solid #FFFFFF;overflow:hidden;
  display:grid;place-items:center;font-family:var(--display);font-weight:300;font-size:22px;color:var(--slonovina)}
.zg-krog.nova .zg-av{border:none;background:var(--vdolbina);color:var(--medenina)}
.zg-av img{width:100%;height:100%;object-fit:cover;display:block;filter:var(--foto-filter)}
.zg-av svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.zg-ime{font-size:var(--t-micro,12.5px);line-height:1.2;color:var(--telo);max-width:72px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.zg-krog.moja .zg-ime{color:var(--slonovina);font-weight:600}
/* izpostavljene zbirke na profilu: tih obroč (niso »novo«), sličica prve zgodbe */
.zg-krog.zbirka .zg-obroc{background:var(--gravura)}
.zg-krog.zbirka .zg-ime{color:var(--slonovina)}
.zg-av-slika{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;filter:var(--foto-filter)}
.zg-brez-slike{display:grid;place-items:center;background:#17120e;color:#fff}
.zg-brez-slike svg{width:40%;height:40%;fill:currentColor}
.zg-zbirke{display:flex;gap:14px;overflow-x:auto;padding:6px 2px 10px;margin:0 -2px;scrollbar-width:none}
.zg-zbirke::-webkit-scrollbar{display:none}
.zg-zbirke[hidden]{display:none}

/* gumb Zgodbe na profilu: ista pilula kot Sledi, s karamelnim obročkom */
.zg-gumb{display:inline-flex;align-items:center;gap:8px}
.zg-gumb[hidden]{display:none}
.zg-gumb .zg-pika{width:12px;height:12px;border-radius:50%;border:2px solid var(--medenina);flex:none}

/* ogled čez cel zaslon */
.zg-ogled{position:fixed;inset:0;z-index:95;background:#17120e;color:#fff;display:flex;flex-direction:column;
  touch-action:pan-x pinch-zoom;user-select:none;-webkit-user-select:none}
.zg-ogled[hidden]{display:none}
/* Prihod iz krogca (zgodbe.js nastavi transform-origin na središče
   obroča): bledenje in scale(.96) → 1 v 240 ms, odhod nazaj v krogec v
   200 ms. Navpično potezo vzame ogled sam (touch-action zgoraj): poteg
   navzdol ga zapre, med vlekom (.vlece) sledi prstu brez prehoda. Ob manj
   gibanja samo bledenje. */
/* Od 28. 10. 2026 iz .6 s krivuljo lista: prihod se bere kot »iz krogca«
   (skill Apple Design §7, sidro na sprožilcu). */
.zg-ogled{opacity:0;transform:scale(.6);
  transition:opacity var(--t-small,200ms) var(--ease-out,cubic-bezier(.23,1,.32,1)),transform var(--t-small,200ms) var(--ease-drawer,cubic-bezier(.32,.72,0,1))}
.zg-ogled.vidno{opacity:1;transform:none;transition-duration:var(--t-panel,240ms),var(--t-sheet-out,260ms)}
.zg-ogled.vlece{transition:none}
@media(prefers-reduced-motion:reduce){
  .zg-ogled,.zg-ogled.vidno{transform:none}
}
.zg-ogled .zg-slika,.zg-ogled .zg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#17120e}
.zg-ogled .zg-slika[hidden],.zg-ogled .zg-video[hidden]{display:none}
/* zastor drži napis tudi na svetli fotografiji: zgoraj do 40 % višine skoraj
   poln, spodaj se zgosti pod anketo in gumbi (izmerjeno na beli sliki) */
.zg-ogled .zg-zastor{position:absolute;left:0;right:0;top:0;height:180px;
  background:linear-gradient(180deg,rgba(20,14,10,.9),rgba(20,14,10,.78) 40%,rgba(20,14,10,0));pointer-events:none}
.zg-ogled .zg-vrh{position:relative;z-index:2;padding:calc(10px + env(safe-area-inset-top,0)) 14px 0}
.zg-crte{display:flex;gap:4px;margin-bottom:10px}
.zg-crte span{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.35);overflow:hidden;position:relative}
.zg-crte span::after{content:"";position:absolute;inset:0;background:#fff;transform:translateX(-100%)}
.zg-crte span.polna::after{transform:none}
.zg-crte span.tece::after{animation:zg-tek var(--zg-trajanje,6s) linear forwards}
@keyframes zg-tek{from{transform:translateX(-100%)}to{transform:translateX(0)}}
.zg-ogled.pavza .zg-crte span.tece::after{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){
  .zg-crte span.tece::after{animation:none;transform:translateX(-50%)}
}
.zg-glava{display:flex;align-items:center;gap:10px}
.zg-glava .zg-nazaj{width:44px;height:44px;margin-left:-12px;border:none;background:none;color:#fff;display:grid;place-items:center;cursor:pointer;border-radius:50%}
.zg-glava .zg-nazaj svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.zg-glava .zg-av{width:36px;height:36px;font-size:15px;border-width:1.5px}
.zg-glava .zg-kdo{display:flex;flex-direction:column;min-width:0}
.zg-glava .zg-kdo b{font-family:var(--body);font-weight:600;font-size:14px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.zg-glava .zg-kdo small{font-family:var(--num);font-size:11px;letter-spacing:.04em;color:rgba(255,255,255,.82)}
.zg-glava .zg-kdo a{color:inherit;text-decoration:none}
.zg-glava .zg-izbrisi{margin-left:auto;min-height:44px;padding:0 12px;border:1px solid rgba(255,255,255,.5);border-radius:999px;
  background:none;color:#fff;font:inherit;font-size:12px;font-weight:600;cursor:pointer}
.zg-glava .zg-izbrisi[hidden]{display:none}
/* zvok videa: gumb v glavi; prečrtan, kadar je utišan */
.zg-glava .zg-zvok{margin-left:auto;width:44px;height:44px;border:none;background:none;color:#fff;display:grid;place-items:center;cursor:pointer;border-radius:50%}
.zg-glava .zg-zvok[hidden]{display:none}
.zg-glava .zg-zvok + .zg-izbrisi{margin-left:0}
/* Prijavi (tuja zgodba) stoji na mestu Izbriši; ob gumbu za zvok ga ta
   potisne desno, sicer se potisne sam */
.zg-glava .zg-zvok:not([hidden]) ~ .zg-prijavi{margin-left:0}
.zg-glava .zg-zvok svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.zg-glava .zg-zvok svg path:first-child{fill:currentColor}
.zg-glava .zg-zvok .zg-zvok-crta{display:none}
.zg-glava .zg-zvok.tiho .zg-zvok-val{display:none}
.zg-glava .zg-zvok.tiho .zg-zvok-crta{display:block}
.zg-glava .zg-nazaj:focus-visible,.zg-glava .zg-zvok:focus-visible,.zg-glava .zg-izbrisi:focus-visible{outline:2px solid #fff;outline-offset:2px}
/* Nazaj sega z negativnim robom do roba zaslona: obroč znotraj, da ga rob ne odreže. */
.zg-glava .zg-nazaj:focus-visible{outline-offset:-3px}
.zg-ogled .zg-dno{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:56px 18px calc(22px + env(safe-area-inset-bottom,0));
  background:linear-gradient(180deg,rgba(20,14,10,0),rgba(20,14,10,.8) 56px,rgba(20,14,10,.92));pointer-events:none;display:flex;flex-direction:column;gap:14px;align-items:center}
.zg-ogled .zg-dno p{margin:0;font-size:var(--t-base);line-height:1.5;color:#fff;text-align:center;max-width:36ch;margin-inline:auto}
.zg-ogled .zg-dno p:empty{display:none}
/* dejanja: gumb Rezerviraj (bela pilula) in srček (prosojna pilula) */
.zg-dej{display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;pointer-events:auto}
.zg-dej[hidden]{display:none}
.zg-rez{display:inline-flex;align-items:center;min-height:44px;padding:0 20px;border-radius:999px;background:#fff;color:#241C14;
  font-family:var(--body);font-weight:600;font-size:var(--t-sm);text-decoration:none;white-space:nowrap}
.zg-rez[hidden]{display:none}
.zg-rez:focus-visible{outline:2px solid #fff;outline-offset:3px}
.zg-srce{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.6);
  background:rgba(20,14,10,.35);color:#fff;font:inherit;font-size:var(--t-sm);font-weight:600;cursor:pointer}
.zg-srce[hidden]{display:none}
.zg-srce svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.zg-srce[aria-pressed="true"] svg{fill:var(--karamela,#C89B6D);stroke:var(--karamela,#C89B6D)}
.zg-srce:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media(prefers-reduced-motion:no-preference){
  .zg-srce[aria-pressed="true"] svg{animation:zg-utrip .5s ease-out}
  @keyframes zg-utrip{0%{transform:scale(1)}40%{transform:scale(1.35)}100%{transform:scale(1)}}
}
/* anketa: vprašanje in dva odgovora; po glasu odstotki kot polnilo */
.zg-anketa{pointer-events:auto;width:min(100%,360px);background:rgba(20,14,10,.8);border-radius:16px;padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.zg-anketa[hidden]{display:none}
.zg-anketa p{margin:0;font-size:var(--t-sm);font-weight:600;color:#fff;text-align:center;line-height:1.4}
.zg-anketa-g{display:grid;gap:8px}
.zg-anketa-g button{position:relative;overflow:hidden;min-height:44px;padding:0 14px;border-radius:999px;border:1px solid rgba(255,255,255,.7);background:rgba(255,255,255,.08);
  color:#fff;font:inherit;font-size:var(--t-sm);cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left}
/* polnilo raste s scaleX od levega roba (ne s širino): gib brez preračuna postavitve */
.zg-anketa-g button::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.22);
  transform:scaleX(var(--zg-delez,0));transform-origin:left center;
  transition:transform .4s var(--ease-out,cubic-bezier(.23,1,.32,1))}
.zg-anketa-g button .o,.zg-anketa-g button .pct{position:relative}
.zg-anketa-g button .pct{font-family:var(--num);font-weight:400}
.zg-anketa-g button.moj{border-color:var(--karamela,#C89B6D)}
.zg-anketa-g button.moj::before{background:rgba(200,155,109,.45)}
.zg-anketa-g button:disabled{cursor:default}
.zg-anketa-g button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.zg-anketa small{font-family:var(--num);font-size:11px;color:rgba(255,255,255,.82);text-align:center}
.zg-anketa small:empty{display:none}
@media(prefers-reduced-motion:reduce){.zg-anketa-g button::before{transition:none}}
/* nevidni tarči za listanje: levo nazaj, desno naprej */
.zg-ogled .zg-tap{position:absolute;top:120px;bottom:120px;width:38%;border:none;background:none;cursor:pointer;z-index:1;color:transparent}
.zg-ogled .zg-tap.levo{left:0}
.zg-ogled .zg-tap.desno{right:0;width:62%}
.zg-ogled .zg-tap:focus-visible{outline:2px solid #fff;outline-offset:-4px}
body.zg-odprto{overflow:hidden}

/* sestavljalec: pogovorno okno s predogledom in kratkim besedilom */
.zg-dlg{border:none;padding:0;margin:auto;width:min(100vw - 24px,440px);max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);overflow:auto;
  border-radius:28px;background:#FFFFFF;color:var(--slonovina);box-shadow:0 24px 60px rgba(36,28,20,.3)}
.zg-dlg::backdrop{background:rgba(20,14,10,.6)}
.zg-dlg .zg-dlg-telo{padding:14px 18px 20px;display:flex;flex-direction:column;gap:12px}
.zg-dlg .zg-dlg-glava{display:flex;align-items:center;gap:6px;margin-left:-10px}
.zg-dlg .zg-dlg-glava button{width:44px;height:44px;border:none;background:none;color:var(--slonovina);display:grid;place-items:center;cursor:pointer;border-radius:50%}
.zg-dlg .zg-dlg-glava svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.zg-dlg h2{font-family:var(--display);font-weight:400;font-size:var(--t-lg);margin:0}
.zg-dlg .zg-pred{aspect-ratio:4/5;max-height:46vh;border-radius:18px;background:var(--vdolbina);border:1.5px dashed var(--gravura);
  display:grid;place-items:center;overflow:hidden;color:var(--telo-2);font-size:var(--t-sm);text-align:center;padding:12px}
.zg-dlg .zg-pred.ima{border-style:solid;padding:0;position:relative}
.zg-dlg .zg-pred img,.zg-dlg .zg-pred video{width:100%;height:100%;object-fit:cover;display:block}
.zg-dlg .zg-pred .zg-sek{position:absolute;right:10px;bottom:10px;padding:3px 10px;border-radius:999px;background:rgba(20,14,10,.7);color:#fff;font-family:var(--num);font-size:11px}
.zg-dlg .zg-vrsta{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
/* odgovori ankete: po dva v vrsti, do štirje; gumb Dodaj odgovor pod njimi */
.zg-dlg .zg-ank-odg{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.zg-dlg .zg-ank-odg .fld{min-width:0;margin:0}
.zg-dlg #zg-ank-vec{align-self:flex-start;min-height:44px;padding:0 4px}
.zg-dlg #zg-ank-vec[hidden]{display:none}
.zg-dlg .fld[hidden]{display:none}
.zg-dlg input[type=text]{width:100%;font-family:var(--body);font-size:var(--t-vnos);padding:10px 14px;border:1px solid var(--gravura);border-radius:999px;background:#FFFFFF;color:var(--slonovina)}
.zg-dlg select{width:100%;min-height:44px;font-family:var(--body);font-size:var(--t-vnos);padding:9px 14px;border:1px solid var(--gravura);border-radius:999px;background:#FFFFFF;color:var(--slonovina)}
.zg-dlg .zg-anketa-ur{display:flex;flex-direction:column;gap:10px;padding:12px 14px;border-radius:16px;background:var(--vdolbina);border:1px solid var(--gravura-2)}
.zg-dlg .zg-anketa-ur[hidden]{display:none}
.zg-dlg .zg-stej{font-family:var(--num);font-size:11px;color:var(--telo-2);text-align:right}
.zg-dlg .note{margin:0}
.zg-dlg .zg-pot{font-size:var(--t-xs);color:var(--telo-2);margin:0}
/* poteza z levega roba (aplikacija): okno vdrsi z leve, kot da bi prišla kamera */
@media(prefers-reduced-motion:no-preference){
  .zg-dlg.od-leve[open]{animation:zg-od-leve .26s cubic-bezier(.2,.7,.2,1)}
  @keyframes zg-od-leve{from{transform:translateX(-40%);opacity:0}to{transform:none;opacity:1}}
}
/* poteg do kamere (kamera-poteg.js, lastnica 19. 10. 2026): med potegom je
   okno odprto brez modalnosti in stoji natanko tam, kjer bo stalo modalno
   (isti največji obseg kot pri brskalnikovem modalnem oknu); gib vodi prst,
   zato brez lastne animacije. Zastor je iste barve kot ::backdrop in ga
   nadomesti, dokler gib teče; ::backdrop je takrat prozoren. Gost dobi isto
   okno s povabilom k prijavi. */
.zg-dlg.kam-vlece{position:fixed;inset:0;z-index:97;max-width:calc(100% - 6px - 2em)}
.zg-dlg.kam-vlece[open],.zg-dlg.kam-dovrsuje[open],.zg-dlg.kam-poteg[open]{animation:none}
.zg-dlg.kam-dovrsuje::backdrop{background:transparent}
.kam-zastor{position:fixed;inset:0;z-index:96;background:rgba(20,14,10,.6);pointer-events:none;opacity:0}
.zg-dlg .kam-gost-p{margin:0;font-size:var(--t-base);line-height:1.5;color:var(--telo)}

/* avtorjeve zgodbe na plošči in v profilu stranke: kartica s sličico,
   stanjem, odzivi in dejanji */
.zg-moje{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;margin-top:12px}
.zg-moje .zg-mini{display:grid;grid-template-columns:56px 1fr;gap:12px;align-items:start;padding:8px;border:1px solid var(--gravura-2);border-radius:16px;background:#FFFFFF}
.zg-moje .zg-mini.izpostavljena{border-color:var(--karamela-rob)}
.zg-moje .zg-mini-slika{position:relative;width:56px;height:74px;padding:0;border:none;background:none;cursor:pointer;border-radius:12px;overflow:hidden}
.zg-moje .zg-mini-slika:focus-visible{outline:2px solid var(--slonovina);outline-offset:2px}
.zg-moje .zg-mini-img{width:56px;height:74px;object-fit:cover;display:block;border-radius:12px;border:1px solid var(--gravura-2)}
.zg-moje .zg-znak-video{position:absolute;inset:0;display:grid;place-items:center;color:#fff;background:rgba(20,14,10,.25)}
.zg-moje .zg-znak-video svg{width:22px;height:22px;fill:currentColor}
.zg-moje .zg-mini-telo{display:flex;flex-direction:column;gap:4px;min-width:0}
.zg-moje .zg-mini-stanje{font-family:var(--num);font-size:11px;color:var(--telo-2)}
.zg-moje .zg-mini-odzivi{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--telo);align-items:center}
.zg-moje .zg-mini-srca{display:inline-flex;align-items:center;gap:4px}
.zg-moje .zg-mini-srca svg{width:16px;height:16px;fill:none;stroke:var(--medenina);stroke-width:1.8}
.zg-moje .zg-mini-odzivi b{font-family:var(--num);font-weight:400;color:var(--slonovina)}
.zg-moje .zg-mini-dej{display:flex;gap:8px;flex-wrap:wrap;margin-left:-6px}
.zg-moje .zg-mini-dej button{min-height:44px;padding:0 6px;border:none;background:none;color:var(--telo);font:inherit;font-size:12px;text-decoration:underline;cursor:pointer}
.zg-moje .zg-mini-dej button:focus-visible{outline:2px solid var(--slonovina);outline-offset:1px;border-radius:6px}
.zg-nova-vrsta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}
.zg-nova-vrsta .zg-pot{font-size:var(--t-xs);color:var(--telo-2);margin:0}
.zg-locnica{border:none;border-top:1px solid var(--gravura-2);margin:18px 0}