/* =========================================================================
   Egoia — veřejný web
   Tmavý editorial styl: papír je světlý, obrazovka tmavá, aby se to nepletlo.
   Světlý režim je od 28. 8. 2026 alternativa, ne rovnocenná varianta — tmavá
   zůstává tím, jak produkt vypadá, když si člověk nic nezvolí.
   ========================================================================= */

/* Tvar, písmo a časování jsou pro obě schémata stejné — mění se jen barvy.
   Proto jsou tady, mimo blok schématu: kdyby byly uvnitř, musely by se
   v každém režimu opakovat a při první úpravě by se rozešly. */
:root{
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --sans: -apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
  --mono: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --wrap: 940px;

  /* Zaoblení má tři stupně, ať se to nedrolí po jednotlivých pravidlech:
     --r drobné ovládací prvky, --r-card plochy a panely, --r-pill tlačítka.
     Karty sad (.deck) mají vlastní 8 px a do téhle škály nespadají. */
  --r: 10px;
  --r-card: 20px;
  --r-pill: 999px;

  --ease-soft: cubic-bezier(.34,1.3,.64,1);
  --playful-blue: #7fa3c9;
}

/* ---------- tmavé schéma (výchozí) ---------- */
:root,
[data-theme="dark"]{
  color-scheme: dark;

  --bg:        #0f0f13;
  --bg-soft:   #15151b;
  --bg-card:   #17171e;
  --line:      #26262f;
  --line-soft: #1e1e26;

  /* Plochy kapitol. Do 8. 9. 2026 se všech devět kapitol malovalo dvěma tóny
     (--bg / --bg-soft) a lišila je jen dekorace u okraje — ta na mobilu odpadá,
     takže z celé stránky zbyl jeden slitý pás. Tyhle tři tóny jsou od sebe
     natolik, aby se poznaly bez linky, a pořád v jedné teplé rodině. */
  --bg-warm:   #191319;   /* nádech do červena — kapitoly „lidské“ */
  --bg-cool:   #12161b;   /* nádech do modra — kapitoly „pozorovací“ */
  --bg-deep:   #06060a;   /* tmavší než plocha — předěl a klid */

  --tx:   #ece9df;
  --tx-2: #a49e90;
  --tx-3: #8b857b;
  /* odstín odstavcového textu — dřív napsaný napřímo jako #cec9bc */
  --tx-body: #cec9bc;

  --acc:      #c9a24a;
  --acc-soft: #dab558;
  --acc-2:    #e08a4f;   /* oranžová pro nadočka a drobné akcenty */
  --acc-2-dim:#8a5836;
  --ok:       #7fae8e;
  --warn:     #c98a72;

  /* text na zlaté ploše (tlačítko, skip-link) — ve světlém režimu se nemění
     na bílou, zlatá je světlá barva a bílý text by na ní zmizel */
  --on-acc: #15130c;

  /* zlatá v průsvitných výplních a rámečcích; jako složky, aby šlo psát
     rgb(var(--acc-rgb) / .13) místo natvrdo rozepsané rgba() */
  --acc-rgb: 201 162 74;
  --acc-2-rgb: 224 138 79;
  /* podklad lišty a překryv videa — v obou schématech barva plochy stránky */
  --bg-rgb: 15 15 19;

  /* jediný povolený stín, jen na hover — ne na klidový stav */
  --lift: 0 6px 20px rgba(0,0,0,.35);
}

/* ---------- světlé schéma ----------
   Není to tmavé převrácené. Plocha je teplý papír, ne bílá: čistě bílé pozadí
   pod patkovými nadpisy a zlatou vypadá jako nedodělaný wireframe, kdežto
   produkt je karton. Zlatá musela ztmavnout (#c9a24a má na světlém podkladu
   kontrast 2,1:1), oranžová taky — obě si drží roli, jen jiný odstín. */
[data-theme="light"]{
  color-scheme: light;

  --bg:        #f7f4ec;
  --bg-soft:   #f1ede2;
  --bg-card:   #fbf9f3;
  --line:      #ddd6c5;
  --line-soft: #e8e2d5;

  /* Papírové tóny, ne barvy: pořád je to karton, jen jiná dávka. Rozdíl proti
     --bg je tu záměrně větší než u tmavého schématu — na světlém podkladu se
     malý rozdíl v jasu ztratí dřív, hlavně na mobilu v denním světle. */
  --bg-warm:   #faece1;   /* teplejší, do okrova */
  --bg-cool:   #eceef0;   /* chladnější, do šeda */
  --bg-deep:   #ebe4d4;   /* sytější papír — předěl a klid */

  --tx:   #1c1b18;
  --tx-2: #57534a;
  --tx-3: #6e685c;
  --tx-body: #3a3830;

  --acc:      #8a6a1c;
  --acc-soft: #6f5414;
  /* Ztmaveno 8. 9. 2026 z #a4551f: na nejtmavší z nových ploch (--bg-deep)
     mělo nadočko 4,25:1, tedy pod AA. Role se nemění, jen odstín. */
  --acc-2:    #9b4d1a;
  --acc-2-dim:#c08a5c;
  --ok:       #3f6b4e;
  --warn:     #9a4a2c;

  --on-acc: #fdfbf4;

  --acc-rgb: 138 106 28;
  --acc-2-rgb: 155 77 26;
  --bg-rgb: 247 244 236;

  --lift: 0 6px 20px rgba(60,50,25,.14);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px;-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--tx);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* jemné zrno, aby plocha nebyla plochá.
   Zrno je světlý šum: na tmavé ploše přisvětluje, na světlé by ji vybělil do
   mléčna. Ve světlém režimu se proto překlápí na násobení, aby stejná textura
   naopak tónovala — a slabší, papír je jemnější než tma. */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:1;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="light"] body::before{opacity:.05;mix-blend-mode:multiply}
main,header,footer{position:relative;z-index:2}

a{color:var(--tx);text-decoration:none}
a:hover{color:var(--acc)}
img{max-width:100%;display:block}

/* Řez 600, ne 400 (8. 9. 2026). Patková antikva má v regularu tenké příčné
   tahy — na 33 px vypadal nadpis mdle a světle, přestože měl nejtmavší barvu,
   jakou stránka má (15,67:1). Problém nebyl kontrast, ale hustota: nadpis
   v regularu měl na dálku podobnou váhu jako odstavec pod ním, takže se
   od textu neodlepil.

   PROČ ROVNOU 600 a ne 500: Iowan Old Style řez 500 NEMÁ. Změřeno přes šířku
   textu na canvasu — 400 a 500 vyjdou na pixel stejně, tedy 500 se mapuje zpět
   na regular a nezmění vůbec nic. Rodina má jen dva řezy, regular a bold, takže
   volba je 400, nebo 600. Kdyby se měnilo písmo, tohle přeměř znovu:
   `c.font='500 40px …'; c.measureText(…).width` proti témuž ve 400. */
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;letter-spacing:-.012em;margin:0;color:var(--tx)}
h1{font-size:clamp(34px,5.4vw,56px);line-height:1.08;letter-spacing:-.022em}
/* O dva stupně větší než dřív (23→26 min, 33→37 max). Nadpis kapitoly musí
   být znát dřív, než se začne číst — dosavadní 33 px bylo v jednom sloupci
   s 18px perexem málo. */
h2{font-size:clamp(26px,4vw,37px);line-height:1.18;margin-bottom:16px}
h3{font-size:18px;line-height:1.35;margin-bottom:6px}
p{margin:0 0 16px;color:var(--tx-body)}
p:last-child{margin-bottom:0}
strong,b{font-weight:600;color:var(--tx)}
hr{border:none;border-top:1px solid var(--line);margin:40px 0}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.wrap-narrow{max-width:700px;margin:0 auto;padding:0 24px}
section{padding:84px 0;border-bottom:1px solid var(--line-soft)}
section.tight{padding:56px 0}
section:last-of-type{border-bottom:none}

/* Řez 600, ne 700, a menší odstup písmen (8. 9. 2026). Nadočko v 700 s .2em
   rozpalem bylo na stránce vizuálně těžší než patkový nadpis pod ním — barevné,
   verzálkové a rozpálené text vždycky vynese. Hierarchie se tím obracela:
   oko šlo nejdřív na nadočko a teprve pak na nadpis, který je to podstatné.
   Nadočko má nadpis uvést, ne s ním soupeřit. */
.kicker{display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--acc-2);margin-bottom:14px}
.kicker::before{content:"";width:18px;height:2px;background:var(--acc-2);border-radius:2px;flex:0 0 auto}
.lede{font-size:clamp(15.5px,2vw,18px);color:var(--tx-2);max-width:600px}
.caption{font-size:13px;color:var(--tx-3);line-height:1.6}
.center{text-align:center}
.mt-s{margin-top:14px}.mt-m{margin-top:26px}.mt-l{margin-top:44px}

/* ---------- návrat z podstránky ----------
   Detail sady je slepá větev — bez viditelného návratu člověk neví, že někam
   odbočil. Kroužek se šipkou drží pozornost líp než podtržený řádek textu. */
.back .ico{
  display:grid;place-items:center;flex:0 0 auto;width:42px;height:42px;
  border:1px solid var(--line);border-radius:50%;color:var(--tx-2);
  transition:border-color .16s,color .16s,transform .22s var(--ease-soft);
}
.back:hover{color:var(--tx)}
.back:hover .ico{border-color:var(--tx-3);color:var(--tx);transform:translateX(-3px)}
.back:focus-visible .ico{outline:2px solid var(--acc);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.back:hover .ico{transform:none}}

/* ---------- tlačítka ---------- */
.btn{
  display:inline-block;background:var(--acc);color:var(--on-acc);border:1px solid var(--acc);
  padding:13px 30px;border-radius:var(--r-pill);font:600 14px/1.2 var(--sans);
  letter-spacing:.02em;cursor:pointer;transition:background .16s,transform .2s var(--ease-soft),border-color .16s;
}
.btn:hover{background:var(--acc-soft);border-color:var(--acc-soft);color:var(--on-acc);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:none;color:var(--tx);border-color:var(--line)}
.btn.ghost:hover{background:none;color:var(--tx);border-color:var(--tx-3)}
.btn.sm{padding:9px 18px;font-size:12.5px}
.btn.block{display:block;width:100%;text-align:center}
.btn[disabled]{opacity:.4;pointer-events:none}

/* ---------- horní lišta ---------- */
.bar{position:sticky;top:0;z-index:60;background:rgb(var(--bg-rgb) / .92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar .wrap{display:flex;align-items:center;gap:18px;padding-top:13px;padding-bottom:13px}
.bar .nm{font-family:var(--serif);font-size:16px;letter-spacing:.04em}
.bar .nm span{color:var(--tx-3);font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-family:var(--sans);margin-left:10px}
.bar nav{margin-left:auto;display:flex;align-items:center;gap:22px;font-size:13.5px}
.bar nav a:not(.btn){color:var(--tx-2)}
.bar nav a:not(.btn):hover{color:var(--tx)}
@media(max-width:720px){.bar .nm span,.bar nav a:not(.btn){display:none}}

/* počet kusů v topbaru — jediné trvale viditelné místo, kde je vidět,
   že už je něco vybrané; odkaz sám vede na #order */
.bar-order{position:relative}
.bar-count{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;margin-left:8px;padding:0 5px;border-radius:9px;background:rgba(0,0,0,.28);font-family:var(--mono);font-size:11px;line-height:1;font-variant-numeric:tabular-nums}
.bar-count[hidden]{display:none}
.bar-order.pulse{animation:barpulse .45s ease}
@keyframes barpulse{0%{transform:translateY(0) scale(1)}35%{transform:translateY(-1px) scale(1.07)}100%{transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.bar-order.pulse{animation:none}}

/* ---------- hero ---------- */
.hero{padding-top:78px;padding-bottom:70px}
/* Hero má vlastní `font-weight:500`, a to i když Iowan řez 500 nemá a mapuje
   ho zpět na 400 — právě o to jde. Hero tím zůstává v regularu, zatímco
   ostatní nadpisy ztučněly na 600. Na 42–71 px je tah čitelný i tak
   a lehčí kresba se k velkému nadpisu hodí víc.

   Nepřepisuj tuhle hodnotu na 400 v domnění, že je to totéž — je, ale zápis
   500 nese ten důvod: hero se drží řezu, který měl, a nemá následovat h2. */
.hero h1{margin-bottom:24px;font-weight:500;text-wrap:balance}

/* velký nadpis jen na úvodní stránce — na detailu sady nebo v podmínkách
   by 84 px křičelo, tam zůstává běžná velikost */
.hero.xl h1{font-size:clamp(42px,7.6vw,71px);line-height:1.02;letter-spacing:-.032em;margin-bottom:30px}
.hero.xl .lede{font-size:clamp(16px,2.2vw,19px);max-width:620px}
.hero h1 em{font-style:normal;color:var(--acc)}
.hero .lede{margin-bottom:34px}

/* hero jako dva sloupce: text vlevo, video vpravo.
   Video je ilustrace, ne ovládací prvek — proto autoplay, muted, loop a bez
   ovládacích prvků prohlížeče. Jediné tlačítko je pauza, aby šel pohyb vypnout. */
.hero-grid{display:grid;grid-template-columns:1.06fr .94fr;gap:56px;align-items:center}
.hero-text{position:relative;padding-top:70px}
.hero-text .lede{margin-bottom:0}

/* Popis konců škály. Drobný text pod otázkou; nesmí vypadat jako další věta
   výkladu, protože je to legenda k číslům v nadpisu. */
.scale-legend{margin-top:10px;font-size:13.5px;letter-spacing:.01em;color:var(--tx-3)}

/* Drobné značky fungují jako papírové samolepky: přidají lehkost, ale
   nezasahují do obsahu ani navigace. */
.hero-sparkles{position:absolute;right:7%;top:8px;width:88px;height:52px;pointer-events:none}
.hero-sparkles i{position:absolute;display:block;border:2px solid var(--acc);border-radius:50%;opacity:.78}
.hero-sparkles i:nth-child(1){width:12px;height:12px;left:7px;top:22px;background:rgb(var(--acc-rgb) / .16)}
.hero-sparkles i:nth-child(2){width:20px;height:20px;left:36px;top:1px;border-color:var(--acc-2);transform:rotate(18deg);border-radius:7px}
.hero-sparkles i:nth-child(3){width:9px;height:9px;right:5px;bottom:2px;border-color:var(--playful-blue);background:var(--playful-blue)}
.hero h1 em{position:relative;display:inline-block}
.hero h1 em::after{content:"";position:absolute;left:1%;right:-3%;bottom:-6px;height:7px;
  background:rgb(var(--acc-rgb) / .22);border-radius:60% 40% 55% 45%;transform:rotate(-1.5deg);z-index:-1}

.hero-film{margin:0;position:relative;transform:rotate(1.1deg)}
.hero-film video{
  /* zdroj je 911 × 480 (nečtvercové pixely), 16/10 ořezává nejmíň */
  display:block;width:100%;aspect-ratio:16/10;object-fit:cover;
  background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-card);
}
/* teplý nádech přes video, aby sedělo k papírové paletě a nesvítilo ze stránky */
.hero-film::after{
  content:"";position:absolute;inset:0;border-radius:var(--r-card);pointer-events:none;
  background:linear-gradient(180deg,rgb(var(--bg-rgb) / .10),rgb(var(--bg-rgb) / .34));
  mix-blend-mode:multiply;
}
.hero-film figcaption{
  margin-top:12px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-3);
  transform:rotate(-1.1deg);
}

.film-toggle{
  position:absolute;right:12px;top:12px;z-index:2;
  width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  background:rgb(var(--bg-rgb) / .62);border:1px solid var(--line);border-radius:50%;
  color:var(--tx-2);cursor:pointer;opacity:0;transition:opacity .18s,color .18s,border-color .18s;
}
.hero-film:hover .film-toggle,.film-toggle:focus-visible{opacity:1}
.film-toggle:hover{color:var(--tx);border-color:var(--tx-3)}
.film-toggle:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.ico-pause{width:9px;height:11px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.film-toggle.paused .ico-pause{
  width:0;height:0;border:none;
  border-left:10px solid currentColor;border-top:6px solid transparent;border-bottom:6px solid transparent;
  margin-left:2px;
}

/* pod 900 px se sloupce nevejdou vedle sebe; video jde nad text, protože
   na mobilu je první dojem obrázek, ne odstavec */
@media(max-width:900px){
  .hero-grid{grid-template-columns:1fr;gap:32px}
  .hero-film{order:-1}
  .hero-text{padding-top:64px}
  .hero-sparkles{right:0;top:5px}
  .film-toggle{opacity:1}
  /* přes celou šířku by 16/10 sebralo půl obrazovky dřív, než se dojde
     k nadpisu — proto je nad textem pás, ne obraz */
  .hero-film video{aspect-ratio:auto;height:min(46vw,260px)}
}
@media(prefers-reduced-motion:reduce){.hero-film video{display:none}}

.demo{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-card);padding:30px 28px;
  transition:border-color .18s,box-shadow .22s}
.demo:hover{border-color:var(--tx-3);box-shadow:var(--lift)}
.demo .hint{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--tx-3);margin-bottom:22px}

/* osa s jezdcem */
.axis{margin-bottom:26px}
.axis:last-child{margin-bottom:0}
.axis .labels{display:flex;justify-content:space-between;gap:14px;font-size:11.5px;color:var(--tx-3);margin-bottom:10px}
.track{position:relative;height:1px;background:var(--line);margin:9px 0}
.track .mid{position:absolute;left:50%;top:-4px;width:1px;height:9px;background:var(--line)}
.knob{
  position:absolute;top:50%;width:15px;height:15px;border-radius:50%;
  background:var(--bg);border:1.5px solid var(--tx-2);transform:translate(-50%,-50%);
  transition:left .5s cubic-bezier(.4,0,.2,1),border-color .2s,background .2s;
}
.knob.on{background:var(--acc);border-color:var(--acc)}
.axis.live .track{cursor:pointer;height:1px}
.axis.live .track::after{content:"";position:absolute;inset:-11px 0;}

/* ---------- kroky ---------- */
/* Dřív to byly čtyři pole slepené 1px mřížkou v jednom rámečku. Zaoblení
   se s tím pralo, tak jsou z toho samostatné dlaždice s mezerou. */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:40px}
.steps .step{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-card);padding:24px 20px;transition:border-color .18s}
.steps .step:hover{border-color:var(--tx-3)}
/* Číslice je jen tichý ukazatel pořadí: bez kroužku, bez barvy na každou dlaždici jinak.
   Barevné bubliny a rotace na hover dělaly z postupu pravidla stolní hry (5. 9. 2026). */
.steps .n{font-family:var(--serif);font-size:15px;color:var(--tx-3);margin-bottom:14px;line-height:1;letter-spacing:.04em}
.steps .n::after{content:"";display:inline-block;width:22px;height:1px;background:var(--line);vertical-align:middle;margin-left:10px}
.steps p{font-size:13.5px;color:var(--tx-2);margin:0}
@media(max-width:820px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.steps{grid-template-columns:1fr}}

/* ---------- filtr témat ---------- */
.filter{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-card);padding:28px 26px;margin-top:36px}
.tgroup{padding:20px 0;border-bottom:1px solid var(--line-soft)}
.tgroup:first-child{padding-top:0}
.tgroup:last-child,
.tgroup:has(+ .filter-foot){border-bottom:none;padding-bottom:0}
.tgroup > h3{font-family:var(--sans);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--tx-3);margin-bottom:14px}
.chips{display:flex;flex-wrap:wrap;gap:9px}

.chip{position:relative;display:inline-flex}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;user-select:none;
  border:1px solid var(--line);border-radius:999px;padding:8px 16px 8px 13px;
  font-size:13.5px;color:var(--tx-2);background:var(--bg);transition:all .15s;
}
.chip span::before{
  content:"";width:13px;height:13px;border:1px solid var(--tx-3);border-radius:5px;
  flex:0 0 auto;transition:all .15s;
}
.chip span:hover{border-color:var(--tx-3);color:var(--tx)}
.chip input:checked + span{border-color:var(--acc);color:var(--tx);background:rgb(var(--acc-rgb) / .09)}
.chip input:checked + span::before{
  background:var(--acc);border-color:var(--acc);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-4.9' fill='none' stroke='%2315130c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:11px;background-repeat:no-repeat;background-position:center;
}
.chip input:focus-visible + span{outline:2px solid var(--acc);outline-offset:2px}

.filter-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:22px;padding-top:20px;border-top:1px solid var(--line-soft)}
.filter-foot .count{font-size:13px;color:var(--tx-2);margin-right:auto}
.filter-foot .count b{color:var(--acc)}
.linkbtn{background:none;border:none;color:var(--tx-3);font:inherit;font-size:13px;cursor:pointer;padding:0;text-decoration:underline;text-underline-offset:3px}
.linkbtn:hover{color:var(--tx)}

/* ---------- mřížka sad ---------- */
.section-block{margin-top:44px}
.section-block:first-of-type{margin-top:36px}
.section-title{display:flex;align-items:center;gap:16px;font-family:var(--sans);font-size:11px;
  font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--tx-2);margin:0 0 4px}
.section-title::after{content:"";flex:1;height:1px;background:var(--line)}

/* auto-fill, ne auto-fit: sekce s jedinou sadou nechá zbytek řady prázdný.
   auto-fit tu kartu roztáhl přes celou šířku a ta pak vypadala jako jiný,
   důležitější produkt — což byla nechtěná hierarchie, ne záměr. */
/* align-items:start je podmínka rozbalování: bez něj grid natáhne všechny karty
   v řadě na výšku té nejvyšší, takže rozbalení jedné sady vyrobí v sousedních
   kartách prázdné místo. Daň je, že karty s dvouřádkovým nadpisem jsou o řádek
   vyšší než ostatní — to je menší zlo. */
.decks{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));
  gap:18px;margin-top:20px;align-items:start}
@media(max-width:760px){.decks{grid-template-columns:1fr}}

.deck{
  position:relative;display:flex;flex-direction:column;
  background:var(--bg-card);border:1px solid var(--line);border-radius:8px;
  padding:28px 26px 22px 30px;transition:border-color .18s,transform .18s;overflow:hidden;
}
/* barevná hrana podle sady — jediné, co odlišuje karty mezi sebou */
.deck::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--acc-line,var(--acc))}
.deck::after{content:"";position:absolute;left:0;top:0;right:0;height:110px;pointer-events:none;
  background:radial-gradient(120% 100% at 0% 0%,var(--acc-line,var(--acc)) 0%,transparent 70%);opacity:.07}
.deck:hover{border-color:var(--tx-3);transform:translateY(-3px) rotate(-.25deg)}
.deck:hover::after{opacity:.13}

/* .aud se na kartě ve výpisu už nepoužívá — cílovka se přesunula do .deck-meta pod
   nadpis. Pravidlo zůstává kvůli detailu sady, kde .aud pořád je. */
.deck .aud{display:flex;align-items:center;gap:9px;font-size:10.5px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;color:var(--tx-3);margin-bottom:13px}
.deck .aud::before{content:"";width:5px;height:5px;border-radius:50%;
  background:var(--acc-line,var(--acc-2));flex:0 0 auto}
/* Nadpis přestal být odkaz 28. 8. 2026 — stránka sady zanikla, veškerý obsah
   je v rozbalení. */
.deck h3{font-size:23px;margin-bottom:5px}

/* Cílovka a cena na jednom řádku. Barevná tečka tu není schválně: barvu už nese
   svislý pruh u hrany karty a dva signály pro jednu informaci dělaly na kartě
   dvě rovnoběžné svislice. Počet otázek odsud odešel 5. 9. 2026 — viz komentář
   v _DeckCard.cshtml. */
.deck .deck-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:7px;
  font-size:12px;color:var(--tx-3);margin-bottom:8px}
.deck .deck-meta .sep{color:var(--line)}

/* Témata karet místo počtu. Menší a světlejší než meta — je to obsah k přečtení,
   ne parametr k porovnání. */
.deck .deck-topics{font-size:12.5px;line-height:1.5;color:var(--tx-2);
  margin-bottom:15px}

/* ---------- sbalitelné tělo karty ----------
   Výšku obsahu nejde animovat přímo (auto není interpolovatelná hodnota), takže
   se animuje řádek mřížky z 0fr na 1fr. Vnitřní vrstva musí mít overflow:hidden
   a min-height:0, jinak se obsah z nulového řádku vyleje ven.

   Výchozí stav je ROZBALENO. Sbalení zapíná až site.js atributem
   data-collapsible — bez JavaScriptu tak zůstane celý obsah čitelný.
   data-anim se přidá až po prvním překreslení, aby se karty při načtení stránky
   nezavíraly animací. */
.deck-body{display:grid;grid-template-rows:1fr}
.deck-body-in{overflow:hidden;min-height:0}
.deck[data-collapsible] .deck-body{grid-template-rows:0fr}
.deck[data-collapsible][data-open] .deck-body{grid-template-rows:1fr}

/* Vlastní časování, ne --ease-soft: ten má mírný překmit, a překmit u výšky
   znamená, že se karta na okamžik roztáhne za obsah a nechá pod ním mezeru. */
.deck[data-anim] .deck-body{transition:grid-template-rows .34s cubic-bezier(.33,.1,.24,1)}
.deck[data-anim] .deck-body-in{transition:opacity .2s ease .04s}
.deck[data-collapsible]:not([data-open]) .deck-body-in{opacity:0}

.deck-toggle{display:inline-flex;align-items:center;gap:7px;margin-right:auto;
  background:none;border:0;padding:0;cursor:pointer;font-family:var(--sans);
  font-size:12.5px;color:var(--tx-3);transition:color .15s}
/* Povinné: display:inline-flex výš by jinak přebilo [hidden]{display:none}
   z prohlížeče a tlačítko by svítilo i bez JavaScriptu. Stejná past už jednou
   spadla u .picked .line, viz zmeny.md 27. 8. */
.deck-toggle[hidden]{display:none}
.deck-toggle:hover{color:var(--tx)}
.deck-toggle .chev{width:15px;height:15px;flex:0 0 auto;
  transition:transform .3s cubic-bezier(.33,.1,.24,1)}
.deck[data-open] .deck-toggle .chev{transform:rotate(180deg)}

@media(prefers-reduced-motion:reduce){
  .deck[data-anim] .deck-body,.deck[data-anim] .deck-body-in,
  .deck-toggle .chev{transition:none}
}

/* Popis nese sdělení karty — proto je největší z textů pod nadpisem. */
.deck .perex{font-size:14.5px;line-height:1.6;color:var(--tx-2);margin-bottom:0}

/* Dvě ukázkové otázky v rozbalené kartě: oddělené linkou, odsazené odrážkou,
   menší a tlumené. Jsou to příklady, ne obsah karty — proto nesmí přebít popis
   nad sebou.

   28. 8. 2026 tu chvíli stál výpis os jako dvojice pólů (přesunutý ze zrušeného
   modalu) a byl to krok vedle: zákazníka nezajímá, z jakých pólů se osa skládá,
   zajímá ho, na co se ho někdo zeptá. Póly sem nevracej — viz „Navenek otázky,
   uvnitř osy“ v CLAUDE.md. Kdyby se ukázalo, že je čtenář přeskakuje úplně, první
   zásah je zvětšit .ex-item o 1 px, ne přidat rámeček. */
.deck .deck-ex{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.deck .ex-note{font-size:10.5px;font-style:italic;color:var(--tx-3);margin-bottom:8px}
.deck .ex-item{position:relative;padding-left:14px;font-size:12.5px;line-height:1.5;
  color:var(--tx-3);margin-bottom:4px}
.deck .ex-item::before{content:"–";position:absolute;left:0;color:var(--line)}
.deck .ex-item:last-child{margin-bottom:0}

.deck .more{font-size:12.5px;color:var(--tx-3)}
.deck .more a{color:var(--tx-3);text-decoration:underline;text-underline-offset:3px}
.deck .more a:hover{color:var(--acc)}

.deck .foot{margin-top:auto;display:flex;align-items:center;gap:14px;padding-top:20px;border-top:1px solid var(--line)}
.deck .price{font-family:var(--serif);font-size:21px;color:var(--tx)}
.deck .foot .btn{margin-left:auto}
.deck.is-hidden{display:none}

.empty{border:1px dashed var(--line);border-radius:var(--r-card);padding:36px 26px;text-align:center;color:var(--tx-2);margin-top:32px}
.empty.is-hidden{display:none}

/* ---------- poznámkové bloky ---------- */
.note{background:var(--bg-soft);border-left:2px solid var(--acc);border-radius:0 var(--r-card) var(--r-card) 0;padding:22px 24px;margin-top:26px}
.note.warn{border-left-color:var(--warn)}
.note p{font-size:14.5px;color:var(--tx-2)}
.note p:last-child{margin-bottom:0}

.axlist{margin-top:30px;border-top:1px solid var(--line)}
.axitem{display:flex;justify-content:space-between;gap:20px;padding:14px 0;border-bottom:1px solid var(--line);font-size:14.5px;color:var(--tx-2)}
.axitem em{font-style:normal;color:var(--tx-3);font-family:var(--mono);font-size:12px;margin-right:12px}
.axitem span:last-child{text-align:right;color:var(--tx-2)}

.box{list-style:none;margin:26px 0 0;padding:0;border-top:1px solid var(--line)}
.box li{display:flex;gap:24px;padding:14px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.box li b{flex:0 0 190px;color:var(--tx)}
.box li span{color:var(--tx-2)}
@media(max-width:560px){.box li{flex-direction:column;gap:3px}.box li b{flex:none}}

/* ---------- archivní karta (ukázka) ---------- */
.arch{margin-top:34px;background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-card);padding:26px 24px}
/* Od 8. 9. 2026 jsou v ukázce tři řádky místo šesti a bez čísel, proto je řádek
   vyšší — tři těsné linky nad sebou vypadaly jako zbytek většího obrázku. */
.arch .row{position:relative;height:44px;display:flex;align-items:center}
.arch .no{font-family:var(--mono);font-size:10.5px;color:var(--tx-3);width:26px;flex:0 0 26px}
.arch .tr{position:relative;flex:1;height:1px;background:var(--line)}
.arch .me{position:absolute;top:-6px;width:2px;height:13px;background:var(--tx)}
.arch .dot{position:absolute;top:-2.5px;width:6px;height:6px;border-radius:50%}

/* ---------- objednávka ---------- */
.order{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r-card);padding:30px 28px;margin-top:34px;scroll-margin-top:92px}
.order h3{margin-bottom:18px}

.picked{border:1px solid var(--line);border-radius:var(--r-card);margin-bottom:26px;overflow:hidden}
.picked .line{display:flex;align-items:center;gap:14px;padding:14px 16px;border-bottom:1px solid var(--line);font-size:14px}
.picked .line:last-child{border-bottom:none}
/* hidden na .line by jinak prohrál s display:flex výše — řádky sad jsou
   předrenderované pro všechny sady a JS je odkrývá až po přidání */
.picked .line[hidden]{display:none}
.picked .line .nm{flex:1;min-width:0}
.picked .line .nm small{display:block;color:var(--tx-3);font-size:12px}
.picked .line .pr{font-family:var(--mono);font-size:13px;color:var(--tx-2);white-space:nowrap}
.picked .empty-line{padding:18px 16px;color:var(--tx-3);font-size:13.5px}
/* jména na kartu pod řádkem sady „Na lednici“ + živý náhled karty se jménem;
   hidden musí přebít grid stejně jako u .line */
.picked .line-names{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;
  padding:4px 16px 18px;border-bottom:1px solid var(--line);background:var(--bg-soft)}
.picked .line-names[hidden]{display:none}
.picked .line-names:last-child{border-bottom:none}
.picked .line-names .board-preview{margin-top:0}
.names-note{margin:8px 0 0;font-size:12.5px;color:var(--tx-3)}

/* ---- obsah karty na míru (formulář v objednávce) ----
   Vlastní plocha, protože je to jediná část objednávky, kde zákazník píše OBSAH
   produktu, ne údaje o sobě. Bez odlišení splyne s adresou. */
.custom-fields{margin:26px 0 0;padding:20px;border:1px solid var(--line);
  border-radius:var(--r-card);background:var(--bg-soft)}
.custom-fields[hidden]{display:none}
.custom-fields h3{margin:0 0 6px;font-family:var(--serif);font-size:18px;font-weight:400}
.custom-fields > .caption{margin:0 0 16px;max-width:62ch}
.custom-fields .f{margin-bottom:14px}
.draft-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 18px}

/* Šest řádků os. Číslo je pořadí na kartě — drobné a šedé, stejně jako na tisku. */
.custom-axes{list-style:none;counter-reset:ax;margin:0;padding:0}
.custom-axes li{counter-increment:ax;position:relative;padding:14px 0 4px;
  border-top:1px solid var(--line-soft)}
.custom-axes li:first-child{border-top:none}
.custom-axes .fields{gap:12px}

/* ---- shrnutí hotového obsahu v objednávce ----
   Objednávka obsah jen UKAZUJE; vyplňuje se v průvodci. Vypadá to jako výpis,
   ne jako formulář, aby bylo poznat, že tady se nic nepíše. */
.custom-summary{margin:26px 0 0;padding:18px 20px;border:1px solid var(--line);
  border-radius:var(--r-card);background:var(--bg-soft)}
.custom-summary .cs-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.custom-summary h3{margin:0;font-family:var(--serif);font-size:17px;font-weight:400}
.custom-summary .cs-title{margin:10px 0 0;font-family:var(--serif);font-size:15px;color:var(--tx)}
.cs-list{margin:12px 0 0;padding-left:20px;font-size:13px;color:var(--tx-body)}
.cs-list li{margin-bottom:7px}
.cs-list small{display:block;color:var(--tx-3);font-size:11.5px;margin-top:2px}

/* ---- šest řádků s otázkou (/design) ----
   Otázka je to hlavní, co se čte na kartě, takže má pole. Póly z ní obvykle jen
   vypadnou, a proto jsou jen textem pod ní; kdo je chce jinak, rozbalí <details>.
   První verze měla všech osmnáct polí naráz a podstatná věc se v nich ztratila. */
.axis-rows{list-style:none;margin:0;padding:0;counter-reset:ax}
.axis-rows li{display:flex;gap:12px;align-items:flex-start;padding:14px 0;
  border-top:1px solid var(--line-soft)}
.axis-rows li:first-child{border-top:none;padding-top:4px}
.axis-rows .ax-no{flex:0 0 auto;width:22px;padding-top:12px;font-family:var(--mono);
  font-size:12px;color:var(--tx-3);text-align:right}
.axis-rows .ax-main{flex:1;min-width:0}

/* Póly: souhrn je řádek textu, ne ovládací prvek. Trojúhelník <details> pryč —
   je to detail k otázce, ne samostatná sekce. */
.ax-poles{margin-top:6px}
.ax-poles > summary{display:flex;align-items:baseline;gap:10px;cursor:pointer;
  list-style:none;padding:2px 0;font-size:12.5px;color:var(--tx-3)}
.ax-poles > summary::-webkit-details-marker{display:none}
.ax-poles-preview{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ax-poles-preview:empty::before{content:"konce se doplní z otázky";font-style:italic;opacity:.7}
.ax-poles-edit{margin-left:auto;flex:0 0 auto;text-decoration:underline;
  text-underline-offset:3px;color:var(--tx-2)}
.ax-poles[open] > summary .ax-poles-edit{opacity:.6}
.ax-poles .fields{margin-top:10px;gap:12px}

/* ---- průvodce obsahem karty na míru (/design) ----
   Vlastní stránka, protože osmnáct polí je na mobilu celá obrazovka a v modalu
   se v nich nedá pracovat. Úzký sloupec: je to práce s textem, ne výpis. */
.wrap.narrow{max-width:760px}
.design-form{margin-top:26px}
.design-step{margin-bottom:20px}
.design-step h2{margin:0 0 14px;font-family:var(--serif);font-size:20px;font-weight:400}
.design-step > .caption{margin:12px 0 0}
.design-form .custom-axes li{padding:16px 0 6px}
.design-step .board-preview{margin-top:0}
.design-done{display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;padding:18px 20px;border:1px solid var(--line);border-radius:var(--r-card);
  background:var(--bg-soft)}
.design-done b{font-size:19px;margin-right:8px}
@media(max-width:560px){
  .design-done{flex-direction:column;align-items:stretch}
  .design-done .btns{flex-direction:column}
  .design-done .btns .btn{width:100%;justify-content:center}
}

.custom-errors{margin:0 0 16px;padding:12px 16px;border-left:2px solid var(--acc-2);
  border-radius:0 var(--r) var(--r) 0;background:var(--bg)}
.custom-errors ul{margin:0;padding-left:18px;font-size:13px;color:var(--tx-body)}
.custom-errors li{margin:2px 0}
@media(max-width:620px){.picked .line-names{grid-template-columns:1fr}}

.qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:var(--r-pill);overflow:hidden}
.qty button{background:var(--bg);border:none;color:var(--tx-2);width:30px;height:30px;cursor:pointer;font-size:15px;line-height:1}
.qty button:hover{color:var(--tx);background:var(--bg-card)}
.qty input{width:34px;height:30px;text-align:center;background:var(--bg);border:none;border-left:1px solid var(--line);border-right:1px solid var(--line);color:var(--tx);font:inherit;font-size:13px;padding:0}
.qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty input[type=number]{-moz-appearance:textfield}

/* Postupné odkrývání formuláře. Stejná mechanika jako .deck-body: výška se
   animuje přes grid-template-rows 0fr→1fr, protože height:auto animovat nejde.
   Sbalení zapíná až site.js atributem data-collapsible — bez JavaScriptu tak
   zůstane celý formulář vyplnitelný. */
.reveal{display:grid;grid-template-rows:1fr}
.reveal-in{overflow:hidden;min-height:0}
.reveal[data-collapsible]{grid-template-rows:0fr}
.reveal[data-collapsible][data-open]{grid-template-rows:1fr}
.reveal[data-anim]{transition:grid-template-rows .34s cubic-bezier(.33,.1,.24,1)}
.reveal[data-anim] .reveal-in{transition:opacity .2s ease .04s}
/* visibility navíc oproti .deck-body: ve sbalené části jsou formulářová pole
   a ta by jinak zůstala dosažitelná tabulátorem a odrolila by stránku k ničemu. */
.reveal[data-collapsible]:not([data-open]) .reveal-in{opacity:0;visibility:hidden}

.more-fields{margin-top:6px}
.more-toggle{display:inline-flex;align-items:center;gap:8px;margin-bottom:16px}
.more-toggle .chev{font-size:12px;color:var(--tx-3)}
.more-toggle[aria-expanded=true] .chev{transform:rotate(45deg)}

.fields{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.fields .full{grid-column:1/-1}
@media(max-width:620px){.fields{grid-template-columns:1fr}}
.f label{display:block;font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--tx-3);margin-bottom:7px}
.f label .opt{text-transform:none;letter-spacing:0;color:var(--tx-3)}
.hint-inline{font-size:12.5px;color:var(--tx-3);margin-top:7px}
input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password],textarea,select{
  width:100%;background:var(--bg);border:1px solid var(--line);color:var(--tx);
  padding:11px 13px;border-radius:var(--r);font:inherit;font-size:14.5px;
}
textarea{resize:vertical;min-height:74px}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--tx-3)}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b6660' stroke-width='1.4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 13px center;background-size:10px;padding-right:34px}

.sum{margin-top:26px;border-top:1px solid var(--line);padding-top:8px}
.sumline{display:flex;justify-content:space-between;gap:20px;font-size:14px;color:var(--tx-2);padding:9px 0;border-bottom:1px solid var(--line-soft)}
.sumline.tot{color:var(--tx);font-size:17px;border-bottom:none;padding-top:14px;font-family:var(--serif)}

.validation{color:var(--warn);font-size:13px;margin-top:14px}
.validation ul{margin:0;padding-left:18px}

/* ---------- platební panel ---------- */
.pay{display:grid;grid-template-columns:184px 1fr;gap:30px;align-items:start;margin-top:30px}
@media(max-width:620px){.pay{grid-template-columns:1fr}}
/* Bílý podklad drží jen obrázek — je to požadavek čtečky, ne dekorace, takže se
   nesmí roztáhnout na odkaz pod ním. Proto má vlastní vrstvu .qr img. */
.pay .qr{display:grid;gap:12px;justify-items:start}
.pay .qr img{background:#fff;padding:11px;border-radius:var(--r);width:184px;height:184px;image-rendering:pixelated;box-sizing:border-box}

/* SPAYD odkaz je cesta pro mobil: vlastní QR kód si telefon nevyfotí. Na počítači
   handler `SPD:` nikdo nemá a klepnutí by skončilo chybou prohlížeče, proto se
   ukazuje až pod 620 px — stejná hranice, na které se panel láme do sloupce. */
.pay .paylink{display:none}
@media(max-width:620px){
  .pay .qr{justify-items:stretch}
  .pay .paylink{display:block;text-align:center}
}
.pd{font-size:14px}
.pd .r{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-bottom:1px solid var(--line)}
.pd .r:last-child{border-bottom:none}
.pd .k{color:var(--tx-3)}
.pd .v{font-family:var(--mono);font-size:13.5px;color:var(--tx);text-align:right;word-break:break-all}
.pd .v.big{color:var(--acc);font-size:16px}

.states{display:flex;gap:0;margin:34px 0 0;list-style:none;padding:0;counter-reset:s}
.states li{flex:1;font-size:12px;color:var(--tx-3);padding-top:14px;border-top:2px solid var(--line);position:relative}
.states li.done{color:var(--tx);border-top-color:var(--acc)}
@media(max-width:560px){.states{flex-direction:column;gap:2px}.states li{border-top:none;border-left:2px solid var(--line);padding:6px 0 6px 14px}.states li.done{border-left-color:var(--acc)}}

/* ---------- patička ---------- */
footer{padding:46px 0 60px;color:var(--tx-3);font-size:12.5px;border-top:1px solid var(--line)}
footer a{color:var(--tx-3)}
footer .fl{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:14px}
footer .foot-bottom{display:flex;align-items:center;gap:14px}
/* Odkaz na druhou část Egoie: odlišený barvou, ať nesplývá s právními odkazy. */
footer .cross-link{margin-bottom:18px}
footer .cross-link a{color:var(--acc)}
footer .cross-link a:hover{text-decoration:underline}
footer .foot-bottom span{flex:1;min-width:0}
.admin-link{display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border:1px solid var(--line-soft);border-radius:50%;
  color:var(--tx-3);opacity:.5;transition:opacity .15s,color .15s,border-color .15s;flex:0 0 auto}
.admin-link:hover{opacity:1;color:var(--acc);border-color:rgb(var(--acc-rgb) / .4)}
.admin-link:focus-visible{outline:2px solid var(--acc);outline-offset:2px;opacity:1}

/* ---------- drobnosti ---------- */
.badge{display:inline-block;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);border:1px solid rgb(var(--acc-rgb) / .4);border-radius:999px;padding:3px 11px}
.split{display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:start}
@media(max-width:820px){.split{grid-template-columns:1fr;gap:34px}}
/* Pohyb je ozdoba, ne informace — kdo si ho vypnul, přijde jen o něj. */
@media(prefers-reduced-motion:reduce){
  .btn:hover,.deck:hover{transform:none}
  *{transition-duration:.01ms !important}
}

.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--acc);color:var(--on-acc);padding:10px 16px;z-index:99;border-radius:var(--r)}


/* =========================================================================
   Katalog sad — hlavička nad mřížkou a útlá karta
   Cena i věta o schovaných osách byly na každé kartě stejné. Osmkrát tentýž
   řádek není informace, je to šum — proto stojí jednou nad mřížkou a karta
   nese jen to, čím se jedna sada liší od druhé.
   ========================================================================= */
.catalog-head{display:flex;justify-content:space-between;align-items:flex-end;gap:36px;flex-wrap:wrap;
  padding-bottom:18px;border-bottom:1px solid var(--line)}
.catalog-head .lede{margin:0;flex:1 1 380px}
.catalog-facts{flex:0 0 auto;text-align:right;font-size:13.5px;color:var(--tx-2);line-height:1.9;max-width:340px}
.catalog-facts .cf-price b{font-family:var(--serif);font-size:19px;color:var(--tx);font-weight:400}
@media(max-width:760px){
  .catalog-head{gap:18px}
  .catalog-facts{text-align:left;max-width:none}
}

/* vysvětlivka u pojmu „osa“ — jediné místo, kde se něco schovává za hover.
   Bez ní se dá koupit, takže mobil o nic nepřijde; přesto reaguje i na tap. */
.hint{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;padding:0;
  margin-left:6px;border:1px solid var(--tx-3);border-radius:50%;background:none;color:var(--tx-3);
  font:inherit;font-size:10.5px;line-height:1;cursor:help;position:relative;vertical-align:1px;
  transition:border-color .15s,color .15s}
.hint:hover,.hint:focus-visible{border-color:var(--acc);color:var(--acc);outline:none}
.hint .tip{position:absolute;bottom:calc(100% + 10px);right:-10px;width:262px;padding:12px 14px;
  background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--r);
  color:var(--tx-2);font-size:12.5px;line-height:1.6;text-align:left;white-space:normal;
  box-shadow:var(--lift);z-index:40;opacity:0;visibility:hidden;transform:translateY(3px);
  transition:opacity .15s,transform .15s,visibility .15s}
.hint:hover .tip,.hint:focus-visible .tip{opacity:1;visibility:visible;transform:none}
.hint .tip::after{content:"";position:absolute;top:100%;right:14px;border:6px solid transparent;
  border-top-color:var(--line)}
@media(max-width:760px){.hint .tip{right:auto;left:-10px}.hint .tip::after{right:auto;left:14px}}

.deck .foot{gap:12px}
.deck .foot .btn{margin-left:auto}


/* =========================================================================
   Přepínač světlé / tmavé
   Je to jedno tlačítko, ne trojice tmavá / světlá / podle systému. Tři stavy
   znamenají tři ikony a vysvětlování, co znamená ta třetí — a přitom stav
   „podle systému“ je jen výchozí nastavení, dokud si člověk nevybere, ne
   volba, ke které by se potřeboval vracet.

   Ikona ukazuje CÍL, ne současný stav: v tmavém režimu svítí sluníčko, protože
   po kliknutí bude světlo. Popisek to říká i slovy, takže se nedá splést.
   ========================================================================= */
.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:32px;height:32px;padding:0;
  background:none;border:1px solid var(--line);border-radius:50%;
  color:var(--tx-2);cursor:pointer;
  transition:color .15s,border-color .15s;
}
/* Bez JS by tlačítko nic nedělalo, proto ho site.js teprve odkrývá.
   display:inline-flex výš by jinak přebilo [hidden] — stejná past jako
   u .deck-toggle a .picked .line. */
.theme-toggle[hidden]{display:none}
.theme-toggle:hover{color:var(--tx);border-color:var(--tx-3)}
.theme-toggle:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.theme-toggle svg{width:15px;height:15px;display:block}

/* Vidí se vždycky jen jedna ikona — ta druhá je ta, do které se přepíná. */
.theme-toggle .ico-sun{display:none}
.theme-toggle .ico-moon{display:block}
[data-theme="dark"] .theme-toggle .ico-sun{display:block}
[data-theme="dark"] .theme-toggle .ico-moon{display:none}

/* Na úzkém displeji mizí navigační odkazy, ale přepínač zůstává — je to
   ovládací prvek, ne odkaz, a na mobilu se hodí stejně. */
@media(max-width:720px){.theme-toggle{margin-left:auto}}

/* Přebarvení celé plochy naráz vypadá jako překliknutí zdroje světla, ne jako
   změna nastavení. Krátký prolnutí to zjemní; jen na barvách, ne na `all`,
   aby se nerozjelo rozbalování karet a posun jezdců. */
@media(prefers-reduced-motion:no-preference){
  body,.bar,.deck,.demo,.steps .step,.order,.filter,.note,.arch{
    transition:background-color .22s ease,border-color .22s ease,color .22s ease;
  }
}

/* =========================================================================
   Odvážnější rytmus úvodní stránky
   Jednotlivé kapitoly mají vlastní náladu, jako kdyby člověk postupně otáčel
   listy malé autorské brožury. Obsah zůstává v klidné ose, hravost se děje
   kolem něj a nestrhává čtení.
   ========================================================================= */
.chapter-intro,.chapter-how,.chapter-insight,.chapter-sets,.chapter-rules,
.chapter-caution,.chapter-gift,.chapter-order,.chapter-about{position:relative;isolation:isolate;overflow:hidden}
.chapter-intro > .wrap,.chapter-how > .wrap,.chapter-insight > .wrap,.chapter-sets > .wrap,
.chapter-rules > .wrap,.chapter-caution > .wrap,.chapter-gift > .wrap,.chapter-order > .wrap,
.chapter-about > .wrap{position:relative;z-index:1}

/* Střídání ploch. Sousední kapitoly nesmí mít tutéž plochu — to je celé
   pravidlo a drží se ho pořadí níž. Gradienty zůstávají, ale nejsou už jediný
   rozdíl: nesou náladu, plochu nese token. */
.chapter-intro{background:radial-gradient(circle at 88% 15%,rgb(var(--acc-rgb) / .15),transparent 24%),
  radial-gradient(circle at 57% 86%,rgb(var(--acc-2-rgb) / .11),transparent 22%),var(--bg)}
.chapter-how{background:linear-gradient(118deg,rgb(var(--acc-rgb) / .12),transparent 39%),var(--bg-warm)}
.chapter-how::before{content:"";position:absolute;width:185px;height:185px;left:-76px;bottom:-92px;
  border:24px dotted rgb(var(--acc-rgb) / .2);border-radius:50%;transform:rotate(14deg)}

.chapter-insight{background:linear-gradient(132deg,rgb(127 163 201 / .16),transparent 46%),var(--bg-cool)}
.chapter-insight::after{content:"";position:absolute;width:250px;height:250px;right:-112px;top:44px;
  border:2px solid rgb(127 163 201 / .34);border-radius:46% 54% 63% 37%;transform:rotate(24deg)}
.chapter-insight .arch{background:var(--bg-card);border-radius:28px 9px 28px 9px;box-shadow:14px 14px 0 rgb(127 163 201 / .11)}
.chapter-insight .dot{width:9px;height:9px;top:-4px;box-shadow:0 0 0 3px rgb(var(--bg-rgb) / .72)}
.chapter-insight .me{height:19px;top:-9px;width:3px}

.chapter-sets{background:radial-gradient(circle at 4% 15%,rgb(var(--acc-2-rgb) / .12),transparent 20%),var(--bg)}
/* Sady jsou to, kvůli čemu se sem chodí — proto jediná kapitola, která má
   plochu stránky a kolem sebe dvě jiné. Rozdíl ji vynese, aniž by křičela. */
.chapter-sets::before{content:"✦  ·  ✦";position:absolute;right:5vw;top:74px;color:rgb(var(--acc-rgb) / .38);
  font:32px/1 var(--serif);letter-spacing:.35em;transform:rotate(9deg)}
.chapter-sets .catalog-head{border-bottom-style:dashed}
.chapter-sets .section-title::after{height:2px;background:repeating-linear-gradient(90deg,var(--line) 0 9px,transparent 9px 15px)}
.deck{border-radius:22px 7px 19px 10px;border-color:rgb(var(--acc-rgb) / .2)}
.deck:nth-child(even){border-radius:8px 22px 10px 19px}
.deck::before{width:6px}
.deck:hover{transform:translateY(-7px) rotate(-1deg);box-shadow:10px 12px 0 rgb(var(--acc-rgb) / .13)}
.deck:nth-child(even):hover{transform:translateY(-7px) rotate(1deg)}

.chapter-rules{background:linear-gradient(118deg,rgb(var(--acc-rgb) / .15),transparent 38%),var(--bg-deep)}
.chapter-rules .note{border:0;border-radius:8px 26px 12px 24px;background:var(--bg-card);
  box-shadow:11px 11px 0 rgb(var(--acc-rgb) / .18);transform:rotate(-.55deg)}
.chapter-rules .note p:first-child::before{content:"✦";color:var(--acc);margin-right:10px}
.chapter-rules::after{content:"✦";position:absolute;right:9%;bottom:25px;color:var(--acc);font:42px/1 var(--serif);opacity:.7}

.chapter-caution{background:linear-gradient(135deg,rgb(var(--acc-2-rgb) / .16),transparent 52%),var(--bg-warm)}
.chapter-caution .note.warn{border:1px dashed rgb(var(--acc-2-rgb) / .58);border-left:8px solid var(--warn);
  border-radius:24px 8px 24px 8px;background:rgb(var(--acc-2-rgb) / .06)}
.chapter-caution::after{content:"?";position:absolute;right:8%;bottom:20px;width:48px;height:48px;display:grid;place-items:center;
  border:2px solid rgb(var(--acc-2-rgb) / .45);border-radius:45% 55% 42% 58%;color:var(--acc-2);font:28px/1 var(--serif)}

.chapter-gift{background:radial-gradient(circle at 6% 18%,rgb(var(--acc-2-rgb) / .15),transparent 26%),var(--bg)}
/* Dárek má plochu stránky mezi dvěma tónovanými — stejný důvod jako u sad. */
.chapter-gift .note{border:1px dashed rgb(var(--acc-rgb) / .5);border-radius:26px 8px 24px 10px;background:var(--bg-card)}
.chapter-gift .gift-points{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.chapter-gift .gift-points li{background:var(--bg-card);border:1px solid var(--line);border-radius:7px 17px 7px 17px;padding:18px 20px}
.chapter-gift .gift-points b{display:block;margin-bottom:6px}
.chapter-gift .gift-points span{display:block;font-size:14px;line-height:1.5}
.chapter-gift::after{content:"✦  ✧  ✦";position:absolute;right:7%;bottom:28px;color:var(--acc-2);font:30px/1 var(--serif);letter-spacing:.14em}
.chapter-order{background:linear-gradient(125deg,rgb(var(--acc-rgb) / .16),transparent 43%),var(--bg-deep)}
.chapter-order .order{border-radius:28px 9px 28px 9px;border-color:rgb(var(--acc-rgb) / .36);
  box-shadow:14px 14px 0 rgb(var(--acc-rgb) / .1)}
.chapter-order .picked{border-radius:16px 6px 16px 6px}
.chapter-order::after{content:"";position:absolute;right:9%;bottom:25px;width:46px;height:46px;
  border:2px dashed rgb(var(--acc-rgb) / .72);border-radius:50%;box-shadow:inset 0 0 0 7px rgb(var(--acc-rgb) / .08)}

.chapter-about{background:radial-gradient(circle at 12% 90%,rgb(127 163 201 / .16),transparent 24%),var(--bg-cool)}
.chapter-about .lede:first-of-type{font-size:clamp(18px,2.4vw,22px);line-height:1.55;color:var(--tx)}
.chapter-about::after{content:"";position:absolute;right:8%;bottom:26px;width:62px;height:28px;border:2px solid rgb(127 163 201 / .48);
  border-radius:60% 40% 58% 42%;transform:rotate(-13deg)}

.btn:hover{transform:translateY(-3px) rotate(-.8deg);box-shadow:5px 6px 0 rgb(var(--acc-rgb) / .22)}
.btn.ghost:hover{box-shadow:none;transform:translateY(-2px) rotate(.6deg)}

@media(max-width:700px){
  .chapter-sets::before{display:none}
  .chapter-gift .gift-points{grid-template-columns:1fr}
}

/* =========================================================================
   Rytmus na mobilu (8. 9. 2026)

   Na širokém displeji dělí kapitoly hlavně dekorace u pravého okraje —
   kolečka, hvězdičky, otazník. Ty se na úzkém displeji nevejdou a odpadají,
   takže z devíti kapitol zbyl jeden slitý pás oddělený vlasovou linkou.

   Odsud výš to řeší tři věci, které fungují bez dekorace:
   1. plocha kapitoly (tokeny --bg-warm / --bg-cool / --bg-deep výš),
   2. nadočko posazené na svou plochu, aby předěl začínal už u něj,
   3. viditelný švih na hraně místo 1px linky.
   ========================================================================= */
@media(max-width:760px){
  /* 84 px nahoře i dole je na 375 px moc prázdna naráz — kapitola se pak
     nevejde do jednoho pohledu a rytmus se nedá přečíst. */
  section{padding:56px 0}
  section.tight{padding:40px 0}

  /* Gradienty počítané pro širokou plochu jsou na mobilu buď za okrajem, nebo
     zabírají celou obrazovku. Přesazené k hornímu okraji dělají to, co mají:
     označí začátek kapitoly. */
  .chapter-intro{background:radial-gradient(circle at 82% 6%,rgb(var(--acc-rgb) / .17),transparent 38%),var(--bg)}
  .chapter-how{background:linear-gradient(160deg,rgb(var(--acc-rgb) / .15),transparent 34%),var(--bg-warm)}
  .chapter-insight{background:linear-gradient(160deg,rgb(127 163 201 / .19),transparent 34%),var(--bg-cool)}
  .chapter-sets{background:radial-gradient(circle at 12% 3%,rgb(var(--acc-2-rgb) / .15),transparent 34%),var(--bg)}
  .chapter-rules{background:linear-gradient(160deg,rgb(var(--acc-rgb) / .17),transparent 34%),var(--bg-deep)}
  .chapter-caution{background:linear-gradient(160deg,rgb(var(--acc-2-rgb) / .18),transparent 34%),var(--bg-warm)}
  .chapter-gift{background:radial-gradient(circle at 12% 3%,rgb(var(--acc-2-rgb) / .17),transparent 34%),var(--bg)}
  .chapter-order{background:linear-gradient(160deg,rgb(var(--acc-rgb) / .17),transparent 34%),var(--bg-deep)}
  .chapter-about{background:radial-gradient(circle at 12% 4%,rgb(127 163 201 / .18),transparent 34%),var(--bg-cool)}

  /* Hrana kapitoly. Vlasová linka mezi dvěma podobnými plochami je na mobilu
     neviditelná; tenhle pruh je vidět i tam, kde se plochy skoro shodují,
     a přitom to není další rámeček. Jde přes celou šířku, protože předěl má
     patřit obrazovce, ne sloupci textu. */
  .chapter-how,.chapter-insight,.chapter-sets,.chapter-rules,
  .chapter-caution,.chapter-gift,.chapter-order,.chapter-about{
    border-top:1px solid var(--line);
  }
  .chapter-how::after,.chapter-sets::after,.chapter-gift::after{content:none}

  /* Nadočko dostane na mobilu podklad, aby začátek kapitoly šel poznat i při
     rychlém rolování — na širokém displeji to nedělá, tam ho vynese prázdno
     kolem. */
  .chapter-how .kicker,.chapter-insight .kicker,.chapter-sets .kicker,
  .chapter-rules .kicker,.chapter-caution .kicker,.chapter-gift .kicker,
  .chapter-order .kicker,.chapter-about .kicker{
    padding:5px 12px 5px 10px;border-radius:var(--r-pill);
    /* Podklad je barva KARTY, ne akcentu. Oranžová na 10 % tu chvíli byla
       a byla to past: ztmavila plochu pod textem, takže si nadočko samo
       shodilo kontrast pod AA (4,19:1 na --bg-deep). Světlejší podklad ho
       naopak zvedne — a odliší se od plochy stejně dobře. */
    background:var(--bg-card);
  }
}

/* Dekorace u okraje se na mobilu nevejdou. Ty, které se nedají posunout, aniž
   by lezly do textu, se skrývají — plochu a hranu výš to nahradí. */
@media(max-width:560px){
  .chapter-how::before,.chapter-insight::after,.chapter-rules::after,
  .chapter-caution::after,.chapter-order::after,.chapter-about::after{display:none}
}
@media(prefers-reduced-motion:reduce){
  .deck:hover,.deck:nth-child(even):hover,.btn:hover,.btn.ghost:hover,.hero-film:hover,
  .chapter-gift .gift-points li:hover{transform:none}
}

/* ---------- pohyb, který reaguje na člověka ---------- */
@media(prefers-reduced-motion:no-preference){
  @keyframes drift{0%,100%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(0,-18px,0) rotate(8deg)}}
  @keyframes orbit{0%,100%{transform:translate3d(0,0,0) rotate(24deg) scale(1)}50%{transform:translate3d(-18px,12px,0) rotate(39deg) scale(1.08)}}
  @keyframes dotpop{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-5px) scale(1.28)}}
  @keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
  @keyframes twinkle{0%,100%{transform:scale(.75) rotate(0);opacity:.42}50%{transform:scale(1.25) rotate(22deg);opacity:1}}
  @keyframes hop{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-17px) rotate(9deg)}}
  @keyframes swing{0%,100%{transform:rotate(-13deg) translateX(0)}50%{transform:rotate(12deg) translateX(12px)}}
  @keyframes stamp{0%,100%{transform:rotate(-10deg) scale(.9);opacity:.58}50%{transform:rotate(14deg) scale(1.08);opacity:1}}

  /* Pohybují se jen dekorace; informace a formuláře zůstávají na místě. */
  .hero-sparkles i:nth-child(1){animation:drift 5s ease-in-out infinite .4s}
  .hero-sparkles i:nth-child(2){animation:drift 6.5s ease-in-out infinite}
  .hero-sparkles i:nth-child(3){animation:drift 4.4s ease-in-out infinite 1s}
  .chapter-how::before{animation:drift 3.8s ease-in-out infinite}
  .chapter-insight::after{animation:orbit 4.8s ease-in-out infinite}
  .chapter-sets::before{animation:drift 4.3s ease-in-out infinite}
  .chapter-rules::after{animation:twinkle 1.8s ease-in-out infinite}
  .chapter-caution::after{animation:hop 2.7s var(--ease-soft) infinite}
  .chapter-gift::after{animation:twinkle 2.2s ease-in-out infinite .2s}
  .chapter-order::after{animation:stamp 2.8s ease-in-out infinite .6s}
  .chapter-about::after{animation:swing 3.4s ease-in-out infinite}

  .bar .nm{transition:color .2s,transform .3s var(--ease-soft)}
  .bar .nm:hover{color:var(--acc);transform:rotate(-1deg) translateY(-1px)}
  .bar nav a:not(.btn){position:relative;transition:color .2s}
  .bar nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;border-radius:2px;
    background:var(--acc-2);transform:scaleX(0);transition:transform .25s var(--ease-soft)}
  .bar nav a:not(.btn):hover::after{transform:scaleX(1)}
  .theme-toggle svg{transition:transform .3s var(--ease-soft)}
  .theme-toggle:hover svg{transform:rotate(24deg) scale(1.12)}

  .hero-film{transition:transform .45s var(--ease-soft),filter .3s}
  .hero-film:hover{transform:rotate(-.5deg) translateY(-5px);filter:saturate(1.08)}
  .hero h1 em{transition:color .25s}
  .hero-text:hover h1 em{color:var(--acc-soft)}

  .chapter-insight .arch{transition:transform .36s var(--ease-soft),box-shadow .3s}
  .chapter-insight .arch:hover{transform:translateY(-5px) rotate(-.35deg);box-shadow:18px 18px 0 rgb(127 163 201 / .14)}
  .chapter-insight .arch:hover .dot{animation:dotpop .8s var(--ease-soft) both}
  .chapter-insight .arch:hover .dot:nth-of-type(2){animation-delay:.08s}
  .chapter-insight .arch:hover .dot:nth-of-type(3){animation-delay:.16s}
  .chapter-insight .arch:hover .dot:nth-of-type(4){animation-delay:.24s}

  .chapter-rules .note,.chapter-caution .note.warn{transition:transform .35s var(--ease-soft),box-shadow .3s,border-color .25s}
  .chapter-rules .note:hover{transform:translateY(-4px) rotate(.35deg);box-shadow:15px 16px 0 rgb(var(--acc-rgb) / .2)}
  .chapter-caution .note.warn:hover{transform:translateY(-4px) rotate(-.35deg);box-shadow:10px 12px 0 rgb(var(--acc-2-rgb) / .13)}


  .chapter-gift .gift-points li{transition:transform .3s var(--ease-soft),box-shadow .25s,border-color .2s}
  .chapter-gift .gift-points li:hover{transform:translateY(-6px) rotate(-.7deg);border-color:var(--acc);box-shadow:7px 8px 0 rgb(var(--acc-rgb) / .13)}
  .chapter-gift .gift-points li:nth-child(2):hover{transform:translateY(-7px) rotate(.6deg)}
  .chapter-gift .gift-points li:nth-child(3):hover{transform:translateY(-5px) rotate(-.35deg)}

  .chapter-order .order{transition:transform .35s var(--ease-soft),box-shadow .3s,border-color .25s}
  .chapter-order .order:hover{transform:translateY(-4px);box-shadow:18px 19px 0 rgb(var(--acc-rgb) / .14)}
  .picked .line{transition:background-color .2s,transform .25s var(--ease-soft)}
  .picked .line:hover{background:rgb(var(--acc-rgb) / .08);transform:translateX(4px)}
  .qty button{transition:background-color .16s,color .16s,transform .22s var(--ease-soft)}
  .qty button:hover{transform:scale(1.13)}
  input[type=text],input[type=email],input[type=tel],input[type=number],textarea,select{transition:transform .22s var(--ease-soft),border-color .2s,box-shadow .2s,background-color .2s}
  input[type=text]:focus,input[type=email]:focus,input[type=tel]:focus,input[type=number]:focus,textarea:focus,select:focus{transform:translateY(-2px);border-color:var(--acc);box-shadow:4px 5px 0 rgb(var(--acc-rgb) / .12);background:var(--bg-card)}

  footer a{position:relative;transition:color .2s}
  footer .fl a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--acc);
    transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease-soft)}
  footer .fl a:hover::after{transform:scaleX(1)}
  footer .fl a:hover{color:var(--acc)}
  .chapter-about .btn:hover{animation:nudge .55s ease-in-out 1}

  /* Vstup kapitol je krátký a jednorázový; bez JavaScriptu se nic neschovává. */
  html.motion-ready .chapter-intro,html.motion-ready .chapter-how,html.motion-ready .chapter-insight,
  html.motion-ready .chapter-sets,html.motion-ready .chapter-rules,html.motion-ready .chapter-caution,
  html.motion-ready .chapter-gift,html.motion-ready .chapter-order,html.motion-ready .chapter-about{opacity:0;transform:translateY(20px);transition:opacity .65s ease,transform .65s var(--ease-soft)}
  html.motion-ready .chapter-in{opacity:1;transform:none}
}

/* =========================================================================
   Sady, které se teprve chystají (5. 9. 2026)

   Vypadají jako prodejné, protože to sady jsou — jen ještě neexistují. Rozdíl
   nese štítek místo ceny a pole na e-mail místo tlačítka do objednávky, ne
   jiná barva nebo ztlumená karta: „připravujeme“ není vada, je to stav.
   Ztlumit je by zároveň znamenalo ztlumit obsah, podle kterého se člověk
   rozhoduje, jestli e-mail nechat.
   ========================================================================= */
/* věta o volné kartě pod výpisem prodejných sad — jen text, žádný panel */
.blank-line{max-width:60ch;margin:22px 0 0}
.blank-line a{color:var(--tx-2);text-decoration:underline;text-underline-offset:3px}

.soon-head{margin:52px 0 20px;padding-top:26px;border-top:1px solid var(--line)}
.soon-head h3{font-family:var(--serif);font-size:19px;font-weight:400;margin:0 0 6px}
.soon-head .caption{max-width:52ch;margin:0}

/* „Chystá se“ není druhý katalog hotových sad. Karta proto nese jen rozhodovací
   minimum (pro koho je, proč ji zvažovat a kam nechat e-mail) a do řádku se jich
   vejde víc. Výška ani prázdné místo tak nepředstírají hotový obsah. */
.decks-soon{grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}
.deck.compact{padding:20px 20px 18px 24px}
.deck.compact .deck-magnets{margin-bottom:13px;transform:scale(.84);transform-origin:left top}
.deck.compact h3{font-size:19px;line-height:1.25;margin-bottom:4px}
.deck.compact .deck-meta{margin-bottom:9px}
.deck.compact .soon-summary{font-size:12.5px;line-height:1.5;color:var(--tx-2);margin:0}
.deck.compact .foot{margin-top:13px;padding-top:12px}
.deck.compact .interest{width:100%;margin-left:0}
.deck.compact .interest input[type=email]{padding:7px 10px}
@media(max-width:760px){.decks-soon{grid-template-columns:1fr}}

.tag-soon{display:inline-block;padding:2px 9px;border-radius:var(--r-pill);
  font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  background:rgb(var(--acc-2-rgb) / .14);color:var(--acc-2)}

/* Formulář zájmu sedí v patičce karty na místě tlačítka. Pole a tlačítko na
   jednom řádku; na úzké kartě se zalomí pod sebe, protože e-mailové pole má
   svoje minimum a mačkat ho pod ně je horší než zalomení. */
.deck .interest{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-left:auto}
.deck .interest input[type=email]{flex:1 1 150px;min-width:0;padding:8px 12px;
  border:1px solid var(--line);border-radius:var(--r);background:var(--bg);
  color:var(--tx);font:13px/1.3 var(--sans)}
.deck .interest input[type=email]:focus{outline:2px solid var(--acc);outline-offset:1px;border-color:var(--acc)}
.deck .interest .btn{flex:0 0 auto}
.interest-done{font-size:13px;color:var(--ok);margin:0}
.interest-error{flex:1 0 100%;font-size:12.5px;color:var(--warn);margin:4px 0 0}

/* Honeypot: pro člověka neviditelný, pro robota lákavý. Ne display:none —
   část robotů skrytá pole přeskakuje, tohle je pořád „v layoutu“. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Termín pod nadpisem sekce „Jako dárek“ — jedna věta, ne panel. */
.deadline{margin:10px 0 0;font-size:14px;color:var(--acc)}

/* Popisek jen pro odečítač obrazovky. Stejná mechanika jako .skip, bez
   fokusového vynoření: tenhle text se ukázat nemá nikdy. */
.sr-only{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* =========================================================================
   NÁHLED PRVNÍ KARTY V DLAŽDICI SADY (5. 9. 2026)

   Karta se vykresluje TÝMŽ markupem jako tisk (partial `_Board`) — proto tady
   nejsou žádné rozměry os, sloupců ani dráhy. Ty jsou v `print.css`
   v milimetrech a jsou zdrojem pravdy; kdyby je web měl podruhé, obě verze by
   se postupně rozešly a poznalo by se to až na vytištěné kartě.

   Co dělá tenhle blok: obalí kartu (148 × 105 mm), zmenší ji na šířku dlaždice
   a přebarví na webové tokeny. `print.css` se kvůli webu NEMĚNÍ — jeho `@page`
   a šedé pozadí patří tiskovému listu, ne stránce.
   ========================================================================= */

/* Poměr 148 : 105 drží padding-bottom, ne pevná výška: šířka dlaždice se mění
   s mřížkou a karta se musí zmenšovat s ní. */
.board-preview{position:relative;width:100%;padding-bottom:70.95%;margin-top:18px;
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--bg-soft)}

/* Vlastní zmenšení. Karta má vnitřně 148 mm, což je při 96 dpi 559,37 px —
   `calc(100cqw / 148mm)` nefunguje, protože dělit délku délkou CSS neumí.
   Poměr se proto počítá proti té pixelové hodnotě: 100cqw je šířka obalu.

   Číslo 559.37px je 148 mm v CSS pixelech (1 mm = 96/25.4 px) a je to jediné
   místo, kde se tiskový rozměr převádí na obrazovkový. Kdyby se šířka karty
   v `board.css` změnila, musí se změnit i tady.

   Jednotka `px` u dělitele je povinná: `calc(100cqw / 559.37)` je neplatné,
   protože výsledkem by byla délka, a `scale()` chce bezrozměrné číslo. Teprve
   délka dělená délkou dá poměr. */
.board-preview{container-type:inline-size}
.board-scale{position:absolute;left:0;top:0;width:148mm;height:105mm;
  transform-origin:0 0;transform:scale(calc(100cqw / 559.37px))}

/* Barvy z webu, ne z tisku. `print.css` má napevno #111 na bílé — na tmavém
   webu by karta byla černý obdélník. Geometrie zůstává, mění se jen barvy. */
.board-preview .board{background:var(--bg-card);color:var(--tx)}
.board-preview .board .title{color:var(--tx)}
.board-preview .board .overline{color:var(--tx-3)}
.board-preview .board .subtitle,
.board-preview .board .code,
.board-preview .board .brand{color:var(--tx-3)}
.board-preview .ax .q{color:var(--tx)}
.board-preview .ax .no{color:var(--tx-3)}
.board-preview .ax .lbl{color:var(--tx-2)}
.board-preview .ax .num{color:var(--tx-3)}
.board-preview .ax .band{background:rgb(var(--acc-rgb) / .12);border-color:rgb(var(--acc-rgb) / .28)}
/* linky na dopsání u volné karty — tisková #c9c3b4 by na tmavém webu zmizela */
.board-preview .board .title.blank,
.board-preview .ax .q.blank,
.board-preview .ax .lbl.blank{border-color:var(--line)}

/* Seznam karet sady v rozbalení: pořadí, název, případně poznámka o vynechání. */
.board-list{list-style:none;margin:16px 0 0;padding:0;border-top:1px solid var(--line)}
.board-list li{display:flex;align-items:baseline;gap:10px;padding:8px 0;
  border-bottom:1px solid var(--line-soft);font-size:13.5px}
.board-list .bl-no{font-family:var(--mono);font-size:11px;color:var(--tx-3);flex:0 0 auto}
.board-list .bl-title{color:var(--tx-body)}
.board-list .bl-opt{margin-left:auto;font-size:11px;color:var(--tx-3);font-style:italic}

/* Otázky pod náhledem. Na širokém displeji jsou skryté (čtou se z karty),
   na mobilu je to naopak: 9,5pt text zmenšený na 390 px nepřečte nikdo, takže
   se karta stane obrázkem a text se čte odsud. */
.preview-questions{list-style:none;margin:14px 0 0;padding:0;display:none}
.preview-questions li{position:relative;padding-left:14px;font-size:13px;line-height:1.55;
  color:var(--tx-body);margin-bottom:6px}
.preview-questions li::before{content:"–";position:absolute;left:0;color:var(--line)}

.preview-note{margin:14px 0 0;font-size:12.5px;color:var(--tx-3);font-style:italic}

/* =========================================================================
   NÁHLED PRVNÍ KARTY JAKO OSY (11. 9. 2026)

   Nahradilo zmenšenou tiskovou kartu (.board-preview zůstává pro volnou kartu,
   kartu na míru, průvodce a administraci). Z karty se bere jen obsah — otázka,
   dráha 0–10, póly — a kreslí se v měřítku webu, ne tisku. Proporce dráhy jsou
   ale z tisku odvozené: magnet ⌀8 mm v pásu 8,5 mm, po stranách vůle na
   poloměr magnetu, aby na nule a desítce stál celý uvnitř (viz .band
   v board.css). Tady je to 20 px magnet v 24px pásu.

   Pozici magnetu drží --pos (0–10) na <li>; site.js ji mění a CSS ji dojede
   pomalým přechodem. Délku přechodu dodává skript v --dur, aby každý magnet
   jel jinak rychle. Bez skriptu magnet stojí, kde ho postavil server. */
.axes-preview{margin-top:18px;padding:18px 18px 14px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--bg-card)}
.axes-preview .ap-cap{display:flex;align-items:baseline;gap:10px;margin:0 0 14px;
  padding-bottom:12px;border-bottom:1px solid var(--line-soft);
  font-family:var(--serif);font-size:16px;color:var(--tx)}
.axes-preview .ap-cap span{font-family:var(--sans);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tx-3);flex:0 0 auto}
.ap-list{list-style:none;margin:0;padding:0}
.ap-ax{padding:10px 0 12px}
.ap-ax + .ap-ax{border-top:1px solid var(--line-soft)}
.ap-q{margin:0 0 9px;font-family:var(--serif);font-size:15px;line-height:1.4;color:var(--tx)}

/* Dráha: tónovaný pás v barvě sady, uvnitř jen čísla — žádné rysky, stejně
   jako na kartě. Magnet číslo, na kterém stojí, zakryje; odečítá se nejbližší
   viditelné, přesně jako na papíře. */
.ap-track{position:relative;height:24px;border-radius:12px;
  background:color-mix(in srgb,var(--acc-line,var(--acc)) 12%,var(--bg-card));
  border:1px solid color-mix(in srgb,var(--acc-line,var(--acc)) 30%,var(--line))}
.ap-scale{position:absolute;top:0;bottom:0;left:11px;right:11px}
.ap-num{position:absolute;top:50%;transform:translate(-50%,-50%);
  font-family:var(--mono);font-size:9.5px;color:var(--tx-3);line-height:1}
.ap-num:nth-child(1){left:0%}   .ap-num:nth-child(2){left:10%}  .ap-num:nth-child(3){left:20%}
.ap-num:nth-child(4){left:30%}  .ap-num:nth-child(5){left:40%}  .ap-num:nth-child(6){left:50%}
.ap-num:nth-child(7){left:60%}  .ap-num:nth-child(8){left:70%}  .ap-num:nth-child(9){left:80%}
.ap-num:nth-child(10){left:90%} .ap-num:nth-child(11){left:100%}

/* Magnet: kulatý, plochý, NEUTRÁLNÍ ve všech sadách. Dřív byl v barvě sady
   a měl odlesk se stínem, takže vypadal jako lesklý knoflík — plastický prvek
   mezi jinak plochou sazbou na sebe strhával pozornost víc než otázka, a barva
   z něj dělala druhý nositel identity sady vedle dráhy a hrany dlaždice.

   Teď je to jednolitý tmavý kotouč odvozený z --tx, takže se sám otočí ve
   světlém i tmavém režimu a nepotřebuje druhou sadu hodnot. Žádný gradient,
   žádný vržený stín; jen vlasový lem o odstín tmavší, aby kotouč nesplynul
   s pásem, na kterém leží. Je to značka pozice na stupnici, ne obrázek magnetu. */
.ap-magnet{position:absolute;top:50%;left:calc(var(--pos,5) * 10%);width:20px;height:20px;
  border-radius:50%;transform:translate(-50%,-50%);
  background:color-mix(in srgb,var(--tx) 62%,var(--bg-card));
  border:1px solid color-mix(in srgb,var(--tx) 72%,var(--bg-card))}

/* Póly: levý u nuly, pravý u desítky, pod dráhou jako na kartě. */
.ap-poles{display:flex;justify-content:space-between;gap:14px;margin:7px 0 0;
  font-size:11.5px;line-height:1.35;color:var(--tx-2)}
.ap-poles span:first-child::first-letter,.ap-poles span:last-child::first-letter{text-transform:uppercase}
.ap-poles span:last-child{text-align:right}

/* Pohyb: jen když si to člověk nezakázal. Přechod je na left, ne na transform —
   transform už drží centrování a míchat obojí by znamenalo počítat pozici v JS. */
@media(prefers-reduced-motion:no-preference){
  .ap-magnet{transition:left var(--dur,4s) cubic-bezier(.45,.05,.3,1)}
}

/* Volná karta: co s linkami. Zadání pro AI je citát — vlevo linka jako u .note,
   proto zaoblené jen pravé rohy (jednostranný rámeček, viz CLAUDE.md). */
.blank-tip{margin:14px 0 0;font-size:13px;line-height:1.55;color:var(--tx-body)}
.blank-tip p{margin:0 0 8px}
.blank-tip .blank-prompt{margin:0;padding:10px 14px;border-left:2px solid var(--line);
  border-radius:0 var(--r) var(--r) 0;background:var(--bg-soft);font-family:var(--serif);
  font-style:italic;color:var(--tx-2)}

/* Výběr podoby vlastní karty (11. 9. 2026). Dvě varianty téže dlaždice, ne dva
   produkty — proto stojí pod sebou v jednom rámu a ne vedle sebe jako dlaždice.
   Vybraná je poznat plochou a barevnou hranou, ne jen tečkou v kolečku: volba
   mění cenu i tlačítko a musí být vidět od pohledu.

   Rádio se neschovává (visibility ani display:none) — jen se na něj nekreslí
   vlastní vzhled. Čtečka i klávesnice tak fungují bez dalšího zařizování. */
/* Povinné pravidlo, stejně jako u .deck-toggle[hidden] výš: .btn má
   display:inline-flex, a ten by atribut hidden přebil — schované tlačítko
   by zůstalo vidět a v patičce by stála obě naráz. */
[data-variant-btn][hidden]{display:none}

.card-variants{display:grid;gap:8px;margin:14px 0 0;padding:0;border:0}
.cv-opt{display:block;cursor:pointer}
.cv-opt input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.cv-in{display:block;padding:11px 13px;border:1px solid var(--line);
  border-left:3px solid var(--line);border-radius:0 var(--r) var(--r) 0;
  background:var(--bg-soft);transition:border-color .15s,background .15s}
.cv-opt:hover .cv-in{border-color:var(--tx-3)}

/* Vybraná varianta: hrana 3 px v barvě sady sama nestačila — proti nevybrané
   hraně vycházel kontrast 1,82:1 a proti ploše karty 2,47:1, obojí pod 3:1
   z WCAG 1.4.11 pro nemtextové prvky. A volba tady mění CENU i tlačítko, takže
   „skoro vidět“ je málo. Signály jsou proto tři a nesou se navzájem: širší hrana
   v textové barvě, tmavší obrys a plocha karty proti tlumené ploše nevybrané. */
.cv-opt input:checked + .cv-in{border-color:var(--tx-3);
  border-left:5px solid var(--tx-2);background:var(--bg-card)}
.cv-opt input:checked + .cv-in .cv-price{color:var(--tx-2)}
/* Obrys se kreslí na obal, protože samo rádio je jen 1px a nebylo by ho vidět. */
.cv-opt input:focus-visible + .cv-in{outline:2px solid var(--acc);outline-offset:2px}
.cv-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.cv-head b{font-size:14px}
.cv-price{font-size:12.5px;color:var(--tx-3);white-space:nowrap}
.cv-note{display:block;margin:4px 0 0;font-size:12.5px;line-height:1.5;color:var(--tx-body)}

@media (max-width:560px){
  .preview-questions{display:block}
}