/* ===========================================================================
   ilovefood.club — denník
   Vizuálny jazyk je prevzatý z work/navrh/vizual/prietok.html („prietok hmoty“):
   papierový podklad, tvrdé linky namiesto tieňov, ťažké skratené nadpisy,
   tabuľkové číslice a MERACÍ farebný rad (studená bridlica → ember).
   Farba tu nie je dekorácia: pruh je široký presne toľko, koľko je hodnota.
   Preto tu nenájdeš zaoblené karty s tieňom ani gradienty.
   =========================================================================== */

:root{
  --ground:#E9E7E0; --paper:#F4F3EE; --ink:#171A13; --dim:#5F6357;
  --rule:#CBC9BF; --hair:#DEDCD3;

  /* merací rad — h1 studená bridlica … h5 ember */
  --h1:#44616C; --h2:#7C6E35; --h3:#9A5F16; --h4:#A8481B; --h5:#6E2B12;
  --water:#7FA5B0; --flag:#8A5310;
  --on-band:#F6F5F0;
  --sel:#D9E4DA;

  --chyba:#8A2E12; --ok:#3E5F3F;

  /* Okraj poľa. `--rule` na `--paper` má 1,49 : 1 a WCAG 1.4.11 chce pre hranu
     ovládacieho prvku 3 : 1 — pole na mobile splývalo s plochou. Zmes ink
     a paper vychádza 3,8 : 1 vo svetlej a 5,2 : 1 v tmavej téme, z tých
     istých tokenov, bez novej farby. */
  --pole-okraj:color-mix(in srgb,var(--ink) 55%,var(--paper));
  /* Hover hlavného a ember tlačidla. V tmavej téme bol `--h5` s tmavým
     textom 3,8 : 1; `--h3` dáva 7,9 : 1. */
  --ember-hover:var(--h5);
  color-scheme:light;

  --medzera:16px;
  --sirka:1160px;
  /* TYPOVÁ RADA (DESIGN.md → typography). Každá veľkosť písma v appke je jeden
     z týchto krokov; nová veľkosť = nový krok v DESIGN.md, nie číslo v pravidle.
     Štruktúrne veľkosti (číslo v kruhu, dlaždica makra, znak ikony) majú vlastný
     krok, aby nesplývali s textom. Výnimky: popisky grafu (jednotky viewBoxu)
     a prípony jednotiek v em. Stráži `work/regres/cisla_a_dotyk.py`. */
  --fs-display:clamp(26px,6vw,40px);
  --fs-headline:clamp(19px,4.4vw,26px);
  --fs-number-hero:clamp(44px,13vw,62px);
  --fs-number-portion:clamp(36px,10vw,44px);
  --fs-number-mid:38px;
  --fs-number-tile:19px;
  --fs-icon-glyph:24px;
  --fs-body:16px;
  --fs-row:15px;
  --fs-small:13.5px;
  --fs-small-tight:12.5px;
  --fs-label:12.5px;
  --fs-eyebrow:11.5px;
  --fs-mono:13.5px;
}

@media (prefers-color-scheme:dark){
  :root:not([data-tema="light"]){
    --ground:#111310; --paper:#181B15; --ink:#E9EBE1; --dim:#8E9284;
    --rule:#2E332A; --hair:#23271F;
    --h1:#7FA6B4; --h2:#C4B268; --h3:#E39A45; --h4:#DE6E3C; --h5:#B4553A;
    --water:#5E8894; --flag:#E0A94F;
    --on-band:#12140F;
    --sel:#1E3326;
    --chyba:#E38268; --ok:#8FBE8F;
    --ember-hover:var(--h3);
    color-scheme:dark;
  }
}
:root[data-tema="dark"]{
  --ground:#111310; --paper:#181B15; --ink:#E9EBE1; --dim:#8E9284;
  --rule:#2E332A; --hair:#23271F;
  --h1:#7FA6B4; --h2:#C4B268; --h3:#E39A45; --h4:#DE6E3C; --h5:#B4553A;
  --water:#5E8894; --flag:#E0A94F;
  --on-band:#12140F;
  --sel:#1E3326;
  --chyba:#E38268; --ok:#8FBE8F;
  --ember-hover:var(--h3);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{scrollbar-color:var(--rule) var(--ground);-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--ground);color:var(--ink);
  /* Archivo sa v prietok.html vozí ako data URI. Sem ho nesmiem priložiť
     (nesmiem zakladať nové súbory), tak beriem systémový grotesk a pocit
     držím rezom: ťažké váhy, tesný prestrih, tabuľkové číslice. */
  font-family:"Archivo","Archivo Narrow",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:var(--fs-body);line-height:1.5;font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;caret-color:var(--h4);
}
::selection{background:var(--sel);color:var(--ink)}
:focus-visible{outline:2px solid var(--h4);outline-offset:3px;border-radius:2px}
img{max-width:100%;height:auto;display:block}

/* ---------- kostra ---------- */
.obal{max-width:var(--sirka);margin:0 auto;min-height:100dvh;display:flex;flex-direction:column}
.hlavne{
  flex:1 1 auto;padding:0 var(--medzera);
  padding-bottom:calc(88px + env(safe-area-inset-bottom));
  outline:none;
}
.hlavicka{padding:0 var(--medzera)}

.preskoc{
  position:absolute;left:-9999px;top:0;z-index:60;
  background:var(--ink);color:var(--paper);padding:10px 14px;font-weight:700;
}
.preskoc:focus{left:8px;top:8px}

/* ---------- typografia ---------- */
.stitok{
  font-weight:700;font-size:var(--fs-eyebrow);letter-spacing:.11em;text-transform:uppercase;
  color:var(--dim);font-stretch:85%;
}
.nadpis{
  margin:0;font-size:var(--fs-display);line-height:.95;font-weight:800;
  letter-spacing:-.028em;text-transform:uppercase;font-stretch:80%;text-wrap:balance;
}
.nadpis em{font-style:normal;color:var(--h4)}

/* NÁZOV VÝROBKU NIE JE NADPIS UVÍTACEJ OBRAZOVKY.
 *
 * `.nadpis` je hrdinský titulok: 26–40 px, verzálky, váha 800. Na „ilovefood
 * denník" sedí. Na „Milka Tender Cow jemné pečivo s kúskami mliečnej čokolády
 * z alpského mlieka a kakaovou vrstvou 140 g" to znamená ŠESŤ riadkov krику
 * a 148 px z 812 — a informácia, kvôli ktorej si to človek rozklikol, spadne
 * pod ohyb.
 *
 * Verzálky sú preč aj z druhého dôvodu: názov v databáze je **prepis z obalu**
 * a jeho veľké a malé písmená sú údaj, nie dekorácia. „Milka" a „MILKA" nie je
 * to isté, keď tvrdíme, že názov je taký, aký je na výrobku.
 */
.nadpis--polozka{
  font-size:var(--fs-headline);line-height:1.16;font-weight:750;
  letter-spacing:-.012em;text-transform:none;text-wrap:pretty;
}
.podnadpis{margin:10px 0 0;color:var(--dim);font-size:var(--fs-row);max-width:56ch}
.podnadpis b{color:var(--ink);font-weight:600}
.sekcia{margin-top:30px}
.sekcia > h2, .sekcia > h3{
  margin:0 0 10px;font-size:var(--fs-label);letter-spacing:.11em;text-transform:uppercase;
  font-weight:700;color:var(--dim);font-stretch:85%;
}
.velke{
  font-size:var(--fs-number-hero);font-weight:800;line-height:.88;letter-spacing:-.045em;
  font-stretch:88%;
}
.velke .u{font-size:.34em;font-weight:700;letter-spacing:-.01em;margin-left:7px;color:var(--dim)}
.hot{color:var(--h4)}
.cold{color:var(--h1)}
.dim{color:var(--dim)}
.pod{margin-top:8px;font-size:var(--fs-small);color:var(--dim)}
.pod b{color:var(--ink);font-weight:650}

/* ---------- plochy a riadky ---------- */
.plocha{background:var(--paper);border:1px solid var(--rule);padding:16px}
.plocha + .plocha{margin-top:12px}

.riadok{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:12px 0;border-bottom:1px solid var(--hair);text-align:left;
}
.riadok:last-child{border-bottom:0}
.riadok .l{font-size:var(--fs-row);font-weight:600;min-width:0}
.riadok .s{font-size:var(--fs-small-tight);color:var(--dim);margin-top:2px}
.riadok .r{font-size:var(--fs-row);font-weight:750;white-space:nowrap;text-align:right}
.riadok .r small{display:block;font-size:var(--fs-eyebrow);font-weight:500;color:var(--dim)}
/* OREZANIE DLHEHO TEXTU.
 *
 * `text-overflow` funguje LEN na prvku, ktory nie je inline. Trieda sa pritom
 * pouziva aj na `<span>` (napr. nazov vo vysledku hladania) a tam nerobila
 * nic: pri uzkom obsahu text vytekal az o 67 px mimo ramca. Zmerane 13. 9. 2026
 * pri sirke obsahu 300 px. `display:block` to plati pre oba pripady — na
 * `<div>` sa nemeni nic.
 */
.orez{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}

/* ---------- pruhy (prietok) ---------- */
.pas{display:flex;height:22px;border:1px solid var(--rule);background:var(--hair);overflow:hidden}
.pas i{display:block;transition:flex-basis .45s cubic-bezier(.16,1,.3,1)}
.pas .p1{background:var(--h1)} .pas .p2{background:var(--h2)}
.pas .p3{background:var(--h3)} .pas .p4{background:var(--h4)}
.pas .pnad{
  background:repeating-linear-gradient(115deg,var(--h5) 0 3px,transparent 3px 8px);
}
/* VODA. Vlastná farba meracieho radu (`--water`) je tu na mieste: nie je to
   ozdoba, je to hodnota — a zámerne NIE farba makra, aby sa pruh vody nedal
   zameniť s pruhom kalórií. Pruh sa kreslí len vtedy, keď si človek CIEĽ
   nastavil sám; bez cieľa nie je voči čomu merať (a žiadne univerzálne číslo
   neexistuje, viď `sekciaCielaVody` v app.js). */
.pas .pvoda{background:var(--water)}
@media (prefers-reduced-motion:reduce){ .pas i{transition:none} }

.makra{display:flex;gap:0;margin-top:16px;border-top:1px solid var(--ink)}
.makra > div{flex:1;padding:9px 10px 0 0}
.makra .v{font-size:var(--fs-number-tile);font-weight:750;letter-spacing:-.02em}
.makra .k{font-size:var(--fs-eyebrow);color:var(--dim);margin-top:1px}
/* PRSTENEC: z čoho sú dnešné kalórie. Farby sú tie isté ako v pásiku a na
   dlaždiciach makier — človek si ich už spojil. `pine` je zámerne tlmená:
   „iné" nie je makro a nemá súťažiť o pozornosť s tromi, ktoré sledujeme. */
.prstenec{display:flex;align-items:center;gap:14px;margin-top:12px;flex-wrap:wrap}
.prstenec svg{flex:0 0 auto}
.prstenec__podklad{stroke:var(--sel)}
.prstenec__diel{stroke-linecap:butt}
.prstenec__p1{stroke:var(--h1)} .prstenec__p2{stroke:var(--h2)}
.prstenec__p4{stroke:var(--h4)} .prstenec__pine{stroke:var(--dim)}
.prstenec__legenda{list-style:none;margin:0;padding:0;flex:1 1 140px;min-width:0}
.prstenec__legenda li{
  display:flex;align-items:center;gap:7px;font-size:var(--fs-small);
  color:var(--dim);padding:2px 0;
}
.prstenec__legenda b{margin-left:auto;color:var(--ink);font-weight:650}
.prstenec__legenda i{
  width:10px;height:10px;border-radius:2px;flex:0 0 auto;display:block;
}
.prstenec__legenda .prstenec__p1{background:var(--h1)}
.prstenec__legenda .prstenec__p2{background:var(--h2)}
.prstenec__legenda .prstenec__p4{background:var(--h4)}
.prstenec__legenda .prstenec__pine{background:var(--dim)}

.makra .b .v{color:var(--h1)} .makra .s .v{color:var(--h2)} .makra .t .v{color:var(--h4)}

/* DLAŽDICE MAKIER 2×2 NA ÚZKOM DISPLEJI (kolo 4, 16. 9. 2026).
 *
 * MERANÉ V APPKE, nie odhadnuté. Pri okne 375 px má pás dlaždíc 309 px, teda
 * 73 až 84 px na dlaždicu (`flex:1` ich delí podľa obsahu). Samotné slovo
 * „Bielkoviny" potrebuje na jeden riadok 71 px a dlaždica mu po odpočítaní
 * pravého odsadenia necháva 73,7 px — rezerva 2,7 px. Od šírky okna asi
 * 388 px nadol sa teda nadpis dlaždice láme na dva riadky a zo štyroch
 * meracích dlaždíc je kaša. Prah je 400 px: pokrýva každý bežný telefón
 * (360, 375, 390, 393) a nad ním štyri v rade ostávajú.
 *
 * Merací jazyk sa NEMENÍ: tie isté farby, ten istý plniaci pásik, to isté
 * poradie. Mení sa len to, koľko ich stojí vedľa seba. Druhý riadok dostane
 * vlasovú linku, aby dvojica nevisela vo vzduchu — oddeľuje linka, nie tieň. */
@media (max-width:399px){
  .makra{display:grid;grid-template-columns:1fr 1fr;column-gap:12px;row-gap:0}
  .makra > div{padding:9px 0 0}
  .makra > div:nth-child(n+3){margin-top:9px;border-top:1px solid var(--hair)}
}

/* ---------- tlačidlá ---------- */
.tlacidlo{
  font:inherit;font-weight:700;font-size:var(--fs-row);
  background:var(--paper);color:var(--ink);border:1px solid var(--ink);
  padding:11px 15px;cursor:pointer;min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
}
.tlacidlo:hover{background:var(--sel)}
.tlacidlo:disabled{opacity:.45;cursor:not-allowed}
.tlacidlo--hlavne{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.tlacidlo--hlavne:hover{background:var(--ember-hover);border-color:var(--ember-hover);color:var(--on-band)}
.tlacidlo--ember{background:var(--h4);color:var(--on-band);border-color:var(--h4)}
.tlacidlo--ember:hover{background:var(--ember-hover);border-color:var(--ember-hover)}
.tlacidlo--tiche{border-color:var(--rule);color:var(--dim);font-weight:650}
.tlacidlo--tiche:hover{color:var(--ink);border-color:var(--ink);background:transparent}
.tlacidlo--siroke{width:100%}
.tlacidlo--ikona{
  min-width:44px;padding:10px;border-color:var(--rule);
  font-size:var(--fs-body);line-height:1;
}
.tlacidla{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.tlacidla .tlacidlo{flex:1 1 auto}

/* ---------- formuláre ---------- */
.polia{display:grid;gap:14px;margin-top:16px}
.pole{display:grid;gap:5px}
.pole > label, .pole > .stitok{font-size:var(--fs-label);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dim);font-stretch:85%}
.pole input, .pole select, .pole textarea{
  font:inherit;font-variant-numeric:tabular-nums;
  background:var(--paper);color:var(--ink);border:1px solid var(--pole-okraj);
  padding:11px 12px;min-height:44px;width:100%;border-radius:0;
}
.pole input:focus, .pole select:focus, .pole textarea:focus{border-color:var(--h4)}
.pole input::placeholder{color:var(--dim);opacity:1}
.pole .napoveda{font-size:var(--fs-small-tight);color:var(--dim)}
.dvojica{display:grid;grid-template-columns:1fr 1fr;gap:12px}
fieldset{border:0;padding:0;margin:0}
legend{padding:0}

/* ---------- oznamy ---------- */
.oznam{border:1px solid var(--rule);padding:11px 12px;font-size:var(--fs-small);color:var(--dim);margin-top:14px}
.oznam b{color:var(--ink);font-weight:650}
.oznam--chyba{border-color:var(--chyba);color:var(--chyba)}
.oznam--chyba b{color:var(--chyba)}
/* ALERGÉN JE `--flag`, NIE VLASTNÝ IDIÓM.
 *
 * Prvá verzia mala 4 px ľavú linku, aby bolo varovanie „lepšie vidieť“. Bol by
 * to nový vzor použitý na jedinom mieste — a bočný farebný pásik je presne to,
 * čo DESIGN.md nechce (`The Hard Line Rule`: oddeľuje linka, hrany 1 px).
 * Váha varovania nemá stáť na hrúbke rámika: nesie ju SLOVO („Obsahuje mlieko“
 * tučným), MIESTO (stojí nad hlavnou akciou) a hlavne to, že zápis sa pri
 * označenom alergéne vôbec nevykoná bez potvrdenia. Po odfarbení nezmizne nič.
 *
 * Červená (`--chyba`) je tu zámerne vylúčená: patrí chybe, nie potravine. */
.oznam--varovanie,.oznam--alergen{border-color:var(--flag);color:var(--flag)}
.oznam--varovanie b,.oznam--alergen b{color:var(--flag)}
.oznam--ok{border-color:var(--ok);color:var(--ok)}
.znamka--alergen{border-color:var(--flag);color:var(--flag)}
.oznam ul{margin:6px 0 0;padding-left:18px}
.oznam li{margin:3px 0}

.prazdne{color:var(--dim);font-size:var(--fs-row);padding:18px 0;margin:0}

/* ---------- hlásnik ---------- */
.hlasnik{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(76px + env(safe-area-inset-bottom));z-index:50;
  background:var(--ink);color:var(--paper);padding:10px 14px;font-size:var(--fs-small);font-weight:650;
  max-width:min(92vw,520px);opacity:0;pointer-events:none;transition:opacity .18s;
}
.hlasnik.vidno{opacity:1}
/* Hláška s tlačidlom „Späť“ musí brať dotyk; bežná ho nechá prejsť. */
.hlasnik--akcia{pointer-events:auto;display:flex;align-items:center;gap:14px}
.hlasnik__spat{background:none;border:1px solid var(--paper);color:var(--paper);font:inherit;
  font-weight:750;padding:6px 14px;min-height:44px;min-width:64px;cursor:pointer}
@media (prefers-reduced-motion:reduce){ .hlasnik{transition:none} }

/* ---------- navigácia ---------- */
.navigacia{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:var(--paper);border-top:1px solid var(--rule);
  padding-bottom:env(safe-area-inset-bottom);
  display:flex;
}
.navigacia:empty{display:none}
.navigacia a{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:9px 4px 10px;text-decoration:none;color:var(--dim);
  font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  border-top:2px solid transparent;margin-top:-1px;min-height:52px;justify-content:center;
}
.navigacia a[aria-current="page"]{color:var(--ink);border-top-color:var(--h4)}
.navigacia svg{width:20px;height:20px;display:block}

/* ---------- dátumový pás ---------- */
.datumpas{
  display:flex;align-items:center;gap:8px;
  border-bottom:2px solid var(--ink);padding:14px 0 12px;
}
.datumpas .stred{flex:1;text-align:center;min-width:0}
.datumpas .den{
  font-weight:800;font-size:var(--fs-body);letter-spacing:-.02em;font-stretch:88%;
  text-transform:uppercase;
}
.datumpas .datum{font-size:var(--fs-label);color:var(--dim);margin-top:1px}
/* Výber dátumu je ovládač, nie popisok: 16 px (iOS pod 16 px pri fokuse
   zväčší stránku), hrana poľa a 44 px na výšku. Predtým 12 px bez hrany
   a začiatočník nevedel, že sa naň dá klepnúť. */
.datumpas input[type="date"]{
  font:inherit;font-size:var(--fs-body);font-weight:600;background:var(--paper);
  border:1px solid var(--pole-okraj);border-radius:0;color:var(--ink);
  padding:6px 10px;margin-top:6px;min-height:44px;width:auto;max-width:100%;
}

/* ---------- jedlá dňa ---------- */
.jedlo{border-top:1px solid var(--rule);padding-top:10px;margin-top:20px}
.jedlo__hlava{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.jedlo__nazov{
  margin:0;font-size:var(--fs-small);font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  font-stretch:85%;
}
.jedlo__sucet{font-size:var(--fs-row);font-weight:750;white-space:nowrap}
.jedlo__sucet.nula{color:var(--dim);font-weight:600}
.jedlo__pridaj{
  margin-top:8px;font-size:var(--fs-small);font-weight:700;color:var(--h4);
  background:none;border:0;padding:6px 0;cursor:pointer;font-family:inherit;min-height:32px;
}
.jedlo__pridaj:hover{color:var(--h5);text-decoration:underline}
.jedlo__akcie{display:flex;flex-wrap:wrap;column-gap:18px}
.recept-riadok{display:flex;align-items:center;gap:8px}
/* Čiara výdaja po dňoch je lomená — bez výplne, inak SVG zaleje plochu pod ňou. */
.graf polyline.graf__ciel{fill:none;stroke-linejoin:round}
.recept-riadok .vysledok{flex:1;min-width:0}
.jedlo__pridaj:disabled{color:var(--dim);cursor:default;text-decoration:none}
.zapis{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;
  padding:11px 0;border-bottom:1px solid var(--hair)}
.zapis:last-of-type{border-bottom:0}
.zapis__telo{min-width:0;flex:1}
.zapis__nazov{font-size:var(--fs-row);font-weight:600}
.zapis__spod{font-size:var(--fs-small-tight);color:var(--dim);margin-top:2px}
.zapis__kcal{font-size:var(--fs-row);font-weight:750;white-space:nowrap}
/* 44 px: „Upraviť" a „Zmazať" sú vedľa seba pri každom zápise a mali 34 px —
   palcom sa trafilo to druhé. */
.zapis__nastroje{display:flex;gap:10px;margin-top:6px}
.zapis__nastroje .tlacidlo{min-height:44px;padding:8px 14px;font-size:var(--fs-small);font-weight:650}

/* ---------- hľadanie ---------- */
.hladanie{position:sticky;top:0;z-index:20;background:var(--ground);
  padding:12px 0 10px;border-bottom:1px solid var(--rule)}
.hladanie__rad{display:flex;gap:8px}
/* Aj riadok hľadania mimo lepkavého pásu (recept z odkazu: „Hľadať inú položku“)
   — bez toho tam ostalo sivé pole prehliadača (prechod appkou, kolo 11). */
.hladanie input[type="search"],.hladanie__rad input[type="search"]{
  font:inherit;flex:1;min-width:0;background:var(--paper);color:var(--ink);
  border:1px solid var(--ink);padding:12px 13px;min-height:46px;border-radius:0;
  -webkit-appearance:none;appearance:none;
}
.hladanie input[type="search"]:focus,.hladanie__rad input[type="search"]:focus{border-color:var(--h4)}
/* ODKAZ V TEXTE JE EMBER (DESIGN.md, Primary). Holé `<a>` v napovede a v riadku
   receptu mali farbu prehliadača — v tmavej téme fialovomodrú. `:where` drží
   špecificitu nízko, takže `.povod a` a triedne odkazy ostávajú svoje. */
.hlavne :where(a:not([class])){color:var(--h4)}

.vysledok{
  display:flex;width:100%;text-align:left;gap:10px;align-items:center;
  background:transparent;border:0;border-bottom:1px solid var(--hair);
  padding:12px 2px;cursor:pointer;font:inherit;color:inherit;
}
.vysledok:hover{background:var(--sel)}
.nahlad{
  width:44px;height:44px;flex:0 0 44px;border-radius:6px;object-fit:cover;
  background:var(--sel);display:block;
}
/* Ked fotku nemame — a nebudeme ju mat pri dvoch tretinach vyrobkov — dlazdica
   ukaze MAKRA: tri pasy vysoke podla podielu na energii. Su to nase cisla a uz
   pouzivane farby, nie dekoracia; zoznam tak drzi rytmus a da sa z neho citat. */
.nahlad--prazdny{background:var(--sel)}
.nahlad--makra{
  display:flex;flex-direction:column;overflow:hidden;
}
.nahlad--makra>span{display:block;width:100%;min-height:1px}
.nahlad__b{background:var(--h1)}
.nahlad__s{background:var(--h2)}
.nahlad__t{background:var(--h4)}
.vysledok__telo{flex:1;min-width:0;display:block;overflow:hidden}
/* NAZOV NA DVA RIADKY.
 *
 * Martin 13. 9. 2026: „ak tak popis dajme do dvoch riadkov nech vidime rozdiel
 * medzi nimi." Rozdiel medzi „Coca-Cola 1,5 l" a „Coca-Cola 330 ml" je na KONCI
 * nazvu — presne tam, kde jednoriadkove orezanie skoncilo. Zmerane: pri oreze
 * na 28 znakov (telefon) boli 2 zo 400 zobrazenych riadkov nerozlisitelne len
 * kvoli tomu.
 *
 * `-webkit-line-clamp` si tri bodky dorobi sam, `text-overflow` sa k nemu
 * nepridava. Prefix `-webkit-` je tu aj v roku 2026 nutny; `line-clamp` bez
 * neho zatial nestaci vsade, preto su obe.
 */
.vysledok__nazov{font-size:var(--fs-row);font-weight:600;line-height:1.25}
.orez--dva{
  display:-webkit-box;-webkit-box-orient:vertical;
  -webkit-line-clamp:2;line-clamp:2;
  overflow:hidden;white-space:normal;min-width:0;
}
/* Rozpor v hodnotach. Nekricí — je to upozornenie, nie chyba.
   `--h3` mal na podklade 4,22 : 1 (pod AA pri 12,5 px); `--flag` je farba
   upozornení v celej appke a má 5,1 : 1. */
.vysledok__spor{color:var(--flag);font-weight:600}
.vysledok__spod{font-size:var(--fs-small-tight);color:var(--dim);margin-top:2px}
/* ZOZNAM AKTIVÍT. Vyzerá ako výsledky hľadania potraviny naschvál — robí to
   isté a človek to už pozná. Výška je obmedzená, aby políčko „koľko minút"
   a tlačidlo ostali na obrazovke aj pri štyridsiatich nájdených. */
.aktivita__zoznam{max-height:44vh;overflow-y:auto;margin:8px 0 4px}
.vysledok--zap{background:var(--sel)}
.vysledok--zap .vysledok__nazov{color:var(--h4)}

.vysledok__kcal{font-size:var(--fs-row);font-weight:750;white-space:nowrap}
.vysledok__kcal small{display:block;font-size:var(--fs-eyebrow);font-weight:500;color:var(--dim);text-align:right}
.znacka{
  display:inline-block;font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--h1);
}

/* ---------- detail položky ---------- */
.ziviny{width:100%;border-collapse:collapse;font-size:var(--fs-row);margin-top:6px}
.ziviny th{
  text-align:left;font-size:var(--fs-eyebrow);font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--dim);padding:9px 0;border-bottom:1px solid var(--rule);font-stretch:85%;
}
.ziviny td{padding:9px 0;border-bottom:1px solid var(--hair)}
.ziviny tr:last-child td{border-bottom:0}
.ziviny td.n{text-align:right;white-space:nowrap;font-weight:700}
.ziviny td.n em{font-style:normal;font-weight:500;color:var(--dim);font-size:var(--fs-small-tight)}

.povod{border:1px solid var(--h1);padding:13px;margin-top:16px}
.povod .stitok{color:var(--h1)}
.povod dl{margin:8px 0 0;display:grid;grid-template-columns:auto 1fr;gap:5px 14px;font-size:var(--fs-small)}
.povod dt{color:var(--dim)}
.povod dd{margin:0;font-weight:650;min-width:0;overflow-wrap:anywhere}
.povod a{color:var(--h1)}
.povod--chyba{border-color:var(--flag)}
.povod--chyba .stitok{color:var(--flag)}

.mnozstvo{display:grid;grid-template-columns:110px 1fr;gap:10px;margin-top:6px}
.mnozstvo input, .mnozstvo select{
  font:inherit;font-size:var(--fs-body);font-weight:700;background:var(--paper);color:var(--ink);
  border:1px solid var(--ink);padding:11px 12px;min-height:50px;width:100%;border-radius:0;
}
.prepocet{
  margin-top:14px;border-top:1px solid var(--ink);padding-top:12px;
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.prepocet .cislo{font-size:var(--fs-number-portion);font-weight:800;letter-spacing:-.035em;font-stretch:88%;color:var(--h4)}
.prepocet .cislo .u{font-size:.4em;color:var(--dim);margin-left:6px;font-weight:700}
.prepocet .rozpis{font-size:var(--fs-small);color:var(--dim)}

/* PRIKAZ KONEKTORA SA MUSI ZALOMIT.
   `claude mcp add --transport http ilovefood https://mcp.ilovefood.club/mcp
   --header "Authorization: Bearer TVOJ_TOKEN" --scope user` je jeden dlhy
   retazec s niekolkymi miestami na zalomenie; na telefone vytiekol z ramca
   a rozsiril celu stranku. `.token` to pre samotny token riesil uz davno,
   `<code>` v navode nie. */
code{overflow-wrap:anywhere}

/* ---------- token ---------- */
.token{
  margin-top:10px;border:1px solid var(--h4);padding:12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:var(--fs-mono);overflow-wrap:anywhere;user-select:all;background:var(--paper);
}

/* ---------- skener ----------
   Trieda sa NESMIE volať `.skener` — presne tak si volá koreň svojho UI
   modul skener.js a globálne CSS by sa nám pobilo. */
.skenovanie{
  position:fixed;inset:0;z-index:70;background:#000;
  display:flex;align-items:center;justify-content:center;padding:12px;
}
.skenovanie[hidden]{display:none}
.skenovanie__plocha{
  width:100%;max-height:100%;display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:var(--fs-row);text-align:center;
}

/* ---------- desktop ---------- */
@media (min-width:900px){
  .obal{padding-top:8px}
  .hlavne{padding-bottom:40px}
  .navigacia{
    /* pozor: `margin:0 auto` by tu vypol stretch vo flexovom `.obal`
       a lišta by sa scvrkla na šírku textu */
    position:static;border-top:0;border-bottom:1px solid var(--rule);background:transparent;
    margin:0;padding:0 var(--medzera);
  }
  .navigacia a{
    flex:0 0 auto;flex-direction:row;gap:8px;padding:12px 18px 12px 0;
    border-top:0;border-bottom:2px solid transparent;margin-top:0;font-size:var(--fs-label);
  }
  .navigacia a[aria-current="page"]{border-top-color:transparent;border-bottom-color:var(--h4)}
  .hlasnik{bottom:24px}
  .dvojstlpec{display:grid;grid-template-columns:360px minmax(0,1fr);gap:40px;align-items:start}
  .dvojstlpec > .bok{position:sticky;top:16px}
  /* pozor: `gap` by prebil riadkovú medzeru z `.polia` — meníme len stĺpcovú */
  .mriezka{display:grid;grid-template-columns:1fr 1fr;column-gap:32px}
  .siroke-pole{max-width:560px}
}

/* Slaba zhoda: dopyt v databaze zrejme nie je a toto je najblizsia nahoda.
   Nesmie vyzerat ako plnohodnotny vysledok — inak si clovek zapise rybu
   namiesto mineralky (viz scraper/dennik.py, ISTOTA_PRAH). */
/* NIE PRIEHĽADNOSŤOU CELÉHO RIADKU. `opacity:.72` stiahla sivý text na
   2,9 : 1 a „kcal / 100 g" na 2,3 : 1 — slabá zhoda sa tak nedala ani prečítať.
   Rozdiel teraz nesie štítok „slabá zhoda", vyblednutý obrázok a ľahší rez
   názvu; text ostáva čitateľný. */
.vysledok--slaby .nahlad { opacity: .5; }
.vysledok--slaby .vysledok__nazov { font-weight: 450; }
.vysledok--slaby { border-bottom-style: dashed; }
.znamka {
  display: inline-block;
  margin-left: .5em;
  padding: .08em .45em;
  border: 1px solid var(--rule);
  border-radius: 2px;
  font-size: var(--fs-eyebrow);
  letter-spacing: .08em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}

/* ---------- návrhy do hľadania ---------- */
.napovedy{
  display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 10px;
}
/* POZOR: `.napoveda` sa v appke pouziva na DVE rozne veci — ako pilulka
 * navrhu v hladani (klikatelna) a ako pomocny text pod polom (obycajna veta).
 * Toto pravidlo platilo na obe, takze „Aspon 8 znakov." aj cela veta
 * o Mifflin–St Jeor sa vykreslili ako oval s ramikom a kurzorom ruky — clovek
 * na ne klikal a nedialo sa nic. Pilulka je odteraz LEN v `.napovedy`. */
.napovedy .napoveda{
  display:inline-flex;align-items:baseline;gap:5px;
  padding:6px 13px;border:1px solid var(--rule);border-radius:999px;
  background:transparent;color:inherit;font:inherit;font-size:var(--fs-small);
  cursor:pointer;line-height:1.2;
  /* Pilulka mala ~30 px na výšku; prst dieťaťa ju minul a trafil susednú. */
  min-height:44px;align-items:center;
}
.napovedy .napoveda:hover{background:var(--sel)}
/* Pomocny text pod polom: obycajna veta, nie tlacidlo. */
.napoveda{display:block;font-size:var(--fs-small-tight);color:var(--dim);line-height:1.45;margin-top:4px}
.napoveda small{font-size:var(--fs-eyebrow);color:var(--dim);font-weight:600}
/* Vlastná položka je vecne iná vec než výraz — nech je to vidieť. */
.napoveda--vlastna{border-style:dashed;font-weight:650}


/* === Tok etikety: tri kroky, dve dlazdice, jedno odpocitavanie ============
   Martin 12. 9. 2026 po prvom skene: „nemusi mi appka prepisovat textovo len
   vyplnit tabulku… malo odomna pytat fotku produktu, aby bol aj nahlad…
   zbytocne tam nedavaj texty len logicky jednoducho naviguj a nech je to rychle
   alebo ak sa nieco deje tak nech vieme ze sa nieco deje idealne odpocitavanie."
   Preto: ziadne odseky, len kroky, dlazdice a odpocet.                      */

/* Krok je navigacia, nie popisok: `--fs-label` (12,5 px), nie najmensi krok
   rady. Pri fotení obalu v obchode je to jediné, co hovori, kde clovek je. */
.kroky{
  display:flex;gap:8px;list-style:none;margin:18px 0 14px;padding:0;
  font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;font-weight:700;
  color:var(--dim);font-stretch:85%;
}
.kroky li{display:flex;align-items:center;gap:6px}
.kroky li + li::before{content:"";width:14px;height:1px;background:var(--rule)}
.kroky__c{
  display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  border:1px solid var(--rule);font-size:var(--fs-label);letter-spacing:0;
}
.kroky__k--teraz{color:var(--ink)}
.kroky__k--teraz .kroky__c{background:var(--h4);border-color:var(--h4);color:var(--on-band)}
.kroky__k--hotovo .kroky__c{background:var(--sel);border-color:var(--sel);color:var(--ink)}

.fotod-par{display:grid;gap:10px;grid-template-columns:1fr 1fr}
@media (max-width:520px){.fotod-par{grid-template-columns:1fr}}
.fotod{
  display:flex;align-items:center;gap:12px;min-height:92px;padding:12px;
  border:1px dashed var(--rule);background:var(--paper);cursor:pointer;
}
.fotod:hover{border-color:var(--ink)}
/* Vstup súboru je neviditeľný (1 × 1 px), takže jeho fokus nebolo vidieť nikde.
   Obrys dostane celá dlaždica. */
.fotod:focus-within{outline:2px solid var(--h4);outline-offset:3px}
.fotod--ma{border-style:solid;border-color:var(--ok)}
.fotod__vstup{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.fotod__ikona{
  display:grid;place-items:center;width:52px;height:52px;flex:0 0 auto;
  border:1px solid var(--rule);font-size:var(--fs-icon-glyph);line-height:1;color:var(--dim);
}
.fotod__nahlad{width:52px;height:52px;flex:0 0 auto;object-fit:cover;border:1px solid var(--rule)}
.fotod__text{display:flex;flex-direction:column;gap:2px;font-size:var(--fs-row)}
.fotod__text b{font-weight:700}

.pole--uzke{max-width:260px;margin-top:12px}

.cakanie{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:38px 16px;text-align:center;
}
.cakanie__kruh{
  display:grid;place-items:center;width:104px;height:104px;border-radius:50%;
  border:2px solid var(--h4);color:var(--h4);
  font-size:var(--fs-number-mid);font-weight:800;line-height:1;font-variant-numeric:tabular-nums;
}
.cakanie__kruh small{font-size:var(--fs-label);font-weight:600;color:var(--dim)}
.cakanie__co{margin:0;font-size:var(--fs-row);color:var(--ink)}
.cakanie__pas{width:min(320px,100%);height:3px;background:var(--hair);overflow:hidden}
/* scaleX, nie width: animácia šírky prepočítava rozloženie pri každom tiku. */
.cakanie__pas i{display:block;height:100%;width:100%;background:var(--h4);
  transform:scaleX(0);transform-origin:left;transition:transform .25s linear}
.cakanie--hotovo{padding:24px 16px;gap:6px}

/* Druhove nahrady nad fotenim etikety — pre vyrobky, ktore tabulku na obale
   nemaju (cerstva zelenina, pecivo od pultu). Jedno klepnutie = hotovo.
   Tvrde linky, ziadne zaoblenie ani tien — ako zvysok rozhrania. */
.druhove{margin:0 0 18px}
.druhove__co{margin:0 0 10px;font-size:var(--fs-small);color:var(--dim)}
.druhove__k{
  display:block;width:100%;text-align:left;cursor:pointer;
  margin-bottom:-1px;padding:12px 14px;
  background:var(--paper);color:var(--ink);font:inherit;
  border:1px solid var(--rule);
}
.druhove__k:hover{border-color:var(--h4);position:relative;z-index:1}
.druhove__k b{display:block;font-weight:650}
.druhove__k .pod{margin-top:2px;font-size:var(--fs-small)}

/* ---------------------------------------------------------------- tok etikety
   Zmeny z 12. 9. 2026 po Martinovej davke pripomienok a troch recenzentoch. */

/* NAHLAD FOTKY BOL 52 x 52 px. Na takom kuse sa neda posudit, ci je tabulka
   zivin citatelna — a presne to clovek v obchode potrebuje vediet, kym fotku
   posle na precitanie. Teraz je na sirku dlazdice a pod nim stoji „Odfotit
   znova", ktora vymeni LEN tuto jednu fotku. */
.fotod--velka{flex-direction:column;align-items:stretch;text-align:left}
.fotod--velka .fotod__nahlad{
  width:100%;height:auto;max-height:46vh;object-fit:contain;background:var(--ground);
}
.fotod--velka .fotod__ikona{width:100%;height:96px}
.fotod__znova{
  margin-top:8px;align-self:flex-start;font:inherit;font-size:var(--fs-small);
  background:none;border:0;padding:0;color:var(--h4);cursor:pointer;
  text-decoration:underline;min-height:44px;
}

/* CHIPY: typ ceny na JEDNO klepnutie. Rozbalovaci zoznam je na telefone tri
   klepnutia a nevidno v nom moznosti naraz. */
.chipy{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}

/* VLASTNY ROZSAH DATUMOV pod chipmi obdobia.
 *
 * `flex-wrap` a `min-width:0` na poliach su tu naschval: natívne `input
 * type=date` si na mobile pýta okolo 140 px a tri prvky vedľa seba sa do
 * 300 px obsahu nezmestia — bez zalomenia by vytiekli z rámca presne tak,
 * ako vytekali názvy vo výsledkoch hľadania. */
.rozsah{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin-top:10px}
.rozsah__pole{display:flex;flex-direction:column;gap:4px;flex:1 1 130px;min-width:0}
/* Hrana a tvar ako kazde ine pole (DESIGN.md, Inputs): `--pole-okraj`, pravy
   uhol. `--rule` je oddelovac riadkov, na hrane pola ma 1,6 : 1 — pod 3 : 1,
   ktore ziada WCAG 2.2 na ovladacie prvky; a 8 px zaoblenie tu bolo jedine. */
.rozsah__pole input{
  font:inherit;font-size:var(--fs-body);padding:11px 12px;min-height:44px;width:100%;
  background:var(--paper);color:var(--ink);border:1px solid var(--pole-okraj);
  border-radius:0;
}
.rozsah__pole input:focus{border-color:var(--h4)}
.rozsah .tlacidlo{flex:0 0 auto;min-height:44px}
.chip{
  font:inherit;font-size:var(--fs-row);font-weight:600;padding:9px 14px;cursor:pointer;
  background:var(--paper);color:var(--ink);border:1px solid var(--rule);
  min-height:40px;
}
.chip:hover{border-color:var(--ink)}
.chip--zap{background:var(--h4);border-color:var(--h4);color:var(--on-band)}

/* Zlozene bloky. Na prvy pohlad ma clovek vidiet styri ciselka, nie trinast. */
.skryte{margin-top:14px;border-top:1px solid var(--hair);padding-top:10px}
.skryte > summary{
  cursor:pointer;font-size:var(--fs-row);font-weight:650;color:var(--h4);
  padding:6px 0;list-style:none;
}
.skryte > summary::-webkit-details-marker{display:none}
.skryte > summary::before{content:"+ ";font-weight:800}
.skryte[open] > summary::before{content:"− "}

/* Povinne pole, ktore clovek nevyplnil. Prud hlasky dole na telefone prehliadne. */
.pole--chyba input, input.pole--chyba{border-color:var(--chyba);outline:2px solid var(--chyba)}


/* ============================================ KALENDÁR A VÁHA (13. 9. 2026)
 *
 * Mesiac je mriežka siedmich stĺpcov. Farba bunky hovorí jedinú vec: ako
 * ďaleko bol ten deň od cieľa. Zámerne sa to nedá čítať ako známkovanie —
 * deň pod cieľom nie je „lepší", je len iný, a appka nikoho nemá hnať dole.
 *
 * POZOR NA PREMENNÉ. Prvá verzia tohto bloku si vymyslela `--plocha`,
 * `--ciara` a `--tlmene`, ktoré v projekte nie sú — na tmavej téme by z dní
 * boli biele štvorce. Platné mená sú `--paper`, `--ink`, `--dim`, `--rule`,
 * `--hair`, `--sel`, `--ok`, `--h3`. Tónovanie ide cez `color-mix`, aby
 * fungovalo v svetlej aj tmavej téme z jedného zápisu.
 */
.kmriezka {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin: 10px auto 6px;
  /* Bunka je stvorec, takze bez stropu by na sirokej obrazovke mala 160 px
     a kalendar by vyzeral ako sachovnica. Na mobile sa strop neuplatni. */
  max-width: 430px;
}
.khlava {
  text-align: center;
  font-size: var(--fs-eyebrow);
  color: var(--dim);
  padding-bottom: 2px;
}
.kdenprazdny { aspect-ratio: 1; }
.kden {
  aspect-ratio: 1;
  /* DOTYKOVY CIEL 44 px (kolo 8). Bunka dna je hlavny ovladac kalendara —
     klepnutim sa otvara den — a mala len tolko, kolko zvysilo zo sirky.
     Merane pri obsahu `viewport - 32 px` a 7 stlpcoch: pri 375 px vychadza
     46,4 px a pri 360 px 44,3 px (gap je pod 400 px uz 3 px), ale pri 320 px
     len 38,6 px. `aspect-ratio` drzi stvorec, takze s vyskou klesala aj ona.
     `min-height` zaruci 44 px na vysku na KAZDEJ sirke; sirku pod ~340 px
     viac roztiahnut neda, bez toho aby mriezka vytiekla z ramca. */
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  border: 1px solid var(--hair);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  padding: 0;
  position: relative;
}
.kden:hover { border-color: var(--rule); }
.kden:focus-visible { outline: 2px solid var(--h1); outline-offset: 2px; }
.kcislo { font-size: var(--fs-small); font-weight: 600; }
.kkcal { font-size: var(--fs-eyebrow); color: var(--dim); line-height: 1; }

/* Bodka v rohu = v ten deň sa človek vážil. */
.kvaha {
  position: absolute; top: 4px; right: 4px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--h1);
}

/* Deň bez zápisu je stlmený, nie prázdny — diera je informácia. */
.kden--bez { background: var(--ground); color: var(--dim); border-style: dashed; }
.kden--sedi { background: var(--sel); border-color: color-mix(in srgb, var(--ok) 40%, var(--hair)); }
.kden--pod { background: color-mix(in srgb, var(--water) 16%, var(--paper)); }
.kden--nad { background: color-mix(in srgb, var(--h3) 16%, var(--paper)); }
.kden--je { background: var(--paper); }

.datumpas--vnutri { margin-top: 14px; }

.mriezka2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

/* Tlmená plocha: to isté ako `.plocha`, len na tichšom podklade. Používa sa
 * pre vetu „zatiaľ sa to nedá spočítať" — je to informácia, nie výsledok. */
.plocha--tlmena { background: var(--ground); }
.veta { font-size: var(--fs-body); margin: 0 0 4px; line-height: 1.35; }


/* ================================================ SÚHLAS S MERANÍM (13. 9. 2026)
 *
 * Lišta stojí dole a neprekrýva obsah natoľko, aby sa appka nedala používať —
 * kto sa nechce rozhodnúť teraz, nemusí. Obe tlačidlá sú rovnako veľké
 * a rovnako blízko: lišta, kde je „Súhlasím" o klik bližšie než „Odmietnuť",
 * je podľa európskych úradov neplatný súhlas.
 */
.suhlas {
  position: fixed;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 60;
  max-width: 560px;
  margin: 0 auto;
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 14px 16px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .22);
}
.suhlas__text { margin: 0 0 10px; font-size: var(--fs-row); line-height: 1.45; }
.suhlas__tlacidla { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.suhlas__tlacidla .tlacidlo { width: 100%; justify-content: center; }
.suhlas__pod { margin: 8px 0 0; font-size: var(--fs-small-tight); color: var(--dim); }
@media (min-width: 600px) {
  .suhlas { padding: 16px 18px; }
}


/* ==================================================== POHYB (13. 9. 2026)
 *
 * Výber aktivity sedí v tej istej sekcii ako jedlá, takže zdedí ich vzhľad.
 * Vlastné je tu len zoskupenie do skupín a dvojica tlačidiel dole.
 */
.aktivita__vyber { padding: 10px 0 4px; display: grid; gap: 10px; }
.aktivita__tlacidla { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.aktivita__tlacidla .tlacidlo { width: 100%; justify-content: center; }

/* ======================================================= GRAFY (13. 9. 2026)
 *
 * Bez knižnice. `viewBox` sa škáluje sám, takže ten istý graf sedí na mobile
 * aj na monitore — preto sú všetky rozmery v kóde v jednotkách viewBoxu
 * (320 × 120) a nie v pixeloch.
 *
 * Prijaté sú stĺpce, výdaj je čiara. Deň NAD odhadovaným výdajom sa nekreslí
 * poplašnou červenou: jeden deň nad ním nie je chyba a appka nemá nikoho
 * strašiť. Je len tmavší.
 */
.graf{
  display:block;width:100%;height:auto;margin:6px 0 2px;
  overflow:visible;
}
.graf__nadpis{
  font-size:var(--fs-row);font-weight:700;letter-spacing:.01em;
  margin:18px 0 2px;text-transform:uppercase;color:var(--dim);
}
/* Mriezka bola `--hair` na `--ground`, cize pomer 1,12 : 1 — ciary, na ktore
 * sa cisla osi odkazuju, boli prakticky neviditelne. */
.graf__mriezka{stroke:color-mix(in srgb,var(--ink) 22%,transparent);stroke-width:.8}
/* VELKOST PISMA V GRAFE.
 *
 * 7px v jednotkach viewBoxu znamenalo na mobile 7,5 skutocneho pixela — a to
 * su jedine cisla, ktore graf ukazuje. Pre 52-rocneho cloveka (presbyopia je po
 * 45. roku pravidlo, nie vynimka) je realne dno 11 px. Na desktope sa viewBox
 * roztiahne dvojnasobne, takze tam staci mensia hodnota. */
.graf__popis{font-size:10.5px;fill:var(--dim)}
.graf__popis--y{text-anchor:end}
@media(min-width:700px){.graf__popis{font-size:6.5px}}
.graf__stlpec{fill:var(--h1);opacity:.75}
/* Den nad odhadovanym vydajom sa lisi AJ TVAROM, nie len farbou: v odtienoch
 * sivej bol pomer 1,04 : 1, cize nerozoznatelny. Srafovanie je ten isty napad
 * ako pri `.pas .pnad` vyssie. */
.graf__stlpec--nad{fill:var(--h3);opacity:.85;stroke:var(--ink);stroke-width:.4;stroke-dasharray:1.5 1.5}
.graf__pohyb{fill:var(--ok);opacity:.9}
.graf__ciel{stroke:var(--ink);stroke-width:1;stroke-dasharray:3 2;opacity:.7}
.graf__ciara{fill:none;stroke:var(--h1);stroke-width:.9;opacity:.5;stroke-dasharray:2 1.5}
.graf__trend{fill:none;stroke:var(--h4);stroke-width:1.8;stroke-linecap:round}
.graf__bod{fill:var(--h1)}

@media (min-width:700px){
  /* Na širokej obrazovke by graf roztiahnutý na 1160 px mal písmo ako maják.
     Obmedzí sa šírka, nie veľkosť písma. */
  .graf{max-width:640px}
}


/* Legenda ku grafu. Bez nej bola jedinym vysvetlenim veta pod obrazkom, ktoru
 * si clovek musel zapamatat a preniest ocami do grafu — a v tmavej teme bola
 * navyse nepravdiva („tmavsia cast stlpca" bola svetlejsia). */
.legenda{display:flex;flex-wrap:wrap;gap:10px 16px;margin:4px 0 2px;font-size:var(--fs-small-tight);color:var(--dim)}
.legenda span{display:inline-flex;align-items:center;gap:6px}
.legenda i{width:14px;height:10px;display:inline-block;border-radius:2px}
.legenda .l-prijem{background:var(--h1);opacity:.75}
.legenda .l-nad{background:var(--h3);opacity:.85;border:1px dashed var(--ink)}
.legenda .l-pohyb{background:var(--ok);opacity:.9}
.legenda .l-vydaj{height:0;border-top:2px dashed var(--ink);opacity:.7;border-radius:0}
.legenda .l-trend{height:0;border-top:2px solid var(--h4);border-radius:0}
.legenda .l-vaha{height:0;border-top:2px dashed var(--h1);border-radius:0}

/* Dotykove ciele. WCAG 2.5.5 a Apple HIG odporucaju 44 px; chipy mali 41,
 * „+ pridat" 32 a rozbalovacie `summary` 33. */
.chip{min-height:44px}
.jedlo__pridaj{min-height:44px}
.skryte>summary{padding:12px 0}
.tlacidlo--ikona svg{width:20px;height:20px;display:block}

/* Kaloricke cislo v bunke kalendara malo `--dim` na tonovanom pozadi: pri dni
 * nad cielom to bolo 4,49 : 1 v svetlej a 4,12 : 1 v tmavej teme, cize pod
 * prahom. Hierarchiu drzi velkost, nie vyblednuta farba. */
.kkcal{color:var(--ink);font-size:var(--fs-eyebrow);white-space:nowrap}
.kden{overflow:hidden}
@media(max-width:400px){.kmriezka{gap:3px}}

/* Na sirokej obrazovke ma cely prehlad jeden stlpec — inak stali plochy na
 * 1128 px, kalendar 430 px v strede a graf 640 px vlavo ako tri cudzie kusy,
 * a veta mala 135 znakov na riadok namiesto odporucanych 45-75. */
.prehlad-stlpec{max-width:560px}
.prehlad-stlpec .graf{margin-inline:0}
.veta{max-width:56ch}

/* ================================== CIELE NA MAKRÁ (13. 9. 2026)
 *
 * Dlaždica ukazuje zjedené aj cieľ a pod tým zostatok. Prekročenie sa NEKRESLÍ
 * poplašne — rovnaké pravidlo ako pri kalóriách: jeden deň nad cieľom nie je
 * chyba a appka nemá nikoho strašiť.
 */
.makra .zciela{font-size:var(--fs-eyebrow);font-weight:600;color:var(--dim);white-space:nowrap}
.makra .pasik{height:4px;background:var(--hair);border-radius:2px;margin:5px 0 3px;overflow:hidden}
.makra .pasik i{display:block;height:100%;background:currentColor;opacity:.55}
.makra .k--zostatok{font-size:var(--fs-eyebrow);color:var(--dim);font-weight:500;letter-spacing:0}
/* SOL. Ma mierku ako makra, ale nie ich farbu: nie je to cielova zivina, ktoru
   clovek „plni" — je to referencia WHO/EFSA (5 g), pod ktorou ma zostat.
   Prekrocenie je srafovane, nie cervene. To iste pravidlo ako `.pas .pnad`:
   jeden slany den nie je chyba a appka o jedle nema strasit. */
.makra .sol .v{color:var(--dim2,var(--ink))}
/* SOL NEMA PLNIACI PASIK. Pod referenciou je pasik len tenka stopa v mierke —
   plniaci pruh by zo soli spravil stvrty ciel, ktory sa da „nesplnit", a soli
   sa nema kolko zjest. Prekrocenie je srafovane, nie cervene: to iste pravidlo
   ako `.pas .pnad`, jeden slany den nie je chyba. */
.makra .pasik--sol{background:transparent;border-bottom:1px solid var(--hair)}
.makra .pasik--sol i{opacity:.28}
/* Vyveta o chybajucom udaji. Nie vystraha — je to priznanie, nie chyba
   cloveka. Tenka linka vlavo ju odlisi od bezneho `.pod` a nic viac. */
.pod--chyba-udaja{border-left:2px solid var(--hair);padding-left:8px;margin-top:12px}

.makra .pasik--sol i.nad{
  background:repeating-linear-gradient(115deg,var(--h5) 0 3px,transparent 3px 8px);
  opacity:1;
}

/* Jednoklikový zápis posledného množstva pri obľúbených a nedávnych. */
.rychly{
  display:inline-flex;align-items:center;min-height:44px;
  margin:-4px 0 10px;padding:0 14px;
  border:1px solid var(--rule);border-radius:999px;background:transparent;
  color:var(--h4);font:inherit;font-size:var(--fs-small);font-weight:700;cursor:pointer;
}
.rychly:hover{background:var(--sel)}
.rychly:focus-visible{outline:2px solid var(--h1);outline-offset:2px}

/* Pruh režimu administrátora. Je vidieť po celý čas zámerne: rozhodnutia
 * v audite platia pre všetkých, nie len pre toho, kto ich robí. */
.adminpruh{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:8px 12px;background:var(--h4);color:var(--on-band);
  font-size:var(--fs-small);font-weight:700;letter-spacing:.01em;
}
.adminpruh .tlacidlo{min-height:34px;color:var(--on-band);border-color:currentColor}
.adminpruh a{color:var(--on-band)}

/* ================================= PIKTOGRAMY POTRAVÍN (13. 9. 2026)
 *
 * Náhradný obrázok, keď fotku nemáme. Predtým tu stál trojfarebný pásik
 * s rozdelením makier — ako údaj to sedelo, ako obrázok v zozname nie:
 * dvadsať položiek pod sebou vyzeralo ako dvadsať rovnakých obdĺžnikov.
 *
 * Farba naznačuje skupinu, ale NIE JE jediným nositeľom — tvar znaku hovorí
 * to isté a funguje aj čiernobielo.
 */
.nahlad--znak{
  display:flex;align-items:center;justify-content:center;
  background:var(--ground);border:1px solid var(--hair);
  color:var(--dim);
}
.nahlad--znak svg{width:58%;height:58%;display:block}
/* FOTKA NAD PIKTOGRAMOM (kolo 18). Kym nepride — pomale data, visiaca
   poziadavka — nekresli nic a je vidiet piktogram, nie prazdny tmavy stvorec.
   Podklad dostane az nacitana (`data-nacitana`), aby priehladne PNG nestalo
   na kresbe. Pri chybe obsluha v app.js nahradi celu dlazdicu zalohou. */
.nahlad--s-fotkou{position:relative;overflow:hidden}
.nahlad__foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.nahlad__foto[data-nacitana]{background:var(--paper)}
/* TOKENY, NIE HEX. Hodnoty boli presne `--ok`, `--h4`, `--flag`… prepísané
   ručne a tmavá verzia visela na holom `prefers-color-scheme` — pri ručne
   zvolenej téme (`data-tema`) sa preto piktogramy nezmenili s appkou. */
.nahlad--zelenina,.nahlad--strukoviny{color:var(--ok)}
.nahlad--ovocie{color:var(--h4)}
.nahlad--maso,.nahlad--ryba{color:var(--flag)}
.nahlad--mlieko,.nahlad--syr,.nahlad--vajce{color:var(--h2)}
.nahlad--pecivo,.nahlad--obilnina,.nahlad--cestoviny{color:var(--h3)}
.nahlad--orechy,.nahlad--olej{color:var(--h5)}
.nahlad--sladkosti{color:var(--h4)}
.nahlad--napoj{color:var(--h1)}
.nahlad--hotove,.nahlad--korenie,.nahlad--ostatne{color:var(--dim)}

/* ============================= PRIDANIE JEDLA — ergonómia (15. 9. 2026)
 *
 * Kritika toku „pridať jedlo" (work/PRIESKUM-SKILLY-DIZAJN.md, krok 1).
 */

/* Dvojklik nezväčšuje stránku, klepnutie nečaká 300 ms. */
.tlacidlo,.chip,.vysledok,.napoveda,.rychly,.jedlo__pridaj,.fotod,.druhove__k{touch-action:manipulation}

/* Fokusované pole nesmie skončiť pod dolnou lištou ani pod lepkavým hľadaním. */
html{scroll-padding-bottom:calc(96px + env(safe-area-inset-bottom));scroll-padding-top:84px}

/* Neplatné pole: to isté ako `.pole--chyba`, ale z atribútu, ktorý číta aj čítačka. */
.pole input[aria-invalid="true"], .pole select[aria-invalid="true"],
.mnozstvo input[aria-invalid="true"]{
  border-color:var(--chyba);outline:2px solid var(--chyba)
}

/* Skener so slovom. Ikona sama začiatočníkovi nič nepovie. */
.tlacidlo--sken{gap:6px;padding:8px 12px;font-size:var(--fs-small);font-weight:700}
.tlacidlo--sken svg{width:20px;height:20px}

/* Množstvo: pole + zvolená jednotka vedľa, jednotky ako chipy pod tým.
   Rozbaľovací zoznam boli dve klepnutia a možnosti nebolo vidieť naraz. */
.mnozstvo--chipy{grid-template-columns:110px 1fr;align-items:center}
.mnozstvo__jednotka{font-size:var(--fs-row);font-weight:650;color:var(--dim);min-width:0}
.mnozstvo + .chipy .chip{min-height:44px}

/* Kalórie porcie sú číslo, kvôli ktorému človek detail otvoril. */
.prepocet .cislo{line-height:1}

/* Dve polia vedľa seba so zalamujúcimi sa popiskami: polia zarovnané dole,
   inak sa dve políčka v jednom riadku rozskočia o riadok popisky. */
.dvojica--dole{align-items:end}

@media (max-width:899px){
  /* Hlavná akcia detailu ostane pri palci aj na malom telefóne, kým je človek
     v bloku množstva a jedla. */
  .tlacidla--dole{
    position:sticky;bottom:calc(60px + env(safe-area-inset-bottom));z-index:5;
    background:var(--ground);padding:10px 0;margin-top:6px;
  }
  /* Otvorená klávesnica: pri prehliadačoch, ktoré zmenšia výrez, by pevná lišta
     vyšla nad klávesnicu a zakryla pole aj tlačidlo. Kým sa píše, lišta nie je
     potrebná; je mimo toku, takže obsah neskočí. */
  body:has(.hlavne :is(input:not([type="checkbox"],[type="radio"],[type="file"],[type="date"]),textarea):focus) .navigacia{display:none}
}

/* ============================= KOLO 2 — čísla, dotyk, chyby (16. 9. 2026) */

/* Veta pod chybným poľom (`chybaPola`). Nie len obrys: farba sama nič nepovie. */
.pole__chyba{margin:4px 0 0;font-size:var(--fs-small);font-weight:650;color:var(--chyba)}

/* „bielkoviny 4 g" drží pokope; zalamuje sa len medzi skupinami. */
.nezlom{white-space:nowrap}

/* Ikona s textom v tlačidle „ako včera". */
.ikona-mala{width:18px;height:18px;flex:none;display:block}
.jedlo__pridaj{display:inline-flex;align-items:center;gap:6px}

/* Hláška „Neuložilo sa" stojí nad lepkavým tlačidlom, na celú šírku. */
.tlacidla--dole .oznam{flex-basis:100%;margin:0}

.adminpruh .tlacidlo{min-height:44px}

/* ============================= KOLO 3 — zlyhania, prvý deň (16. 9. 2026) */

/* Hlásenie LEN pre čítačku (`ohlasCitacke`). Stojí mimo `#hlavne`, takže ho
   prekreslenie výsledkov ani formulára nezruší a chyba zaznie raz, nie pri
   každom písmene. `display:none` by sa neprečítalo vôbec. */
.citacka{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* „Neskopírovalo sa" a „K obľúbeným sa nepridalo" stoja v riadku tlačidiel;
   veta patrí nad tlačidlo, nie vedľa neho. */
.tlacidla > .oznam{flex-basis:100%;margin:0}

/* Prvý deň: veta pod štítkom, bez odsadenia navyše. */
.uvitanie__veta{margin-top:8px}

/* ============================= FOTKA JEDLA (17. 9. 2026)
   Model navrhne položky z NAŠEJ databázy a odhadne gramy; človek potvrdí.
   Riadok návrhu je zámerne ten istý tvar ako riadok výsledku hľadania —
   je to tá istá vec (položka z databázy), len sa k nej prišlo inou cestou. */

/* „Odfotiť jedlo" pod poľom hľadania. Ikona a slovo spolu, celá šírka. */
.tlacidlo--foto{
  display:flex;align-items:center;justify-content:center;gap:8px;
  width:100%;margin-top:10px;min-height:44px;
}

/* Koľko čítaní dnes zostáva. Stojí NAD fotením, nie pod ním. */
.kvota{margin:0 0 12px;font-size:var(--fs-small);color:var(--dim)}
.kvota--dosla{color:var(--flag);font-weight:650}

.navrh__riadok{
  display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;
  padding:12px 0;border-bottom:1px solid var(--hair);
}
.navrh__telo{flex:1 1 150px;min-width:0}
.navrh__nazov{font-size:var(--fs-row);font-weight:600;line-height:1.25}
/* ZAŠKRTNUTIE V RIADKU NÁVRHU (recept z odkazu, tréning zo súboru, súhlasy).
   Celý `label` je dotyková plocha, no bez výšky mal 20 px a samotné políčko
   13 × 13 px — na telefóne sa trafiť nedalo (prechod appkou, kolo 11). */
label.navrh__nazov{min-height:44px;cursor:pointer}
label.navrh__nazov input[type="checkbox"]{width:20px;height:20px;flex:0 0 auto;accent-color:var(--h4)}
.navrh__spod{font-size:var(--fs-small-tight);color:var(--dim);margin-top:2px}

/* NAPOJENIA (Nastavenia → Polar, Withings). Jedna plocha, služby oddelené
   vlasovou linkou ako riadky — nie karty s tieňom. Stav je `stitok`. */
.napojenie + .napojenie{border-top:1px solid var(--hair);margin-top:16px;padding-top:16px}
.napojenie__hlava{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.napojenie__meno{margin:0;font-size:var(--fs-row);font-weight:750;line-height:1.25}
.napojenie__volba{display:flex;gap:8px;align-items:flex-start;margin-top:12px}
.napojenie__volba input[type="checkbox"]{margin-top:2px}
.napojenie__suhlas{margin-top:8px}
/* Čo model na fotke videl. Je to jeho slovo, nie náš údaj — preto tlmené
   a v úvodzovkách, aby sa to nedalo čítať ako názov výrobku. */
.navrh__videl{font-style:italic}
/* Stav nesedí (surové proti varenému). Nie je to chyba človeka ani nášho
   čísla — je to vec, ktorú musí rozhodnúť on, tak `flag`, nie `chyba`. */
.navrh__pozor{color:var(--flag);font-weight:650}
.navrh__gramy{display:flex;align-items:center;gap:6px;flex:0 0 auto}
.navrh__gramy input{
  font:inherit;font-size:var(--fs-body);width:84px;padding:11px 10px;min-height:44px;
  background:var(--paper);color:var(--ink);border:1px solid var(--pole-okraj);
  border-radius:0;text-align:right;font-variant-numeric:tabular-nums;
}
.navrh__gramy input:focus{border-color:var(--h4)}
.navrh__jed{font-size:var(--fs-small);color:var(--dim)}
.navrh__prec{
  font:inherit;font-size:var(--fs-small);font-weight:650;cursor:pointer;
  background:none;border:0;padding:0 4px;color:var(--dim);min-height:44px;
}
.navrh__prec:hover{color:var(--chyba)}

/* Súčet z potvrdených riadkov. Prepočítava sa z hodnôt v databáze, nie
   z ničoho, čo by povedal model. */
.navrh__sucet{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  margin-top:14px;padding-top:12px;border-top:1px solid var(--ink);
}
.navrh__sucet b{font-size:var(--fs-number-tile);font-weight:800;font-variant-numeric:tabular-nums}



/* NAHLAD VYROBKU V DETAILE (18. 9. 2026) — maly, vedla nadpisu, nie nad tabulkou.
   Plava vpravo, takze nadpis ho obtece a tabulka zivin sa neposunie nizsie. */
.polozka-foto{
  float:right;margin:2px 0 8px 12px;width:72px;height:72px;border-radius:6px;
  overflow:hidden;
}
.polozka-foto img{width:72px;height:72px;object-fit:contain;display:block}
/* Kym fotka nepride, ramec nie je vidiet (kolo 18) — polozka bez fotky ramec
   nema, takze prazdny tmavy stvorec by bol jediny rozdiel. Miesto drzi,
   nadpis pri nacitani neposkoci. Pri chybe ramec zmizne cely (`data-zmiznut`). */
.polozka-foto img:not([data-nacitana]){visibility:hidden}
.polozka-foto img[data-nacitana]{background:var(--sel)}
.polozka-hlavicka::after{content:"";display:block;clear:both}

/* O VYROBKU pre zakaznika — krajina, vyrobca, skladovanie z obalu, bez povodu. */
.o-vyrobku{margin:8px 0 0;display:grid;grid-template-columns:auto 1fr;gap:5px 14px;font-size:var(--fs-small)}
.o-vyrobku dt{color:var(--dim)}
.o-vyrobku dd{margin:0;font-weight:650;min-width:0;overflow-wrap:anywhere}

/* ============================= PLÁN JEDÁLNIČKA A NÁKUP (16. 9. 2026)
   Deň plánu má ten istý tvar ako Deň v denníku (súhrn vľavo, jedlá vpravo) —
   človek ho už pozná. Nové sú len tri veci: pás dní, panely pomoci a riadok
   nákupu so zaškrtnutím. Hrany 1 px, pravé uhly, žiadne tiene. */
.plan > .chipy:first-child{margin-top:14px}
.plan__blok{margin-top:14px}

/* Pás 14 dní. Posúva sa do strany, nezalamuje: tri riadky čipov by odsunuli
   deň, kvôli ktorému človek prišiel, pod ohyb (375 px). */
.plan__dni{
  display:flex;gap:6px;overflow-x:auto;margin:12px calc(-1 * var(--medzera)) 0;
  padding:2px var(--medzera) 8px;scroll-snap-type:x proximity;scroll-padding-inline:var(--medzera);
  -webkit-overflow-scrolling:touch;
}
.plan__den{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:0;
  padding:6px 12px;min-width:64px;scroll-snap-align:start;line-height:1.2;
}
.plan__den small{font-size:var(--fs-small-tight);font-weight:500;color:var(--dim);white-space:nowrap}
.plan__den.chip--zap small{color:var(--on-band)}
.plan__telo{margin-top:12px}
.plan__kcal{margin:6px 0 0}
.plan__uprava{margin-top:8px;grid-template-columns:110px minmax(0,1fr)}

/* Pridávanie v jedle a panely pomoci: plocha pod tlačidlom, nie okno. */
.plan__pridat,.plan__panel{
  margin-top:8px;padding:12px;border:1px solid var(--rule);background:var(--paper);
}
.plan__pridat .pole{margin-top:12px}
.plan__zoznam{margin-top:8px}
.plan__vybrana .zapis__nazov{margin:0}
.plan__nadpis{margin:14px 0 0}
.plan__pomoc > .tlacidlo + .tlacidlo,
.plan__pomoc > .plan__panel + .tlacidlo{margin-top:8px}
.plan__navrh{padding:12px 0;border-bottom:1px solid var(--hair)}
.plan__navrh:last-of-type{border-bottom:0}
.plan__navrh .zapis__nazov{margin:0}
.plan__navrh .zapis__spod{margin:2px 0 0}
.plan__navrh .tlacidlo{margin-top:8px}

/* NÁKUPNÝ ZOZNAM. Celý riadok je jedno zaškrtávacie tlačidlo (palec v obchode
   netrafí 20 px štvorček). Odškrtnuté sa nemaže, len stlmí a prečiarkne —
   stav nesie aj znak, nie len farba. */
.nakup{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--rule)}
.nakup__riadok{
  display:flex;align-items:center;gap:12px;width:100%;min-height:52px;text-align:left;
  padding:10px 0;background:transparent;border:0;border-bottom:1px solid var(--hair);
  font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;
}
.nakup__riadok:hover{background:var(--sel)}
.nakup__znak{
  flex:0 0 22px;width:22px;height:22px;border:1px solid var(--pole-okraj);background:var(--paper);
  display:grid;place-items:center;
}
.nakup__riadok--ma .nakup__znak{background:var(--h4);border-color:var(--h4)}
.nakup__riadok--ma .nakup__znak::after{
  content:"";width:11px;height:6px;border-left:2px solid var(--on-band);
  border-bottom:2px solid var(--on-band);transform:translateY(-2px) rotate(-45deg);
}
.nakup__telo{flex:1;min-width:0;display:block}
.nakup__nazov{display:block;font-size:var(--fs-row);font-weight:600;line-height:1.25}
.nakup__spod{display:block;font-size:var(--fs-small-tight);color:var(--dim);margin-top:2px}
.nakup__cena{flex:0 0 auto;font-size:var(--fs-row);font-weight:750;white-space:nowrap}
.nakup__riadok--ma .nakup__nazov{text-decoration:line-through;color:var(--dim)}

/* ---------- vlastný výrobok bez hmotnosti balenia (kolo 17) ----------
   Veta a „Upraviť“ pri cene dňa a nákupe. Riadok, nie dlaždica: je to jedna
   chýbajúca vec, nie varovanie. Tlačidlo drží 44 px na dotyk (DESIGN.md). */
.cena-bez-balenia{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;
  margin-top:8px;font-size:var(--fs-small);color:var(--dim)}
.cena-bez-balenia .tlacidlo{min-height:44px}

/* ---------- POŠTA (len admin, 17. 9. 2026) ----------
   Zoznam je riadok, nie karta: pri pošte sa číta od, predmet a začiatok textu
   pod sebou. Nová správa nesie ZNAK „Nová" aj tučný predmet — nie len farbu.
   Celý riadok je jedno tlačidlo s dotykovou plochou nad 44 px (DESIGN.md).
   HTML správy je v rámci s pevnou výškou: sandbox bez skriptov nevie povedať
   svoju výšku, takže rámec roluje sám. */
.posta__hlava{padding:22px 0 6px}
.posta__schranky .chip{max-width:100%;overflow-wrap:anywhere;text-align:left}
.posta__pocet{
  display:inline-block;min-width:20px;padding:0 5px;margin-left:4px;
  background:var(--ink);color:var(--paper);font-size:var(--fs-small-tight);font-weight:750;
  text-align:center;
}
.chip--zap .posta__pocet{background:var(--on-band);color:var(--h4)}
.posta__adresa{display:flex;align-items:center;gap:6px;min-width:0}
.posta__adresa input{flex:1 1 auto;min-width:0}
.posta__adresa span{flex:0 1 auto;color:var(--dim);font-size:var(--fs-row);overflow-wrap:anywhere}
.posta__zoznam{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--rule)}
.posta__riadok{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;width:100%;
  min-height:64px;padding:10px 0;text-align:left;background:transparent;border:0;
  border-bottom:1px solid var(--hair);font:inherit;color:inherit;cursor:pointer;
  touch-action:manipulation;
}
.posta__riadok:hover{background:var(--sel)}
.posta__kto{display:block;font-size:var(--fs-small);color:var(--dim);min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.posta__kedy{font-size:var(--fs-small-tight);color:var(--dim);white-space:nowrap;text-align:right}
.posta__predmet{grid-column:1 / -1;font-size:var(--fs-row);font-weight:600;line-height:1.25;
  overflow-wrap:anywhere}
.posta__nahlad{display:block;grid-column:1 / -1;font-size:var(--fs-small-tight);color:var(--dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.posta__riadok--nova .posta__predmet{font-weight:800}
.posta__riadok--nova .posta__kto{color:var(--ink)}
.posta__znak{
  display:inline-block;padding:0 5px;background:var(--h4);color:var(--on-band);
  font-size:var(--fs-eyebrow);font-weight:750;letter-spacing:.06em;text-transform:uppercase;
}
.posta__panel{margin-top:0}
.posta__sprava{margin-top:14px;min-width:0}
.posta__predmet-velky{
  margin:0 0 10px;font-size:var(--fs-headline);line-height:1.16;font-weight:750;
  letter-spacing:-.012em;overflow-wrap:anywhere;
}
.posta__hlavicky{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 12px;margin:0 0 12px;
  font-size:var(--fs-small);
}
.posta__hlavicky dt{color:var(--dim);font-weight:700}
.posta__hlavicky dd{margin:0;overflow-wrap:anywhere}
.posta__html{
  display:block;width:100%;height:65vh;min-height:320px;margin-top:12px;
  border:1px solid var(--rule);background:var(--paper);
}
.posta__text{
  margin:12px 0 0;padding:12px;border:1px solid var(--hair);white-space:pre-wrap;
  overflow-wrap:anywhere;font:inherit;font-size:var(--fs-row);max-height:65vh;overflow:auto;
}
.posta__podnadpis{margin:18px 0 8px;font-size:var(--fs-label);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dim)}
.posta__prilohy{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.posta__prilohy li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-width:0}
.posta__prilohy .tlacidlo{min-height:44px;max-width:100%;overflow-wrap:anywhere;text-align:left}
.posta__meno{font-size:var(--fs-row);overflow-wrap:anywhere}
.posta__nova{margin-top:14px}
.pole textarea#posta-text{min-height:220px;resize:vertical}