/* ═══════════════════════════════════════════════════════════════════════
   KOMPONENTY (vlastník V3) · SPEC 1.1, kap. 3.7.6 až 3.7.9b, 4.1.4 až 4.1.15
   Porovnání před a po, karta a karusel, kolečka a jejich příběhy, nádoby
   a sklenice pastelek, plánovač „Co chystáte?“, skutečné výsledky, lísteček
   zakladatelky a drobnosti patičky z generátorů (api/_casti.js).

   Pravidla souboru (SPEC 2 a 6.4):
   · barvy jen tokeny z css/zaklad.css; syrový HEX jen v data: URI a maskách
     (u masky barva nerozhoduje, rozhoduje jen krytí), vždy s komentářem;
   · animuje se jen transform, translate, rotate, scale a opacity; stín je
     vrstva ::after a animuje se její opacity (box-shadow nikdy);
   · zlomy jen 1160, 1000, 900, 640, 360 px, (max-height:500px), hover a pohyb;
   · recepty ze SPEC jsou doslova, doplňky pod nimi a s vysvětlením PROČ.
   ═══════════════════════════════════════════════════════════════════════ */


/* ══ 1 · POROVNÁNÍ PŘED A PO `.km-po` (SPEC 3.7.6) ═════════════════════
   Jen kompozitor: okno s overflow:hidden se posouvá o x, obraz v něm o −x.
   Při tahu se nic nepřekresluje, mění se jen transform tří prvků. */
.km-po{position:relative;overflow:hidden;touch-action:pan-y;user-select:none;isolation:isolate;cursor:ew-resize;margin:0;
  aspect-ratio:var(--po-pomer,4/3)}   /* --po-pomer: 3/4 omalovánka, 1 magnetka, 4/3 fotka */
.km-po img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.km-po-okno{position:absolute;inset:0;overflow:hidden;transform:translateX(calc(var(--x) * 100%))}
.km-po-po{position:absolute;inset:0;transform:translateX(calc(var(--x) * -100%))}
.km-po-uchyt{position:absolute;inset:0;pointer-events:none;transform:translateX(calc(var(--x) * 100%))}
.km-po-uchyt::before{content:"";position:absolute;top:0;bottom:0;left:-1.5px;width:3px;background:var(--list)}
.km-po-knoflik{position:absolute;top:50%;left:-22px;width:44px;height:44px;border-radius:50%;translate:0 -50%;
  background:var(--list) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23301834' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l-6 6 6 6M15 6l6 6-6 6'/%3E%3C/svg%3E") center/20px no-repeat;
  box-shadow:0 4px 10px rgb(var(--ink-rgb) / .3)}          /* %23301834 = --ink */
.km-po-stitek{position:absolute;top:12px;padding:4px 10px;border-radius:var(--r-pill);background:rgb(var(--list-rgb) / .92);font:600 13px/1.2 var(--f-ui)}
.km-po-stitek--pred{left:12px;opacity:var(--vid-pred,1)} .km-po-stitek--po{right:12px;opacity:var(--vid-po,1)}
.km-po-vstup{position:absolute;inset:0;opacity:0;margin:0;pointer-events:none}
.km-po:has(.km-po-vstup:focus-visible) .km-po-knoflik{outline:3px solid var(--focus);outline-offset:3px}

/* doplněk: štítky „Předtím / V barvách“ jsou nad obrazem, ale pod knoflíkem
   (knoflík se jich nesmí schovat) a barvu textu drží inkoust i na tmavé fotce */
.km-po-stitek{z-index:var(--z-predmet);color:var(--ink);pointer-events:none;white-space:nowrap}
.km-po-uchyt{z-index:var(--z-ozdoba)}
.km-po-knoflik{transition:scale var(--d-rychle) var(--ease-stisk)}
.km-po.je-tah .km-po-knoflik{scale:1.08}                   /* odezva do jednoho snímku: „držím to“ */
@media (hover:hover) and (pointer:fine){.km-po:hover .km-po-knoflik{scale:1.06}}
@media (forced-colors:active){.km-po-knoflik{border:2px solid CanvasText}.km-po-uchyt::before{background:CanvasText}}

/* Ukázková varianta (malý banner Staré fotky, porovnání uvnitř odkazu):
   uvnitř <a> nesmí být nic interaktivního, proto potomci ukazatel nechytají
   a kurzor zůstává kurzorem odkazu. Pohyb dělí JS podle ukazatele nad obalem. */
.km-po[data-po-ukazka]{cursor:inherit;touch-action:auto}
.km-po[data-po-ukazka] *{pointer-events:none}

/* Lupa na tváře (P2, data-po-lupa): obě vrstvy se zvětší stejně kolem téhož
   bodu (--lx, --ly v px), dělicí čára dál funguje. Jen transform. */
.km-po[data-po-lupa]{--lupa:1}
.km-po[data-po-lupa] .km-po-pred{transform:scale(var(--lupa));transform-origin:var(--lx,50%) var(--ly,50%)}
.km-po[data-po-lupa] .km-po-po{transform:translateX(calc(var(--x) * -100%)) scale(var(--lupa));transform-origin:var(--lx,50%) var(--ly,50%)}
.km-po.je-lupa{--lupa:2;cursor:move;touch-action:none}     /* přiblížený obraz se posouvá prstem všemi směry */
.km-po.je-lupa-ceka{cursor:zoom-in}
.km-po.je-lupa-prechod .km-po-pred,.km-po.je-lupa-prechod .km-po-po{transition:transform var(--d-stred) var(--ease-prichod)}
.km-po-lupa{position:absolute;right:var(--s3);bottom:var(--s3);z-index:var(--z-text);display:grid;place-items:center;
  width:var(--cil);height:var(--cil);border:0;border-radius:50%;cursor:pointer;color:var(--ink);
  background:var(--list);box-shadow:0 4px 10px rgb(var(--ink-rgb) / .3)}
.km-po-lupa svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.km-po-lupa[aria-pressed="true"]{background:var(--kouzlo);color:var(--list)}
.km-po-lupa:focus-visible{outline:3px solid var(--focus);outline-offset:3px}


/* ══ 2 · KARTA PRODUKTU A KARUSEL (SPEC 3.7.7) ═════════════════════════ */
.km-karta{position:relative;display:flex;flex-direction:column;background:var(--list);border-radius:var(--r-karta);padding:10px 10px 18px;   /* list papíru, obrázek je výtisk s bílým okrajem */
  color:var(--ink);text-decoration:none;box-shadow:var(--stin-karta);isolation:isolate}
.km-karta::after{content:"";position:absolute;inset:0;z-index:var(--z-pod);border-radius:inherit;box-shadow:var(--stin-zvednuta);opacity:0;
  transition:opacity var(--d-stred) var(--ease-prichod)}                 /* stín se neanimuje, jen jeho vrstva */
.km-karta-obr{position:relative;aspect-ratio:4/5;border-radius:var(--r-papir);overflow:hidden;background:var(--pt,var(--papir-2));view-transition-name:var(--vt,none)}
.km-karta-obr img{width:100%;height:100%;object-fit:cover}
.km-karta-stitky{position:absolute;left:10px;top:10px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.km-karta-telo{display:flex;flex-direction:column;flex:1;padding:14px 6px 0}
.km-karta-popis{margin-top:6px;font:500 15px/1.45 var(--f-ui);color:var(--ink-dim)}
.km-karta-pata{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-top:auto;padding-top:14px}
@media (hover:hover) and (pointer:fine){
  .km-karta{transition:translate var(--d-stred) var(--ease-prichod)}
  .km-karta:hover{translate:0 calc(-1 * var(--posun-zdvih))}
  .km-karta:hover::after{opacity:1}
  .km-karta:hover .km-sipka{background:var(--akce)}}          /* bez rotace ikony: druhý pohyb vedle zdvihu je zbytečný */
.km-karta:active{scale:.985}
.km-karta:focus-visible{outline:3px solid var(--focus);outline-offset:4px;border-radius:var(--r-karta)}

.km-karusel{position:relative}
.km-karusel-pas{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 3 * 24px) / 4);gap:24px;overflow-x:auto;
  scroll-snap-type:x mandatory;scrollbar-width:none;padding-block:12px 20px;overscroll-behavior-x:contain}
.km-karusel-pas > *{scroll-snap-align:start;min-width:0}
.km-karusel-sip{position:absolute;top:40%;z-index:var(--z-text)}
.km-karusel-sip--zpet{left:-24px;rotate:180deg} .km-karusel-sip--dal{right:-24px}
@media (max-width:1000px){.km-karusel-pas{grid-auto-columns:calc((100% - 2 * 16px) / 3);gap:16px}}
@media (max-width:640px){.km-karusel-pas{grid-auto-columns:78%;gap:12px}
  .km-karusel-sip{display:none}.km-karta-popis{display:none}.km-visacka small{display:none}}

/* doplňky karty:
   · titulek a pata nesmí nikdy vytlačit šířku (visačka má nowrap, SPEC 4.6);
   · karta se přistáním (data-odhal) posouvá transformem, zdvih při najetí je
     vlastnost translate: obojí se skládá, nikdy se nepřepíše;
   · šipka zmalinoví jen s myší (malinová v řadě karet svítí až na ukázání). */
.km-karta-telo > *,.km-karta-pata > *{min-width:0}
.km-karta .km-sipka{transition:background-color var(--d-rychle) var(--ease)}
.km-karta-obr .km-samolepka{max-width:100%}
.km-karusel-pas::-webkit-scrollbar{display:none}             /* Safari: scrollbar-width neumí */
.km-karusel-pas:focus-visible{outline:3px solid var(--focus);outline-offset:4px;border-radius:var(--r-list)}
.km-karusel-sip[hidden]{display:none}
/* šipky vně mřížky se musí vejít do bočního okraje stránky (na 768 px je okraj jen 21 px) */
@media (max-width:1000px){.km-karusel-sip--zpet{left:calc(-1 * min(24px, var(--okraj) - 4px))}.km-karusel-sip--dal{right:calc(-1 * min(24px, var(--okraj) - 4px))}}
.km-karusel-sip:not([aria-disabled="true"]):hover{background:var(--akce)}
/* tah myší: během tahu bez přichytávání (jinak by se prohlížeč přetahoval s rukou),
   po puštění JS vrátí přichytávání a pás dosedne na nejbližší kartu */
html[data-vstup="mys"] .km-karusel-pas{cursor:grab}
.km-karusel-pas.je-tazeni{scroll-snap-type:none;cursor:grabbing;user-select:none}
.km-karusel-pas.je-tazeni .km-karta{pointer-events:none}
/* telefon: pás přes celou šířku displeje, karty ale lícují s obsahem
   (okraj stránky je odsazení pásu, ne jeho hranice); stín karty se neořízne */
@media (max-width:640px){
  .km-karusel-pas{margin-inline:calc(-1 * var(--okraj));padding-inline:var(--okraj);scroll-padding-inline:var(--okraj)}}

/* Poslední karta: hlasování. Kraft je tu povolený (SPEC 3.2), jamka je prázdné
   místo s čárkovaným obrysem: „tady bude další styl“. Pořadí vrstev: kraft
   musí přebít podklad .km-karta, proto vlastní pravidlo, ne jen .km-kraft. */
.km-karta--hlas{background:var(--vlakna),var(--kraft)}
.km-karta-jamka{display:grid;place-items:center;background:rgb(var(--list-rgb) / .55);
  box-shadow:inset 0 0 0 2px rgb(var(--ink-rgb) / .28);outline:2px dashed rgb(var(--ink-rgb) / .38);outline-offset:-12px}
.km-karta-jamka .km-ikona-riso{width:64px;height:64px}
.km-karta--hlas .km-karta-popis{display:block;color:var(--ink)}   /* na kraftu inkoust (11,3 : 1), popis zůstává i na telefonu: je to celá výzva */
@media (hover:hover) and (pointer:fine){.km-karta--hlas:hover .km-tl--inkoust{--bg:var(--akce);--hrana:var(--akce-a)}}

/* Na dárek: tři karty v mřížce, na telefonu a tabletu vodorovný pás 78 % */
.km-darky{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@media (max-width:900px){
  .km-darky{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - 16px) / 2.2);gap:16px;overflow-x:auto;
    scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;
    margin-inline:calc(-1 * var(--okraj));padding:var(--s3) var(--okraj) var(--s5);scroll-padding-inline:var(--okraj)}
  .km-darky::-webkit-scrollbar{display:none}
  .km-darky > *{scroll-snap-align:start}}
/* dárkové karty nesou příběh dárku a jsou jen tři: popis i cena v korunách zůstávají
   i na telefonu (karusel stylů je na telefonu schovává kvůli hustotě, SPEC 3.7.7) */
@media (max-width:640px){.km-darky{grid-auto-columns:78%}.km-darky .km-karta-popis{display:block}.km-darky .km-visacka small{display:inline}}


/* ══ 3 · KOLEČKA KATEGORIÍ (SPEC 3.7.8) ════════════════════════════════ */
.km-kolecka{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:18px;list-style:none;padding:0}
.km-kolecko{display:flex;flex-direction:column;align-items:center;gap:var(--s3);min-height:var(--cil);color:var(--ink);
  text-decoration:none;font:600 15px/1.25 var(--f-ui);text-align:center}
.km-placka{position:relative;overflow:hidden;width:100%;max-width:124px;aspect-ratio:1;border-radius:50%;background:var(--pt,var(--list));
  box-shadow:0 0 0 4px var(--list),var(--stin-samolepka);           /* vystřižené kolečko papíru, ne odznak */
  transition:translate var(--pruzina-hrava-doba) var(--pruzina-hrava),rotate var(--pruzina-hrava-doba) var(--pruzina-hrava)}
.km-placka img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.km-placka-hladina{position:absolute;inset:0;overflow:hidden;transform:translateY(101%);transition:transform var(--d-dlouze) var(--ease-prichod)}
.km-placka-hladina img{transform:translateY(-101%);transition:transform var(--d-dlouze) var(--ease-prichod)}  /* obraz stojí */
/* žádný ::after (lesk odznaku je pryč) */
.km-kolecko:is(:hover,:focus-visible,.je-aktivni) .km-placka{box-shadow:0 0 0 4px var(--list),0 0 0 7px var(--ps,var(--s-lev)),var(--stin-samolepka)}
.km-kolecko:hover .km-placka-hladina,.km-kolecko:focus-visible .km-placka-hladina,.km-kolecko.je-vybarvene .km-placka-hladina,
.km-kolecko:hover .km-placka-hladina img,.km-kolecko:focus-visible .km-placka-hladina img,.km-kolecko.je-vybarvene .km-placka-hladina img{transform:none}
@media (hover:hover) and (pointer:fine){.km-kolecko:hover .km-placka{translate:0 -6px;rotate:-6deg}}
@media (max-width:900px){.km-kolecka{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px 14px}}

/* Vlnitá hladina (SPEC 3.7.8): barva se do kolečka nalije zespodu jako voda
   do kelímku s vodovkami. Obal hladiny je o 12 px vyšší (vlna 240 × 12 nad
   horní hranou kolečka, ořízne ji overflow), obraz v něm sedí přesně na
   kolečku. Protisměrný posun musí mít stejnou dráhu: obal jede o 101 %
   SVÉ výšky (výška kolečka + 12 px), obraz tedy o −101 % své výšky a navíc
   −12,12 px. Tak obraz během nalévání stojí a pohybuje se jen hladina.
   Maska: vlna nahoře + plný obdélník pod ní (barva masky nerozhoduje). */
.km-placka-hladina{top:-12px;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 12' preserveAspectRatio='none'%3E%3Cpath d='M0 7Q20 1 40 7T80 7T120 7T160 7T200 7T240 7V12H0Z'/%3E%3C/svg%3E") 0 0/100% 12px no-repeat,linear-gradient(#000 0 0) 0 12px/100% calc(100% - 12px) no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 12' preserveAspectRatio='none'%3E%3Cpath d='M0 7Q20 1 40 7T80 7T120 7T160 7T200 7T240 7V12H0Z'/%3E%3C/svg%3E") 0 0/100% 12px no-repeat,linear-gradient(#000 0 0) 0 12px/100% calc(100% - 12px) no-repeat}
.km-placka-hladina img{top:12px;height:calc(100% - 12px);transform:translateY(calc(-101% - 12.12px))}
.km-kolecko-nazev{display:block;max-width:124px;text-wrap:balance}
.km-kolecko:active .km-placka{scale:.94;transition:scale var(--d-stisk) var(--ease-stisk),translate var(--pruzina-hrava-doba) var(--pruzina-hrava),rotate var(--pruzina-hrava-doba) var(--pruzina-hrava)}
.km-kolecko:focus-visible{outline:none}                       /* fokus nese prstenec barvy produktu … */
.km-kolecko:focus-visible .km-placka{outline:3px solid var(--focus);outline-offset:9px}   /* … a navíc fialový kruh (barva nikdy jediný nositel) */
/* klidná úroveň: barva se neprolije, jen prolne (200 ms) */
html[data-pohyb="klidna"] .km-placka-hladina,html[data-pohyb="klidna"] .km-placka-hladina img{transform:none!important}
html[data-pohyb="klidna"] .km-placka-hladina{opacity:0;transition:opacity 200ms linear!important}
html[data-pohyb="klidna"] .km-kolecko:is(:hover,:focus-visible,.je-vybarvene) .km-placka-hladina{opacity:1}
@media (prefers-reduced-motion:reduce){
  .km-placka-hladina,.km-placka-hladina img{transform:none!important}
  .km-placka-hladina{opacity:0;transition:opacity 200ms linear!important}
  .km-kolecko:is(:hover,:focus-visible,.je-vybarvene) .km-placka-hladina{opacity:1}}


/* ══ 4 · PŘÍBĚHY KOLEČEK `dialog.km-pribeh` (P2, SPEC 3.7.8) ═══════════
   Jen na dotyku. Přes celou obrazovku, podklad je barevný papír produktu
   (máslový, nebeský, růžový) se zrnem, projekt leží na čistém listu. */
.km-pribeh{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;
  color:var(--ink);background:var(--zrno),var(--pp,var(--p-lev));overflow:hidden;overscroll-behavior:contain}
.km-pribeh[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto;
  opacity:1;translate:0 0;transition:opacity var(--d-kryt) var(--ease-kryt),translate var(--d-stred) var(--ease-prichod),
  display var(--d-stred) allow-discrete,overlay var(--d-stred) allow-discrete}
@starting-style{.km-pribeh[open]{opacity:0;translate:0 32px}}
.km-pribeh:not([open]){opacity:0;translate:0 12px;transition:opacity var(--d-rychle) linear,translate var(--d-rychle) linear,
  display var(--d-rychle) allow-discrete,overlay var(--d-rychle) allow-discrete}
.km-pribeh::backdrop{background:rgb(var(--ink-rgb) / .5)}
.km-pribeh-hlava{display:flex;align-items:center;gap:var(--s3);padding:calc(var(--s3) + env(safe-area-inset-top)) var(--s4) var(--s2)}
.km-pribeh-pruhy{flex:1;display:flex;gap:4px;min-width:0}
.km-pribeh-pruh{flex:1;height:4px;border-radius:var(--r-pill);background:rgb(var(--ink-rgb) / .18);overflow:hidden}
.km-pribeh-pruh i{display:block;height:100%;background:var(--ink);transform-origin:0 50%;transform:scaleX(var(--p,0))}
.km-pribeh-zavrit{flex:none}
.km-pribeh-scena{position:relative;display:grid;place-items:center;min-height:0;padding:var(--s3) var(--s5);touch-action:none}
.km-pribeh-list{position:relative;width:min(100%,calc((100dvh - 300px) * var(--pomer,.75)),520px);aspect-ratio:var(--pomer,.75);
  background:var(--list);box-shadow:var(--stin-zvednuta);border-radius:var(--r-papir);padding:10px;
  transition:translate var(--d-stred) var(--ease-prichod)}
.km-pribeh-obraz{position:relative;width:100%;height:100%;overflow:hidden;border-radius:var(--r-papir)}
.km-pribeh-obraz > img{position:absolute;inset:0;width:100%;height:100%}
.km-pribeh-po{object-fit:contain;background:var(--list)}
.km-pribeh-pred{object-fit:cover}
.km-pribeh-pauzak{position:absolute;inset:0;transform:translateY(-101%);pointer-events:none}   /* .km-pauzak z zaklad.css */
.km-pribeh-list .km-po{position:absolute;inset:0;aspect-ratio:auto}
.km-pribeh-telo{display:grid;justify-items:center;gap:var(--s2);padding:var(--s3) var(--s4) calc(var(--s5) + env(safe-area-inset-bottom));text-align:center}
.km-pribeh-nazev{font:var(--w-titul) 26px/1.1 var(--f-titul);letter-spacing:-.015em;text-wrap:balance}
.km-pribeh-cena{font:550 var(--t-meta)/1.3 var(--f-ui);color:var(--ink)}   /* na pastelu inkoust, ne tlumený (čte se cena) */
.km-pribeh-telo .km-tl{margin-top:var(--s2);width:min(100%,360px)}
/* ťukací zóny: levá polovina zpět, pravá dál (jako příběhy v aplikacích) */
.km-pribeh-zona{position:absolute;top:0;bottom:0;width:50%;z-index:var(--z-text);background:none;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.km-pribeh-zona--zpet{left:0} .km-pribeh-zona--dal{right:0}
.km-pribeh-zona:focus-visible{outline:3px solid var(--focus);outline-offset:-6px}
/* tah dolů zavírá: scéna jede za prstem 1:1, bez přechodu */
.km-pribeh.je-tah .km-pribeh-list{transition:none}
/* klidná úroveň: místo proměny porovnání a viditelné šipky (bez automatického posunu) */
.km-pribeh-sipky{display:none}
.km-pribeh.je-klidna .km-pribeh-zona{display:none}
.km-pribeh.je-klidna .km-pribeh-sipky{position:absolute;inset:auto var(--s3) 50%;display:flex;justify-content:space-between;pointer-events:none;translate:0 50%;z-index:var(--z-text)}
.km-pribeh.je-klidna .km-pribeh-sipky .km-sipka{pointer-events:auto}
.km-pribeh-sipky .km-sipka--zpet svg{rotate:180deg}
@media (max-height:500px){.km-pribeh-list{width:min(100%,calc((100dvh - 190px) * var(--pomer,.75)))}.km-pribeh-telo{grid-auto-flow:column;align-items:center}}


/* ══ 5 · NÁDOBY A SKLENICE PASTELEK (SPEC 3.7.9) ═══════════════════════ */
.km-nadoby{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:end}
.km-nadoba{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--s2);
  padding:var(--s6) var(--s5) var(--s5);border-radius:var(--r-karta);background:var(--list);box-shadow:var(--stin-karta)}
.km-nadoba--zlata{background:var(--zrno),var(--p-mas);box-shadow:var(--stin-zvednuta);rotate:0deg;padding-block:var(--s7) var(--s6)}  /* „připnuto“ říká páska, ne náklon; cena stojí rovně */
.km-nadoba-stitek{position:absolute;top:18px;right:14px}
.km-nadoba-stitek{z-index:var(--z-ozdoba)}                     /* samolepka je nalepená navrch, pastelky sklenice ji nepřekryjí */
.km-nadoba-pocet{font:600 17px/1 var(--f-ui)} .km-nadoba-pocet b{font:var(--w-titul) var(--t-cislo)/1 var(--f-titul);letter-spacing:-.03em}
.km-nadoba-cena{font:700 28px/1 var(--f-ui)}
.km-nadoba-priklad{font:500 15px/1.45 var(--f-ui);color:var(--ink-dim);max-width:22em}
.km-nadoba .km-tl{margin-top:var(--s3)}
@media (max-width:900px){.km-nadoby{grid-template-columns:1fr}.km-nadoba--zlata{order:-1}}

/* doplňky nádob:
   · na jednom sloupci nádoba nesmí být 700 px široký pruh: vystředěná a úzká;
   · tlačítko je dole i u kratších nádob (stejná výška řádku v mřížce);
   · perex s cenou za kredit na máslovém lístku je inkoustem tlumeným 5,24 : 1 → drží se --ink-dim jen na listu. */
.km-nadoba > *{min-width:0}
.km-nadoba .km-tl{margin-top:auto;align-self:stretch}
.km-nadoba .km-nadoba-priklad + .km-tl,.km-nadoba .km-t-meta + .km-tl{margin-top:var(--s3)}
.km-nadoba-cena{margin-top:var(--s1)}
.km-nadoba--zlata .km-nadoba-priklad{color:var(--ink)}
.km-nadoba h3{margin-top:var(--s2)}
@media (max-width:900px){.km-nadoby{justify-items:center}.km-nadoba{width:100%;max-width:440px}}

.km-sklenice{position:relative;width:var(--sk-w,140px);height:var(--sk-h,170px);margin-inline:auto}
.km-sklenice{flex:none}                                          /* v řádku (zásuvka, účet) se nádoba nesmí smrštit */
.km-sklenice[data-nadoba="hrnek"]{--sk-w:120px;--sk-h:140px} .km-sklenice[data-nadoba="penal"]{--sk-w:200px;--sk-h:110px}
.km-sklenice > img{position:absolute;inset:0;width:100%;height:100%;z-index:var(--z-ozdoba);pointer-events:none}
.km-pastelka-v{position:absolute;bottom:14%;left:var(--x);width:12px;height:62%;border-radius:3px 3px 2px 2px;background:var(--b);
  rotate:var(--r);transform-origin:50% 100%;box-shadow:inset -3px 0 0 rgb(var(--ink-rgb) / .12)}
.km-pastelka-v::before{content:"";position:absolute;left:0;right:0;top:-12px;height:13px;background:var(--b);
  clip-path:polygon(50% 0,100% 100%,0 100%)}                                              /* špička */
.km-pastelka-v.je-nova{opacity:.4;outline:1.5px dashed var(--ink-dim)}                     /* náhled „přibude“ v zásuvce */

/* doplňky sklenice:
   · --x je střed pastelky (JS počítá rozestup středů), proto posun o půl šířky;
   · zadní řada leží výš (--y) a v DOM dřív než přední, aby špičky vykukovaly nad sebou;
   · přední stěna (obrázek V6 nebo záložní kresba) je vždy nad pastelkami,
     zadní stěna (jen penál) pod nimi. */
.km-pastelka-v{margin-left:-6px;margin-bottom:var(--y,0px);z-index:var(--z-predmet)}   /* zadní řada je v DOM dřív, přední ji překryje */
.km-sklenice > .km-nadoba-predek{position:absolute;inset:0;width:100%;height:100%;z-index:var(--z-ozdoba);pointer-events:none;overflow:visible}
.km-sklenice > .km-nadoba-zada{position:absolute;inset:0;width:100%;height:100%;z-index:var(--z-pod);pointer-events:none}
.km-sklenice{isolation:isolate}
/* penál: pastelky v otevřeném penálu leží šikmo, delší a vějířem (SPEC 7.4) */
.km-sklenice[data-nadoba="penal"] .km-pastelka-v{height:140%;bottom:47%}   /* 154 px dlouhé, leží (rotate ~80°) nad klopou */
.km-sklenice-vic{position:absolute;right:-6px;top:-4px;z-index:var(--z-text);padding:3px 9px;border-radius:var(--r-pill);
  background:var(--list);color:var(--ink);font:700 var(--t-stitek)/1.2 var(--f-ui);box-shadow:0 0 0 1.5px var(--linka),var(--stin-samolepka)}
.km-sklenice[data-nadoba="penal"] .km-sklenice-vic{right:auto;left:-6px;top:-6px}   /* vpravo nahoře je štítek nádoby */
/* záložní kresba nádob (do dodání images/kresbicky/*.svg od V6): tokeny přes style, ne atributy */
.km-nadoba-predek .km-obrys{fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}


/* ══ 6 · PLÁNOVAČ „CO CHYSTÁTE?“ (P2, SPEC 3.7.9b) ═════════════════════
   List na stole nad nádobami. Předvolby jsou čipy (výběr = fialová, ne
   malinová), řádky mají krokovač − počet + s cíli 48 px. Výsledek se ukáže
   až s prvním kreditem: pastelky, které máte (plné), a které chybí (čárkované),
   věta s doporučením a jediné tlačítko inkoustem. */
.km-planovac{margin:0 auto var(--s7);max-width:960px}
.km-planovac:empty{min-height:420px}                           /* místo pro blok, než dorazí katalog (bez skoku) */
.km-planovac-list{background:var(--list);border-radius:var(--r-list);box-shadow:var(--stin-karta);padding:var(--s6) var(--s6) var(--s5)}
.km-planovac-hlava{display:grid;gap:var(--s2);max-width:40em}
.km-planovac-hlava p{color:var(--ink-dim)}
.km-planovac-cipy{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s5)}
.km-cip{display:inline-flex;align-items:center;gap:var(--s2);min-height:var(--cil);padding:0 18px;border:0;border-radius:var(--r-pill);cursor:pointer;
  background:var(--papir);color:var(--ink);font:600 15px/1.2 var(--f-ui);box-shadow:inset 0 0 0 1.5px var(--pole-linka);
  transition:translate var(--pruzina-magnet-doba) var(--pruzina-magnet),background-color var(--d-rychle) var(--ease)}
.km-cip svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.km-cip[aria-pressed="true"]{background:var(--t-lev);box-shadow:inset 0 0 0 2px var(--kouzlo);translate:0 -2px}
.km-cip[aria-pressed="false"] svg{display:none}
@media (hover:hover) and (pointer:fine){.km-cip:hover{background:var(--t-lev)}}
.km-cip:active{scale:.97}
.km-cip:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.km-planovac-radky{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3) var(--s5);margin-top:var(--s5)}
.km-planovac-radek{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);min-height:64px;
  padding:var(--s2) var(--s2) var(--s2) var(--s4);border-radius:var(--r-ovladani);background:var(--papir);box-shadow:inset 0 0 0 1.5px var(--linka)}
.km-planovac-radek.je-vybrany{background:var(--t-lev);box-shadow:inset 0 0 0 1.5px color-mix(in oklch,var(--p-lev),var(--kouzlo) 30%)}
.km-planovac-nazev{min-width:0;font:600 16px/1.3 var(--f-ui)}
.km-planovac-nazev small{display:block;margin-top:2px;font:500 var(--t-meta)/1.3 var(--f-ui);color:var(--ink-dim)}
.km-krokovac{display:flex;align-items:center;flex:none}
.km-krokovac button{display:grid;place-items:center;width:var(--cil);height:var(--cil);border:0;border-radius:50%;cursor:pointer;
  background:var(--list);color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink);transition:translate var(--d-rychle) var(--ease-stisk)}
.km-krokovac button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round}
.km-krokovac button:active{translate:0 1px}
.km-krokovac button[aria-disabled="true"]{box-shadow:inset 0 0 0 2px var(--linka);color:var(--ink-dim);cursor:default}
.km-krokovac button:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.km-krokovac button:not([aria-disabled="true"]):hover{background:var(--t-lev)}}
.km-planovac-pocet{display:inline-grid;place-items:center;min-width:44px;height:var(--cil);overflow:hidden;font:700 22px/1 var(--f-ui)}
.km-planovac-pocet > span{display:block}
.km-planovac-vysledek{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s4) var(--s5);
  margin-top:var(--s5);padding:var(--s5);border-radius:var(--r-mala);background:var(--t-lev)}
.km-planovac-vysledek[hidden]{display:none}
.km-planovac-text{display:grid;gap:var(--s1);font:500 16px/1.5 var(--f-ui)}
.km-planovac-text b{font-weight:700}
.km-planovac-text .km-planovac-hlavni{font:600 19px/1.35 var(--f-ui)}
.km-planovac-akce{display:flex;justify-content:flex-end}
.km-planovac-akce .km-tl{white-space:nowrap}
/* pastelky v řadě: plné = už máte (nebo dostanete na přivítanou), čárkované = chybí */
.km-planovac-pastelky{position:relative;display:flex;align-items:flex-end;gap:3px;height:56px;padding-top:12px}
.km-planovac-pastelky i{position:relative;display:block;width:8px;height:40px;border-radius:2px 2px 1px 1px;background:var(--b)}
.km-planovac-pastelky i::before{content:"";position:absolute;left:0;right:0;top:-8px;height:9px;background:var(--b);clip-path:polygon(50% 0,100% 100%,0 100%)}
.km-planovac-pastelky i.je-nova{background:none;box-shadow:inset 0 0 0 1.5px var(--kouzlo)}
.km-planovac-pastelky i.je-nova::before{background:var(--kouzlo);opacity:.5}
.km-planovac-pastelky b{align-self:center;margin-left:var(--s1);font:700 var(--t-stitek)/1 var(--f-ui)}
@media (max-width:900px){
  .km-planovac-vysledek{grid-template-columns:minmax(0,1fr)}
  .km-planovac-akce{justify-content:stretch}.km-planovac-akce .km-tl{width:100%;white-space:normal}}
@media (max-width:640px){
  .km-planovac-list{padding:var(--s5) var(--s4) var(--s4)}
  .km-planovac-radky{grid-template-columns:minmax(0,1fr)}
  .km-planovac-cipy{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--s4));padding:0 var(--s4) var(--s1)}
  .km-planovac-cipy::-webkit-scrollbar{display:none}
  .km-cip{flex:none}
  .km-planovac-vysledek{padding:var(--s4)}}


/* ══ 7 · SKUTEČNÉ VÝSLEDKY (SPEC 4.1.6) ════════════════════════════════
   Sekce se vykreslí až se třemi skutečnými ukázkami (generátor). */
.km-ukazky{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start}
.km-ukazka{margin:0;padding:10px 10px 16px;border-radius:var(--r-list)}
.km-ukazka .km-po{border-radius:var(--r-papir)}
.km-ukazka-popis{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);padding:14px 6px 0}
.km-ukazka-nazev{flex-basis:100%;font:var(--w-karta) var(--t-karta)/1.22 var(--f-titul)}
.km-ukazky-akce{display:flex;justify-content:center;margin-top:var(--s6)}
@media (max-width:900px){
  .km-ukazky{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:78%;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
    scrollbar-width:none;margin-inline:calc(-1 * var(--okraj));padding:var(--s3) var(--okraj) var(--s5);scroll-padding-inline:var(--okraj)}
  .km-ukazky::-webkit-scrollbar{display:none}
  .km-ukazky > *{scroll-snap-align:start}}


/* ══ 8 · TVÁŘ ZNAČKY (SPEC 4.1.10, 4.1.13) ═════════════════════════════
   Lísteček zakladatelky na plstěné nástěnce: polaroid 120 px se skutečnou
   fotkou a lístek ze sešitu. Popisek polaroidu teče pod fotkou (ne přes
   pevný spodní okraj), aby delší jméno a město nikdy nevylezly z papíru. */
.km-tvar{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:start;gap:var(--s5);margin-top:var(--s6)}
.km-tvar[data-tvar="b"]{grid-template-columns:minmax(0,1fr)}
.km-tvar-foto{width:120px;margin-top:var(--s2)}
.km-tvar-foto .km-polaroid-in{padding-bottom:0}
.km-tvar-foto img{height:auto}                                 /* atribut height="480" by jinak přebil aspect-ratio */
.km-tvar-foto figcaption{position:static;display:block;padding:8px 6px 10px;text-align:center;font-size:19px;line-height:1.1;text-wrap:balance}
.km-tvar-listek{max-width:34em}
.km-tvar-listek .km-listek-nadpis + .km-listek-text{margin-top:0}
.km-tvar-dal .km-odkaz{padding:0;border:0;background:none;cursor:pointer;font:inherit;font-weight:600;
  display:inline-flex;align-items:center;min-height:var(--cil);margin-block:-12px}   /* cíl 48 px, řádek sešitu 24 px nerozbije */
@media (max-width:360px){.km-tvar{grid-template-columns:minmax(0,1fr)}.km-tvar-foto{justify-self:start}}

/* Okno „Celý příběh“: dialog je .km-okno (V1), tady jen vnitřek. */
.km-okno--pribeh{width:min(560px,calc(100% - 32px))}
.km-pribeh-text{display:grid;gap:var(--s3);margin-top:var(--s4);font:500 var(--t-body)/var(--lh-text) var(--f-ui);color:var(--ink)}
.km-pribeh-podpis{margin-top:var(--s5);font-size:34px;color:var(--ink)}
.km-podpis svg{width:4.4em}                                    /* symbol r-podpis má vlastní viewBox: šířku dáváme, výšku drží .km-ruka */
.km-okno-dole{display:none}
@media (max-width:640px){.km-okno-dole{display:block;margin-top:var(--s5)}}

/* Patička (obsah generátorů v casti/paticka.html, V1 styluje sloupce) */
.km-paticka-puvod{margin-top:var(--s3);color:var(--noc-text-dim)}
.km-paticka-podpis{font-size:34px;color:var(--p-ruz)}
.km-paticka-kontakt{color:var(--noc-text-dim)}


/* Vynucené barvy (Windows kontrast): obrysy kreslené stínem zmizí, proto skutečný rámeček */
@media (forced-colors:active){
  .km-cip,.km-krokovac button,.km-po-lupa,.km-planovac-radek{border:2px solid ButtonText}
  .km-cip[aria-pressed="true"]{border-color:Highlight}
  .km-pastelka-v,.km-planovac-pastelky i{forced-color-adjust:none}}


/* ══ 9 · VĚTA O PLATBĚ (SPEC 4.1.11, 4.4.3) ════════════════════════════ */
.km-platby{display:flex;align-items:flex-start;gap:var(--s2)}
.km-platby-zamek{flex:none;width:18px;height:18px;margin-top:1px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.km-platby-ikony{display:inline-flex;gap:var(--s2);margin-left:var(--s1)}
.km-platby-ikony svg{width:38px;height:24px}