/* Poradna beeworkers.cz — sdílená sazba sekce.
   Vznikla 13. 9. 2026 se sekcí o hliněných omítkách.

   PROČ VLASTNÍ SOUBOR: `transparentni-stavba.html` nese svou sazbu v page-local
   <style> (63 kB stránka). U šesti stránek poradny by týž blok existoval šestkrát
   a oprava odstavcové sazby by se dělala šestkrát — táž past jako OU-72
   (sdílený skript existuje na jednom webu, na druhém se zapomene).
   Palette a rodiny písma se NEDEFINUJÍ znovu, dědí se ze `styles.css`
   (bg #0f0f0f, text #F0EDE8, zlatá #D4A017, Barlow Condensed + Inter).

   SAZBA ODSTAVCŮ (pravidlo 11. 9. 2026): jeden blok pro celou stránku, nikdy
   `style` v každém odstavci. Délku odstavců měří `tools/pristupy/typograf.py --mereni`
   (medián 25 až 40 slov, strop 80).

   KONTRAST. Nejtěsnější pár NENÍ --po-faint (#9a968f na #0f0f0f má 6,51:1).
   Skutečně nejtěsnější je akcent hlíny --po-clay:
     .po-note-t  #B4704A na panelu #141210 = 4,77:1  ← rezerva 0,27 nad AA
     .po-tag     #B4704A na #0f0f0f        = 4,89:1
   Zesvětlení --po-panel nebo ztmavení --po-clay shodí první pár pod normu.
   Hlídej tenhle pár, ne --po-faint. --po-clay-soft (#8d5637) je jen rámeček
   (3,06 až 3,30:1) — nad 3:1 pro netextový prvek, ale taky jen o vlas.
   Změřeno 13. 9. 2026 vlastním výpočtem WCAG luminance nad tokeny; vykreslené
   páry měří `tools/design/kontrast.py`.
*/

:root {
  --po-bg: #0f0f0f;
  --po-panel: #141210;
  --po-panel-2: #17150f;
  --po-line: #2a2a2a;
  --po-line-soft: #1f1f1f;
  --po-text: #F0EDE8;
  --po-body: #c9c5bd;
  --po-faint: #9a968f;
  --po-gold: #D4A017;
  --po-gold-soft: #cfa53a;
  --po-gold-hi: #FFD166;
  --po-clay: #B4704A; /* hlína — vlastní akcent sekce, ne zlatá firmy */
  --po-clay-soft: #8d5637;
}

html, body { overflow-x: clip; }

/* Hlavička je `position:sticky` a vysoká 68 px (`styles.css`). Bez tohohle
   řádku skok z `.po-toc` na kapitolu položí nadpis POD ten pruh — a u fokusu
   po vnitřním odkazu je to WCAG 2.2 bod 2.4.11. */
html { scroll-padding-top: 80px; }

/* `.po-q` vzniká v pomůckách jako `<fieldset>`, ne `<div>` (skupina
   radiobuttonů potřebuje `legend`). Bez tohohle resetu si vezme UA default
   `border: 2px groove` a na pozadí #0f0f0f z toho je šedý rámeček kolem každé
   skupiny. Třída OU-48: prvek z `createElement` proti stylu, který ho nečeká. */
fieldset.po-q { border: 0; padding: 0; margin-inline: 0; min-width: 0; }
fieldset.po-q > legend { padding: 0; }

/* Přebíjí `.skip` ze `styles.css` (jiná geometrie i barva). Kaskádou vyhrává
   tenhle blok, protože `poradna.css` se linkuje druhý — kdyby se pořadí
   `<link>` obrátilo, odkaz se utne. Jedna definice na stránku, ne dvě. */
.skip {
  position: absolute; left: -9999px; top: 0;
  background: #F0EDE8; color: #141414; padding: 10px 18px; z-index: 3000;
  font: 600 15px Inter, sans-serif; border-radius: 0 0 8px 0; text-decoration: none;
}
.skip:focus { left: 0; top: 0; }

/* ---------- drobečky a hlavička ---------- */

.po-breadcrumb { font: 400 13px Inter, sans-serif; color: var(--po-faint); margin: 0 0 22px; }
.po-breadcrumb a { color: var(--po-faint); text-decoration: none; border-bottom: 1px solid var(--po-line); }
.po-breadcrumb a:hover { color: var(--po-gold-hi); border-color: var(--po-gold-hi); }
.po-breadcrumb span[aria-current] { color: var(--po-body); }

.po-hero { padding: 110px 0 30px; }
.po-eyebrow {
  font: 500 13px Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase;
  color: var(--po-gold); margin: 0 0 12px;
}
.po-h1 {
  font: 600 clamp(34px, 5.2vw, 56px)/1.05 'Barlow Condensed', sans-serif;
  text-transform: uppercase; color: var(--po-text); margin: 0 0 18px;
  overflow-wrap: anywhere; min-width: 0;
}

/* Odpověď první (AEO): shrnutí nad obsahem, ne pod ním. */
.po-answer {
  max-width: 760px; background: var(--po-panel);
  border: 1px solid var(--po-line); border-left: 3px solid var(--po-clay);
  border-radius: 6px; padding: 22px 26px;
  font: 400 16.5px/1.7 Inter, sans-serif; color: var(--po-body); margin: 0;
}
.po-answer b { color: var(--po-text); font-weight: 600; }
.po-answer :last-child { margin-bottom: 0; }

.po-meta {
  display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: baseline;
  font: 400 13.5px Inter, sans-serif; color: var(--po-faint); margin: 20px 0 0;
}
.po-meta time { color: var(--po-body); }

/* ---------- obsah stránky ---------- */

.po-toc {
  margin: 32px 0 0; padding: 0; list-style: none; counter-reset: kap;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr));
  gap: 8px 22px;
}
.po-toc li { counter-increment: kap; font: 400 14px/1.5 Inter, sans-serif; }
.po-toc a {
  color: var(--po-body); text-decoration: none; display: flex; gap: 10px; align-items: baseline;
  padding: 6px 0; border-bottom: 1px solid var(--po-line-soft);
}
.po-toc a::before {
  content: counter(kap, decimal-leading-zero);
  font: 600 12px 'Barlow Condensed', sans-serif; color: var(--po-gold); letter-spacing: .08em; flex: none;
}
.po-toc a:hover { color: var(--po-gold-hi); border-color: var(--po-gold-soft); }

/* ---------- kapitoly ---------- */

.po-kap { padding: 52px 0 0; }
.po-kap-head { display: flex; gap: 18px; align-items: flex-start; margin: 0 0 22px; }

/* Šestiúhelník = identita Bee Workers (honeycomb), ne dekorace navíc. */
.po-hex { position: relative; width: 44px; height: 50px; flex: none; }
.po-hex-a {
  position: absolute; inset: 0;
  background: var(--po-panel-2); border: 1px solid var(--po-line);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
.po-hex-n {
  position: absolute; inset: 0; display: grid; place-items: center;
  font: 700 17px 'Barlow Condensed', sans-serif; color: var(--po-gold); letter-spacing: .04em;
}

.po-h2 {
  font: 600 clamp(26px, 3.6vw, 38px)/1.1 'Barlow Condensed', sans-serif;
  text-transform: uppercase; color: var(--po-text); margin: 0;
  overflow-wrap: anywhere; min-width: 0;
}
.po-h3 {
  font: 600 19px/1.3 Inter, sans-serif; color: var(--po-text); margin: 30px 0 10px;
}

.po-body { max-width: 760px; }
.po-body p { font: 400 16.5px/1.75 Inter, sans-serif; color: var(--po-body); margin: 0 0 18px; }
.po-body p b, .po-body p strong { color: var(--po-text); font-weight: 600; }
.po-body ul, .po-body ol { margin: 0 0 20px; padding-left: 22px; }
.po-body li { font: 400 16.5px/1.7 Inter, sans-serif; color: var(--po-body); margin: 0 0 9px; }
.po-body li b, .po-body li strong { color: var(--po-text); font-weight: 600; }
.po-body a { color: var(--po-gold-soft); text-decoration: none; border-bottom: 1px solid rgba(212, 160, 23, .45); }
.po-body a:hover { color: var(--po-gold-hi); border-color: var(--po-gold-hi); }

/* Vysvětlivka k číslu: odkud je. D123 se sází, ne schovává. */
.po-zdroj { font: 400 13.5px/1.6 Inter, sans-serif; color: var(--po-faint); margin: -8px 0 20px; }
.po-zdroj a { color: var(--po-faint); border-bottom-color: var(--po-line); }

/* ---------- tabulky ---------- */

.po-tabwrap { overflow-x: auto; margin: 0 0 22px; border: 1px solid var(--po-line); border-radius: 8px; }
.po-tab { width: 100%; border-collapse: collapse; font: 400 15px Inter, sans-serif; min-width: 520px; }
.po-tab caption {
  text-align: left; padding: 14px 16px 12px; color: var(--po-faint);
  font: 400 13.5px/1.5 Inter, sans-serif; border-bottom: 1px solid var(--po-line-soft);
}
.po-tab th, .po-tab td { padding: 11px 16px; text-align: left; vertical-align: top; border-top: 1px solid var(--po-line-soft); }
.po-tab thead th {
  font: 600 12.5px Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase;
  color: var(--po-gold); background: var(--po-panel-2); border-top: 0;
}
.po-tab td { color: var(--po-body); }
.po-tab tbody th { color: var(--po-text); font-weight: 600; }
.po-tab td b { color: var(--po-text); }

/* ---------- upozornění ---------- */

.po-note {
  border: 1px solid var(--po-line); border-left: 3px solid var(--po-clay);
  background: var(--po-panel); border-radius: 6px; padding: 18px 22px; margin: 0 0 22px; max-width: 760px;
}
.po-note p { margin: 0 0 12px; font: 400 15.5px/1.7 Inter, sans-serif; color: var(--po-body); }
.po-note p:last-child { margin: 0; }
.po-note-t {
  font: 600 12.5px Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase;
  color: var(--po-clay); margin: 0 0 8px;
}
.po-note--stop { border-left-color: #C8553D; }
.po-note--stop .po-note-t { color: #E0705A; }

/* ---------- pomůcka (embed) ---------- */

.po-tool {
  background: var(--po-panel); border: 1px solid var(--po-line); border-radius: 10px;
  padding: 24px clamp(18px, 3vw, 28px); margin: 0 0 26px; max-width: 860px;
}
.po-tool-h {
  font: 600 clamp(20px, 2.6vw, 25px)/1.2 'Barlow Condensed', sans-serif;
  text-transform: uppercase; color: var(--po-text); margin: 0 0 8px; letter-spacing: .02em;
}
.po-tool-p { font: 400 15px/1.65 Inter, sans-serif; color: var(--po-faint); margin: 0 0 20px; }

.po-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 16px 20px; margin: 0 0 20px; }
.po-f { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.po-f label, .po-f .po-flab { font: 600 13px Inter, sans-serif; color: var(--po-body); }
.po-f .po-fhint { font: 400 12.5px/1.5 Inter, sans-serif; color: var(--po-faint); }
.po-f input[type="number"], .po-f input[type="text"], .po-f select {
  font: 400 16px Inter, sans-serif; color: var(--po-text);
  background: #0c0b09; border: 1px solid var(--po-line); border-radius: 7px;
  padding: 10px 12px; width: 100%; box-sizing: border-box;
}
.po-f input:focus-visible, .po-f select:focus-visible, .po-tool button:focus-visible,
.po-tool input[type="radio"]:focus-visible, .po-tool input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--po-gold-hi); outline-offset: 2px;
}
.po-f input[type="range"] { width: 100%; accent-color: var(--po-gold); }

.po-btn {
  font: 600 14px Inter, sans-serif; color: #141210; background: var(--po-gold);
  border: 1px solid var(--po-gold); border-radius: 8px; padding: 10px 20px; cursor: pointer;
}
.po-btn:hover { background: var(--po-gold-hi); border-color: var(--po-gold-hi); }
.po-btn--ghost { background: transparent; color: var(--po-body); border-color: var(--po-line); }
.po-btn--ghost:hover { background: transparent; color: var(--po-gold-hi); border-color: var(--po-gold-soft); }
.po-btnrow { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 4px; }

.po-out { border-top: 1px solid var(--po-line); margin: 20px 0 0; padding: 20px 0 0; }
.po-out-row { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 0 0 14px; }
.po-out-k { font: 400 13px Inter, sans-serif; color: var(--po-faint); display: block; margin: 0 0 3px; }
.po-out-v { font: 600 clamp(22px, 3vw, 30px) 'Barlow Condensed', sans-serif; color: var(--po-gold-hi); letter-spacing: .02em; }
.po-out-v small { font: 400 14px Inter, sans-serif; color: var(--po-body); margin-left: 4px; }
.po-out p { font: 400 14.5px/1.65 Inter, sans-serif; color: var(--po-body); margin: 0 0 10px; }
.po-out p:last-child { margin: 0; }
.po-out-note { font: 400 13px/1.6 Inter, sans-serif; color: var(--po-faint); }

/* Semafor: nikdy jen barva, vždy i slovo (D26). */
.po-flag { display: inline-flex; align-items: baseline; gap: 8px; font: 600 14px Inter, sans-serif; }
.po-flag::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; flex: none; transform: translateY(-1px); }
.po-flag--ok { color: #7FB069; }
.po-flag--warn { color: #E0A53A; }
.po-flag--bad { color: #E0705A; }

/* ---------- checklist ---------- */

.po-chk { background: var(--po-panel); border: 1px solid var(--po-line); border-radius: 10px; padding: 24px clamp(18px, 3vw, 28px); margin: 0 0 26px; max-width: 860px; }
.po-chk ul { list-style: none; margin: 0; padding: 0; }
.po-chk li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--po-line-soft); }
.po-chk li:first-of-type { border-top: 0; }
.po-chk input[type="checkbox"] { margin: 1px 0 0; width: 24px; height: 24px; flex: none; accent-color: var(--po-gold); }
.po-chk label { font: 400 15.5px/1.6 Inter, sans-serif; color: var(--po-body); cursor: pointer; }
.po-chk label b { display: block; color: var(--po-text); font-weight: 600; margin: 0 0 2px; }

/* ---------- rozhodovací strom / self-test ---------- */

.po-q { margin: 0 0 20px; }
.po-q-t { font: 600 16.5px/1.5 Inter, sans-serif; color: var(--po-text); margin: 0 0 12px; }
.po-opts { display: grid; gap: 10px; }
.po-opt { display: flex; gap: 12px; align-items: flex-start; background: var(--po-panel-2); border: 1px solid var(--po-line); border-radius: 8px; padding: 13px 16px; cursor: pointer; }
.po-opt:hover { border-color: var(--po-gold-soft); }
.po-opt input { margin: 3px 0 0; flex: none; accent-color: var(--po-gold); }
.po-opt span { font: 400 15.5px/1.6 Inter, sans-serif; color: var(--po-body); }
.po-opt span b { color: var(--po-text); font-weight: 600; }

/* Tabulka pod pomůckou zůstává čitelná bez JS — pomůcka ji jen zkracuje. */
.po-fallback:not([hidden]) { display: block; }

/* ---------- rozcestník sekce ---------- */

.po-list { display: grid; gap: 0; margin: 34px 0 0; max-width: 900px; border-top: 1px solid var(--po-line); }
.po-item { display: grid; grid-template-columns: 44px 1fr; gap: 18px; padding: 26px 0; border-bottom: 1px solid var(--po-line); align-items: start; }
.po-item-n { font: 700 20px 'Barlow Condensed', sans-serif; color: var(--po-gold); padding-top: 3px; }
.po-item-h { font: 600 clamp(20px, 2.6vw, 26px)/1.22 'Barlow Condensed', sans-serif; text-transform: uppercase; color: var(--po-text); margin: 0 0 8px; }
.po-item-h a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.po-item-h a:hover { color: var(--po-gold-hi); border-color: var(--po-gold-soft); }
.po-item p { font: 400 15.5px/1.7 Inter, sans-serif; color: var(--po-body); margin: 0 0 10px; }
.po-item-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; font: 400 13px Inter, sans-serif; color: var(--po-faint); }
.po-tag { font: 600 11.5px Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; color: var(--po-clay); border: 1px solid var(--po-clay-soft); border-radius: 999px; padding: 3px 10px; }

/* ---------- prev/next a patka článku ---------- */

.po-prevnext { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; margin: 46px 0 0; max-width: 860px; }
.po-pn { background: var(--po-panel); border: 1px solid var(--po-line); border-radius: 8px; padding: 16px 20px; text-decoration: none; display: block; }
.po-pn:hover { border-color: var(--po-gold-soft); }
.po-pn-k { font: 600 11.5px Inter, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--po-faint); display: block; margin: 0 0 6px; }
.po-pn-t { font: 600 16px/1.4 Inter, sans-serif; color: var(--po-text); }
.po-pn:hover .po-pn-t { color: var(--po-gold-hi); }

.po-faq { margin: 46px 0 0; max-width: 860px; }
.po-faq details { border-top: 1px solid var(--po-line); padding: 0; }
.po-faq details:last-of-type { border-bottom: 1px solid var(--po-line); }
.po-faq summary { font: 600 16.5px/1.5 Inter, sans-serif; color: var(--po-text); padding: 18px 0; cursor: pointer; list-style: none; display: flex; gap: 14px; align-items: baseline; }
.po-faq summary::-webkit-details-marker { display: none; }
.po-faq summary::before { content: "+"; font: 400 20px 'Barlow Condensed', sans-serif; color: var(--po-gold); flex: none; }
.po-faq details[open] summary::before { content: "–"; }
.po-faq summary:hover { color: var(--po-gold-hi); }
.po-faq-a { padding: 0 0 20px 28px; }
.po-faq-a p { font: 400 16px/1.72 Inter, sans-serif; color: var(--po-body); margin: 0 0 14px; }
.po-faq-a p:last-child { margin: 0; }
/* Otevřené FAQ (h3 + p místo <details>): od 16. 9. 2026 ho používají přepsané
   články, aby na otázky dosáhla brána faq_zrcadleni.py. Bez tohohle pravidla
   odstavec nedědí nic — .po-faq je sourozenec .po-body, ne jeho potomek — a text
   se vykreslí patkovým výchozím písmem prohlížeče. */
.po-faq > h3 { max-width: 760px; }
.po-faq > p { font: 400 16.5px/1.75 Inter, sans-serif; color: var(--po-body); margin: 0 0 18px; max-width: 760px; }
.po-faq > p b, .po-faq > p strong { color: var(--po-text); font-weight: 600; }
.po-faq > p a { color: var(--po-gold-soft); text-decoration: none; border-bottom: 1px solid rgba(212, 160, 23, .45); }
.po-faq > p a:hover { color: var(--po-gold-hi); border-color: var(--po-gold-hi); }

.po-cta { background: var(--po-panel); border: 1px solid var(--po-line); border-left: 3px solid var(--po-gold); border-radius: 8px; padding: 26px clamp(20px, 3vw, 30px); margin: 46px 0 0; max-width: 860px; }
.po-cta h2 { font: 600 clamp(22px, 3vw, 30px)/1.15 'Barlow Condensed', sans-serif; text-transform: uppercase; color: var(--po-text); margin: 0 0 12px; }
.po-cta p { font: 400 16px/1.7 Inter, sans-serif; color: var(--po-body); margin: 0 0 18px; }
.po-cta-row { display: flex; flex-wrap: wrap; gap: 12px; }

.po-end { padding: 0 0 90px; }

@media (max-width: 640px) {
  .po-hero { padding: 92px 0 24px; }
  .po-kap { padding: 40px 0 0; }
  .po-item { grid-template-columns: 1fr; gap: 8px; }
  .po-item-n { padding: 0; }
}

/* TISK. Článek 5 slibuje „checklist si můžete vytisknout", takže tisk je
   funkce, ne odpadní režim. Původní blok přebarvoval jen čtyři selektory
   a všechno ostatní si na bílém papíře nechalo světlou barvu z tmavého
   režimu: tučné titulky všech 23 položek checklistu měly na #fff kontrast
   1,17:1, tabulky vad a spotřeby 1,17 až 1,72:1 a boxy „Mantinel" 1,72:1 —
   tedy prakticky bílá na bílé. Vytiskl by se rám bez obsahu.
   Nález validation 13. 9. 2026. Proto se barva nastavuje na úrovni bloku. */
@media print {
  header, .po-toc, .po-prevnext, .po-cta, footer, .po-btnrow { display: none; }
  body { background: #fff; color: #111; }

  /* Interaktivní pomůcka na papíře nedává smysl — ovládat ji nejde. Skrývá se
     proto jen SLOT, do kterého se vykresluje, a panel checklistu („Splněno
     X z N", pruh, tlačítko). Statický fallback, který nese tutéž informaci,
     zůstává.
     POZOR: `.po-fallback` leží UVNITŘ `.po-tool`, takže `display:none` na
     `.po-tool` skryje i fallback a `display:block` na potomkovi to nevrátí —
     rodič s `display:none` nemá co vykreslovat. První verze tohohle bloku
     tuhle chybu měla a tisk článku 5 ztrácel celou tabulku vad; chytla ji
     až kontrola vykresleného tisku v prohlížeči, ne čtení CSS. */
  [id$="-slot"], .po-chk [role="status"] { display: none; }
  /* Fallback skryl JavaScript atributem `hidden` (= UA `display:none`),
     a ten v tisku platí dál. Bez tohohle řádku by se z pomůcky nevytisklo
     NIC: slot skrýváme my, fallback skryl skript. Na papíře je přitom
     statická tabulka to jediné použitelné. `!important` je tu proto, že
     přebíjí UA pravidlo pro `[hidden]`. */
  .po-fallback[hidden] { display: block !important; }
  .po-tool { border: 0; padding: 0; background: #fff; }

  .po-h1, .po-h2, .po-h3, .po-item-h, .po-tool-h { color: #000; }
  .po-body p, .po-body li, .po-chk label, .po-note p, .po-answer, .po-faq-a p,
  .po-faq > p, .po-item p, .po-out p { color: #111; }
  .po-body p b, .po-body p strong, .po-body li b, .po-body li strong,
  .po-chk label b, .po-answer b, .po-note-t, .po-tab td, .po-tab td b,
  .po-tab tbody th { color: #111; }
  .po-tab thead th { color: #000; background: #eee; }
  .po-zdroj, .po-tool-p, .po-out-note, .po-item-meta, .po-meta { color: #444; }
  .po-eyebrow { color: #444; }
  .po-tag { color: #444; border-color: #888; }

  .po-chk, .po-note, .po-answer, .po-tabwrap, .po-tab, .po-fallback,
  .po-tab tr, .po-tab td, .po-tab tbody th, .po-tool-h, .po-out {
    border-color: #999; background: #fff;
  }
  .po-tab caption { color: #444; background: #fff; }
  /* Checklist se odškrtává tužkou, prázdné políčko musí být vidět. */
  .po-chk input[type="checkbox"] { -webkit-appearance: none; appearance: none;
    border: 1px solid #333; width: 14px; height: 14px; }
  .po-tabwrap { overflow: visible; }
  .po-chk li, .po-body li { break-inside: avoid; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}