/* ===========================================================================
   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;

  --medzera:16px;
  --sirka:1160px;
}

@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;
  }
}
: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;
}

*{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:16px;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:11.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--dim);font-stretch:85%;
}
.nadpis{
  margin:0;font-size:clamp(26px,6vw,40px);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)}
.podnadpis{margin:10px 0 0;color:var(--dim);font-size:15px;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:12px;letter-spacing:.11em;text-transform:uppercase;
  font-weight:700;color:var(--dim);font-stretch:85%;
}
.velke{
  font-size:clamp(44px,13vw,62px);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:13.5px;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:15px;font-weight:600;min-width:0}
.riadok .s{font-size:12.5px;color:var(--dim);margin-top:2px}
.riadok .r{font-size:15px;font-weight:750;white-space:nowrap;text-align:right}
.riadok .r small{display:block;font-size:11.5px;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);
}
@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:19px;font-weight:750;letter-spacing:-.02em}
.makra .k{font-size:11px;color:var(--dim);margin-top:1px}
.makra .b .v{color:var(--h1)} .makra .s .v{color:var(--h2)} .makra .t .v{color:var(--h4)}

/* ---------- tlačidlá ---------- */
.tlacidlo{
  font:inherit;font-weight:700;font-size:14.5px;
  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(--h5);border-color:var(--h5);color:var(--on-band)}
.tlacidlo--ember{background:var(--h4);color:var(--on-band);border-color:var(--h4)}
.tlacidlo--ember:hover{background:var(--h5);border-color:var(--h5)}
.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:17px;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:12.5px;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(--rule);
  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 .napoveda{font-size:12.5px;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:13.5px;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)}
.oznam--varovanie{border-color:var(--flag);color:var(--flag)}
.oznam--varovanie b{color:var(--flag)}
.oznam--ok{border-color:var(--ok);color:var(--ok)}
.oznam ul{margin:6px 0 0;padding-left:18px}
.oznam li{margin:3px 0}

.prazdne{color:var(--dim);font-size:14.5px;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:13.5px;font-weight:650;
  max-width:min(92vw,520px);opacity:0;pointer-events:none;transition:opacity .18s;
}
.hlasnik.vidno{opacity:1}
@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:11px;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:17px;letter-spacing:-.02em;font-stretch:88%;
  text-transform:uppercase;
}
.datumpas .datum{font-size:12px;color:var(--dim);margin-top:1px}
.datumpas input[type="date"]{
  font:inherit;font-size:12px;background:transparent;border:0;color:var(--dim);
  padding:2px 0;margin-top:2px;width:auto;
}

/* ---------- 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:13px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  font-stretch:85%;
}
.jedlo__sucet{font-size:14px;font-weight:750;white-space:nowrap}
.jedlo__sucet.nula{color:var(--dim);font-weight:600}
.jedlo__pridaj{
  margin-top:8px;font-size:13px;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}
.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:15px;font-weight:600}
.zapis__spod{font-size:12.5px;color:var(--dim);margin-top:2px}
.zapis__kcal{font-size:15px;font-weight:750;white-space:nowrap}
.zapis__nastroje{display:flex;gap:6px;margin-top:6px}
.zapis__nastroje .tlacidlo{min-height:34px;padding:5px 9px;font-size:12.5px;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}
.hladanie 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{border-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}
.vysledok__nazov{font-size:15px;font-weight:600}
.vysledok__spod{font-size:12.5px;color:var(--dim);margin-top:2px}
.vysledok__kcal{font-size:14.5px;font-weight:750;white-space:nowrap}
.vysledok__kcal small{display:block;font-size:11px;font-weight:500;color:var(--dim);text-align:right}
.znacka{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--h1);
}

/* ---------- detail položky ---------- */
.ziviny{width:100%;border-collapse:collapse;font-size:14.5px;margin-top:6px}
.ziviny th{
  text-align:left;font-size:11px;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:12.5px}

.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:13.5px}
.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:17px;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:34px;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:13px;color:var(--dim)}

/* ---------- token ---------- */
.token{
  margin-top:10px;border:1px solid var(--h4);padding:12px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:13.5px;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:15px;text-align:center;
}

/* ---------- desktop ---------- */
@media (min-width:900px){
  body{font-size:16.5px}
  .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:12px;
  }
  .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). */
.vysledok--slaby { opacity: .72; }
.vysledok--slaby .vysledok__kcal { opacity: .8; }
.znamka {
  display: inline-block;
  margin-left: .5em;
  padding: .08em .45em;
  border: 1px solid var(--rule, #666);
  border-radius: 2px;
  font-size: .62em;
  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 11px;border:1px solid var(--rule);border-radius:999px;
  background:transparent;color:inherit;font:inherit;font-size:13.5px;
  cursor:pointer;line-height:1.2;
}
.napovedy .napoveda:hover{background:var(--sel)}
/* Pomocny text pod polom: obycajna veta, nie tlacidlo. */
.napoveda{display:block;font-size:12.5px;color:var(--dim);line-height:1.45;margin-top:4px}
.napoveda small{font-size:11px;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}

/* ---------- fotka v detaile položky ---------- */
.foto-detail{margin:0 0 14px}
.foto-detail img{
  width:100%;max-width:260px;border-radius:10px;display:block;background:var(--sel);
}
.foto-detail figcaption{margin-top:5px;font-size:12px}

/* === 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.                      */

.kroky{
  display:flex;gap:8px;list-style:none;margin:18px 0 14px;padding:0;
  font-size:11.5px;letter-spacing:.1em;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:20px;height:20px;border-radius:50%;
  border:1px solid var(--rule);font-size:11px;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)}
.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:24px;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:14px}
.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:38px;font-weight:800;line-height:1;font-variant-numeric:tabular-nums;
}
.cakanie__kruh small{font-size:12px;font-weight:600;color:var(--dim)}
.cakanie__co{margin:0;font-size:15px;color:var(--ink)}
.cakanie__pas{width:min(320px,100%);height:3px;background:var(--hair);overflow:hidden}
.cakanie__pas i{display:block;height:100%;width:0;background:var(--h4);transition:width .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:13.5px;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:13px}

/* ---------------------------------------------------------------- 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:13px;
  background:none;border:0;padding:0;color:var(--h4);cursor:pointer;
  text-decoration:underline;
}

/* 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}
.rozsah__pole input{
  font:inherit;font-size:15px;padding:9px 10px;min-height:40px;width:100%;
  background:var(--paper);color:var(--ink);border:1px solid var(--rule);
  border-radius:8px;
}
.rozsah .tlacidlo{flex:0 0 auto;min-height:40px}
.chip{
  font:inherit;font-size:14px;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:14px;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: .72rem;
  color: var(--dim);
  padding-bottom: 2px;
}
.kdenprazdny { aspect-ratio: 1; }
.kden {
  aspect-ratio: 1;
  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: .82rem; font-weight: 600; }
.kkcal { font-size: .62rem; 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: 1.05rem; 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: 14px; 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: 12.5px; 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:14px;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:12.5px;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:.72rem;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:.62em;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:11px;color:var(--dim);font-weight:500;letter-spacing:0}

/* 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:13.5px;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:13px;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}
.nahlad--zelenina,.nahlad--strukoviny{color:#3E5F3F}
.nahlad--ovocie{color:#A8481B}
.nahlad--maso,.nahlad--ryba{color:#8A5310}
.nahlad--mlieko,.nahlad--syr,.nahlad--vajce{color:#7C6E35}
.nahlad--pecivo,.nahlad--obilnina,.nahlad--cestoviny{color:#9A5F16}
.nahlad--orechy,.nahlad--olej{color:#6E2B12}
.nahlad--sladkosti{color:#A8481B}
.nahlad--napoj{color:#44616C}
.nahlad--hotove,.nahlad--korenie,.nahlad--ostatne{color:var(--dim)}
@media (prefers-color-scheme: dark){
  .nahlad--zelenina,.nahlad--strukoviny{color:#8FBE8F}
  .nahlad--ovocie,.nahlad--sladkosti{color:#DE6E3C}
  .nahlad--maso,.nahlad--ryba{color:#E0A94F}
  .nahlad--mlieko,.nahlad--syr,.nahlad--vajce{color:#C4B268}
  .nahlad--pecivo,.nahlad--obilnina,.nahlad--cestoviny{color:#E39A45}
  .nahlad--orechy,.nahlad--olej{color:#B4553A}
  .nahlad--napoj{color:#7FA6B4}
}