uvnitř , protože :first-child ignoruje textové uzly — zvýrazněná pasáž se pak vysázela jako
verzálkový blok a zbytek věty osiřel na dalším řádku (tvrdě naučeno 16. 7. 2026, viz kap. 11). */
.psi-answer > strong:first-child{display:block;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;
color:var(--terra-dk);margin-bottom:.5em}
.psi-answer p:last-child{margin-bottom:0}
/* ---- Poznámky / výstrahy ---- */
.psi-tip{background:var(--sage-soft);border-left:5px solid var(--sage);border-radius:0 var(--r) var(--r) 0;padding:16px 20px;margin:22px 0}
.psi-warn{background:#FBEDE7;border-left:5px solid #C2402A;border-radius:0 var(--r) var(--r) 0;padding:16px 20px;margin:22px 0}
.psi-tip p:last-child,.psi-warn p:last-child{margin:0}
/* ---- CTA do Poradny (per-pilíř, generuje build.js → poradnaCta; kap. 3.3/5) ----
Kontextový odkaz z obsahové stránky do hubu poradny. Terakota = jediný CTA akcent.
Mobile-first: na úzkém displeji se tlačítko zalomí pod text (flex-wrap), text ≥ 12 px. */
.psi-poradna-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;
background:var(--card);border:1px solid var(--line);border-radius:var(--r);
padding:20px 24px;box-shadow:var(--shadow)}
.psi-pcta-ico{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
width:52px;height:52px;border-radius:14px;background:var(--terra-soft);color:var(--terra-dk)}
.psi-pcta-txt{flex:1 1 240px;min-width:0}
.psi-pcta-txt b{display:block;font-family:var(--font-display);font-weight:800;font-size:1.14rem;
letter-spacing:-.01em;line-height:1.25;margin-bottom:3px}
.psi-pcta-txt span{color:var(--muted);font-size:.96rem;line-height:1.5}
/* ---- Sticky note „tahák“ ---- */
.psi-note{position:relative;background:#FFF6D9;border:1px solid #EEDFA8;border-radius:6px;
padding:22px 20px 18px;box-shadow:var(--shadow);transform:rotate(-.8deg)}
.psi-note::before{content:"";position:absolute;top:-11px;left:50%;transform:translateX(-50%) rotate(1.5deg);
width:92px;height:22px;background:rgba(233,180,140,.55);border-radius:2px}
.psi-note ul{margin:.4em 0 0;padding-left:1.2em}
/* ---- Kroky ---- */
.psi-steps{list-style:none;counter-reset:psistep;margin:1.4em 0;padding:0}
.psi-steps>li{counter-increment:psistep;position:relative;padding:0 0 1.35em 58px}
.psi-steps>li::before{content:counter(psistep);position:absolute;left:0;top:-2px;width:40px;height:40px;
border-radius:12px;background:var(--ink);color:#fff;font-family:var(--font-display);font-weight:800;
font-size:1.15rem;display:flex;align-items:center;justify-content:center}
.psi-steps>li::after{content:"";position:absolute;left:19px;top:44px;bottom:8px;width:2px;background:var(--line)}
.psi-steps>li:last-child::after{display:none}
/* Nadpis kroku = PRVNÍ v (vzor: Nadpistext…).
Selektor MUSÍ zůstat úzký. `.psi-steps strong` chytalo i zvýraznění uvnitř věty,
rozlomilo ho na vlastní řádek a interpunkci za ním nechalo osiřelou na dalším
(„nechte **dokonale vyschnout** / . Vlhkost…“). Nalezeno 17× v 9 článcích,
17. 7. 2026 — nikdo si toho půl roku nevšiml, protože v každém článku to vypadá
jako překlep, ne jako chyba stylu. */
.psi-steps>li>strong:first-child{font-family:var(--font-display);font-weight:700;font-size:1.05rem;display:block;margin-bottom:.15em}
/* ---- Tabulky ----
.psi-table má min-width, takže na úzkém displeji tabulka NEZMIZÍ do nečitelna,
ale posouvá se do stran. Cena za to: poslední sloupec je mimo obraz a čtenářka
o něm neví. Proto .psi-tablescroll (obal dělá base.js) kreslí u kraje hranu,
dokud je kam posouvat. Náznak je povinný pro každý vodorovný scroll — viz
INSTRUKCE-VYVOJE.md, kap. „Responzivita“. */
.psi-tablewrap{overflow-x:auto;margin:1.6em 0;border:1px solid var(--line);border-radius:var(--r);background:var(--card);box-shadow:var(--shadow);
-webkit-overflow-scrolling:touch;scrollbar-width:thin}
/* Náznak posouvání — přepsáno 28. 7. 2026, čti PROČ, než to vrátíš zpět.
Historie: nejdřív gradient, ten 16. 7. vystřídalo kolečko se šipkou — prolnutí
do bílé sice přes světlé řádky vypadá dobře, ale přes tmavou hlavičku
(th má background:var(--ink)) udělá bílý šmouhový flek. To pořád platí,
gradient se nevrací.
Proč tedy pryč i kolečko: leželo na `top:50%`, tedy uprostřed tabulky —
a tam je text. Na měření 28. 7. překrývalo v prvním sloupci „Lavor nebo kbelík“
a vpravo hodnotu „~1 kg — 2–3 trička“. Náznak, který kvůli sobě schová obsah,
řeší půlku problému a půlku dělá.
Teď: hrana ve stylu stínu na KRAJNÍCH BUŇKÁCH. Nekreslí se přes text, ale pod
něj — čte se přesně jako „obsah pokračuje a podjíždí sem“. Přes tmavou hlavičku
je neviditelná, což nevadí: hlavička je pruh bez informace navíc a stín na
řádcích pod ní mluví za celou tabulku. Vlevo hranu drží ukotvený první sloupec
(viz níž), vpravo poslední sloupec.
POZOR: řetězec `.psi-tablescroll[data-more` musí v souboru zůstat — hlídá ho
tools/mobile-check.js (pravidlo 3) a jeho zmizení shodí build. */
.psi-tablescroll{position:relative}
.psi-tablescroll[data-more="1"] .psi-table :is(th,td):last-child{
box-shadow:-14px 0 14px -10px rgba(60,45,30,.55)}
/* Zaoblené rohy tabulky (naučeno 16. 7. 2026). Obal `.psi-tablewrap` má border-radius,
ALE nesmí mít overflow:hidden — to by na mobilu uřízlo vodorovný scroll (viz min-width
výš). Proto se rohy zaoblují na SAMOTNÝCH ROHOVÝCH BUŇKÁCH, ne přes overflow.
K tomu je potřeba `border-collapse:separate` (u collapse buňky border-radius ignorují)
+ `border-spacing:0`, ať mezi buňkami nevzniknou mezery. Vnitřní linky se pak kreslí
jednostranným border-top na td, aby se nezdvojovaly. Rohové buňky dostanou radius o 1px
menší než obal, ať terakotový/zelený lem levého borderu u kraje nekouká zpod obalu —
to byl ten „nejednotný obrys“. */
.psi-table{width:100%;border-collapse:separate;border-spacing:0;font-size:.95rem;min-width:560px;
font-variant-numeric:tabular-nums}
.psi-table th{background:var(--ink);color:#fff;text-align:left;padding:13px 16px;font-family:var(--font-display);
font-weight:700;font-size:.88rem;letter-spacing:.03em;white-space:nowrap}
.psi-table td{padding:14px 16px;border-top:1px solid var(--line);vertical-align:top}
.psi-table tbody tr:nth-child(even){background:var(--paper)}
.psi-table .ok{color:var(--sage);font-weight:700}
.psi-table .no{color:#C2402A;font-weight:700}
/* Zvýraznění řádku pod myší — jen tam, kde myš existuje. Na dotyku by `:hover`
zůstal „zaseknutý“ na posledním ťuknutém řádku. */
@media (hover:hover){
.psi-table tbody tr:hover,
.psi-table tbody tr:hover td:first-child{background:var(--soft)}
}
/* ---- Ukotvený první sloupec (od 28. 7. 2026) -----------------------------
Tabulka má min-width:560px, takže se na telefonu posouvá do stran. Dokud se
posouvala celá, odjel s ní i popisek řádku — u „Vana napuštěná do 10 cm“ jste
pak u posledního sloupce nevěděli, čí je to hodnota. Náznak (šipka) říkal, že
vpravo něco je; neřešil, že se ztratí klíč k řádku. První sloupec proto zůstává
stát a při odsunutí dostane hranu, aby bylo poznat, že text jede pod ním.
Pozadí musí být NEPRŮHLEDNÉ a musí kopírovat zebru řádku — sticky buňka jinak
prosvítá a text pod ní prochází. Na desktopu, kde se tabulka vejde, je to no-op. */
.psi-tablewrap[data-sticky="1"] .psi-table :is(th,td):first-child{position:sticky;left:0;z-index:1}
.psi-tablewrap[data-sticky="1"] .psi-table thead th:first-child{z-index:2}
.psi-tablewrap[data-sticky="1"] .psi-table tbody td:first-child{background:var(--card)}
.psi-tablewrap[data-sticky="1"] .psi-table tbody tr:nth-child(even) td:first-child{background:var(--paper)}
/* Hranu kreslíme jen když je opravdu odsunuto — data-less nastavuje base.js
při každém scrollu, takže tohle nepotřebuje ani řádek JS navíc. */
.psi-tablescroll[data-less="1"] .psi-tablewrap[data-sticky="1"] .psi-table :is(th,td):first-child{
box-shadow:14px 0 14px -10px rgba(60,45,30,.55)}
/* Horní rohy = krajní buňky hlavičky; dolní rohy = krajní buňky posledního řádku.
-1px oproti obalu (var(--r)=16 → 15) sedí na vnitřní hranu 1px borderu obalu. */
.psi-table thead th:first-child{border-top-left-radius:15px}
.psi-table thead th:last-child{border-top-right-radius:15px}
.psi-table tbody tr:last-child td:first-child{border-bottom-left-radius:15px}
.psi-table tbody tr:last-child td:last-child{border-bottom-right-radius:15px}
/* ---- Hodnocení (účinnost) ---- */
.psi-stars{color:var(--terra);letter-spacing:2px;font-size:.95rem}
.psi-stars .off{color:var(--line)}
/* Hodnocení metody = metadata pod nadpisem, ne součást názvu (D1).
V H2 se hvězdičky lámaly na mobilu, čtečka je slabikovala a tekly do TOC. */
.psi-rating{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);
border-radius:99px;padding:4px 12px;background:var(--card);margin:0 0 14px}
.psi-rating .psi-stars{font-size:.8rem}
.psi-rating>span:last-child{font-size:.8rem;font-weight:700;color:var(--muted)}
/* ---- FAQ ---- */
.psi-faq{margin:1.4em 0}
.psi-faq details{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);
margin-bottom:10px;overflow:hidden;transition:border-color .15s}
.psi-faq details[open]{border-color:#DCD2C0}
.psi-faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;
gap:14px;padding:16px 18px;font-family:var(--font-display);font-weight:700;font-size:1.02rem}
.psi-faq summary::-webkit-details-marker{display:none}
.psi-faq summary::after{content:"+";font-size:1.5rem;line-height:1;color:var(--terra);flex-shrink:0;
transition:transform .2s;font-weight:400}
.psi-faq details[open] summary::after{transform:rotate(45deg)}
.psi-faq .psi-faq-a{padding:0 18px 16px;color:var(--ink)}
.psi-faq .psi-faq-a p:last-child{margin:0}
/* ---- Obsah článku (TOC) + progres ---- */
.psi-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--terra);z-index:1200;transition:width .1s linear}
body.admin-bar .psi-progress{top:32px}
.psi-article-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:40px}
@media (min-width:1080px){.psi-article-grid{grid-template-columns:minmax(0,1fr) 260px}}
.psi-toc{display:none}
@media (min-width:1080px){
.psi-toc{display:block;position:sticky;top:96px;align-self:start;font-size:.9rem;
border-left:2px solid var(--line);padding-left:18px}
.psi-toc strong{display:block;font-family:var(--font-display);margin-bottom:.7em;font-size:.82rem;
letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.psi-toc ol{list-style:none;margin:0;padding:0}
.psi-toc li{margin-bottom:.6em}
.psi-toc a{color:var(--muted);text-decoration:none;display:block;line-height:1.4}
.psi-toc a:hover{color:var(--terra-dk)}
.psi-toc a.active{color:var(--terra-dk);font-weight:700}
}
.psi-toc-inline{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);margin:20px 0}
.psi-toc-inline summary{cursor:pointer;padding:14px 18px;font-weight:700;font-family:var(--font-display)}
.psi-toc-inline ol{margin:0;padding:0 18px 14px 36px}
.psi-toc-inline a{color:var(--muted)}
@media (min-width:1080px){.psi-toc-inline{display:none}}
/* ---- Interaktivní checklist ---- */
.psi-check{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;margin:24px 0;box-shadow:var(--shadow)}
.psi-check h3{margin-top:0}
.psi-check label{display:flex;gap:12px;align-items:flex-start;padding:8px 0;cursor:pointer;border-bottom:1px dashed var(--line)}
.psi-check label:last-of-type{border-bottom:none}
/* Zaškrtávátko (překresleno 16. 7. 2026). Čtyři hodnoty, které spolu drží — měň je naráz:
1. tah 2.6 (byl 3.4) — při 58 % z 20px krabičky vychází ~2px čára; 3.4 dělalo klikyhák;
2. velikost 58 % (byla 70 %) — fajfka narážela na okraje, teď kolem sebe má vzduch;
3. dráha M5 12.5l4.6 4.6L19.2 7 (byla M5 13l4 4 10-11) — delší rameno, opticky vystředěná;
4. prázdný rámeček 1.5px --line (byl 2px --muted) — v seznamu pěti položek dělal tmavý
rámeček hluk. Prázdné je tiché, hotové zelené: kontrast nese informaci.
Kolečko se zvažovalo a zamítlo: web má všude zaoblené čtverce a kruh významově patří
k výběru jedné možnosti z několika, ne k odškrtávání. */
.psi-check input{appearance:none;-webkit-appearance:none;width:24px;height:24px;border:1.5px solid var(--line);
border-radius:7px;flex-shrink:0;margin-top:2px;cursor:pointer;position:relative;background:var(--card);
transition:background-color .16s ease,border-color .16s ease}
.psi-check label:hover input:not(:checked){border-color:var(--sage);background:var(--sage-soft)}
.psi-check input:checked{background:var(--sage);border-color:var(--sage)}
/* Fajfka je kreslená ČISTÝM CSS (dva okraje otočené o 45°), ne SVG v data-URI.
Proč (16. 7. 2026): původní `url('data:image/svg+xml;utf8,