/* Talíř — vzhled.
   Pravidla, kterých se držím všude:
   1. Žádné ikony. Rozhraní je jen typografie.
   2. Žádné zaoblení, žádné stíny, žádné karty. Jen vlásové linky.
   3. Čísla a popisky monospace, názvy jídel bezpatkové.
   4. Jediná barevná plocha v aplikaci je hladina dne na pozadí. */

:root {
  --bg: #08080a;
  --fg: #f2f2ee;

  /* Šedé odstíny nejsou vkusová volba, ale hranice čitelnosti. Na displeji
     stažené jasu (venku, večer, úsporný režim) zmizí první. Proto jsou
     obě šedé posazené na kontrast, který se dá změřit — proti pozadí
     #08080a má --dim asi 7:1 a --dim2 asi 4,6:1, tedy i ta slabší projde
     WCAG AA pro malý text. Předtím měla --dim2 sotva 2,3:1 a při nižším
     jasu prakticky nesvítila.

     Když se s nimi bude hýbat, hlídej ten poměr, ne jak to vypadá na
     plném jasu — tam vypadá čitelně skoro cokoli. */
  --dim: #9d9da6;    /* popisky, sekundární text */
  --dim2: #7b7b85;   /* poznámky pod čarou, to nejtišší v rozhraní */

  /* Vlásové linky nesou celou strukturu rozhraní (žádné karty ani stíny),
     takže musí být vidět i na sníženém jasu. */
  --line: #26262d;
  --line2: #3a3a44;
  --akcent: #d4ff3f;
  /* Voda má vlastní barvu, protože to není jídlo — nepřičítá se ke kaloriím
     a nemá co svítit stejně jako hladina dne. Azurová sedí k limetkové
     (obě studeně žluto-zelené rodiny) a proti pozadí má kontrast přes 9:1,
     takže projde i na staženém jasu. */
  --voda: #4fd6e8;
  --varovani: #ff5c3d;

  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  --lista: 62px;
  --sloupec: 620px;   /* šířka obsahu i hladiny na širokém okně */
}

/* Kdo si v systému vyžádal vyšší kontrast, dostane ho — šedé přestanou být
   šedé a linky ztmavnou o stupeň míň. Nic jiného se nemění. */
@media (prefers-contrast: more) {
  :root {
    --dim: #c9c9d1;
    --dim2: #adadb7;
    --line: #3a3a44;
    --line2: #55555f;
    --voda: #8ae7f4;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Vlastní display v třídách níž by jinak přebil atribut hidden. */
[hidden] { display: none !important; }

html { background: var(--bg); }

body {
  position: relative;      /* kotva pro #hladina */
  min-height: 100svh;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: contain;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

/* ── Hladina dne ─────────────────────────────────────────────────
   Pozadí se plní zdola. Plná obrazovka = denní cíl v kcal.
   Je to jediná grafika v aplikaci a nese hlavní informaci. */

/* Ukotvená k oknu, ne ke stránce.
   Hladina má vždycky začínat u spodní hrany obrazovky — je to hladina, ne
   značka v textu. Dřív byla `absolute` v rámci první obrazovky, takže jakmile
   měl den víc jídel a stránka se prodloužila, její dno zůstalo tam, kde
   končila první obrazovka: uprostřed seznamu.

   Původní důvod pro `absolute` byl, že fixed čára visela uprostřed obsahu
   a četla se jako oddělovač sekce. Ta čára ale mezitím zmizela (zůstal jen
   měkký přechod), takže důvod padl.

   Šířka je stejná jako u obsahu (--sloupec). Na mobilu to vyjde na celou
   obrazovku, na širokém okně se hladina drží sloupce s jídly — jinak by
   limetková plocha běžela přes celý monitor, zatímco text sedí v úzkém
   proužku uprostřed, a nečetlo by se to jako jedna věc. */
#hladina {
  position: fixed; top: 0; left: 50%;
  transform: translateX(-50%);
  width: 100%; max-width: var(--sloupec);
  height: 100svh;
  z-index: 0; pointer-events: none;
  overflow: hidden;
}

/* Hladina nemá hranu. Vlásková linka přes celou šířku sice ukazovala přesnou
   úroveň, ale ležel přes ni text a četla se jako oddělovač sekce — rušilo to
   víc, než kolik to řeklo. Zůstal jen přechod, který nahoře měkce vyhasne. */
#hladina-fill {
  --hladina: 212, 255, 63;
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 0;
  background: linear-gradient(
    to top,
    rgba(var(--hladina), 0.16),
    rgba(var(--hladina), 0.14) 62%,
    rgba(var(--hladina), 0.02)
  );
  transition: height 0.6s cubic-bezier(0.22, 1, 0.36, 1), background 0.35s;
}

body.prekroceno #hladina-fill { --hladina: 255, 92, 61; }

@media (prefers-reduced-motion: reduce) {
  #hladina-fill { transition: none; }
}

/* ── Kostra ──────────────────────────────────────────────────── */

#app, #v-vstup { position: relative; z-index: 1; }

#app {
  display: flex; flex-direction: column;
  min-height: 100svh;
  padding-bottom: calc(var(--lista) + env(safe-area-inset-bottom));
}

.pohled { flex: 1; padding: 0 20px; }

/* Pruh „nemáš spočítaný cíl“. Tichý, ne poplach: appka funguje dál, jen
   počítá proti číslu, které nikdo nespočítal. Mizí sám po vyplnění profilu. */
.chybi-profil {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  width: 100%; text-align: left;
  margin-top: calc(10px + env(safe-area-inset-top));
  padding: 12px 0;
  border-bottom: 1px solid var(--line2);
  font: 400 11px/1.5 var(--mono);
  letter-spacing: 0.06em; color: var(--dim);
}
.chybi-profil .doplnit {
  flex: none;
  color: var(--akcent); letter-spacing: 0.16em;
}
.chybi-profil:active { background: rgba(255, 255, 255, 0.03); }
.chybi-profil:not([hidden]) + .hlava { padding-top: 14px; }

/* ── Hlavička s datem ────────────────────────────────────────── */

.hlava {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(14px + env(safe-area-inset-top)) 0 18px;
}
.hlava.jednoducha { justify-content: flex-start; }
.hlava h2 {
  font: 400 11px/1 var(--mono);
  letter-spacing: 0.24em; color: var(--dim);
}

.sipka {
  font: 300 26px/1 var(--mono);
  color: var(--dim2);
  padding: 6px 14px; margin: -6px -14px;
}
.sipka:active { color: var(--fg); }
.sipka[disabled] { opacity: 0.25; }

.datum { text-align: center; }
.datum-dow {
  display: block;
  font: 400 10px/1 var(--mono);
  letter-spacing: 0.28em; color: var(--dim);
  margin-bottom: 5px;
}
.datum-cislo {
  font: 400 14px/1 var(--mono);
  letter-spacing: 0.06em;
}

/* ── Souhrn dne ──────────────────────────────────────────────── */

.souhrn { padding-bottom: 26px; }

.velke {
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
#s-kcal {
  font-size: clamp(58px, 21vw, 96px);
  font-weight: 200;
  letter-spacing: -0.045em;
  line-height: 0.88;
}
.velke .jed {
  font-size: 11px; letter-spacing: 0.22em; color: var(--dim);
}

.podtitul {
  margin-top: 13px;
  font: 400 11px/1.6 var(--mono);
  letter-spacing: 0.08em; color: var(--dim);
}
.podtitul .prekrocil { color: var(--varovani); }

/* Stuha maker: jeden proužek rozdělený podle podílu energie. */
.stuha {
  display: flex; gap: 2px; height: 9px; margin-top: 22px;
  background: var(--line);
}
.seg { display: block; height: 100%; width: 0; transition: width 0.5s ease; }
.seg-b { background: var(--akcent); }
.seg-s { background: #8b8b95; }
.seg-t { background: #43434c; }
@media (prefers-reduced-motion: reduce) { .seg { transition: none; } }

.stuha-popis {
  display: flex; justify-content: space-between; gap: 8px;
  margin-top: 12px;
  font: 400 10.5px/1.4 var(--mono);
  letter-spacing: 0.1em; color: var(--dim);
}
.stuha-popis b { font-weight: 400; color: var(--fg); }
.stuha-popis span:nth-child(1) b { color: var(--akcent); }

.mini {
  margin-top: 26px;
  border-top: 1px solid var(--line);
}
.mini > div {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.mini dt {
  font: 400 10.5px/1.4 var(--mono);
  letter-spacing: 0.14em; color: var(--dim);
}
.mini dd {
  font: 400 13px/1.4 var(--mono);
  font-variant-numeric: tabular-nums;
}
#r-tekute dt { padding-left: 14px; position: relative; }
#r-tekute dt::before {
  content: "└"; position: absolute; left: 0; top: -1px; color: var(--dim2);
}
#r-tekute.moc dt, #r-tekute.moc dd { color: var(--varovani); }

/* Režim hledání.
   Na mobilu zabere klávesnice půlku obrazovky a výsledky pod polem prostě
   nejsou vidět — člověk píše a zdá se mu, že se nic neděje. Jakmile se ťukne
   do pole, všechno nad ním se schová a seznam dostane celý zbytek výšky. */
.list.hleda-rezim .volba-kam,
.list.hleda-rezim .volba-den,
.list.hleda-rezim .dvojice,
.list.hleda-rezim #volba-voda,
.list.hleda-rezim .foto-radek,
.list.hleda-rezim #volba-foto,
.list.hleda-rezim .pozn.odsazeny-nahoru,
.list.hleda-rezim .zpusoby { display: none; }

.list.hleda-rezim #volba-hledat { margin-top: 4px; }

/* Kontext zůstává vidět: bez něj bys nevěděl, do které části dne to padne.
   Je to tlačítko, protože nastavení dne a času sedí od 24. 8. až pod
   seznamem — ťuknutím se k němu sroluje. Kdyby to byl jen text, jediná
   cesta k času by bylo hledat ho očima někde dole. */
.hleda-kontext {
  display: block; width: 100%; text-align: left;
  background: none; border: 0; -webkit-appearance: none; appearance: none;
  font: 400 10px/1 var(--mono);
  letter-spacing: 0.16em; color: var(--dim);
  padding: 0 0 10px;
}

/* Zpráva „hledám“ přímo v seznamu — tam, kam se člověk dívá. */
.hleda-text { padding: 18px 0 8px; color: var(--dim); }

/* Potvrzení, že si appka zapsala chybějící položku. Tiché schválně: je to
   informace pro klid, ne výzva k akci — člověk zrovna řeší, co dneska snědl. */
.prazdno .poznamka {
  display: inline-block;
  margin-top: 10px;
  font-size: 12px;
  font-style: normal;
  letter-spacing: 0.06em;
  color: var(--dim2);
}

/* Linka „ještě hledám“. Stejný pohyb jako u rozpoznávání fotky, jen tenčí
   a bez textu: říká „počkej“, ne „pracuji na něčem velkém“. */
.hleda { height: 1px; background: var(--line); overflow: hidden; margin-top: -1px; }
.hleda i {
  display: block; height: 100%; width: 35%;
  background: var(--akcent);
  animation: bezi 1.1s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .hleda i { animation: none; width: 100%; opacity: 0.45; }
}

/* ── Voda ────────────────────────────────────────────────────────
   Ťukací řádek s průběhem. Vědomě bez ikony kapky: rozhraní je jen typografie
   a jedna ikona by tu logiku prolomila. Azurová odlišuje vodu od jídla —
   limetková patří hladině dne, tedy kaloriím, a voda žádné nemá. */

.voda { margin-top: 26px; }
.voda-tl {
  display: flex; justify-content: space-between; align-items: baseline;
  width: 100%; text-align: left;
  padding: 13px 0 10px;
  border-top: 1px solid var(--line);
}
.voda-popis {
  font: 400 10.5px/1.4 var(--mono);
  letter-spacing: 0.14em; color: var(--dim);
}
.voda-stav { font: 400 13px/1.4 var(--mono); font-variant-numeric: tabular-nums; }
.voda-stav b { font-weight: 400; color: var(--voda); }
.voda-stav em {
  font-style: normal; font-size: 10px; color: var(--dim); letter-spacing: 0.08em;
}
.voda-tl:active .voda-stav b { opacity: 0.5; }

.voda-pruh { height: 1px; background: var(--line2); }
.voda-pruh i {
  display: block; height: 1px; width: 0;
  background: var(--voda);
  transition: width 0.4s ease;
}
@media (prefers-reduced-motion: reduce) { .voda-pruh i { transition: none; } }

/* ── Cvičení a vážení ────────────────────────────────────────────
   Otázka jednou za den, odpověď dvěma ťuknutími. Když se necvičilo víc než
   tři dny, řádek zesílí — ale pořád je to řádek, ne poplach. Cílem je
   pravidelnost, ne výčitky: appka nikoho nehodnotí. */

.cviceni { margin-top: 14px; }
.cviceni-otazka {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 0 11px;
  border-top: 1px solid var(--line);
  font: 400 11px/1.4 var(--mono);
  letter-spacing: 0.08em; color: var(--dim);
}
.cviceni-tlacitka { display: flex; gap: 8px; flex: none; }
.cviceni-tlacitka button {
  padding: 7px 16px;
  border: 1px solid var(--line2);
  font: 400 11px/1 var(--mono);
  letter-spacing: 0.14em; color: var(--fg);
}
.cviceni-tlacitka button:active { background: rgba(255, 255, 255, 0.06); }

/* Odpovězeno: zbyde tichý řádek, na který jde ťuknout a odpověď změnit. */
.cviceni.hotovo .cviceni-tlacitka button { color: var(--dim2); border-color: var(--line); }
.cviceni.hotovo .cviceni-tlacitka button.akt { color: var(--akcent); border-color: var(--akcent); }

/* Delší pauza: zvýrazní se text, ne celý blok. */
.cviceni.dlouho #cviceni-text { color: var(--akcent); }
.cviceni.dlouho .cviceni-otazka { border-top-color: var(--akcent); }

.chybi-vaha {
  display: block; width: 100%; text-align: left;
  padding: 11px 0;
  border-top: 1px solid var(--line);
  font: 400 10.5px/1.4 var(--mono);
  letter-spacing: 0.08em; color: var(--dim);
}
.chybi-vaha::after { content: " · zapsat"; color: var(--akcent); letter-spacing: 0.14em; }

/* ── Seznam jídel ────────────────────────────────────────────── */

.seznam { padding-bottom: 30px; }

.sekce-hlava {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 22px 0 8px;
  border-bottom: 1px solid var(--line2);
  font: 400 10px/1 var(--mono);
  letter-spacing: 0.24em; color: var(--dim);
}
.sekce-hlava b {
  font-weight: 400; color: var(--fg);
  font-variant-numeric: tabular-nums; letter-spacing: 0.04em;
}

.polozka {
  display: flex; justify-content: space-between; align-items: baseline; gap: 14px;
  width: 100%; text-align: left;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}
.polozka:active { background: rgba(255, 255, 255, 0.03); }
.polozka .nazev { font-size: 15px; }
.polozka .pod {
  display: block; margin-top: 3px;
  font: 400 10px/1 var(--mono);
  letter-spacing: 0.1em; color: var(--dim);
}
.polozka .kcal {
  flex: none;
  font: 400 14px/1 var(--mono);
  font-variant-numeric: tabular-nums;
}

.prazdno {
  padding: 46px 0;
  text-align: center;
  font: 400 11px/1.8 var(--mono);
  letter-spacing: 0.14em; color: var(--dim2);
}

/* ── Spodní lišta ────────────────────────────────────────────── */

.lista {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  height: calc(var(--lista) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: grid; grid-template-columns: 1fr 1fr auto 1fr 1fr; align-items: center;
  background: rgba(8, 8, 10, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--line2);
}
.lista button {
  height: 100%;
  font: 400 10px/1 var(--mono);
  letter-spacing: 0.24em; color: var(--dim);
}
.lista button.akt { color: var(--fg); }
.lista button { letter-spacing: 0.18em; }
.lista .plus {
  font: 200 30px/1 var(--mono);
  color: var(--akcent);
  padding: 0 26px;
  letter-spacing: 0;
}
.lista .plus:active { opacity: 0.5; }

/* ── Já ──────────────────────────────────────────────────────── */

.blok { padding: 10px 0 38px; }
.nadpis {
  font: 400 10px/1 var(--mono);
  letter-spacing: 0.24em; color: var(--dim);
  padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 1px solid var(--line2);
}

/* ── Chybějící jídla ─────────────────────────────────────────── */

.chybi { margin-top: 16px; border-top: 1px solid var(--line2); }
.chybi-radek {
  display: flex; justify-content: space-between; align-items: baseline;
  width: 100%; text-align: left;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font: 400 11px/1 var(--mono);
  letter-spacing: 0.1em; color: var(--dim);
}
.chybi-radek .doplnit { color: var(--akcent); letter-spacing: 0.16em; }
.chybi-radek:active { background: rgba(255, 255, 255, 0.03); }

/* ── Graf dnů ────────────────────────────────────────────────── */

.graf {
  display: flex; align-items: flex-end; gap: 2px;
  height: 130px; margin-top: 22px;
  border-bottom: 1px solid var(--line2);
}
.graf .sl {
  flex: 1; min-width: 3px; min-height: 2px;
  background: var(--line2);
}
.graf .sl.ok { background: var(--akcent); }
.graf .sl.pres { background: var(--varovani); }

.graf-popis {
  margin-top: 9px;
  font: 400 10px/1.6 var(--mono);
  letter-spacing: 0.08em; color: var(--dim2);
}

#v-prehled .prepinac { margin-top: 4px; }
#v-prehled .dvojice { margin-top: 18px; }
#v-prehled .podtitul { margin-top: 18px; }
#v-prehled .mini { margin-top: 26px; margin-bottom: 30px; }

/* ── Formuláře ───────────────────────────────────────────────── */

.form { display: flex; flex-direction: column; gap: 18px; }
.form.mrizka { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 14px; }
.form.mrizka .siroke, .form.mrizka .ok { grid-column: 1 / -1; }

.pole { display: block; }
.pole > span {
  display: block; margin-bottom: 7px;
  font: 400 10px/1 var(--mono);
  letter-spacing: 0.16em; color: var(--dim);
}
.pole input, .pole select {
  display: block; width: 100%;
  background: transparent;
  border: 0; border-bottom: 1px solid var(--line2);
  border-radius: 0;
  padding: 7px 0;
  font-family: var(--mono);
  font-size: 16px;               /* 16px = iOS nezoomuje při focusu */
  font-variant-numeric: tabular-nums;
  outline: none;
  appearance: none;
}
.pole input[type="text"] { font-family: var(--sans); }
.pole input:focus, .pole select:focus { border-bottom-color: var(--akcent); }
.pole select { background-image: none; }

.dvojice { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ctverice { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px; }

.prepinac { display: flex; border: 1px solid var(--line2); }
.prepinac button {
  flex: 1; padding: 9px 0;
  font: 400 10px/1 var(--mono);
  letter-spacing: 0.14em; color: var(--dim);
}
.prepinac button.akt { background: var(--fg); color: var(--bg); }

.vic summary {
  list-style: none; cursor: pointer;
  padding: 4px 0;
  font: 400 10px/1 var(--mono);
  letter-spacing: 0.16em; color: var(--dim);
}
.vic summary::-webkit-details-marker { display: none; }
.vic summary::before { content: "+ "; color: var(--dim2); }
.vic[open] summary::before { content: "− "; }
.vic[open] summary { margin-bottom: 16px; }

.hlavni {
  display: block; width: 100%;
  padding: 15px 0;
  background: var(--akcent); color: #000;
  font: 400 11px/1 var(--mono);
  letter-spacing: 0.24em;
}
.hlavni:active { opacity: 0.75; }

/* Vyfotit a povědět vedle sebe, 80 : 20.
   Focení je většina zápisů, takže si drží čtyři pětiny řádku; diktování je
   druhá cesta, ne rovnocenná nabídka. `4fr 1fr` (ne procenta) proto, že
   mezera mezi tlačítky se odečte dřív, než se dělí — s `80% 20%` by řádek
   o mezeru přetekl. */
.foto-radek { display: grid; grid-template-columns: 4fr 1fr; gap: 8px; }

/* Když se u staršího dne schová focení, zbude celý řádek na diktování —
   jinak by pětina tlačítka stála sama uprostřed prázdna. */
.foto-radek.jen-rici { grid-template-columns: 1fr; }

.rici {
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line2);
  color: var(--dim);
}
.rici:active { background: rgba(255, 255, 255, 0.05); }
.rici svg {
  width: 20px; height: 20px;
  /* Vlásové tahy jako všude jinde: mikrofon je nakreslený hranatě, aby
     nezaváděl tvarosloví, které appka nikde jinde nemá. */
  fill: none; stroke: currentColor; stroke-width: 1.5;
}

/* Poslouchám. Jediná otázka, kterou v tu chvíli člověk má, je jestli appka
   poslouchá — tak to stojí velkým písmem nad polem. Bez blikání a bez
   animace: pravidlo appky, a Jakub má navíc na svém stroji zapnuté omezení
   animací, takže by ji stejně neviděl. */
.popis-stav {
  font: 400 11px/1.4 var(--mono);
  letter-spacing: 0.24em;
  color: var(--akcent);
  padding-bottom: 14px;
}
.popis-stav.ticho { color: var(--dim); }

/* Mikrofon i se slovem — tady je na text místo, na rozdíl od pětiny řádku
   v ZAPSAT. */
.rici.sirsi {
  width: 100%; gap: 10px;
  margin-top: 18px; padding: 12px 0;
  font: 400 10px/1 var(--mono); letter-spacing: 0.18em;
}
.rici.sirsi svg { width: 16px; height: 16px; }

/* Diktuje se do textového pole, takže musí mít výšku na tři řádky —
   jedna věta o obědě se do jednořádkového inputu nevejde a člověk pak
   nevidí, co vlastně nadiktoval. */
.pole textarea {
  display: block; width: 100%;
  background: transparent;
  border: 0; border-bottom: 1px solid var(--line2);
  border-radius: 0;
  padding: 7px 0;
  font-family: var(--sans);
  font-size: 16px;               /* 16px = iOS nezoomuje při focusu */
  line-height: 1.5;
  outline: none;
  appearance: none;
  resize: none;
}
.pole textarea:focus { border-bottom-color: var(--akcent); }

/* Výsledek výpočtu cíle — vypadá jako výpis, ne jako karta. */
.vypocet {
  border-top: 1px solid var(--line2);
  border-bottom: 1px solid var(--line2);
  padding: 12px 0;
  font: 400 11px/1.9 var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em; color: var(--dim);
}
.vypocet .radek { display: flex; justify-content: space-between; gap: 12px; }
.vypocet b { font-weight: 400; color: var(--fg); }
.vypocet .cil b { color: var(--akcent); }
.vypocet .pozn {
  display: block; margin-top: 8px;
  line-height: 1.6; color: var(--dim2);
  letter-spacing: 0.02em;
}
.vypocet .pozn.varuj { color: var(--varovani); }

.druhotne {
  display: block; width: 100%;
  padding: 13px 0;
  border: 1px solid var(--line2);
  font: 400 10px/1 var(--mono);
  letter-spacing: 0.2em; color: var(--fg);
}
.druhotne:active { background: rgba(255, 255, 255, 0.06); }
.druhotne[disabled] { color: var(--dim2); border-color: var(--line); }

.nadpis.odsazeny { margin-top: 16px; }

.smazat {
  padding: 15px 18px;
  font: 400 11px/1 var(--mono);
  letter-spacing: 0.18em; color: var(--varovani);
}

.odkaz {
  align-self: flex-start;
  padding: 4px 0;
  font: 400 11px/1 var(--mono);
  letter-spacing: 0.1em; color: var(--dim);
  border-bottom: 1px solid var(--line2);
}

/* ── Souhlas se zpracováním ──────────────────────────────────── */

.souhlas {
  display: flex; gap: 11px; align-items: flex-start;
  font: 400 11px/1.65 var(--mono);
  letter-spacing: 0.03em; color: var(--dim);
  cursor: pointer;
}
.souhlas input {
  flex: none;
  width: 17px; height: 17px; margin-top: 1px;
  appearance: none;
  border: 1px solid var(--line2);
  background: transparent;
  border-radius: 0;
  display: grid; place-content: center;
}
.souhlas input:checked { background: var(--akcent); border-color: var(--akcent); }
.souhlas input:checked::after {
  content: "×"; color: #000;
  font: 400 15px/1 var(--mono);
}
.souhlas input:focus-visible { outline: 1px solid var(--akcent); outline-offset: 2px; }

.vic-odkaz {
  padding: 0; color: var(--fg);
  font: inherit;
  border-bottom: 1px solid var(--line2);
}

/* ── Pozvánky a obnovovací kód ───────────────────────────────── */

.pozvanka-odkaz {
  margin-top: 16px; padding: 14px 0;
  border-top: 1px solid var(--akcent);
  border-bottom: 1px solid var(--line2);
  display: flex; flex-direction: column; gap: 12px;
}
.pozvanka-odkaz code {
  font: 400 12px/1.6 var(--mono);
  color: var(--akcent);
  word-break: break-all;
  user-select: all;
}
.pozvanka-odkaz code.velky-kod {
  font-size: 20px; letter-spacing: 0.14em; word-break: normal;
}
.pozvanka-odkaz .pozn {
  font: 400 10px/1.6 var(--mono);
  letter-spacing: 0.04em; color: var(--dim2);
}

.seznam-pozvanek { margin-top: 18px; }
.pozvanka-radek {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font: 400 10px/1.4 var(--mono);
  letter-spacing: 0.06em; color: var(--dim);
}
.pozvanka-radek button {
  flex: none;
  font: 400 10px/1 var(--mono);
  letter-spacing: 0.12em; color: var(--varovani);
}

.uvod-pozvanka {
  font-family: var(--sans); font-size: 13.5px; line-height: 1.6;
  color: var(--dim);
  margin-bottom: 4px;
}

.druhotne.odsazeny-nahoru { margin-top: 24px; }

/* ── Patička ─────────────────────────────────────────────────── */

.paticka {
  position: relative; z-index: 1;
  padding: 34px 20px 26px;
  text-align: center;
  font: 400 10px/1 var(--mono);
  letter-spacing: 0.14em; color: var(--dim2);
}
.paticka a { color: var(--dim); text-decoration: none; border-bottom: 1px solid var(--line2); }
.vstup .paticka { padding-bottom: 0; margin-top: 40px; }

/* ── Volba způsobu zápisu ────────────────────────────────────── */

.velke-tlacitko {
  display: block; width: 100%; text-align: left;
  padding: 18px 0;
  border-bottom: 1px solid var(--line);
}
.velke-tlacitko:first-child { border-top: 1px solid var(--line); }
.velke-tlacitko:active { background: rgba(255, 255, 255, 0.03); }
.vt-nazev {
  display: block;
  font: 400 12px/1 var(--mono);
  letter-spacing: 0.22em; color: var(--akcent);
}
.vt-popis {
  display: block; margin-top: 8px;
  font-family: var(--sans); font-size: 12.5px; line-height: 1.5;
  color: var(--dim);
}

/* ── Potvrzení odhadu ────────────────────────────────────────── */

.odhad-uvod {
  font-family: var(--sans); font-size: 12.5px; line-height: 1.55;
  color: var(--dim);
  padding-bottom: 4px;
}

.odhad-polozky { display: flex; flex-direction: column; }

.odhad-radek {
  padding: 14px 0;
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: 1fr 76px 76px 26px;
  gap: 10px;
  align-items: end;
}
.odhad-radek .pole > span { margin-bottom: 5px; }
.odhad-radek .smaz-radek {
  font: 200 20px/1 var(--mono); color: var(--dim2);
  padding-bottom: 7px;
}
.odhad-radek .smaz-radek:active { color: var(--varovani); }
.odhad-radek.nejisty .pole:nth-child(2) input { border-bottom-color: var(--varovani); }

.odhad-znacka {
  grid-column: 1 / -1;
  margin-top: -4px;
  font: 400 10px/1 var(--mono);
  letter-spacing: 0.16em; color: var(--varovani);
}

.odhad-soucet {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 14px;
  border-top: 1px solid var(--line2);
  font: 400 10px/1 var(--mono);
  letter-spacing: 0.2em; color: var(--dim);
}
.odhad-soucet b {
  font-weight: 400; font-size: 17px; color: var(--fg);
  font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
}

.upresneni { display: flex; flex-direction: column; gap: 16px; }

/* ── Dávka na víc porcí ──────────────────────────────────────── */

.pole.davka em {
  display: block; margin-top: 7px;
  font: 400 10px/1.55 var(--mono);
  font-style: normal; letter-spacing: 0.04em; color: var(--dim2);
}
.pole.davka em:empty { display: none; }
#davka-hint { color: var(--akcent); }

/* ── Kolik toho bylo (panel po ťuknutí na položku) ───────────── */

/* Název jídla velkým: panel se otevírá přes seznam a bez něj by po druhém
   ťuknutí nebylo jisté, ke které položce se to vlastně vztahuje. */
.davka-jidlo {
  margin: 0;
  font: 400 19px/1.3 var(--mono);
  color: var(--fg);
}

/* Co se uloží. Limetková proto, že je to jediné číslo v panelu, které se
   mění při psaní — a jediné, kvůli kterému se sem člověk dívá. */
.davka-soucet {
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font: 400 14px/1.5 var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--akcent);
}

/* ── Váha ────────────────────────────────────────────────────── */

.vaha-form {
  display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: end;
}
.vaha-form .druhotne { width: auto; padding: 12px 20px; }

.vaha-graf { margin-top: 26px; }
.vaha-graf svg {
  display: block; width: 100%; height: 90px;
  overflow: visible;
}
.vaha-graf polyline {
  fill: none;
  stroke: var(--akcent);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.vaha-popis {
  display: flex; justify-content: space-between; gap: 10px;
  margin-top: 10px; padding-top: 9px;
  border-top: 1px solid var(--line);
  font: 400 10px/1.4 var(--mono);
  letter-spacing: 0.08em; color: var(--dim2);
}
.vaha-popis span:nth-child(2) { text-align: center; }
.vaha-popis span:last-child { text-align: right; }

#kalibrace { margin-top: 24px; }
#kalibrace .druhotne { margin-top: 14px; }

/* ── JÁ: skládací skupiny a rychlé přepínače ─────────────────────
   Nastavení je věc, do které člověk chodí jednou za čas a hledá v ní jednu
   konkrétní položku. Dlouhý svitek na to je špatný nástroj: všechno je
   otevřené, nic není vidět celé. Skupiny jsou proto zavřené a nahoře je
   řádek, kterým se do jedné skočí jedním ťuknutím. */

.zkratky {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 20px;
}
.zkratky button {
  flex: 1 1 auto;
  padding: 11px 10px;
  border: 1px solid var(--line2);
  font: 400 10px/1 var(--mono);
  letter-spacing: 0.16em; color: var(--dim);
}
.zkratky button:active { background: rgba(255, 255, 255, 0.05); }
.zkratky button.akt { border-color: var(--akcent); color: var(--akcent); }

.skupina { border-bottom: 1px solid var(--line); }
.skupina-hlava {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 18px 0;
  cursor: pointer; list-style: none;
  font: 400 11px/1 var(--mono);
  letter-spacing: 0.2em; color: var(--fg);
}
/* Vlastní značka místo systémového trojúhelníku — ten se v každém prohlížeči
   kreslí jinak a do typografického rozhraní nepatří. */
.skupina-hlava::-webkit-details-marker { display: none; }
.skupina-znak::after {
  content: "+";
  font: 300 18px/1 var(--mono); color: var(--dim);
}
.skupina[open] .skupina-znak::after { content: "−"; color: var(--akcent); }
.skupina[open] .skupina-hlava { color: var(--akcent); }
.skupina > .blok { padding-top: 0; }

/* ── Nebezpečné akce ─────────────────────────────────────────── */

.druhotne.nebezpecne { margin-top: 26px; color: var(--varovani); border-color: #40201b; }
.druhotne.nebezpecne:active { background: rgba(255, 92, 61, 0.1); }
.hlavni.nebezpecne-plne { background: var(--varovani); color: #fff; }
.podtitul.mensi.odsazeny-nahoru { margin-top: 9px; margin-bottom: 0; }

/* ── Nabídka ZAPSAT: hledání a rychlé řádky ──────────────────── */

/* Zbylé cesty zápisu. Zdrobněly z dlaždic na tlačítka, protože to hlavní
   je teď hledání — ale nezmizely: fotka i ruční zápis mají svoje případy. */
.zpusoby { display: flex; flex-wrap: wrap; gap: 8px; }
.zpusoby button {
  flex: 1 1 auto;
  padding: 11px 12px;
  border: 1px solid var(--line2);
  font: 400 11px/1 var(--mono);
  letter-spacing: 0.12em; color: var(--fg);
}
.zpusoby button:active { background: rgba(255, 255, 255, 0.05); }
.zpusoby button b { font-weight: 400; color: var(--dim); }

.prepinac.maly button { padding: 9px 0; font-size: 12px; }

#volba-hledat { margin-top: 4px; }
#volba-hlavicka:empty { display: none; }

/* ── Přepínač dne v ZAPSAT ───────────────────────────────────── */

.volba-den {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
}
.volba-den span {
  font: 400 11px/1 var(--mono);
  letter-spacing: 0.24em; color: var(--fg);
}

/* Značka „tohle už je na talíři“. Zůstává, dokud dialog nezavřeš — bliknutí
   po ťuknutí zmizí dřív, než ho stihneš zaznamenat. */
.znacka-pocet {
  flex: none;
  min-width: 18px; text-align: right;
  font: 400 11px/1 var(--mono);
  letter-spacing: 0.04em; color: var(--akcent);
}
.znacka-pocet:empty { min-width: 0; }
.obl-radek.na-taliri, .dlazdice-tl.na-taliri { border-color: var(--akcent); }

/* Zobnutí v liště. Není to pohled jako DNES nebo JÁ, ale úkon — proto stejná
   velikost písma jako ostatní popisky, ale limetková, aby se hned našlo. */
.zobnuti-tl {
  font: 400 10px/1 var(--mono);
  letter-spacing: 0.18em; color: var(--akcent);
  padding: 10px 0;
}
.zobnuti-tl:active { opacity: 0.6; }

/* Dlaždice s vodou v nabídce ZAPSAT. Jedno ťuknutí, žádné psaní. */
.voda-dlazdice {
  display: flex; justify-content: space-between; align-items: baseline;
  width: 100%; text-align: left;
  padding: 14px 14px;
  margin-bottom: 12px;
  border: 1px solid var(--voda);
}
.voda-dlazdice:active { background: rgba(79, 214, 232, 0.1); }
.voda-dlazdice.pridano { background: rgba(79, 214, 232, 0.14); }
.vd-nazev { font-size: 14px; color: var(--voda); }
.vd-detail {
  font: 400 11px/1 var(--mono); font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em; color: var(--dim);
}
.vd-detail b { font-weight: 400; color: var(--voda); }

/* ── Rychlé drobnosti ────────────────────────────────────────── */

.dlazdice { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 4px; }
.dlazdice-tl {
  flex: 1 1 auto; min-width: 92px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--line2);
  text-align: left;
}
.dlazdice-tl:active { background: rgba(255, 255, 255, 0.05); }
.dl-nazev { font-size: 13px; }
.dl-kcal {
  flex: none;
  font: 400 11px/1 var(--mono); font-variant-numeric: tabular-nums; color: var(--dim);
}
.dlazdice-tl.pridano { border-color: var(--akcent); }
.dlazdice-tl.pridano .dl-kcal { color: var(--akcent); }

/* ── Co jsi právě přidal ─────────────────────────────────────── */

/* Lepkavé nahoře: seznam pod tím se roluje, tohle zůstává na očích. Bez toho
   člověk po třetí položce neví, co už má, a jde se radši podívat do deníku. */
.pridano-ted {
  position: sticky; top: 0; z-index: 2;
  margin: 6px 0 4px;
  background: var(--bg);
  border-top: 1px solid var(--akcent);
  border-bottom: 1px solid var(--line);
}
.pt-hlava {
  padding: 10px 0 6px;
  font: 400 10px/1 var(--mono);
  letter-spacing: 0.16em; color: var(--akcent);
}
.pt-radek {
  display: flex; align-items: baseline; gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.pt-nazev { flex: 1; font-size: 13.5px; }
.pt-kcal { font: 400 12px/1 var(--mono); font-variant-numeric: tabular-nums; }
.pt-zrus {
  flex: none; padding: 0 2px;
  font: 300 17px/1 var(--mono); color: var(--dim2);
}
.pt-zrus:active { color: var(--varovani); }

/* ── Lišta po zápisu ─────────────────────────────────────────── */

.hlaska {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 78px;
  width: min(calc(100% - 24px), var(--sloupec));
  z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 13px 15px;
  background: var(--bg);
  border: 1px solid var(--akcent);
  font: 400 12px/1.3 var(--mono);
  letter-spacing: 0.06em;
}
.hlaska button {
  flex: none;
  font: 400 11px/1 var(--mono);
  letter-spacing: 0.14em;
  color: var(--akcent);
  padding: 4px 2px;
}
.hlaska button[hidden] { display: none; }

/* ── Offline ─────────────────────────────────────────────────── */

/* Pruh nad spodní lištou. Nemá vlastní barvu ani ikonu — je to informace,
   ne poplach; bez signálu appka funguje dál. */
.offline-pruh {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--lista) + env(safe-area-inset-bottom));
  width: min(100%, var(--sloupec));
  z-index: 55;
  padding: 8px 20px;
  background: var(--bg);
  border-top: 1px solid var(--line2);
  font: 400 10px/1.4 var(--mono);
  letter-spacing: 0.14em; color: var(--dim);
  text-align: center;
}

/* Neodeslaná položka: čárkovaná linka místo plné. Text se nezesvětluje —
   slabá šeď mizí na staženém jasu jako první a tohle je zrovna to, co
   člověk potřebuje vidět. */
.polozka.ceka { border-bottom: 1px dashed var(--line2); }
.polozka.ceka .kcal::after {
  content: " ⋯";
  color: var(--dim);
}

/* ── Bílkoviny během dne ─────────────────────────────────────── */

.bilkoviny-den { margin-top: 34px; }
.mini-nadpis {
  font: 400 10px/1 var(--mono);
  letter-spacing: 0.2em; color: var(--dim);
  margin-bottom: 14px;
}
/* První sloupec drží nejdelší název části dne — od 24. 8. „svačina dopo“,
   která se do původních 78 px nevešla a zalomila se na dva řádky. */
.bd-radek {
  display: grid; grid-template-columns: 92px 1fr 58px;
  align-items: center; gap: 10px;
  padding: 10px 0;
}
.bd-popis {
  font: 400 10px/1 var(--mono);
  letter-spacing: 0.08em; color: var(--dim);
  text-transform: lowercase;
}
.bd-pruh { display: block; height: 1px; background: var(--line2); }
.bd-pruh i { display: block; height: 1px; background: var(--akcent); }
.bd-cislo {
  font: 400 12px/1 var(--mono); font-variant-numeric: tabular-nums;
  text-align: right;
}
/* Vysvětlivka pod grafem potřebuje odstup, jinak se lepí na poslední sloupec. */
.bilkoviny-den .pozn { margin-top: 14px; }

/* ── Partner: dny po položkách ───────────────────────────────── */

.partner-dny { margin-top: 34px; }

.pd-den { border-bottom: 1px solid var(--line); }
.pd-hlava {
  display: flex; justify-content: space-between; align-items: baseline;
  width: 100%; text-align: left;
  padding: 12px 0;
  font: 400 12px/1 var(--mono);
  letter-spacing: 0.08em; color: var(--dim);
}
.pd-hlava b {
  font-weight: 400; color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.pd-hlava::after { content: ""; }
.pd-obsah { padding: 0 0 12px 14px; }

.pd-polozka {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 11px 0;
  border-top: 1px solid var(--line);
}
.pd-polozka .nazev { font-size: 14px; }
.pd-polozka .pod {
  display: block; margin-top: 3px;
  font: 400 10px/1 var(--mono);
  letter-spacing: 0.1em; color: var(--dim);
}
.pd-polozka .kcal {
  flex: none;
  font: 400 12px/1 var(--mono); font-variant-numeric: tabular-nums;
}

#koho { margin-bottom: 12px; }
#koho button { padding: 9px 4px; font-size: 12px; }

/* ── Napovídání z katalogu ───────────────────────────────────── */

.napoveda { margin-top: 6px; border-top: 1px solid var(--line); }
.napoveda-radek {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  width: 100%; text-align: left;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--sans); font-size: 13.5px;
}
.napoveda-radek em {
  flex: none; font-style: normal;
  font: 400 10px/1 var(--mono);
  letter-spacing: 0.06em; color: var(--dim);
}
.napoveda-radek:active { background: rgba(255, 255, 255, 0.04); }

/* V potvrzení fotky visí našeptávač pod celým řádkem, ne pod jedním polem. */
.odhad-radek .napoveda { grid-column: 1 / -1; margin-top: 0; }

/* ── Oblíbená jídla ──────────────────────────────────────────── */

.hledat.odsazeny-nahoru { margin-top: 22px; }

.hledat {
  display: block; width: 100%;
  background: transparent;
  border: 0; border-bottom: 1px solid var(--line2);
  border-radius: 0; padding: 8px 0;
  font-family: var(--mono); font-size: 16px;
  outline: none; appearance: none;
}
.hledat:focus { border-bottom-color: var(--akcent); }
.hledat::-webkit-search-cancel-button { filter: invert(1) grayscale(1); }

.oblibena-seznam { display: flex; flex-direction: column; }

.obl-radek {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  width: 100%; text-align: left;
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
}
.obl-radek:first-child { border-top: 1px solid var(--line); }
.obl-radek:active { background: rgba(255, 255, 255, 0.03); }
.obl-radek .nazev { font-size: 15px; }
.obl-radek .pod {
  display: block; margin-top: 3px;
  font: 400 10px/1 var(--mono);
  letter-spacing: 0.1em; color: var(--dim);
}
.obl-radek .kcal {
  flex: none;
  font: 400 14px/1 var(--mono);
  font-variant-numeric: tabular-nums;
}
.obl-radek.pridano { border-color: var(--akcent); }
.obl-radek.pridano .kcal { color: var(--akcent); }

/* Navržená komba. Odlišená čárkovanou linkou, ne šedivějším textem — slabá
   šeď zmizí jako první na displeji se staženým jasem. */
.navrh-hlava {
  margin-top: 26px; padding-bottom: 9px;
  font: 400 10px/1 var(--mono);
  letter-spacing: 0.2em; color: var(--dim);
}
.obl-radek.navrh { border-bottom-style: dashed; }
.obl-radek.navrh:first-child { border-top-style: dashed; }

.sprava-oblibenych { display: flex; flex-wrap: wrap; gap: 8px; }
.sprava-oblibenych button {
  padding: 8px 12px;
  border: 1px solid var(--line2);
  font: 400 11px/1 var(--mono);
  letter-spacing: 0.06em; color: var(--dim);
}
.sprava-oblibenych button::after { content: " ×"; color: var(--dim2); }
.sprava-oblibenych button:active { border-color: var(--varovani); color: var(--varovani); }
.sprava-oblibenych .prazdne {
  font: 400 11px/1 var(--mono); color: var(--dim2); letter-spacing: 0.1em;
}

/* ── Komba ───────────────────────────────────────────────────────
   Celé jídlo pod jedním názvem. Vypadá jako oblíbené, jen má pod názvem
   vypsané části, ze kterých se skládá. */

.obl-radek.vybrano { border-bottom-color: var(--akcent); }
.obl-radek.vybrano .nazev::before {
  content: "× "; color: var(--akcent); font-family: var(--mono);
}
.obl-radek .casti {
  display: block; margin-top: 4px;
  font-family: var(--sans); font-size: 11.5px; line-height: 1.45;
  color: var(--dim2);
}

.kombo-sklad { display: flex; flex-direction: column; gap: 10px; }

.pozn {
  font: 400 10px/1.55 var(--mono);
  letter-spacing: 0.04em; color: var(--dim2);
}

.podtitul.mensi { margin: -6px 0 14px; font-size: 10px; color: var(--dim2); }

/* Tempo dne stojí pod jiným řádkem, ne pod nadpisem — záporná horní mezera
   z `.podtitul.mensi` mu ho lepila na patičky. A protože nese informaci,
   ne poznámku pod čarou, dostává čitelnější šeď a normální velikost. */
#s-tempo {
  margin: 9px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: var(--dim);
}

/* ── Překryv při rozpoznávání ────────────────────────────────── */

.pracuje {
  position: fixed; inset: 0; z-index: 20;
  background: rgba(8, 8, 10, 0.92);
  display: grid; place-content: center;
  padding: 0 40px;
}
.pracuje-obsah { width: min(280px, 70vw); text-align: center; }
.pracuje-pruh { height: 1px; background: var(--line2); overflow: hidden; }
.pracuje-pruh i {
  display: block; height: 100%; width: 40%;
  background: var(--akcent);
  animation: bezi 1.1s ease-in-out infinite;
}
@keyframes bezi {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}
@media (prefers-reduced-motion: reduce) {
  .pracuje-pruh i { animation: none; width: 100%; opacity: 0.5; }
}
.pracuje p {
  margin-top: 18px;
  font: 400 10px/1.6 var(--mono);
  letter-spacing: 0.2em; color: var(--dim);
}

/* ── Právní text v modalu ────────────────────────────────────── */

.pravni { gap: 16px; }
.pravni p {
  font-family: var(--sans);
  font-size: 13px; line-height: 1.6; color: var(--dim);
}
.pravni b { color: var(--fg); font-weight: 500; }
.pravni a { color: var(--akcent); }
.pravni .pozn {
  padding-top: 14px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--dim2);
}

.chyba {
  font: 400 11px/1.5 var(--mono);
  letter-spacing: 0.06em; color: var(--varovani);
}
.ok {
  font: 400 11px/1 var(--mono);
  letter-spacing: 0.14em; color: var(--akcent);
}

/* ── Vstupní obrazovka ───────────────────────────────────────── */

.vstup {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 40px 24px calc(40px + env(safe-area-inset-bottom));
  max-width: 420px; margin: 0 auto;
}
/* Uvítání: logo, název, jedna věta. Na střed, protože je to jediná věc na
   obrazovce — na kraji by vypadalo, že něco chybí vedle. */
.uvitani { text-align: center; margin-bottom: 40px; }
.znacka-logo { display: block; margin: 0 auto 22px; }
.znacka {
  font: 200 34px/1 var(--mono);
  letter-spacing: 0.3em;
  /* Poslední písmeno má vpravo mezeru navíc kvůli letter-spacingu; odsazení
     ji vyrovná, jinak text opticky utíká doleva. */
  text-indent: 0.3em;
}
.znacka-pod {
  margin: 14px 0 0;
  font: 400 11px/1.6 var(--mono);
  letter-spacing: 0.1em; color: var(--dim);
}

/* Pododdíl uvnitř bloku: opačný směr téže věci (mám kód / dávám kód). */
.pododdil {
  margin-top: 26px; padding-top: 20px;
  border-top: 1px solid var(--line);
}
.pododdil-nadpis {
  margin-bottom: 14px;
  font: 400 10px/1 var(--mono);
  letter-spacing: 0.18em; color: var(--dim);
}
.pododdil .pozn { margin-top: 12px; }

/* Formulář v bloku potřebuje odstup od toho, co je nad ním. Chybějící
   pravidlo pro .vaha-form.odsazeny-nahoru bylo přesně to, proč se tlačítko
   a pole pod ním lepily. */
.vaha-form.odsazeny-nahoru { margin-top: 22px; }
.vstup .hlavni { margin-top: 8px; }

/* ── Modal (spodní list) ─────────────────────────────────────── */

dialog {
  border: 0; padding: 0;
  background: transparent;
  color: var(--fg);
  max-width: 100%; max-height: 100%;
  width: 100%;
  margin: 0; margin-top: auto;
  position: fixed; inset: 0; top: auto;
}
dialog::backdrop { background: rgba(0, 0, 0, 0.72); }

.list {
  background: #0d0d10;
  border-top: 1px solid var(--akcent);
  max-height: 92svh;
  display: flex; flex-direction: column;
}
.list-hlava {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--line);
}
.list-hlava h2 {
  font: 400 10px/1 var(--mono);
  letter-spacing: 0.28em; color: var(--dim);
}
.zavrit {
  font: 200 26px/1 var(--mono); color: var(--dim);
  padding: 0 6px; margin: -6px;
}
.list-telo {
  padding: 22px 20px 26px;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 20px;
  -webkit-overflow-scrolling: touch;
}
.list-pata {
  display: flex; align-items: stretch; gap: 10px;
  padding: 0 20px calc(20px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
.list-pata .hlavni { flex: 1; }
/* Druhé tlačítko v patě (skládání komba) — stejně vysoké jako to hlavní. */
.list-pata .druhotne { flex: 1; width: auto; padding: 15px 0; }

@media (min-width: 620px) {
  dialog { max-width: 480px; margin: auto; inset: 0; }
  .list { border: 1px solid var(--line2); border-top-color: var(--akcent); }
  .pohled, .paticka { max-width: var(--sloupec); margin-left: auto; margin-right: auto; }
  .lista {
    left: 50%; right: auto; transform: translateX(-50%);
    width: 100%; max-width: var(--sloupec);
    border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  }
}

/* ── Kolečka v Přehledu ──────────────────────────────────────────
   Kolik z denního cíle je průměrně splněno. Kroužek je jen obal: nese to
   číslo uprostřed a hlavně řádek pod ním, který říká, co s tím — „chybí 30 g“
   je informace, „78 %“ je hlavolam.

   Trik s poloměrem 15,915: obvod takového kruhu je přesně 100, takže
   stroke-dasharray je rovnou procento a nemusí se nic přepočítávat. */
.kolecka {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 20px 10px;
  margin: 22px 0 26px;
}

.kolecko { text-align: center; }

.kolecko svg {
  width: 62px; height: 62px;
  transform: rotate(-90deg);   /* začátek nahoře, ne vpravo */
}
.kolecko circle { fill: none; stroke-width: 3; }
.k-pozadi { stroke: var(--line2); }
.k-fill {
  stroke: var(--akcent);
  stroke-linecap: round;
  transition: stroke-dasharray 0.5s ease;
}
@media (prefers-reduced-motion: reduce) { .k-fill { transition: none; } }

/* Přes limit: stejné kolečko, jiná barva. Platí jen pro živiny, kde je cíl
   strop (kalorie, cukry, sůl) — u bílkovin nebo vody je „přes“ v pořádku. */
.kolecko.pres .k-fill { stroke: var(--varovani); }

/* Voda má vlastní barvu všude v appce — limetková patří kaloriím. Kdyby
   svítila stejně, vypitý litr by vypadal jako snědená porce.
   ⚠️ `k-voda`, ne `voda` — samotné `.voda` je řádek s vodou v souhrnu dne
   a jeho odsazení by kolečko posunulo o 26 px níž než ostatní v řadě. */
.kolecko.k-voda .k-fill { stroke: var(--voda); }
.kolecko.k-voda .k-cislo { color: var(--voda); }

.k-cislo {
  display: block;
  margin-top: -42px; margin-bottom: 20px;
  font: 400 15px/1 var(--mono);
  color: var(--fg);
}
.kolecko.pres .k-cislo { color: var(--varovani); }

.k-nazev {
  display: block;
  font: 400 10px/1.3 var(--mono);
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--dim);
}
.k-chybi {
  display: block; margin-top: 5px;
  font: 400 11px/1.3 var(--mono);
  color: var(--dim2);
}

.kolecka-pozn {
  margin: 0 0 22px;
  font: 400 12px/1.5 var(--mono);
  color: var(--dim2);
}
.kolecka-pozn button {
  color: var(--akcent);
  text-decoration: underline; text-underline-offset: 3px;
  font: inherit;
}

/* Kolečka na obrazovce Dnes — hlavní obsah, ve třech řadách.
   První řada (kalorie, voda) je největší: dívá se na ni člověk pokaždé, když
   appku otevře. Druhá a třetí jsou menší, protože jsou na kontrolu, ne na
   rozhodnutí. Počet sloupců v řadě nastavuje app.js podle toho, kolik jich
   po výběru v PŘEDVOLBÁCH opravdu zbylo. */
.kolecka-dnes {
  display: flex; flex-direction: column;
  gap: 20px;
  margin: 26px 0 30px;
}
.kolecka.rada { margin: 0; gap: 10px; }

/* ⚠️ První řada se jmenuje `velka`, ne `hlavni`. `.hlavni` je hlavní tlačítko
   appky (limetkové pozadí, černý text) — když se tak jmenovala i tahle řada,
   vzala si celé jeho pozadí a kolečka seděla v zeleném obdélníku. */
.kolecka.rada.velka .kolecko svg { width: 76px; height: 76px; }
.kolecka.rada.velka .k-cislo {
  margin-top: -51px; margin-bottom: 26px;
  font-size: 17px;
}

.kolecka.rada:not(.velka) .kolecko svg { width: 52px; height: 52px; }
.kolecka.rada:not(.velka) .k-cislo {
  margin-top: -35px; margin-bottom: 17px;
  font-size: 13px;
}
.kolecka.rada:not(.velka) .k-chybi { margin-top: 4px; font-size: 10px; }

/* Výběr, co se v kolečkách ukazuje. Tlačítka, ne checkboxy: je to zapnout
   a vypnout, ne formulář k odeslání. */
.volba-kolecek { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.volba-kolecek button {
  padding: 9px 13px;
  border: 1px solid var(--line2);
  font: 400 11px/1 var(--mono);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--dim);
}
.volba-kolecek button.akt { border-color: var(--akcent); color: var(--akcent); }

/* ── Pohyb ───────────────────────────────────────────────────────
   Dny vedle sebe, jeden čtvereček = jeden den. Plný = cvičil, prázdný
   obtažený = odpověděl ne, tečka = neodpověděl vůbec. Rozdíl mezi „ne“ a
   „nic“ je důležitý: první je poctivá odpověď, druhé je díra v datech. */
.dlazdice-pohyb {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 16px 0;
  border-top: 1px solid var(--line);
  text-align: left;
}
.dp-nazev {
  font: 400 11px/1 var(--mono);
  letter-spacing: 0.14em; color: var(--fg);
}
.dp-shrnuti { flex: 1; font: 400 12px/1 var(--mono); color: var(--dim); }
.dp-znak { font: 400 14px/1 var(--mono); color: var(--dim); }

.pohyb { padding-bottom: 22px; }
.pohyb-dny { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 16px; }
.pohyb-den {
  width: 15px; height: 15px;
  border: 1px solid var(--line2);
  position: relative;
}
.pohyb-den.cvicil { background: var(--akcent); border-color: var(--akcent); }
.pohyb-den.nic { border-style: dotted; }
.pohyb-den.dnes { outline: 1px solid var(--dim); outline-offset: 2px; }
.pohyb-legenda {
  font: 400 11px/1.6 var(--mono);
  color: var(--dim2);
}