/**
 * Polni uvrstitveni test.
 *
 * Ločena datoteka in ne blok v style.css: slog je potreben na eni sami
 * strani, style.css pa se naloži na vsaki. Vrsti ga kratka koda.
 *
 * Barve, radij in razmiki so iste spremenljivke kot drugod na strani —
 * novega videza tu ni, samo razporeditev, ki je style.css nima.
 */

.ut { max-width: 760px; margin: 0 auto; }

.ut-noscript {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  color: var(--ink);
}

/* Glava ravni: ime ravni levo, izhod desno.
   -------------------------------------------------------------------
   Preklic je bil do v59.2 pod zadnjim vprašanjem. Pri 390 px in pri
   povečavi je bil s tem pod pregibom: kdor je test odprl po nesreči,
   izhoda ni videl, dokler se ni prebil skozi deset vprašanj.

   flex-wrap: kadar je vrstica pretesna, se preklic prelomi v svojo
   vrstico. margin-left:auto ga drži ob desnem robu v obeh primerih —
   ob imenu ravni in sam v svoji vrstici — in imena ravni nikoli ne
   stisne. */
.ut-glava {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 14px;
  margin: 0 0 8px;
}

.ut-h2 { font-size: 24px; margin: 0 0 8px; color: var(--ink); }

/* V glavi nosi razmik ovoj, ne naslov. */
.ut-glava .ut-h2 { margin: 0; }

/* Tiha pot ven iz testa. Povezava in ne gumb: dejanje ni enakovredno
   oddaji odgovorov in ne sme tekmovati z njo za pozornost.

   Odsek testa je svetel (#F7F3EA), zato tu var(--muted) drži — 5,03:1. */
.ut-preklici {
  margin-left: auto;
  font-size: 13px;
  font-family: inherit;
  color: var(--muted);
  text-decoration: underline;
  background: none;
  border: 0;
  padding: 4px 8px;
  cursor: pointer;
}

.ut-preklici:hover { color: var(--orange-text); }

.ut-preklici:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.ut-h3 { font-size: 16px; margin: 28px 0 10px; color: var(--ink); }
.ut-opis { font-size: 15px; line-height: 1.65; color: var(--muted); margin: 0 0 24px; }
.ut-nalagam { color: var(--muted); font-size: 15px; }

/* Bralnik zaslona ga prebere, oko ne vidi. Legenda skupine mora
   obstajati, tudi kadar je nad njo že viden naslov. */
.screen-reader-text {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Uvodni izbirnik (.ut-zacetne) in črta napredka (.ut-napredek,
   .ut-crta) sta odpadla v v51. Oboje je nadomestila vrstica ravni na
   dnu te datoteke: izbirnik je bil vstopna točka, črta pa je isto
   ravnino kazala še enkrat med reševanjem. */

/* ------------------------------------------------------------------
   Vprašanja
   ------------------------------------------------------------------ */

.ut-vprasanja { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }

.ut-v { scroll-margin-top: 130px; }
.ut-v-polje { border: 0; padding: 0; margin: 0; }

.ut-v-besedilo {
  display: block; padding: 0; margin: 0 0 12px;
  font-size: 16px; line-height: 1.5; color: var(--ink);
}
.ut-v-st { color: var(--orange-text); font-weight: 600; }

/* Odgovori so cele povedi, zato ena pod drugo, čez vso širino. V
   stolpcih bi se lomile na tri vrstice in bralec bi jih primerjal
   po višini namesto po vsebini. */
.ut-moznosti { display: grid; gap: 8px; }

.ut-moznost {
  display: flex; align-items: flex-start; gap: 10px;
  /* 44 px je najmanjša tarča za prst; pri daljših odgovorih zraste sama */
  min-height: 44px; padding: 11px 14px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; cursor: pointer;
  font-size: 14.5px; line-height: 1.45; color: var(--ink);
}
.ut-moznost:hover { border-color: var(--ink); }
.ut-moznost:has(input:checked) { border-color: var(--orange-dark); background: var(--cream); }
.ut-moznost:focus-within { outline: 2px solid var(--orange-dark); outline-offset: 2px; }

.ut-moznost input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--orange-dark); flex: 0 0 auto; }
.ut-moznost-crka { font-weight: 600; color: var(--muted); flex: 0 0 auto; }
.ut-moznost-besedilo { flex: 1 1 auto; min-width: 0; }

/* Neodgovorjeno vprašanje po kliku na »Preveri« (B5) */
.ut-manjka .ut-v-besedilo { color: var(--orange-text); }
.ut-manjka .ut-moznost { border-color: var(--orange); }

/* ------------------------------------------------------------------
   Pregled ravni (C1)
   ------------------------------------------------------------------ */

.ut-izid {
  font-size: 18px; font-weight: 600; margin: 0 0 24px;
  padding: 16px 18px; border-radius: var(--radius);
  border: 1px solid var(--line);
}
.ut-izid-ok { border-color: #C4D8C0; background: #F2F7F0; color: #33562D; }
.ut-izid-ne { border-color: #E6CDBB; background: #FBF3ED; color: #7A4A28; }

.ut-pregled { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }

.ut-p {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; background: #fff;
}
.ut-p-ok { border-left: 3px solid #7BA471; }
.ut-p-ne { border-left: 3px solid var(--orange); }

.ut-p-glava { display: flex; gap: 10px; align-items: flex-start; }
.ut-p-znak { font-size: 15px; line-height: 1.5; flex: 0 0 auto; }
.ut-p-ok .ut-p-znak { color: #5C8A52; }
.ut-p-ne .ut-p-znak { color: var(--orange-dark); }
.ut-p-besedilo { font-size: 15px; line-height: 1.5; color: var(--ink); min-width: 0; }

.ut-p-odgovori { margin-top: 10px; display: grid; gap: 4px; }
.ut-p-vrstica { font-size: 13.5px; line-height: 1.5; }
.ut-p-oznaka  { color: var(--muted); }
.ut-p-vrednost { color: var(--ink); }
.ut-p-ne .ut-p-odgovori .ut-p-vrstica:first-child .ut-p-vrednost { color: var(--orange-text); }

.ut-p-razlaga {
  margin: 12px 0 0; padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 13.5px; line-height: 1.55; color: var(--muted);
}

/* ------------------------------------------------------------------
   Ponudba ustavitve (B3)
   ------------------------------------------------------------------ */

.ut-ustavi {
  margin-top: 32px; padding: 22px 24px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--cream);
}
.ut-ustavi-h3 { font-size: 17px; margin: 0 0 8px; color: var(--ink); }
.ut-ustavi-opis { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 0 0 18px; }
.ut-ustavi .ut-dejanja { margin-top: 0; }

/* ------------------------------------------------------------------
   Povzetek (C2)
   ------------------------------------------------------------------ */

.ut-povzetek { text-align: center; }

.ut-znak {
  font-family: 'Lora', serif; font-size: 56px; line-height: 1;
  color: var(--orange-dark); margin: 10px 0 6px;
}
.ut-znak-ime { font-size: 22px; margin: 0 0 6px; color: var(--ink); }
.ut-opomba { font-size: 13.5px; color: var(--muted); margin: 0 auto 8px; max-width: 520px; line-height: 1.55; }

.ut-lestvica {
  list-style: none; margin: 0 auto; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  gap: 8px; max-width: 560px;
}
.ut-lestvica-v {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 6px; background: #fff;
}
.ut-lestvica-raven { display: block; font-size: 12.5px; color: var(--muted); }
.ut-lestvica-tock  { display: block; font-size: 16px; font-weight: 600; color: var(--ink); margin-top: 2px; }

.ut-teme { list-style: none; margin: 0 auto; padding: 0; max-width: 560px; display: grid; gap: 6px; }
.ut-tema {
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
  border-bottom: 1px solid var(--line); padding: 8px 2px;
  font-size: 14px; text-align: left;
}
.ut-tema-ime  { color: var(--ink); min-width: 0; }
.ut-tema-tock { color: var(--orange-text); font-weight: 600; flex: 0 0 auto; }

.ut-pomen {
  font-size: 15.5px; line-height: 1.6; color: var(--ink);
  max-width: 560px; margin: 24px auto 0;
}

/* ------------------------------------------------------------------
   Dejanja in napake
   ------------------------------------------------------------------ */

.ut-dejanja { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.ut-povzetek .ut-dejanja { justify-content: center; }

.ut-napaka {
  font-size: 14px; color: var(--orange-text);
  margin: 16px 0 0; line-height: 1.55;
}

/* Prostor za aria-live; sporočilo pove že .ut-izid, tu ostane prazno */
.ut-zivo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ------------------------------------------------------------------
   Telefon (H)
   ------------------------------------------------------------------ */

@media (max-width: 700px) {
  .ut-h2 { font-size: 20px; }
  .ut-vprasanja { gap: 24px; }
  .ut-v-besedilo { font-size: 15.5px; }
  .ut-moznost { font-size: 14px; padding: 12px; }
  .ut-izid { font-size: 16px; padding: 14px 16px; }
  .ut-znak { font-size: 46px; }
  .ut-znak-ime { font-size: 19px; }
  .ut-p { padding: 14px; }
  /* Gumbi čez vso širino: dva v vrsti se pri 390 px stisneta v
     dve vrstici besedila in tarča postane nepredvidljiva. */
  .ut-dejanja { flex-direction: column; }
  .ut-dejanja .btn { width: 100%; justify-content: center; }
}

/* Brskalniki brez :has() (starejši Safari) — izbrano stanje ostane
   brez barve, kar je manj lepo, a ne ovira: radijski gumb je viden. */
@supports not selector(:has(*)) {
  .ut-moznost input:checked { outline: 2px solid var(--orange-dark); }
}

/* ------------------------------------------------------------------
   Navodilo pred začetkom
   ------------------------------------------------------------------ */

.ut-navodilo {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--cream); padding: 20px 22px; margin: 0 0 32px;
}
.ut-navodilo-h3 { font-size: 15px; margin: 0 0 10px; color: var(--ink); }
.ut-navodilo-seznam { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.ut-navodilo-seznam li { font-size: 14px; line-height: 1.55; color: var(--muted); }

@media (max-width: 700px) {
  .ut-navodilo { padding: 16px 18px; margin-bottom: 24px; }
  .ut-navodilo-seznam li { font-size: 13.5px; }
}

/* Ozka slovnična tema pred razlago pri zgrešenem vprašanju. V povzetku
   so široke skupine; tu je tema tega enega vprašanja. */
.ut-p-tema {
  display: inline-block; margin-right: 8px;
  font-weight: 600; color: var(--ink);
}

/* ------------------------------------------------------------------
   E-pošta pod rezultatom (F1, F2, F3)

   Vizualno je to ločen okvir POD rezultatom, ne del njega: kdor ga
   prezre, je test vseeno opravil in raven mu je znana. Obrazec, ki bi
   stal med rezultatom in ravnijo, bi bral kot plačilna stena.
   ------------------------------------------------------------------ */

/* Past za robote. Ne display:none — nekateri roboti prav to preskočijo. */
.ut-past { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* Vrstica s privolitvijo.
   Okvirja okoli nje NI. Prej je bil tu :focus-within z obrobo, ki je ob
   kliku na kljukico narisal pravokotnik čez celo vrstico in je izpadel
   kot pokvarjen okvir. Fokus pokaže kljukica sama. */
.ut-privolitev {
  display: flex; align-items: flex-start; gap: 10px;
  margin-bottom: 12px; cursor: pointer;
  font-size: 13px; line-height: 1.5; color: var(--muted);
  padding: 4px 0;
}
.ut-privolitev input {
  width: 18px; height: 18px; margin-top: 1px;
  accent-color: var(--orange-dark); flex: 0 0 auto;
}
.ut-privolitev input:focus-visible { outline: 2px solid var(--orange-dark); outline-offset: 2px; }

/* Manjkajoča privolitev: rdeč pridih na besedilu in kljukici, brez okvirja. */
.ut-privolitev.ut-manjka { color: var(--orange-text); }
.ut-privolitev.ut-manjka input { outline: 2px solid var(--orange-dark); outline-offset: 2px; }

.ut-mail-drobno { font-size: 12px; line-height: 1.5; color: var(--muted-2); margin: 14px 0 0; }
.ut-mail-hvala { font-size: 15px; line-height: 1.6; color: var(--ink); margin: 0; }

/* ------------------------------------------------------------------
   Zaslon preklica privolitve
   ------------------------------------------------------------------ */

.ut-izbris { padding: 40px 0; }
.ut-izbris-okvir {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--cream); padding: 32px; text-align: center;
}
.ut-izbris-okvir .ut-h2 { margin-bottom: 12px; }
.ut-izbris-okvir .ut-opis { margin: 0 auto 8px; max-width: 480px; }
.ut-izbris-okvir .ut-mail-drobno { margin-top: 20px; }

@media (max-width: 700px) {
  .ut-izbris { padding: 24px 0; }
  .ut-izbris-okvir { padding: 24px 18px; }
}

/* Rezultat ravni prevzame žarišče; obroba mora biti vidna, a ne kričeča */
.ut-izid:focus { outline: 2px solid var(--orange-dark); outline-offset: 3px; }
.ut-izid:focus:not(:focus-visible) { outline: none; }

/* ------------------------------------------------------------------
   Prva raven na naslovnici

   Isti izris kot na strani testa, le v odseku pod junakom. Kartica nad
   njim ostaja nedotaknjena — vabo, ki deluje, se ne popravlja.
   ------------------------------------------------------------------ */

.ut-zacetek-sec {
  padding: var(--razmik-odseka) 0 0;
  scroll-margin-top: 90px;
}
.ut-zacetek { max-width: 760px; }

@media (max-width: 700px) {
  .ut-zacetek-sec { padding-top: 40px; }
}

/* Popravek: možnosti nimajo črke, ker je vrstni red premešan in bi
   črka kazala na mesto, ki se med krogi spreminja. */
#ut-popravek .ut-moznost-crka { display: none; }

/* ==================================================================
   v45 — POSTAVITEV REZULTATOV

   Tri spremembe: rezultat ravni gre na vrh bloka, gumbi dobijo eno
   samo glavno pot, povzetek pa konkreten predlog namesto poti na
   seznam tečajev.
   ================================================================== */

/* ------------------------------------------------------------------
   Okvirji med nalaganjem

   Prazen prostor med klikom in prihodom vprašanj bere kot pokvarjena
   stran. Okvirji so približno tolikšni kot pravo vprašanje, zato se ob
   zamenjavi skoraj nič ne premakne.
   ------------------------------------------------------------------ */

.ut-okvirji { display: grid; gap: 28px; }
.ut-okvir { display: grid; gap: 8px; }

.ut-okvir-v, .ut-okvir-m {
  border-radius: var(--radius);
  background: linear-gradient(90deg, var(--cream-2) 25%, var(--cream) 50%, var(--cream-2) 75%);
  background-size: 400% 100%;
  animation: ut-utrip 1.4s ease-in-out infinite;
}
.ut-okvir-v { height: 22px; width: 78%; margin-bottom: 4px; }
.ut-okvir-m { height: 45px; border: 1px solid var(--line); }

@keyframes ut-utrip {
  0%   { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

/* Kdor je izklopil animacije, dobi mirno podlago — utripanje je tu
   okrasek, ne podatek. */
@media (prefers-reduced-motion: reduce) {
  .ut-okvir-v, .ut-okvir-m { animation: none; background: var(--cream-2); }
}

/* ------------------------------------------------------------------
   Rezultat ravni — na vrhu bloka
   ------------------------------------------------------------------ */

.ut-izid {
  margin: 0 0 20px;
  padding: 18px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}
.ut-izid-glava {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px;
}
.ut-izid-tock {
  font-family: 'Lora', serif;
  font-size: 38px; line-height: 1; font-weight: 500;
}
.ut-izid-sodba { font-size: 17px; font-weight: 600; }
.ut-izid-prag {
  margin: 10px 0 0; font-size: 13.5px; line-height: 1.5;
  opacity: .85;
}

.ut-izid-ok { border-color: #C4D8C0; background: #F2F7F0; color: #33562D; }
.ut-izid-ne { border-color: #E6CDBB; background: #FBF3ED; color: #7A4A28; }

/* Odločitev takoj pod rezultatom, ne za desetimi odgovori. */
.ut-po-izidu:not(:empty) { margin-bottom: 28px; }
.ut-po-izidu .ut-ustavi { margin-top: 0; }
.ut-po-izidu .ut-dejanja { margin-top: 0; }

/* ------------------------------------------------------------------
   Odgovori v zloženem odseku
   ------------------------------------------------------------------ */

.ut-odgovori {
  border-top: 1px solid var(--line);
  padding-top: 4px;
}
.ut-odgovori-summary {
  cursor: pointer; list-style: none;
  padding: 12px 2px; min-height: 44px;
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--ink);
}
.ut-odgovori-summary::-webkit-details-marker { display: none; }
.ut-odgovori-summary::after {
  content: '▾'; color: var(--muted); font-size: 12px;
  transition: transform .15s ease;
}
.ut-odgovori[open] .ut-odgovori-summary::after { transform: rotate(180deg); }
.ut-odgovori-summary:focus-visible { outline: 2px solid var(--orange-dark); outline-offset: 2px; }
.ut-odgovori .ut-pregled { margin-top: 10px; }

/* ------------------------------------------------------------------
   Hierarhija gumbov

   En glavni gumb na zaslon. Drugo po pomembnosti je obrobljeno, redka
   dejanja pa so tiha podčrtana povezava. Dva polna oranžna gumba drug
   ob drugem ne povesta, katera je pot naprej.
   ------------------------------------------------------------------ */

.ut-dejanja { gap: 10px; }

.ut-tiho { margin: 14px 0 0; font-size: 13.5px; line-height: 1.5; }
.ut-tiho a,
.ut-tiho button {
  color: var(--muted); text-decoration: underline;
  text-underline-offset: 3px;
  background: none; border: 0; margin: 0;
  font: inherit; cursor: pointer;
  /* Tiha povezava je še vedno tarča za prst: 12 px nad in pod besedilom
     jo spravi čez 44 px, ne da bi zrasla v gumb. */
  display: inline-block; padding: 12px 0;
}
.ut-tiho a:hover,
.ut-tiho button:hover { color: var(--ink); }
.ut-tiho a:focus-visible,
.ut-tiho button:focus-visible { outline: 2px solid var(--orange-dark); outline-offset: 2px; }

.ut-tiho-dno { margin-top: 28px; text-align: center; }

/* ------------------------------------------------------------------
   Povzetek — kaj vam predlagam
   ------------------------------------------------------------------ */

.ut-pomen {
  font-size: 15.5px; line-height: 1.6; color: var(--ink);
  max-width: 560px; margin: 12px auto 0;
}

.ut-predlog {
  margin: 32px auto 0; max-width: 620px;
  border: 1px solid var(--orange); border-radius: var(--radius);
  background: #fff; padding: 26px 24px; text-align: left;
  /* Edini poudarjeni okvir na strani — tu je pot naprej. */
  box-shadow: 0 1px 0 var(--orange);
}
.ut-predlog-h3 {
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--orange-text); margin: 0 0 10px;
}
.ut-predlog-tecaj { font-size: 19px; line-height: 1.35; color: var(--ink); margin: 0; }
.ut-predlog-podrobnosti {
  font-size: 13.5px; line-height: 1.55; color: var(--muted); margin: 8px 0 0;
}
.ut-predlog .ut-dejanja { margin-top: 20px; justify-content: flex-start; }
.ut-predlog-drobno {
  font-size: 12.5px; line-height: 1.55; color: var(--muted-2); margin: 14px 0 0;
}

/* ------------------------------------------------------------------
   Poročilo na e-pošto — vrstica, ne škatla
   ------------------------------------------------------------------ */

/* Vrstica, ne škatla. Edina črta je tanka ločnica nad odsekom; okvirja,
   ozadja in zaobljenih vogalov tu ni. Prej sta bila v datoteki dva
   bloka za isti odsek in ostanki starega so risali okvir, ki tja ne
   sodi — zato je zdaj samo ta. */
.ut-mail {
  margin: 32px auto 0; max-width: 620px;
  border: 0; border-radius: 0; background: none; box-shadow: none;
  border-top: 1px solid var(--line);
  padding: 24px 0 0;
  text-align: left;
}
.ut-mail-h3 { font-size: 15px; margin: 0 0 6px; color: var(--ink); }
.ut-mail-ponudba { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin: 0 0 14px; }

.ut-mail-vrstica { display: flex; gap: 10px; align-items: stretch; margin-bottom: 12px; }
.ut-mail-vrstica input[type=email] {
  flex: 1 1 auto; min-width: 0; min-height: 46px; padding: 11px 14px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: #fff; font-size: 15px; color: var(--ink);
}
.ut-mail-vrstica input[type=email]:focus {
  outline: 2px solid var(--orange-dark); outline-offset: 1px; border-color: var(--orange-dark);
}
.ut-mail-vrstica .btn { flex: 0 0 auto; width: auto; white-space: nowrap; }
.ut-mail .ut-privolitev { margin-bottom: 8px; }
.ut-mail-drobno { margin-top: 10px; }

@media (max-width: 700px) {
  .ut-izid { padding: 16px; }
  .ut-izid-tock { font-size: 32px; }
  .ut-izid-sodba { font-size: 15.5px; }

  .ut-predlog { padding: 20px 18px; margin-top: 28px; }
  .ut-predlog-tecaj { font-size: 17px; }
  .ut-predlog .ut-dejanja { flex-direction: column; }
  .ut-predlog .ut-dejanja .btn { width: 100%; justify-content: center; }

  /* Polje in gumb pod sabo: v vrsti bi bilo polje pri 390 px preozko za
     e-naslov, gumb pa bi se lomil na dve vrstici. */
  .ut-mail-vrstica { flex-direction: column; }
  .ut-mail-vrstica .btn { width: 100%; justify-content: center; }
}

/* Rezultat mora po drsenju pristati pod lepljivo glavo, ne pod njo. */
.ut-izid { scroll-margin-top: 90px; }
@media (max-width: 700px) { .ut-izid { scroll-margin-top: 70px; } }

/* ==================================================================
   v46 — MED REŠEVANJEM SE STRAN UMAKNE

   Dokler je test odprt, nosi <body> razred .ut-tece. Iz njega sledi
   dvoje: druge poti na test izginejo, odsek testa pa dobi svojo
   podlago in se loči od kartic okoli sebe.
   ================================================================== */

/* ------------------------------------------------------------------
   Poti na test med reševanjem

   Plavajoči gumb »Opravite brezplačen test« je med reševanjem vabilo
   na tisto, kar človek pravkar dela. Enako povezava v nogi in gumbi v
   odsekih niže po strani.

   Kartica v junaku ostane: iz nje je test odprl in stoji nad njim, ne
   čez zaslon. Če bi ji vzeli gumb, bi ostala luknja tam, kjer je
   človek pravkar kliknil.
   ------------------------------------------------------------------ */

.ut-tece .floating-cta { display: none !important; }

/* Najprej vse, nato vrnemo tisto v junakovi kartici. :not() s potomcem
   zna v starejših brskalnikih podreti celo pravilo — dva stavka sta
   dolgočasnejša in delujeta povsod. */
.ut-tece .js-open-test { display: none !important; }
.ut-tece #test .js-open-test { display: inline-flex !important; }

/* Odseki, ki obstajajo samo zato, da peljejo na test. */
.ut-tece .why-cta,
.ut-tece .test-teaser + .cta-banner { display: none; }

/* ------------------------------------------------------------------
   Odsek testa dobi svojo podlago
   ------------------------------------------------------------------ */

.ut-tece .ut-zacetek-sec {
  background: var(--cream);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--razmik-odseka);
  /* Najmanj cel zaslon, da se pod prvim vprašanjem ne vidi naslednja
     kartica in ne tekmuje za pozornost. */
  min-height: 100vh;
  min-height: 100svh;
}

/* Vrh odseka pod lepljivo glavo. Glava ostane — brez nje človek ne ve,
   kje je, in nima poti nazaj. */
.ut-zacetek-sec { scroll-margin-top: 64px; }

@media (max-width: 700px) {
  .ut-tece .ut-zacetek-sec { padding-bottom: 56px; }
  .ut-zacetek-sec { scroll-margin-top: 56px; }
}

/* Tiha druga vrstica pod glavnim priporočilom. Povezava, ne gumb: to je
   opomba, da nekaj takega obstaja, in ne sme tekmovati z gumboma nad njo. */
.ut-predlog-tudi {
  margin: 14px 0 0; padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 13px; line-height: 1.55; color: var(--muted);
}
.ut-predlog-tudi a {
  color: var(--muted); text-decoration: underline; text-underline-offset: 3px;
  display: inline-block; padding: 6px 0;
}
.ut-predlog-tudi a:hover { color: var(--ink); }

/* ------------------------------------------------------------------
   Vrstica ravni (v51)
   ------------------------------------------------------------------
   Nadomestila je troje: oznako »Raven 1 od 6« s črto napredka,
   tiho povezavo »Začnite pri višji ravni« in izbirnik »Kje želite
   začeti?« na strani testa. Pravila .ut-napredek, .ut-crta,
   .ut-zacetne in .ut-visja so s tem odpadla.

   Šest gumbkov v eni vrsti tudi pri 390 px: oznake so dolge dva
   znaka in pri 354 px razpoložljive širine ostane 51 px na gumbek,
   kar je nad 44 px tarčo. flex-wrap je vseeno vklopljen — če bi kdaj
   prišla sedma raven ali daljša oznaka, se vrstica prelomi sama,
   namesto da bi gumbke stisnila pod tarčo.
   ------------------------------------------------------------------ */

.ut-ravni {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 24px;
}

.ut-raven {
  /* flex: 1 1 0 z min-width: 44px — gumbki si razdelijo vrstico enako,
     a se ne stisnejo pod tarčo za prst. */
  flex: 1 1 0;
  min-width: 44px;
  min-height: 44px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;

  padding: 8px 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;

  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  /* Prihodnje ravni so blede — vidne, a ne vabijo. */
  color: var(--muted-2);

  transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.ut-raven:hover { border-color: var(--ink); color: var(--ink); }

.ut-raven:focus-visible {
  outline: 2px solid var(--orange-dark);
  outline-offset: 2px;
}

/* Opravljena: polna barva in kljukica. */
.ut-raven-ok {
  color: #33562D;
  border-color: #C4D8C0;
  background: #F2F7F0;
}
.ut-raven-ok .ut-raven-znak { color: #5C8A52; }

/* Padla: veriga se tu ustavi. Ista barvna govorica kot .ut-izid-ne. */
.ut-raven-ne {
  color: #7A4A28;
  border-color: #E6CDBB;
  background: #FBF3ED;
}
.ut-raven-ne .ut-raven-znak { color: var(--orange-dark); }

/* Trenutna: poudarjena. Stoji nad ostalima dvema stanjema, ker je
   pomembnejše, KJE si, kot kaj je bilo. */
.ut-raven-zdaj {
  color: var(--ink);
  border-color: var(--orange-dark);
  background: var(--cream);
  box-shadow: inset 0 0 0 1px var(--orange-dark);
}

.ut-raven-znak { font-size: 12px; line-height: 1; }

/* Opozorilo pred izgubo odgovorov.
   Ko se pokaže, se vprašanja pod njim odmaknejo — pri 390 px za 49 px,
   ker se stavek tam lomi v tri vrstice. Prostora zanj ne rezerviramo:
   49 px praznine nad prvim vprašanjem ves čas je slabše kot enkraten
   premik ob kliku, ki ga je človek pravkar sam sprožil in katerega
   besedilo je tisto, kar v tistem trenutku bere.

   Negativni zgornji rob poje razmik .ut-ravni pod vrstico, da opozorilo
   pripada vrstici in ne vprašanjem. */
.ut-ravni-opozorilo {
  margin: -16px 0 20px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--orange-text);
}

@media (max-width: 700px) {
  .ut-ravni { gap: 6px; margin-bottom: 20px; }
  .ut-raven { font-size: 13.5px; padding: 8px 2px; gap: 4px; }
  .ut-ravni-opozorilo { margin: -12px 0 16px; }
}

/* Poved o stopnjevanju navzdol na povzetku.
   Stoji med imenom ravni in razlago, kaj ta pomeni — tam, kjer bralec
   išče odgovor na »zakaj je nižja, kot sem mislil«. */
.ut-zacetna-pot {
  margin: 0 auto 10px;
  max-width: 520px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--orange-text);
}

/* v83: ocena »pod B1« — besedilo je daljše od dvočrkovne oznake ravni
   (»below B1«, »ispod B1«), zato manjše, da ostane v eni vrstici tudi
   pri 390 px. */
.ut-znak-pod { font-size: 44px; }
@media (max-width: 700px) {
  .ut-znak-pod { font-size: 36px; }
}

/* ==================================================================
   v84 — rezultat na zaslonu ravni

   Vrstni red je predpisan: ocena, tečaj, e-pošta (glavni poziv),
   pogovor ali prijava, šele nato drobneje nižja ali višja raven. Pri
   390 px mora biti polje za e-pošto vidno brez drsenja, zato so odmiki
   tesnejši kot v nekdanjem povzetku, oznaka ravni in naziv pa stojita v
   eni vrstici.
   ================================================================== */

.ut-rezultat { margin: 0 0 8px; }

.ut-ocena .eyebrow { display: block; margin: 0 0 4px; }
.ut-ocena-h2 {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px 14px;
  margin: 0; font-size: inherit; line-height: 1.2;
}
.ut-ocena-h2 .ut-znak { margin: 0; font-size: 48px; }
.ut-ocena-h2 .ut-znak-pod { font-size: 38px; }
.ut-ocena-h2 .ut-znak-ime { flex: 1 1 220px; min-width: 0; margin: 0; font-size: 20px; line-height: 1.3; }
.ut-ocena .ut-zacetna-pot { margin: 8px 0 0; max-width: none; }
.ut-ocena .ut-pomen { margin: 8px 0 0; max-width: none; font-size: 15px; }

.ut-rezultat .ut-predlog { margin: 20px 0 0; max-width: none; padding: 16px 20px; }
.ut-rezultat .ut-mail { margin: 20px 0 0; max-width: none; padding-top: 18px; }
.ut-rezultat-dejanja { margin-top: 18px; }
.ut-rezultat .ut-predlog-drobno { margin-top: 10px; }
.ut-rezultat .ut-predlog-tudi { margin-top: 10px; }

/* Postranska pot: tiha, pod vsem drugim. Poved najprej, gumb pod njo. */
.ut-postranska { margin: 24px 0 0; padding-top: 14px; border-top: 1px solid var(--line); }
.ut-postranska-opis { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.ut-postranska .ut-tiho { margin: 0; }

.ut-podrobnosti { margin: 32px 0 20px; }
.ut-podrobnosti .ut-h3:first-child { margin-top: 0; }
.ut-podrobnosti .ut-lestvica,
.ut-podrobnosti .ut-teme { margin: 0; max-width: none; }
.ut-podrobnosti .ut-lestvica { grid-template-columns: repeat(auto-fill, minmax(84px, 110px)); }
.ut-podrobnosti .ut-lestvica-v { text-align: center; }

@media (max-width: 700px) {
  .ut-izid { margin-bottom: 14px; }
  .ut-ocena-h2 { gap: 2px 12px; }
  .ut-ocena-h2 .ut-znak { font-size: 40px; }
  .ut-ocena-h2 .ut-znak-pod { font-size: 30px; }
  .ut-ocena-h2 .ut-znak-ime { font-size: 17px; flex-basis: 160px; }
  .ut-ocena .ut-pomen { font-size: 14.5px; line-height: 1.5; }
  .ut-rezultat .ut-predlog { margin-top: 14px; padding: 12px 14px; }
  .ut-rezultat .ut-predlog-tecaj { font-size: 16px; }
  .ut-rezultat .ut-predlog-podrobnosti { margin-top: 4px; font-size: 13px; }
  .ut-rezultat .ut-mail { margin-top: 16px; padding-top: 14px; }
  .ut-rezultat .ut-mail-ponudba { margin-bottom: 10px; }
}