/* Vprašanja za soočenje (mcp.si/soocenje). Barve osnutka A grafike najave (mrak nad Nanosom), brez
 * prelivov: temno vijolična #2A1F3D (glava, besedilo, obrobe), rumena #F9C74F (nadnaslov, krogi
 * korakov, števci) in oranžna s sredine neba na grafiki (glavni gumbi, rob pod glavo, podčrtaji
 * povezav) na kremni podlagi z belimi kartami. Sistemska pisava (brez zunanjih pisav). Kontrasti so
 * izmerjeni proti WCAG (najmanj 4,5 : 1 za besedilo). */

:root {
  --crnilo: #2a1f3d;        /* besedilo: 14,0 : 1 na podlagi, 15,4 : 1 na kartah */
  --ozadje: #fbf3e4;        /* kremna podlaga */
  --papir: #ffffff;         /* karte in vnosna polja */
  --pridusen: #5c5170;      /* 6,6 : 1 na podlagi, 7,3 : 1 na kartah */
  --rob: #e8dccb;           /* rob kart (okras, ne besedilo) */
  --rob-polje: #807696;     /* rob vnosnih polj: 4,2 : 1 na beli */
  --polje: #ffffff;
  --polje-tekst: #2a1f3d;
  --poudarek: #2a1f3d;      /* povezave: vijolične … */
  --podcrtaj: #d2663f;      /* … z oranžnim podčrtajem */
  --gumb: #e8894a;          /* glavni gumbi: oranžna … */
  --gumb-tekst: #2a1f3d;    /* … s temno vijoličnim napisom, 6,0 : 1 */
  --sonce: #f9c74f;         /* rumena: krogi korakov, števci … */
  --sonce-tekst: #2a1f3d;   /* … s temno vijolično številko, 9,8 : 1 */
  --fokus: #d2663f;         /* 3,3 : 1 na podlagi */
  --ok: #1d5c31;            /* 6,8 : 1 na svoji podlagi, 8,0 : 1 na beli */
  --ok-ozadje: #e3f1e6;
  --opozorilo: #6e4a00;     /* 7,0 : 1 oziroma 7,9 : 1 */
  --opozorilo-ozadje: #fbefd2;
  --napaka: #a1251b;        /* 6,2 : 1 oziroma 7,5 : 1 */
  --napaka-ozadje: #fbe5e2;
  --gumb-nevaren: #a1251b;  /* rušilni gumb: bel napis 7,5 : 1 */
  --glava: #2a1f3d;         /* glava strani in pregleda, brez preliva */
  --glava-tekst: #fbf3e4;   /* 14,0 : 1 */
  --glava-pridusen: #cbbfd6; /* 8,8 : 1 */
  --glava-poudarek: #f9c74f; /* rumena: 9,8 : 1 */
  --obzorje: #e8894a;       /* oranžen rob pod glavo, kot obzorje na grafiki */
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }   /* skrito ostane skrito tudi ob pravilih za display */

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ozadje);
  color: var(--crnilo);
  font: 17px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "DejaVu Sans", sans-serif;
}

a { color: var(--poudarek); text-decoration-color: var(--podcrtaj); text-underline-offset: .15em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; }

h1, h2 { line-height: 1.15; letter-spacing: -.01em; }
/* Javne strani: pisava iz nastavitev (CSS izbrane pisave v pisave/ določi spremenljivki; brez nje sistemska). */
body.javna { font-family: var(--pisava-besedilo, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "DejaVu Sans", sans-serif); }
body.javna h1, body.javna h2, body.javna h3, body.javna .nadnaslov, body.javna .gumb { font-family: var(--pisava-naslov, inherit); }
h2 { font-size: 1.35rem; margin: 2rem 0 .75rem; }

code { font-size: .95em; }

.okvir { max-width: 44rem; margin: 0 auto; padding: 0 1rem; }
.okvir.siroko { max-width: 72rem; }

/* ---------------------------------------------------------------- glava */

.glava { background: var(--glava); color: var(--glava-tekst); padding: 2.25rem 0 2rem; border-bottom: 6px solid var(--obzorje); }
.glava a, .glava-pregleda .ime-strani a { color: var(--glava-poudarek); }
.glava :focus-visible, .glava-pregleda :focus-visible { outline-color: var(--glava-poudarek); }
.glava h1 { font-size: clamp(2rem, 7vw, 3.1rem); font-weight: 700; letter-spacing: -.025em; margin: .35rem 0 .75rem; }
/*
 * Logotip Mladinskega centra Postojna levo od naslova (izdajatelj strani, naročnik 1. 11. 2026). Kjer je ob stolpcu
 * besedila dovolj prostora, je zunaj stolpca in besedilo ostane poravnano z vsebino spodaj; ožje je v stolpcu levo in
 * se besedilo zamakne desno, na telefonu je manjši. Bela različica za temno podlago (skripte/soocenje/logotip_mcp.php).
 */
.glava-mcp .okvir { display: flex; align-items: center; gap: 1.75rem; }
.glava-mcp .znak-mcp { flex: none; display: block; width: 6.5rem; }
.glava-mcp .znak-mcp img { display: block; width: 100%; height: auto; }
.glava-mcp .glava-besedilo { flex: 1; min-width: 0; }
@media (min-width: 66rem) {
  .glava-mcp .okvir { display: block; position: relative; }
  .glava-mcp .znak-mcp { position: absolute; right: 100%; top: 50%; transform: translateY(-50%); margin-right: 2.5rem; width: 7rem; }
}
@media (max-width: 40rem) {
  .glava-mcp .okvir { gap: .9rem; align-items: flex-start; }
  .glava-mcp .znak-mcp { width: 4rem; margin-top: .35rem; }
}
/* Lepljiva glava javnih strani (skripta.js doda razred in višini): ob drsenju ostane na vrhu kot pas z naslovom. */
.lepljiva-glava header.glava { position: sticky; top: var(--glava-top, 0px); z-index: 30; }
.lepljiva-glava header.glava h1 { transform-origin: 0 0; will-change: transform; }
.lepljiva-glava header.glava .nadnaslov, .lepljiva-glava header.glava .uvod, .lepljiva-glava header.glava .znak-mcp { will-change: opacity; }
.lepljiva-glava main [id] { scroll-margin-top: calc(var(--glava-mala, 0px) + 1rem); }
/* Naslov v pasu v eni vrstici (daljši naslov, skripta.js); pas je zadnjih 50 px glave nad oranžnim robom. */
.pas-naslov { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--glava-mala, 56px) - 6px); display: flex; align-items: center; opacity: 0; pointer-events: none; }
.pas-naslov .okvir { width: 100%; }
.pas-naslov span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--pisava-naslov, inherit); font-weight: 700; font-size: 1.3rem; letter-spacing: -.01em; }
.pas-naslov .pas-kratek { display: none; }
/* Telefon: v pasu le kratki naslov (»Soočenje«, naročnik 1. 11. 2026). */
@media (max-width: 40rem) { .pas-naslov span { font-size: 1.15rem; } .pas-naslov .pas-dolg { display: none; } .pas-naslov .pas-kratek { display: block; } }
html { scroll-padding-top: calc(var(--glava-mala, 0px) + .5rem); }
.nadnaslov { margin: 0; font-size: .82rem; font-weight: 650; letter-spacing: .14em; text-transform: uppercase; color: var(--glava-poudarek); }
.uvod { font-size: 1.15rem; margin: 0; }

.velik { font-size: 1.12rem; }
.drobno { font-size: .9rem; color: var(--pridusen); }

/* ---------------------------------------------------------------- koraki */

.koraki { list-style: none; counter-reset: korak; padding: 0; margin: 1.25rem 0; display: grid; gap: .75rem; }
.koraki li { counter-increment: korak; position: relative; padding-left: 2.75rem; min-height: 2rem; }
.koraki li::before {
  content: counter(korak);
  position: absolute; left: 0; top: -.1rem;
  width: 2rem; height: 2rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--sonce); color: var(--sonce-tekst); font-weight: 800;
}
.koraki.ozki li { padding-left: 2.5rem; }

/* ----------------------------------------------------------------- karte */

.karta { background: var(--papir); border: 1px solid var(--rob); border-radius: 14px; padding: 1.25rem; margin: 1.25rem 0; }
.karta > h1:first-child, .karta > h2:first-child { margin-top: 0; }
.obvestilna h1 { font-size: 1.8rem; margin: 0 0 1rem; }
body.ozka main { max-width: 38rem; padding-top: 1.5rem; }

/* --------------------------------------------------------------- obrazec */

.polje { margin: 0 0 1.35rem; }
label { display: block; font-weight: 700; margin: 0 0 .2rem; }
.neobvezno { font-weight: 400; color: var(--pridusen); }
.namig { margin: 0 0 .45rem; font-size: .93rem; color: var(--pridusen); }

input[type=text], input[type=email], input[type=password], input[type=search], input[type=url],
input[type=date], input[type=datetime-local], textarea, select {
  display: block; width: 100%;
  font: inherit; color: var(--polje-tekst);
  background: var(--polje);
  border: 1.5px solid var(--rob-polje); border-radius: 10px;
  padding: .7rem .8rem; min-height: 48px;
}
textarea { resize: vertical; min-height: 7rem; line-height: 1.45; }
input { accent-color: var(--gumb); }
select { padding-right: 2rem; }
[aria-invalid=true] { border-color: var(--napaka); border-width: 2px; }

.napaka-polja { margin: .4rem 0 0; color: var(--napaka); font-weight: 650; }
.stevec { margin: .3rem 0 0; text-align: right; font-size: .85rem; color: var(--pridusen); }
.stevec.blizu { color: var(--opozorilo); font-weight: 650; }
.namig-popravek { margin: .4rem 0 0; font-size: .95rem; }

/* Past za robote: človek je ne vidi in ne doseže s tipkovnico. */
.past { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

fieldset { border: 1px solid var(--rob); border-radius: 12px; padding: 1rem 1rem .25rem; margin: 0 0 1.5rem; background: var(--papir); }
legend { font-weight: 800; padding: 0 .4rem; }
.dvojno { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.dvojno > * { min-width: 0; }

.kljukica { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; margin: .5rem 0 1rem; }
.kljukica input { width: 1.25rem; height: 1.25rem; margin: .15rem 0 0; flex: none; }

.vrstica { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: 1rem 0; }
.vrstica label { margin: 0; }
.vrstica input[type=email] { flex: 1 1 14rem; width: auto; }

/* ----------------------------------------------------------------- gumbi */

.gumb {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: 48px; padding: .65rem 1.35rem;
  border: 2px solid var(--gumb); border-radius: 999px;
  background: var(--gumb); color: var(--gumb-tekst);
  font: inherit; font-weight: 750; text-decoration: none; cursor: pointer;
}
.gumb:hover { text-decoration: none; filter: brightness(1.15); }
.gumb.velik { font-size: 1.1rem; width: 100%; }
.gumb.drugotni { background: transparent; color: var(--crnilo); border-color: var(--crnilo); }
.gumb.majhen { min-height: 36px; padding: .3rem .85rem; font-size: .9rem; font-weight: 650; }
.gumb.nevaren { background: var(--gumb-nevaren); border-color: var(--gumb-nevaren); color: #fff; }
.gumb[disabled] { opacity: .6; cursor: progress; }
button.povezava { background: none; border: 0; padding: 0; font: inherit; font-weight: 700; color: var(--poudarek); text-decoration: underline; text-decoration-color: var(--podcrtaj); cursor: pointer; }

@media (min-width: 40rem) {
  .gumb.velik { width: auto; min-width: 16rem; }
}

/* ------------------------------------------------------------- obvestila */

.obvestilo { padding: .8rem 1rem; border-radius: 10px; border-left: 5px solid; margin: 0 0 1rem; }
.obvestilo.ok { background: var(--ok-ozadje); border-color: var(--ok); }
.obvestilo.opozorilo { background: var(--opozorilo-ozadje); border-color: var(--opozorilo); }
.obvestilo.napaka { background: var(--napaka-ozadje); border-color: var(--napaka); }

.citat { margin: 1rem 0; padding: .8rem 1rem; border-left: 4px solid var(--gumb); background: var(--ozadje); border-radius: 0 10px 10px 0; }
.citat p { margin: .25rem 0; }
.citat.velik p:first-child { font-size: 1.15rem; }

/* ------------------------------------------------------- prenos na YouTubu */

.prenos { margin: 1.5rem 0 2rem; }
.prenos h2 { margin-top: 0; }
.predvajalnik { display: block; position: relative; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 14px; overflow: hidden; background: var(--glava); }
a.predvajalnik img { display: block; width: 100%; height: 100%; }
/* Gumb v desnem spodnjem kotu, kjer na sliki ni besedila. */
a.predvajalnik .predvajaj { position: absolute; right: 4%; bottom: 6%; box-shadow: 0 4px 18px rgba(0, 0, 0, .35); }
a.predvajalnik:hover .predvajaj, a.predvajalnik:focus-visible .predvajaj { filter: brightness(1.15); }
.prenos .drobno { margin-top: .6rem; }
@media (max-width: 40rem) {
  a.predvajalnik .predvajaj { right: 3%; bottom: 5%; min-height: 34px; padding: .25rem .8rem; font-size: .85rem; }
}

/* ------------------------------------------------------- o soočenju, noga */

.o-soocenju, .zasebnost { margin: 2.5rem 0; }
dl { margin: 0; }
dt { font-weight: 750; margin-top: .9rem; }
dd { margin: .15rem 0 0; }
.logotip { display: block; width: auto; height: 3.5rem; margin-top: .75rem; }
@media (min-width: 40rem) {
  .o-soocenju dl, .zasebnost dl, .podatki { display: grid; grid-template-columns: 11rem 1fr; gap: .6rem 1.25rem; }
  .o-soocenju dt, .zasebnost dt, .podatki dt { margin: 0; }
  .o-soocenju dd, .zasebnost dd, .podatki dd { margin: 0; }
}

.noga { margin-top: 3rem; padding: 1.5rem 0 2.5rem; border-top: 1px solid var(--rob); color: var(--pridusen); font-size: .9rem; }
.noga p { margin: .3rem 0; }

/* ---------------------------------------------------------------- pregled */

.glava-pregleda { background: var(--glava); color: var(--glava-tekst); padding-top: .75rem; }
.glava-pregleda .okvir { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; }
.ime-strani { order: -1; flex: 1 1 auto; margin: 0; font-weight: 800; }
.ime-strani a { text-decoration: none; }
.kdo { margin: 0; font-size: .9rem; color: var(--glava-pridusen); }
.kdo strong { color: var(--glava-tekst); }
.odjava { margin: 0; }
.glava-pregleda .gumb.drugotni { color: var(--glava-tekst); border-color: var(--glava-pridusen); }
.zavihki { flex-basis: 100%; min-width: 0; }   /* min-width: sicer zavihki na telefonu raztegnejo stran */
.zavihki ul { list-style: none; margin: .4rem 0 0; padding: 0; display: flex; gap: .2rem; overflow-x: auto; }
.zavihki a { display: block; padding: .6rem .9rem; border-radius: 10px 10px 0 0; text-decoration: none; white-space: nowrap; color: var(--glava-tekst); }
.zavihki a[aria-current=page] { background: var(--ozadje); color: var(--crnilo); font-weight: 750; }
.zavihki li.loceno { margin-left: auto; padding-left: .8rem; border-left: 1px solid var(--glava-pridusen); }   /* stran »Kdo kandidira«, ne soočenje */
.znacka { display: inline-block; min-width: 1.4rem; padding: 0 .4rem; border-radius: 999px; background: var(--sonce); color: var(--sonce-tekst); font-size: .8rem; font-weight: 800; text-align: center; }
.zavihki a[aria-current=page] .znacka { background: var(--gumb); color: var(--gumb-tekst); }

.stevci { list-style: none; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.stevci a { display: block; padding: .35rem .8rem; border: 1px solid var(--rob); border-radius: 999px; background: var(--papir); color: var(--crnilo); text-decoration: none; }

.filtri { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .75rem; align-items: end; }
.filtri label { font-size: .9rem; }
.filtri .gumbi { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }

.vprasanje { scroll-margin-top: 1rem; }
.vprasanje .meta { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; font-size: .9rem; }
.vprasanje .st { font-weight: 800; text-decoration: none; }
.vprasanje .besedilo { font-size: 1.1rem; margin: .7rem 0; }
.vprasanje .preoblikovano { margin: .5rem 0; padding-left: .8rem; border-left: 3px solid var(--rob); }
.vprasanje footer { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .75rem; }
.vprasanje details { margin: .5rem 0; }


.stanje, .oznaka { display: inline-block; padding: .05rem .55rem; border-radius: 999px; font-size: .82rem; font-weight: 700; border: 1px solid var(--rob); background: var(--papir); }
.stanje-novo { background: #e2ebfb; border-color: #9ab4e8; color: #163a7a; }  /* 9,1 : 1 */
.stanje-sprejeto { background: var(--ok-ozadje); border-color: var(--ok); color: var(--ok); }
.stanje-delno { background: var(--opozorilo-ozadje); border-color: var(--opozorilo); color: var(--opozorilo); }
.stanje-ne { background: var(--ozadje); color: var(--pridusen); }
.stanje-izloceno { background: var(--napaka-ozadje); border-color: var(--napaka); color: var(--napaka); }
.stanje-nepotrjeno { border-style: dashed; color: var(--pridusen); }
.oznaka.ok { color: var(--ok); border-color: var(--ok); }
.oznaka.opozorilo { color: var(--opozorilo); border-color: var(--opozorilo); }
.oznaka.napaka { color: var(--napaka); border-color: var(--napaka); }

.glava-vprasanja { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.glava-vprasanja h1 { margin: 0 .5rem 0 0; }
.podatki { margin: 1rem 0; }

pre { white-space: pre-wrap; word-break: break-word; font: inherit; font-size: .95rem; background: var(--ozadje); border-radius: 10px; padding: .8rem 1rem; }
details > summary { cursor: pointer; }
.noga-sporocila { margin-top: -.75rem; color: var(--pridusen); }
details.poslano { border-top: 1px solid var(--rob); padding: .5rem 0; }
.kratek-seznam { padding-left: 1.2rem; }
.predogled summary { font-size: 1.05rem; }

.tabela { width: 100%; border-collapse: collapse; background: var(--papir); font-size: .95rem; }
.tabela th, .tabela td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--rob); vertical-align: top; }
/* Obiski: števila desno, poravnana; vsota v nogi. */
.tabela.obiski { width: auto; min-width: 22rem; }
.tabela.obiski .st { text-align: right; font-variant-numeric: tabular-nums; }
.tabela.obiski tfoot th, .tabela.obiski tfoot td { border-bottom: 0; border-top: 2px solid var(--rob); }

.za-moderatorja li { margin: 0 0 1rem; }
.za-moderatorja li p { margin: .1rem 0; }
.za-moderatorja li p:first-child { font-size: 1.1rem; }
.za-moderatorja .ozadje { font-size: .95rem; color: var(--pridusen); max-width: 50rem; }
.za-moderatorja .ozadje strong { color: var(--crnilo); }
.izvirniki { margin: .2rem 0 0; padding-left: 1.2rem; }
.izvirniki li { margin: .1rem 0; }

/* ----------------------------------------------------------- pomočnik AI */

.prednost { display: inline-block; padding: .05rem .55rem; border-radius: 999px; font-size: .82rem; font-weight: 700; border: 1px solid; vertical-align: middle; }
.prednost-visoka { background: var(--napaka-ozadje); border-color: var(--napaka); color: var(--napaka); }
.prednost-srednja { background: var(--opozorilo-ozadje); border-color: var(--opozorilo); color: var(--opozorilo); }
.prednost-nizka { background: var(--ozadje); border-color: var(--rob-polje); color: var(--pridusen); }
.oznaka.izstopa { background: var(--sonce); border-color: var(--sonce); color: var(--sonce-tekst); }

.ai-povzetek { font-size: 1.1rem; padding: .8rem 1rem; border-left: 4px solid var(--sonce); background: var(--papir); border-radius: 0 10px 10px 0; }
.kazalo-tem h3 { margin: 0 0 .5rem; }
.kazalo-tem ol { margin: 0; padding-left: 1.4rem; }
.kazalo-tem li { margin: .25rem 0; }
.ai-skupina { scroll-margin-top: 1rem; }
.ai-skupina h2 { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; }
.ai-skupina h3 { font-size: 1.05rem; margin: 1.25rem 0 .5rem; }
.ai-predlog { border-top: 1px solid var(--rob); margin-top: 1rem; }
.ai-predlog .citat p { font-size: 1.1rem; }
.ai-predlog details > summary { font-weight: 700; color: var(--poudarek); }
.ai-predlog form { margin-top: .75rem; }
.izbira .kljukica { margin: .35rem 0; }
.ai-vprasanja { padding-left: 1.4rem; }
.ai-vprasanja li { margin: 0 0 .9rem; }
.ai-vprasanja .meta { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; font-size: .9rem; margin: 0 0 .2rem; }
.ai-vprasanja .st { font-weight: 800; text-decoration: none; }
.ai-vprasanja p { margin: .15rem 0; }
.ai-vprasanja .preoblikovano { padding-left: .8rem; border-left: 3px solid var(--rob); }
.ai-tema input[type=text] { flex: 1 1 12rem; width: auto; }
.ai-tema .kljukica { margin: 0; }
.ai-namig { padding: .6rem .9rem; border-radius: 10px; background: var(--ozadje); border: 1px solid var(--rob); }

/* Analiza, ki teče: koraki, opis, vrstica napredka, čas in zadnji znak strežnika (skripta.js). */
.ai-tek { padding: 1rem 1.1rem; border-radius: 12px; border: 1.5px solid var(--rob-polje); background: var(--ozadje); margin: 0 0 1rem; }
.ai-tek > p { margin: .4rem 0; }
.ai-tek-naslov { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; font-size: 1.05rem; }
.vrtavka { width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 3px solid var(--rob); border-top-color: var(--gumb); animation: vrtenje 1s linear infinite; flex: none; }
.ai-tek.koncano .vrtavka, .ai-tek.neuspesno .vrtavka { animation: none; border-color: var(--ok); }
.ai-tek.neuspesno .vrtavka { border-color: var(--napaka); }
@keyframes vrtenje { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vrtavka { animation-duration: 3s; } }
.ai-koraki { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; padding: 0; margin: .6rem 0; counter-reset: korak; }
.ai-koraki li { counter-increment: korak; display: flex; align-items: center; gap: .4rem; padding: .2rem .75rem .2rem .3rem; border-radius: 999px; border: 1px solid var(--rob); background: var(--papir); color: var(--pridusen); font-size: .9rem; }
.ai-koraki li::before { content: counter(korak); display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--rob); color: var(--crnilo); font-weight: 800; font-size: .8rem; }
.ai-koraki li.opravljeno { color: var(--ok); border-color: var(--ok); }
.ai-koraki li.opravljeno::before { content: "✓"; background: var(--ok); color: #fff; }
.ai-koraki li.trenutno { color: var(--crnilo); border-color: var(--crnilo); font-weight: 700; }
.ai-koraki li.trenutno::before { background: var(--sonce); color: var(--sonce-tekst); }
.ai-tek-opis { font-weight: 650; }
.ai-tek progress { display: block; width: 100%; height: .9rem; margin: .5rem 0 .2rem; accent-color: var(--gumb); }
.ai-tek-zivo.tiho { color: var(--opozorilo); font-weight: 650; }
.ai-prekini { margin: .6rem 0 .3rem; }
.ai-teme-doslej { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; padding: 0; margin: .3rem 0 0; }
.ai-teme-doslej li { padding: .05rem .6rem; border-radius: 999px; border: 1px solid var(--rob-polje); background: var(--papir); font-size: .9rem; }

/* Izbira modela s seznama ponudnika (nastavitve). */
.modeli-izbira + input { margin-top: .5rem; }
.modeli-orodja { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin: .5rem 0 .2rem; }
.modeli-orodja .kljukica { margin: 0; font-size: .93rem; }
.modeli-opis { margin: .3rem 0 0; font-size: .93rem; color: var(--pridusen); }
.ai-odgovor pre { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 24rem; overflow: auto; margin: .5rem 0 0; padding: .6rem .8rem; font-size: .85rem; background: var(--ozadje); border: 1px solid var(--rob); border-radius: 8px; }


/* ======================================================================
 * Pregled: hierarhija, oznake in gumbi. Oznake stanja so tihe barvne
 * ploščice brez obrobe (niso gumbi); gumbi so pravokotni; naslovi imajo
 * tri jasne ravni; kartica vprašanja ima barvni rob po stanju.
 * ====================================================================== */

.pregled main { padding-bottom: 4rem; }
.pregled h1 { font-size: 1.65rem; margin: 1.5rem 0 .35rem; }
.pregled h2 { font-size: 1.2rem; margin: 1.75rem 0 .6rem; }
.pregled h3 { font-size: 1rem; margin: 1.1rem 0 .4rem; }
.pregled label { font-weight: 600; }
.pregled .karta { border-radius: 12px; padding: 1.1rem 1.25rem; box-shadow: 0 1px 2px rgba(42, 31, 61, .06); }
.pregled .karta > h2:first-child, .pregled .karta > header:first-child h2 { margin-top: 0; }
.uvod-strani { margin: 0 0 1.25rem; max-width: 48rem; color: var(--pridusen); }
.nadpis { margin: 0 0 .4rem; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pridusen); }
h2.nadpis, h3.nadpis { font-size: .75rem; margin: 0 0 .5rem; }

/* Gumbi */
.pregled .gumb { border-radius: 8px; min-height: 42px; padding: .5rem 1.1rem; font-weight: 700; }
.pregled .gumb.velik { font-size: 1.05rem; }
.pregled .gumb.majhen { min-height: 34px; padding: .25rem .75rem; font-size: .88rem; font-weight: 650; }
.pregled .gumb.drugotni { border-width: 1.5px; border-color: var(--rob-polje); }
.pregled .gumb.drugotni:hover { border-color: var(--crnilo); background: var(--ozadje); filter: none; }
.pregled .glava-pregleda .gumb.drugotni { color: var(--glava-tekst); border-color: var(--glava-pridusen); }
.pregled .glava-pregleda .gumb.drugotni:hover { background: transparent; border-color: var(--glava-tekst); }
.gumb.tihi { background: transparent; border-color: transparent; color: var(--pridusen); font-weight: 600; text-decoration: underline; text-underline-offset: .15em; }
.gumb.tihi:hover { color: var(--crnilo); filter: none; }

/* Oznake: stanje (s piko), prednost, območje, tema, opozorila */
.pregled .stanje, .pregled .oznaka, .pregled .prednost {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .08rem .5rem; border: 0; border-radius: 4px;
  font-size: .78rem; font-weight: 600; line-height: 1.55; white-space: nowrap;
  background: #efeaf3; color: var(--pridusen);
}
.pregled .stanje::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; flex: none; }
.pregled .stanje-novo { background: #e2ebfb; color: #163a7a; }
.pregled .stanje-sprejeto { background: var(--ok-ozadje); color: var(--ok); }
.pregled .stanje-delno { background: var(--opozorilo-ozadje); color: var(--opozorilo); }
.pregled .stanje-ne { background: #ece8ef; color: var(--pridusen); }
.pregled .stanje-izloceno { background: var(--napaka-ozadje); color: var(--napaka); }
.pregled .stanje-nepotrjeno { background: transparent; box-shadow: inset 0 0 0 1px var(--rob-polje); }
.pregled .oznaka.tema { background: #ece6f5; color: #43306b; }
.pregled .oznaka.ok { background: var(--ok-ozadje); color: var(--ok); }
.pregled .oznaka.opozorilo { background: var(--opozorilo-ozadje); color: var(--opozorilo); }
.pregled .oznaka.napaka { background: var(--napaka-ozadje); color: var(--napaka); }
.pregled .oznaka.izstopa { background: var(--sonce); color: var(--sonce-tekst); }
.pregled .prednost { font-weight: 700; }
.pregled .prednost-visoka { background: var(--napaka); color: #fff; }
.pregled .prednost-srednja { background: var(--sonce); color: var(--sonce-tekst); }
.pregled .prednost-nizka { background: #e8e2ee; color: var(--pridusen); }

/* Števci in filtri na seznamu */
.pregled .stevci { gap: .4rem; }
.pregled .stevci a { display: flex; gap: .4rem; align-items: baseline; padding: .35rem .75rem; border-radius: 8px; border: 1px solid var(--rob); font-size: .92rem; }
.pregled .stevci a strong { font-size: 1.05rem; }
.pregled .stevci a[aria-current] { background: var(--crnilo); border-color: var(--crnilo); color: var(--glava-tekst); }
.pregled .filtri { padding: .9rem 1.1rem; }
.pregled .filtri .gumbi { gap: .4rem 1rem; }
.st-vprasanj { margin: 1rem 0 .5rem; color: var(--pridusen); font-size: .92rem; }

/* Kartica vprašanja */
.pregled .vprasanje { border-left: 5px solid var(--rob-polje); padding: .95rem 1.25rem; margin: .75rem 0; }
.pregled .vprasanje.st-novo { border-left-color: #5b7fcc; }
.pregled .vprasanje.st-sprejeto { border-left-color: var(--ok); }
.pregled .vprasanje.st-delno { border-left-color: #d29a1e; }
.pregled .vprasanje.st-ne { border-left-color: #c3bacd; }
.pregled .vprasanje.st-izloceno { border-left-color: var(--napaka); opacity: .85; }
.pregled .vprasanje.st-nepotrjeno { border-left-style: dashed; }
.pregled .vprasanje .meta { gap: .35rem .5rem; font-size: .88rem; }
.pregled .vprasanje .meta .st { font-size: 1rem; color: var(--crnilo); }
.pregled .vprasanje .meta .cas { margin-left: auto; color: var(--pridusen); }
.pregled .vprasanje .besedilo { font-size: 1.06rem; line-height: 1.55; margin: .55rem 0 .35rem; max-width: 54rem; }
.pregled .vprasanje .preoblikovano { max-width: 54rem; }
.pregled .vprasanje .dodatno { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin: .25rem 0 0; font-size: .88rem; color: var(--pridusen); }
.pregled .vprasanje details > summary { font-size: .92rem; color: var(--pridusen); }
.pregled .vprasanje footer { gap: .5rem .9rem; margin-top: .8rem; padding-top: .7rem; border-top: 1px solid var(--rob); }
.pregled .vprasanje footer .odpri { margin-left: auto; font-weight: 650; white-space: nowrap; }

/* Odločitev: skupina treh gumbov; izbrana je obarvana. Izloči je ločen. */
.odlocitve { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: 0; }
.odlocitve-oznaka { font-size: .85rem; color: var(--pridusen); }
.odlocitve .skupina { display: inline-flex; flex-wrap: wrap; border: 1.5px solid var(--rob-polje); border-radius: 8px; overflow: hidden; background: var(--papir); }
.pregled .odlocitve .skupina .gumb { border: 0; border-left: 1px solid var(--rob); border-radius: 0; background: var(--papir); color: var(--crnilo); }
.pregled .odlocitve .skupina .gumb:first-child { border-left: 0; }
.pregled .odlocitve .skupina .gumb:hover { background: var(--ozadje); filter: none; }
.pregled .odlocitve .gumb.izbrano.odl-sprejeto { background: var(--ok); color: #fff; }
.pregled .odlocitve .gumb.izbrano.odl-delno { background: #7a5200; color: #fff; }
.pregled .odlocitve .gumb.izbrano.odl-ne { background: var(--pridusen); color: #fff; }
.pregled .odlocitve .gumb.odl-izloceno { background: transparent; border-color: transparent; color: var(--napaka); }
.pregled .odlocitve .gumb.odl-izloceno:hover { background: var(--napaka-ozadje); filter: none; }
.pregled .odlocitve .gumb.odl-izloceno.izbrano { background: var(--napaka-ozadje); }

/* Podrobnosti vprašanja: vsebina levo, podatki desno */
.nazaj { margin: 1rem 0 0; }
.podrobno-mreza { display: grid; gap: 0 1.5rem; align-items: start; }
.podrobno-mreza > * { min-width: 0; }
.pregled .stranski { font-size: .95rem; }
.pregled .stranski .podatki { display: block; margin: 0; }
.pregled .stranski dt { margin: .8rem 0 .1rem; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pridusen); }
.pregled .stranski dt:first-child { margin-top: 0; }
.pregled .stranski dd { margin: 0; overflow-wrap: anywhere; }
.pregled .karta.nevarno { border-color: #e7c4bf; }
@media (min-width: 62rem) {
  .podrobno-mreza { grid-template-columns: minmax(0, 1fr) 19rem; }
  .podrobno-mreza .stranski { position: sticky; top: 1rem; grid-column: 2; grid-row: 1 / span 20; }
}

/* Pomočnik AI */
.ai-zagon-vrstica { display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; align-items: center; justify-content: space-between; }
.ai-zagon-vrstica h2 { margin: 0 0 .2rem; }
.ai-zagon-vrstica p { margin: 0; }
.ai-zagon form { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin: 0; }
.ai-zagon form .kljukica { margin: 0; font-size: .92rem; max-width: 28rem; }
.ai-zagon details { margin-top: .75rem; font-size: .92rem; color: var(--pridusen); }
.pregled .ai-povzetek { margin: .5rem 0 1rem; font-size: 1.05rem; }
.ai-povzetek .nadpis { margin-bottom: .2rem; }
.ai-povzetek p:last-child { margin: 0; }
.kazalo-tem table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.kazalo-tem th { text-align: left; font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--pridusen); font-weight: 700; padding: 0 .5rem .35rem 0; }
.kazalo-tem td { padding: .4rem .5rem .4rem 0; border-top: 1px solid var(--rob); vertical-align: middle; }
.kazalo-tem td.st, .kazalo-tem th.st { width: 2rem; color: var(--pridusen); }
.kazalo-tem td.stevilo, .kazalo-tem th.stevilo { text-align: right; width: 6rem; color: var(--pridusen); }
.kazalo-tem a { font-weight: 650; text-decoration: none; }
.kazalo-tem a:hover { text-decoration: underline; }
.ai-skupina-glava { display: flex; gap: .9rem; align-items: flex-start; margin-bottom: .6rem; }
.ai-st { flex: none; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: var(--crnilo); color: var(--glava-tekst); font-weight: 800; }
.pregled .ai-skupina h2 { margin: .1rem 0 .15rem; font-size: 1.3rem; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .6rem; }
.ai-skupina-glava p { margin: 0; font-size: .9rem; color: var(--pridusen); }
.ai-opis { margin: .25rem 0 .35rem; max-width: 54rem; }
.ai-utemeljitev { margin: 0 0 .5rem; font-size: .9rem; color: var(--pridusen); max-width: 54rem; }
.ai-utemeljitev em { font-style: normal; font-weight: 650; }
.ai-predlogi { margin: 1rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--rob); }
.pregled .ai-predlog { border: 0; margin: 0 0 1rem; padding: .85rem 1rem; border-left: 4px solid var(--gumb); border-radius: 0 10px 10px 0; background: var(--ozadje); }
.ai-predlog .nadpis { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.ai-predlog-besedilo { margin: 0 0 .4rem; font-size: 1.12rem; line-height: 1.5; max-width: 54rem; }
.ai-ozadje { margin: 0 0 .5rem; font-size: .93rem; color: var(--pridusen); max-width: 54rem; }
.ai-ozadje strong { color: var(--crnilo); font-weight: 650; }
.ai-predlog-noga { margin: 0; font-size: .88rem; color: var(--pridusen); }
.ai-uporabi { margin-top: .5rem; }
.ai-uporabi > summary { display: inline-flex; align-items: center; min-height: 34px; padding: .25rem .75rem; border: 1.5px solid var(--rob-polje); border-radius: 8px; background: var(--papir); font-size: .88rem; font-weight: 650; list-style: none; }
.ai-uporabi > summary::-webkit-details-marker { display: none; }
.ai-uporabi > summary::after { content: "▾"; margin-left: .4rem; }
.ai-uporabi[open] > summary::after { content: "▴"; }
.ai-uporabi form { margin-top: .75rem; padding: .9rem 1rem; background: var(--papir); border: 1px solid var(--rob); border-radius: 10px; }
.ai-vprasanja-blok { margin: .5rem 0 0; }
.ai-vprasanja-blok > summary { font-weight: 650; padding: .35rem 0; }
.pregled .ai-vprasanja { margin: .5rem 0 0; }
.pregled .ai-vprasanja li { margin: 0 0 .75rem; }
.pregled .ai-vprasanja p:not(.meta) { font-size: .97rem; }
.ai-skupina-noga { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--rob); }
.ai-skupina-noga .ai-tema { margin: 0; flex: 1 1 32rem; }
.ai-skupina-noga .ai-tema label:first-of-type { font-size: .9rem; }

/* Nastavitve: kazalo razdelkov, kartice, lepljiv gumb za shranjevanje */
.nastavitve-kazalo ul { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.nastavitve-kazalo a { display: block; padding: .35rem .7rem; border-radius: 8px; text-decoration: none; color: var(--crnilo); border: 1px solid var(--rob); background: var(--papir); font-size: .92rem; }
.nastavitve-kazalo a:hover { border-color: var(--rob-polje); }
.pregled .nastavitve section.karta { scroll-margin-top: 1rem; }
.pregled .nastavitve .karta > h2 { margin: 0 0 .2rem; }
.opis-razdelka { margin: 0 0 1rem; font-size: .93rem; color: var(--pridusen); max-width: 46rem; }
.pregled .nastavitve .polje { margin-bottom: 1.1rem; }
.pregled .nastavitve .namig { font-size: .88rem; }
.stanje-vrstica { display: flex; gap: .5rem; align-items: baseline; margin: 0 0 1rem; padding: .55rem .8rem; border-radius: 8px; font-size: .92rem; background: var(--ozadje); }
.stanje-vrstica.ok { background: var(--ok-ozadje); }
.stanje-vrstica.opozorilo { background: var(--opozorilo-ozadje); }
.stanje-vrstica strong { white-space: nowrap; }
.pregled fieldset.podkarta { margin: 0; padding: .75rem 1rem .1rem; background: var(--ozadje); border-color: var(--rob); }
.pregled fieldset.podkarta legend { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pridusen); background: var(--papir); border-radius: 4px; }
.predloga { border-top: 1px solid var(--rob); padding: .6rem 0; }
.predloga > summary { display: flex; flex-wrap: wrap; gap: .2rem .75rem; align-items: baseline; }
.predloga > summary strong { min-width: 10rem; }
.predloga[open] > summary { margin-bottom: .75rem; }
.oznake-predlog { display: grid; grid-template-columns: max-content 1fr; gap: .25rem .9rem; margin: .5rem 0 0; font-size: .9rem; }
.oznake-predlog dt { margin: 0; font-weight: 400; }
.oznake-predlog dd { margin: 0; color: var(--pridusen); }
.shrani-vrstica { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin: 1rem 0 1.5rem; padding: .7rem 1rem; border: 1px solid var(--rob); border-radius: 12px; background: rgba(251, 243, 228, .97); box-shadow: 0 -2px 10px rgba(42, 31, 61, .1); }
.shrani-vrstica p { margin: 0; font-size: .9rem; color: var(--pridusen); }
/* Drobni popravki berljivosti */
.pregled .kljukica { font-weight: 400; }
.skrito, .podrobno .odlocitve-oznaka { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pregled .karta > details { margin: 0 0 1rem; }
.pregled .karta > details:last-child { margin-bottom: 0; }
.pregled details > summary { cursor: pointer; }
.predloga > summary { list-style: none; }
.predloga > summary::-webkit-details-marker { display: none; }
.predloga > summary::before { content: "▸"; width: 1rem; color: var(--pridusen); }
.predloga[open] > summary::before { content: "▾"; }
.podrobno-mreza > .karta { margin: 0 0 1rem; }
.pregled .stranski dt { text-transform: none; letter-spacing: 0; font-size: .82rem; font-weight: 600; }
.ai-skupina-noga .ai-tema { gap: .4rem .6rem; }
.ai-skupina-noga .ai-tema input[type=text] { flex: 0 1 16rem; min-height: 38px; padding: .3rem .6rem; }
.ai-skupina-noga .ai-tema .kljukica { font-size: .88rem; color: var(--pridusen); }

@media (min-width: 62rem) {
  .nastavitve-mreza { display: grid; grid-template-columns: 11.5rem minmax(0, 1fr); gap: 1.5rem; align-items: start; }
  .nastavitve-kazalo { position: sticky; top: 1rem; }
  .nastavitve-kazalo ul { flex-direction: column; }
  .nastavitve-kazalo a { border-color: transparent; background: transparent; }
  .nastavitve-kazalo a:hover { background: var(--papir); border-color: var(--rob); }
}

@media (max-width: 40rem) {
  .kazalo-tem { overflow-x: auto; }
  .kazalo-tem .stevilo { width: auto; }
  .kazalo-tem .predlogov { display: none; }
  .pregled .vprasanje .meta .cas { margin-left: 0; flex-basis: 100%; }
  .pregled .vprasanje footer .odpri { margin-left: 0; }
}
@media (max-width: 30rem) {
  .dvojno { grid-template-columns: 1fr; }
}

@media print {
  .pas-naslov { display: none !important; }
  .lepljiva-glava header.glava h1 { opacity: 1 !important; }
  .lepljiva-glava header.glava { position: static; }
  .lepljiva-glava header.glava h1 { transform: none !important; }
  .lepljiva-glava header.glava .nadnaslov, .lepljiva-glava header.glava .uvod, .lepljiva-glava header.glava .znak-mcp { opacity: 1 !important; visibility: visible !important; }
  .glava-pregleda, .noga, .obvestilo, .ne-tiskaj { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
  .okvir.siroko { max-width: none; }
  .za-moderatorja li { break-inside: avoid; }
  .natis .drobno { color: #333; }
}

/* Povezava na stran »Kdo kandidira?« (kandidati.php) pod koraki obrazca. */
.kdo-kandidira { margin: 1.25rem 0; padding: .8rem 1rem; border-left: 4px solid var(--sonce); background: var(--papir); border-radius: 0 10px 10px 0; }
.kdo-kandidira a { font-weight: 750; }

/* Izbira pisave strani »Kdo kandidira?« v pregledu: vsaka možnost je napisana v svoji pisavi. */
.izbira-pisave { border: 0; padding: 0; margin: 0; background: none; display: grid; gap: .35rem; }
.kljukica.pisava { align-items: flex-start; margin: 0; padding: .55rem .7rem; border: 1px solid var(--rob); border-radius: 10px; background: var(--papir); }
.kljukica.pisava strong { display: block; font-size: 1.1rem; }
.kljukica.pisava .vzorec { display: block; font-size: 1rem; }
.kljukica.pisava .opis-pisave { display: block; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif; }
.kljukica.pisava:has(input:checked) { border-color: var(--crnilo); box-shadow: inset 0 0 0 1px var(--crnilo); }