/* ---------------------------------------------------------------
   EduPilot — slogi vstopne strani (Naloga 5) in mostu v vaji (Naloga 7).
   Barve samo iz brand/turistica-cgp.md §11. Vrednosti so prepisane iz
   docs/design/studentski-zasloni/Main.dc.html, Napake.dc.html in
   StanjaVrstice.dc.html. Datoteko naloži vstop.html in most edupilot.js,
   zato so vsi razredi s predpono .ep-, slogi elementov pa zamejeni na
   .ep-vstop, da ne posežejo v slog vaje.
   --------------------------------------------------------------- */

:root {
  /* jedro znamke */
  --ep-coral: #F1765B;
  --ep-coral-600: #E45A3D;
  --ep-coral-400: #F58E76;
  --ep-coral-300: #F9B7A6;
  --ep-coral-100: #FCE3DD;
  --ep-blue: #005983;
  --ep-blue-700: #004A6E;
  --ep-blue-200: #B3CEDC;
  /* statusna ozadja (besedilo na njih je vedno --ep-ink) */
  --ep-ok-bg: #EEF3EA;
  --ep-warn-bg: #FEEEE0;
  --ep-alert-bg: #FCE3DD;
  --ep-info-bg: #E8F0F5;
  /* nevtralne */
  --ep-ink: #2B2B2B;
  --ep-ink-700: #4A4A4A;
  --ep-ink-300: #B6B6B6;
  --ep-ink-100: #ECECEC;
  --ep-paper: #FFFFFF;
  --ep-sunken: #FBF7F4;
  /* pisava in gibanje */
  --ep-font: 'Barlow', system-ui, 'Segoe UI', Helvetica, Arial, sans-serif;
  --ep-ease: cubic-bezier(.4, 0, .2, 1);
}

/* ===============================================================
   1. Vstopna stran
   =============================================================== */

.ep-vstop {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--ep-paper);
  color: var(--ep-ink);
  font-family: var(--ep-font);
  font-size: 16.5px;
  line-height: 1.6;
}
.ep-vstop *,
.ep-vstop *::before,
.ep-vstop *::after { box-sizing: border-box; min-width: 0; }
.ep-vstop [hidden] { display: none !important; }
.ep-vstop h1 { color: var(--ep-blue); font-weight: 600; line-height: 1.25; margin: 0; font-size: 1.7rem; letter-spacing: -.01em; }
.ep-vstop a { color: var(--ep-blue); text-decoration-color: var(--ep-ink-300); }
.ep-vstop a:hover { color: var(--ep-coral-600); text-decoration-color: var(--ep-coral-600); }
.ep-vstop button { font: inherit; cursor: pointer; }
.ep-vstop svg { display: block; }

/* fokus je vedno viden (CGP §6) */
.ep-vstop button:focus-visible,
.ep-vstop input:focus-visible,
.ep-vstop a:focus-visible,
.ep-btn:focus-visible,
.ep-bbtn:focus-visible { outline: 2px solid var(--ep-coral); outline-offset: 2px; }

/* --- pas z logotipom --- */
.ep-band {
  flex: none;
  height: 84px;
  background: var(--ep-blue);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 2.25rem;
}
.ep-band img { height: 66px; width: auto; display: block; flex: none; }
.ep-course { color: var(--ep-blue-200); font-size: .85em; font-weight: 500; text-align: right; }

/* --- oder s konfeti liki --- */
.ep-stage {
  flex: 1;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.ep-confetti { position: absolute; border-radius: 999px; pointer-events: none; }

/* --- kartica in pogledi --- */
.ep-card {
  position: relative;
  width: 560px;
  max-width: 100%;
  background: var(--ep-paper);
  border: 1px solid var(--ep-ink-100);
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(43, 43, 43, .08);
  padding: 2rem 2.25rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.ep-view { display: flex; flex-direction: column; gap: 1rem; margin: 0; }
.ep-head { display: block; }

.ep-overline { color: var(--ep-coral); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: .6875rem; }
.ep-rule { width: 200px; max-width: 100%; height: 3px; background: var(--ep-coral); margin: .45rem 0 0; }
.ep-meta { color: var(--ep-ink-700); font-size: .95em; margin: 0; }
.ep-zaprta { margin: -.5rem 0 0; color: var(--ep-ink); font-size: .92em; font-weight: 600; }

/* --- polja --- */
.ep-field { display: flex; flex-direction: column; gap: .3rem; }
.ep-field label { font-weight: 600; font-size: .92em; }
.ep-field input {
  font: inherit;
  width: 100%;
  height: 46px;
  padding: 0 .85em;
  border: 1px solid var(--ep-ink-100);
  border-radius: 8px;
  background: var(--ep-paper);
  color: var(--ep-ink);
}
.ep-field input::placeholder { color: var(--ep-ink-300); }
.ep-field input:hover { border-color: var(--ep-coral-300); }
.ep-field--bad input, .ep-field--bad textarea { border: 2px solid var(--ep-coral-600); }

/* Kos 6: vstop skupine. Člani gredo v eno polje z vejicami, zato besedilno polje in pod njim
   pojasnilo — brez njega je najpogostejša napaka, da vodja imena našteje s presledki. */
.ep-field .ep-pod { color: var(--ep-ink-700); font-size: .82em; }
.ep-field textarea {
  font: inherit;
  width: 100%;
  min-height: 76px;
  padding: .55em .85em;
  border: 1px solid var(--ep-ink-100);
  border-radius: 8px;
  background: var(--ep-paper);
  color: var(--ep-ink);
  line-height: 1.5;
  resize: vertical;
}
.ep-field textarea::placeholder { color: var(--ep-ink-300); }
.ep-field textarea:hover { border-color: var(--ep-coral-300); }

.ep-codein input { text-transform: uppercase; letter-spacing: .18em; font-weight: 600; font-size: 1.35em; height: 56px; text-align: center; }
.ep-codein input::placeholder { letter-spacing: .18em; font-weight: 500; }

/* --- gumbi --- */
.ep-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: 46px;
  padding: 0 1.4em;
  border-radius: 999px;
  border: 2px solid var(--ep-coral);
  background: var(--ep-coral);
  color: var(--ep-ink);
  font-family: var(--ep-font);
  font-size: 1em;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(241, 118, 91, .28);
  transition: background 200ms var(--ep-ease), transform 120ms var(--ep-ease);
}
.ep-btn:hover { background: var(--ep-coral-400); border-color: var(--ep-coral-400); }
.ep-btn:active { transform: scale(.97); }
.ep-btn--ghost { background: transparent; border-color: var(--ep-ink-100); color: var(--ep-blue); box-shadow: none; }
.ep-btn--ghost:hover { background: var(--ep-coral-100); border-color: var(--ep-coral); }
.ep-btn--wide { width: 100%; }
.ep-btn--small { min-height: 44px; font-size: .9em; }
.ep-btn[disabled] { opacity: .4; color: var(--ep-ink-300); box-shadow: none; cursor: not-allowed; }

/* --- delilnik, drobno besedilo, noga --- */
.ep-divider { display: flex; align-items: center; gap: .8rem; color: var(--ep-ink-700); font-size: .88em; }
.ep-divider::before,
.ep-divider::after { content: ""; flex: 1; height: 1px; background: var(--ep-ink-100); }
.ep-fine { color: var(--ep-ink-700); font-size: .82em; line-height: 1.5; margin: 0; }
.ep-foot { flex: none; padding: 0 2.25rem 1.25rem; text-align: center; color: var(--ep-ink-700); font-size: .72em; line-height: 1.45; }
.ep-foot b { color: var(--ep-ink); font-weight: 600; }

/* --- osebna koda --- */
.ep-codebox {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  padding: 1.4rem 1rem 1.2rem;
  background: var(--ep-sunken);
  border: 1px solid var(--ep-ink-100);
  border-radius: 14px;
}
.ep-code { font-size: 3.2rem; font-weight: 700; color: var(--ep-blue); letter-spacing: .14em; line-height: 1.1; padding-left: .14em; text-align: center; }
.ep-who {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .7em .9em;
  border-radius: 8px;
  background: var(--ep-info-bg);
  border: 1px solid var(--ep-blue-200);
  font-size: .92em;
}
.ep-who svg { flex: none; }
.ep-who b { color: var(--ep-blue-700); font-weight: 600; }

/* --- sporočila stanj (napake na vstopni strani, vrstice v oknu za oddajo) --- */
.ep-item {
  padding: .6em .85em;
  border-radius: 8px;
  color: var(--ep-ink);
  font-size: .95em;
  line-height: 1.5;
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: .5em;
}
.ep-item svg { width: 18px; height: 18px; flex: none; margin-top: .15em; }
.ep-item b { font-weight: 700; }
.ep-item--alert { background: var(--ep-alert-bg); }
.ep-item--warn { background: var(--ep-warn-bg); }
.ep-item--ok { background: var(--ep-ok-bg); }
.ep-item--info { background: var(--ep-info-bg); }

/* --- mobilni odsek vstopne strani --- */
@media (max-width: 700px) {
  .ep-vstop { font-size: 16px; }
  .ep-band { padding: 0 1rem; }
  .ep-course { font-size: .72em; line-height: 1.3; }
  .ep-stage { padding: 1.25rem 1rem; }
  .ep-confetti { display: none; }
  .ep-card { padding: 1.5rem 1.25rem 1.25rem; border-radius: 14px; }
  .ep-vstop h1 { font-size: 1.35rem; }
  .ep-code { font-size: 2.2rem; letter-spacing: .1em; }
  .ep-foot { padding: 0 1rem 1rem; }
}

/* ===============================================================
   2. Most v vaji: vrstica, okence s kodo, okno za oddajo
   =============================================================== */

.ep-vrstica {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 60px;
  background: var(--ep-blue-700);
  color: var(--ep-paper);
  font-family: var(--ep-font);
  font-size: 16.5px;
  line-height: 1.6;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1.25rem;
}
.ep-vrstica > * { flex: none; white-space: nowrap; }
.ep-brand { font-weight: 700; font-size: 1.02rem; letter-spacing: .01em; }
.ep-sep { width: 1px; height: 24px; background: rgba(255, 255, 255, .28); }
.ep-mod { font-weight: 500; }
.ep-vrstica .ep-meta { color: var(--ep-blue-200); font-size: .85em; margin: 0; }
@media (max-width: 1180px) { .ep-vrstica .ep-meta { display: none; } }
/* Ime skupine (kos 6) ostane vidno tudi na ožjih zaslonih, kjer se razred in rok umakneta:
   vedeti, v imenu katere skupine pišeš, je pomembnejše od datuma — ta je tudi na vstopni strani. */
.ep-kdo {
  color: var(--ep-paper);
  font-size: .85em;
  font-weight: 600;
  background: rgba(255, 255, 255, .14);
  border-radius: 999px;
  padding: .15em .7em;
  white-space: nowrap;
}
.ep-spacer { flex: 1 1 0; }

.ep-state { display: inline-flex; align-items: center; gap: .45em; font-size: .9em; color: var(--ep-paper); font-weight: 500; }
.ep-state svg { width: 16px; height: 16px; display: block; flex: none; }

.ep-chip {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  font-size: .88em;
  padding: .25em .8em;
  border-radius: 999px;
  color: var(--ep-ink);
  font-weight: 600;
}
.ep-chip svg { width: 15px; height: 15px; display: block; flex: none; }
.ep-chip--ok { background: var(--ep-ok-bg); }
.ep-chip--warn { background: var(--ep-warn-bg); }
.ep-chip--alert { background: var(--ep-alert-bg); }
.ep-chip__sub { font-weight: 400; color: var(--ep-ink-700); }

/* Oznaka stanja v vrstici (kos 18, Tadej 2026-09-29: »prelom v več vrstic«): dolga sporočila
   (»Ni povezave · ne zapirajte strani · …«, »Ni shranjeno: <razlog>«) se prelomijo, ne uidejo čez rob
   in ne izrinejo gumbov. Besedilo teče kot odstavek (ne kot prožni zaboj, ki bi dodatek postavil v
   svoj stolpec); ena vrstica je še vedno »tableta«, več vrstic pa zaobljen pravokotnik. Na računalniku
   je oznaka široka največ 32rem, zato dolgo sporočilo zasede dve vrstici v 60 px visoki vrstici. */
.ep-vrstica > .ep-stanje { white-space: normal; min-width: 0; flex: 0 1 auto; max-width: 32rem; }
.ep-stanje .ep-chip { display: inline-block; line-height: 1.3; border-radius: 14px; }
.ep-stanje .ep-chip svg { display: inline-block; vertical-align: -3px; margin-right: .45em; }
@media (max-width: 900px) {
  .ep-vrstica > .ep-stanje { flex: 1 1 100%; max-width: 100%; }
}

.ep-bbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45em;
  min-height: 44px;
  /* Kos 15 (osnutek, Tadej 2026-09-27): na vseh napravah manjši, da gre zraven »Prijavite težavo«
     z vsem besedilom. Telefon ostane v treh vrstah, računalnik ima pri 1366 px dovolj prostora. */
  padding: 0 .8em;
  border-radius: 999px;
  font-family: var(--ep-font);
  font-weight: 600;
  font-size: .85em;
  line-height: 1.2;
  cursor: pointer;
  transition: background 200ms var(--ep-ease), transform 120ms var(--ep-ease);
}
.ep-bbtn:active { transform: scale(.97); }
.ep-bbtn svg { width: 16px; height: 16px; display: block; }
.ep-bbtn--ghost { background: transparent; color: var(--ep-paper); border: 1.5px solid rgba(255, 255, 255, .55); }
.ep-bbtn--ghost:hover { background: rgba(255, 255, 255, .12); border-color: var(--ep-paper); }
.ep-bbtn--primary { background: var(--ep-coral); border: 2px solid var(--ep-coral); color: var(--ep-ink); box-shadow: 0 8px 24px rgba(241, 118, 91, .28); }
.ep-bbtn--primary:hover { background: var(--ep-coral-400); border-color: var(--ep-coral-400); }
.ep-bbtn[disabled] { opacity: .4; box-shadow: none; cursor: not-allowed; }
.ep-bbtn--primary[disabled] { color: var(--ep-ink); }

/* --- okence z osebno kodo pod vrstico --- */
.ep-pop {
  position: fixed;
  /* Pod vrstico, ne čeznjo (kos 19): na telefonu je vrstica v več vrstah in okence na 66 px bi
     prekrilo gumb »Pokažite kodo«, s katerim se zapre. Višino vrstice meri most (`--ep-vrstica-h`). */
  top: calc(var(--ep-vrstica-h, 60px) + 6px);
  right: 1.25rem;
  z-index: 60;
  width: 320px;
  max-width: calc(100vw - 2rem);
  background: var(--ep-paper);
  color: var(--ep-ink);
  font-family: var(--ep-font);
  border: 1px solid var(--ep-ink-100);
  border-radius: 14px;
  box-shadow: 0 6px 20px rgba(43, 43, 43, .10);
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}
.ep-pop[hidden] { display: none; }
.ep-vrstica [hidden], .ep-btn[hidden], .ep-bbtn[hidden], .ep-kopije [hidden] { display: none !important; }
.ep-pop h3 { margin: 0; color: var(--ep-blue); font-weight: 600; line-height: 1.25; font-size: 1.02rem; }
.ep-pop .ep-code { font-size: 1.9rem; letter-spacing: .12em; text-align: left; padding-left: 0; }
.ep-pop p { margin: 0; font-size: .85em; color: var(--ep-ink-700); line-height: 1.5; }
.ep-pop .ep-btn { min-height: 44px; font-size: .9em; align-self: flex-start; }
/* Dva gumba v vrsti (skupina: povezava in koda); spodnji odmik vrste gumbov iz okna za oddajo tu ni potreben. */
.ep-pop .ep-kopije { margin: 0; }
.ep-pop b { overflow-wrap: anywhere; }

/* --- okno za oddajo --- */
.ep-modal-bg {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(43, 43, 43, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.ep-modal-bg[hidden] { display: none; }
.ep-modal {
  background: var(--ep-paper);
  color: var(--ep-ink);
  font-family: var(--ep-font);
  font-size: 16.5px;
  line-height: 1.6;
  border-radius: 22px;
  padding: 1.6rem 1.75rem 1.5rem;
  max-width: 480px;
  width: 100%;
  max-height: calc(100vh - 2rem);
  overflow: auto;
  box-shadow: 0 14px 40px rgba(43, 43, 43, .12);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.ep-modal h2 { margin: 0; color: var(--ep-blue); font-weight: 600; line-height: 1.25; font-size: 1.35rem; }
.ep-modal p { margin: 0; line-height: 1.5; }
.ep-modal .ep-meta { color: var(--ep-ink-700); font-size: .95em; }
.ep-actions { display: flex; justify-content: flex-end; gap: .75rem; flex-wrap: wrap; }

/* --- gumba za kopije v kartici za oddajo --- */
.ep-kopije { display: flex; gap: .6rem; flex-wrap: wrap; margin: 0 0 .8rem; }

/* --- stanja vaje --- */
main.ep-zaklenjeno { opacity: .6; }
html.ep-nalaganje main { visibility: hidden; }

/* stranska vrstica vaje se umakne pod EduPilotovo vrstico */
/* namizje: stranska vrstica vaje se prilepi pod vrstico EduPilota */
/* Kos 7: vaje oblike "narocilnica" (web/vaja/vaja.css) nimajo `.side` — `<nav class="nav">` je
   neposredni otrok <body> (scripts/build.mjs:62), zato ista lepljiva vrstica lekcij potrebuje isti
   odmik pod EduPilotovo vrstico, ki jo ta datoteka vrine (`document.body.prepend`, glej zgoraj).
   Izbirnik je NAMENOMA `body > nav.nav`, ne `.nav` ali `nav.nav` sam: v OBEH obstoječih vajah
   (`kanali` KAN-1.1, `seo`) je `<nav class="nav">` vgnezden ZNOTRAJ `<aside class="side">`, ne
   neposredni otrok <body> — širši izbirnik bi torej to isto pravilo (in `!important`) vsilil tudi
   vgnezdenemu `.nav` v obeh živih vajah, kar bi bila regresija. Ta popravek zato ne sme in ne more
   zadeti nobene obstoječe strani; velja izključno za novo obliko "narocilnica" iz kosa 7. Pravilo
   je tu, v mostu, in ne v `web/vaja/vaja.css`, ker mora veljati natanko takrat, ko vrstica dejansko
   obstaja: prenesena "kopija za učenje" in učiteljev predogled (`?predogled=1`) mostu ne naložita,
   zato tam `nav.nav` ostane pri `top:0` iz `vaja.css` — pravilno, saj tam vrstice ni. Preverjeno v
   pravem toku (poročilo naloge 6, "Fix round 2"): `getBoundingClientRect().top` stolpca >= 60,
   `elementFromPoint` na sredini prvega zavihka vrne zavihek, ne vrstico. */
@media (min-width: 901px) {
  .side,
  body > nav.nav { top: var(--ep-vrstica-h, 60px) !important; height: calc(100vh - var(--ep-vrstica-h, 60px)) !important; }
  /* Kos 18 (Tadej 2026-09-29, »vrstica se zviša«): na ožjem računalniškem zaslonu dolgo sporočilo o
     shranjevanju ne gre v 60 px, zato vrstica tedaj zraste; most njeno višino sproti zapiše v
     `--ep-vrstica-h` (ResizeObserver v web/edupilot.js) in stolpec lekcij se pomakne z njo. Sicer je 60 px. */
  .ep-vrstica { box-sizing: border-box; height: auto; min-height: 60px; padding-top: .35rem; padding-bottom: .35rem; }
}

@media (max-width: 900px) {
  /* telefon: vrstica EduPilota se pomakne s stranjo, prilepljena ostane samo zgornja vrstica vaje (kot v izvirniku) */
  .ep-vrstica { position: static; flex-wrap: wrap; height: auto; padding: .5rem 1rem; row-gap: .5rem; }
  .side,
  body > nav.nav { top: 0 !important; height: auto !important; }
}

/* ===============================================================
   3. Prijava težave (kos 15, web/tezava.js). Osnutek:
      docs/design/2026-09-27-prijavljene-tezave-osnutek.html, zasloni A, B in C.
   =============================================================== */

/* --- vrstica: varovalka pred prelivanjem na namizju ---
   Pri skupini (ime skupine) ali daljši oznaki stanja (»Ni povezave · …«, »Oddano ob … · potrdilo …«)
   bi vrstica ušla čez rob in stran bi se pomikala vstran. Zato se najprej skrajša razred in rok,
   nato naslov sklopa (»…«; celo besedilo je v atributu title, naslov sklopa pa tudi v glavi strani
   tik pod vrstico). Kadar je prostora dovolj, se ne spremeni nič. */
@media (min-width: 901px) {
  .ep-vrstica > .ep-meta { flex: 0 3 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .ep-vrstica > .ep-mod { flex: 0 1 auto; min-width: 6em; overflow: hidden; text-overflow: ellipsis; }
}

/* --- okno »Prijavite težavo« --- */
.ep-modal [hidden], .ep-obvestilo [hidden] { display: none !important; }
.ep-modal .ep-field label { margin: 0; }
.ep-field select {
  font: inherit;
  width: 100%;
  height: 46px;
  padding: 0 .85em;
  border: 1px solid var(--ep-ink-100);
  border-radius: 8px;
  background: var(--ep-paper);
  color: var(--ep-ink);
}
.ep-field select:hover { border-color: var(--ep-coral-300); }
.ep-modal .ep-field textarea { min-height: 120px; }
.ep-neobvezno { font-weight: 400; color: var(--ep-ink-700); }
.ep-pod-polja { display: flex; align-items: baseline; gap: .75rem; }
.ep-stevec { margin-left: auto; flex: none; color: var(--ep-ink-700); font-size: .82em; font-variant-numeric: tabular-nums; }
/* Razlog pri manjkajočem polju; temnejša koralna (kot .izbire-stevec--vec v vaja.css), ker je
   --ep-coral-600 za drobno besedilo na beli prešibka. */
.ep-napaka-polja { color: #A03F2B; font-size: .82em; font-weight: 600; }
.ep-napaka-polja:empty { display: none; }
/* `.ep-field textarea` (zgoraj) stoji za `.ep-field--bad textarea` in ima isto težo, zato bi rdeča
   obroba v oknu izginila; tu z večjo težo. */
.ep-modal .ep-field--bad textarea { border: 2px solid var(--ep-coral-600); }
.ep-izbire legend .ep-napaka-polja { font-size: .9em; margin-left: .35em; }
.ep-izbire { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.ep-izbire legend { font-weight: 600; font-size: .92em; padding: 0; margin: 0 0 .4rem; }
.ep-izbira {
  display: flex;
  align-items: center;
  gap: .55em;
  min-height: 44px;
  margin: 0;
  padding: .45em .8em;
  border: 1px solid var(--ep-ink-100);
  border-radius: 8px;
  font-size: .95em;
  font-weight: 500;
  line-height: 1.25;
  cursor: pointer;
  transition: background 200ms var(--ep-ease), border-color 200ms var(--ep-ease);
}
.ep-izbira:hover { border-color: var(--ep-coral-300); }
.ep-izbira input { accent-color: var(--ep-coral-600); width: 18px; height: 18px; margin: 0; flex: none; }
.ep-izbira:has(input:checked) { background: var(--ep-coral-100); border-color: var(--ep-coral); }
.ep-izbira:has(input:focus-visible) { outline: 2px solid var(--ep-coral); outline-offset: 2px; }
/* Neizpolnjeno ob »Pošljite«: isti znak kot .ep-field--bad (obroba), razlog je ob naslovu skupine. */
.ep-izbire--bad .ep-izbira { border-color: var(--ep-coral-600); }
@media (max-width: 520px) {
  .ep-modal { padding: 1.25rem 1.1rem 1.1rem; border-radius: 14px; }
  .ep-modal-bg { padding: .75rem; }
  .ep-izbire { grid-template-columns: minmax(0, 1fr); gap: .4rem; }
  .ep-modal .ep-field textarea { min-height: 96px; }
}

/* --- obvestilo pod vrstico ---
   Velikost črk je ista kot pri gumbih vrstice (16,5 px × .85). Ikona in besedilo sta v svojem ovoju
   (.ep-obvestilo__vsebina), ki je navpično na sredini ob gumbu »V redu«; ikona je poravnana s prvo
   vrstico besedila (ista višina vrstice), tudi kadar je besedilo v več vrsticah. */
.ep-obvestilo {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem 1.25rem;
  font-family: var(--ep-font);
  font-size: calc(16.5px * .85);
  line-height: 1.5;
  color: var(--ep-ink);
  border-bottom: 1px solid var(--ep-ink-100);
}
.ep-obvestilo__vsebina { flex: 1 1 auto; min-width: 0; display: flex; align-items: flex-start; gap: .75rem; }
.ep-obvestilo__vsebina > svg { width: 18px; height: 18px; flex: none; margin-top: calc((1.5em - 18px) / 2); }
.ep-obvestilo__besedilo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .2rem; }
.ep-obvestilo__besedilo p { margin: 0; }
.ep-obvestilo__odgovor { color: var(--ep-ink-700); white-space: pre-line; }
.ep-obvestilo__odgovor b { color: var(--ep-ink); font-weight: 600; }
.ep-obvestilo .ep-btn { flex: none; font-size: 1em; background: var(--ep-paper); }
.ep-obvestilo .ep-btn:hover { background: var(--ep-coral-100); }
.ep-obvestilo--ok { background: var(--ep-ok-bg); border-bottom-color: #C9D8BD; }
.ep-obvestilo--info { background: var(--ep-info-bg); border-bottom-color: var(--ep-blue-200); }
@media (max-width: 900px) {
  .ep-obvestilo { flex-wrap: wrap; padding: .7rem 1rem; }
  .ep-obvestilo__vsebina { flex-basis: 100%; }
  .ep-obvestilo .ep-btn { margin-left: calc(18px + .75rem); }
}

@media print {
  .ep-vrstica,
  .ep-pop,
  .ep-modal-bg,
  .ep-obvestilo,
  .ep-kopije { display: none !important; }
}