/* ══════════════════════════════════════════════════════════════════════
   CHEFLEX — WEB, vzhled „Dresy u stolu“ (od 17. 10. 2026)

   Domácnost je tým a porce je číslo na dresu. Půlnočně modrá plocha se
   síťovinou dresu, zlaté pruhy rukávu, křídově bílá; každý člen má barvu
   svého dresu (zlatá, křída, nebe) a ta ho provází. Nadpisy a čísla
   úzkým sportovním písmem Big Shoulders Display, text ve Figtree.
   Smlouva směru: `.impeccable/surfaces/sablony-index-html.md`,
   produkt: `PRODUCT.md`. Předchozí vzhled (směr G, bílá + korál, Nunito)
   je v historii gitu do 17. 10. 2026.

   Dvě plochy: výchozí TMAVÁ (`:root`) a SVĚTLÁ soupiska `.papir` pro
   dlouhé čtení (podmínky, soukromí, detail receptu). Světlá plocha jen
   přepíše tytéž tokeny, takže komponenty se píšou jednou.

   Názvy tokenů (`--koral`, `--pozadi`…) zůstaly ze směru G kvůli kopii
   v appce a testu `testy/tokeny.test.mjs`; `--koral` je teď zlatá dresu.
   Přejmenují se, až se vzhled přenese do appky.
   ══════════════════════════════════════════════════════════════════════ */

/* Vlastní kopie písem (OFL), žádný cizí server — CSP cizí písma nepustí. */
@font-face {
  font-family: 'Big Shoulders'; font-style: normal; font-weight: 500 900; font-display: swap;
  src: url(fonty/bigshoulders-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Big Shoulders'; font-style: normal; font-weight: 500 900; font-display: swap;
  src: url(fonty/bigshoulders-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Figtree'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(fonty/figtree-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree'; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url(fonty/figtree-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Pohyb (23. 10. 2026) — jedna křivka a škála délek transitions.dev,
     shodně s appkou (`testy/tokeny.test.mjs`). Délka podle použití, zavření
     kratší než otevření, bez pružení. Autorské momenty (úvod, zhoupnutí
     dresů, smyčky) mají délku napsanou přímo. */
  --kriv: cubic-bezier(.2, .7, .3, 1);
  --t-krok: 40ms;
  --t-mikro: 80ms;
  --t-rychle: 150ms;
  --t-bezne: 250ms;
  --t-stredni: 350ms;
  --t-pomale: 400ms;
  --t-duraz: 500ms;
  /* Svět dresu — pevné barvy, nemění se s plochou. */
  --navy:   #13234B;
  --navy-2: #1B2F63;
  --navy-3: #0B1430;
  --zlata:  #F2B705;
  --krida:  #F4F5F1;
  --dres-nebe: #4C9BE8;
  --dres-zelena: #2F9E5B;
  --dres-cervena: #D2463A;

  /* Tokeny plochy (tmavá). */
  --pozadi:      var(--navy);
  --karta:       var(--navy-2);
  --plocha:      #172a5a;
  --linka:       #33467A;
  --text:        var(--krida);
  --text-tlum:   #BAC3DB;   /* 8,9:1 na navy */
  --koral:       var(--zlata);
  --koral-hrana: #C99700;
  --koral-sv:    #3A3D45;
  --koral-text:  var(--zlata);   /* 8,7:1 na navy */
  --na-akcentu:  var(--navy);
  /* Barvy denní doby (snídaně, svačina, oběd, večeře) dál nesou jen význam. */
  --slunce:  #F2B705;  --slunce-hrana: #C99700;  --slunce-sv: #3A3D45;  --slunce-text: #F7CD45;
  --list:    #3DBE6E;  --list-hrana:   #2F9E5B;  --list-sv:   #1D4550;  --list-text:   #6FD898;
  --nebe:    #4C9BE8;  --nebe-hrana:   #2F7FCC;  --nebe-sv:   #1E3D78;  --nebe-text:   #8EC2F5;
  --svestka: #A983F2;  --svestka-hrana:#8763D6;  --svestka-sv:#2E3170;  --svestka-text:#C7AEFA;

  --display: 'Big Shoulders', 'Arial Narrow', sans-serif;
  --sans: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius: 10px;
  --sirka:    1180px;
  --sirka-uz: 68ch;

  /* Flexo v dresu týmu: zelený papoušek se zlatým bříškem. */
  --flexo-obrys:   #0B1430;
  --flexo-telo:    #2F9E5B;
  --flexo-bricho:  #F2B705;
  --flexo-kridlo:  #1E6E3E;
  --flexo-zobak:   #F4F5F1;
  --flexo-tvar:    #F7CD45;
  --flexo-cepice:  #F4F5F1;
  --flexo-varecka: #F2B705;
  --flexo-partak-telo:   #4C9BE8;
  --flexo-partak-bricho: #A9D0F7;
  --flexo-partak-kridlo: #2459A8;
  --flexo-partak-telefon:#0B1430;
  --partak-telo: #4C9BE8;
  --dukaz: var(--zlata);
}

/* Světlá soupiska: tytéž tokeny, světlé hodnoty. */
.papir, .dokument, .recept .rTeloReceptu, .receptKarta, .soupiskaList {
  --pozadi:      var(--krida);
  --karta:       #FFFFFF;
  --plocha:      #E6E9F1;
  --linka:       #CCD3E2;
  --text:        var(--navy);
  --text-tlum:   #46516F;   /* 7,6:1 na křídě */
  --koral-sv:    #FFF1C2;
  --koral-text:  #1F55C8;   /* odkazy a důraz na světlé, 6,3:1 */
  --slunce-sv: #FFF1C2;  --slunce-text: #7A5600;
  --list-sv:   #DDF3E5;  --list-text:   #1D7342;
  --nebe-sv:   #DCEBFB;  --nebe-text:   #1C5FA8;
  --svestka-sv:#EDE5FD;  --svestka-text:#5E3AA8;
  color: var(--text);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 110px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background-color: var(--navy);
  /* Síťovina dresu: jemné tečky přes celou plochu. */
  background-image: radial-gradient(rgba(244, 245, 241, .055) 1.3px, transparent 1.6px);
  background-size: 9px 9px;
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 500;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--zlata); color: var(--navy); }

/* `overflow-x: clip`, ne `hidden`: `hidden` by z obalu udělalo rolovací
   kontejner a lepivá hlavička by se přestala lepit. */
.obal { position: relative; overflow-x: clip; }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 900; letter-spacing: .005em; line-height: 1.04; margin: 0; }
h1, h2 { text-transform: uppercase; text-wrap: balance; }
h3, h4 { font-weight: 800; line-height: 1.1; }

a { color: var(--koral-text); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--zlata); }

/* Viditelné zaostření pro klávesnici (WCAG 2.4.7). */
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--zlata);
  outline-offset: 3px;
  border-radius: 4px;
}
.papir a:focus-visible, .dokument a:focus-visible { outline-color: #1F55C8; }

.preskocit {
  position: absolute; left: -9999px;
  background: var(--zlata); color: var(--navy); font-weight: 800;
  padding: 10px 16px; border-radius: 6px; z-index: 100;
}
.preskocit:focus { left: 16px; top: 16px; }

/* Postranní okraj stránky. Sekce pod ním si smějí nastavit jen
   `padding-block` — zkratka `padding` by okraj vynulovala. */
.pas { padding: 0 32px; }
.stred { max-width: var(--sirka); margin: 0 auto; }

/* ── PRUHY RUKÁVU ─────────────────────────────────────────────────────
   Dva zlaté pruhy přes celou šířku — podpis světa. Pod hlavičkou a nad
   patičkou; jinde jen tam, kde odděluje velký celek. */
/* Jeden zlatý pruh rukávu pod hlavičkou a nad patičkou. */
.pata { border-top: 8px solid var(--zlata); }

/* ── TLAČÍTKO: nažehlená páska ─────────────────────────────────────── */

.tlacitko {
  display: inline-flex; align-items: center; justify-content: center; min-height: 58px;
  padding: 12px 28px 10px; border-radius: 6px; border: 0;
  background: var(--zlata); color: var(--navy);
  font: 900 24px/1 var(--display); letter-spacing: .04em; text-transform: uppercase;
  text-decoration: none; cursor: pointer;
  transition: transform var(--t-rychle) var(--kriv), background-color var(--t-rychle) var(--kriv);
}
.tlacitko:hover { color: var(--navy); background: #FFC81F; transform: translateY(-2px); }
.tlacitko:active { transform: translateY(1px); }

/* ── HLAVIČKA: jedna lišta, pod ní jeden zlatý pruh rukávu ────────────── */

.hlava { background: var(--navy); position: sticky; top: 0; z-index: 20; border-bottom: 8px solid var(--zlata); }
.hlavaRada { display: flex; align-items: center; gap: 18px 36px; min-height: 76px; padding: 8px 0; }
/* Hlavička je širší než obsah: menu, logo, přepínač a jazyk se musí vejít
   i v polštině. Výzva k ukázce v hlavičce není (Martin 18. 10. 2026: tlačítko
   je hned v úvodu). */
.hlava .hlavaRada { max-width: 1400px; }
@media (max-width: 1180px) {
  .hlava .jazykNazev { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* Rozbalovací menu (na telefonu a úzkých oknech místo lišty). */
.navMenu { position: relative; flex: none; }
/* Menu vlevo vedle loga (Martin 18. 10. 2026: tam ho každý čeká) — k logu blíž než zbytek lišty. */
.hlava .navMenu { margin-right: -18px; }
.navMenuTl {
  /* Zlaté tlačítko s nápisem, ne holá ikona na barvě lišty (Martin 18. 10. 2026:
     „menu“ na webu o receptech je dvojznačné, proto „Menu webu“). */
  display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px 0 11px; border-radius: 6px;
  cursor: pointer; list-style: none; border: 2px solid var(--zlata); background: var(--zlata); color: var(--navy);
  font: 900 19px/1 var(--display); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
}
.navMenuTl span { padding-top: 2px; }
.navMenuTl:hover { background: #FFC81F; border-color: #FFC81F; }
.navMenuTl::-webkit-details-marker { display: none; }
.navMenuTl svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
/* Otevřené menu: tři čáry se složí do × (icon swap, pohyb 23. 10. 2026).
   Krajní se otočí kolem středu a dosednou do něj (nejdřív `rotate`, pak posun
   v otočených osách — obráceně by × ujelo o 3,5 px doprava, CR 23. 10.),
   prostřední se smrskne — žádná průhlednost. */
.navMenuTl path { transform-box: view-box; transform-origin: 12px 12px; transition: transform var(--t-bezne) var(--kriv); }
.navMenu[open] > .navMenuTl path:nth-child(1) { transform: rotate(45deg) translateY(5px); }
.navMenu[open] > .navMenuTl path:nth-child(2) { transform: scaleX(0); }
.navMenu[open] > .navMenuTl path:nth-child(3) { transform: rotate(-45deg) translateY(-5px); }
.navMenu[open] > .navMenuTl { border-color: var(--krida); }
.navMenuSeznam {
  position: absolute; left: 0; top: calc(100% + 10px); z-index: 30; min-width: 230px; padding: 6px;
  display: flex; flex-direction: column; background: var(--navy-2); border: 2px solid var(--linka);
  border-radius: var(--radius); box-shadow: 0 18px 40px rgba(5, 10, 25, .5);
}
.navMenuSeznam a {
  padding: 12px 12px 10px; border-radius: 6px; color: var(--krida); text-decoration: none;
  font: 800 22px/1 var(--display); letter-spacing: .06em; text-transform: uppercase;
}
.navMenuSeznam a:hover { background: var(--navy); color: var(--zlata); }
:root[data-dres="venku"] .navMenu[open] > .navMenuTl { border-color: var(--navy); }
:root[data-dres="venku"] .navMenuSeznam { background: #FFFFFF; box-shadow: 0 18px 40px rgba(19, 35, 75, .18); }
:root[data-dres="venku"] .navMenuSeznam a { color: var(--navy); }
:root[data-dres="venku"] .navMenuSeznam a:hover { background: var(--zlata); color: var(--navy); }
@media (prefers-reduced-motion: no-preference) {
  .navMenu[open] .navMenuSeznam { animation: vyjedMenu var(--t-bezne) var(--kriv); transform-origin: 0 0; }
}
.znacka { color: var(--krida); text-decoration: none; display: inline-flex; align-items: center; gap: 10px; flex: none; }
.znacka:hover { color: var(--krida); }
/* Lockup: čepice s bleskem, CHE křídou, FLEX zlatě. */
.znackaText { font: 900 34px/1 var(--display); letter-spacing: .03em; }
.znackaText em { font-style: normal; color: var(--zlata); }
.znackaZnak { width: 32px; height: 32px; display: block; flex: none; }
.hlavaVpravo { margin-left: auto; display: flex; align-items: center; gap: 12px; flex: none; }

.jazykyMenu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 30;
  display: flex; flex-direction: column; min-width: 180px; padding: 6px;
  background: var(--navy-2); border: 2px solid var(--linka); border-radius: var(--radius);
  box-shadow: 0 18px 40px rgba(5, 10, 25, .5);
}
.jazykPolozka:hover { background: var(--navy); color: var(--zlata); }

/* Přepínač jazyků — rozbalovací nabídka nad `<details>`; `jazyk.js`
   přidává zavření kliknutím mimo a Escapem. */
.jazyky, .jazykyRozbal { position: relative; }
.jazykChip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 12px; border-radius: 6px;
  border: 2px solid var(--linka); background: var(--navy-2);
  color: var(--krida); text-decoration: none;
  font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer;
  list-style: none; user-select: none;
}
.jazykChip::-webkit-details-marker { display: none; }
.jazykSipka {
  width: 7px; height: 7px; margin-left: 1px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
}
.jazykyRozbal[open] > .jazykChip { border-color: var(--zlata); color: var(--zlata); }
.jazykyRozbal[open] .jazykSipka { transform: rotate(-135deg) translate(-3px, -3px); }
.jazykyMenu { min-width: 180px; }
.jazykPolozka {
  display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: 6px;
  color: var(--text-tlum); text-decoration: none; font-size: 15px; font-weight: 600;
}
.jazykPolozka[aria-current="true"] { color: var(--zlata); font-weight: 800; }
.jazykVlajka { font-size: 16px; }

/* ── ÚVOD: nadpis vlevo, dresy a hrnec vpravo ──────────────────────── */

.uvodVnitrek {
  padding-block: 56px 84px;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px; align-items: center;
}
@media (min-width: 1040px) {
  .uvodVnitrek { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 40px; }
}
.uvod h1 {
  font-size: clamp(54px, 7vw, 104px); line-height: 1.04; letter-spacing: 0;
  margin: 0 0 30px; color: var(--krida);
}
:lang(en) .uvod h1, :lang(de) .uvod h1 { font-size: clamp(48px, 5.8vw, 88px); }
.uvodPodnadpis { font-size: clamp(19px, 1.7vw, 23px); line-height: 1.45; font-weight: 500; max-width: 31em; margin: 0 0 34px; color: var(--krida); }
.uvodAkce { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.uvodAkce p { margin: 0; max-width: 17em; font-size: 15px; line-height: 1.4; color: var(--text-tlum); }

/* Scéna: tyč s dresy, hrnec, Flexo trenér. Velikost dresu podle dílu. */
.dresyScena {
  position: relative; display: grid;
  grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto;
  padding-top: 8px; align-content: start;
}
.dresyTyc { height: 10px; border-radius: 5px; background: var(--navy-3); margin: 0 4% 0 0; box-shadow: inset 0 -2px 0 rgba(255,255,255,.06); }
.dresyRada { display: flex; align-items: flex-start; justify-content: space-between; gap: 2%; margin: -2px 6% 0 2%; }
.dresy-clen { margin: 0; text-align: center; flex: 0 0 auto; width: calc(var(--podil) * .76%); }
.dresy-clen figcaption { margin-top: 10px; font: 800 20px/1 var(--display); letter-spacing: .06em; text-transform: uppercase; color: var(--krida); }
.dres { display: block; width: 100%; height: auto; overflow: visible; }
.dresHacek { stroke: var(--navy-3); stroke-width: 6; stroke-linecap: round; }
.dresTelo { stroke: var(--navy-3); stroke-width: 5; stroke-linejoin: round; }
.dresLimec { fill: none; stroke: var(--krida); stroke-width: 9; }
.dresRukav { fill: none; stroke: var(--navy); stroke-width: 7; stroke-linecap: round; opacity: .35; }
.dresJmeno { font: 800 17px/1 var(--sans); letter-spacing: .16em; fill: var(--navy); }
.dresCislo { font: 900 96px/1 var(--display); fill: var(--navy); }
.dres-zlata :is(.dresTelo, .dresNapln) { fill: var(--zlata); }
.dres-krida :is(.dresTelo, .dresNapln) { fill: var(--krida); }
.dres-nebe  :is(.dresTelo, .dresNapln) { fill: var(--dres-nebe); }
/* Dres úvodu: prázdný obrys, do kterého se nalije barva (`dresNapln`). */
.dresPrazdny { fill: rgba(244, 245, 241, .07); }
.dresObrys { fill: none; stroke: var(--navy-3); stroke-width: 5; stroke-linejoin: round; }
:root[data-dres="venku"] .dresPrazdny { fill: rgba(19, 35, 75, .06); }
.dres-nebe .dresLimec { stroke: var(--navy); }
/* Zelený a červený dres týmové sady (pravidla dřív, teď šatna) — číslo křídou. */
.dres-zelena .dresTelo { fill: var(--dres-zelena); }
.dres-cervena .dresTelo { fill: var(--dres-cervena); }
.dres-zelena .dresCislo, .dres-cervena .dresCislo, .dres-zelena .dresNapis, .dres-cervena .dresNapis { fill: var(--krida); }
.dres-zelena .dresLimec, .dres-cervena .dresLimec { stroke: var(--navy-3); }
.dresNapis { font: 900 34px/1 var(--display); letter-spacing: .02em; fill: var(--navy); }

.hrnec {
  position: relative; margin: 96px 22% 0 2%; height: 150px;
  background: var(--krida); border: 6px solid var(--navy-3);
  border-radius: 6px 6px 46% 46% / 6px 6px 34% 34%;
  padding: 26px 12px 18px; overflow: hidden;
}
.hrnec::before { /* okraj hrnce */
  content: ""; position: absolute; left: -6px; right: -6px; top: -6px; height: 22px;
  background: var(--navy-3); border-radius: 50%;
}
.hrnecVnitrek { display: flex; height: 100%; gap: 0; border-radius: 0 0 40% 40% / 0 0 30% 30%; overflow: hidden; }
.hrnecDil { display: grid; place-items: center; min-width: 0; }
.hrnecDil + .hrnecDil { border-left: 3px dashed var(--navy-3); }
.hrnecDil b { font: 900 clamp(26px, 2.6vw, 40px)/1 var(--display); color: var(--navy); }
.dil-zlata { background: var(--zlata); }
.dil-krida { background: #DCE0E8; }
.dil-nebe  { background: var(--dres-nebe); }

.dresyBublina {
  position: absolute; right: 0; bottom: 250px; margin: 0; max-width: 14em;
  background: var(--krida); color: var(--navy); border-radius: 14px;
  padding: 14px 18px; font-size: 18px; font-weight: 700; line-height: 1.3;
}
.dresyBublina em { font-style: normal; font-weight: 800; color: var(--navy); box-shadow: inset 0 -.45em 0 rgba(242, 183, 5, .55); }
.dresyBublina::after {
  content: ""; position: absolute; right: 30px; bottom: -9px; width: 18px; height: 18px;
  background: var(--krida); transform: rotate(45deg);
}
.flexoTrener { position: absolute; right: -3%; bottom: 0; width: 21%; max-width: 200px; }

@media (max-width: 1039px) {
  .uvodText { display: contents; }
  .uvod h1 { order: 1; } .dresyScena { order: 2; } .uvodPodnadpis { order: 3; margin-bottom: 22px; } .uvodAkce { order: 4; }
  .dresyScena { max-width: 640px; }
  .hrnec { margin-top: 30px; }
  .dresyBublina { position: relative; right: auto; bottom: auto; margin: 24px 26% 0 0; justify-self: start; }
  .dresyBublina::after { right: 26px; bottom: -9px; }
  .flexoTrener { bottom: -10px; width: 24%; }
}
/* Hrnec se rozdělí: jeho díly se naplní (`nalij` níž) a půl sekundy za každým
   se zdola naplní dres stejného člena — díl z hrnce se rozlije do dresu.
   Kdo si pohyb vypnul, vidí rovnou plné dresy. */
@media (prefers-reduced-motion: no-preference) {
  .dresNapln { transform-box: fill-box; transform-origin: 50% 100%; animation: naplnDres .8s var(--kriv) both; }
  .dresy-clen:nth-child(1) .dresNapln { animation-delay: .8s; }
  .dresy-clen:nth-child(2) .dresNapln { animation-delay: .95s; }
  .dresy-clen:nth-child(3) .dresNapln { animation-delay: 1.1s; }
  .dresy-clen { transform-origin: 50% 0; }
}
@keyframes naplnDres { from { transform: scaleY(0); } to { transform: none; } }
@keyframes flexoMrk { 0%, 100% { opacity: 1; } }
@keyframes dresHoup { 0% { transform: rotate(-5deg); } 45% { transform: rotate(3deg); } 75% { transform: rotate(-1deg); } 100% { transform: rotate(0); } }

/* ── SOUPISKA JEDNOHO JÍDLA ───────────────────────────────────────── */

.soupiska { background: var(--navy-2); }
.soupiskaVnitrek { padding-block: 88px 40px; display: grid; gap: 44px; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 980px) { .soupiskaVnitrek { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; } }
.soupiskaText h2 { font-size: clamp(40px, 5vw, 68px); margin-bottom: 22px; }
.soupiskaText h2 em { font-style: normal; }
.soupiskaText p { font-size: 19px; line-height: 1.55; color: var(--text-tlum); margin: 0; max-width: 34em; }

.soupiskaList { margin: 0; background: var(--krida); border-radius: var(--radius); padding: 26px 28px 22px; }
.soupiskaJidlo { font: 900 30px/1 var(--display); text-transform: uppercase; letter-spacing: .02em; margin: 0 0 16px; color: var(--navy); }
.soupiskaTab { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.soupiskaTab thead th { font: 800 15px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--text-tlum); text-align: left; padding: 0 8px 10px; }
.soupiskaTab tbody tr { border-top: 2px solid var(--linka); }
.soupiskaTab th[scope="row"] { text-align: left; padding: 14px 8px 14px 0; font-weight: 700; white-space: nowrap; }
.soupiskaTab td { padding: 14px 8px; width: 24%; }
.soupiskaTab td b { display: block; margin-top: 6px; font: 900 24px/1 var(--display); color: var(--navy); }
/* Procento v soupisce je odkaz na „Jak to počítá“ (27. 10. 2026): číslo podtrhne
   zlatá páska až při najetí, ať tabulka nevypadá jako devět tlačítek. */
.sOdkaz { display: block; color: inherit; text-decoration: none; border-radius: 4px; }
.sOdkaz b { width: max-content; box-shadow: inset 0 0 0 transparent; transition: box-shadow var(--t-rychle) var(--kriv); }
.sOdkaz:hover b, .sOdkaz:focus-visible b { box-shadow: inset 0 -.32em 0 rgba(242, 183, 5, .7); }
.sOdkaz:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.soupiskaTab tbody td:last-child b { font-size: 30px; }
.sCislo { display: inline-grid; place-items: center; width: 46px; height: 46px; margin-right: 12px; border-radius: 6px; vertical-align: middle;
  font: 900 26px/1 var(--display); color: var(--navy); border: 2px solid var(--navy); }
.sJmeno { display: inline-flex; flex-direction: column; vertical-align: middle; font-size: 18px; line-height: 1.15; color: var(--navy); }
.sJmeno small { font-size: 14px; font-weight: 600; color: var(--text-tlum); }
.sPruh { display: block; height: 12px; width: calc(var(--p) * 1.6%); max-width: 100%; border-radius: 3px; border: 2px solid var(--navy); }
.soupiskaList .dil-krida { background: #FFFFFF; }
.soupiskaPopis { margin: 18px 0 6px; font-size: 16px; line-height: 1.5; color: var(--navy); }
.soupiskaPozn { margin: 0; font-size: 13px; color: var(--text-tlum); }
/* Soupiska na stránce receptu: mezi Flexovou poznámkou a surovinami. */
.rSoupiska { max-width: 760px; margin: 0 0 30px; }
.rSoupiska .soupiskaPozn { margin-top: 12px; }
@media (max-width: 560px) {
  .soupiskaList { padding: 20px 16px 18px; }
  .sCislo { display: none; }
  .soupiskaTab th[scope="row"] { white-space: normal; }
  .soupiskaTab td b { font-size: 20px; }
  .soupiskaTab thead th { font-size: 13px; letter-spacing: .03em; }
}

/* ── PRAVIDLA HRY (šest otázek) ───────────────────────────────────────
   Řádky jako soupiska: téma na dresové pásce vlevo, otázka a odpověď. */
.pravidla { padding-block: 24px 88px; }
.bloky { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 56px; }
@media (min-width: 900px) { .bloky { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.blok { padding: 22px 0; border-top: 2px solid var(--linka); }
.blok h3 { font-size: 26px; margin: 0 0 8px; color: var(--krida); text-transform: uppercase; letter-spacing: .01em; }
.blok p { margin: 0; color: var(--text-tlum); font-size: 16.5px; line-height: 1.55; }
.pravidlaDal { margin: 34px 0 0; }
.pravidlaDal a { font: 900 22px/1 var(--display); letter-spacing: .05em; text-transform: uppercase; color: var(--zlata); text-decoration: none; border-bottom: 3px solid var(--zlata); padding-bottom: 4px; }
.pravidlaDal a:hover { color: var(--krida); border-color: var(--krida); }
/* Šipka „dál“ (pohyb 23. 10. 2026, learn-more z transitions.dev): v klidu
   chevron, při najetí ujede o 4 px a dorazí jí tělo. Zpět bez zpoždění. */
.sipka { width: .8em; height: .8em; margin-left: .3em; vertical-align: -.06em; fill: none; stroke: currentColor;
  stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; overflow: visible;
  transition: transform var(--t-rychle) var(--kriv); }
.sipkaTelo { transform-box: view-box; transform-origin: 18px 12px; transform: scaleX(0);
  transition: transform var(--t-rychle) var(--kriv); }
:is(.pravidlaDal a, .jOdkazy a):is(:hover, :focus-visible) .sipka { transform: translateX(4px); }
:is(.pravidlaDal a, .jOdkazy a):is(:hover, :focus-visible) .sipkaTelo { transform: none; }

/* ── VYPNI ČÍSLA: zlatý pruh přes celou šířku ──────────────────────── */

.vypni { background: var(--zlata); color: var(--navy); }
.vypniVnitrek { padding-block: 80px; display: grid; gap: 36px 64px; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 940px) { .vypniVnitrek { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } .vypniUkazka { justify-items: center; } }
.vypni h2 { font-size: clamp(44px, 5.6vw, 80px); line-height: 1.04; }
.vypni p { margin: 0; font-size: 19px; line-height: 1.5; font-weight: 600; }
.vypni p { margin-top: 20px; max-width: 34em; }
/* Přepínač čísel: velký jako vypínač na dresu, vypnutý schová čísla. */
.vypniUkazka { display: grid; justify-items: start; gap: 22px; }
.vypniPrepinac {
  appearance: none; -webkit-appearance: none; margin: 0; cursor: pointer;
  width: 112px; height: 56px; border-radius: 28px; background: var(--navy-3);
  position: relative; transition: background-color var(--t-bezne) var(--kriv);
}
.vypniPrepinac::after {
  content: ""; position: absolute; top: 6px; left: 6px; width: 44px; height: 44px; border-radius: 50%;
  background: var(--krida); transition: transform var(--t-bezne) var(--kriv);
}
.vypniPrepinac:checked { background: var(--navy); }
.vypniPrepinac:checked::after { transform: translateX(56px); background: var(--krida); box-shadow: inset 0 0 0 4px var(--navy); }
.vypniPrepinac:focus-visible { outline: 3px solid var(--navy); outline-offset: 4px; }
.vypniDresy { display: flex; align-items: flex-start; gap: 18px; }
.vypniDres { width: 110px; transition: width .45s var(--kriv); }
.vypniDres:nth-child(2) { width: 86px; } .vypniDres:nth-child(3) { width: 78px; }
.vypniDres .dresCislo { transition: opacity var(--t-rychle) var(--kriv), transform var(--t-bezne) var(--kriv); transform-origin: 50% 60%; }
/* Přepínač je pojmenovaný nadpisem „Vypni čísla“, takže zapnutý = čísla
   vypnutá. Bez čísel jsou tři stejné porce: čísla zmizí a dresy se srovnají
   na stejnou velikost (Martin 17. 10. 2026). */
.vypniPrepinac:checked ~ .vypniDresy .dresCislo { opacity: 0; transform: scale(.6); }
.vypniPrepinac:checked ~ .vypniDresy .vypniDres { width: 92px; }
/* Barva člena platí i tady: zlatý dres má na zlaté ploše světlejší výplň
   a silný modrý obrys, aby nesplynul. */
.vypni .dresTelo { stroke: var(--navy); stroke-width: 8; }
.vypni .dres-zlata .dresTelo { fill: #FFD23F; }
@media (prefers-reduced-motion: no-preference) {
  .vypniDres { transform-origin: 50% 0; }
  .vypniPrepinac:checked ~ .vypniDresy .vypniDres { animation: dresHoupZnovu .9s var(--kriv) both; }
  .vypniPrepinac:checked ~ .vypniDresy .vypniDres:nth-child(2) { animation-delay: var(--t-mikro); }
  .vypniPrepinac:checked ~ .vypniDresy .vypniDres:nth-child(3) { animation-delay: calc(2 * var(--t-mikro)); }
}

/* ── UKÁZKA ───────────────────────────────────────────────────────────
   Vlevo rám telefonu s živou appkou (390 × 760 krát měřítko `--m`, které
   dopočítá `ram.js`), vpravo tři kroky a závěr. */
.ukazkaSekce { padding-block: 88px; }
.ukazkaSekce h2 { font-size: clamp(48px, 6vw, 84px); margin-bottom: 16px; }
.sekceUvod { color: var(--text-tlum); max-width: 40em; margin: 0 0 44px; font-size: 19px; line-height: 1.5; }
.ukazkaBlok { display: grid; gap: 34px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 900px) {
  .ukazkaBlok { grid-template-columns: 410px minmax(0, 1fr); gap: 60px; align-items: center; }
  .ukazkaBlok .ukazkaRam { position: sticky; top: 110px; }
}
.ukazkaRam {
  --m: 1;
  width: calc(390px * var(--m)); height: calc(760px * var(--m));
  box-sizing: content-box; position: relative; margin: 0 auto;
  border: 10px solid var(--navy-3); border-radius: 40px; background: var(--navy-3);
  box-shadow: 0 0 0 3px var(--zlata), 0 30px 60px rgba(3, 8, 22, .55);
  overflow: hidden;
}
.ukazkaOkno {
  display: block; width: 390px; height: 760px; position: absolute; top: 0; left: 0;
  transform: scale(var(--m)); transform-origin: 0 0;
  border: 0; border-radius: 30px; background: #FFFFFF;
}
.ukazkaBezJs { margin: 0; padding: 22px; background: var(--krida); color: var(--navy); font-size: 15px; text-align: center; }

.ukazkaVedle { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
/* Kroky jako nástup na hřiště: číslo dresu vlevo, žádné kolečko. */
.ukazkaKrok { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 18px; padding: 20px 0; border-top: 2px solid var(--linka); align-items: start; }
.ukazkaKrok h3 { font-size: 26px; margin: 4px 0 6px; }
.ukazkaKrok p { margin: 0; color: var(--text-tlum); font-size: 16px; }
.ukazkaZaver { padding: 26px 26px 24px; border-radius: var(--radius); background: var(--navy-2); border: 2px solid var(--zlata); }
.ukazkaZaver h3 { font-size: 30px; margin: 0 0 8px; color: var(--zlata); }
.ukazkaZaver p { margin: 0 0 14px; color: var(--krida); }
.ukazkaZaver p + p { margin-bottom: 18px; }
.ukazkaPozn { margin: 26px 0 0; font-size: 14px; color: var(--text-tlum); max-width: 62ch; }

/* ── TLAČÍTKA OBCHODŮ ─────────────────────────────────────────────── */

.storeRada { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.store {
  display: inline-flex; align-items: center; gap: 11px; padding: 10px 18px; border-radius: 6px;
  background: var(--navy-3); color: var(--krida); border: 2px solid var(--krida);
  text-decoration: none; min-height: 56px;
}
.store:hover { color: var(--zlata); border-color: var(--zlata); }
.store svg { width: 26px; height: 26px; flex: none; }
.storeText { display: flex; flex-direction: column; line-height: 1.3; }
.storeMale { font-size: 11px; font-weight: 600; opacity: .8; }
.storeVelke { font-size: 17px; font-weight: 800; }
/* Dokud odkazy nevedou do obchodů, tlačítko nesmí vypadat funkčně. */
.store.chysta { border-style: dashed; border-color: currentColor; background: transparent; cursor: default; opacity: .75; }
.store.chysta:hover { color: inherit; border-color: currentColor; }
.storePozn { font-size: 15px; margin-top: 12px; }
/* Fakta u verze zdarma jako dresové pásky. */
.fakta { list-style: none; margin: 18px 0 0; padding: 0; display: grid;
  grid-template-columns: repeat(2, max-content); gap: 8px; }
/* Čtyři pásky po dvou: ve flexu se na desktopu zalomily 3 + 1 a „Offline“
   zůstal sám na řádku (finální kontrola 16. 10. 2026). Na úzkém telefonu
   pod sebe, ať se páska nemusí zalamovat uvnitř. */
@media (max-width: 480px) { .fakta { grid-template-columns: max-content; } }
.fakta li { padding: 7px 11px 6px; border-radius: 3px; background: var(--navy); font-size: 14px; color: var(--text-tlum); }
.fakta b { font: 900 18px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--zlata); margin-right: 4px; }
/* Parťák u soupisky: bublina vlevo, papoušek otočený k ní. */
.partakRada { margin: 30px 0 0; }
.partakRada .partak { flex: none; width: 96px; order: 2; }
.partakRada .flexoBublina { background: var(--krida); color: var(--navy); margin-bottom: 26px; }
.partakRada .flexoBublina::after { background: var(--krida); }
.partakRada .flexoBublina em { color: var(--navy); box-shadow: inset 0 -.45em 0 rgba(76, 155, 232, .55); }

/* ── PŘÍBĚH ───────────────────────────────────────────────────────── */

.pribeh { background: var(--navy-2); }
.pribehVnitrek { padding-block: 88px; display: grid; gap: 30px; grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 860px) { .pribehVnitrek { grid-template-columns: 320px minmax(0, 1fr); gap: 64px; } }
.pribehStitek { color: var(--text-tlum); }
.pribehStitek .flexo { width: 190px; margin: 0 0 22px; }
.pribehStitek h2 { font-size: clamp(40px, 4.4vw, 56px); margin-bottom: 12px; color: var(--krida); }
.pribehText { font-size: 18.5px; line-height: 1.7; max-width: var(--sirka-uz); color: var(--krida); }
.pribehText p { margin: 0 0 18px; }
.pribehText p:last-child { margin-bottom: 0; }
/* Tři momenty místo čtyř odstavců: nadpis se slovní hříčkou a dvě věty. */
.pribehMomenty { list-style: none; margin: 0 0 40px; padding: 0; display: grid; gap: 26px; }
@media (min-width: 1100px) { .pribehMomenty { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; } }
.pribehMoment { padding-top: 16px; border-top: 3px solid var(--linka); }
.pribehMoment h3 { margin: 0 0 10px; font-size: 27px; line-height: 1.05; text-transform: uppercase; color: var(--zlata); }
.pribehMoment p { margin: 0; font-size: 16.5px; line-height: 1.6; color: var(--text-tlum); }
.pribehZaver { max-width: 46em; }
.pribehCitat { margin: 6px 0 28px; padding: 0; font: 900 clamp(30px, 3.6vw, 42px)/1.05 var(--display); text-transform: uppercase; color: var(--zlata); }
.pribehPodpis { margin-top: 24px !important; font-size: 15px; color: var(--text-tlum); font-weight: 700; }

/* Na zlaté by zlaté bříško a vařečka Flexa splynuly s plochou — tady křída a modrá. */
.vypni { --flexo-bricho: var(--krida); --flexo-tvar: var(--krida); --flexo-varecka: var(--navy); }


/* ── KARTY (Co umí, Podpora) ──────────────────────────────────────────
   Na modré: panel dresu s barevným pruhem nahoře v barvě člena. */
.karty { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.karta { position: relative; padding: 26px 22px 24px; background: var(--karta); border-radius: var(--radius); border: 2px solid var(--linka); }
.kartaZnak { width: 34px; height: 34px; margin-bottom: 14px; display: block; color: var(--zlata); stroke-width: 2.2; }
.kartaZnak.slunce  { color: var(--slunce-text); }
.kartaZnak.list    { color: var(--list-text); }
.kartaZnak.nebe    { color: var(--nebe-text); }
.kartaZnak.svestka { color: var(--svestka-text); }
.karta h3 { font-size: 26px; margin-bottom: 8px; }
.karta p { margin: 0; color: var(--text-tlum); font-size: 16px; line-height: 1.5; }

/* ── SOUPISKA TÝMU (Co appka umí) ───────────────────────────────────
   Funkce jsou hráči: řada = téma (název vlevo, pod ním pruh v barvě
   řady), v ní hráči pod sebou — dres s číslem 1–11, jméno, co umí.
   Řádky dělí čára jako na soupisce, žádné karty ani ikony. */
.satnaStrana { padding-block: 48px 96px; }
.satnaStrana h1 { font-size: clamp(56px, 8vw, 116px); margin-bottom: 20px; }
.satnaUvod { font-size: clamp(19px, 1.8vw, 23px); line-height: 1.45; max-width: 36em; margin: 0 0 34px; color: var(--krida); }
.satnaStrana .flexoRada { margin-bottom: 56px; }
.satnaStrana .flexoBublina { background: var(--krida); color: var(--navy); }
.satnaStrana .flexoBublina::after { background: var(--krida); }
.satnaStrana .flexoBublina em { color: var(--navy); box-shadow: inset 0 -.45em 0 rgba(242, 183, 5, .6); }
.sestava { display: grid; gap: 64px; }
.rada { --barva-rady: var(--zlata); display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.rada-nebe { --barva-rady: var(--dres-nebe); }
.rada-zelena { --barva-rady: var(--dres-zelena); }
.rada-cervena { --barva-rady: var(--dres-cervena); }
.radaNadpis { margin: 0 0 6px; font-size: clamp(40px, 4.4vw, 64px); line-height: 1; color: var(--krida); }
.radaNadpis::after { content: ""; display: block; width: 96px; height: 8px; margin-top: 14px; border-radius: 4px; background: var(--barva-rady); }
.radaHraci { list-style: none; margin: 0; padding: 0; }
.hrac { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 18px; align-items: start; padding: 22px 0; border-bottom: 2px solid var(--linka); }
.hrac:first-child { border-top: 2px solid var(--linka); }
.hracDres { grid-row: 1 / span 2; width: 64px; height: auto; overflow: visible; }
.hrac h3 { margin: 6px 0 0; font-size: 26px; line-height: 1.05; text-transform: uppercase; letter-spacing: .01em; color: var(--krida); }
.hrac p { grid-column: 2; margin: 0; max-width: 62ch; color: var(--text-tlum); font-size: 16.5px; line-height: 1.6; }
@media (min-width: 980px) {
  .rada { grid-template-columns: 280px minmax(0, 1fr); gap: 40px; align-items: start; }
  .radaNadpis { font-size: clamp(36px, 3.3vw, 46px); hyphens: auto; }
  .radaNadpis { position: sticky; top: 100px; margin-top: 18px; }
  .hrac { grid-template-columns: 76px minmax(0, 15rem) minmax(0, 1fr); gap: 0 28px; padding: 26px 0; align-items: center; }
  .hracDres { grid-row: auto; width: 76px; }
  .hrac h3 { margin: 0; font-size: 28px; }
  .hrac p { grid-column: 3; }
}
:root[data-dres="venku"] :is(.radaNadpis, .hrac h3) { color: var(--navy); }
:root[data-dres="venku"] .hrac p { color: var(--text-tlum); }

/* ── TEXTOVÉ STRÁNKY: světlá soupiska na modré ──────────────────────── */

.dokument {
  margin-block: 44px 88px; padding: clamp(28px, 5vw, 64px);
  max-width: 900px; background: var(--krida); border-radius: var(--radius);
}
.dokument.siroky { max-width: var(--sirka); }
.dokument h1 { font-size: clamp(48px, 6.4vw, 84px); line-height: 1.04; margin-bottom: 18px; color: var(--navy); }
.dokumentDatum { color: var(--text-tlum); font-size: 14.5px; font-weight: 600; margin: 0 0 30px; }
.dokument h2 { font-size: clamp(30px, 3.4vw, 40px); margin: 48px 0 14px; color: var(--navy); }
.dokument h3 { font-size: 24px; margin: 28px 0 8px; color: var(--navy); }
.dokument p, .dokument li { max-width: var(--sirka-uz); color: var(--text); line-height: 1.65; }
.dokument p { margin: 0 0 14px; }
.dokument ul, .dokument ol { margin: 0 0 16px; padding-left: 22px; }
.dokument li { margin-bottom: 7px; }
.dokument strong { font-weight: 800; }
/* Karty uvnitř světlé soupisky: bílé s modrou linkou. */
.dokument .karta { background: #FFFFFF; border-color: var(--linka); }
.dokument .kartaZnak { color: var(--navy); }
.dokument .karta h3 { margin: 0 0 7px; }
.dokument .karty { margin-bottom: 20px; }

/* Vytažený odstavec — to podstatné, co si má člověk odnést. */
.hlavniVec { background: var(--navy); color: var(--krida); padding: 22px 26px; margin: 0 0 34px; max-width: var(--sirka-uz); border-radius: var(--radius); }
.hlavniVec p, .dokument .hlavniVec p { margin: 0; font-weight: 600; color: var(--krida); }
.hlavniVec a { color: var(--zlata); }
.hlavniVecPlna { max-width: none; }
.hlavniVec .dokumentDatum { margin: 0 0 8px; color: #BAC3DB; }

/* Údaj, který ještě nemáme. Build ho počítá a vypíše. */
.doplnit {
  background: #FFF1C2; border-bottom: 2px dashed #C99700; color: #7A5600;
  padding: 1px 5px; border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em;
}

.udaje { border-collapse: collapse; margin: 0 0 20px; max-width: var(--sirka-uz); width: 100%; }
.udaje th, .udaje td { text-align: left; padding: 10px 14px 10px 0; border-bottom: 2px solid var(--plocha); vertical-align: top; }
.udaje th { font-weight: 800; width: 200px; }
.udaje td { color: var(--text-tlum); }

.zdroje li, #zdroje li { padding-left: 0; list-style: none; color: var(--text-tlum); font-size: 15px; }
#zdroje ul, #zdroje ol { padding-left: 0; }

/* ── ČASTÉ DOTAZY ─────────────────────────────────────────────────── */

.faq { max-width: 860px; display: grid; gap: 0; }
.faqPolozka { padding: 2px 4px; border-top: 2px solid var(--linka); }
.faqPolozka:last-child { border-bottom: 2px solid var(--linka); }
.faqPolozka summary {
  cursor: pointer; padding: 18px 0; font-weight: 800; font-size: 18px;
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faqPolozka summary::-webkit-details-marker { display: none; }
.faqPolozka summary::after {
  content: '+'; flex: none; width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: 6px; background: var(--zlata); color: var(--navy); font: 900 24px/1 var(--display);
}
.faqPolozka[open] summary::after { content: '–'; }
.faqPolozka p { margin: 0 0 18px; color: var(--text-tlum); }
.pocitameOddil summary { justify-content: flex-start; gap: 12px; }
.pocitameOddil summary::after { margin-left: auto; }
.pocitameOddil summary .kartaZnak { flex: none; width: 28px; height: 28px; margin: 0; }

/* Podpora a Co umí: karty v mřížce na světlé soupisce. */
.dokument .podporaCesty { margin: 8px 0 40px; }
.dokument .podporaCesty, .dokument #vlastnosti .karty { grid-template-columns: repeat(3, 1fr); gap: 14px; }
.podporaCesty .karta, #vlastnosti .karta { padding: 22px 20px 22px; }
.dokument .podporaCesty .karta h3, .dokument #vlastnosti .karta h3 { font-size: 24px; }
.podporaCesty .karta p, .dokument #vlastnosti .karta p { font-size: 15px; line-height: 1.5; }
.dokument #vlastnosti .karta:last-child:nth-child(3n+1) { grid-column: 1 / -1; }
.dokument #vlastnosti .karta:last-child:nth-child(3n+1) p { max-width: 70ch; }
@media (max-width: 860px) { .dokument .podporaCesty, .dokument #vlastnosti .karty { grid-template-columns: 1fr; } }
.podporaList { background: none; border: 0; padding: 0; }
.podporaList .faq { max-width: none; }

/* ── PATIČKA: šatna ───────────────────────────────────────────────── */

.pata { background: var(--navy-3); color: var(--krida); font-size: 15px; }
.pata > .pas { padding-block: 56px 40px; }
.pataHlava { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-bottom: 30px; border-bottom: 2px solid var(--linka); }
.pataClaim { margin: 18px 0 0; font: 900 clamp(48px, 7vw, 96px)/1.02 var(--display); text-transform: uppercase; color: var(--zlata); }
.pataClaim span { color: var(--krida); font-size: .6em; vertical-align: .2em; }
.flexoPata { width: clamp(110px, 14vw, 170px); flex: none; }
.pataRady { display: grid; margin: 10px 0 30px; }
.pataRada { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 10px 24px; align-items: baseline; padding: 16px 0; border-bottom: 2px solid var(--linka); }
.pataRada h3 { font-size: 22px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-tlum); }
.pataRada ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 28px; }
.pataRada a { color: var(--krida); text-decoration: none; font-weight: 600; font-size: 16px; }
.pataRada a:hover { color: var(--zlata); text-decoration: underline; }
.pataSpodek { color: var(--text-tlum); font-size: 14px; display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between; }
@media (max-width: 700px) { .pataRada { grid-template-columns: minmax(0, 1fr); } }

/* ── PŘESNOST A VÝPOČTY (Jak to počítá) ─────────────────────────────── */

.presnost { margin-top: 56px; }
.hmHero { padding: clamp(24px, 4vw, 40px); background: var(--navy); color: var(--krida); border-radius: var(--radius); }
.dokument .hmHero h2 { font-size: clamp(36px, 4.8vw, 60px); margin: 0 0 14px; max-width: 18ch; color: var(--krida); }
.dokument .hmHero .hmUvod { color: #BAC3DB; font-size: 17px; line-height: 1.55; max-width: 60ch; margin: 0; }
.dokument .hmCisla { list-style: none; padding: 0; margin: clamp(26px, 3.4vw, 36px) 0 16px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.dokument .hmCisla li { margin: 0; padding: 18px 12px; max-width: none; text-align: center; background: var(--navy-2); border-radius: 6px; color: #BAC3DB; font-size: 14px; line-height: 1.35; }
.hmCisla strong { display: block; font: 900 clamp(44px, 5vw, 60px)/1 var(--display); margin-bottom: 8px; color: var(--zlata); }
.hmCisla li:nth-child(2) strong { color: var(--list); }
.hmCisla li:nth-child(3) strong { color: var(--dres-nebe); }
.hmCisla li:nth-child(4) strong { color: var(--krida); }
.dokument .hmHero .hmMeta { font-size: 13px; color: #BAC3DB; margin: 0; max-width: none; }

.hmKap { margin-top: 18px; padding: clamp(22px, 3.6vw, 36px); background: #FFFFFF; border: 2px solid var(--linka); border-radius: var(--radius); }
.dokument .hmKap h3 { font-size: clamp(30px, 3.6vw, 44px); text-transform: uppercase; margin: 0 0 14px; max-width: 24ch; }
.dokument .hmKap p { color: var(--text); }
.hmKapTmava { background: var(--navy); border-color: var(--navy); }
.dokument .hmKapTmava p { color: var(--krida); }
.dokument .hmKapTmava h3 { font: 900 clamp(34px, 4.6vw, 56px)/1.04 var(--display); text-transform: uppercase; color: var(--zlata); max-width: 18ch; margin: 0 0 18px; }
.presnost h4 { font-size: 20px; color: var(--navy); margin: 26px 0 6px; }

.dokument #pocitame, .dokument #zdroje { margin-top: 18px; padding: clamp(14px, 2.4vw, 26px) clamp(20px, 3.6vw, 36px); background: #FFFFFF; border: 2px solid var(--linka); border-radius: var(--radius); }
.dokument #pocitame { margin-top: 36px; }
#pocitame .faq { max-width: none; }
#pocitame .faqPolozka:first-child { border-top: 0; }
#pocitame .faqPolozka:last-child { border-bottom: 0; }
.dokument #zdroje h2 { margin-top: 6px; }

/* Z čeho se skládá den: pruh na člověka, díly v barvách denní doby. */
.hmPruhy { display: grid; gap: 8px; margin: 12px 0 10px; }
.hmPruh { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto; align-items: center; gap: 12px; font-size: 14px; font-weight: 700; }
.hmDen { display: flex; height: 24px; border-radius: 4px; overflow: hidden; background: var(--plocha); }
.hmDil { font: 900 18px/1 var(--display); white-space: nowrap; }
.hmChod { display: inline-block; min-width: 2px; }
.hmChod-snidane  { background: var(--slunce); }
.hmChod-svacina  { background: var(--list); }
.hmChod-obed     { background: var(--dres-cervena); }
.hmChod-vecere   { background: var(--svestka); }
.hmChod-pridavek { background: var(--nebe); }
.hmLegendaChodu { list-style: none; padding: 0 !important; margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 13px; color: var(--text-tlum); }
.hmLegendaChodu li { display: flex; align-items: center; gap: 6px; margin: 0; }
.hmLegendaChodu .hmChod { width: 14px; height: 14px; border-radius: 3px; }
@media (max-width: 560px) {
  .hmPruh { grid-template-columns: 1fr auto; }
  .hmPruh .hmDen { grid-column: 1 / -1; order: 3; }
}

/* ── FLEXO A BUBLINA ──────────────────────────────────────────────── */

.flexo { display: block; height: auto; overflow: visible; }
.flexoRada { display: flex; align-items: flex-end; gap: 14px; max-width: var(--sirka-uz); margin: -4px 0 34px; }
.flexoRada .flexo { flex: none; width: 110px; order: 2; }
.dokument .flexoBublina, .flexoBublina {
  position: relative; flex: 0 1 auto; margin: 0 0 30px; order: 1;
  padding: 14px 18px; background: var(--navy); color: var(--krida); border-radius: 14px;
  font-size: 18px; font-weight: 600; line-height: 1.4; max-width: 30ch;
}
.flexoBublina em { font-style: normal; font-weight: 800; color: var(--zlata); }
.flexoBublina::after {
  content: ''; position: absolute; right: -9px; bottom: 22px; width: 18px; height: 18px;
  background: var(--navy); transform: rotate(45deg);
}
@media (max-width: 640px) {
  .flexoRada .flexo { width: 84px; }
  .dokument .flexoBublina, .flexoBublina { font-size: 16px; padding: 12px 14px; }
}

/* ── UKÁZKOVÉ RECEPTY ──────────────────────────────────────────────────
   Rozcestník na modré, karty receptů světlé s pruhem denní doby nahoře;
   detail receptu: hlavička na modré, suroviny a postup na světlé soupisce. */
.recepty, .recept { padding-block: 44px 88px; }
.rHlava { max-width: 820px; }
.rHlava h1 { font-size: clamp(52px, 7vw, 96px); line-height: 1.04; margin-bottom: 18px; }
.recept h1 { overflow-wrap: break-word; }
.rHlava h1 em, .recept h1 em { font-style: normal; } /* bez barvy — zvýrazněné sousloví v nadpisu je zakázaný reflex (20. 10. 2026) */
.rUvod { font-size: 19px; color: var(--text-tlum); line-height: 1.5; margin: 0 0 18px; max-width: 60ch; }
.rFlexo { margin: 10px 0 28px; }
.rFlexo.konec { margin-top: 48px; }
.rFlexo .flexoBublina { background: var(--krida); color: var(--navy); }
.rFlexo .flexoBublina::after { background: var(--krida); }
.rFlexo .flexoBublina em { color: var(--navy); box-shadow: inset 0 -.45em 0 rgba(242, 183, 5, .6); }
.jenJs { display: none; }
.recepty [hidden], .recept [hidden] { display: none !important; }
.maJs .jenJs { display: flex; }

.rFiltry { flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 34px;
  position: sticky; top: 84px; z-index: 5; padding: 12px 0; background: var(--navy); }
.rFiltryOddel { width: 2px; height: 26px; background: var(--linka); margin: 0 4px; }
.rChip { font: inherit; font-size: 15px; font-weight: 700; color: var(--krida); cursor: pointer;
  padding: 8px 15px; border-radius: 6px; background: var(--navy-2); border: 2px solid var(--linka); transition: transform var(--t-mikro) var(--kriv); }
.rChip:active { transform: translateY(1px); }
.rChip.vyb { background: var(--zlata); border-color: var(--zlata); color: var(--navy); }
.rNic { font-weight: 700; color: var(--text-tlum); }

.rSekce { margin: 0 0 52px; }
.rSekceNadpis { display: flex; align-items: center; gap: 12px; font-size: clamp(34px, 4vw, 48px); margin: 0 0 20px; text-transform: uppercase; }
.rSekceNadpis small { font: 600 15px/1 var(--sans); color: var(--text-tlum); text-transform: none; }
/* Ikona holá, bez barevného čtverečku (zakázaný reflex, 20. 10. 2026) — barvu nese linka nadpisu. */
.rSekceNadpis .rIkona { display: grid; place-items: center; width: 30px; height: 30px; color: var(--l-hrana); }
.rMrizka { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }

.receptKarta { display: flex; flex-direction: column; text-decoration: none; color: var(--navy);
  background: #FFFFFF; border-radius: var(--radius); overflow: hidden;
  border-top: 8px solid var(--l, var(--zlata));
  transition: transform var(--t-rychle) var(--kriv); }
.receptKarta:hover { transform: translateY(-2px); color: var(--navy); }
.receptKarta:focus-visible { outline: 3px solid var(--zlata); outline-offset: 3px; }
.receptKartaTelo { padding: 12px 15px 16px; display: grid; gap: 5px; }
/* Vlajka země původu v pravém horním rohu karty, přes fotku (18. 10. 2026).
   Odznak AI je vlevo dole a Flexo vpravo dole, roh nahoře je volný. Světlý
   podklad, aby vlajka nezmizela na tmavé ani pestré fotce. */
.receptKarta:has(> .rVlajka) { position: relative; }
.rVlajka { position: absolute; top: 8px; right: 8px; font-size: 18px; line-height: 1; padding: 4px 6px;
  background: rgba(255, 255, 255, .88); border-radius: 8px; pointer-events: none; }
.receptKarta h3 { font: 800 19px/1.2 var(--sans); }
.rCisla { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--text-tlum); font-variant-numeric: tabular-nums; }

.receptObrazek { aspect-ratio: 4 / 3; background: var(--l-sv, var(--plocha)); display: grid; place-items: center; color: var(--l-text, var(--text-tlum)); overflow: hidden; }
.receptObrazek img { width: 100%; height: 100%; object-fit: cover; display: block; }
.receptObrazek.prazdny svg { opacity: .55; }
.receptObrazek.velky { border-radius: var(--radius); border: 3px solid var(--l, var(--zlata)); }
.receptObrazek.velky svg { width: 72px; height: 72px; }
.rFoto { margin: 0; }
.rFoto figcaption { margin: 8px 4px 0; font-size: 13px; color: var(--text-tlum); }

.rDrobky { font-size: 14px; font-weight: 700; color: var(--text-tlum); margin: 0 0 20px; }
.rDrobky a { color: var(--zlata); text-decoration: none; }
.rDrobky a:hover { text-decoration: underline; }
.rHlavaReceptu { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 34px; align-items: start; margin-bottom: 30px; }
.recept h1 { font-size: clamp(40px, 5vw, 68px); line-height: 1.04; margin: 0 0 16px; }
.rStitky { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 18px; }
.rStitek { font-size: 14px; font-weight: 700; padding: 5px 11px; border-radius: 4px; background: var(--navy-2); border: 2px solid var(--linka); color: var(--krida); }
.rStitek.dieta { border-color: var(--list); color: var(--list-text); }
.rStitek.kuchyne { border-color: var(--dres-nebe); color: var(--nebe-text); }
.rZiviny { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 0 0 10px; }
.rZiviny div { display: grid; justify-items: center; padding: 12px 4px 10px; border-radius: 6px; background: var(--navy-2); }
.rZiviny div:first-child { background: var(--zlata); color: var(--navy); }
.rZiviny div:first-child small { color: var(--navy); }
.rZiviny b { font: 900 26px/1 var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rZiviny small { font-size: 12px; font-weight: 700; color: var(--text-tlum); }
.rTlum { font-size: 13.5px; color: var(--text-tlum); line-height: 1.5; margin: 6px 0 0; }

.rTeloReceptu { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 40px; align-items: start; margin-top: 10px;
  background: var(--krida); border-radius: var(--radius); padding: clamp(22px, 4vw, 44px); }
.rSloupec h2 { font-size: 36px; margin: 0 0 14px; color: var(--navy); }
.rPorce { align-items: center; gap: 8px; margin: 0 0 14px; font-weight: 700; color: var(--text-tlum); }
.rTeloReceptu .rChip { background: #FFFFFF; color: var(--navy); border-color: var(--linka); }
.rTeloReceptu .rChip.vyb { background: var(--navy); color: var(--zlata); border-color: var(--navy); }
.rPorce .rChip { min-width: 46px; }
.rSuroviny { list-style: none; padding: 0; margin: 0 0 22px; background: #FFFFFF; border: 2px solid var(--linka); border-radius: var(--radius); overflow: hidden; }
.rSuroviny li { display: grid; grid-template-columns: 24px 1fr auto; gap: 10px; align-items: center; padding: 10px 14px; font-weight: 600; }
.rSuroviny li + li { border-top: 2px solid var(--plocha); }
.rSuroviny .rIkona { display: grid; place-items: center; width: 24px; height: 24px; color: var(--text-tlum); }
.rMn { font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rMalyNadpis { font-size: 22px; margin: 0 0 10px; }
.rKoreni { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 22px; }
.rKoreni span { font-size: 14px; font-weight: 700; padding: 5px 11px; border-radius: 4px; background: #FFFFFF; border: 2px solid var(--linka); }
.rRamec { padding: 16px 18px; border-radius: var(--radius); margin: 0 0 22px; background: var(--slunce-sv); }
.rRamec.nebe { background: var(--nebe-sv); }
.rRamec h3 { font-size: 22px; margin: 0 0 6px; }
.rRamec ul { margin: 0; padding-left: 18px; line-height: 1.5; }
.rPostup { list-style: none; counter-reset: krok; padding: 0; margin: 0 0 22px; display: grid; gap: 16px; }
.rPostup li { counter-increment: krok; display: grid; grid-template-columns: 44px 1fr; gap: 14px; font-size: 17px; line-height: 1.55; }
.rPostup li::before { content: counter(krok); font: 900 44px/.85 var(--display); color: var(--navy); }
.rPostup b { font-weight: 800; color: var(--navy); box-shadow: inset 0 -.4em 0 rgba(242, 183, 5, .5); }
.rAlergeny { font-size: 14.5px; color: var(--text-tlum); line-height: 1.5; }
.rDalsi { margin-top: 44px; }
.rDalsi h2 { font-size: clamp(34px, 4vw, 48px); margin: 0 0 18px; }

@media (max-width: 820px) {
  .rHlavaReceptu, .rTeloReceptu { grid-template-columns: 1fr; gap: 22px; }
  .rZiviny { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
  .rZiviny b { font-size: 21px; }
}
@media (max-width: 480px) {
  .rMrizka { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  /* Dlouhá německá složená slova se na 360 px nevejdou — dělit, ne přetékat. */
  .receptKarta h3 { font-size: 16px; overflow-wrap: break-word; }
  :lang(de) .receptKarta h3 { hyphens: auto; }
  :lang(de) .recept h1 { hyphens: auto; }
  .rZiviny { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── PŘEPÍNAČ VZHLEDU ─────────────────────────────────────────────────
   Dva malé dresy v hlavičce: tmavý (modrá) a světlý (křída). Název nese
   bublinka (title) a čtečka; v hlavičce by se text nevešel. */
.dresVolba { display: inline-flex; padding: 3px; gap: 3px; border-radius: 8px; background: var(--navy-3); }
.dresVolba[hidden] { display: none; }
/* Kopie přepínače v menu jen pro telefon, s popisky. */
.dresVolbaMenu { display: none; }
@media (max-width: 640px) {
  .hlavaVpravo > .dresVolba { display: none; }
  .dresVolbaMenu:not([hidden]) { display: flex; margin: 6px 0 0; padding: 4px; border-top: 0; }
  .dresVolbaMenu .dresTl { flex: 1; width: auto; gap: 8px; padding: 0 10px; justify-content: flex-start; }
  .dresTlPopis { font: 800 15px/1 var(--sans); }
  .hlava .navMenuTl { font-size: 16px; height: 38px; padding: 0 10px 0 8px; gap: 5px; letter-spacing: .03em; }
  .hlava .navMenuTl svg { width: 18px; height: 18px; }
  .hlava .hlavaRada { gap: 8px; }
  .hlava .navMenu { margin-right: 0; }
  .hlava .znacka { gap: 6px; }
  .hlava .znackaText { font-size: 24px; }
  .hlava .znackaZnak { width: 22px; height: 22px; }
}
@media (max-width: 380px) {
  /* Nejužší telefony: „Menu strony“ + logo + jazyk se vejdou jen s menším logem. */
  .hlava .znackaText { font-size: 20px; }
  .hlava .znackaZnak { display: none; }
}
.dresTl {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 9px 5px; min-height: 32px; border: 0; border-radius: 6px;
  background: transparent; color: #BAC3DB; cursor: pointer;
  font: 800 16px/1 var(--display); letter-spacing: .06em; text-transform: uppercase;
  transition: background-color var(--t-rychle) var(--kriv), color var(--t-rychle) var(--kriv);
}
.dresTl[aria-pressed="true"] { background: var(--zlata); color: var(--navy); }
.dresTl:hover { color: var(--krida); }
.dresTl[aria-pressed="true"]:hover { color: var(--navy); }
.dresTlZnak {
  width: 20px; height: 20px; flex: none;
  clip-path: polygon(30% 4%, 50% 14%, 70% 4%, 98% 19%, 88% 43%, 76% 38%, 76% 97%, 24% 97%, 24% 38%, 12% 43%, 2% 19%);
}
.dresTlZnak.doma { background: var(--navy-2); box-shadow: inset 0 0 0 2px var(--zlata); }
.dresTlZnak.venku { background: var(--krida); box-shadow: inset 0 0 0 2px var(--navy); }
/* Text jen pro čtečku, vidět je jen dres (Martin: hlavička se nevešla). */
.dresTlText { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ── VENKOVNÍ DRES (data-dres="venku") ────────────────────────────────
   Křídová plocha se síťovinou, bílé karty, modrý inkoust, zlaté detaily.
   Postaveno jako vrstva tokenů nad tmavým dresem. Zlatý TEXT na světlé
   ploše má 1,7 : 1, proto je důraz modrý (navy 14 : 1 na křídě) a zlatá
   jde pod něj jako páska nebo podtržení. Červená je jen barva dresu člena
   (Martin 17. 10. 2026: v logu a odkazech neměla roli). */
:root[data-dres="venku"] {
  --pozadi: var(--krida); --karta: #FFFFFF; --plocha: #E7EAF1; --linka: #CBD2E0;
  --navy-2: #E7EAF1;
  --text: var(--navy); --text-tlum: #46516F;
  --koral-text: var(--navy);
}
:root[data-dres="venku"] a { text-decoration-color: var(--koral-hrana); }
:root[data-dres="venku"] .hmHero, :root[data-dres="venku"] .hmKapTmava, :root[data-dres="venku"] .hlavniVec {
  --navy-2: #1B2F63; --text: var(--krida); --text-tlum: #BAC3DB; --linka: #33467A; --koral-text: var(--zlata);
}
:root[data-dres="venku"] body {
  background-color: var(--krida);
  background-image: radial-gradient(rgba(19, 35, 75, .07) 1.3px, transparent 1.6px);
}
:root[data-dres="venku"] :is(.uvod h1, .uvodPodnadpis, .dresy-clen figcaption, .blok h3, .pribehStitek h2,
  .pribehText, .satnaUvod, .ukazkaZaver p, .rChip, .rStitek, .ukazkaKrok h3, .rSekceNadpis, .rHlava h1, .recept h1) {
  color: var(--navy);
}
:root[data-dres="venku"] :is(.ukazkaZaver h3, .pravidlaDal a, .pribehCitat, .pribehMoment h3, .rDrobky a) { color: var(--navy); }
:root[data-dres="venku"] .pribehCitat { text-decoration: underline .14em var(--zlata); text-underline-offset: .12em; text-decoration-skip-ink: none; }
:root[data-dres="venku"] .pribehMoment { border-top-color: var(--zlata); }
:root[data-dres="venku"] .rDrobky a:hover { text-decoration-color: var(--koral-hrana); }
:root[data-dres="venku"] .pravidlaDal a { border-color: var(--zlata); }
:root[data-dres="venku"] .pravidlaDal a:hover { color: var(--navy); border-color: var(--navy); }
:root[data-dres="venku"] .ukazkaZaver { background: #FFFFFF; border-color: var(--koral-hrana); }
:root[data-dres="venku"] .fakta li { background: var(--plocha); }
/* Jen „chystá se“ (průhledný rámeček) je ve světlém dresu navy; plné tlačítko
   obchodu zůstává křída na navy — s Play venku (27. 10. 2026) by navy písmo na
   navy ploše nešlo přečíst. */
:root[data-dres="venku"] .ukazkaZaver .store.chysta { color: var(--navy); }
:root[data-dres="venku"] .fakta b { color: var(--navy); }
:root[data-dres="venku"] .dresyBublina, :root[data-dres="venku"] .dresyBublina::after,
:root[data-dres="venku"] :is(.satnaStrana, .rFlexo, .partakRada, .jFlexo) .flexoBublina,
:root[data-dres="venku"] :is(.satnaStrana, .rFlexo, .partakRada, .jFlexo) .flexoBublina::after { background: #FFFFFF; }
/* Bublina jídelníčku stojí přímo na křídě — bez obrysu by zmizela (revize 23. 10. 2026). */
:root[data-dres="venku"] .jFlexo .flexoBublina { box-shadow: 0 0 0 2px var(--linka); }
:root[data-dres="venku"] .jFlexo .flexoBublina::after { box-shadow: 2px -2px 0 0 var(--linka); }
:root[data-dres="venku"] .dresyBublina { box-shadow: 0 0 0 2px var(--linka); }
:root[data-dres="venku"] .dresyBublina em { box-shadow: inset 0 -.45em 0 rgba(242, 183, 5, .55); }
:root[data-dres="venku"] .dokument, :root[data-dres="venku"] .rTeloReceptu { background: #FFFFFF; box-shadow: 0 0 0 2px var(--linka); }
:root[data-dres="venku"] .receptKarta { box-shadow: 0 0 0 2px var(--linka); }
:root[data-dres="venku"] .rFiltry { background: var(--krida); }
:root[data-dres="venku"] .rChip.vyb { background: var(--navy); border-color: var(--navy); color: var(--zlata); }
:root[data-dres="venku"] .rZiviny div:not(:first-child) b { color: var(--navy); }
:root[data-dres="venku"] .ukazkaKrok::before { color: var(--navy); }
:root[data-dres="venku"] a:focus-visible, :root[data-dres="venku"] button:focus-visible, :root[data-dres="venku"] summary:focus-visible { outline-color: var(--navy); }
:root[data-dres="venku"] ::selection { background: var(--zlata); color: var(--navy); }
:root[data-dres="venku"] .soupiska { background: var(--plocha); }
/* Hlavička a patička světlého dresu jsou taky světlé (Martin 17. 10. 2026):
   bílá lišta se zlatým pruhem, modrý text. FLEX v logu je modrý na zlaté
   pásce — zlaté písmo na bílé by mělo 1,7 : 1. */
:root[data-dres="venku"] .hlava { background: #FFFFFF; }
:root[data-dres="venku"] .znacka, :root[data-dres="venku"] .znacka:hover { color: var(--navy); }
:root[data-dres="venku"] .znackaText em { color: var(--navy); background: var(--zlata); padding: .06em .08em 0; border-radius: 3px; }
:root[data-dres="venku"] .dresVolba { background: var(--plocha); }
:root[data-dres="venku"] .dresTl { color: var(--text-tlum); }
:root[data-dres="venku"] .dresTlZnak.doma { background: var(--navy); }
:root[data-dres="venku"] .jazykChip { background: #FFFFFF; border-color: var(--linka); color: var(--navy); }
:root[data-dres="venku"] .jazykyMenu { background: #FFFFFF; border-color: var(--linka); box-shadow: 0 18px 40px rgba(19, 35, 75, .18); }
:root[data-dres="venku"] .jazykPolozka:hover { background: var(--plocha); color: var(--navy); }
:root[data-dres="venku"] .jazykPolozka[aria-current="true"] { color: var(--navy); text-decoration: underline 3px var(--zlata); text-underline-offset: 5px; }
:root[data-dres="venku"] .pata { background: #FFFFFF; color: var(--navy); }
:root[data-dres="venku"] .pataClaim { color: var(--navy); }
:root[data-dres="venku"] .pataRada h3 { color: var(--text-tlum); }
:root[data-dres="venku"] .pataRada a { color: var(--navy); }
:root[data-dres="venku"] .pataRada a:hover { color: var(--navy); text-decoration-color: var(--zlata); }
:root[data-dres="venku"] .pribeh { background: var(--plocha); }

/* ── POHYB ────────────────────────────────────────────────────────────
   Jedna animace na místo, dojezd `--kriv`, délky z tokenů `--t-*`. Prvky jsou vidět i bez ní:
   `pohyb.js` označí `ceka` jen to, co je při načtení pod obrazovkou, a
   `videt` přidá kousek předtím, než to dojede — co už člověk čte, nikdy
   nezmizí a neproblikne. Při omezeném pohybu nehraje nic. Na úvodu: hrnec se naleje díl po dílu, z něj se naplní dresy,
   Flexo vyskočí s bublinou a pak se jen občas zakývá. */
@media (prefers-reduced-motion: no-preference) {

  /* Úvod — hrnec se naleje zleva doprava, bublina vyskočí po dresech. */
  /* Úvod stojí do ~1,8 s (pohyb 23. 10. 2026, balík 9): dřív Flexo s bublinou
     přišli skoro ve 3 s. Stejná sekvence, kratší čekání — délky pohybů zůstaly. */
  .hrnecDil { animation: nalij .7s var(--kriv) both; }
  .hrnecDil:nth-child(1) { animation-delay: .3s; }
  .hrnecDil:nth-child(2) { animation-delay: .45s; }
  .hrnecDil:nth-child(3) { animation-delay: .6s; }
  .dresyBublina { transform-origin: 100% 100%; animation: bublina .45s var(--kriv) 1.45s both; }
  .flexoTrener { transform-origin: 50% 92%; animation: flexoNaskok .6s var(--kriv) 1.2s both, flexoKyv 7s ease-in-out 3s infinite; }
  .uvod h1 { animation: vyjed .7s var(--kriv) .05s both; }
  .uvodPodnadpis, .uvodAkce { animation: vyjed .7s var(--kriv) .2s both; }

  /* Najetí myší na dres = zhoupnutí (i na úvodu, v pravidlech, v šatně). */
  .dresy-clen:hover, .hrac:hover .hracDres {
    animation: dresHoupZnovu .9s var(--kriv) both;
  }
  .hracDres { transform-origin: 50% 0; }

  /* Při rolování: dresy se zhoupnou postupně, pruhy soupisky dorostou. */
  .hrac.ceka.videt .hracDres {
    animation: dresHoup 1.3s var(--kriv) calc(var(--i, 0) * 90ms) both;
  }
  .soupiskaList.ceka.videt .sPruh { transform-origin: 0 50%; animation: roste .8s var(--kriv) both; }
  .soupiskaList.ceka.videt tr:nth-child(2) .sPruh { animation-delay: .12s; }
  .soupiskaList.ceka.videt tr:nth-child(3) .sPruh { animation-delay: .24s; }
  .soupiskaList.ceka.videt td b { animation: vyjed .5s var(--kriv) .3s both; }
  /* Jídelníček: skóre dne se naplní zleva (jediný pohyb stránky; karty jídel stojí). */
  .jSkoreDne.ceka.videt .jPruh span { transform-origin: 0 50%; animation: roste .5s var(--kriv) both; }
  .jSkoreDne.ceka.videt .jSkore:nth-child(2) .jPruh span { animation-delay: .08s; }
  .jSkoreDne.ceka.videt .jSkore:nth-child(3) .jPruh span { animation-delay: .16s; }
  .vypni.ceka.videt h2 { animation: vyjed .8s var(--kriv) both; }
  .vypni.ceka.videt p { animation: vyjed .8s var(--kriv) .15s both; }
  .soupiska .videt .partak, .partakRada .partak { transform-origin: 50% 92%; }
  .pribehStitek.ceka.videt .flexo { transform-origin: 50% 92%; animation: flexoNaskok .7s var(--kriv) .2s both; }
  .flexoPata { transform-origin: 50% 92%; }
  .pata:hover .flexoPata { animation: flexoKyv 1.4s ease-in-out 1; }

  .tlacitko:active, .navMenuTl:active { transform: translateY(1px) scale(.98); }
}
/* ── POHYB, DRUHÉ KOLO (17. 10. 2026) ────────────────────────────────── */

/* Pára nad hrncem: tři obláčky stoupají a rozplynou se, pomalu dokola. */
.dresyScena { --para-top: 0; }
.para { position: relative; height: 0; margin: 96px 22% 0 2%; }
.para + .hrnec, .hrnecJidlo + .hrnec { margin-top: 0; }
/* Jídlo kouká z hrnce: SVG nad okrajem, spodní půlku schová přední stěna. */
.hrnecJidlo { display: block; position: relative; z-index: 0; width: auto; height: auto;
  margin: -10px 24% -26px 5%; overflow: visible; }
.hrnec { z-index: 1; }
@media (max-width: 1039px) { .para { margin-top: 30px; } .hrnecJidlo { margin-bottom: -20px; } }
.para span {
  position: absolute; bottom: -18px; width: 46px; height: 46px; border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 245, 241, .75), rgba(244, 245, 241, 0) 70%); opacity: 0;
}
.para span:nth-child(1) { left: 22%; } .para span:nth-child(2) { left: 48%; } .para span:nth-child(3) { left: 72%; }
:root[data-dres="venku"] .para span { background: radial-gradient(circle, rgba(19, 35, 75, .22), rgba(19, 35, 75, 0) 70%); }

/* Propojení scény úvodu: najetí na dres zvýrazní jeho díl v hrnci a naopak. */
.hrnecDil, .dresy-clen { transition: opacity var(--t-rychle) var(--kriv), filter var(--t-rychle) var(--kriv); }
.dresyScena:has(.dresy-clen:hover) .hrnecDil,
.dresyScena:has(.hrnecDil:hover) .dresy-clen { opacity: .45; }
.dresyScena:has(.dresy-clen:nth-child(1):hover) .hrnecDil:nth-child(1),
.dresyScena:has(.dresy-clen:nth-child(2):hover) .hrnecDil:nth-child(2),
.dresyScena:has(.dresy-clen:nth-child(3):hover) .hrnecDil:nth-child(3),
.dresyScena:has(.hrnecDil:nth-child(1):hover) .dresy-clen:nth-child(1),
.dresyScena:has(.hrnecDil:nth-child(2):hover) .dresy-clen:nth-child(2),
.dresyScena:has(.hrnecDil:nth-child(3):hover) .dresy-clen:nth-child(3) { opacity: 1; filter: drop-shadow(0 0 14px rgba(242, 183, 5, .55)); }
/* Soupiska: najetý řádek vystoupí, ostatní ustoupí. */
.soupiskaTab tbody tr { transition: opacity var(--t-rychle) var(--kriv), background-color var(--t-rychle) var(--kriv); }
.soupiskaTab tbody:has(tr:hover) tr { opacity: .5; }
.soupiskaTab tbody tr:hover { opacity: 1; background: rgba(242, 183, 5, .14); }

/* FAQ se rozbalí plynule (kde prohlížeč umí animovat výšku obsahu). */
/* `::details-content` se do seznamu selektorů pravidla omezeného pohybu dát nedá
   (neznámý pseudoprvek by ve starším prohlížeči zahodil celé pravidlo), proto
   je celé plynulé rozbalení jen pro ty, kdo pohyb nevypnuli (CR 23. 10., W2). */
@media (prefers-reduced-motion: no-preference) {
  @supports (interpolate-size: allow-keywords) {
    :root { interpolate-size: allow-keywords; }
    .faqPolozka::details-content { block-size: 0; overflow: hidden; transition: block-size var(--t-bezne) var(--kriv), content-visibility var(--t-bezne) allow-discrete; }
    .faqPolozka[open]::details-content { block-size: auto; }
  }
}
.faqPolozka summary::after { transition: transform var(--t-bezne) var(--kriv); }
.faqPolozka[open] summary::after { transform: rotate(180deg); }

@media (prefers-reduced-motion: no-preference) {
  .para span { animation: para 4.2s ease-out infinite; }
  /* Jídlo v hrnci jemně probublává, každý kus jindy. */
  .jidloKus { transform-box: fill-box; transform-origin: 50% 100%; animation: bublani 3.6s ease-in-out infinite; }
  .jidloKus:nth-child(2) { animation-delay: .9s; } .jidloKus:nth-child(3) { animation-delay: 1.7s; }
  .jidloKus:nth-child(4) { animation-delay: .4s; } .jidloKus:nth-child(5) { animation-delay: 2.3s; }
  .para span:nth-child(2) { animation-delay: 1.4s; } .para span:nth-child(3) { animation-delay: 2.8s; }
  /* Všichni Flexové občas mrknou — každý v jiný okamžik. */
  .flexo .flexoVicko { animation: mrkSmycka 7s linear infinite; }
  .flexoPata .flexoVicko { animation-delay: 2.3s; } .rFlexo .flexoVicko, .flexoRada .flexoVicko { animation-delay: 4.1s; }
  /* Jazykové menu vyjede. */
  .jazykyRozbal[open] .jazykyMenu { animation: vyjedMenu var(--t-bezne) var(--kriv); transform-origin: 100% 0; }
  /* Parťákova fajfka v telefonu se nakreslí, když dojede na obrazovku. */
  .partakFajfka { stroke-dasharray: 1; }
  .ceka.videt .partakFajfka, .partakRada.videt .partakFajfka { animation: nakresli .6s var(--kriv) .35s both; }

  /* Přechody mezi stránkami: hlavička stojí, obsah plynule přejede. */
  @view-transition { navigation: auto; }
  .hlava { view-transition-name: hlava; }
  ::view-transition-old(root) { animation: vtOdjed var(--t-rychle) var(--kriv) both; }
  ::view-transition-new(root) { animation: vtPrijed var(--t-bezne) var(--kriv) both; }
  /* Přepnutí dresu je prolnutí, ne posun stránky. */
  .prepinaDres::view-transition-old(root) { animation: vtZmiz var(--t-stredni) var(--kriv) both; }
  .prepinaDres::view-transition-new(root) { animation: vtObjev var(--t-stredni) var(--kriv) both; }
}
@keyframes bublani { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4px) rotate(-1.5deg); } }
@keyframes para { 0% { opacity: 0; transform: translateY(0) scale(.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-70px) scale(1.5); } }
@keyframes mrkSmycka { 0%, 95%, 100% { opacity: 0; } 96%, 98% { opacity: 1; } }
@keyframes vyjedMenu { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes nakresli { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes vtOdjed { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vtPrijed { from { opacity: 0; transform: translateY(14px); } }
@keyframes vtZmiz { to { opacity: 0; } }
@keyframes vtObjev { from { opacity: 0; } }

@keyframes nalij { from { transform: translateY(105%); } to { transform: none; } }
@keyframes bublina { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes flexoNaskok { 0% { opacity: 0; transform: translateY(24px) scale(.9); } 60% { opacity: 1; transform: translateY(-6px); } 100% { transform: none; } }
/* Dlouhá pauza a krátké kývnutí — Flexo žije, ale neruší. */
@keyframes flexoKyv { 0%, 84%, 100% { transform: none; } 88% { transform: rotate(-6deg); } 92% { transform: rotate(4deg); } 96% { transform: rotate(-2deg); } }
@keyframes dresHoupZnovu { 0% { transform: rotate(0); } 25% { transform: rotate(-6deg); } 55% { transform: rotate(4deg); } 80% { transform: rotate(-1.5deg); } 100% { transform: rotate(0); } }
@keyframes roste { from { transform: scaleX(0); } to { transform: none; } }
@keyframes vyjed { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* ── TISK ─────────────────────────────────────────────────────────── */

@media print {
  .rFiltry, .rPorce, .rDalsi, .rFlexo, .receptObrazek.prazdny { display: none !important; }
  .hlava, .pata, .storeRada, .dresyScena { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .dokument, .rTeloReceptu { margin: 0; padding: 0; background: #fff; }
  .dokument p, .dokument li { color: #000; max-width: none; }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* ── MOBIL ────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  body { font-size: 16px; }
  .pas { padding: 0 16px; }
  .hlava .znackaText { font-size: 28px; }
  .hlava .znackaZnak { width: 26px; height: 26px; }
  .hlavaRada { min-height: 58px; gap: 12px; }
  .hlava .navMenu { margin-right: -2px; }
  .pata { border-top-width: 6px; }
  .hlava { border-bottom-width: 6px; }
  .hlavaVpravo { gap: 8px; }
  /* Výběr jazyka na telefonu jen s vlajkou; název zůstává pro čtečky. */
  .jazykNazev { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* Lišta filtrů se lepí těsně pod hlavičku (na telefonu 64 px) a přes okraje
     stránky, ať mezi ní a hlavičkou ani po stranách neprosvítají karty receptů. */
  .rFiltry { top: 64px; margin-inline: -16px; padding-inline: 16px; }

  /* Na telefonu musí být v první obrazovce (390 × 844) nadpis, hrnec
     s dresy i tlačítko: tlačítko jde hned za scénu, věta pod něj. */
  .uvodVnitrek { padding-block: 20px 56px; gap: 22px; }
  .uvod h1 { margin-bottom: 0; font-size: clamp(42px, 12vw, 50px); }
  :lang(en) .uvod h1, :lang(de) .uvod h1 { font-size: clamp(38px, 10.5vw, 46px); }
  .uvodAkce { order: 3; } .uvodPodnadpis { order: 4; margin-bottom: 0; }
  .para { margin-top: 14px; }
  .dresyBublina { margin-top: 12px; font-size: 16px; padding: 10px 14px; }
  .flexoTrener { width: 20%; }
  .dresyScena { margin-bottom: 14px; }
  .uvodAkce .tlacitko { width: 100%; }
  .dresy-clen figcaption { font-size: 16px; }
  .hrnec { height: 110px; margin-right: 12%; }
  .soupiskaVnitrek { padding-block: 56px 24px; }
  .pravidla { padding-block: 16px 56px; }
  .ukazkaSekce, .pribehVnitrek { padding-block: 56px; }
  .vypniVnitrek { padding-block: 56px; }
  .blok h3 { font-size: 25px; }
  /* Textová stránka je `pas dokument`: soupiska přes celou šířku, text 20 px
     od kraje (mobilní `.pas` jinak přebije vnitřní odsazení dokumentu). */
  .dokument { margin: 0; padding: 32px 20px 48px; border-radius: 0; }

  .storeRada { flex-direction: column; align-items: stretch; }
  .store { justify-content: center; }
  .ukazkaRam { border-width: 8px; border-radius: 32px; }
  .ukazkaOkno { border-radius: 24px; }

  .dokument .hmCisla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .udaje th, .udaje td { display: block; width: auto; padding: 0; border: 0; }
  .udaje th { padding-top: 12px; }
  .udaje td { padding-bottom: 12px; border-bottom: 2px solid var(--plocha); }
}

/* ── UKÁZKOVÝ JÍDELNÍČEK NA TÝDEN (SEO audit 23. 10. 2026) ───────────────
   „Rozpis hracích dnů“: řádek = den, sestava dne = jídla s pruhem denní doby
   (stejné tokeny jako `.hmChod-*`), vpravo skóre dne proti cíli v barvě dresu
   člena. Smlouva směru `.impeccable/surfaces/sablony-jidelnicek-html.md`. */
.jidelnicek { padding-bottom: 40px; }
.jHlava { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); gap: 18px 48px; align-items: end; margin-bottom: 18px; }
.jHlava h1 { font-size: clamp(44px, 5vw, 74px); line-height: 1.02; margin-bottom: 10px; text-wrap: balance; }
.jUvod { font-size: 18px; line-height: 1.45; max-width: 44em; margin: 0 0 6px; }
.jTlum { font-size: 14px; color: var(--text-tlum); margin: 0 0 6px; max-width: 68ch; }
.jFakta { display: flex; flex-wrap: wrap; gap: 8px 10px; margin-top: 12px; }
.jSipka { width: 16px; height: 16px; vertical-align: -2px; color: var(--text); margin-right: 6px; }
.jFakt { background: var(--plocha); border-radius: 3px; padding: 7px 11px 6px; font-size: 14px; color: var(--text-tlum); }
.jFakt b { font: 900 20px/1 var(--display); color: var(--text); margin-right: 6px; }
.jFakt a { color: inherit; }
.jFlexo { margin: 0; }
.jFlexo .flexoBublina { background: var(--krida); color: var(--navy); }
.jFlexo .flexoBublina::after { background: var(--krida); }
.jFlexo .flexoBublina em { color: var(--navy); box-shadow: inset 0 -.45em 0 rgba(242, 183, 5, .6); }
.jFlexo.konec { margin: 44px 0 0; }
.jVh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.jZahlavi, .jDen { display: grid; grid-template-columns: 92px minmax(0, 1fr) 190px; gap: 16px; }
.jZahlavi { font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-tlum);
            border-bottom: 2px solid var(--text); padding-bottom: 6px; }
.jZahlavi span:last-child { text-align: right; }
.jRozpis { list-style: none; padding: 0; margin: 0 0 14px; }
.jDen { align-items: center; padding: 10px 0; border-bottom: 2px solid var(--linka); }
.jNazevDne { margin: 0; font: 900 52px/1 var(--display); text-transform: uppercase; }
.jNazevDne abbr { text-decoration: none; }
.jDlouhy { display: none; }
.jSestava { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.jJidlo { background: var(--karta); border: 2px solid var(--linka); border-top: 6px solid var(--chod); border-radius: 0 0 6px 6px;
          padding: 6px 9px 7px; font-size: 14px; line-height: 1.3; font-weight: 700; }
.jKcal { display: block; margin-top: 3px; font-size: 12px; font-weight: 700; color: var(--text-tlum); font-variant-numeric: tabular-nums; }
/* Nebeská barva přídavku jako tečka denní doby (ne boční pruh — craft floor). */
.jNavic { margin: 8px 0 0; font-size: 13px; font-weight: 600; color: var(--text-tlum); }
.jNavic span::before { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--nebe); margin-right: 6px; vertical-align: 0; }
.jNavic a { color: var(--text); text-underline-offset: 3px; }
.jJidlo small { display: block; font-size: 12px; font-weight: 700; color: var(--text-tlum); margin-bottom: 2px; }
.jJidlo a { color: inherit; text-decoration: underline; text-decoration-color: var(--linka); text-underline-offset: 3px; }
.jJidlo a:hover { text-decoration-color: currentColor; }
.chod-snidane  { --chod: var(--slunce); }
.chod-svacina  { --chod: var(--list); }
.chod-obed     { --chod: var(--dres-cervena); }
.chod-vecere   { --chod: var(--svestka); }
.chod-pridavek { --chod: var(--nebe); }
.jSkoreDne { display: grid; gap: 8px; text-align: right; }
.jSkore b { font: 900 40px/1 var(--display); font-variant-numeric: tabular-nums; }
.jSkoreDne .jSkore + .jSkore b, .jSkoreDne:has(.jKdo) b { font-size: 26px; }
.jCil { font-size: 14px; color: var(--text-tlum); font-weight: 700; }
.jKdo { font-size: 13px; font-weight: 800; color: var(--text-tlum); margin-right: 8px; }
/* Dráha je tečkovaná linka, ne plocha — plný křídový pruh (Eva) se s prázdnou dráhou nesmí plést. */
.jPruh { display: block; position: relative; height: 8px; margin-top: 5px; }
.jPruh::before { content: ''; position: absolute; left: 0; right: 0; top: 3px; border-top: 2px dotted var(--linka); }
.jPruh span { display: block; position: relative; height: 100%; border-radius: 2px; }
/* Ryska cíle: dráha jde do 120 % (`STROP_DRAHY`), cíl je na 1/1,2 = 83,3 %. */
.jPruh::after { content: ''; position: absolute; left: 83.33%; top: -3px; bottom: -3px; width: 2px; background: var(--text); z-index: 1; }
/* Křídový dres na světlé ploše by zmizel — obrys jako u pruhů soupisky. */
.jPruh .dil-krida { box-shadow: inset 0 0 0 2px var(--text); }

.jNakup { margin-top: 56px; }
.jNakup h2, .jDalsi h2 { font-size: clamp(34px, 4vw, 52px); margin-bottom: 8px; }
.jNakupMrizka { columns: 3 260px; column-gap: 32px; margin-top: 18px; }
.jKategorie { break-inside: avoid; margin-bottom: 22px; }
.jKategorie h3 { font: 900 22px/1.1 var(--display); text-transform: uppercase; border-bottom: 2px solid var(--linka); padding-bottom: 4px; margin: 0 0 4px; }
.jKategorie ul { list-style: none; padding: 0; margin: 0; }
.jKategorie li { padding: 5px 0; font-size: 15px; border-bottom: 1px solid var(--linka); }
.jKategorie label { display: grid; grid-template-columns: 20px minmax(8em, 1fr) minmax(0, max-content); gap: 10px; align-items: baseline; cursor: pointer; }
.jKategorie input { width: 18px; height: 18px; margin: 0; accent-color: var(--zlata); align-self: center; }
.jNm small { display: block; font-size: 12.5px; color: var(--text-tlum); line-height: 1.35; }
.jMn { color: var(--text-tlum); text-align: right; font-variant-numeric: tabular-nums; }
.jKategorie label:has(input:checked) :is(.jNm, .jMn) { text-decoration: line-through; color: var(--text-tlum); }
.jDalsi { margin-top: 56px; }
.jOdkazy { list-style: none; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.jOdkazy .hlavni { grid-column: span 2; }
.jOdkazy .hlavni a { border-color: var(--zlata); border-top-width: 8px; }
.jOdkazy .hlavni b { font-size: 34px; }
.jPruhRecepty { margin: 0 0 34px; }
.jPruhRecepty h2 { font-size: clamp(28px, 3vw, 40px); }
@media (max-width: 560px) { .jOdkazy .hlavni { grid-column: auto; } }
.jOdkazy a { display: block; background: var(--karta); border: 2px solid var(--linka); border-radius: 10px; padding: 16px 18px; color: inherit; text-decoration: none; }
.jOdkazy a:hover { border-color: var(--zlata); }
.jOdkazy b { display: block; font: 900 26px/1.05 var(--display); text-transform: uppercase; }
.jOdkazy span { font-size: 14px; color: var(--text-tlum); }

@media (max-width: 860px) {
  .jHlava { grid-template-columns: 1fr; }
  .jZahlavi { display: none; }
  .jDen { grid-template-columns: 1fr auto; gap: 10px 16px; }
  .jNazevDne { font-size: 30px; }
  .jNazevDne abbr { display: none; }
  .jDlouhy { display: inline; }
  .jSestavaObal { grid-column: 1 / -1; order: 3; }
  .jSestava { grid-template-columns: 1fr; }
  .jSkore b { font-size: 28px; }
}

/* Omezený pohyb (23. 10. 2026): nic se nehýbe, jako v appce. Každý prvek má
   výchozí viditelný stav, takže bez animace je všechno hned na místě. */
@media (prefers-reduced-motion: reduce) { *, ::before, ::after { animation: none !important; transition: none !important; } }


/* ── PLOVOUCÍ PÁSKA „APPKA ZDARMA“ S FLEXEM (Martin 27. 10. 2026) ──────────
   Vpravo dole na každé stránce, jen když appka v obchodě je (`build.blok_plovouci`).
   Flexo stojí na pásce; páska je nažehlená zlatá s navy písmem jako hlavní akce,
   schválně menší než tlačítka v obsahu — má být po ruce, ne křičet. `schovat`
   řídí `statika/plovouci.js` (úvod, živá ukázka); bez JS stojí vždy. */
.plovouci { position: fixed; right: 14px; bottom: 14px; z-index: 30; display: flex; flex-direction: column; align-items: flex-end;
  pointer-events: none; transition: transform var(--t-bezne) var(--kriv), opacity var(--t-bezne) var(--kriv); }
.plovouci.schovat { transform: translateY(calc(100% + 20px)); opacity: 0; }
.plovouciFlexo { display: block; height: 36px; overflow: hidden; margin: 0 10px -1px 0; }   /* jen hlava a hruď, vařečka zůstává „za páskou“ */
.flexoPlovouci { width: 56px; display: block; transform: scaleX(-1); }
.plovouciPaska { pointer-events: auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 12px;
  border-radius: 6px; background: var(--zlata); color: var(--navy); border: 2px solid var(--navy-3); text-decoration: none;
  font-family: var(--display); font-weight: 900; font-size: 18px; letter-spacing: .05em; text-transform: uppercase; line-height: 1;
  transition: background var(--t-rychle) var(--kriv), transform var(--t-rychle) var(--kriv); }
.plovouciPaska svg { width: 18px; height: 18px; flex: none; }
.plovouciPaska:hover, .plovouciPaska:focus-visible { background: #FFC81F; transform: translateY(-2px); }
.plovouciPaska:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
.plovouciPaska:active { transform: translateY(1px); }
@media (min-width: 900px) { .plovouci { right: 24px; bottom: 24px; } }
@media (max-width: 599px) { .plovouciFlexo { height: 30px; margin-right: 8px; } .flexoPlovouci { width: 46px; } .plovouciPaska { min-height: 40px; font-size: 16px; padding: 0 12px 0 10px; } }
@media (prefers-reduced-motion: reduce) { .plovouci, .plovouciPaska, .sOdkaz b { transition: none; } }