/* ═══════════════════════════════════════════════════════════════════
   TERMINA — Vprašaj skupnost (vprasanja.js, migracija 100)

   Zgradba gradnikov: segment Zate / Vprašanja, filtri, seznam vprašanj,
   vprašanje z odgovori, kartica ponudnika v odgovoru, izbira kartice,
   obrazca, vrsta na Zate, kartica in zaslon na plošči. Ploskve in napisi
   (steklo, tonske ploskve, črnilo izbranega, drobni napisi) so v
   eleganca.css, ki pride za to datoteko; barve samo iz žetonov.
   ═══════════════════════════════════════════════════════════════════ */

/* ── segment pod naslovom Zate ───────────────────────────────────── */
.vsk-seg{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 24px}
/* Segment je <nav> in bi od splošnega pravila nav (lupina.css,
   postavitev.css) dobil belo podlago glave, lepljivost, zameglitev in črto:
   na atmosferi je stal bel pravokotnik za pilulami. Tu stoji na odru. */
nav.vsk-seg{background:transparent;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;
  position:static;padding-top:0;z-index:auto}
nav.vsk-seg::after{display:none}

/* Pogled vprašanj zamenja Zate: ostaneta naslov in segment. */
body.vsk-na main > :not(#dom-h1):not(.vsk-seg):not(#vprasanja){display:none}
.vprasanja[hidden],.vsk-zate[hidden]{display:none}

/* ── glava, filtri ───────────────────────────────────────────────── */
.vsk-glava{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px 20px;margin:0 0 18px}
.vsk-glava-t{min-width:0;flex:1 1 280px}
.vsk-h,.vsk-nov-h{margin:0 0 6px}
.vsk-glava-p{margin:0;max-width:52ch}
.vsk-vprasaj{min-height:48px;padding:0 26px}
.vsk-filtri{display:flex;flex-direction:column;gap:10px;margin:0 0 12px}
.vsk-skupine{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding:0 16px;padding:4px 16px 8px;margin:0 -16px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.vsk-skupine::-webkit-scrollbar{display:none}
.vsk-skupine .steklo-cip{flex:none;scroll-snap-align:start}
.vsk-kraj-f{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.vsk-kraj-f input{flex:0 1 260px;min-height:44px;padding:0 16px}
.vsk-pocisti{min-height:44px;display:inline-flex;align-items:center}
.vsk-pocisti[hidden]{display:none}
.vsk-stevilo{margin:0 0 10px;min-height:1px}
.vsk-stevilo:empty{margin:0}

/* ── seznam ──────────────────────────────────────────────────────── */
.vsk-seznam{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.vsk-seznam[hidden]{display:none}
.vsk-v{position:relative}
.vsk-v-glava{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
/* Ves okvirček je tarča: povezava se raztegne čez celega (::after);
   čip skupine in znaki pod njo ostanejo napis. */
.vsk-v-pov{display:block;text-decoration:none;overflow-wrap:anywhere}
.vsk-v-pov::after{content:"";position:absolute;inset:0;border-radius:var(--r-steklo-ploscica,var(--r-drobno))}
.vsk-v-pl .vsk-v-pov::after{border-radius:var(--r-drobno)}
.vsk-v-pov:focus-visible{outline:none}
.vsk-v-pov:focus-visible::after{outline:2px solid var(--medenina);outline-offset:2px}
button.vsk-v-pov{width:100%;padding:0;border:0;background:none;font:inherit;text-align:left;cursor:pointer}
.vsk-v-meta{margin:8px 0 0}
.vsk-v-znaki{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 0}
.vsk-znak{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px}
.vsk-kljuk{flex:none;width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
/* Čip skupine kot napis (ni gumb): manjši, brez tarče. */
.steklo-cip.vsk-skup{min-height:30px;padding:0 12px;cursor:default}
.vsk-prazno{margin:0}
.vsk-prazno[hidden]{display:none}
.vsk-prazno p{margin:0 0 12px}
.vsk-prazno p:last-child{margin:0}
.vsk-prazno .btn{min-height:44px}

/* ── eno vprašanje ───────────────────────────────────────────────── */
.vsk-nazaj{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:0 0 10px -8px;padding:0 8px;
  border-radius:999px;text-decoration:none}
.vsk-nazaj svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vsk-nazaj:focus-visible{outline:2px solid var(--medenina);outline-offset:2px}
.vsk-d{margin:0 0 26px}
.vsk-d-glava{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 12px}
.vsk-d-meta{display:inline}
.vsk-d-besedilo{margin:0 0 10px;overflow-wrap:anywhere}
/* Naslovi s tabindex="-1" dobijo fokus iz skripte (bralnik pove, kje je);
   niso krmilni element in ne nosijo obroča. */
.vsk-d-besedilo:focus,.vsk-h:focus,.vsk-nov-h:focus,#vsk-pl-h:focus,#vsk-z-h:focus{outline:none}
.vsk-d-kdo{margin:0}
.vsk-d-dej{display:flex;flex-wrap:wrap;gap:4px 18px;margin:8px 0 -8px}
.vsk-d-dej .btn-link,.vsk-o-dej .btn-link{min-height:44px;display:inline-flex;align-items:center}
/* Zapri vprašanje / Odpri znova (19. 10. 2026): tonska pilula kot Pomagalo
   mi je, pojasnilo pod njo. */
.vsk-d-dej .vsk-zapri{align-self:center}
.vsk-zapri-sporocilo{margin:14px 0 0}
.vsk-odg-h{margin:0 0 12px}
.vsk-odg-prazno{margin:0 0 18px}
.vsk-odg-seznam{list-style:none;margin:0 0 20px;padding:0;display:flex;flex-direction:column;gap:12px}
.vsk-odg-seznam[hidden]{display:none}

/* ── odgovor ─────────────────────────────────────────────────────── */
.vsk-o{position:relative}
/* Odgovor salona: karamelna črta na levi (grafika, ne besedilo), kot
   odgovor salona pod objavo. */
.vsk-o.salon::before{content:"";position:absolute;left:0;top:30px;bottom:30px;width:3px;border-radius:0 3px 3px 0;background:var(--karamela)}
.vsk-o-kdo{display:flex;align-items:center;gap:10px}
.vsk-o-kdo-t{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.vsk-o-av,.vsk-k-av{flex:none;width:40px;height:40px;border-radius:50%;overflow:hidden;display:grid;place-items:center}
.vsk-o-av img,.vsk-k-av img{width:100%;height:100%;object-fit:cover;display:block}
.vsk-o-cas{flex:none;margin-left:auto;align-self:flex-start}
.vsk-o-besedilo{margin:10px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
.vsk-o-dej{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin:12px 0 -6px}
.vsk-preklop{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 18px;border-radius:999px;
  border:1px solid transparent;font:inherit;cursor:pointer;transition:background-color .15s,color .15s}
.vsk-preklop:focus-visible{outline:2px solid var(--medenina);outline-offset:2px}
.vsk-preklop:disabled{opacity:.6;cursor:progress}
.vsk-pomagalo .vsk-kljuk{opacity:.35}
.vsk-pomagalo[aria-pressed="true"] .vsk-kljuk{opacity:1}
@media(prefers-reduced-motion:reduce){.vsk-preklop{transition:none}}

/* ── kartica ponudnika v odgovoru (ena na odgovor) ───────────────── */
.vsk-k{display:flex;align-items:center;gap:12px;margin:12px 0 0;padding:10px 14px;min-height:60px;border-radius:var(--r-drobno);text-decoration:none;position:relative}
a.vsk-k:focus-visible{outline:2px solid var(--medenina);outline-offset:2px}
.vsk-k-t{display:flex;flex-direction:column;min-width:0;flex:1 1 auto}
.vsk-k-ime,.vsk-k-pod{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vsk-k-pusc{flex:none;margin-left:auto;display:grid;place-items:center}
.vsk-k-pusc svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vsk-k-odstrani{flex:none;margin-left:auto;min-height:44px;display:inline-flex;align-items:center}

/* ── obrazca: odgovor in novo vprašanje ──────────────────────────── */
.vsk-obrazec{display:flex;flex-direction:column;gap:2px}
.vsk-obrazec-h{margin:0 0 6px}
.vsk-obrazec-p{margin:0 0 14px}
.vsk-obrazec label.fld{margin:0 0 4px}
.vsk-obrazec textarea{width:100%;min-height:104px;resize:vertical;padding:12px 14px;font-family:var(--body);line-height:1.45}
.vsk-obrazec select,.vsk-obrazec input[type=text],.vsk-obrazec input[type=search]{width:100%;min-height:48px;padding:0 14px}
.vsk-stevec{margin:0 0 6px;text-align:right}
/* Urejanje svojega odgovora (21. 10. 2026): isti obrazec kot nov odgovor, na mestu besedila. */
.vsk-urejanje{display:flex;flex-direction:column;gap:2px;margin:10px 0 0}
.vsk-urejanje label.fld{margin:0 0 4px}
.vsk-urejanje textarea{width:100%;min-height:104px;resize:vertical;padding:12px 14px;font-family:var(--body);line-height:1.45}
.vsk-polje-e{margin:0 0 8px}
.vsk-pomoc{margin:-2px 0 6px}
.vsk-mreza{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:0 14px;margin-top:6px}
.vsk-dej{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0 0}
.vsk-dej .btn{min-height:48px;padding:0 24px}
.vsk-sporocilo{margin:10px 0 0}
.vsk-sporocilo:empty{display:none}
.vsk-zakaj{margin:0}
.vsk-prijava{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:3px}

/* izbira kartice */
.vsk-izb{margin:10px 0 0}
.vsk-izb-h{margin:0 0 6px}
.vsk-izb-izbran[hidden],.vsk-izb-iskanje[hidden]{display:none}
.vsk-izb-izbran .vsk-k{margin:0}
.vsk-izb-st{margin:6px 0 0}
.vsk-izb-st:empty{display:none}
.vsk-izb-zadetki{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.vsk-izb-zadetki:empty{display:none}
.vsk-izb-zadetek{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:8px 12px;border-radius:var(--r-drobno);
  border:1px solid transparent;font:inherit;text-align:left;cursor:pointer}
.vsk-izb-zadetek:focus-visible{outline:2px solid var(--medenina);outline-offset:2px}

/* ── vrsta na Zate ───────────────────────────────────────────────── */
.vsk-zate{margin:0 0 30px}
.vsk-zate-glava{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px}
.vsk-zate-h{margin:0}
.vsk-vsa{display:inline-flex;align-items:center;min-height:44px;text-decoration:underline;text-underline-offset:3px}
.vsk-vsa:focus-visible{outline:2px solid var(--medenina);outline-offset:2px;border-radius:4px}
.vsk-zate-p{margin:0 0 12px}

/* ── plošča: kartica in zaslon (bela) ────────────────────────────── */
.vsk-pl:not(.nalozena){display:none}
.vsk-pl-p{margin:0 0 10px}
.vsk-pl-st{margin:0 0 10px}
.vsk-pl-st:empty{display:none}
.vsk-seznam-pl{gap:10px}
.vsk-v-pl{padding:14px 16px;border-radius:var(--r-drobno)}
.vsk-pl-prazno{margin:0}
.vsk-pl-vsa{margin-top:14px;min-height:44px}
.vsk-pl-vsa[hidden]{display:none}
.vsk-z-telo > .note:first-child{margin:0 0 14px}
.vsk-d-pl{margin:0 0 22px;padding:18px 20px;border-radius:var(--r-drobno)}
.vsk-o-pl{padding:16px 18px;border-radius:var(--r-drobno)}
.vsk-obrazec-pl{padding:18px 20px;border-radius:var(--r-drobno)}
.vsk-d-skup{display:inline-flex;align-items:center;min-height:28px;padding:0 12px;border-radius:999px}

/* Zate: kratka vrsta (okvirček je manjši, glej eleganca.css) */
.vsk-v-kompakt .vsk-v-meta{margin-top:4px}