/* ═══════════════════════════════════════════════════════════════════════════
   hujšajmo.si — design system
   Izhaja iz koncepta E »Mera + Žlica«: natančnost podatkov, občutek izdelka.

   Red v datoteki: pisave → žetoni → osnova → postavitev → tipografija →
   komponente → pomožni razredi. Komponente uporabljajo IZKLJUČNO žetone;
   če se kje pojavi gola barva ali velikost, je to napaka, ne izjema.

   Pisavi sta na lastnem strežniku (SIL Open Font License 1.1). Prej je šlo
   98 KB z Googlove domene po kritični poti vsake strani in pred privolitvijo
   za piškotke; zdaj je 55 KB z naše domene in nobenega tujega zahtevka.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Pisave ──────────────────────────────────────────────────────────────── */

/* Plus Jakarta Sans govori: naslovi, besedilo, vmesnik. Spremenljiva 400–800. */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/pisave/jakarta-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/pisave/jakarta-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Archivo šteje. Nabor je zožen na števke in ločila (2,8 KB namesto 68 KB),
   zato se za vse ostalo samodejno uporabi Jakarta — tako tudi mora biti. */
@font-face {
  font-family: "Archivo Stevke";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/pisave/archivo-stevke-600.woff2") format("woff2");
  unicode-range: U+20, U+25, U+2B-2D, U+2E-39, U+2F;
}
@font-face {
  font-family: "Archivo Stevke";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/pisave/archivo-stevke-700.woff2") format("woff2");
  unicode-range: U+20, U+25, U+2B-2D, U+2E-39, U+2F;
}

/* ── Žetoni ──────────────────────────────────────────────────────────────── */

:root {
  /* Paleta — surove vrednosti. V komponentah se NE uporabljajo neposredno. */
  --zel-50:   #F1F5EF;
  --zel-75:   #F7FAF6;
  --zel-100:  #E2E8DE;
  --zel-200:  #C9D8C4;
  --zel-300:  #A9C3A2;
  --zel-400:  #8FBF63;
  --zel-500:  #3B7A4E;
  --zel-600:  #2F6440;
  --zel-900:  #15200F;
  --olj-600:  #38491C;
  --jan-50:   #FDF8EC;
  --jan-200:  #EBDCB6;
  --jan-500:  #D99A2B;
  --jan-600:  #C98A1E;
  --jan-800:  #7A5612;
  --siv-500:  #5F6B58;
  --bela:     #FFFFFF;

  /* Pomen — to uporabljajo komponente. */
  --oz:            var(--zel-50);    /* ozadje strani */
  --plo:           var(--bela);      /* ploskev kartice */
  --dvig:          var(--zel-75);    /* vzdignjena ploskev v kartici */
  --tinta:         var(--zel-900);   /* glavno besedilo */
  --mehka:         var(--siv-500);   /* drugotno besedilo */
  --rob:           var(--zel-100);
  --rob-mocan:     var(--zel-200);
  /* Rob vnosnih polj in drugih kontrol nosi informacijo, KJE kontrola je, zato
     zanj velja WCAG 1.4.11 (3:1). Izmerjeno: 3,54 proti beli, 3,21 proti ozadju
     strani. Robovi kartic tega praga ne potrebujejo — kartico prepoznaš po
     vsebini, ne po črti. */
  --rob-polje:     #7F8C79;
  --dejanje:       var(--zel-500);
  --dejanje-nad:   var(--zel-600);
  --na-dejanju:    var(--bela);      /* besedilo na barvi dejanja */
  --stevilka:      var(--olj-600);   /* velike vrednosti */

  /* Hranila — ista barva v obroču, palicah in legendi. */
  --hr-b:   var(--zel-500);
  --hr-m:   var(--jan-500);
  --hr-oh:  var(--zel-400);
  --hr-sled: #EDF1E9;

  /* Stanje podatka. Oznaka »preverjeno« se sme uporabiti SAMO ob zapisanem
     viru — glej odločitev GE-KO #27 in docs/DESIGN-SYSTEM.md. */
  --ok-besedilo:    var(--zel-600);
  --caka-besedilo:  var(--jan-800);
  --caka-ozadje:    var(--jan-50);
  --caka-rob:       var(--jan-200);

  /* Tipografija */
  --pisava:    "Plus Jakarta Sans", ui-sans-serif, system-ui, "Segoe UI", sans-serif;
  --pisava-st: "Archivo Stevke", "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;

  --f-3xs: 0.6875rem;  /* 11 — drobne oznake */
  --f-2xs: 0.75rem;    /* 12 */
  --f-xs:  0.8125rem;  /* 13 */
  --f-s:   0.875rem;   /* 14 */
  --f-m:   1rem;       /* 16 — osnovno besedilo */
  --f-l:   1.125rem;   /* 18 */
  --f-xl:  1.375rem;   /* 22 — naslov strani */
  --f-2xl: 1.75rem;    /* 28 */
  --f-3xl: 2.25rem;    /* 36 */
  --f-odgovor: clamp(2.75rem, 13vw, 3.5rem);  /* velika vrednost */

  --vrsta-tesna: 1.18;
  --vrsta:       1.6;
  --vrsta-zracna: 1.72;
  --sled-tesno:  -0.03em;
  --sled-st:     -0.045em;

  /* Razmiki — korak 4 px */
  --p1: 4px;  --p2: 8px;  --p3: 12px; --p4: 16px; --p5: 20px;
  --p6: 24px; --p7: 32px; --p8: 40px; --p9: 48px; --p10: 64px;

  /* Zaobljenost — po vlogi, ne ena za vse */
  --r-xs: 6px;    /* značka, drobna ikona */
  --r-s:  8px;    /* gumb v kartici */
  --r-m:  12px;   /* notranja ploskev */
  --r-l:  18px;   /* kartica */
  --r-xl: 22px;   /* slika, junak */
  --r-krog: 999px;

  /* Motion. Vse se zaključi; nič se ne ponavlja v nedogled. */
  --hitro:   180ms;
  --srednje: 420ms;
  --pocasi:  700ms;
  --prozno:  cubic-bezier(.34, 1.4, .64, 1);   /* dejanja — rahel odboj */
  --mehko:   cubic-bezier(.2, .8, .3, 1);      /* prikaz vrednosti */

  --senca-dno: 0 -1px 0 var(--rob);

  /* Dvig. Senca ni črna, ampak tinta (--zel-900) z nizko krovnostjo: črna na
     toplem papirju posivi in naredi ploskev umazano, tinta pa ostane v družini
     palete. Tri stopnje, ker je dvig informacija o plasti, ne okras:
       1  ploskev leži na strani      (kartica v mirovanju)
       2  ploskev je nad stranjo      (kartica pod kazalcem, lebdeči pas)
       3  ploskev je nad vsem         (pojavno okno) */
  --senca-1: 0 1px 2px rgba(21, 32, 15, .05), 0 1px 1px rgba(21, 32, 15, .03);
  --senca-2: 0 6px 16px rgba(21, 32, 15, .08), 0 2px 5px rgba(21, 32, 15, .04);
  --senca-3: 0 16px 36px rgba(21, 32, 15, .13), 0 5px 10px rgba(21, 32, 15, .06);

  /* Temna ploskev. Stran je bila tonsko plosko bela: ozadje --zel-50, kartice
     bele, razlika med njima 2 %. Oko tega ne prebere kot plast. Temno polje da
     strani dno, ob katero se svetle kartice naslonijo. */
  --temno:         var(--zel-900);
  --temno-mehko:   #1E2D18;
  --na-temnem:     #EAF0E4;
  --na-temnem-meh: #A8B8A0;
  --sirina:       33rem;   /* bralni stolpec — proza in obrazci */
  --sirina-stran: 90rem;   /* 1440 px — mreža strani na namizju */
  /* Najdaljša vrstica besedila. Enota ch meri širino ničle, ta pa je v tej
     pisavi precej širša od povprečne črke: pri 68ch se je vrstica izrisala
     kot 697 px in sprejela IZMERJENIH 92 znakov, priporočeni razpon pa je
     45–75. Vrednost je zato določena po meritvi, ne po občutku. */
  --proza:        52ch;

  color-scheme: light;
}

/* ── Osnova ──────────────────────────────────────────────────────────────── */

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

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

/* Noga se drži dna okna tudi na kratkih straneh.
   Brez tega je na /jed/jota (926 px vsebine v 1259 px oknu) noga lebdela sredi
   zaslona, pod njo pa je zijala praznina — stran je bila videti nedokončana. */
body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--oz);
  color: var(--tinta);
  font: 400 var(--f-m)/var(--vrsta) var(--pisava);
  -webkit-font-smoothing: antialiased;
}
/* width: 100% ni odvečen. .ovoj ima margin-inline: auto; dokler je bil body
   blok, je to dalo polno širino do max-width in sredinsko poravnavo. Kot flex
   element pa samodejna stranska robova po specifikaciji IZKLOPITA raztegnitev
   (align-self: stretch ne velja, kadar je v prečni osi margin: auto), zato se
   je main skrčil na vsebino: /kalkulator/itm je bil 673 px namesto 1440 px.
   Eksplicitna širina vrne velikost, robova pa poskrbita samo za sredino. */
body > main { flex: 1 0 auto; width: 100%; }
body > .noga, body > footer { flex: none; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--dejanje);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* Vsaka animacija v tem sistemu se ugasne, ne upočasni. Končna stanja
   morajo biti vidna tudi brez nje — nič se ne skriva v opacity: 0. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

/* ── Preskok na vsebino ──────────────────────────────────────────────────── */
/*
   Skrito do fokusa, a VEDNO v drevesu in fokusabilno: display:none ali
   visibility:hidden bi element vzela iz vrstnega reda fokusa in povezava ne bi
   delovala. Zato premik izven zaslona.
*/
.preskok {
  position: absolute; left: var(--p4); top: 0;
  transform: translateY(-120%);
  z-index: 30;
  padding: var(--p3) var(--p4);
  background: var(--dejanje); color: var(--na-dejanju);
  font-size: var(--f-s); font-weight: 600; text-decoration: none;
  border-radius: 0 0 var(--r-m) var(--r-m);
  transition: transform var(--hitro) ease;
}
.preskok:focus-visible { transform: translateY(0); outline-offset: -4px; }

/* Cilj preskoka ne sme dobiti obrisa ob kliku — fokus je tam zato, da bralnik
   zaslona nadaljuje branje, ne zato, da bi se nekaj obrobilo. */
#vsebina:focus { outline: none; }

/* ── Postavitev ──────────────────────────────────────────────────────────── */

.ovoj {
  max-width: var(--sirina);
  margin-inline: auto;
  padding-inline: var(--p4);
}
/* .ovoj--siroko je bil upokojen 30. 10. 2026: obstajal je zato, da je admin
   ušel 528-pikselskemu bralnemu stolpcu. Odkar je osnovni vsebnik mreža strani
   (1440 px), je modifikator le še način, da se glava in vsebina razideta. */

.sklad       { display: grid; gap: var(--p3); }
.sklad--tesno { gap: var(--p2); }
.sklad--zracno { gap: var(--p5); }

.vrstica {
  display: flex; align-items: center; gap: var(--p3);
}
.vrstica--razmakni { justify-content: space-between; }
.vrstica--vrh { align-items: flex-start; }

/* ── Tipografija ─────────────────────────────────────────────────────────── */

h1, h2, h3 { margin: 0; letter-spacing: var(--sled-tesno); line-height: var(--vrsta-tesna); text-wrap: balance; }
h1 { font-size: var(--f-xl); font-weight: 800; }
h2 { font-size: var(--f-m);  font-weight: 700; }
h3 { font-size: var(--f-s);  font-weight: 700; }

p { margin: 0; }
.besedilo { line-height: var(--vrsta-zracna); max-width: 68ch; }
.drobno   { font-size: var(--f-xs); color: var(--mehka); }
.najdrobneje { font-size: var(--f-3xs); color: var(--mehka); }

/* Števke so vedno tabelarne, da se v stolpcih poravnajo. */
.st {
  font-family: var(--pisava-st);
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

.pot { font-size: var(--f-2xs); color: var(--mehka); }
.pot a { color: var(--dejanje); text-underline-offset: 3px; }

/* ── Znak in napis ───────────────────────────────────────────────────────── */

.logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.znak { width: 32px; height: 32px; flex: none; border-radius: 9px; background: var(--olj-600); }
.znak--l { width: 48px; height: 48px; border-radius: 13px; }
.znak--s { width: 20px; height: 20px; border-radius: 6px; }
.znak .lok { fill: none; stroke-linecap: round; stroke-width: 3.2; }
.znak--s .lok { stroke-width: 4; }
/* Obseg kroga pri r = 10,5 je 65,97. Dolžine lokov so 25 / 19 / 11 enot
   (≈ 46 / 35 / 20 %), zasuki −90° / 68° / 190°, tako da se med njimi odpre
   enakomerna reža in se nikjer ne prekrivajo. */
.znak .lok--oh { stroke: var(--hr-oh); stroke-dasharray: 25 41; }
.znak .lok--m  { stroke: var(--hr-m);  stroke-dasharray: 19 47; }
.znak .lok--b  { stroke: #CFE6AE;      stroke-dasharray: 11 55; }
.znak .sredina { fill: var(--hr-sled); stroke: none; }

.napis { font-weight: 800; font-size: var(--f-l); letter-spacing: -.035em; line-height: 1; }
.napis .pika { color: var(--dejanje); }
.napis .slogan {
  display: block; font-size: var(--f-3xs); font-weight: 500;
  color: var(--mehka); margin-top: 2px; letter-spacing: 0;
}

/* Loki se izrišejo enkrat ob nalaganju in nato mirujejo. */
.znak--animiran .lok { stroke-dashoffset: var(--dolzina); animation: lok var(--srednje) both; }
.znak--animiran .lok--oh { --dolzina: 25; animation-delay: 50ms; }
.znak--animiran .lok--m  { --dolzina: 19; animation-delay: 180ms; }
.znak--animiran .lok--b  { --dolzina: 11; animation-delay: 310ms; }
@keyframes lok { to { stroke-dashoffset: 0; } }

/* ── Gumbi ───────────────────────────────────────────────────────────────── */

.gumb {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--p2);
  padding: var(--p3) var(--p5); border: 1px solid transparent; border-radius: var(--r-m);
  font-size: var(--f-s); font-weight: 700; text-decoration: none; cursor: pointer;
  transition: background-color var(--hitro) ease, color var(--hitro) ease,
              border-color var(--hitro) ease, transform var(--srednje) var(--prozno);
}
.gumb:active { transform: scale(.975); }
.gumb svg { width: 19px; height: 19px; flex: none; }

.gumb--glavni { background: var(--dejanje); color: var(--na-dejanju); }
.gumb--glavni:hover { background: var(--dejanje-nad); }
.gumb--tih { background: var(--plo); color: var(--tinta); border-color: var(--rob-polje); }
.gumb--tih:hover { background: var(--oz); border-color: var(--rob-mocan); }
.gumb--velik { padding: var(--p4) var(--p6); font-size: var(--f-m); border-radius: var(--r-l); }

.gumb-ikona {
  width: 38px; height: 38px; flex: none; display: grid; place-content: center;
  border: 1px solid var(--rob-polje); border-radius: var(--r-krog); background: var(--plo);
  cursor: pointer; color: var(--mehka);
  transition: transform var(--srednje) var(--prozno), color var(--hitro) ease,
              border-color var(--hitro) ease;
}
.gumb-ikona:hover { color: var(--tinta); border-color: var(--rob-mocan); }
.gumb-ikona:active { transform: scale(.9); }
.gumb-ikona[aria-pressed="true"] { color: var(--dejanje); border-color: var(--zel-300); }
.gumb-ikona[aria-pressed="true"] svg { fill: currentColor; animation: pok var(--srednje) var(--prozno); }
@keyframes pok { 0% { transform: scale(1); } 45% { transform: scale(1.28); } 100% { transform: scale(1); } }

/* ── Kartica ─────────────────────────────────────────────────────────────── */

.kartica {
  background: var(--plo); border: 1px solid var(--rob);
  border-radius: var(--r-l); overflow: hidden;
}
.kartica__glava {
  display: flex; align-items: center; justify-content: space-between; gap: var(--p3);
  padding: var(--p4) var(--p4) 0;
}
.kartica__glava .oznaka { font-size: var(--f-2xs); color: var(--mehka); }
.kartica__telo { padding: var(--p4); }
.kartica__telo--tesno { padding: var(--p3) var(--p4) var(--p4); }

/* ── Značka stanja ───────────────────────────────────────────────────────── */

.znacka {
  display: inline-flex; align-items: center; gap: var(--p2);
  padding: 6px var(--p3) 6px 10px; border-radius: var(--r-krog);
  font-size: var(--f-2xs); font-weight: 600;
  background: var(--plo); border: 1px solid var(--rob);
}
.znacka svg { width: 15px; height: 15px; flex: none; }
.znacka--ok { color: var(--ok-besedilo); }
.znacka--caka {
  color: var(--caka-besedilo); background: var(--caka-ozadje); border-color: var(--caka-rob);
}
/* En utrip pove, da gre za odprto opravilo — in neha. */
.znacka--caka svg { animation: utrip 2.6s ease-in-out 3; }
@keyframes utrip { 0%, 70%, 100% { opacity: 1; } 85% { opacity: .35; } }

/* ── Preklop (porcija / 100 g) ───────────────────────────────────────────── */

.preklop {
  position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding: var(--p1); border-radius: var(--r-krog);
  background: var(--plo); border: 1px solid var(--rob-polje);
}
.preklop button {
  position: relative; z-index: 1; border: 0; background: none; cursor: pointer;
  padding: 10px var(--p2); border-radius: var(--r-krog);
  font-weight: 600; font-size: var(--f-xs); color: var(--mehka);
  transition: color var(--hitro) ease;
}
.preklop button[aria-selected="true"] { color: var(--na-dejanju); }
.preklop__drsnik {
  position: absolute; z-index: 0; inset: var(--p1) 50% var(--p1) var(--p1);
  border-radius: var(--r-krog); background: var(--dejanje);
  transition: transform var(--srednje) var(--prozno);
}
.preklop[data-izbran="2"] .preklop__drsnik { transform: translateX(100%); }

/* ── Odgovor (velika vrednost) ───────────────────────────────────────────── */

.odgovor {
  display: grid; grid-template-columns: 1fr auto; gap: var(--p4); align-items: center;
  padding: var(--p5); border-radius: var(--r-l);
  background: var(--plo); border: 1px solid var(--rob);
}
.odgovor__st { display: flex; align-items: baseline; gap: 7px; }
.odgovor__st b {
  font-family: var(--pisava-st); font-weight: 700;
  font-size: var(--f-odgovor); line-height: .9; letter-spacing: var(--sled-st);
  color: var(--stevilka); font-variant-numeric: tabular-nums lining-nums;
}
.odgovor__st i { font-style: normal; font-weight: 600; font-size: var(--f-m); color: var(--mehka); }
.odgovor__ob { margin-top: var(--p2); font-size: var(--f-xs); color: var(--mehka); }
.odgovor__ob i { font-style: normal; white-space: nowrap; }

/* ── Obroč razmerja hranil ───────────────────────────────────────────────── */

.obroc { width: 92px; height: 92px; flex: none; }
.obroc circle { fill: none; stroke-width: 9; stroke-linecap: round; transform-origin: 50% 50%; }
.obroc .sled { stroke: var(--hr-sled); }
.obroc .del  { stroke-dashoffset: var(--dolzina); animation: lok var(--pocasi) var(--mehko) both; }
.obroc .del--oh { stroke: var(--hr-oh); animation-delay: 150ms; }
.obroc .del--m  { stroke: var(--hr-m);  animation-delay: 300ms; }
.obroc .del--b  { stroke: var(--hr-b);  animation-delay: 450ms; }

/* ── Vrstica z vrednostjo in palico ──────────────────────────────────────── */

.mera { display: grid; gap: 5px; padding: 9px 0; }
.mera__vrh { display: flex; align-items: baseline; justify-content: space-between; gap: var(--p3); font-size: var(--f-s); }
.mera__vrh b { font-family: var(--pisava-st); font-weight: 600; font-variant-numeric: tabular-nums; }
.mera__delez { color: var(--mehka); font-size: var(--f-xs); font-weight: 500; margin-left: 7px; }
.mera--poudarjena .mera__vrh { font-weight: 700; }

.palica { height: 7px; border-radius: 4px; background: var(--hr-sled); overflow: hidden; }
.palica i {
  display: block; height: 100%; border-radius: 4px; background: var(--rob-mocan);
  transform-origin: left; transform: scaleX(0);
  animation: raste var(--pocasi) var(--mehko) forwards;
}
@keyframes raste { to { transform: scaleX(1); } }
.palica--b i  { background: var(--hr-b);  animation-delay: 250ms; }
.palica--m i  { background: var(--hr-m);  animation-delay: 350ms; }
.palica--oh i { background: var(--hr-oh); animation-delay: 450ms; }
.palica--ta i { background: var(--stevilka); animation-delay: 200ms; }

/* ── Trak razmerja hranil (alternativa obroču, kjer je prostor ozek) ─────── */

.makro-trak { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--hr-sled); }
.makro-trak i { display: block; height: 100%; }
.makro-legenda { display: flex; flex-wrap: wrap; gap: var(--p2) var(--p4); margin-top: var(--p3); font-size: var(--f-xs); color: var(--mehka); }
.makro-legenda span { display: inline-flex; align-items: center; gap: 7px; }
.makro-legenda i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.m-oh { background: var(--hr-oh); }
.m-b  { background: var(--hr-b); }
.m-m  { background: var(--hr-m); }

/* Vrsta značk v eni vrstici. */
.znacke { display: flex; flex-wrap: wrap; gap: var(--p2); }

/* ── Vrstica s predmetom (jed, recept) ───────────────────────────────────── */

/* Seznam /jedi OSTANE v vrsticah in ne postane mreža kartic. Pri 79 jedeh je
   vrstica prava oblika: bereš jih po številki, ne po sliki, in mreža bi
   pomenila 1,9 MB sličic na eni strani — natanko to, kar je prejšnjo različico
   podrlo. Vrstica pa sme biti lepša: sličica je 72 px namesto 56 (ista
   datoteka, bolj uporabljena), ploskev nosi dvig in se ob kazalcu odzove. */
.predmet {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--p3);
  align-items: center; padding: var(--p3); text-decoration: none;
  border: 1px solid var(--rob); border-radius: var(--r-m); background: var(--plo);
  box-shadow: var(--senca-1);
  transition: border-color var(--hitro) ease, background-color var(--hitro) ease,
              transform var(--hitro) var(--mehko), box-shadow var(--hitro) ease;
}
@media (hover: hover) {
  .predmet:hover {
    border-color: var(--rob-mocan); background: var(--plo);
    transform: translateY(-2px); box-shadow: var(--senca-2);
  }
}
.predmet:active { transform: translateY(0); transition-duration: 80ms; }
.predmet img {
  width: 72px; height: 72px; border-radius: var(--r-m); object-fit: cover;
}
.predmet__ime { font-weight: 700; font-size: var(--f-s); }
/* Presledek med imenom in opisom ne sme biti odvisen od preloma vrstice v
   izvorni kodi. Kjer sta <span> lepljena skupaj (kalkulatorji, povezava na
   recept), se je izpisalo »Dnevne kalorijeKoliko kalorij …«. */
.predmet__ob { font-size: var(--f-xs); color: var(--mehka); }
.predmet__ime + .predmet__ob { margin-left: .35em; }
.predmet__ob i { font-style: normal; white-space: nowrap; }
.predmet__st {
  font-family: var(--pisava-st); font-weight: 700; font-size: var(--f-xl);
  letter-spacing: -.04em; text-align: right; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.predmet__st small { display: block; font-size: var(--f-3xs); font-weight: 400; color: var(--mehka); margin-top: 3px; }

/* ── Slikovna kartica ────────────────────────────────────────────────────── */
/*
   ZAKAJ POLEG .predmet IN NE NAMESTO NJE. Vrstica ostane prava oblika za
   navigacijo (»Recept za joto ›«, kalkulatorji na domači strani) in za goste
   sezname, kjer je fotografija nepomembna. Kartica je za mesta, kjer je
   fotografija argument: seznam receptov, najbolj iskane jedi, kategorije.
   Obe obliki ostaneta, vsaka na svojem mestu.

   ZAKAJ SI JO ZDAJ SPET LAHKO PRIVOŠČIMO. Kartice so tu že bile in so bile
   odstranjene, ker je 79 jedi pomenilo 1,86 MB sličic (glej komentar v
   app/templates/jed-vrstica.php). Vzrok ni bila kartica, ampak RAZMERJE:
   sličice so 400 px široke, prikazovale pa so se pri 56 px — torej je stran
   prenesla 24 KB na sliko in uporabila ~2 % njenih pik. Pri 260 px je ista
   datoteka na svojem mestu: noben bajt več, desetkrat več uporabljenih pik.

   Teža je omejena z dvema ukrepoma, ne z upanjem:
     loading="lazy"      nosijo vse sličice razen prvih štirih (že od prej)
     content-visibility  brskalnik kartic zunaj zaslona sploh ne izriše;
                         contain-intrinsic-size mu pove višino vnaprej, da
                         drsnik ne poskakuje
*/

.mreza-kart {
  display: grid;
  gap: var(--p4);
  /* Širina stolpca raste z zaslonom, a ima oba konca pribita: pod 9,5rem
     fotografija jedi ni več berljiva, nad 15,5rem pa se pri 1440 px izide
     manj kot pet stolpcev in mreža postane redka.
       375 px  -> 2 stolpca     1024 px -> 4 stolpci
       768 px  -> 4 stolpci     1440 px -> 5 stolpcev */
  grid-template-columns: repeat(auto-fill, minmax(clamp(9.5rem, 20vw, 15.5rem), 1fr));
}

.kart {
  display: grid;
  grid-template-rows: auto 1fr;
  text-decoration: none;
  background: var(--plo);
  border: 1px solid var(--rob);
  border-radius: var(--r-l);
  overflow: hidden;
  box-shadow: var(--senca-1);
  content-visibility: auto;
  contain-intrinsic-size: auto 17rem;
  transition:
    transform var(--hitro) var(--mehko),
    box-shadow var(--hitro) ease,
    border-color var(--hitro) ease;
}

.kart__slika {
  position: relative;
  aspect-ratio: 5 / 4;
  background: var(--dvig);
  overflow: hidden;
}
.kart__slika img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--srednje) var(--mehko);
}
/* Jed brez fotografije ne sme pustiti luknje: polje dobi isto razmerje in
   znak krožnika, da mreža ostane mreža. */
.kart__slika--prazna {
  display: grid; place-content: center;
  color: var(--zel-300);
  background: linear-gradient(160deg, var(--zel-75), var(--zel-100));
}
.kart__slika--prazna svg { width: 34px; height: 34px; }

/* Kalorije ležijo NA fotografiji, ne pod njo. Tako kartica pove oboje —
   katera jed je in koliko ima — brez druge vrstice besedila. Podlaga je
   zamegljena in ne polna barva, da fotografija ostane vidna skozi njo. */
.kart__st {
  position: absolute; right: var(--p2); bottom: var(--p2);
  display: flex; align-items: baseline; gap: 3px;
  padding: 5px 9px 5px 10px;
  border-radius: var(--r-krog);
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(10px) saturate(1.3);
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  box-shadow: var(--senca-1);
  font-family: var(--pisava-st); font-weight: 700; font-size: var(--f-s);
  letter-spacing: var(--sled-st); line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--stevilka);
}
.kart__st small { font-size: var(--f-3xs); font-weight: 500; color: var(--mehka); letter-spacing: 0; }

.kart__telo { padding: var(--p3) var(--p4) var(--p4); display: grid; gap: 5px; align-content: start; }
.kart__ime { font-weight: 700; font-size: var(--f-s); line-height: var(--vrsta-tesna); letter-spacing: var(--sled-tesno); }
.kart__ob  { font-size: var(--f-2xs); color: var(--mehka); line-height: 1.45; }
.kart__ob i { font-style: normal; white-space: nowrap; }

/* Odziv na kazalec. Dvig je 3 px — dovolj, da ga oko zazna kot plast, premalo,
   da bi mreža poskakovala. Fotografija se približa počasneje kot kartica
   vzdigne, zato se giba kot ena stvar z globino, ne kot dva elementa. */
@media (hover: hover) {
  .kart:hover { transform: translateY(-3px); box-shadow: var(--senca-2); border-color: var(--rob-mocan); }
  .kart:hover .kart__slika img { transform: scale(1.055); }
}
.kart:active { transform: translateY(-1px); transition-duration: 80ms; }

/* ── Vstop ob drsenju ────────────────────────────────────────────────────── */
/*
   Brez JavaScripta. `animation-timeline: view()` veže potek animacije na
   položaj elementa v vidnem polju, ne na uro — brskalnik, ki tega ne pozna,
   preskoči cel blok in kartice so preprosto vidne.

   ZATO JE ANIMACIJA V @supports IN NE OBRATNO. Končno stanje ne sme biti
   odvisno od podpore: če bi kartice privzeto imele opacity: 0 in bi jih
   prikazala šele animacija, bi bile v Safariju in Firefoxu NEVIDNE. Pravilo
   iz vrha datoteke velja tudi tu — nič se ne skriva v opacity: 0.

   Tudi `prefers-reduced-motion` je naveden izrecno. Splošna varovalka na vrhu
   skrajša animation-duration, pri animaciji na časovnici pogleda pa trajanje
   ne pomeni ničesar in bi se animacija vseeno izvedla.
*/
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .odkrij > * {
      animation: vstop linear both;
      animation-timeline: view();
      /* Konča se pri 42 % vstopa: kartica je popolnoma vidna, še preden
         pride do sredine zaslona. Animacija, ki se konča šele na sredini,
         deluje kot zatikanje, ne kot vstop. */
      animation-range: entry 0% entry 42%;
    }
  }
}
@keyframes vstop {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* ── Kartica orodja ──────────────────────────────────────────────────────── */
/*
   Kalkulatorji nimajo fotografije, zato zanje slikovna kartica ni prava:
   prazno polje bi bilo videti kot napaka. Nosi jih ikona, besedilo pa dobi
   prostor, ki ga je v tanki vrstici zmanjkalo — tam je bil opis stisnjen v
   eno vrstico drobnega sivega besedila.
*/
.mreza-orodij {
  display: grid; gap: var(--p4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.orodje {
  display: grid; gap: var(--p3); align-content: start;
  padding: var(--p5);
  text-decoration: none;
  background: var(--plo);
  border: 1px solid var(--rob);
  border-radius: var(--r-l);
  box-shadow: var(--senca-1);
  transition: transform var(--hitro) var(--mehko), box-shadow var(--hitro) ease, border-color var(--hitro) ease;
}
.orodje__ik {
  width: 42px; height: 42px; border-radius: var(--r-m);
  display: grid; place-content: center;
  background: var(--zel-50); color: var(--dejanje);
  transition: background-color var(--hitro) ease, color var(--hitro) ease;
}
.orodje__ik svg { width: 21px; height: 21px; }
.orodje__ime { font-weight: 700; font-size: var(--f-m); letter-spacing: var(--sled-tesno); }
.orodje__ob  { font-size: var(--f-xs); color: var(--mehka); line-height: var(--vrsta); }
/* Puščica stoji mirno in se premakne šele ob kazalcu — gibanje pove, da je
   element dejanje, ne okras. */
.orodje__vec {
  font-size: var(--f-xs); font-weight: 600; color: var(--dejanje);
  display: inline-flex; align-items: center; gap: 6px;
}
.orodje__vec svg { width: 15px; height: 15px; transition: transform var(--hitro) var(--prozno); }
@media (hover: hover) {
  .orodje:hover { transform: translateY(-3px); box-shadow: var(--senca-2); border-color: var(--rob-mocan); }
  .orodje:hover .orodje__ik { background: var(--dejanje); color: var(--na-dejanju); }
  .orodje:hover .orodje__vec svg { transform: translateX(4px); }
}

/* ── Pojasnila pod orodjem ───────────────────────────────────────────────── */
/*
   Razdelki pod kalkulatorjem so bili zaporedje naslovov in odstavkov v enem
   stolpcu. Proza ima mejo 52ch, zato se je besedilo ustavilo pri ~600 px, ob
   njem pa je na 1440 px zijalo čez 700 px praznine: stran je bila videti kot
   članek, ki se je zmotil v širino. Kot kartice drug ob drugem zasedejo
   širino, ki jo stran ima.

   Besedilo ima vseeno svojo mejo (66ch). Kartica se razteza, vrstica pa ne —
   pri dveh karticah na 1440 px bi bila vrstica sicer blizu sto znakov, kar je
   daleč nad priporočenim razponom 45–75. Prostor, ki pri tem ostane v kartici,
   se bere kot zrak ob besedilu in ne kot prazna stran.
*/
.pojasnila { display: grid; gap: var(--p4); margin-top: var(--p7); }
@media (min-width: 64rem) {
  .pojasnila { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); align-items: start; }
}
.pojasnilo {
  background: var(--plo); border: 1px solid var(--rob);
  border-radius: var(--r-l); padding: var(--p5);
  box-shadow: var(--senca-1);
}
.pojasnilo > :is(h2, h3) { font-size: var(--f-l); margin: 0 0 var(--p3); }
.pojasnilo p { margin: 0; font-size: var(--f-s); line-height: var(--vrsta-zracna); max-width: 66ch; }
.pojasnilo p + p { margin-top: var(--p3); }
.pojasnilo :is(ul, ol) {
  margin: var(--p3) 0 0; padding-left: 1.15em; max-width: 66ch;
  font-size: var(--f-s); line-height: var(--vrsta-zracna);
}
.pojasnilo li + li { margin-top: var(--p2); }
.pojasnilo table.hranila { margin-top: var(--p3); }

/* Drobni tisk na dnu strani. Prej je bil nalepljen tik pod zadnji odstavek in
   se je bral kot njegovo nadaljevanje; ločnica in zrak povesta, da je opomba. */
.opomba {
  margin-top: var(--p7); padding-top: var(--p4);
  border-top: 1px solid var(--rob);
  font-size: var(--f-3xs); color: var(--mehka); line-height: var(--vrsta);
  max-width: 90ch;
}

/* ── Recept: sestavine ob postopku ───────────────────────────────────────── */
/*
   Na telefonu navaden sklad — tam vzporedno ni prostora in je zaporedje
   (kaj vzameš, nato kaj narediš) pravo. Od 64rem naprej gresta narazen.

   Sestavine so ožji stolpec, ker so kratke vrstice; postopek dobi preostanek,
   ker so to cele povedi. Pritrditev ima `top` enak razmiku, da se kartica ne
   dotakne roba okna, in `max-height` z lastnim drsnikom — brez tega bi se pri
   dolgem seznamu sestavin na nizkem oknu spodnji del odrezal in ne bi bilo
   načina, da bi prišel do njega.
*/
@media (min-width: 64rem) {
  .recept-mreza {
    display: grid;
    grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
    gap: var(--p4);
    align-items: start;
    margin-top: var(--p4);
  }
  .recept-sestavine {
    position: sticky; top: var(--p4);
    max-height: calc(100svh - var(--p7));
    overflow: auto;
  }
}
@media (max-width: 63.999rem) {
  .recept-sestavine { margin-top: var(--p4); }
  .recept-postopek  { margin-top: var(--p3); }
}

/* ── Pas s fotografijo jedi ──────────────────────────────────────────────── */
/*
   Naslov leži NA fotografiji. Razmerje je nizko (16:7), ker jed na podstrani
   ni razstavni predmet — je odgovor na vprašanje »koliko kalorij ima«, in
   številka pod pasom mora ostati na prvem zaslonu. Na telefonu se razmerje
   razširi na 16:9, ker je tam pas edina slika in ima prostor.
*/
.jed-glava {
  position: relative; overflow: hidden;
  margin-top: var(--p3);
  aspect-ratio: 16 / 9;
  border-radius: var(--r-xl);
  background: var(--dvig);
  display: grid; align-content: end;
  box-shadow: var(--senca-1);
}
.jed-glava img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.jed-glava::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(10, 16, 7, .86) 0%, rgba(10, 16, 7, .52) 38%, rgba(10, 16, 7, 0) 72%);
}
.jed-glava h1 {
  position: relative; z-index: 1; margin: 0;
  padding: var(--p5) var(--p5) var(--p4);
  color: var(--bela);
  text-shadow: 0 1px 14px rgba(10, 16, 7, .55);
}
@media (min-width: 64rem) { .jed-glava { aspect-ratio: 16 / 7; } }

/* ── Temna ploskev ───────────────────────────────────────────────────────── */
/*
   ZAKAJ. Stran je bila tonsko plosko bela: ozadje --zel-50 (#F1F5EF), kartice
   bele, razlika med njima je 2 % svetlosti. Oko tega ne prebere kot plast,
   zato je bila vsaka stran videti kot en sam bel list ne glede na to, koliko
   kartic je nosila. Eno temno polje na strani da vsemu drugemu dno.

   UPORABLJAJ ZADRŽANO — eno na stran. Dve temni polji se spet izničita.

   Barvni madež v kotu je iz palete (bučno olje in list), zelo nizke krovnosti.
   Je okras in ne nosi pomena, zato je pod aria-hidden in ne vpliva na nič,
   kar je treba prebrati.
*/
.panel-temno {
  position: relative; overflow: hidden;
  background: linear-gradient(152deg, var(--temno-mehko) 0%, var(--temno) 62%);
  color: var(--na-temnem);
  border: 0;
  border-radius: var(--r-xl);
}
.panel-temno::after {
  content: ""; position: absolute; inset: auto -12% -55% auto;
  width: 30rem; height: 30rem; border-radius: 50%;
  background: radial-gradient(circle, rgba(217, 160, 43, .20), transparent 68%);
  pointer-events: none;
}
.panel-temno > * { position: relative; }
.panel-temno :is(p, label, .oznaka, small) { color: var(--na-temnem-meh); }
.panel-temno a { color: var(--jan-500); text-underline-offset: 3px; }
.panel-temno .oznaka {
  background: rgba(234, 240, 228, .10); border-color: rgba(234, 240, 228, .18);
  color: var(--na-temnem); padding: 4px var(--p3); border-radius: var(--r-krog);
}
/* Vnosno polje ostane svetlo. Temno polje na temni ploskvi je sicer videti
   bolje, a nehana pove, da je vanj mogoče pisati — svetlo polje to pove brez
   razlage. */
.panel-temno :focus-visible { outline-color: var(--jan-500); }

/* ── Ikona v okvirčku ────────────────────────────────────────────────────── */

.ik {
  width: 44px; height: 44px; flex: none; border-radius: var(--r-m);
  background: var(--dvig); display: grid; place-content: center; color: var(--dejanje);
  transition: transform var(--srednje) var(--prozno);
}
.ik svg { width: 21px; height: 21px; }
a:hover > .ik, a:hover .ik { transform: rotate(-8deg) scale(1.06); }

/* Ikona hoje: dva koraka in obstane. */
.ik-hoja .noga-a { animation: korak-a 1.1s 2 ease-in-out; transform-origin: 11.5px 13px; transform-box: fill-box; }
.ik-hoja .noga-b { animation: korak-b 1.1s 2 ease-in-out; transform-origin: 11.5px 13px; transform-box: fill-box; }
@keyframes korak-a { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(10deg); } }
@keyframes korak-b { 0%, 100% { transform: rotate(12deg); } 50% { transform: rotate(-10deg); } }

/* ── Obrazci ─────────────────────────────────────────────────────────────── */

.polje { display: grid; gap: 5px; }
.polje > label { font-size: var(--f-xs); font-weight: 600; color: var(--mehka); }
.polje input, .polje select {
  padding: var(--p3) var(--p4); border: 1px solid var(--rob-polje); border-radius: var(--r-m);
  background: var(--plo); font-size: var(--f-m);
  transition: border-color var(--hitro) ease;
}
.polje input:hover, .polje select:hover { border-color: var(--rob-mocan); }
.polje input:focus-visible, .polje select:focus-visible { border-color: var(--dejanje); }

.napaka {
  padding: var(--p3) var(--p4); border-radius: var(--r-m);
  background: var(--caka-ozadje); border: 1px solid var(--caka-rob);
  color: var(--caka-besedilo); font-size: var(--f-s);
}

/* ── Spodnja vrstica dejanj ──────────────────────────────────────────────── */

.dno {
  position: fixed; inset: auto 0 0 0; z-index: 10;
  padding: 11px var(--p4) calc(11px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--oz) 90%, transparent);
  backdrop-filter: blur(14px);
  box-shadow: var(--senca-dno);
}
.dno__v {
  max-width: var(--sirina); margin-inline: auto;
  display: grid; grid-template-columns: 50px 1fr; gap: var(--p3);
}
.dno__v .gumb-ikona { width: auto; height: auto; border-radius: var(--r-m); }
body:has(.dno) { padding-bottom: 92px; }

/* ── Prazno stanje ───────────────────────────────────────────────────────── */

.prazno { text-align: center; padding: var(--p9) var(--p4); }
/* Odstavek ima od pravila za prozo max-width 52ch, nima pa samodejnih robov.
   V sredinjenem bloku se je zato njegova ŠKATLA naslonila na levo, besedilo v
   njej pa se je sredinilo znotraj nje — naslov in gumb sredinjena, odstavek
   levo od sredine. */
.prazno :is(p, li) { margin-inline: auto; }
.prazno h2 { font-size: var(--f-xl); margin-bottom: var(--p2); }
.prazno p { color: var(--mehka); margin-bottom: var(--p5); }

/* ── Iskalnik ────────────────────────────────────────────────────────────── */

.iskalnik-ovoj { position: relative; }
.iskalnik { display: flex; gap: var(--p2); }
.iskalnik input {
  flex: 1; min-width: 0; padding: var(--p4); border: 1px solid var(--rob-polje);
  border-radius: var(--r-m); background: var(--plo); font-size: var(--f-m);
  transition: border-color var(--hitro) ease;
}
.iskalnik input:hover { border-color: var(--rob-mocan); }
.iskalnik input:focus-visible { border-color: var(--dejanje); }
.iskalnik button {
  flex: none; padding: var(--p4) var(--p5); border: 0; border-radius: var(--r-m);
  background: var(--dejanje); color: var(--na-dejanju); font-weight: 700;
  font-size: var(--f-s); cursor: pointer;
  transition: background-color var(--hitro) ease, transform var(--srednje) var(--prozno);
}
.iskalnik button:hover { background: var(--dejanje-nad); }
.iskalnik button:active { transform: scale(.97); }

/* Živi predlogi pod iskalnikom (assets/js/predlogi.js). */
.predlogi {
  position: absolute; z-index: 15; inset: calc(100% + 6px) 0 auto 0;
  background: var(--plo); border: 1px solid var(--rob-mocan); border-radius: var(--r-m);
  box-shadow: 0 12px 34px rgb(21 32 15 / .12); overflow: hidden;
}
.predlogi a {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--p3);
  padding: var(--p3) var(--p4); text-decoration: none; font-size: var(--f-s);
  border-bottom: 1px solid var(--rob);
}
.predlogi a:last-child { border-bottom: 0; }
.predlogi a:hover, .predlogi a.izbran { background: var(--dvig); }
.predlogi .p-kcal {
  font-family: var(--pisava-st); font-weight: 600; color: var(--mehka);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ── Naslovnica ──────────────────────────────────────────────────────────── */

/* Vodilna kartica nosi FOTOGRAFIJO jedi, ne le številke. Doslej je bila bel
   okvir s številko sredi praznine — pri 1440 px je zasedla 40 % prvega
   zaslona in ni pokazala ničesar, kar stran zares ima. Fotografije jedi so
   najboljše gradivo te strani in prvi zaslon je mesto, kjer naj se vidi.

   BEREMO ČEZ FOTOGRAFIJO, zato je pod besedilom zastor (linearni preliv do
   skoraj črne). Brez njega je bela številka na svetli jedi neberljiva, in to
   nepredvidljivo — odvisno od tega, katera jed se zavrti. */
.vodilni {
  position: relative; overflow: hidden;
  min-height: 19rem;
  display: grid; align-content: end;
  padding: var(--p6) var(--p5);
  border-radius: var(--r-l);
  background: var(--temno);
  border: 1px solid var(--rob);
  text-align: center;
  box-shadow: var(--senca-1);
}
.vodilni__slika {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: opacity var(--srednje) ease, transform var(--pocasi) var(--mehko);
}
.vodilni::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top,
    rgba(10, 16, 7, .92) 0%, rgba(10, 16, 7, .78) 34%, rgba(10, 16, 7, .34) 68%, rgba(10, 16, 7, .18) 100%);
}
.vodilni > :not(.vodilni__slika) { position: relative; z-index: 1; }
.vodilni__oznaka { font-size: var(--f-3xs); font-weight: 700; letter-spacing: .06em; color: var(--jan-500); }
.vodilni__jed { display: block; margin-top: var(--p2); font-size: var(--f-l); font-weight: 700; letter-spacing: var(--sled-tesno); color: var(--bela); }
.vodilni__st {
  display: block; margin-top: var(--p3);
  font-family: var(--pisava-st); font-weight: 700; font-size: var(--f-odgovor);
  line-height: .9; letter-spacing: var(--sled-st); color: var(--bela);
  font-variant-numeric: tabular-nums lining-nums;
  text-shadow: 0 2px 20px rgba(10, 16, 7, .5);
}
/* Enota na fotografiji ne sme uporabiti --mehka (sivina za bel papir): na
   temnem zastoru pade pod prag berljivosti. */
.vodilni__enota { display: block; margin-top: var(--p2); font-size: var(--f-s); color: var(--na-temnem-meh); }
.vodilni__jed, .vodilni__st { transition: opacity var(--srednje) ease; }
.vodilni.menja .vodilni__jed, .vodilni.menja .vodilni__st { opacity: .2; }
/* Fotografija ob menjavi rahlo zbledi in se odmakne — zamenjava je tako videti
   kot ena poteza, ne kot trije elementi, ki vsak zase utripnejo. */
.vodilni.menja .vodilni__slika { opacity: .45; transform: scale(1.03); }

.stat-vrsta { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--p2); }
.stat-vrsta div {
  padding: var(--p4) var(--p2); text-align: center;
  background: var(--plo); border: 1px solid var(--rob); border-radius: var(--r-m);
}
.stat-vrsta b {
  display: block; font-family: var(--pisava-st); font-weight: 700;
  font-size: var(--f-xl); letter-spacing: -.03em; color: var(--stevilka);
}
.stat-vrsta span { display: block; font-size: var(--f-3xs); color: var(--mehka); margin-top: 3px; }

.faq { display: grid; gap: var(--p2); }
.faq details {
  background: var(--plo); border: 1px solid var(--rob); border-radius: var(--r-m);
  padding: var(--p3) var(--p4);
}
.faq summary {
  font-weight: 700; font-size: var(--f-s); cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: var(--p3);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none; color: var(--dejanje); font-size: var(--f-l); font-weight: 600;
  transition: transform var(--srednje) var(--prozno);
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq p { margin-top: var(--p3); font-size: var(--f-s); color: var(--mehka); line-height: var(--vrsta-zracna); }

/* ── Kalkulator ──────────────────────────────────────────────────────────── */

.kalk {
  display: grid; gap: var(--p4); padding: var(--p5);
  background: var(--plo); border: 1px solid var(--rob); border-radius: var(--r-l);
}
/* Otrok mreže se privzeto NE skrči pod širino svoje vsebine (min-width: auto).
   Dolga možnost v <select> ali širok <input> zato potegneta celo stran v
   vodoravno drsenje. min-width: 0 je edino, kar to prepreči. */
.kalk > *, .kalk-polja > *, .sklad > * { min-width: 0; }

.kalk label { display: block; font-size: var(--f-xs); font-weight: 600; color: var(--mehka); margin-bottom: 5px; }
.kalk input[type="number"], .kalk input[type="text"], .kalk select {
  width: 100%; min-width: 0; padding: var(--p3) var(--p4);
  border: 1px solid var(--rob-polje); border-radius: var(--r-m); background: var(--plo);
  font-size: var(--f-m); transition: border-color var(--hitro) ease;
}
.kalk input:hover, .kalk select:hover { border-color: var(--rob-mocan); }
.kalk input:focus-visible, .kalk select:focus-visible { border-color: var(--dejanje); }
.kalk .gumb { width: 100%; }

.kalk-radio { display: flex; gap: var(--p2); }
.kalk-radio label {
  flex: 1; min-width: 0; margin-bottom: 0;
  display: flex; align-items: center; justify-content: center; gap: var(--p2);
  padding: var(--p3); border: 1px solid var(--rob-polje); border-radius: var(--r-m);
  font-size: var(--f-s); font-weight: 600; color: var(--tinta); cursor: pointer;
  transition: border-color var(--hitro) ease, background-color var(--hitro) ease, color var(--hitro) ease;
}
.kalk-radio input { accent-color: var(--dejanje); flex: none; }
/* :has() naredi celotno ploščico stanje izbire — brez JS in brez podvojene oznake. */
.kalk-radio label:has(input:checked) {
  border-color: var(--dejanje); background: var(--dvig); color: var(--dejanje);
}

.kalk-polja { display: grid; gap: var(--p3); grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }

/* Velika vrednost brez obroča — za kalkulatorje, kjer razmerja hranil ni. */
.velika {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--p2) var(--p4);
  padding: var(--p5); background: var(--plo); border: 1px solid var(--rob); border-radius: var(--r-l);
}
.velika b {
  font-family: var(--pisava-st); font-weight: 700; font-size: var(--f-odgovor);
  line-height: .9; letter-spacing: var(--sled-st); color: var(--stevilka);
  font-variant-numeric: tabular-nums lining-nums;
}
.velika > span { font-size: var(--f-s); color: var(--mehka); flex: 1 1 12ch; min-width: 0; }
.velika > span b { font-family: var(--pisava); font-size: var(--f-s); color: var(--tinta); letter-spacing: 0; }

.nasvet {
  padding: var(--p4); border: 1px solid var(--rob); border-radius: var(--r-l);
  background: var(--plo); font-size: var(--f-s); line-height: var(--vrsta-zracna);
}
.nasvet > b { display: block; margin-bottom: var(--p2); font-size: var(--f-s); }

/* Tabela dobi svoj drsnik, da nikoli ne potegne strani vstran. */
table.hranila { width: 100%; border-collapse: collapse; font-size: var(--f-s); }
table.hranila th, table.hranila td { text-align: right; padding: var(--p3) 0; border-bottom: 1px solid var(--rob); }
table.hranila th:first-child, table.hranila td:first-child { text-align: left; }
table.hranila tr:first-child th { font-size: var(--f-2xs); color: var(--mehka); font-weight: 600; }
table.hranila td { font-variant-numeric: tabular-nums; }
table.hranila tr:last-child td { border-bottom: none; }
table.hranila caption {
  text-align: left; font-weight: 700; font-size: var(--f-s);
  padding-bottom: var(--p2); color: var(--tinta);
}

/* ── Glava strani ────────────────────────────────────────────────────────── */

.glava { background: var(--plo); border-bottom: 1px solid var(--rob); }
/* Mreža namesto flexa, ker glava nosi tri stvari in se na namizju prerazporedi:
   na telefonu znak in iskanje v vrsti, navigacija pod njima čez vso širino;
   od 64rem naprej vse troje v eni vrstici. */
.glava__v {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "logo    iskanje"
    "nav     nav";
  align-items: center; column-gap: var(--p3);
  max-width: var(--sirina); margin-inline: auto; padding: var(--p3) var(--p4);
}
.glava__v > .logo                { grid-area: logo; }
.glava__v > .gumb-ikona,
.glava__v > .znacka              { grid-area: iskanje; }
.glava__v > .navglavna           { grid-area: nav; min-width: 0; }
/* .glava--siroko upokojen z istim razlogom kot .ovoj--siroko. Zaradi višje
   specifičnosti je preglasil mrežo strani, zato je bila glava admina široka
   1088 px, njegova vsebina pa 1440 — znak je stal 208 px desno od vsebine. */

/* Navigacija je vodoravno drsen pas — brez JS, brez hamburgerja, brez
   zastora. Na telefonu se prste vodi naravno, na namizju se vse vidi hkrati. */
/* ── Glavna navigacija ───────────────────────────────────────────────────── */
/*
   Oblika sledi vlogi. Navigacija ZAMENJA stran, zato je povezava z besedilom in
   črtico pod dejavno postavko — tako kot v vsakem portalu, ki ga obiskovalec
   že pozna. Ploščice (.navpas spodaj) ostanejo filtrom in bližnjicam, ki strani
   ne zamenjajo. Prej je bilo oboje videti enako in iz videza se ni dalo
   razbrati, kaj klik naredi.
*/
.navglavna { min-width: 0; }
.navglavna__v {
  display: flex; align-items: stretch;
  overflow-x: auto; scrollbar-width: none;
  margin-inline: calc(var(--p4) * -1);
  padding-inline: var(--p4);
  border-top: 1px solid var(--rob);
  margin-top: var(--p3);
}
.navglavna__v::-webkit-scrollbar { display: none; }
.navglavna__skupina { display: flex; flex: none; }

.navglavna a {
  position: relative; flex: none;
  padding: var(--p3) var(--p3) calc(var(--p3) - 2px);
  font-size: var(--f-xs); font-weight: 600; text-decoration: none;
  color: var(--mehka); white-space: nowrap;
  transition: color var(--hitro) ease;
}
/* Črtica dejavne strani. Ločena psevdovrstica, da prehod ne premika besedila. */
.navglavna a::after {
  content: ""; position: absolute; inset: auto var(--p3) 0 var(--p3);
  height: 2px; border-radius: 2px 2px 0 0; background: transparent;
  transition: background-color var(--hitro) ease;
}
.navglavna a:hover { color: var(--tinta); }
.navglavna a:hover::after { background: var(--rob-mocan); }
.navglavna a[aria-current="page"] { color: var(--dejanje); }
.navglavna a[aria-current="page"]::after { background: var(--dejanje); }

/* ── Ploščice: filtri in bližnjice ───────────────────────────────────────── */
/*
   Rob ploščice nosi informacijo, KJE ploščica je — zato zanj velja WCAG 1.4.11
   (3:1) in ne --rob (izmerjeno 1,49 : 1 proti beli, kar je bilo komaj vidno).
   Dejavni filter je obarvan, ne poln temen: filter je stanje, ne dejanje, in
   skok iz skoraj nevidnega obrisa v temen gumb je bil pretiran.
*/
.navpas { background: var(--plo); border-bottom: 1px solid var(--rob); }
.navpas__v {
  display: flex; gap: var(--p2); max-width: var(--sirina); margin-inline: auto;
  padding: 0 var(--p4) var(--p3); overflow-x: auto; scrollbar-width: none;
}
.navpas__v::-webkit-scrollbar { display: none; }
.navpas a {
  flex: none; padding: 6px var(--p3); border-radius: var(--r-krog);
  font-size: var(--f-2xs); font-weight: 600; text-decoration: none;
  border: 1px solid var(--rob-polje); color: var(--mehka); white-space: nowrap;
  transition: color var(--hitro) ease, border-color var(--hitro) ease, background-color var(--hitro) ease;
}
.navpas a:hover { color: var(--tinta); border-color: var(--tinta); background: var(--dvig); }
.navpas a[aria-current="page"] {
  color: var(--dejanje); background: var(--dvig); border-color: var(--dejanje);
}

/* ── Noga ────────────────────────────────────────────────────────────────── */

.noga { margin-top: var(--p8); background: var(--plo); border-top: 1px solid var(--rob); }
.noga__v { max-width: var(--sirina); margin-inline: auto; padding: var(--p6) var(--p4) var(--p7); display: grid; gap: var(--p5); }
.noga nav { display: flex; flex-wrap: wrap; gap: var(--p2) var(--p4); }
/* WCAG 2.2 AA (2.5.8) zahteva tarčo 24×24. Izjema velja za povezave »v
   stavku«; seznam povezav v nogi, drobni tisk in drobtine to niso, zato jih
   pravilo zajame. Višino da poravnava, ne večja pisava — videz ostane isti.
   (»Več o zasebnosti« v pasici je v odstavku in je zato izvzet upravičeno.) */
.noga nav a,
.noga__drobno a,
.pot a,
.ovoj td a {
  display: inline-flex; align-items: center; min-height: 24px;
}
.noga nav a { font-size: var(--f-xs); text-decoration: none; color: var(--mehka); }
.noga nav a:hover { color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; }
.noga__drobno { font-size: var(--f-2xs); color: var(--mehka); display: grid; gap: var(--p2); }
.noga__drobno a { color: var(--mehka); }

/* ── Pasica za piškotke ──────────────────────────────────────────────────── */

.piskotki {
  position: fixed; inset: auto var(--p4) var(--p4) var(--p4); z-index: 20;
  max-width: 30rem; margin-inline: auto;
  padding: var(--p4); border-radius: var(--r-l);
  background: var(--plo); border: 1px solid var(--rob-mocan);
  box-shadow: 0 10px 40px rgb(21 32 15 / .14);
  font-size: var(--f-xs);
}
.piskotki p { margin-bottom: var(--p3); color: var(--mehka); }
.piskotki b { color: var(--tinta); }
.piskotki .gumbi { display: flex; gap: var(--p2); }
.piskotki .gumb { flex: 1; }

/* ── Pas za osnutek ──────────────────────────────────────────────────────── */

.osnutek {
  margin-bottom: var(--p4); padding: var(--p3) var(--p4); border-radius: var(--r-m);
  background: var(--caka-ozadje); border: 1px solid var(--caka-rob);
  color: var(--caka-besedilo); font-size: var(--f-xs); font-weight: 600;
}

/* ── Deljenje ────────────────────────────────────────────────────────────── */

.deli { display: flex; flex-wrap: wrap; gap: var(--p2); align-items: center; }
.deli__naslov { font-size: var(--f-3xs); color: var(--mehka); font-weight: 600; margin-right: var(--p1); }
.deli a, .deli button {
  padding: 7px var(--p3); border-radius: var(--r-krog); border: 1px solid var(--rob);
  background: var(--plo); font-size: var(--f-xs); font-weight: 600; text-decoration: none;
  color: var(--mehka); cursor: pointer;
  transition: color var(--hitro) ease, border-color var(--hitro) ease;
}
.deli a:hover, .deli button:hover { color: var(--tinta); border-color: var(--rob-mocan); }

/* ── Pomožno ─────────────────────────────────────────────────────────────── */

.skrij-vizualno {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.ne-lomi { white-space: nowrap; }

/* ── Namizna mreža ───────────────────────────────────────────────────────── */
/*
   Mobilna postavitev je IZHODIŠČE in ostane nedotaknjena: vsako pravilo tukaj
   visi na `min-width`, zato se na telefonu ne sproži nič. PWA del ostane tak,
   kot je bil.

   Prva objava je imela natanko to plast prazno. Posledica: --sirina (33rem =
   528 px) je veljala za glavo, navigacijo, main IN nogo, zato je stran na
   namiznem zaslonu živela v 528-pikselskem stolpcu sredi praznine. Stara stran
   je imela .wrap { max-width: 1100px } in prelomnice; brez te plasti je bilo
   namizje slabše kot prej.

   Tri stopnje:
     48rem (768)   tablica  — vsebnik zadiha, seznami v dva stolpca
     64rem (1024)  namizje  — vsebnik na mrežo strani, vsebina se komponira
     90rem (1440)  polna mreža — širine ne večamo več, raste le zrak ob strani

   Proza se NE razteza z mrežo. Vrstica čez ~68 znakov se slabo bere, zato ima
   besedilo svojo mejo tudi sredi široke strani.
*/

/* ── 48rem — tablica ─────────────────────────────────────────────────────── */
@media (min-width: 48rem) {
  .ovoj, .glava__v, .navpas__v, .noga__v {
    max-width: 44rem;
    padding-inline: var(--p5);
  }

  /* Seznami jedi in receptov v dva stolpca. :has() meri po vsebini, zato se
     spremenijo samo zloženke s predmeti, ne vsaka zloženka na strani. */
  .sklad--tesno:has(> .predmet) {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-vrsta { gap: var(--p3); }
  .kalk-polja { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
  .faq { grid-template-columns: repeat(2, 1fr); align-items: start; }

  /* Skupine loči RAZMIK, ne črta. Izmerjena hairline ločnica je imela kontrast
     1,25 proti ozadju — oko je ni videlo, grupiranja pa tako ni bilo. Bližina
     deluje brez barve: znotraj skupine 24 px med besedami, med skupinama 56. */
  .navglavna__skupina + .navglavna__skupina { margin-left: var(--p7); }
}

/* ── 64rem — namizje ─────────────────────────────────────────────────────── */
@media (min-width: 64rem) {
  .ovoj, .glava__v, .navpas__v, .noga__v {
    max-width: var(--sirina-stran);
    padding-inline: var(--p6);
  }

  /* Glava v eno vrstico: znak, navigacija, iskanje. Pod 64rem navigacija stoji
     v svoji vrstici pod znakom, ker je na telefonu drsna. */
  .glava__v {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "logo nav iskanje";
    column-gap: var(--p6);
  }
  /* Črtica dejavne strani mora stati ob SPODNJEM robu pasu. Zato glava spodaj
     nima odmika — višino pasu da navigacija sama. Brez tega je črtica lebdela
     30 px nad robom, ker je imela glava 12 px odmika, .navglavna__v pa se kot
     blok v mreži sploh ni raztegnil. */
  .glava__v { padding-block: var(--p3) 0; }

  /* Uredniški vmesnik nima glavne navigacije. Brez nje ni ničesar, kar bi dalo
     pasu višino, zato glava pade nazaj na dve koloni in dobi odmik nazaj —
     sicer znak visi na spodnjem robu, srednja kolona pa zeva prazna. */
  .glava__v:not(:has(> .navglavna)) {
    grid-template-columns: 1fr auto;
    grid-template-areas: "logo iskanje";
    padding-block: var(--p3);
  }
  .glava__v > .navglavna { align-self: stretch; display: flex; }
  .navglavna__v {
    height: 100%;
    margin-inline: 0; padding-inline: 0;
    margin-top: 0; border-top: 0;
    align-items: stretch;
  }
  .navglavna__skupina { align-items: stretch; }
  .navglavna a { display: flex; align-items: center; padding-block: var(--p4); }
  .navglavna a::after { inset: auto var(--p3) 0 var(--p3); }

  /* Skupina --vir je odstranjena skupaj s povezavo »Viri podatkov« v glavi
     (30. 10. 2026); pravilo, ki jo je potiskalo k robu, zato ni več imelo
     elementa in je odšlo z njo. Stran /viri živi v nogi. */

  /* Besedilo ne sledi mreži.
     Prvotno pravilo je naštevalo samo NEPOSREDNE otroke .ovoj, zato besedilnih
     strani (/o-strani, /viri, /clanek/…) sploh ni doseglo — njihovi odstavki
     so ugnezdeni v razdelke. Izmerjeno: vrstice do 178 znakov, priporočeni
     razpon pa je 45–75. Zdaj velja za vso prozo v vsebini.
     Števila, tabele in mreže niso proza in so izvzeti. */
  .ovoj :is(p, li, blockquote, dd) {
    max-width: var(--proza);
  }
  .ovoj :is(.velika, .odgovor, .stat-vrsta, .predmet, .mera, table, .an-mreza) :is(p, li) {
    max-width: none;
  }

  .sklad--tesno:has(> .predmet) {
    grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr));
  }

  /* Naslovnica: besedilo in iskanje levo, rotirajoča kartica desno.
     Področja namesto nth-child, da preureditev predloge ne zlomi postavitve. */
  .uvod {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    grid-template-areas:
      "naslov  karta"
      "podnas  karta"
      "iskanje karta";
    align-content: center;
    column-gap: var(--p7);
    row-gap: var(--p3);
  }
  .uvod > h1             { grid-area: naslov; font-size: var(--f-3xl); }
  .uvod > p              { grid-area: podnas; max-width: 46ch; }
  .uvod > .iskalnik-ovoj { grid-area: iskanje; margin-top: var(--p4); max-width: 34rem; }

  /* Kartica s primerom: manj odmika, večja številka.
     Prej je bila visoka ~220 px za štiri kratke vrstice — prostor je zasedala,
     ne izrabljala. Zdaj ga zasluži številka, ki je tu glavna stvar. */
  .uvod > .vodilni {
    grid-area: karta; align-self: center; margin-top: 0;
    padding: var(--p5) var(--p6);
  }
  .uvod > .vodilni .vodilni__st { font-size: clamp(3.5rem, 6vw, 5rem); }

  /* Trije podatki naj berejo kot trak, ne kot tri velike škatle.
     Pri 44rem je bila vsaka celica ~235 px široka za dvomestno številko. */
  .stat-vrsta { max-width: 30rem; }
  .stat-vrsta div { padding: var(--p3) var(--p2); }

  /* Stran jedi: odgovor levo, hranilne vrednosti desno in pritrjene ob drsenju. */
  .jed-vrh {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
    column-gap: var(--p7);
    align-items: start;
  }
  .jed-vrh__levo  { display: grid; gap: var(--p3); align-content: start; }
  .jed-vrh__desno { position: sticky; top: var(--p5); margin-top: 0; }
  .jed-vrh__desno > .kartica { margin-top: 0; }

  /* Kalkulator: obrazec levo, rezultat desno — oboje vidno brez drsenja. */
  .kalk-vrh {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--p6);
    align-items: start;
  }
  .kalk-vrh .kalk { margin: 0; }

  /* Prej se je mreža do prvega izračuna zložila v en stolpec, ker je desni
     zijal prazen. Zdaj v njem stoji lestvica/razmerja — vsebina, ki je pred
     izračunom napoved, po njem pa razlaga rezultata — zato ostane dvostolpčna. */

  /* Razpredelnica v mreži strani ni razpredelnica v kartici. Dve ozki koloni
     na 1376 px pomenita »ITM« skrajno levo in »Kategorijo« skrajno desno, z
     1000 px praznine vmes — videti je pokvarjeno, ne prostorno. Omejimo jo na
     bralno širino, blizu širine obrazca nad njo (38rem).
     Na /jed/{slug} ista razpredelnica ostane 100 %, ker jo omeji že kartica. */
  .sklad > table.hranila { max-width: 44rem; }
}

/* ── 90rem — polna mreža ─────────────────────────────────────────────────── */
@media (min-width: 90rem) {
  .ovoj, .glava__v, .navpas__v, .noga__v { padding-inline: var(--p7); }

  .sklad--tesno:has(> .predmet) {
    grid-template-columns: repeat(auto-fill, minmax(23rem, 1fr));
  }
  .faq { grid-template-columns: repeat(3, 1fr); }
}

/* ── Paginacija ──────────────────────────────────────────────────────────── */
/* Tri mesta, da sredinski napis ostane na sredini tudi, kadar je na eni strani
   samo ena povezava. Prazna <span> sta zato tam namenoma. */
.paginacija {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: var(--p3); margin-top: var(--p7);
}
.paginacija a[rel="next"] { justify-self: end; }
.paginacija__kje { font-size: var(--f-xs); color: var(--mehka); text-align: center; }

/* ── Bralne strani ───────────────────────────────────────────────────────── */
/* /pogoji, /zasebnost, /o-strani, /viri, /clanek nimajo mreže — so besedilo.
   V 1440-pikselski mreži je proza (533 px) visela ob levem robu, kartice in
   razpredelnice pa so se raztegnile čez 1376 px: na /viri je bila kartica
   »Trenutno stanje baze« dvainpolkrat širša od besedila nad njo. Ko je stran
   sama stolpec, se vse poravna na eno mero in se sredini v oknu.
   Velja šele od 64rem, kjer se mreža strani razširi na 90rem; pod tem so vse
   strani enako široke in ni česa popravljati.
   Dvojni razred, da pravilo premaga .ovoj iz iste plasti. */
@media (min-width: 64rem) {
  .ovoj.ovoj--branje { max-width: 40rem; }
}

/* ── Fotografija recepta ─────────────────────────────────────────────────── */
/* Slog je bil prej v atributu style, kjer ga medijska poizvedba ne more
   preglasiti. Razmerje 20/11 brez zgornje meje pomeni, da višina raste s
   širino strani: pri 375 px je slika 206 px visoka, pri 1376 px pa 757 px —
   84 % zaslona, h1 pa pade na y=895, torej pod rob. object-fit: cover
   poskrbi, da omejena višina samo izreže, ne stisne. */
.recept-slika {
  width: 100%; aspect-ratio: 20 / 11; object-fit: cover;
  border-radius: var(--r-xl); margin-top: var(--p3);
}
@media (min-width: 64rem) {
  .recept-slika { max-height: 26rem; }
}

/* ── Kalkulator: stolpca in vodilo ───────────────────────────────────────── */
.kalk-stolpec, .kalk-ob { display: grid; gap: var(--p5); align-content: start; min-width: 0; }

/* Vodilo je kartica, ne naslednji razdelek strani: pove, kaj kalkulator meri,
   in po izračunu stoji tik ob številki, ki jo razlaga. */
.kalk-vodilo {
  background: var(--plo); border: 1px solid var(--rob);
  border-radius: var(--r-l); padding: var(--p5);
}
.kalk-vodilo h2 { font-size: var(--f-l); }
.kalk-vodilo table.hranila { margin-top: var(--p3); }
.kalk-vodilo p { margin-top: var(--p3); }
/* Vrstica cilja, ki je izbran v obrazcu. Brez tega se razpredelnica razmerij
   ne poveže z izbiro, ki jo je obiskovalec pravkar naredil. */
.kalk-vodilo tr.je-izbran { background: var(--dvig); }
.kalk-vodilo tr.je-izbran td { font-weight: 700; color: var(--tinta); }

/* ── Filtri na iskanju ───────────────────────────────────────────────────── */
/* Ločen obrazec pod iskalnikom; deluje brez JS, zato so to navadna polja in
   gumb, ne preklopi, ki bi zahtevali skript. align-items: end poravna kljukici
   s spodnjim robom izbirnikov, ne z vrhom njunih oznak. */
.isk-filtri {
  display: flex; flex-wrap: wrap; align-items: end; gap: var(--p3);
  margin-bottom: var(--p6);
}
.isk-filtri label { display: grid; gap: 4px; font-size: var(--f-xs); font-weight: 600; color: var(--mehka); }
.isk-filtri select {
  font: inherit; font-size: var(--f-s); color: var(--tinta); min-width: 0;
  padding: 9px var(--p3); border: 1px solid var(--rob-polje);
  border-radius: var(--r-s); background: var(--plo);
}
.isk-filtri select:hover { border-color: var(--rob-mocan); }
.isk-filtri select:focus-visible { border-color: var(--dejanje); }
/* Dvojni razred, ker .isk-filtri label zgoraj sicer premaga ta slog. */
.isk-filtri .isk-kljukica {
  display: flex; align-items: center; gap: var(--p2);
  font-weight: 500; color: var(--tinta); padding-block: 10px;
}
.isk-filtri .isk-kljukica input { accent-color: var(--dejanje); width: 18px; height: 18px; flex: none; }
.isk-pocisti { font-size: var(--f-xs); color: var(--mehka); align-self: center; }
.predmet__recept { color: var(--dejanje); font-weight: 600; font-style: normal; }
/* Pod 30rem naj izbirnika zavzameta celo vrsto. Sicer se ob njiju ujameta
   kljukici in gumb, postavitev pa je videti naključna, ne načrtovana. */
@media (max-width: 30rem) {
  .isk-filtri > label:not(.isk-kljukica) { flex: 1 1 100%; }
  .isk-filtri > label:not(.isk-kljukica) select { width: 100%; }
}

/* ── Jedilnik ────────────────────────────────────────────────────────────── */
/* table.hranila poravnava vse razen prvega stolpca na desno, ker so tam
   številke. V jedilniku je srednji stolpec seznam jedi in mora biti levo,
   sicer se besedilo stisne ob desni rob z luknjo v sredini. */
/* Rob na tabeli s width: 100 % jo potisne čez kartico, ki ima overflow:
   hidden — zadnji stolpec se je odrezal za 15 px. Podlaga gre zato na ovoj. */
.jedilnik-telo { padding: 0 var(--p4) var(--p4); }
.jedilnik-obroki td:nth-child(2),
.jedilnik-obroki th:nth-child(2) { text-align: left; }
.jedilnik-obroki td:last-child { white-space: nowrap; font-variant-numeric: tabular-nums; }
.jedilnik-obroki a { color: var(--dejanje); text-decoration: none; font-weight: 600; }
.jedilnik-obroki a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── Zamenjava obroka v jedilniku ────────────────────────────────────────── */
/*
   Gumb stoji ob kaloričnem seštevku obroka, ker se nanj nanaša. Je povezava in
   ne gumb obrazca: vsaka zamenjava je svoj naslov, zato deluje brez
   JavaScripta, gre v zgodovino brskalnika (nazaj razveljavi zamenjavo) in se
   da deliti. Dotikalna tarča je najmanj 44 px visoka, ker je to na telefonu
   glavni gumb te strani.
*/
.zamenjaj {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 6px; padding: 7px 10px; min-height: 36px;
  border: 1px solid var(--rob); border-radius: var(--r-krog);
  background: var(--plo); color: var(--dejanje);
  font-size: var(--f-2xs); font-weight: 600; text-decoration: none;
  transition: border-color var(--hitro) ease, background-color var(--hitro) ease, transform var(--hitro) var(--mehko);
}
.zamenjaj svg { width: 13px; height: 13px; transition: transform var(--srednje) var(--mehko); }
@media (hover: hover) {
  .zamenjaj:hover { border-color: var(--dejanje); background: var(--zel-50); }
  .zamenjaj:hover svg { transform: rotate(-180deg); }
}
.zamenjaj:active { transform: scale(.96); }
@media (max-width: 47.999rem) {
  /* Na telefonu je tarča polna velikost; drobne tarče so tu glavni vzrok
     zgrešenih dotikov. */
  /* 46 in ne 44: izmerjeno je bilo 43 px, ker min-height ne šteje roba.
     Kriterij je najmanj 44 px, zato ga je treba doseči, ne zaokrožiti. */
  .zamenjaj { min-height: 46px; padding: 11px 14px; font-size: var(--f-xs); }
}

/* ── Temna ploskev v dveh stolpcih ───────────────────────────────────────── */
/*
   ZAKAJ. Besedilo je imelo max-width 50ch in je na 1440 px sedelo v levi
   tretjini, obrazec pa se je raztegnil čez vso širino kartice — vnosno polje
   za e-naslov je bilo dolgo čez 1400 px. Oboje je napačno iz istega razloga:
   širina elementa je obljuba o vsebini. Predolgo polje obljublja dolg vnos,
   predolga vrstica pa se slabo bere.

   Rešitev ni krčenje besedila, ampak drugi stolpec: besedilo levo, obrazec
   desno v praznino, ki je prej zijala. Besedilu zato tudi ni treba imeti
   lastne omejitve — širino mu da stolpec.
*/
@media (min-width: 64rem) {
  .panel-dvojni {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--p8);
    align-items: start;
  }
  /* Obrazec se poravna z besedilom na vrhu, ne z dnom kartice. */
  .panel-dvojni__obrazec { padding-top: 2px; }
}

/* Zložen obrazec: polje nad gumbom, ne ob njem.
   Pri ožjem stolpcu bi vrstica stisnila polje na ~60 % in gumb na 40 %, kar je
   za e-naslov premalo. Zložena oblika da polju vso širino stolpca, gumbu pa
   polno dotikalno tarčo — enako na telefonu in na namizju. */
.iskalnik--zlozen { display: grid; grid-template-columns: 1fr; gap: var(--p3); }
.iskalnik--zlozen button { width: 100%; padding-block: var(--p4); font-size: var(--f-m); }

/* Vnosno polje na temni ploskvi: svetlo polje ostane (pove, da je vanj mogoče
   pisati), a rob mora nositi kontrast proti temnemu ozadju, ne proti belemu. */
.panel-temno .iskalnik input {
  border-color: rgba(234, 240, 228, .28);
  box-shadow: 0 1px 2px rgb(10 16 7 / .25);
}
.panel-temno .iskalnik input:hover { border-color: rgba(234, 240, 228, .5); }
.panel-temno .iskalnik input:focus-visible { border-color: var(--jan-500); }

/* Soglasje je drobno besedilo, a kljukica mora ostati polna tarča. */
.panel-temno .kartica__telo label { align-items: center; }