/* A11Y-SCMS — administracija (nadgradnja main.css) */

/* ================= PRAVILO ZA BARVE V TEJ DATOTEKI =================
   Uredništvo nima svoje palete — riše z istimi žetoni kot javna stran, ki jih
   izpelje Theme in izmeri poročilo v Videzu (45 kombinacij). Iz tega sledita
   dve prepovedi. Obe sta zapisani zato, ker sta bili obe kršeni: pregled z
   axe-core je avgusta 2026 našel 97 kršečih vozlišč na 12 od 48 zaslonov
   (obe shemi), medtem ko je poročilo kazalo »vse ustreza«.

   1. NE UVAJAJ KOMBINACIJE, KI JE POROžILO NE MERI.
      Žetoni imajo vlogo in vsaka vloga svojo zahtevo. `--success`, `--warning`,
      `--danger` in `--info` so ROB oziroma označba in so merjeni na 3 : 1
      (SC 1.4.11). Kot barva besedila padejo — zato ima vsako stanje svoj
      `--<stanje>-text`, izpeljan na 4,5 : 1 proti ozadju, ploskvi, pasu,
      zadržani podlagi IN svoji mehki podlagi:

          color: var(--danger-text);      → besedilo, zahteva 4,5 : 1
          border-color: var(--danger);    → rob, zahteva 3 : 1

      Enako velja za `--text` na podlagah `-soft`: ta par poročilo že meri.

   2. NE ZBLEDI BESEDILA Z `opacity`.
      `opacity` se pomnoži z resnično podlago in razveljavi vsako jamstvo pod
      sabo — tudi kritično. Števec v filtru stanj je tako `--on-primary` na
      `--primary` (par, ki ga poročilo meri in ki ustreza) potisnil na 4,43 : 1.
      Za manjši poudarek uporabi `font-weight: 400` ali žeton `--text-muted`
      (ta je izpeljan in izmerjen). `opacity` je dovoljena samo na NEDEJAVNIH
      kontrolah (`[disabled]`, `.field--off`, `.iw-source--off`), kjer po
      SC 1.4.3 kontrastna zahteva ne velja.

   Kdor doda nov žeton ali novo mesto, doda tudi vrstico v Theme::rules() —
   sicer poročilo naslednje take napake spet ne bo videlo.
   ================================================================== */

.admin { background: var(--surface-alt); }
.admin-main { max-width: 76rem; margin-inline: auto; padding: 1.5rem 1.25rem 4rem; }
.admin-main:focus { outline: none; }

/* ---------------- Delovna stran: tekoč okvir brez stranskega roba ----------------
   Zasnova: designs/Urejanje strani - širina in prostor (W1, W2). Stran, ki je cilj
   (urejevalnik, meniji, videz), ni omejena na 76 rem — vsebina se v njej sestavlja
   in mora biti v razmerju s spletiščem, ne s seznamom. Katera stran je delovna,
   pove App\Core\AdminNav::WORK.

   Širina je min(100vw − 3rem, 110rem): 110 rem (1760 px) je zgornja meja, ker bi
   brezmejna širina razgradila razmerje z javno stranjo, in ker vodoravno iskanje
   po 2000 px vrstici ni delo, ampak lov. */
.admin-main--wide { max-width: 113rem; padding-inline: 1.5rem; }

/* ---------------- Drobtina namesto stranskega roba (W2) ----------------
   Rob dobi stran, ki je vozlišče; drobtino dobi stran, ki je cilj. Drobtina pove,
   kje smo, in pelje nazaj — in stane eno vrstico namesto 264 px stolpca. */
.crumbbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem 1.25rem; flex-wrap: wrap; margin-bottom: 1rem;
}
.crumbs ol {
  display: flex; align-items: center; flex-wrap: wrap; gap: .1rem .35rem;
  list-style: none; margin: 0; padding: 0; font-size: .9rem;
}
.crumbs li { display: flex; align-items: center; gap: .35rem; }
.crumbs li + li::before { content: "\203A"; color: var(--text-muted); }
.crumbs a { display: inline-flex; align-items: center; min-height: 32px; }
.crumbs [aria-current] { font-weight: 700; }
/* Obe stikali sta samo videz (prikaz, ne vsebina): brez JavaScripta ju ni,
   ker brez njega ne moreta ničesar preklopiti. */
/* margin-inline-start: auto drži stikali ob desnem robu tudi, kadar drobtine ni
   (razdelek z eno samo podstranjo — Videz, Meniji). */
.crumbbar__do { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-inline-start: auto; }
html:not(.js) .crumbbar__do { display: none; }

/* ---------------- Zbrani način (W4) ----------------
   Glava uredništva se umakne, drobtina pa se prilepi na vrh in prevzame njeno vlogo:
   pot nazaj ostane ves čas na zaslonu. Skrivanja s `visibility` ni — postavke so
   `display: none` in torej tudi zunaj zaporedja tipkovnice, zato ni fokusne pasti:
   Tab za zadnjim gumbom zapelje v naslovno vrstico brskalnika, kot vedno.
   Izhod: gumb ali Esc; stanje se ohrani med sejami (localStorage `scms.focus`,
   nastavljen že v <head>, da ob nalaganju ne utripne cela glava). */
html.admin-focus .admin-top,
html.admin-focus .admin-nav { display: none; }
html.admin-focus .admin-main { padding-top: 0; }
html.admin-focus .crumbbar {
  position: sticky; top: 0; z-index: 30;
  margin-inline: -1.5rem; margin-bottom: 1.25rem;
  padding: .55rem 1.5rem;
  background: var(--surface); border-bottom: 2px solid var(--border);
}

/* ---------------- Glava: dva pasova ----------------
   Zgornji pas je spletišče in osebno (temna pasica --band), spodnji navigacija po
   uredništvu (glavna barva). Oba para sta merjena: on-band → temna pasica in
   on-primary → glavna barva. Zasnova: designs/Uredništvo - popravek glave in dejanj
   (A1, A2), pod 900 px A6. */
.admin-header { background: var(--primary); color: var(--on-primary); }

/* ---------------- Lepljiva glava: v uredništvu vedno, a le en pas ----------------
   Zasnova: designs/Uredništvo - popravek glave in dejanj (A3) — »glava se ob
   drsenju skrči v en pas (44 px)«. Lepljiv torej ni cel dvopasovni blok, ampak
   samo navigacijski pas: meni razdelkov je tisto, kar urednik sredi 3000 px
   dolgega obrazca potrebuje, ime spletišča in osebne povezave pa ne. Zgornji pas
   se odrine z zaslona in se vrne ob vrnitvi na vrh.

   Nastavitev Videz → Postavitev (`sticky_header`, žeton --header-pos) je izbira
   naročnika za JAVNO stran in uredništva ne zadeva: tu je lepljivost privzeta in
   brezpogojna.

   Izvedba je negativni `top`, ne skrivanje pasu ob drsenju: lepljiv je cel ovoj,
   zamaknjen navzgor za višino zgornjega pasu, tako da na zaslonu obstane natanko
   navigacijski pas. Tri posledice, vse zaželene:
   · zgornji pas ostane v dokumentu in v zaporedju tipkovnice — ni ga treba skriti
     z `display: none` in ni ga treba vračati s poslušalcem drsenja (fokus nanj
     stran tako ali tako zapelje na vrh, kjer je viden);
   · lepljiv odtis je ~48 px namesto 91 px, zato ne požre delovne površine niti v
     nizkem oknu — varovala `@media (min-height: …)` ni;
   · podlago nosi ovoj (--primary), zato pas ne prosevala.

   Višino zgornjega pasu izmeri admin.js (--admin-top-h); spodnja rezerva velja,
   dokler skripta ne steče, in je enaka izmerjeni višini pri običajnem imenu
   spletišča. Izmerjeno višino pasu, ki obstane, zapiše v --header-h, iz katerega
   se izpelje `scroll-padding-top`: cilj skoka — in fokus, ki mu sledi — ne sme
   obtičati pod pasom (SC 2.4.11).

   Ena meja ostane, zaradi SC 1.4.10: na ozkem zaslonu brez JavaScripta se
   postavke ne zložijo v gumb »Meni«, ampak stojijo izpisane v več vrsticah —
   lepljiva bi bila cela ta stena. Varovalo za vsak drug primer, ko bi pas presegel
   tretjino okna, je razred .is-tall (admin.js).

   z-index 45 je isti kot pri glavi spletišča: nad vsebino, pod predali (55, 60,
   70), modalnimi okni (200) in skip-linkom (100). */
html { scroll-padding-top: calc(var(--header-h, 3rem) + 1rem); }
.admin-header { position: sticky; top: calc(-1 * var(--admin-top-h, 2.7rem)); z-index: 45; }
html.js .admin-header.is-tall { position: static; }
@media (max-width: 56.25em) {
  html:not(.js) .admin-header { position: static; }
}

.admin-top { background: var(--band); color: var(--on-band); }
.admin-top__in {
  max-width: 76rem; margin-inline: auto; padding: .35rem 1.25rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
}
.admin-top__site { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.admin-top__user { display: flex; align-items: center; gap: 1rem; font-size: .9rem; }
.admin-top__user a { color: var(--on-band); }
.admin-top__user form { margin: 0; }
/* Obrnjen par gumba na temni pasici — isti vzorec kot gumb na pasici predloge strani. */
.admin-top__logout {
  background: var(--on-band); color: var(--band);
  border: 2px solid var(--on-band); font-weight: 700; min-height: 36px;
}
.admin-top__logout:hover { background: var(--on-band); color: var(--band); }
.admin-brand { color: var(--on-band); font-weight: 800; text-decoration: none; font-size: 1.05rem; }
.admin-brand__site { font-weight: 400; }
.admin-brand:hover,
.admin-top__user a:hover { color: var(--on-band); }

/* Oznaka okolja (razvojno / testno). V produkciji se ne izpiše.
   Barvi sta žetona obvestil, zato je kontrast že zajamčen. */
.env-badge {
  align-self: center; padding: .15em .6em; border-radius: 999px;
  font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  background: var(--warning-soft); color: var(--text); border: 1px solid var(--warning);
}
.env-badge--staging { background: var(--info-soft); border-color: var(--info); }

.admin-nav__in {
  max-width: 76rem; margin-inline: auto; padding-inline: 1.25rem;
  display: flex; align-items: stretch; gap: .5rem;
}
.admin-nav__list { display: flex; flex-wrap: wrap; align-items: stretch; gap: .1rem; list-style: none; margin: 0; padding: 0; }
.admin-nav__list a {
  display: inline-flex; align-items: center; min-height: 44px; padding: .3em .85em;
  color: var(--on-primary); text-decoration: none; font-weight: 600;
  border-radius: 8px 8px 0 0; border-bottom: 4px solid transparent;
}
.admin-nav__list a:hover {
  background: color-mix(in srgb, var(--on-primary) 14%, var(--primary));
  text-decoration: underline;
  color: var(--on-primary);
}
/* Trenutna postavka ni samo temnejši kvadrat (razlika je bila 1,4 : 1), ampak bela
   ploščica, polkrepko besedilo in podčrtaj — oznaka torej ni odvisna od barve (1.4.1).
   Povezava ostane povezava: osvežitev je legitimna (A2). */
.admin-nav__list a[aria-current] {
  background: var(--surface); color: var(--link); font-weight: 700;
  border-bottom-color: var(--primary-line);
}
.admin-nav__list a[aria-current]:hover { color: var(--link-hover); }
/* Ločilo pred skupino razdelkov — okras, zato brez pomena za bralnik. */
.admin-nav__break { display: flex; align-items: center; }
.admin-nav__break::before {
  content: ""; align-self: center; inline-size: 1px; block-size: 1.5rem;
  margin-inline: .4rem; background: color-mix(in srgb, var(--on-primary) 45%, var(--primary));
}
/* Gumb »Meni« in izpis lokacije sta samo za ozek zaslon (A6). */
.admin-nav__toggle { display: none; }
.admin-nav__where { display: none; }

/* ---------------- Podnavigacija razdelka (druga raven) ----------------
   Navpičen seznam ob vsebini namesto ovite vrste jajčastih gumbov: 11 ciljev v
   ovitem pasu ni imelo berljivega vrstnega reda in je vsebino potisnilo nizko (A4). */
.admin-main--cols {
  display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: 1.5rem;
  align-items: start;
}
.admin-sub {
  padding: .9rem .8rem; background: var(--surface-alt);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.admin-sub__title {
  margin: 0 0 .4rem; padding-inline: .6rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted);
}
.admin-sub ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .15rem; }
.admin-sub a {
  display: flex; align-items: center; min-height: 44px; padding: .4em .7em;
  color: var(--link); text-decoration: none; border-radius: calc(var(--radius) * .6);
  border-inline-start: 4px solid transparent;
}
.admin-sub a:hover { background: var(--surface-mute); color: var(--link-hover); }
.admin-sub a[aria-current] {
  background: var(--surface); font-weight: 700;
  border: 1px solid var(--border); border-inline-start: 4px solid var(--primary-line);
}
.admin-sub__tag {
  margin-inline-start: auto; padding: .1em .5em; font-size: .7rem; font-weight: 700;
  color: var(--text); background: var(--surface-mute);
  border: 1px solid var(--border); border-radius: calc(var(--radius) * .4);
}
.admin-sub__note { margin: .6rem .6rem 0; padding-top: .6rem; border-top: 1px solid var(--border); font-size: .8rem; color: var(--text-muted); }

/* ---------------- Druga raven seznama: vodoravni zavihki (W6) ----------------
   Seznam ni vozlišče, ampak svoja vrsta strani: rob bi mu vzel 264 px, ki jih
   potrebuje tabela (računa v AdminNav::LIST). Druga raven zato leži nad naslovom
   — šest postavk skupine Vsebina se v eno vrstico izide pri ~620 px.

   Trenutni zavihek ni samo barva (1.4.1): bela ploščica, polkrepko besedilo in
   preboj skozi črto pod vrstico (mapa v registratorju), poleg tega aria-current.
   Ostane povezava — osvežitev seznama je legitimna (A2). Vrstica se pri ožjem
   zaslonu prelomi; zavihki so navadne povezave, ne vzorec ARIA »tabs«, zato je
   prelom brez posledic za tipkovnico. */
.admin-tabs { margin: 0 0 1.25rem; border-bottom: 2px solid var(--border-strong); }
.admin-tabs ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: flex-end; flex-wrap: wrap; gap: .15rem;
}
.admin-tabs a {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 44px; padding: .4em .9em;
  color: var(--link); text-decoration: none;
  border: 1px solid transparent; border-radius: calc(var(--radius) * .6) calc(var(--radius) * .6) 0 0;
}
.admin-tabs a:hover { background: var(--surface-mute); color: var(--link-hover); }
/* Obroba ploščice je --border (par, ki ga poročilo meri proti ploskvi IN proti pasu),
   črta pod vrstico pa --border-strong proti pasu — obe kombinaciji sta v Theme::rules().
   Zavihek črto prebije s 3 px spodnje obrobe v barvi svoje podlage. */
.admin-tabs a[aria-current] {
  font-weight: 700; background: var(--surface); color: var(--text);
  border-color: var(--border); border-bottom: 3px solid var(--surface);
  margin-bottom: -2px;
}
/* Ko se vrstica prelomi (šest postavk pod ~620 px), preboj skozi črto ni več videti
   kot mapa, ampak kot napaka: zavihek tedaj postane obrobljena ploščica, črta pa
   ostane pod celim blokom. Oznaka trenutnega je ista — bela podlaga in polkrepko. */
@media (max-width: 40rem) {
  .admin-tabs a[aria-current] {
    border: 1px solid var(--border); border-radius: calc(var(--radius) * .6);
    margin-bottom: 0;
  }
}

/* ---------------- Ozek zaslon: postavke se zložijo v gumb »Meni« (A6) ----------------
   Edino mesto z razkrivanjem v glavi — na širokem zaslonu vrstica ostane ravna.
   Brez JavaScripta gumba ni in seznam ostane izpisan (html:not(.js)). */
@media (max-width: 56.25em) {
  .admin-nav__in { flex-wrap: wrap; padding-block: .5rem; align-items: center; }
  .admin-nav__where { display: block; margin: 0; margin-inline-start: auto; font-size: .85rem; color: var(--on-primary); }
  .admin-nav__list a { border-radius: calc(var(--radius) * .6); border-bottom-width: 0; }
  html.js .admin-nav__toggle {
    display: inline-flex; align-items: center; gap: .5rem;
    min-height: 44px; padding: .4em .9em;
    font: inherit; font-weight: 700; cursor: pointer;
    color: var(--primary); background: var(--on-primary);
    border: 2px solid var(--on-primary); border-radius: calc(var(--radius) * .6);
  }
  html.js .admin-nav__list { display: none; }
  /* Razgrnjen meni je del lepljive glave: če bi bil višji od prostora pod zgornjim
     pasom, bi njegov spodnji del ostal pod robom okna in nedosegljiv — lepljiv pas se
     z drsenjem strani ne premakne. Mejo izmeri admin.js (--adminnav-max, okno manj
     zgornji pas), drsi pa meni sam. Rezerva velja le do prvega izračuna. */
  html.js .admin-nav.is-open { max-block-size: var(--adminnav-max, 70dvh); overflow-y: auto; }
  html.js .admin-nav.is-open .admin-nav__list {
    display: flex; flex-direction: column; gap: .2rem;
    flex-basis: 100%; padding: .5rem 0 .75rem;
  }
  html.js .admin-nav.is-open .admin-nav__list li { display: block; }
  html.js .admin-nav.is-open .admin-nav__list a {
    display: flex; width: 100%;
    min-height: 48px; background: var(--surface); color: var(--link);
    border: 1px solid var(--border);
  }
  html.js .admin-nav.is-open .admin-nav__list a[aria-current] {
    font-weight: 700; border-inline-start: 4px solid var(--primary-line);
  }
  .admin-nav__break::before { display: none; }
  .admin-main--cols { grid-template-columns: minmax(0, 1fr); }
}

/* Obvestila (.notice--ok / --warn / --error) so v main.css — barve nosijo žetoni. */

/* ---------------- Obrazci ---------------- */
.field { margin: 0 0 1rem; }
.field label { display: block; font-weight: 600; margin-bottom: .3rem; }
.field input[type="text"], .field input[type="password"], .field input[type="email"],
.field input[type="number"], .field input[type="date"], .field input[type="search"],
.field select, .field textarea {
  width: 100%; max-width: 100%;
  min-height: 44px; padding: .45em .7em;
  font: inherit; color: var(--text);
  background: var(--surface); border: 2px solid var(--border);
  border-radius: calc(var(--radius) * .6);
}
.field input[type="color"] { min-height: 44px; width: 5rem; padding: .2em; border: 2px solid var(--border); border-radius: calc(var(--radius) * .6); background: var(--surface); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { border-color: var(--primary-line); }
.field--checkbox { display: flex; align-items: center; gap: .5rem; }
.field--checkbox label { display: inline; margin: 0; }
.field--checkbox input { width: 22px; height: 22px; accent-color: var(--primary); }
/* Izbirnik ikone (polje tipa »icon« v blokih): merodajen je <select>, ob njem
   pa predogled izbrane ikone. Predogled je aria-hidden in ni tarča — je zgolj
   slika tega, kar pove izbrana možnost. Kvadratek ostane tudi prazen (izbira
   »Brez ikone«), da se polje ob menjavi ne premika. */
.field--icon .field__iconrow { display: flex; align-items: center; gap: .6rem; }
.field--icon select { flex: 1 1 auto; }
.field__iconpreview {
  flex: none; display: grid; place-items: center;
  width: 44px; height: 44px; font-size: 1.5rem;
  color: var(--text); background: var(--surface-alt);
  border: 2px solid var(--border); border-radius: calc(var(--radius) * .6);
}
.field--radios { border: 0; padding: 0; margin: 0 0 1rem; }
.field--radios legend { font-weight: 600; margin-bottom: .3rem; padding: 0; }
.radio { display: flex; align-items: center; gap: .5rem; padding: .25rem 0; font-weight: 400; }
.radio input { width: 20px; height: 20px; accent-color: var(--primary); }
.hint { font-size: .875rem; color: var(--text-muted); margin: .25rem 0 0; }
/* Družino pisave nosi .mono v main.css (z žetonom --font-mono-fallback);
   tu se doda samo velikost, sicer bi se rezerva iz žetona izgubila. */
.mono { font-size: .9rem; }

.edit-form fieldset {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); padding: 1.25rem; margin: 0 0 1.5rem;
}
.edit-form legend, .blocked > legend { font-weight: 800; padding-inline: .4rem; }
.label-soft { font-weight: 400; color: var(--text-muted); }

/* ---------------- Glava strani (naslov + dejanja desno) ---------------- */
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.page-head h1 { margin-bottom: .15em; }
.page-head__sub { margin: 0; color: var(--text-muted); }
.page-head__side { display: flex; align-items: center; gap: 1rem; }
.page-head__meta { margin: 0; text-align: end; font-size: .85rem; color: var(--text-muted); line-height: 1.4; }
.page-head__meta strong { color: var(--text); }
/* Števec (ne .badge — ta je oznaka »ustreza/ne ustreza« v Videzu) */
.count-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.6em; height: 1.6em; padding: 0 .45em;
  border-radius: 999px; background: var(--primary); color: var(--on-primary);
  font-size: .8em; font-weight: 700; line-height: 1;
}
.langtabs__count { font-weight: 400; }
.table-sub { display: block; font-size: .85rem; color: var(--text-muted); }

/* ---------------- Kartica s tabelo ----------------
   Ime je .admincard in ne .card: .card v main.css je javna ploščica bloka
   (flex stolpec s senco in prehodom). Ker uredništvo naloži obe datoteki,
   bi enako ime pomenilo, da vsaka sprememba javne ploščice tiho premakne
   tudi obliko uredniških kartic. Vizualni predogled blokov v urejevalniku
   izriše pravi HTML bloka, zato mora .card ostati izključno javni. */
.admincard { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; margin-block: 1rem .75rem; }
.admincard__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; padding: .9rem 1.25rem; border-bottom: 1px solid var(--border); }
.admincard__head h2 { margin: 0; font-size: 1.15rem; }
.admincard .table-wrap { border: 0; border-radius: 0; margin: 0; }

/* ---------------- Stranski predali ----------------
   Z JavaScriptom modalni dialog ob desnem robu; brez njega navadni razdelki
   na dnu strani (obrazec za dodajanje in kopije ostanejo polno uporabni). */
html.js .drawer {
  position: fixed; inset-block: 0; inset-inline-end: 0; z-index: 60;
  width: min(36rem, 100vw);
  display: none; flex-direction: column;
  background: var(--surface);
  border-inline-start: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}
html.js .drawer.open { display: flex; }
html.js .drawer > form { display: flex; flex-direction: column; flex: 1; min-height: 0; }
html.js .drawer__body { overflow: auto; flex: 1; }
html.js .drawer__foot { border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: .75rem; }
.drawer__head { display: flex; align-items: flex-start; gap: 1rem; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border); }
.drawer__head > div { flex: 1; }
.drawer__head h2 { margin: 0 0 .2em; font-size: 1.3rem; }
.drawer__head .iconbtn { flex: none; }
.drawer__sub { margin: 0; font-size: .95rem; color: var(--text-muted); }
.drawer__body { padding: 1.25rem 1.5rem; }
.drawer__foot { padding: 1rem 1.5rem; }
.drawer__section { margin: 1.5rem 0 .5rem; font-size: 1.05rem; }
.drawer__body > .drawer__section:first-child { margin-top: 0; }
.drawer__body details { border: 1px solid var(--border); border-radius: var(--radius); padding: .75rem 1rem; margin-block: 1rem; }
.drawer__body summary { font-weight: 700; cursor: pointer; min-height: 32px; }
.drawer-backdrop {
  position: fixed; inset: 0; z-index: 55;
  background: color-mix(in srgb, var(--shadow-color) 45%, transparent);
}
body.drawer-locked { overflow: hidden; }

.backup-save { display: flex; gap: .75rem; align-items: flex-end; flex-wrap: wrap; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-alt); }
.backup-save .field { flex: 1; min-width: 14rem; margin: 0; }
.backup-import { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; }
.backup-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.backup-card { border: 1px solid var(--border); border-radius: var(--radius); padding: .9rem 1.1rem; background: var(--surface); }
.backup-card__name { margin: 0; font-weight: 700; }
.backup-card__meta { margin: .15rem 0 .6rem; color: var(--text-muted); font-size: .9rem; }
.backup-card__actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.backup-card__actions form { margin: 0; }

/* Brez JavaScripta: gumbi, ki odpirajo/zapirajo predale, ne delujejo — skrij jih;
   predali so navadni razdelki v toku strani. */
html:not(.js) [data-drawer-open], html:not(.js) [data-drawer-close] { display: none; }
html:not(.js) .drawer { margin-top: 2rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
html:not(.js) .drawer-backdrop { display: none; }
.edit-form__grid { display: grid; gap: 1.5rem; }
@media (min-width: 60rem) { .edit-form__grid { grid-template-columns: 3fr 2fr; align-items: start; } }
.edit-form--narrow { max-width: 38rem; }
.form-actions { display: flex; gap: .75rem; align-items: center; margin-top: 1rem; }

.inline-create {
  display: flex; flex-wrap: wrap; gap: .6rem; align-items: end;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1rem 1.25rem; margin-block: 1rem 1.5rem;
}
.inline-create label { font-weight: 600; display: block; width: 100%; margin-bottom: -.35rem; }
.inline-create input[type="text"], .inline-create select {
  min-height: 44px; padding: .4em .7em; font: inherit;
  border: 2px solid var(--border); border-radius: calc(var(--radius) * .6);
  background: var(--surface); color: var(--text); flex: 1; min-width: 12rem;
}
@media (min-width: 48rem) {
  .inline-create label { width: auto; margin: 0 .25rem 0 0; align-self: center; }
}

/* ---------------- Tabele, statusi ---------------- */
.admin .table-wrap { background: var(--surface); }
.actions { white-space: nowrap; }
.actions form { display: inline-block; margin: 0; }
.btn--sm { min-height: 36px; padding: .25em .8em; font-size: .9rem; }
.btn--danger { background: transparent; color: var(--danger-text); border-color: currentColor; }
.btn--danger:hover { background: var(--danger-soft); color: var(--danger-text); }

.status {
  display: inline-block; font-size: .75rem; font-weight: 700;
  padding: .15em .55em; border-radius: 999px; margin-inline-end: .15rem;
  border: 1px solid transparent; color: var(--text);
}
.status--human { background: var(--success-soft); border-color: var(--success); }
.status--machine { background: var(--warning-soft); border-color: var(--warning); }
.status--missing { background: var(--surface-alt); color: var(--text-muted); border-color: var(--border); }
.status--fail { background: var(--danger-soft); border-color: var(--danger); }

/* Potrditev prevoda in ocena dostopnosti pod zavihki jezikov */
.tr-review { margin-top: .75rem; }
.tr-review .ax-review { display: grid; gap: 1rem; padding-bottom: .9rem; }
.ax-review__row { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; }
.ax-review__row .field--radios { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.ax-review__status { margin: 0; }
.ax-review__note { width: min(100%, 46rem); margin: 0; }

.stat-cards { display: grid; gap: 1rem; list-style: none; margin: 1.5rem 0; padding: 0; }
@media (min-width: 40rem) { .stat-cards { grid-template-columns: repeat(3, 1fr); } }
.stat-cards a,
.stat-cards--plain > li {
  display: block; padding: 1.25rem 1.5rem; text-decoration: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--text); font-weight: 600;
}
.stat-cards a:hover { border-color: var(--primary-line); }
.stat-cards strong { display: block; font-size: 2rem; color: var(--link); }

/* ---------------- Nadzorna plošča (A11Y-SCMS-nadzorna-plosca.md) ----------------
   Trije panoji (Čaka na vas · Stanje · Zadnje delo) v mreži. Mreža in ne obrnjene vrste:
   vrstni red v DOM je vrstni red pomembnosti in postavitev v stolpce ga ne sme prestaviti,
   ker bi se izpis za bralnik zaslona razšel z izpisom za oko.

   Postavka je vrstica, ne kartica: kartica bi vsako vrstico obljubila kot enakovredno, pri
   opravilih pa je pomemben njihov vrstni red. Zato okvir dobi pano, ne postavka. */
.dash__lead { font-size: 1.0625rem; color: var(--text); margin: .35rem 0 1.25rem; max-width: 62ch; }

.dash-alert { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.dash-alert p { margin: 0; flex: 1 1 24rem; }

.dash-band { margin-top: 2rem; }
.dash-band > h2 { margin-bottom: .5rem; }

.dash__lanes { display: grid; gap: 1.25rem; align-items: start; }
/* Pano opravil je dvakrat širši od stanja: v njem so stavki, ne števila. */
@media (min-width: 62rem) {
  .dash__lanes { grid-template-columns: 2fr 1fr; }
  /*
     Pri vseh treh panojih jih razporedimo izrecno: pri samodejni razporeditvi bi »Stanje«
     v desnem stolpcu določalo višino prve vrstice, »Zadnje delo« pa bi se odmaknilo pod
     njo in v levem stolpcu bi zazijala vrzel. Izrecna razporeditev velja samo takrat,
     kadar sta oba leva panoja res prisotna (razred doda predloga) — sicer bi pas z enim
     samim panojem pustil prazen stolpec.
  */
  .dash__lanes--split { grid-template-rows: auto auto; }
  .dash__lanes--split > .dash-lane--todo   { grid-area: 1 / 1; }
  .dash__lanes--split > .dash-lane--recent { grid-area: 2 / 1; }
  .dash__lanes--split > .dash-lane--state  { grid-area: 1 / 2 / span 2 / 3; }
}

.dash-lane {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.1rem 1.25rem 1.25rem;
}
.dash-lane > h2, .dash-lane > h3 { margin: 0 0 .5rem; font-size: 1.125rem; }
.dash-group__title {
  margin: 1rem 0 .35rem; font-size: .8125rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted);
}
.dash-group:first-of-type > .dash-group__title { margin-top: .25rem; }

.dash-items { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.dash-item {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem;
  padding: .7rem 0; border-top: 1px solid var(--surface-mute);
}
.dash-items > .dash-item:first-child { border-top: 0; padding-top: .2rem; }

.dash-item__text { flex: 1 1 18rem; display: flex; flex-direction: column; gap: .15rem; }
/* Naslov in opomba sta odstavka (berljivost brez CSS), zato jima tu odvzamemo odmike. */
.dash-item__head, .dash-item__note { margin: 0; }
.dash-item__title { font-weight: 600; }
.dash-item__note { font-size: .875rem; color: var(--text-muted); }
.dash-alert .dash-item__note { display: block; }
/* Nujnost je beseda, ne barva — barva in rob sta dodatek k njej (SC 1.4.1). */
.dash-item__lead { font-weight: 700; }
.dash-item--err .dash-item__lead { color: var(--danger-text, var(--danger)); }
.dash-item--warn .dash-item__lead { color: var(--warning-text, var(--warning)); }
.dash-item--err, .dash-item--warn {
  border-inline-start: 3px solid var(--border); padding-inline-start: .6rem;
}
.dash-item--err { border-inline-start-color: var(--danger); }
.dash-item--warn { border-inline-start-color: var(--warning); }

.dash-item__links { list-style: none; margin: .3rem 0 0; padding: 0; display: grid; gap: .15rem; }
.dash-item__links a { font-size: .9375rem; }

/* žtevilka in beseda sta v ISTI povezavi, da je ime povezave popolno (SC 2.4.4). */
.dash-item--stat > a { text-decoration: none; color: var(--text); display: block; }
.dash-item--stat > a:hover .dash-item__label { text-decoration: underline; }
.dash-item__n { font-size: 1.75rem; line-height: 1.1; color: var(--link); margin-inline-end: .3rem; }
.dash-item--stat .dash-item__label { color: var(--text); }

/* Dejstvo je dvostolpčno: oznaka se ob dolgi vrednosti prelomi v svojem stolpcu, namesto
   da bi vrednost padla v svojo vrstico in se odlepila od oznake. */
.dash-item--fact { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem .9rem; align-items: baseline; }
.dash-item--fact .dash-item__label { color: var(--text-muted); }
.dash-item--fact .dash-item__value { font-weight: 600; text-align: end; }
.dash-item--fact.dash-item--err .dash-item__value { color: var(--danger-text, var(--danger)); }
.dash-item--fact.dash-item--warn .dash-item__value { color: var(--warning-text, var(--warning)); }

/* ---------------- Zavihki jezikov (A5) ----------------
   Zavihek je jezik in nič drugega: prej so bili v enem jajčastem gumbu trije podatki
   (koda, stanje prevoda, razlika strukture), zato se je ime zavihka izgubilo med
   dvema značkama in besedilo povezave je bilo dolgo in nerazumljivo (2.4.4).
   Zdaj je ime celo ime jezika, pika ob njem je namig, njen pomen pa je izpisan —
   za trenutni jezik v pasu pod zavihki, za ostale kot opis zavihka
   (`aria-describedby`), zato ime povezave ostane kratko. */
.langtabs ul {
  display: flex; flex-wrap: wrap; gap: .25rem; list-style: none;
  margin: 1rem 0 0; padding: 0;
  border-bottom: 2px solid var(--border-strong);
}
.langtabs a {
  display: inline-flex; align-items: center; gap: .5em;
  min-height: 44px; padding: .35em 1em; margin-bottom: -2px;
  text-decoration: none; color: var(--link); font-weight: 400;
  border: 1px solid transparent; border-radius: var(--radius) var(--radius) 0 0;
}
.langtabs a:hover { background: var(--surface-mute); color: var(--link-hover); }
.langtabs a[aria-current] {
  font-weight: 700; background: var(--surface); color: var(--text);
  border-color: var(--border); border-bottom-color: var(--surface);
}
/* Pika je samo namig — pomen stanja je izpisan z besedami (1.4.1). */
.langtabs__dot { inline-size: 9px; block-size: 9px; border-radius: 50%; flex: none; background: var(--border); }
.langtabs__dot--human   { background: var(--success); }
.langtabs__dot--machine { background: var(--warning); }
.langtabs__dot--missing { background: var(--border-strong); }
.langtabs__dot--fail    { background: var(--danger); }

/* Pas pod zavihki: stanje trenutnega jezika, izpisano. */
.langtabs__state {
  margin: 0 0 1.25rem; padding: .7rem .9rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 0 0 var(--radius) var(--radius);
}
.langtabs__state--warn { background: var(--warning-soft); border-color: var(--warning); }
.langtabs__state--ok   { background: var(--success-soft); border-color: var(--success); }
.langtabs__state strong { display: block; }
.langtabs__state p { margin: .3rem 0 0; font-size: .9rem; }
.ai-translate { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.25rem; }

/* ---------------- Vrstica dejanj (»Shrani« je vedno na zaslonu) ----------------
   Na Nastavitvah, Videzu in v urejevalniku strani je bil gumb za shranjevanje samo
   pod glavo: po 3000 px drsenja ga ni več in urednik odide brez shranjevanja.
   Vrstica je zadnji element obrazca, torej z tipkovnico pride za zadnjim poljem —
   lepljivost je videz, ne vrstni red (A3). Gumb na vrhu strani ostane; to ni
   nadomestilo, ampak drugo mesto istega dejanja. */
.actionbar {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  margin-top: 1.5rem; padding: .7rem 1rem;
  background: var(--surface);
  border: 1px solid var(--border); border-top: 2px solid var(--border-strong);
  border-radius: var(--radius) var(--radius) 0 0;
  box-shadow: var(--shadow-lg);
}
.actionbar__state { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-weight: 600; }
.actionbar__do { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
/* Pika je okras: stanje je izpisano z besedami, ne le z barvo (1.4.1), zato je
   pred bralnikom skrita in barva nosi le ponovitev. */
.actionbar__dot {
  inline-size: 10px; block-size: 10px; border-radius: 50%;
  background: var(--border); flex: none;
}
.actionbar[data-state="dirty"] .actionbar__dot { background: var(--warning); }
.actionbar[data-state="saved"] .actionbar__dot { background: var(--success); }
.actionbar[data-state="error"] .actionbar__dot { background: var(--danger); }
.actionbar__hint { font-weight: 400; font-size: .85rem; color: var(--text-muted); }
/* »Pokaži, kaj je spremenjeno« — seznam polj, ki še niso shranjena. */
.actionbar__show {
  font: inherit; font-size: .9rem; font-weight: 400; cursor: pointer;
  color: var(--link); background: none; border: 0; padding: 0;
  text-decoration: underline; min-height: 44px;
}
.actionbar__show:hover { color: var(--link-hover); }
.actionbar__changed {
  flex-basis: 100%; margin: 0; padding: .5rem 0 0 1.2rem;
  font-size: .9rem; font-weight: 400;
  border-top: 1px solid var(--border);
}
/* Bližnjica je zapisana, ne skrita (2.1.4). */
.actionbar kbd { font-family: var(--font-mono, monospace); font-size: .8rem; }
/* Nizek zaslon (in 200 % povečava): vrstica se preneha lepiti, da ne pokrije
   vsebine (1.4.10, 2.2). */
@media (max-height: 30em) {
  .actionbar { position: static; box-shadow: none; }
}
@media (max-width: 40em) {
  .actionbar { flex-direction: column; align-items: stretch; }
  .actionbar__do { flex-direction: column; }
  .actionbar__do .btn { justify-content: center; width: 100%; }
}
/* Ob odprtem meniju na ozkem zaslonu vrstica dejanj ne tekmuje z njim (A6). */
@media (max-width: 56.25em) {
  body.nav-open .actionbar { display: none; }
}

/* Vprašanje pred odhodom z neshranjenimi spremembami (A3). Okno zgradi JavaScript;
   brez njega ni prestrezanja povezav, ker brez njega tudi stanja »spremenjeno« ni. */
.leaveask {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
  background: color-mix(in srgb, var(--shadow-color) 45%, transparent);
}
.leaveask[hidden] { display: none; }
.leaveask__box {
  max-width: 32rem; padding: 1.25rem 1.5rem;
  background: var(--surface); color: var(--text);
  border: 2px solid var(--border-strong); border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}
.leaveask__box h2 { margin: 0 0 .5rem; font-size: 1.15rem; }
.leaveask__box p { margin: 0 0 1rem; }
.leaveask__do { display: flex; gap: .75rem; flex-wrap: wrap; margin: 0; }

/* Značka stanja ob naslovu razdelka; JavaScript jo ob prvi spremembi zamenja z .dirty-badge. */
.saved-badge {
  display: inline-flex; align-items: center; padding: .25em .85em; border-radius: 999px;
  background: var(--surface-alt); border: 1px solid var(--border);
  font-size: .85rem; font-weight: 600; color: var(--text-muted);
}

/* Dolga utemeljitev pod poljem: prva poved ostane vidna kot .hint, ostalo je tu. */
.why { margin: .25rem 0 1rem; }
.why > summary { cursor: pointer; font-weight: 600; color: var(--link); min-height: 44px; display: flex; align-items: center; }
.why > summary:hover { color: var(--link-hover); }
.why .hint { max-width: 68ch; }

/* ---------------- Urejevalnik blokov ----------------
   Z JavaScriptom: kartice s povzetki, polja bloka se urejajo v stranskem
   predalu. Brez njega: polja so vidna v karticah, gumbi predalov so skriti. */
fieldset.blocked, .blocked fieldset { border: 0; background: none; padding: 0; margin: 0; min-inline-size: 0; }
.blocked { margin-bottom: 1.5rem; }

.blocked__bar { display: flex; justify-content: flex-end; margin-bottom: 1rem; }
html:not(.js) .blocked__bar, [data-areas] .blocked__bar { display: none; }

.blocked__list { list-style: none; margin: 0; padding: 0; counter-reset: blk; }
.blocked__empty { display: none; }
.blocked__list:empty + .blocked__empty { display: block; margin-bottom: 1rem; }

.blocked__block {
  position: relative; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); padding: .85rem 1.1rem; margin-bottom: 1.75rem;
}
.blocked__head { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.blocked__head::before {
  counter-increment: blk; content: counter(blk);
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; height: 1.9rem; border-radius: calc(var(--radius) * .5);
  background: var(--surface-alt); border: 1px solid var(--border);
  font-size: .85rem; font-weight: 700; color: var(--text-muted);
}
html:not(.js) .blocked__drag { display: none; }
.blocked__drag {
  flex: none; width: 1.9rem; height: 1.9rem; border-radius: calc(var(--radius) * .5);
  background:
    radial-gradient(circle, var(--text-muted) 1px, transparent 1.2px) 35% 30% / 6px 6px no-repeat,
    radial-gradient(circle, var(--text-muted) 1px, transparent 1.2px) 65% 30% / 6px 6px no-repeat,
    radial-gradient(circle, var(--text-muted) 1px, transparent 1.2px) 35% 50% / 6px 6px no-repeat,
    radial-gradient(circle, var(--text-muted) 1px, transparent 1.2px) 65% 50% / 6px 6px no-repeat,
    radial-gradient(circle, var(--text-muted) 1px, transparent 1.2px) 35% 70% / 6px 6px no-repeat,
    radial-gradient(circle, var(--text-muted) 1px, transparent 1.2px) 65% 70% / 6px 6px no-repeat;
  cursor: grab;
}
.blocked__drag:active { cursor: grabbing; }
.blocked__block.is-dragging { opacity: .45; }
.blocked__lead { flex: 1; min-width: 12rem; }
.blocked__type { display: block; font-weight: 700; color: var(--link); }
.blocked__summary { display: block; font-size: .875rem; color: var(--text-muted); overflow-wrap: anywhere; }
.blocked__ctl { display: flex; align-items: center; gap: .35rem; }
html:not(.js) .blocked__ctl, html:not(.js) .blocked__summary { display: none; }

/* Gumb »+« za vstavljanje bloka med obstoječa */
html.js .blocked__insert { position: absolute; inset-inline: 0; bottom: -1.75rem; display: flex; justify-content: center; }
html:not(.js) .blocked__insert { display: none; }
.insertbtn {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px dashed var(--border); background: var(--surface); color: var(--text-muted);
  font-size: 1rem; line-height: 1; cursor: pointer;
}
.insertbtn:hover, .insertbtn:focus-visible { border-style: solid; border-color: var(--primary-line); color: var(--link); }

/* Vizualni predogled bloka (nastavitev spletišča »Vizualni predogled blokov«):
   pod glavo kartice se blok izriše, kot bo videti na spletišču (main.css in
   theme.css sta v uredništvu naložena). Predogled je inert — tipkovnica in
   zaslonski bralnik ga preskočita, povzetek ostaja v glavi kartice. */
.blocked__preview {
  margin-top: .85rem; border-top: 1px dashed var(--border); padding-top: .85rem;
  pointer-events: none;
  container-type: inline-size;
  overflow-x: clip;
}
.blocked__preview:empty { display: none; }
.blocked__preview > :first-child { margin-top: 0; }
.blocked__preview > :last-child { margin-bottom: 0; }

/* V uredniškem predogledu "preliti" pasovi ne smejo pobegniti čez kartico.
   Javni pogled naj ostane nespremenjen; tu jih le zvežemo na širino predogleda. */
.blocked__preview .blocksection--bleed,
.blocked__preview .quicklinks--width-bleed {
  width: auto;
  margin-inline: 0;
}
.blocked__preview .blocksection--bleed {
  border-radius: var(--radius);
}
.blocked__preview .quicklinks--width-bleed > .quicklinks__in {
  padding-inline: 1.25rem;
}

/* Predogled uporablja isti HTML kot javna stran. Ta ozek varovalni sloj ohrani
   osnovno postavitev hitrih povezav tudi med osveževanjem glavne teme. */
.blocked__preview .quicklinks__grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem;
}
.blocked__preview .quicklink {
  display: flex; flex-direction: column; align-items: center; gap: .6rem;
  min-height: 44px; padding: .5rem; color: var(--link); text-align: center;
}
.blocked__preview .quicklink__ico { width: 3.5em; height: 3.5em; }
.blocked__preview .quicklink__label { font-weight: 700; text-decoration: underline; text-underline-offset: .2em; }
@media (min-width: 40rem) {
  .blocked__preview .quicklinks__grid--cols-3,
  .blocked__preview .quicklinks__grid--cols-4,
  .blocked__preview .quicklinks__grid--cols-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Polja bloka: z JS skrita v kartici (urejajo se v predalu), brez JS vidna */
html.js .blocked__block > .blocked__form { display: none; }
html:not(.js) .blocked__block > .blocked__form { margin-top: .9rem; border-top: 1px dashed var(--border); padding-top: .9rem; }
.blocked__form > legend { font-weight: 800; color: var(--link); }
html.js .blocked__form > legend {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Blok, ki ga je "posvojila" harmonika (polje "refs" pri razdelku): ostane na
   svojem mestu v seznamu (lažje urejanje, brez ločenega gnezdenega urejevalnika),
   a je zamaknjen in obarvan, da je jasno, da se izriše znotraj harmonike in ne tu. */
.blocked__block--adopted {
  margin-inline-start: 1.5rem; border-inline-start: 4px solid var(--info);
  background: var(--surface-alt);
}

/* Izbirnik vgrajenih blokov (polje "refs" pri razdelku harmonike) */
.field__refs { margin-top: .35rem; }
.refs-picker__list {
  display: flex; flex-direction: column; gap: .4rem;
  max-height: 12rem; overflow-y: auto;
  border: 1px solid var(--border); border-radius: calc(var(--radius) * .6);
  padding: .6rem .75rem; background: var(--surface);
}
.refs-picker__row { display: flex; align-items: flex-start; gap: .55rem; font-weight: 400; }
.refs-picker__row input { flex: none; margin-top: .2rem; width: 20px; height: 20px; accent-color: var(--primary); }

.blocked__items { border-top: 1px solid var(--border); margin-top: 1.25rem; padding-top: 1rem; }
.blocked__items-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem; }
.blocked__items-label { font-weight: 700; margin: 0; }
.blocked__items-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.blocked__pasteai {
  margin: 0 0 1rem; padding: .9rem 1rem;
  border: 1px solid var(--border); border-radius: calc(var(--radius) * .7);
  background: var(--surface-alt);
  inline-size: 100%;
}
.blocked__pasteai[hidden] { display: none; }
.blocked__pasteai-label { display: block; margin: 0 0 .35rem; font-weight: 600; }
.blocked__pasteai-editor {
  min-height: 14rem; width: 100%; max-width: none;
  padding: .75rem .85rem; overflow: auto;
  border: 1px solid var(--border); border-radius: calc(var(--radius) * .5);
  background: var(--surface); white-space: pre-wrap;
}
.blocked__pasteai-editor:empty::before {
  content: attr(data-placeholder);
  color: var(--text-muted);
  white-space: pre-wrap;
}
.blocked__pasteai-editor:focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.blocked__pasteai-ctl { margin: .6rem 0 0; display: flex; gap: .5rem; flex-wrap: wrap; }
.blocked__items ol { list-style: none; margin: 0; padding: 0; }
.blocked__item { position: relative; border: 1px solid var(--border); border-radius: calc(var(--radius) * .7); background: var(--surface-alt); margin-bottom: .75rem; }
.blocked__item-ctl { position: absolute; top: .5rem; inset-inline-end: .6rem; display: flex; gap: .3rem; z-index: 1; }
html:not(.js) .blocked__item-ctl { display: none; }
.blocked__item-insert { display: flex; justify-content: center; margin: 0 0 -1.05rem; padding-top: .15rem; }
html:not(.js) .blocked__item-insert { display: none; }
.blocked__item-details > summary {
  list-style: none; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  min-height: 44px; padding: .7rem 8.5rem .7rem .9rem; cursor: pointer;
}
html:not(.js) .blocked__item-details > summary { padding-inline-end: .9rem; }
.blocked__item-details > summary::-webkit-details-marker { display: none; }
.blocked__item-details > summary::before {
  content: "\25B8"; flex: none; display: inline-block;
  color: var(--text-muted); transition: transform .15s;
}
.blocked__item-details[open] > summary::before { transform: rotate(90deg); }
.blocked__item-title { font-weight: 700; flex: 1; min-width: 0; }
.blocked__item-meta { flex-basis: 100%; margin-inline-start: 1.05rem; font-size: .85rem; color: var(--text-muted); overflow-wrap: anywhere; }
.blocked__item-details > .blocked__fields {
  border-top: 1px solid var(--border); background: var(--surface);
  padding: .9rem .9rem .25rem;
  border-radius: 0 0 calc(var(--radius) * .7) calc(var(--radius) * .7);
}

/* Razkritje »Napredno« v obrazcu bloka: polja z zastavico `advanced` iz
   BlockRenderer::defs(). Izvorni <details>/<summary> — dela brez JavaScripta,
   bralnik zaslona ga napove kot razkritje s stanjem, sprožilec pa ima svojih
   44 px višine.

   Puščica je narisana z robovi in ne znak »\25B8« v `content`: vsebina iz
   ::before pride v dostopno ime sprožilca, zato bi bralnik zaslona prebral
   »črn trikotnik desno, Napredno« namesto »Napredno«. Prazen `content` v ime ne
   prispeva ničesar. */
.blocked__adv { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: .25rem; }
.blocked__adv > summary {
  list-style: none; display: inline-flex; align-items: center; gap: .5rem;
  min-height: 44px; padding: .3em .2em; cursor: pointer;
  color: var(--text-muted); font-weight: 700; font-size: .92rem;
}
.blocked__adv > summary::-webkit-details-marker { display: none; }
.blocked__adv > summary::before {
  content: ""; flex: none; width: 0; height: 0;
  border-inline-start: .45em solid currentColor;
  border-block: .32em solid transparent;
  transition: transform .15s;
}
.blocked__adv[open] > summary::before { transform: rotate(90deg); }
.blocked__adv > summary:hover { color: var(--link); }
.blocked__adv > .blocked__fields { padding-block: .25rem .5rem; }

.blocked__raw { border: 0; padding: 0; margin: .25rem 0 0; text-align: end; }
.blocked__raw summary {
  display: inline-flex; align-items: center; min-height: 40px; padding: .3em 1em;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface);
  color: var(--text-muted); font-weight: 600; font-size: .9rem; cursor: pointer;
}
.blocked__raw summary:hover { border-color: var(--primary-line); color: var(--link); }
.blocked__raw .hint, .blocked__raw textarea { text-align: start; }
.blocked__raw textarea { width: 100%; margin-top: .75rem; }

/* ---------------- Urejevalnik obogatenega besedila (WYSIWYG) ----------------
   Polje »Vsebina«: orodna vrstica in območje za urejanje sestavi admin.js,
   merodajna textarea pa se skrije (in vrne v načinu »HTML«). Brez JavaScripta
   ostane vidna samo textarea, zato tu ni pravila html:not(.js) — urejevalnika
   takrat sploh ni v kodi.

   Območje nosi razred .prose, isti kot vsebina na spletišču: naslovi, seznami
   in citati so med pisanjem videti tako kot potem v strani. */
.rte__bar {
  display: flex; flex-wrap: wrap; gap: .3rem; align-items: center;
  padding: .4rem; background: var(--surface-alt);
  border: 2px solid var(--border); border-bottom-width: 0;
  border-radius: calc(var(--radius) * .6) calc(var(--radius) * .6) 0 0;
}
.rte__tools { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; flex: 1; }
.rte__sep { flex: none; align-self: stretch; width: 1px; min-height: 24px; background: var(--border); margin-inline: .25rem; }
.rte__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; min-height: 36px; padding: 0 .35em;
  font: inherit; font-size: .95rem; line-height: 1;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
}
.rte__btn--text { padding: 0 .7em; font-size: .875rem; font-weight: 600; }
.rte__btn--b { font-weight: 800; }
.rte__btn--i { font-style: italic; }
.rte__btn--s { text-decoration: line-through; }
.rte__btn:hover { border-color: var(--primary-line); color: var(--link); }
/* Vklopljeno stanje ni le barva ozadja: obroba se odebeli, da je razlika vidna
   tudi brez zaznavanja barv (SC 1.4.1) in v načinu visokega kontrasta. */
.rte__btn[aria-pressed="true"] {
  background: var(--primary); color: var(--on-primary);
  border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--on-primary);
}
/* Inset obroba bi prepisala notranji fokusni obroč — glej pravilo pri
   :focus-visible v main.css. Vklopljen gumb mora ob fokusu ohraniti oboje. */
.rte__btn[aria-pressed="true"]:focus-visible {
  box-shadow: var(--focus-ring), inset 0 0 0 1px var(--on-primary);
}
.rte__btn[disabled] { opacity: .55; cursor: not-allowed; }
.rte__btn[disabled]:hover { border-color: var(--border); color: var(--text); }
.rte__srcbtn { margin-inline-start: auto; }

.rte__area {
  max-width: none; min-height: 10rem;
  padding: .6rem .75rem;
  background: var(--surface); color: var(--text);
  border: 2px solid var(--border);
  border-radius: 0 0 calc(var(--radius) * .6) calc(var(--radius) * .6);
  overflow-wrap: anywhere;
}
.rte__area:focus-visible { border-color: var(--primary-line); }
.rte__area > :first-child { margin-top: 0; }
.rte__area > :last-child { margin-bottom: 0; }
/* Naslovi v urejevalniku so manjši kot na strani: v predalu gre za oznako
   ravni, ne za pravo razmerje velikosti. */
.rte__area h2 { font-size: 1.3rem; }
.rte__area h3 { font-size: 1.15rem; }
.rte__area h4 { font-size: 1rem; }
.rte__area hr { border: 0; border-top: 2px solid var(--border); margin: 1em 0; }
.rte__area code { background: var(--surface-alt); padding: .1em .3em; border-radius: 4px; }
.rte__area:empty::before {
  content: attr(data-placeholder); color: var(--text-muted);
}
/* V načinu »HTML« je vidna merodajna textarea; oblika ostane ista kot za
   območje, da preklop ne premakne postavitve. */
.field--rte textarea { border-radius: 0 0 calc(var(--radius) * .6) calc(var(--radius) * .6); }

/* Zaklenjena vsebina HTML (nastavitev »Zakleni vsebine HTML«, načelo B iz
   P0-3): polje se pokaže, a se ne ureja. Zaklep ni le barva ozadja — pove ga
   razlaga pod poljem (aria-describedby) in atribut readonly, ki ga bralnik
   zaslona napove sam (SC 1.4.1). */
.field--locked textarea {
  border-radius: calc(var(--radius) * .6);
  /* Barva besedila ostane polna: to je vsebina in ne namig — zaklep pove
     obroba in razlaga pod poljem. */
  background: var(--surface-alt); color: var(--text);
  border-style: dashed; cursor: default;
}
.hint--lock { border-inline-start: 3px solid var(--warning); padding-inline-start: .6rem; }

.rte__link {
  border: 2px solid var(--primary-line); border-top-width: 0;
  border-radius: 0 0 calc(var(--radius) * .6) calc(var(--radius) * .6);
  background: var(--surface-alt); padding: .9rem 1rem .25rem;
}
.rte__link .field { margin-bottom: .5rem; }
.rte__link-actions { display: flex; gap: .6rem; flex-wrap: wrap; padding-bottom: .75rem; }
.rte__err { margin-bottom: .75rem; }

/* Predlog AI: gumb stoji desno, ob preklopu na kodo (oba sta desna skupina),
   predal s predlogom pa pod poljem — kot predlogi AI drugod (.aisuggest). */
.rte__aibtn { margin-inline-start: auto; }
.rte__aibtn + .rte__srcbtn { margin-inline-start: 0; }
.rte__ai { margin-top: .75rem; }
.rte__ai-status { margin: 0 0 .6rem; }
.rte__ai-notes { margin: 0 0 .75rem; padding-inline-start: 1.35rem; }
.rte__ai-notes li { margin-bottom: .2rem; }
.rte__ai-prev {
  max-width: none; max-height: 26rem; overflow: auto;
  padding: .6rem .75rem; margin-bottom: .5rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: calc(var(--radius) * .6);
}
/* Namig v predalu stoji na modrem ozadju (--info-soft), na katerem pridušena
   barva namigov ne doseže razmerja 4,5:1 (SC 1.4.3) — tu je barva besedila. */
.rte__ai .hint { color: var(--text); }
.rte__ai-prev > :first-child { margin-top: 0; }
.rte__ai-prev > :last-child { margin-bottom: 0; }
.rte__ai-prev h2 { font-size: 1.3rem; }
.rte__ai-prev h3 { font-size: 1.15rem; }
.rte__ai-prev h4 { font-size: 1rem; }

/* ---------------- Urejanje strani: glava, zavihka območij, stranska vrstica ---------------- */
.page-head__kicker { margin: 0 0 .1rem; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.page-head__titlerow { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.page-head__titlerow h1 { margin: 0; }
.dirty-badge {
  display: inline-flex; align-items: center; padding: .25em .85em; border-radius: 999px;
  background: var(--warning-soft); border: 1px solid var(--warning);
  font-size: .85rem; font-weight: 600;
}

.notice--closable { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.notice--closable p { margin: 0; }
html:not(.js) [data-notice-close] { display: none; }

.pagegrid { display: grid; gap: 1.5rem; align-items: start; margin-top: .5rem; }
/* Kartica objave stoji ob blokih šele od 1180 px naprej; pod tem zdrsne podnje —
   raje cel stolpec kot dva stisnjena (W4, meje širine). */
@media (min-width: 73.75rem) { .pagegrid { grid-template-columns: minmax(0, 1fr) 20.5rem; } }

/* ---------------- Zložena kartica objave (W2) ----------------
   Objava je pri sestavljanju strani redko v rabi: datum se nastavi enkrat, bloki
   pa se prestavljajo ves čas. Zložena vrne blokom 330 px + vrzel. Stanje pripne
   <head> iz localStorage (`scms.side`), da stolpec ob nalaganju ne utripne. */
html.js.admin-side-collapsed .pagegrid { grid-template-columns: minmax(0, 1fr); }
html.js.admin-side-collapsed .pagegrid__side { display: none; }

/* ---------------- Prikaz blokov (W3) ----------------
   Tri branja istega obrazca; izbira je navada dela, ne lastnost vsebine, zato se
   shrani k uporabniku (localStorage `scms.blockview`), ne k strani.
     – privzeto (»Kot na strani«): vsak blok s svojim predogledom, za sestavljanje;
     – »Ozko (besedilo)«: urejevalnik na 45 rem (720 px) — mera vrstice je enaka
       kot na spletišču, zato je pisanje in lektoriranje pošten predogled;
     – »Seznam blokov«: samo glave blokov, brez predogledov, za prestavljanje
       in brisanje pri tridesetih blokih.
   Predogled je `inert` (BlockForm), zato njegovo skritje ničesar ne odvzame
   tipkovnici — polja bloka so v `.blocked__form`, ne v njem. */
html.js[data-blockview="narrow"] [data-areas] { max-width: 45rem; margin-inline: auto; }
html.js[data-blockview="list"] .blocked__preview { display: none; }
/* Pod 900 px predogledov ni v nobenem prikazu: blok, ki je na spletišču širok
   1200 px, v 340 px odprtini ni predogled, ampak karikatura. Urejanje samega
   bloka je tam predal čez ves zaslon (.drawer--block). */
@media (max-width: 56.25em) { html.js .blocked__preview { display: none; } }

.sidecard { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 1.1rem 1.25rem; margin-bottom: 1.25rem; }
.sidecard > h2, .sidecard .sidecard__title { font-size: 1.05rem; font-weight: 800; margin: 0 0 .9rem; padding: 0; }
.sidecard .field:last-child { margin-bottom: 0; }
.sidecard .field--radios { margin: 0; }
.choice {
  display: flex; align-items: center; gap: .6rem;
  border: 1px solid var(--border); border-radius: calc(var(--radius) * .6);
  padding: .55rem .8rem; margin-bottom: .5rem; cursor: pointer; background: var(--surface);
}
.choice:hover { border-color: var(--primary-line); }
.choice:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 7%, var(--surface)); }
.choice input { width: 20px; height: 20px; accent-color: var(--primary); flex: none; }
.charcount { display: block; font-size: .8rem; color: var(--text-muted); margin-top: .25rem; }

.areabar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
html:not(.js) .areabar { display: none; }
/* Preklop prikaza je skupina gumbov z aria-pressed, ne zavihki: vsebina se ne
   zamenja, le njeno branje. Tarče ostanejo 44 px kot povsod. */
.viewswitch { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.viewswitch__label { font-size: .85rem; color: var(--text-muted); }
.viewswitch__group { display: flex; }
.viewswitch .areatab { font-size: .9rem; font-weight: 600; padding: .4em .85em; }
.viewswitch .areatab[aria-pressed="true"] { font-weight: 700; }
.areabar__tabs { display: flex; }
.areatab {
  display: inline-flex; align-items: center; gap: .4em; min-height: 44px; padding: .4em 1.1em;
  border: 2px solid var(--border); background: var(--surface); color: var(--text);
  font: inherit; font-weight: 700; cursor: pointer;
}
.areatab + .areatab { border-inline-start-width: 0; }
.areatab:first-child { border-start-start-radius: 10px; border-end-start-radius: 10px; }
.areatab:last-child { border-start-end-radius: 10px; border-end-end-radius: 10px; }
.areatab[aria-pressed="true"] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.areatab__count { font-weight: 400; }
/* Zavihka območij nadomestita napisa urejevalnikov */
html.js [data-areas] .blocked > legend {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Predali urejevalnika blokov */
.drawer__kicker { margin: 0 0 .15rem; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.drawer__headactions { display: flex; gap: .35rem; flex: none; }
html.js .drawer--block { width: min(42rem, 100vw); }
html:not(.js) .drawer--js { display: none; }
.typecard {
  display: block; width: 100%; text-align: start; font: inherit;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  padding: .9rem 1.1rem; margin-bottom: .75rem; cursor: pointer;
}
.typecard:hover { border-color: var(--primary-line); }
.typecard strong { display: block; color: var(--link); margin-bottom: .1rem; }
.typecard span { display: block; color: var(--text-muted); font-size: .9rem; }

.iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; min-height: 36px;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
  font-size: 1rem;
}
.iconbtn:hover { border-color: var(--primary-line); color: var(--link); }
.iconbtn--danger:hover { border-color: var(--danger); color: var(--danger-text); }

/* ---------------- Uvoz vsebin (čarovnik, naloga T4) ----------------
   Modalno okno <dialog> s 4 koraki; koraka 3 in 4 izriše import.js.
   Brez JavaScripta gumb in čarovnik nista vidna (urejanje deluje ročno). */
html:not(.js) [data-iw-open], html:not(.js) [data-wppages-open], html:not(.js) .importwiz { display: none; }
.areabar__actions { display: flex; gap: .6rem; flex-wrap: wrap; }

.importwiz {
  width: min(54rem, calc(100vw - 2rem));
  max-height: calc(100vh - 3rem);
  padding: 0; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg);
  display: none; flex-direction: column;
}
.importwiz[open] { display: flex; }
.importwiz::backdrop { background: rgba(0, 0, 0, .45); }

.importwiz__head { display: flex; align-items: flex-start; gap: 1rem; padding: 1.25rem 1.5rem .75rem; }
.importwiz__head > div { flex: 1; }
.importwiz__head h2 { margin: 0; font-size: 1.4rem; }
.importwiz__kicker {
  margin: 0 0 .15rem; font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted);
}

/* Koraki kot oštevilčene kapsule */
.iw-steps {
  display: flex; flex-wrap: wrap; gap: .4rem; list-style: none;
  margin: 0; padding: .25rem 1.5rem 1rem; border-bottom: 1px solid var(--border);
}
.iw-step {
  display: inline-flex; align-items: center; gap: .45em;
  padding: .3em .9em; border: 2px solid var(--border); border-radius: 999px;
  font-size: .9rem; font-weight: 600; color: var(--text-muted); background: var(--surface);
}
.iw-step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5em; height: 1.5em; border-radius: 50%;
  background: var(--surface-alt); border: 1px solid var(--border);
  font-size: .85em; font-weight: 700;
}
.iw-step--current { border-color: var(--primary); color: var(--link); }
.iw-step--current .iw-step__num { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.iw-step--done { border-color: var(--success); color: var(--text); background: var(--success-soft); }
.iw-step--done .iw-step__done { font-weight: 700; }

.importwiz__body { padding: 1.25rem 1.5rem; overflow: auto; flex: 1; min-height: 14rem; }
.importwiz__body:focus { outline: none; }
.iw-lead { margin: 0 0 1.1rem; max-width: 60ch; }
.iw-note { margin-block: 1.1rem 0; }
.iw-fieldname { font-weight: 600; margin: 0 0 .3rem; }

.importwiz__foot {
  display: flex; align-items: center; gap: .75rem;
  padding: 1rem 1.5rem; border-top: 1px solid var(--border);
}
.importwiz__foot-end { margin-inline-start: auto; display: flex; align-items: center; gap: .9rem; }

/* Korak 1: kartice virov */
.iw-sources { display: grid; gap: .75rem; }
@media (min-width: 48rem) { .iw-sources { grid-template-columns: repeat(3, 1fr); } }
.iw-source {
  display: flex; gap: .6rem; align-items: flex-start;
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: .85rem 1rem; cursor: pointer; background: var(--surface);
}
.iw-source:hover { border-color: var(--primary-line); }
.iw-source:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 7%, var(--surface)); }
.iw-source:has(input:focus-visible) { outline: 2px solid var(--primary-line); outline-offset: 2px; }
.iw-source input { width: 20px; height: 20px; margin-top: .15rem; accent-color: var(--primary); flex: none; }
.iw-source__body strong { display: block; margin-bottom: .15rem; }
.iw-source__body span { display: block; font-size: .875rem; color: var(--text-muted); }
.iw-source--off { opacity: .65; cursor: not-allowed; }
.iw-source__off { margin-top: .3rem; font-weight: 600; }

/* Korak 2: območje za datoteko, možnosti, privolitev */
.iw-drop {
  border: 2px dashed var(--border); border-radius: var(--radius);
  padding: 1.5rem 1rem; text-align: center; background: var(--surface-alt);
}
.iw-drop--over { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 7%, var(--surface)); }
.iw-drop p { margin: 0 0 .6rem; }
.iw-drop p:last-child { margin-bottom: 0; }
.iw-drop .hint { margin: 0; }

.iw-paste {
  min-height: 10rem; max-height: 18rem; overflow: auto;
  border: 2px solid var(--border); border-radius: calc(var(--radius) * .6);
  background: var(--surface); padding: .7em .9em;
}
.iw-paste:focus-visible { border-color: var(--primary-line); outline: none; }

.iw-opts {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1rem 1.25rem .25rem; margin-top: 1.25rem;
}
.iw-opts legend { font-weight: 700; padding-inline: .35rem; }
.iw-opts .field--checkbox { align-items: flex-start; }
.iw-opts .field--checkbox input { margin-top: .15rem; flex: none; }
.iw-opts .hint { display: block; font-weight: 400; }

.iw-consent { margin-top: 1.25rem; }
.iw-consent .field--checkbox { align-items: flex-start; margin: 0; }
.iw-consent .field--checkbox input { margin-top: .2rem; flex: none; }
.iw-consent .hint { display: block; font-weight: 400; }

/* Korak 3: pregled */
.iw-review-warn ul { margin: .4rem 0 0 1.2rem; padding: 0; }
.iw-review-warn__title { font-weight: 700; margin: 0; }
.iw-review-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 1.25rem 0 .75rem; }
.iw-review-count { margin: 0; font-size: 1.05rem; }
.iw-review-bar__btns { display: flex; gap: .5rem; }
.iw-blocks { list-style: none; margin: 0; padding: 0; }
.iw-block {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); padding: .9rem 1.1rem; margin-bottom: .75rem;
}
.iw-block__head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.iw-block__checkwrap input { width: 20px; height: 20px; accent-color: var(--primary); display: block; }
.iw-block__type { font-weight: 700; color: var(--link); cursor: pointer; }
.iw-badge {
  font-size: .78rem; font-weight: 700; padding: .1em .6em; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-alt); color: var(--text-muted);
  white-space: nowrap;
}
.iw-badge--warn { background: var(--warning-soft); border-color: var(--warning); color: var(--text); }
.iw-block__preview { margin: .35rem 0 0 1.7rem; color: var(--text-muted); font-size: .92rem; overflow-wrap: anywhere; }
.iw-block__warntext { margin: .35rem 0 0 1.7rem; font-size: .875rem; color: var(--text); }
.iw-block__ctl { display: flex; align-items: center; gap: .5rem .75rem; flex-wrap: wrap; margin: .75rem 0 0 1.7rem; }
.iw-block__ctl label { font-size: .875rem; font-weight: 600; }
.iw-block__ctl select {
  min-height: 40px; padding: .3em .6em; font: inherit;
  border: 2px solid var(--border); border-radius: calc(var(--radius) * .6);
  background: var(--surface); color: var(--text);
}
.iw-alt {
  margin: .75rem 0 0 1.7rem; padding: .75rem .9rem;
  border: 1px solid var(--border); border-radius: calc(var(--radius) * .7);
  background: var(--surface-alt);
}
.iw-alt--missing { background: var(--warning-soft); border-color: var(--warning); }
.iw-alt label { display: block; font-weight: 600; margin-bottom: .3rem; }
.iw-alt input[type="text"] {
  width: 100%; min-height: 42px; padding: .4em .7em; font: inherit;
  border: 2px solid var(--border); border-radius: calc(var(--radius) * .6);
  background: var(--surface); color: var(--text);
}
.iw-alt .field--checkbox { margin: .5rem 0 0; }
.iw-alt .field--checkbox input { flex: none; }
.iw-place { max-width: 18rem; margin-top: 1.25rem; }

/* Korak 4: povzetek */
.iw-summary-title { margin: 1.4rem 0 .6rem; font-size: 1.05rem; }
.iw-issue {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  border: 1px solid var(--warning); border-radius: var(--radius);
  background: var(--warning-soft); padding: .7rem 1rem; margin-bottom: .6rem;
}
.iw-issue p { margin: 0; }

/* Vir »Povezano spletišče (WordPress)«: iskanje in izbor objave (korak 2) */
.iw-wp-kind { border: 0; padding: 0; margin: 0 0 1rem; display: flex; gap: 1.25rem; flex-wrap: wrap; align-items: center; }
.iw-wp-kind legend { float: left; width: 100%; font-weight: 700; margin-bottom: .35rem; }
.iw-wp-kind .field { margin: 0; }
.iw-wp-search { display: flex; gap: .75rem; align-items: flex-end; flex-wrap: wrap; }
.iw-wp-search .field { flex: 1 1 18rem; margin: 0; }
.iw-wp-search .field:last-child { flex: none; }
.iw-wp-count { margin: 1.25rem 0 .6rem; font-size: 1.05rem; }
.iw-wp-list { list-style: none; margin: 0; padding: 0; }
.iw-wp-item {
  display: flex; gap: .75rem; align-items: flex-start;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); padding: .8rem 1rem; margin-bottom: .6rem;
}
.iw-wp-item:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 7%, var(--surface)); }
.iw-wp-item:has(input:focus-visible) { outline: 2px solid var(--primary-line); outline-offset: 2px; }
.iw-wp-item input { width: 20px; height: 20px; margin-top: .2rem; accent-color: var(--primary); flex: none; }
.iw-wp-item__body { display: block; min-width: 0; }
.iw-wp-item__title { display: block; font-weight: 700; color: var(--link); cursor: pointer; }
.iw-wp-item__marks { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .35rem; }
.iw-wp-item__excerpt,
.iw-wp-item__link { display: block; margin-top: .3rem; font-size: .875rem; color: var(--text-muted); overflow-wrap: anywhere; }
.iw-wp-pager { display: flex; gap: .5rem; margin-top: .9rem; }

/* Korak 3: predlog podatkov objave (naslov, slug, stari URL …) */
.iw-meta {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1rem 1.25rem .5rem; margin: 0 0 1.25rem;
}
.iw-meta legend { font-weight: 700; padding-inline: .35rem; }
.iw-meta__row { align-items: flex-start; }
.iw-meta__row input { margin-top: .2rem; flex: none; }
.iw-meta .hint { display: block; font-weight: 400; }
.iw-meta__value { overflow-wrap: anywhere; }
.iw-meta__warn { color: var(--text); font-weight: 600; }

/* Uvoz iz knjižnice medijev povezanega spletišča (razdelka Slike in Datoteke) */
.wpm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
@media (min-width: 52rem) { .wpm-list { grid-template-columns: repeat(2, 1fr); } }
.wpm-item {
  display: flex; gap: .75rem; align-items: flex-start;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); padding: .8rem 1rem;
}
.wpm-item:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 7%, var(--surface)); }
.wpm-item:has(input:focus-visible) { outline: 2px solid var(--primary-line); outline-offset: 2px; }
.wpm-item input { width: 20px; height: 20px; margin-top: .2rem; accent-color: var(--primary); flex: none; }
.wpm-item__thumb {
  width: 72px; height: 72px; object-fit: cover; flex: none;
  background: var(--surface-alt); border-radius: calc(var(--radius) * .6);
}
.wpm-item__body { display: block; min-width: 0; }
.wpm-item__title { display: block; font-weight: 700; color: var(--link); cursor: pointer; overflow-wrap: anywhere; }
.wpm-item__marks { display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .35rem; }
.wpm-item__meta { display: block; margin-top: .3rem; font-size: .875rem; color: var(--text-muted); overflow-wrap: anywhere; }

/* ---------------- Mediji ---------------- */
.media-grid { display: grid; gap: 1rem; list-style: none; margin: 1.5rem 0; padding: 0; }
@media (min-width: 40rem) { .media-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .media-grid { grid-template-columns: repeat(3, 1fr); } }
.media-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; }
.media-item img { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: var(--surface-alt); border-radius: calc(var(--radius) * .6); }
.media-item__ext { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; background: var(--surface-alt); border-radius: calc(var(--radius) * .6); font-weight: 800; font-size: 1.5rem; color: var(--text-muted); }
.media-item__name { font-weight: 600; margin: .6rem 0 .4rem; word-break: break-all; }
.media-item .field { display: flex; gap: .4rem; }
.media-item .field input { flex: 1; min-width: 0; font-size: .85rem; }

/* ---------------- Prijava ---------------- */
.admin--login { display: grid; place-items: center; min-height: 100vh; }
.login-box {
  width: min(26rem, 92vw);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 2rem;
}
.login-box h1 { font-size: 1.5rem; }
.login-box .btn { width: 100%; justify-content: center; }
/* Namestitveni čarovnik: več polj, zato širši okvir; gumba en pod drugim. */
.login-box--wide { width: min(40rem, 92vw); }
.login-box form > h2 { font-size: 1.15rem; margin: 1.75rem 0 .75rem; }
/* Dolge poti (datoteka SQLite, mapa kopij) se lomijo, sicer na ozkem zaslonu raztegnejo stran. */
.dbform code, .login-box code, .login-box pre { overflow-wrap: anywhere; white-space: pre-wrap; }
.install-actions { display: flex; flex-direction: column; gap: .6rem; margin-top: 1.5rem; }

/* ---------------- Spletišče v pripravi (templates/site-gate.php) ----------------
   Vstopna stran nejavne namestitve: glava z dvema potema (predogled, uredništvo), pristajalni
   blok ali kartica z obrazcem, noga. Načrt: designs/neobjavljeno/README.md. Vse barve so žetoni. */
.gate { margin: 0; min-height: 100vh; display: grid; grid-template-rows: auto 1fr auto; background: var(--bg); color: var(--text); }
.gate__header {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .75rem 1.5rem; padding: .75rem clamp(1rem, 4vw, 2.5rem);
}
.gate__site { font-weight: 700; font-size: 1.05rem; }
.gate__nav { display: flex; flex-wrap: wrap; gap: .5rem; }
.gate__navlink {
  display: inline-flex; align-items: center; gap: .45em; min-height: 44px; padding: .4em .9em;
  font-weight: 600; font-size: .95rem; color: var(--link); text-decoration: none;
  background: transparent; border: 2px solid transparent; border-radius: calc(var(--radius) * .8);
}
.gate__navlink .icon { inline-size: 18px; block-size: 18px; vertical-align: 0; }
.gate__navlink:hover { color: var(--link-hover); background: var(--primary-soft); }
.gate__navlink[aria-current="page"] { background: var(--primary-soft); border-color: var(--primary-line); }
.gate__main { display: grid; place-items: center; padding: 2rem clamp(1rem, 4vw, 2.5rem) 3rem; }
.gate__main h1 { line-height: var(--lh-heading); }
.gate__landing { max-width: 40rem; text-align: center; display: grid; justify-items: center; gap: 1rem; }
.gate__landing h1 { margin: .25rem 0 0; font-size: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); text-wrap: balance; }
.gate__landing p { margin: 0; }
.gate__badge {
  display: grid; place-items: center; inline-size: 72px; block-size: 72px; border-radius: 50%;
  background: var(--primary-soft); color: var(--primary);
}
.gate__badge .icon { inline-size: 36px; block-size: 36px; }
.gate__lead { font-size: 1.2rem; text-wrap: pretty; }
.gate__muted { color: var(--text-muted); text-wrap: pretty; }
.gate__card {
  inline-size: 100%; max-inline-size: 26rem; box-sizing: border-box;
  background: var(--surface); border: var(--surface-border-w, 1px) solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.75rem 1.75rem 1.5rem;
}
.gate__back { display: inline-flex; align-items: center; gap: .4em; min-height: 36px; margin-bottom: .75rem; font-size: .95rem; text-underline-offset: .2em; }
.gate__card h1 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .4rem; font-size: 1.5rem; }
.gate__card h1 .icon { color: var(--primary); inline-size: 24px; block-size: 24px; }
/* Fokus na naslov postavi sidro #gate-h (bralnik začne pri naslovu); ni cilj za tipkovnico. */
#gate-h:focus { outline: none; box-shadow: none; }
.gate__card > .gate__muted { margin: 0 0 1.25rem; }
.gate__hint {
  margin: 1.25rem 0 0; padding-top: 1rem; border-top: var(--divider-w, 1px) solid var(--surface-mute);
  font-size: .9rem; color: var(--text-muted); text-wrap: pretty;
}
.gate__footer {
  padding: 1.1rem 1rem; text-align: center; border-top: var(--divider-w, 1px) solid var(--surface-mute);
  font-size: .9rem; color: var(--text-muted);
}

/* ---------------- Napaka ob polju uredniških obrazcev ----------------
   Isti vzorec kot .blockform__field--error v main.css (A11Y-Forms-Error-Handling-Standard.md
   §12): rob in odmik segata v levi žleb, besedilo polja ostane na mestu; debelino črte določa
   žeton --form-error-line-w (theme.css). Rezervi veljata za namestitev, ki teme še nima. */
.field--error {
  margin-inline-start: calc(-1 * (var(--form-error-line-w, 4px) + .5rem));
  border-inline-start: var(--form-error-line-w, 4px) solid var(--danger); padding-inline-start: .5rem;
}
.field--error input:not([type="radio"]):not([type="checkbox"]), .field--error select, .field--error textarea {
  border-color: var(--danger); border-width: 2px;
}
.field__err { display: block; margin-top: .3rem; color: var(--danger-text, var(--danger)); font-size: .95rem; }

/* ---------------- Podatki o bazi (_db-fields.php) ----------------
   Polja strežnika so pri SQLite skrita brez JavaScripta; brskalnik brez :has() pokaže vse. */
.choice--block { align-items: flex-start; }
.choice--block input { margin-top: .15rem; }
.choice--block .hint { display: block; }
.dbform__server { border: 1px solid var(--border); border-radius: var(--radius); padding: .5rem 1.1rem 0; margin: 0 0 1rem; min-inline-size: 0; }
.dbform__server legend { font-weight: 600; padding: 0 .3rem; }
.dbform__server > .hint { margin: 0 0 .9rem; }
.dbform__row { display: flex; flex-wrap: wrap; gap: 0 1rem; }
.dbform__host { flex: 1 1 14rem; }
.dbform__port { flex: 0 1 8rem; }
.dbform:has(input[name="db_driver"][value="sqlite"]:checked) .dbform__server { display: none; }
.dbform:not(:has(input[name="db_driver"][value="sqlite"]:checked)) .dbform__sqlite { display: none; }

/* ---------------- Videz: barvni žetoni ---------------- */
.a-tabs ul { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; margin: 1rem 0 1.5rem; padding: 0; }
.a-tabs a {
  display: inline-flex; align-items: center; min-height: 44px; padding: .35em 1.1em;
  border: 2px solid var(--border); border-radius: 999px;
  text-decoration: none; color: var(--text); font-weight: 700; background: var(--surface);
}
.a-tabs a:hover { border-color: var(--primary-line); }
.a-tabs a[aria-current] { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }

.hint--lead { font-size: 1rem; max-width: 62ch; margin-bottom: 1.25rem; }

.appearance__cols { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 78rem) { .appearance__cols { grid-template-columns: 3fr 2fr; } }
/* Lepljiv stolpec se ustavi POD lepljivo glavo, ne pod robom okna: brez odmika bi
   mu glava (z-index 45) pokrila vrh. Rezerva velja, dokler admin.js ne izmeri. */
@media (min-width: 78rem) { .appearance__report, .appearance__side { position: sticky; top: calc(var(--header-h, 8rem) + 1rem); } }
.appearance__side { display: grid; gap: 1.5rem; align-content: start; }

.appearance__report {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); padding: 1.25rem;
}
.appearance__report h2 { font-size: 1.15rem; }
.report__summary { margin-bottom: 1rem; }
.report__pair { display: block; font-weight: 400; font-size: .8rem; color: var(--text-muted); }
.table--compact th, .table--compact td { padding: .4rem .6rem; font-size: .9rem; vertical-align: top; }
.table--compact td { white-space: nowrap; }

.badge {
  display: inline-block; font-size: .78rem; font-weight: 700;
  padding: .1em .6em; border-radius: 999px; border: 1px solid transparent;
  white-space: nowrap; color: var(--text);
}
.badge--ok { background: var(--success-soft); border-color: var(--success); }
.badge--bad { background: var(--danger-soft); border-color: var(--danger); }

.token { display: flex; gap: .9rem; padding: .9rem 0; border-top: 1px solid var(--border); }
.token:first-of-type { border-top: 0; }
.token--error { border-inline-start: 4px solid var(--danger); padding-inline-start: .6rem; }
.token__swatch {
  flex: none; width: 2.75rem; height: 2.75rem; border-radius: calc(var(--radius) * .6);
  border: 1px solid var(--border);
}
.token__main { flex: 1; min-width: 0; }
.token__label { display: block; font-weight: 700; margin-bottom: .15rem; }
.token__kind {
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-muted); margin-inline-start: .4rem;
}
.token__usage { font-size: .875rem; color: var(--text-muted); margin: 0 0 .45rem; max-width: 60ch; }
.token__from { display: block; }
.token__row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.token__hex {
  width: 9rem; min-height: 44px; padding: .35em .6em;
  background: var(--surface); color: var(--text);
  border: 2px solid var(--border); border-radius: calc(var(--radius) * .6);
}
.token__picker {
  width: 3rem; min-height: 44px; padding: .2em;
  border: 2px solid var(--border); border-radius: calc(var(--radius) * .6); background: var(--surface);
}
.token__value { font-size: .8rem; color: var(--text-muted); }
.token__error { font-size: .875rem; color: var(--danger-text); margin: .35rem 0 0; }
/* ---------------- Videz: zavihki, polja sloga, živi predogled ----------------
   Brez JavaScripta: zavihki so skriti, vsi razdelki vidni drug pod drugim,
   predogled je statičen (strežniško izračunan), poročilo je razdelek na dnu. */

/* Preklop sheme (svetla/temna) kot zlepljen par gumbov */
.a-seg { display: inline-flex; }
.a-seg a {
  display: inline-flex; align-items: center; min-height: 44px; padding: .35em 1.1em;
  border: 2px solid var(--border); background: var(--surface); color: var(--text);
  font-weight: 700; text-decoration: none;
}
.a-seg a + a { border-inline-start-width: 0; }
.a-seg a:first-child { border-start-start-radius: 10px; border-end-start-radius: 10px; }
.a-seg a:last-child { border-start-end-radius: 10px; border-end-end-radius: 10px; }
.a-seg a:hover { color: var(--link-hover); background: var(--primary-soft); }
.a-seg a[aria-current] { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }

/* Zavihki razdelkov */
.vtabs { display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 2px solid var(--border-strong); margin: 1.25rem 0 1.5rem; }
.vtabs button {
  min-height: 44px; padding: .5em 1.1em;
  background: none; border: 0; border-bottom: 4px solid transparent; margin-bottom: -2px;
  font: inherit; font-weight: 700; color: var(--text-muted); cursor: pointer;
  border-radius: 8px 8px 0 0;
}
.vtabs button:hover { color: var(--link-hover); background: var(--primary-soft); }
.vtabs button[aria-pressed="true"] { color: var(--link); border-bottom-color: var(--primary-line); }
html:not(.js) .vtabs { display: none; }

/* Polje sloga: oznaka + namig levo, kontrolnik desno */
.vfield { display: grid; gap: .35rem 1.5rem; padding: .9rem 0; border-top: 1px solid var(--border); }
.vfield:first-of-type { border-top: 0; }
@media (min-width: 48rem) {
  .vfield { grid-template-columns: minmax(0, 1fr) minmax(17rem, auto); align-items: center; }
}
.vfield__name { display: block; font-weight: 700; margin-bottom: .1rem; }
.vfield__label .hint { margin: 0; }
.vfield__ctl { display: flex; align-items: center; gap: .75rem; justify-content: flex-end; flex-wrap: wrap; }
.vfield__ctl input[type="range"] { flex: 1; min-width: 9rem; max-width: 15rem; min-height: 44px; accent-color: var(--primary); }
.vfield__out { min-width: 6.5rem; text-align: end; color: var(--text); }
.vfield__ctl select {
  min-height: 44px; padding: .4em .7em; font: inherit; min-width: 17rem;
  border: 2px solid var(--border); border-radius: calc(var(--radius) * .6);
  background: var(--surface); color: var(--text);
}
.vfield__check { display: inline-flex; align-items: center; gap: .6rem; font-weight: 600; min-height: 44px; cursor: pointer; }
.vfield__check input { width: 22px; height: 22px; accent-color: var(--primary); }

/* Stikalo za prikaz izpeljanih barv */
.derived-toggle { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1rem; margin: 0 0 1.25rem; }
.derived-toggle label { display: inline-flex; align-items: center; gap: .6rem; font-weight: 600; min-height: 44px; cursor: pointer; }
.derived-toggle input { width: 22px; height: 22px; accent-color: var(--primary); }
.derived-toggle .hint { margin: 0; }
html.js .appearance:not([data-derived="1"]) .token--derived,
html.js .appearance:not([data-derived="1"]) .fieldset--derived { display: none; }
html:not(.js) .derived-toggle { display: none; }

/* Živi predogled (vizualni dvojnik nastavitev; vrednosti nosi inline slog) */
.vprev-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: .9rem; }
.vprev-card__head h2 { margin: 0; font-size: 1.15rem; }
.vprev-card__meta { margin: 0; font-size: .8rem; color: var(--text-muted); }
.sidecard__actions { margin: 0; }

.vprev {
  background: var(--bg); color: var(--text);
  font-family: var(--font-body, var(--font)); font-size: var(--fs-base, 1.0625rem);
  line-height: var(--lh, 1.6); letter-spacing: var(--ls-body, normal); word-spacing: var(--ws-body, normal);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: calc(1.4rem * var(--space, 1));
}
.vprev__kicker {
  margin: 0 0 .5em; font-size: .78em; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--accent-text);
}
.vprev__h1, .vprev__h2 {
  font-family: var(--font-heading, inherit); letter-spacing: var(--ls-heading, normal);
  line-height: var(--lh-heading, 1.25); text-wrap: balance;
}
.vprev__h1 { margin: 0 0 .45em; font-size: var(--h1-size); font-weight: var(--heading-w, 800); }
.vprev__h2 {
  margin: 1em 0 .45em; font-size: var(--h2-size); font-weight: var(--heading-w2, 700);
  padding-bottom: var(--h2-accent-pad, 0px);
  background: linear-gradient(var(--heading-line, transparent), var(--heading-line, transparent))
    bottom left / var(--h2-accent-len, 0px) var(--h2-accent-w, 0px) no-repeat;
}
.vprev__p { margin: 0 0 var(--p-space, 1em); }
.vprev__a { color: var(--link); text-decoration: var(--prose-underline, underline); }
.vprev__a:hover { color: var(--link-hover); text-decoration: underline; }
.vprev__hr { border: 0; border-top: var(--divider-w, 1px) solid var(--border-strong); margin: 1.1em 0; }
.vprev__btns { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.1em; }
.vprev__notice {
  padding: .7em 1em; margin-bottom: 1.1em;
  /* Kot .notice--info na javni strani: podlaga sledi nastavitvi »Podlaga obvestil«. */
  background: var(--notice-bg, var(--info-soft)); border: 1px solid var(--info);
  border-inline-start: 4px solid var(--info); border-radius: var(--radius);
}
.vprev__notice .notice__intro { color: var(--info-text); }
.vprev__notice:has(.notice__intro--label .notice__icon) { padding-inline-start: calc(1em + 1.85em); }
.vprev__notice:has(.notice__intro--label .notice__icon) .notice__intro--label { margin-inline-start: -1.85em; }
.vprev__tile {
  background: var(--surface); border: var(--surface-border-w, 1px) solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: calc(1.1rem * var(--space, 1));
}
.vprev__tile-title {
  margin: 0 0 .3em; font-family: var(--font-heading, inherit);
  font-size: var(--h4-size, 1.1rem); font-weight: var(--heading-w2, 700); color: var(--link);
}
.vprev__tile-text { margin: 0; color: var(--text-muted); font-size: .92em; }

/* Predal s poročilom o kontrastih */
html.js .drawer--report { width: min(46rem, 100vw); }

/* Predal s predogledom pisav na daljšem besedilu */
html.js .drawer--fontprev { width: min(52rem, 100vw); }
.drawer__body--fontprev { background: var(--surface-alt); }
.vpanel__actions { margin: 0 0 1.25rem; }

/* Dokumentni predogled: pravo daljše besedilo z vizualnimi naslovi H1–H3, odstavki,
   povezavami in gumboma — vse iz živih žetonov (inline slog na .vprev). Vizualni
   naslovi so slogovani odstavki (.vprev__h1–h3); selektor .vprev .vprev__hN ima
   prednost pred robom .vprev--doc p. */
.vprev--doc { max-width: var(--prose-maxw, 70ch); margin-inline: auto; }
.vprev--doc p { margin: 0 0 var(--p-space, 1em); }
.vprev .vprev__h3 {
  font-family: var(--font-heading, inherit);
  letter-spacing: var(--ls-heading, normal);
  line-height: var(--lh-heading, 1.25);
  text-wrap: balance;
  font-size: var(--h3-size, 1.25rem); font-weight: var(--heading-w2, 700);
}
.vprev .vprev__h1 { margin: 0 0 .45em; }
.vprev .vprev__h2 { margin: 1.2em 0 .45em; }
.vprev .vprev__h3 { margin: 1.1em 0 .4em; }
.vprev--doc .vprev__btns { margin: 1.2em 0 0; }

/* ---------------------------------------------------------------- Stanje objave

   Izračunano stanje (Visibility::state()) je v seznamih in v kartici Objava. Barve
   nosijo žetoni obvestil: načrtovana in potekla sta informativni oziroma opozorilni,
   objavljena je »v redu«, umaknjena je opozorilo, koš je nevtralen.
   Oznaka nikoli ne stoji sama — ob njej je pojasnilo z datumom in uro, ker urednik
   iz same besede »Potekla« ne izve, kdaj se je to zgodilo.                        */

.state {
  display: inline-block; font-size: .8rem; font-weight: 700;
  padding: .15em .6em; border-radius: 999px;
  border: 1px solid transparent; color: var(--text); white-space: nowrap;
}
.state--draft     { background: var(--surface-alt); color: var(--text-muted); border-color: var(--border); }
.state--scheduled { background: var(--info-soft); border-color: var(--info); }
.state--published { background: var(--success-soft); border-color: var(--success); }
.state--expired   { background: var(--warning-soft); border-color: var(--warning); }
.state--withdrawn { background: var(--danger-soft); border-color: var(--danger); }
.state--trashed   { background: var(--surface-mute); color: var(--text-muted); border-color: var(--border); }
.state__detail { display: block; font-size: .8rem; color: var(--text-muted); margin-top: .2rem; }

/* Kartica Objava */
.pubstate { margin: 0 0 1rem; }
.pubstate__detail { display: block; font-size: .875rem; color: var(--text-muted); margin-top: .3rem; }
.field--times { border: 0; padding: 0; margin: 0 0 1rem; }
.field--times .sidecard__title { margin-bottom: .5rem; }
/* Skupine pod izbiro »Izbrane skupine« na kartici Objava → Dostop. */
.field--indent { margin: .2rem 0 .5rem 1.7rem; }
.pubactions { display: flex; flex-wrap: wrap; gap: .5rem; }
.pubactions .btn { flex: 0 0 auto; }
.pubactions__preview { margin: .9rem 0 0; font-size: .9rem; }

/* Filter po stanju nad seznamom */
.statefilter { margin: 1.25rem 0 .75rem; }
.statefilter ul { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.statefilter a {
  display: inline-block; padding: .35em .8em; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface);
  text-decoration: none; font-size: .9rem; min-height: 36px; line-height: 1.6;
}
.statefilter a:hover { background: var(--surface-alt); }
.statefilter a[aria-current] { background: var(--primary); color: var(--on-primary); border-color: var(--primary); font-weight: 700; }
/* Števec je zapisan tanjše in ne bledeje — glejte pravilo o `opacity` na vrhu
   datoteke. Pilula je enkrat --surface in enkrat --primary, zato barve tu ne
   nastavljamo: podeduje jo od pilule, kjer je oba para poročilo že izmerilo. */
.statefilter__n { color: inherit; font-weight: 400; }
.statefilter__trash { margin-inline-start: auto; }

/* ---------------- Sistem in baza (preverba baze, nadgradnje, kopije) ----------------
   Ugotovitev je pilula stanja in besedilo: pilula pove resnost, ki jo je mogoče
   preleteti, besedilo pod njo pa razlaga, kaj to pomeni. Barva ni edini nosilec
   pomena — beseda v pilulli je zapisana. */
.status--err  { background: var(--danger-soft); border-color: var(--danger); }
.status--warn { background: var(--warning-soft); border-color: var(--warning); }
.status--info { background: var(--info-soft); border-color: var(--info); }
.status--ok   { background: var(--success-soft); border-color: var(--success); }

.sysactions { display: flex; flex-wrap: wrap; gap: .75rem; padding: 1.1rem 1.25rem .25rem; }
.sysactions form { margin: 0; }
.sysactions__hint { padding: 0 1.25rem 1.1rem; max-width: 76ch; }
/* Kartica z obrazcem ali poročilom (Sistem → Selitev baze). */
.admincard__body { padding: 1.1rem 1.25rem; }
.admincard__body > :last-child { margin-bottom: 0; }
.admincard__body > .hint:first-child { margin: 0 0 1.1rem; }
.admincard__body h3 { font-size: 1.05rem; margin: 1.5rem 0 .5rem; }
.sysactions--flush { padding: 0; margin-top: 1.25rem; }
.sysbody { padding: 1.1rem 1.25rem; }
.sysbody > .hint:first-child { margin-top: 0; }

.checks { list-style: none; margin: .75rem 0 0; padding: 0; }
.checks:first-child { margin-top: 0; }
.check { display: flex; gap: .85rem; padding: .7rem 0; border-top: 1px solid var(--border); }
.check:first-child { border-top: 0; padding-top: 0; }
.check > .status { flex: none; align-self: start; }
.check > div { flex: 1; min-width: 0; }
.check__text { margin: 0; overflow-wrap: anywhere; }
.check__text + .hint { margin-top: .2rem; max-width: 80ch; }
.check__steps { margin: .3rem 0 0; padding-inline-start: 1.2rem; font-size: .9rem; color: var(--text-muted); }

/* ================================================================
   Medijska knjižnica — slike (A11Y-SCMS-slike.md)
   Maske M1–M5: knjižnica, dodajanje, urejanje, izbirnik, vstavljanje.
   Stanje dostopnosti je vedno tudi besedno — barva je le dodatek (SC 1.4.1).
   ================================================================ */

.btn--ghost { background: transparent; border-color: transparent; color: var(--link); }
.btn--ghost:hover { background: var(--surface-alt); color: var(--link-hover); }

.empty { padding: 1.5rem; background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius); }

/* ---------------- M1: filtri in mreža ---------------- */
.imgfilter {
  display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: flex-end;
  padding: 1rem 1.1rem; margin-block: 1.25rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.imgfilter .field { margin: 0; }
.imgfilter .field:first-child { flex: 1 1 18rem; }
.imgfilter__go { display: flex; gap: .5rem; align-items: center; margin: 0; }

.imggrid { display: grid; gap: 1rem; list-style: none; margin: 0 0 1.5rem; padding: 0; }
@media (min-width: 40rem) { .imggrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) { .imggrid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 80rem) { .imggrid { grid-template-columns: repeat(4, 1fr); } }

.imgcard {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden;
}
.imgcard--bad { border-color: var(--danger); }
.imgcard--warn { border-color: var(--warning); }
.imgcard__link { display: block; text-decoration: none; color: inherit; }
.imgcard__link:hover .imgcard__name { text-decoration: underline; color: var(--link-hover); }
.imgcard__thumb {
  display: grid; place-items: center; aspect-ratio: 4 / 3;
  background: var(--surface-alt); overflow: hidden;
}
.imgcard__thumb img { width: 100%; height: 100%; object-fit: contain; }
.imgcard__gone { font-size: .85rem; color: var(--danger-text); padding: .5rem; text-align: center; }
.imgcard__name { display: block; padding: .7rem .85rem .1rem; font-weight: 700; color: var(--link); }
.imgcard__meta { margin: 0; padding: .1rem .85rem .4rem; font-size: .82rem; color: var(--text-muted); }

.imgstate { list-style: none; margin: 0; padding: 0 .85rem .8rem; display: flex; flex-direction: column; gap: .1rem; }
.imgstate__i { font-size: .82rem; }
.imgstate__i--ok { color: var(--success-text); }
.imgstate__i--warn { color: var(--warning-text); }
.imgstate__i--bad { color: var(--danger-text); }

.pager ul { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; margin: 0 0 1.5rem; padding: 0; justify-content: center; }
.pager a, .pager__cur {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px; padding-inline: .6rem;
  border: 1px solid var(--border); border-radius: calc(var(--radius) * .6);
  background: var(--surface); text-decoration: none; font-weight: 600;
}
.pager a:hover { border-color: var(--primary-line); }
.pager__cur { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }

/* ---------------- M2 / M3: polja slike ---------------- */
html.js .drawer--wide { width: min(44rem, 100vw); }
.dropzone {
  padding: 1rem 1.1rem; margin-bottom: 1.25rem;
  background: var(--surface-alt); border: 2px dashed var(--border); border-radius: var(--radius);
}
.dropzone .field { margin: 0; }

fieldset.imgfields { border: 1px solid var(--border); border-radius: var(--radius); padding: .5rem 1.1rem 0; margin-bottom: 1.25rem; }
fieldset.imgfields > legend { font-weight: 800; padding-inline: .4rem; }
details.imgfields { border: 1px solid var(--border); border-radius: var(--radius); padding: 0 1.1rem; margin-bottom: 1.25rem; background: var(--surface); }
details.imgfields > summary { list-style: none; display: flex; align-items: center; gap: .5rem; min-height: 44px; font-weight: 700; cursor: pointer; }
details.imgfields > summary::-webkit-details-marker { display: none; }
details.imgfields > summary::before {
  content: "\25B8"; flex: none; display: inline-block;
  color: var(--text-muted); transition: transform .15s;
}
details.imgfields[open] > summary::before { transform: rotate(90deg); }
.imgfields__in { padding-top: .5rem; }

.subfold { border: 1px solid var(--border); border-radius: calc(var(--radius) * .7); padding: 0 .9rem; margin-bottom: 1rem; }
.subfold > summary { display: flex; align-items: center; min-height: 44px; font-weight: 600; cursor: pointer; }
.subfold .field:last-child { margin-bottom: .75rem; }

.field__labelrow { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.field__labelrow label { flex: 1 1 auto; margin-bottom: .3rem; }
.field__labelrow .ai-alt-btn { flex: none; margin-inline-start: auto; }
.field__labelrow .short-ai { display: contents; }
.field__labelrow .short-ai > .btn { flex: none; margin-inline-start: auto; }
.field__labelrow .aisuggest { flex: 1 0 100%; }
.menu-translations { margin: .75rem 0 1rem; }
.menu-translations__button {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 24px;
  padding: 0; border: 0; background: transparent; color: var(--text); cursor: pointer; font-weight: 700;
}
.menu-translations__icon {
  display: inline-grid; place-items: center; width: 1.1rem; height: 1.1rem;
  border: 1.5px solid currentColor; border-radius: 50%; font-size: .72rem; line-height: 1;
}
.menu-translations__icon::before { content: 'v'; }
.menu-translations__button[aria-expanded="true"] .menu-translations__icon::before { content: '^'; }
.menu-translations__button:hover { color: var(--link); text-decoration: underline; }
.menu-translations__button:focus-visible { outline: var(--focus-w, 3px) solid var(--focus-outer); outline-offset: 2px; }
.menu-translations__content { margin-top: .75rem; }
.field textarea { width: 100%; }
.field--off { opacity: .55; }

/* Zavihki podatkov o sliki (brez JS so vsi razdelki vidni drug pod drugim) */
.mtabs { display: flex; flex-wrap: wrap; gap: .25rem; padding: .25rem; margin-bottom: 1.25rem;
         background: var(--surface-alt); border-radius: calc(var(--radius) * .8); width: fit-content; }
html:not(.js) .mtabs { display: none; }
.mtab {
  min-height: 44px; padding: .3em 1.1em; border: 0; border-radius: calc(var(--radius) * .6);
  background: transparent; color: var(--text); font: inherit; font-weight: 600; cursor: pointer;
}
.mtab:hover { background: var(--surface); }
.mtab[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); font-weight: 700; }
.mpanel { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); padding: 1.1rem 1.25rem .25rem; }
.mpanel__title { margin: 0 0 1rem; font-size: 1.1rem; }

/* Predlog AI */
.aisuggest {
  padding: .9rem 1rem; margin-bottom: 1.25rem;
  background: var(--info-soft); border: 1px solid var(--info); border-radius: calc(var(--radius) * .8);
}
.aisuggest--error { background: var(--danger-soft); border-color: var(--danger); }
.aisuggest__title, .aisuggest__label { margin: 0 0 .35rem; font-weight: 700; }
.aisuggest__label { font-size: .9rem; }
.aisuggest__text { margin: 0 0 .75rem; }
.aisuggest__long { border-top: 1px solid var(--border); padding-top: .6rem; margin-bottom: .5rem; }
.aisuggest__ctl { display: flex; gap: .5rem; flex-wrap: wrap; }

/* Goriščna točka */
.focal { border: 1px solid var(--border); border-radius: calc(var(--radius) * .7); padding: .5rem 1rem 0; margin-bottom: 1rem; }
.focal > legend { font-weight: 600; padding-inline: .4rem; }
.focal__row { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-start; }
.focal__pick {
  position: relative; flex: none; width: 14rem; max-width: 100%; padding: 0;
  border: 1px solid var(--border); border-radius: calc(var(--radius) * .6);
  background: var(--surface-alt); cursor: crosshair; overflow: hidden;
}
.focal__pick img { display: block; width: 100%; height: auto; }
.focal__dot {
  position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px;
  border: 2px solid var(--primary); border-radius: 50%;
  background: color-mix(in srgb, var(--primary) 18%, transparent); pointer-events: none;
}
.focal__nums { display: flex; gap: .75rem; flex-wrap: wrap; }
.focal__nums .field { margin-bottom: .75rem; }
.focal__nums input { width: 6rem; }

.techbox { padding: .8rem 1rem; margin-bottom: 1rem; background: var(--surface-alt); border: 1px solid var(--border); border-radius: calc(var(--radius) * .7); }
.techbox__title { margin: 0 0 .35rem; font-weight: 700; }
.techbox p { margin: 0 0 .2rem; overflow-wrap: anywhere; }

/* Stranska vrstica pri urejanju slike */
.sidecard--preview { padding: 0; overflow: hidden; }
.preview__img { display: block; width: 100%; max-height: 18rem; object-fit: contain; background: var(--surface-alt); }
.preview__gone { margin: 0; padding: 2rem 1rem; text-align: center; color: var(--danger-text); }
.preview__meta { margin: 0; padding: .6rem 1rem; border-top: 1px solid var(--border); color: var(--text-muted); }
.preview__path { display: flex; gap: .4rem; padding: 0 1rem 1rem; margin: 0; }
.preview__path input { flex: 1; min-width: 0; font-size: .85rem; }

.qlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.qlist__text { margin: 0; font-weight: 600; }
.qlist__i--ok .qlist__text { color: var(--success-text); font-weight: 400; }
.qlist__i--warn .qlist__text { color: var(--warning-text); }
.qlist__i--bad .qlist__text { color: var(--danger-text); }
.qlist__hint { margin: .1rem 0 0; font-size: .85rem; color: var(--text-muted); }

.uselist { list-style: none; margin: 0 0 .75rem; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
.uselist__where { display: block; font-size: .85rem; color: var(--text-muted); }

.danger { border: 1px solid var(--danger); border-radius: var(--radius); padding: 0 1.1rem; margin-top: 1.5rem; background: var(--surface); }
.danger > summary { display: flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--danger-text); cursor: pointer; }
.danger .notice { margin-top: 0; }
.danger form { padding-bottom: 1rem; }

/* ---------------- Polje s sliko + gumb »Izberi sliko« ---------------- */
.mediafield { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.mediafield > input[type="text"] { flex: 1 1 12rem; min-width: 0; }
.mediafield__thumb {
  width: 44px; height: 44px; flex: none; object-fit: cover;
  border: 1px solid var(--border); border-radius: calc(var(--radius) * .5); background: var(--surface-alt);
}
.mediafield__pick { flex: none; }
/* Izid izbire iz knjižnice multimedije (kaj je izbirnik prevzel v sosednja
   polja). Prazno območje ne sme jemati prostora, obstajati pa mora že prej —
   sporočilo, ki se vrine v novo skrito območje, bralnik zaslona ne napove.
   žrta ob robu ga loči od namiga polja, ki stoji tik pod njim. */
.mediafield__note:empty { display: none; }
.mediafield__note {
  border-inline-start: 3px solid var(--info); padding-inline-start: .6rem; margin-top: .4rem;
}

/* ---------------- M4 + M5: okno za izbiro slike ---------------- */
.imgpick {
  width: min(60rem, calc(100vw - 2rem)); max-height: calc(100vh - 3rem);
  padding: 0; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); color: var(--text); box-shadow: var(--shadow-lg);
  display: none; flex-direction: column;
}
.imgpick[open] { display: flex; }
.imgpick::backdrop { background: rgba(0, 0, 0, .45); }
html:not(.js) .imgpick { display: none; }

.imgpick__head { display: flex; align-items: flex-start; gap: 1rem; padding: 1.25rem 1.5rem .75rem; border-bottom: 1px solid var(--border); }
.imgpick__head > div { flex: 1; }
.imgpick__head h2 { margin: 0; font-size: 1.35rem; }
.imgpick__kicker { margin: 0 0 .15rem; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.imgpick__body { padding: 1.1rem 1.5rem; overflow: auto; flex: 1; min-height: 12rem; }
.imgpick__body:focus { outline: none; }
.imgpick__bar { display: flex; gap: .75rem; align-items: center; flex-wrap: wrap; margin-bottom: .75rem; }
.imgpick__bar .field { flex: 1 1 18rem; margin: 0; }
.imgpick__status { margin: 0 0 .75rem; font-size: .9rem; color: var(--text-muted); }
.imgpick__upload { padding: 1rem 1.1rem; margin-bottom: 1rem; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius); }
.imgpick__upload h3 { margin: 0 0 .75rem; font-size: 1.05rem; }
.imgpick__uploadctl { display: flex; gap: .5rem; flex-wrap: wrap; margin: 0 0 .5rem; }
.imgpick__twin { padding: .85rem 1rem; margin: 0 0 1rem; background: var(--warning-soft); border: 1px solid var(--warning); border-radius: var(--radius); }
.imgpick__twin h4 { margin: 0 0 .6rem; font-size: 1rem; }

/* Kartica že obstoječe (podvojene) slike — v knjižnici in v izbirniku enaka. */
.twincard { display: flex; gap: .85rem; align-items: flex-start; margin: .6rem 0; }
.twincard__thumb { flex: 0 0 auto; width: 7.5rem; height: 5.5rem; object-fit: contain; background: var(--surface); border: 1px solid var(--border); border-radius: calc(var(--radius) * .8); }
.twincard__body { min-width: 0; }
.twincard__body p { margin: 0 0 .25rem; }
.twincard__name { font-weight: 600; }
.twincard__meta, .twincard__alt { font-size: .88rem; color: var(--text-muted); overflow-wrap: anywhere; }
.imgpick__foot { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.5rem; border-top: 1px solid var(--border); }
.imgpick__foot-end { margin-inline-start: auto; display: flex; gap: .75rem; }

.imgpick__grid { display: grid; gap: .85rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 48rem) { .imgpick__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64rem) { .imgpick__grid { grid-template-columns: repeat(4, 1fr); } }

.ipcard { display: block; cursor: pointer; }
.ipcard input {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ipcard__box { display: block; border: 1px solid var(--border); border-radius: calc(var(--radius) * .8); background: var(--surface); overflow: hidden; }
.ipcard:hover .ipcard__box { border-color: var(--primary-line); }
.ipcard input:focus-visible + .ipcard__box { outline: 3px solid var(--primary-line); outline-offset: 2px; }
.ipcard input:checked + .ipcard__box { border-color: var(--primary); border-width: 2px; box-shadow: 0 0 0 3px var(--primary-soft); }
.ipcard__thumb { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--surface-alt); }
.ipcard__thumb img { width: 100%; height: 100%; object-fit: contain; }
.ipcard__tick {
  position: absolute; top: .4rem; inset-inline-end: .4rem; display: none;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--primary); color: var(--on-primary); font-size: .8rem;
  align-items: center; justify-content: center;
}
.ipcard input:checked + .ipcard__box .ipcard__tick { display: flex; }
.ipcard__name { display: block; padding: .55rem .7rem .1rem; font-weight: 700; font-size: .9rem; }
.ipcard__meta { display: block; padding: 0 .7rem; font-size: .78rem; color: var(--text-muted); }
.ipcard__state { display: block; padding: .2rem .7rem .6rem; font-size: .78rem; }
.ipcard__s--ok { color: var(--success-text); }
.ipcard__s--warn { color: var(--warning-text); }
.ipcard__s--bad { color: var(--danger-text); }

.imgpick__chosen { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.25rem; }
.imgpick__chosen img { width: 8rem; height: 5.5rem; flex: none; object-fit: cover; border-radius: calc(var(--radius) * .6); background: var(--surface-alt); }
.imgpick__chosen-name { margin: 0 0 .2rem; font-weight: 700; }
.imgpick__default { padding: .8rem 1rem; background: var(--surface-alt); border: 1px solid var(--border); border-radius: calc(var(--radius) * .7); }

/* ================================================================
   Knjižnica datotek (D1–D5, A11Y-SCMS-datoteke.md)
   ================================================================ */

/* Značka stanja dostopnosti: znak + beseda + barva, nikoli le barva. */
.fstate {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .1rem .6rem; border-radius: 999px;
  font-size: .82rem; font-weight: 700; border: 1px solid var(--border);
  text-decoration: none;
}
.fstate--muted { background: var(--surface-alt); color: var(--text-muted); }
.fstate--ok    { background: var(--success-soft); color: var(--success-text); border-color: var(--success); }
.fstate--warn  { background: var(--warning-soft); color: var(--warning-text); border-color: var(--warning); }
.fstate--bad   { background: var(--danger-soft); color: var(--danger-text); border-color: var(--danger); }
a.fstate:hover { text-decoration: underline; }

.table__muted { color: var(--text-muted); }
.freview--overdue { color: var(--danger-text); font-weight: 700; }

/* Radijska skupina stanja (D3): izbrano stanje je označeno tudi z robom. */
.fstates { display: flex; flex-direction: column; gap: .5rem; }
.fstates .radio {
  align-items: flex-start; padding: .6rem .75rem;
  border: 1px solid var(--border); border-radius: calc(var(--radius) * .7);
}
.fstates .radio input { margin-top: .2rem; flex: none; }
.fstates .radio:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }

.field-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.field-row .field { flex: 1 1 12rem; }
.field--short { max-width: 8rem; }

fieldset.imgfields--muted { background: var(--surface-alt); padding-bottom: .5rem; }
fieldset.imgfields--muted p { margin: 0 0 .6rem; }

/* Zgodovina stanja (D3, stranska kartica). */
.flog { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.flog li { font-size: .88rem; color: var(--text-muted); }

/* Pregled skladnosti (D5): števci po stanjih. */
.fsummary {
  list-style: none; margin: 0 0 1.75rem; padding: 0;
  display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}
.fsummary__i { padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius); text-align: center; background: var(--surface); }
.fsummary__i--ok    { border-color: var(--success); background: var(--success-soft); }
.fsummary__i--warn  { border-color: var(--warning); background: var(--warning-soft); }
.fsummary__i--bad   { border-color: var(--danger); background: var(--danger-soft); }
.fsummary__n { margin: 0; font-size: 1.9rem; font-weight: 800; }
.fsummary__i--ok .fsummary__n,   .fsummary__i--ok .fsummary__l   { color: var(--success-text); }
.fsummary__i--warn .fsummary__n, .fsummary__i--warn .fsummary__l { color: var(--warning-text); }
.fsummary__i--bad .fsummary__n,  .fsummary__i--bad .fsummary__l  { color: var(--danger-text); }
.fsummary__l { margin: .15rem 0 0; font-size: .85rem; }

/* Izbirnik datotek (D4): vrstice namesto mreže; radio je viden in izbirljiv s tipkovnico. */
.fplist { display: flex; flex-direction: column; }
.fprow { display: flex; align-items: center; gap: .75rem; padding: .7rem .35rem; border-bottom: 1px solid var(--border); cursor: pointer; }
.fprow input { width: 20px; height: 20px; flex: none; accent-color: var(--primary); }
.fprow__box { display: flex; flex-direction: column; gap: .15rem; }
.fprow__name { font-weight: 700; }
.fprow__meta { font-weight: 400; color: var(--text-muted); }
.fprow__state { font-size: .82rem; }
.fprow__state--muted { color: var(--text-muted); }
.fprow__state--ok    { color: var(--success-text); }
.fprow__state--warn  { color: var(--warning-text); }
.fprow__state--bad   { color: var(--danger-text); }
/* Razlaga pri vrstici, ki je izbirnik ne more uporabiti (izbirnik multimedije:
   vir, ki ga blok v tem polju ne zna predvajati). */
.fprow__note { font-size: .82rem; color: var(--text-muted); max-width: 68ch; }

/* ---------------------------------------------------------------- Multimedija (V1–V4)
   Knjižnica video in zvočnih del z jezikovnimi različicami (A11Y-SCMS-multimedija.md). */

/* V1 — mreža kartic; kartica pove stanje po jezikovni različici brez odpiranja dela. */
.mmgrid { list-style: none; margin: 1.25rem 0 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 48rem) { .mmgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .mmgrid { grid-template-columns: repeat(3, 1fr); } }

.mmcard { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; display: flex; flex-direction: column; }
.mmcard__link { display: block; color: inherit; text-decoration: none; }
.mmcard__link:hover .mmcard__name { text-decoration: underline; }
.mmcard__thumb { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; background: #1a2027; }
.mmcard__thumb--audio { background: var(--surface-alt); }
.mmcard__thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mmcard__mark { position: relative; font-size: 1.6rem; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); }
.mmcard__thumb--audio .mmcard__mark { color: var(--text-muted); text-shadow: none; }
.mmcard__name { display: block; padding: .65rem .8rem .1rem; font-weight: 700; }
.mmcard__meta { margin: 0; padding: 0 .8rem; font-size: .82rem; color: var(--text-muted); }

/* Vrstica značk na jezik: koda jezika + značke ✓/✕/— (fstate). */
.mmlangs { list-style: none; margin: .45rem 0 0; padding: .1rem .8rem .75rem; display: flex; flex-direction: column; gap: .3rem; }
.mmlangs__row { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.mmlangs__code { min-width: 1.8rem; font-size: .78rem; font-weight: 700; }
.fstate--sm { padding: .05rem .5rem; font-size: .72rem; }

/* V3/V4 — kartica jezikovne različice v obrazcu urejanja. */
.trackcard { margin: 0 0 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; }
.trackcard--default { border-color: var(--primary); }
.trackcard__head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; padding: .7rem 1rem; background: var(--surface-alt); border-bottom: 1px solid var(--border); }
.trackcard--default .trackcard__head { background: var(--primary-soft); }
.trackcard__head h3 { margin: 0; font-size: 1.05rem; }
.trackcard__default { font-weight: 400; color: var(--text-muted); }
.trackcard__body { padding: .9rem 1rem; display: flex; flex-direction: column; gap: .9rem; }
.trackcard__group { margin: 0; padding: .7rem .9rem; border: 1px solid var(--border); border-radius: calc(var(--radius) * .7); background: var(--surface); }
fieldset.trackcard__group legend { padding: 0 .4rem; font-size: .85rem; font-weight: 700; }
.trackcard__group .field { margin: .5rem 0 0; }
.trackcard__group .radio { margin: .25rem 0; }
/* Manjkajoča stopnja dostopnosti: črtkan okvir vabi k dopolnitvi, besedilo pove, kaj manjka. */
.trackcard__group--todo { border-style: dashed; border-color: var(--warning); background: var(--warning-soft); }

/* Vrstica obstoječe datoteke (ime + vloga + predogled). */
.filerow { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin: 0; padding: .45rem .6rem; background: var(--surface-alt); border: 1px solid var(--border); border-radius: calc(var(--radius) * .6); font-size: .9rem; }
.filerow__role { color: var(--text-muted); }
.filerow__act { flex: none; font-size: .85rem; }

/* Stanje po jeziku v stranskem stolpcu urejanja. */
.mmaside__lang { margin: .5rem 0 .1rem; font-weight: 700; font-size: .92rem; }
.mmaside__lang:first-of-type { margin-top: 0; }
.mmaside__row { margin: 0; font-size: .85rem; display: flex; gap: .35rem .7rem; flex-wrap: wrap; }
.mmaside__i--ok    { color: var(--success-text); }
.mmaside__i--muted { color: var(--text-muted); }
.mmaside__i--bad   { color: var(--danger-text); }