/* KOMPONENT ramceky — rámčeky (infografiky) v článkoch: .ph-b, Otázky .ph-bq, Record .ph-br, Reťazec .ph-bc,
   Porovnanie .ph-bx, Versus .ph-bv, Sekvencia .ph-bs, Finale .ph-bf, štítky .ph-bt, svetlý blok .ph-dia-light.
   HTML skladá 001-ph-core.js z blokov @… v článku (pomôcka tools/ramceky_html.py). Knižnica I2.
   Krok 9 / kúsok 4 (1. 11. 2026): presunuté zo style-…css a userStyles-…css doslova, v pôvodnom poradí; potom bez
   html body (html.f-js body → .f-js) a bez !important okrem 16 pravidiel, kde bez neho prehrajú s iným pravidlom
   (overené v Chrome na všetkých 47 stránkach, 1440 a 390). Väzby .lp-page / :not(.lp-page *) sú zámerné: rámčeky
   na stránkach konceptov vyzerajú inak než v článkoch. */

/* --- z style-a5de0145ecc1.css --- */
.ph-prose .ph-b {
  color: var(--f-ink);
  max-width: 888px;
  margin: 14px 0px;
  font-family: var(--font-f-font-sans);
}
.ph-b__head {
  display: flex;
  font-size: 10.5px;
  column-gap: 16px;
  justify-content: space-between;
}
.ph-b--dark {
  color: var(--f-paper);
  background: var(--f-ink);
  padding: 32px 32px 36px;
}
@media (max-width: 860px) {
  .ph-b--dark {
  padding: 24px 20px 28px;
  }
}
.ph-b--dark .f-mute {
  color: var(--f-mute-dark);
}
.ph-bq .ph-b__head {
  color: var(--f-mute-dark);
  padding-bottom: 22px;
}
.ph-bq__grid {
  display: grid;
  font-size: 18px;
  column-gap: 32px;
  line-height: var(--lh-uvod);
  grid-template-columns: repeat(2, minmax(0px, 1fr));
}
@media (max-width: 860px) {
  .ph-bq__grid {
  grid-template-columns: minmax(0px, 1fr);
  }
}
.ph-bq__row {
  display: grid;
  padding: 14px 0px;
  border-top-color: rgba(244, 243, 239, 0.16);
  border-top-style: solid;
  border-top-width: 1px;
  grid-template-columns: 48px minmax(0px, 1fr);
}
.ph-bq__n {
  color: var(--f-mute-dark);
  font-size: 11px;
}
.ph-bc {
  row-gap: 14px;
  display: flex;
  flex-direction: column;
}
.ph-bc__row {
  display: grid;
  position: relative;
  padding-top: 28px;
}
@media (max-width: 860px) {
  .ph-bc__row {
  row-gap: 28px;
  padding-top: 0px;
  grid-template-columns: repeat(2, minmax(0px, 1fr)) !important;
  }
}
.ph-bc__line {
  top: 6px;
  left: 6px;
  right: 6px;
  height: 1px;
  position: absolute;
  background: var(--f-ink);
  transform-origin: left center;
}
@media (max-width: 860px) {
  .ph-bc__line {
  display: none;
  }
}
.f-js .ph-bc:not(.is-in) .ph-bc__line {
  transform: scaleX(0);
}
.ph-bc__st {
  row-gap: 12px;
  display: flex;
  position: relative;
  padding-right: 12px;
  flex-direction: column;
}
.ph-bc__atom {
  top: -28px;
  left: 0px;
  width: 13px;
  height: 13px;
  position: absolute;
  background: var(--f-ink);
}
@media (max-width: 860px) {
  .ph-bc__atom {
  position: static;
  }
}
/* 4. 11. 2026 (Martin): atómy v Reťazci sú VŽDY plné — prázdny atóm (.is-o, zápis „o“ v @chain) sa kreslí rovnako ako plný.
   Trieda v HTML ostáva (generátor ju píše), len nemá vlastný vzhľad. */
.ph-bc__st .f-mono {
  font-size: 10.5px;
}
.ph-bc__t {
  font-size: 18px;
  font-weight: 500;
  line-height: var(--lh-veta);
}
.ph-bc__cap {
  display: flex;
  font-size: 10.5px;
  column-gap: 16px;
  justify-content: space-between;
}
.ph-bx {
  display: grid;
  box-shadow: inset 0 0 0 1px var(--f-ink);
  grid-template-columns: repeat(2, minmax(0px, 1fr));
}
@media (max-width: 860px) {
  .ph-bx {
  grid-template-columns: minmax(0px, 1fr);
  }
}
.ph-bx__p {
  row-gap: 20px;
  display: flex;
  padding: 28px 28px 32px;
  flex-direction: column;
}
.ph-bx__p--dark {
  color: var(--f-paper);
  background: var(--f-ink);
}
.ph-bx__p--dark .f-mute {
  color: var(--f-mute-dark);
}
.ph-bx__p .ph-b__head .f-mute {
  color: var(--f-mute-light);
}
.ph-bx__p--dark .ph-b__head .f-mute {
  color: var(--f-mute-dark);
}
.ph-bx__t {
  font-size: 28px;
  font-weight: 500;
  line-height: var(--lh-nadpis);
}
.ph-bx__list {
  display: flex;
  font-size: 16px;
  line-height: var(--lh-uvod);
  border-bottom: 1px solid var(--f-line-l);
  flex-direction: column;
}
.ph-bx__list > span {
  border-top: 1px solid var(--f-line-l);
  padding: 9px 0px;
}
.ph-bx__note {
  font-size: 10.5px;
  margin-top: auto;
  line-height: var(--lh-text);
}
.ph-bt {
  row-gap: 6px;
  display: flex;
  flex-wrap: wrap;
  column-gap: 6px;
}
.ph-br {
  padding: 0px;
}
.ph-br .ph-b__head {
  color: var(--f-mute-dark);
  padding: 18px 28px;
  border-bottom: 1px solid var(--f-line-d);
}
@media (max-width: 860px) {
  .ph-br .ph-b__head {
  padding: 16px 20px;
  }
}
.ph-br__sig {
  display: flex;
  column-gap: 8px;
  align-items: center;
}
.ph-br__sig::before {
  width: 7px;
  height: 7px;
  content: "";
}
.ph-br__grid {
  display: grid;
  font-size: 17px;
  line-height: var(--lh-uvod);
  padding: 6px 28px 18px;
  grid-template-columns: 160px minmax(0px, 1fr);
}
@media (max-width: 860px) {
  .ph-br__grid {
  padding: 6px 20px 14px;
  grid-template-columns: 110px minmax(0px, 1fr);
  }
}
.ph-br__k {
  color: var(--f-mute-dark);
  font-size: 10.5px;
  padding: 12px 0px;
  border-top-color: rgba(244, 243, 239, 0.1);
  border-top-style: solid;
  border-top-width: 1px;
}
.ph-br__v {
  padding: 12px 0px;
  border-top-color: rgba(244, 243, 239, 0.1);
  border-top-style: solid;
  border-top-width: 1px;
}
.ph-br__k:first-child {
  border-top-color: currentcolor;
  border-top-style: none;
  border-top-width: 0px;
}
.ph-br__k:first-child + .ph-br__v {
  border-top-color: currentcolor;
  border-top-style: none;
  border-top-width: 0px;
}
.ph-br__k.is-sig {
  color: var(--f-signal-max);
}
.ph-br__v.is-dep {
  color: var(--f-mute-dark);
  text-decoration-line: line-through;
  text-decoration-color: initial;
  text-decoration-style: initial;
  text-decoration-thickness: 1px;
}
.ph-bv {
  row-gap: 32px;
  display: grid;
  column-gap: 24px;
  grid-template-columns: repeat(2, minmax(0px, 1fr));
}
@media (max-width: 860px) {
  .ph-bv {
  grid-template-columns: minmax(0px, 1fr);
  }
}
.ph-bv__i {
  row-gap: 18px;
  display: flex;
  padding-top: 18px;
  flex-direction: column;
  border-top-color: rgba(16, 24, 32, 0.3);
  border-top-style: solid;
  border-top-width: 1px;
}
.ph-bv__i .ph-b__head {
  color: var(--f-mute-light);
}
.ph-bv__i.is-strong {
  border-top: 2px solid var(--f-ink);
  padding-top: 17px;
}
.ph-bv__i.is-strong .ph-b__head > span:first-child {
  color: var(--f-ink);
}
.ph-bv__t {
  color: var(--f-body-light);
  font-size: 24px;
  line-height: var(--lh-veta);
}
.ph-bv__i.is-strong .ph-bv__t {
  color: var(--f-ink);
  font-weight: 500;
}
@media (max-width: 860px) {
  .ph-bs {
  row-gap: 28px;
  grid-template-columns: repeat(2, minmax(0px, 1fr)) !important;
  }
}
.ph-bs__st {
  row-gap: 14px;
  flex-direction: column;
}
.ph-bs__atom {
  width: 10px;
  height: 10px;
  background: var(--f-ink);
}
.ph-bf {
  display: flex;
  font-weight: 500;
  border-bottom: 1px solid var(--f-ink);
  flex-direction: column;
}
.ph-bf__row {
  display: grid;
  border-top: 1px solid var(--f-line-l);
}
.ph-bf__row .f-mono {
  letter-spacing: 0.08em;
}
/* .ph-menu-open, .ph-menu-open body (stránka sa pri otvorenom menu neposúva) → presunuté do _system/css/komponenty/mobilne-menu.css (1. 11. 2026, krok 9) */








/* .ph-dia-light (svetlý blok; vytvára onedark() v 002-ph-ui.js, dnes na žiadnej stránke) — ponechané (rozhodnutie Martina 1. 11.) */
.ph-dia-light {
  color: var(--f-ink);
  background: var(--f-neutral);
}
.ph-dia-light * {
  color: inherit;
  border-color: var(--f-line-l);
}
.ph-dia-light .f-mute {
  color: var(--f-mute-light);
}
.ph-dia-light [class*="__k"] {
  color: var(--f-mute-light);
}
.ph-dia-light [class*="__n"] {
  color: var(--f-mute-light);
}
.ph-dia-light [class*="mute"] {
  color: var(--f-mute-light);
}
.ph-dia-light [class*="head"], .ph-dia-light [class*="__meta"] {
  color: var(--f-mute-light);
}
.ph-dia-light [class*="max"] {
  color: var(--f-ink);
}

/* --- z userStyles-b7accc8e732d.css --- */
/* 31. 10.: RÁMČEKY V ČLÁNKU sú vždy svetlé vložky (ako papierová karta) — vlastná svetlá téma, čitateľné na každej ploche;
   porovnanie (ph-bv) má papierové pozadie aj pod ľavým stĺpcom (v článku je pozadie aj tak papierové → bez zmeny) */
:is(.ph-bq, .ph-bv, .ph-br, .ph-bc, .ph-bt, .ph-bx, .ph-bf, .ph-bs):not(.vz-block) { --c-fg: var(--f-ink); --c-bg: var(--f-paper); --c-on: var(--f-paper); --c-mute: var(--f-mute-light); --c-body: var(--f-body-light); --c-line: var(--f-line-l); --c-line-s: var(--f-line-l2); --c-line2: rgba(16,24,32,.35); --c-wash: rgba(16,24,32,.05); color: var(--f-ink); }
.ph-prose :is(.ph-bv, .ph-bx):not(.vz-block) { background: var(--f-paper); }
.ph-prose .ph-b, .ph-prose .ph-bc { --ph-atom: currentColor; }
.ph-bf { letter-spacing: var(--tr-velky); }
.ph-bx__t { letter-spacing: var(--tr-velky); }
.ph-bv__t { letter-spacing: var(--tr-stredny); }
/* ČLÁNKY: infografika Finale (.ph-bf, záver článku) — menšie písmo a širší stĺpec menovky
   (bolo font-size clamp(30px, 3.05vw, 44px); stĺpec 72px → menovky ako „SCHOPNOSŤ“ narážali do textu) */
.ph-bf { font-size: var(--ts-stredny); line-height: var(--lh-veta); }
.ph-bf__row { grid-template-columns: 120px minmax(0, 1fr); column-gap: 16px; padding: 18px 0; }
@media (max-width: 860px) {
  .ph-bf__row { grid-template-columns: minmax(0, 1fr); row-gap: 6px; }  /* menovka nad textom */
}
.ph-bc__atom, .ph-bs__atom {
  border-radius: var(--f-atom-r);
  -webkit-mask: url(../../../uploads/atom.svg) no-repeat center / 100% 100%;
  mask: url(../../../uploads/atom.svg) no-repeat center / 100% 100%;
}
/* INFOGRAFIKA TAGS (.ph-bt): odlíšené od štítkov článkov (tie ostávajú obrysové, VERZÁLKY, mono).
   Bez rámika, plocha var(--f-neutral) (ako box Questions), bežné písanie (nie verzálky), articulat 500.
   Pointa (.ph-tag--max) ostáva tmavá s farebným atómom. */
.ph-bt .ph-tag {
  box-shadow: none; background: var(--f-neutral);
  text-transform: none; letter-spacing: -0.005em;
  font-family: var(--font-f-font-sans); font-weight: 500;
}
.ph-bt .ph-tag.ph-tag--max { background: var(--f-ink) !important; color: var(--f-paper) !important; }
/* INFOGRAFIKA STEPS (.ph-bs) — sekvencia ako typografický rytmus, odlíšená od reťazca (Chain):
   bez čiary a atómov, vety v jednom toku ako odsek, medzi nimi šípka (ikonka arrow-right, mute),
   posledná veta tučná (pointa). Vety nabiehajú postupne, keď sa blok dostane na obrazovku (.is-in z ph-core.js).
   HTML/JS sa nemení — skript dáva inline grid-template-columns, preto display: block !important. */
.ph-bs { display: block !important; border-top: 0; position: relative; }
/* hlavička ako pri Otázkach: „SEKVENCIA“ vľavo, počet krokov vpravo, pod ňou tenká linka */
.ph-prose .ph-bs::before { display: block; margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px solid var(--f-line-l);
  font-family: var(--font-f-font-mono);  line-height: var(--lh-text); letter-spacing: .08em; text-transform: uppercase; color: var(--f-mute-light);
}
.ph-prose .ph-bs::after {
  position: absolute; top: 32px; right: 32px;
  font-family: var(--font-f-font-mono);  line-height: var(--lh-text); letter-spacing: .08em; text-transform: uppercase; color: var(--f-mute-light);
}
.ph-prose .ph-bs:has(> :nth-child(2):last-child)::after { content: "2 kroky"; }
.ph-prose .ph-bs:has(> :nth-child(4):last-child)::after { content: "4 kroky"; }
.ph-prose .ph-bs:has(> :nth-child(5):last-child)::after { content: "5 krokov"; }
.ph-prose .ph-bs:has(> :nth-child(7):last-child)::after { content: "7 krokov"; }
.ph-prose .ph-bs:has(> :nth-child(8):last-child)::after { content: "8 krokov"; }
@media (max-width: 860px) { .ph-prose .ph-bs::after { top: 24px; right: 20px; } }
.ph-bs__atom { display: none; }
.ph-bs__st { display: inline; padding: 0; }
.ph-bs__t {
  font-family: var(--font-f-font-sans); font-size: clamp(21px, 1.8vw, 26px); font-weight: 400;
  line-height: var(--lh-text); letter-spacing: -0.0075em; color: var(--f-ink);
}
.ph-bs__st:last-child .ph-bs__t { font-weight: 600; }
.ph-bs__st + .ph-bs__st::before {
  content: ""; display: inline-block; height: 0.3em; aspect-ratio: 6 / 5; margin: 0 0.4em 0 0.35em;   /* v em, mení sa s textom (≈ 6,5 px pri 21 px, ako šípka v mono poznámkach) */
  vertical-align: 0.19em; background: var(--f-mute-light);
  -webkit-mask: url(../../../uploads/icons/arrow-right.svg) no-repeat center / contain;
  mask: url(../../../uploads/icons/arrow-right.svg) no-repeat center / contain;
}
/* postupné nabiehanie: každá veta (aj so šípkou pred ňou) o 220 ms neskôr */
.f-js .ph-bs__st { opacity: 0; transition: opacity var(--t-nabeh) var(--f-ease); transition-delay: calc(var(--i, 0) * 400ms); }   /* 400 ms = rovnaký krok ako reťazec a trajektória (predtým 220 ms) */
.f-js .ph-bs.is-in .ph-bs__st { opacity: 1; }
.ph-bs__st:nth-child(2) { --i: 1; }
.ph-bs__st:nth-child(3) { --i: 2; }
.ph-bs__st:nth-child(4) { --i: 3; }
.ph-bs__st:nth-child(5) { --i: 4; }
.ph-bs__st:nth-child(6) { --i: 5; }
.ph-bs__st:nth-child(7) { --i: 6; }
.ph-bs__st:nth-child(8) { --i: 7; }
.ph-bs__st:nth-child(n+9) { --i: 8; }
@media (prefers-reduced-motion: reduce) { .f-js .ph-bs__st { opacity: 1; transition: none; } }
/* INFOGRAFIKY V ČLÁNKOCH = OBRÁZKY: všetky typy bez vlastného rámu dostanú box ako Otázky/Record
   (plocha --f-neutral, odsadenie 32/32/36, mobil 24/20/28), aby bolo na prvý pohľad jasné, že nahrádzajú obrázok.
   Týka sa Steps (.ph-bs), Chain (.ph-bc), Finale (.ph-bf), Versus (.ph-bv).
   Tags (.ph-bt) zámerne bez boxu (štítky s neutrálnou plochou stoja priamo na papieri).
   Compare (.ph-bx) má vlastný rám. Stránky projektov a konceptov (.lp-page) sa nemenia. */
.ph-prose :is(.ph-bs, .ph-bc, .ph-bf, .ph-bv):not(.lp-page *) {
  background: var(--f-neutral); padding: 32px 32px 36px; box-sizing: border-box;
}
@media (max-width: 860px) {
  .ph-prose :is(.ph-bs, .ph-bc, .ph-bf, .ph-bv):not(.lp-page *) { padding: 24px 20px 28px !important; }
}
/* Finale v boxe: bez spodnej čiernej čiary (sedela by na hrane boxu) */
.ph-prose .ph-bf:not(.lp-page *) { border-bottom: 0; }
/* ZJEDNOTENÉ S TRAJEKTÓRIOU (.ph-traj): krok (bod → ďalší bod) 400 ms, atóm 320 ms, text 360 ms (+120 ms), mobil po 160 ms.
   Celá čiara = počet bodov × 400 ms (predtým pevne 1,6 s bez ohľadu na počet bodov). */
.ph-bc { --step: 400ms; --n: 6; }
.ph-bc__row { --bc-t: calc(var(--n) * var(--step)); }   /* na riadku, kde je --n podľa počtu bodov */
.ph-bc__row:has(> .ph-bc__st:nth-child(3):last-child) { --n: 2; }
.ph-bc__row:has(> .ph-bc__st:nth-child(4):last-child) { --n: 3; }
.ph-bc__row:has(> .ph-bc__st:nth-child(5):last-child) { --n: 4; }
.ph-bc__row:has(> .ph-bc__st:nth-child(6):last-child) { --n: 5; }
.ph-bc__row:has(> .ph-bc__st:nth-child(7):last-child) { --n: 6; }
.ph-bc__row:has(> .ph-bc__st:nth-child(8):last-child) { --n: 7; }
.ph-bc__row:has(> .ph-bc__st:nth-child(9):last-child) { --n: 8; }
.ph-bc__st:nth-child(3) { --i: 1; }
.ph-bc__st:nth-child(4) { --i: 2; }
.ph-bc__st:nth-child(5) { --i: 3; }
.ph-bc__st:nth-child(6) { --i: 4; }
.ph-bc__st:nth-child(7) { --i: 5; }
.ph-bc__st:nth-child(8) { --i: 6; }
.ph-bc__st:nth-child(9) { --i: 7; }
.ph-bc__line { transition: transform var(--bc-t) linear; }
.ph-bc__st { --d: calc(var(--i, 0) / var(--n) * var(--bc-t)); }
.f-js .ph-bc__atom { transform: scale(0); opacity: 0; transition: transform var(--t-zmena) var(--f-ease), opacity var(--t-rychlo) linear; transition-delay: var(--d); }
.f-js .ph-bc__st > :not(.ph-bc__atom) { opacity: 0; transform: translateY(6px); transition: opacity var(--t-zmena) var(--f-ease), transform var(--t-zmena) var(--f-ease); transition-delay: calc(var(--d) + 120ms); }
.f-js .ph-bc.is-in .ph-bc__atom { transform: none; opacity: 1; }
.f-js .ph-bc.is-in .ph-bc__st > :not(.ph-bc__atom) { opacity: 1; transform: none; }
.f-js .ph-bc__cap { opacity: 0; transition: opacity var(--t-zmena) var(--f-ease); }
.f-js .ph-bc.is-in .ph-bc__cap { opacity: 1; }
@media (max-width: 860px) { .ph-bc__st { --d: calc(var(--i, 0) * 160ms); } }
@media (prefers-reduced-motion: reduce) {
  .f-js .ph-bc__atom, .f-js .ph-bc__st > *, .f-js .ph-bc__cap { opacity: 1 !important; transform: none !important; transition: none !important; }
}
/* JEDNOTNÁ ANIMÁCIA OSTATNÝCH INFOGRAFÍK V ČLÁNKOCH (2026-10-15): Záznam, Otázky, Záver, Dva pohľady, Porovnanie, Štítky.
   Princíp ako Sekvencia: keď sa blok objaví na obrazovke (.ph-b.is-in z ph-core.js), časti nabehnú postupne —
   mierny posun zdola (8 px) + zjasnenie 480 ms, medzi časťami oneskorenie --ig-step × poradie (--ig-i).
   Len CSS, platí pre všetkých 18 článkov naraz. Stránky projektov a konceptov (.lp-page) sa nemenia.
   Pri obmedzení pohybu (prefers-reduced-motion) je všetko hneď celé. */
.f-js .ph-prose:not(.lp-page *) :is(
  .ph-br .ph-b__head, .ph-br__k, .ph-br__v,
  .ph-bq .ph-b__head, .ph-bq__row,
  .ph-bf__row,
  .ph-bv__i,
  .ph-bx__p, .ph-bx__list > span, .ph-bx__tags > .ph-tag,
  .ph-bt > .ph-tag
) {
  opacity: 0; transform: translateY(8px);
  transition: opacity var(--t-nabeh) var(--f-ease), transform var(--t-nabeh) var(--f-ease);
  transition-delay: calc(var(--ig-i, 0) * var(--ig-step, 140ms) + var(--ig-d0, 0ms));
}
.f-js .ph-prose:not(.lp-page *) .ph-b.is-in :is(
  .ph-br .ph-b__head, .ph-br__k, .ph-br__v,
  .ph-bq .ph-b__head, .ph-bq__row,
  .ph-bf__row,
  .ph-bv__i,
  .ph-bx__p, .ph-bx__list > span, .ph-bx__tags > .ph-tag,
  .ph-bt > .ph-tag
) { opacity: 1; transform: none; }
.f-js .ph-prose:not(.lp-page *) .ph-b.is-in.ph-bt > .ph-tag,
.f-js .ph-prose:not(.lp-page *) .ph-b.is-in .ph-bv__i { opacity: 1; transform: none; }   /* .is-in je priamo na .ph-bt / .ph-bv */
/* ZÁZNAM: hlavička, potom riadky po jednom (kľúč a hodnota spolu); preškrtnutie starej verzie sa dokreslí po príchode riadku */
.ph-br { --ig-step: 140ms; }
.ph-br__grid > :nth-child(-n+2) { --ig-i: 1; }
.ph-br__grid > :nth-child(3), .ph-br__grid > :nth-child(4) { --ig-i: 2; }
.ph-br__grid > :nth-child(5), .ph-br__grid > :nth-child(6) { --ig-i: 3; }
.ph-br__grid > :nth-child(7), .ph-br__grid > :nth-child(8) { --ig-i: 4; }
.ph-br__grid > :nth-child(9), .ph-br__grid > :nth-child(10) { --ig-i: 5; }
.ph-br__grid > :nth-child(11), .ph-br__grid > :nth-child(12) { --ig-i: 6; }
.ph-br__grid > :nth-child(13), .ph-br__grid > :nth-child(14) { --ig-i: 7; }
.ph-br__grid > :nth-child(n+15) { --ig-i: 8; }
/* (kreslenie čiarou zľava nebolo možné bez zúženia bunky — tá nesie deliacu linku riadku; preto sa preškrtnutie zjaví) */
.f-js .ph-prose:not(.lp-page *) .ph-br__v.is-dep {
  text-decoration-color: transparent;
  transition: opacity var(--t-nabeh) var(--f-ease), transform var(--t-nabeh) var(--f-ease), text-decoration-color var(--t-zmena) linear;
  transition-delay: calc(var(--ig-i, 0) * var(--ig-step, 140ms)), calc(var(--ig-i, 0) * var(--ig-step, 140ms)), calc(var(--ig-i, 0) * var(--ig-step, 140ms) + 420ms);
}
.f-js .ph-prose:not(.lp-page *) .ph-b.is-in .ph-br__v.is-dep { text-decoration-color: currentColor; }
/* OTÁZKY: hlavička, potom otázky po jednom v poradí čítania */
.ph-bq { --ig-step: 110ms; }
.ph-bq__row:nth-child(1) { --ig-i: 1; }
.ph-bq__row:nth-child(2) { --ig-i: 2; }
.ph-bq__row:nth-child(3) { --ig-i: 3; }
.ph-bq__row:nth-child(4) { --ig-i: 4; }
.ph-bq__row:nth-child(5) { --ig-i: 5; }
.ph-bq__row:nth-child(6) { --ig-i: 6; }
.ph-bq__row:nth-child(7) { --ig-i: 7; }
.ph-bq__row:nth-child(8) { --ig-i: 8; }
.ph-bq__row:nth-child(n+9) { --ig-i: 9; }
/* ZÁVER: riadky zhora nadol, pomalší krok (veľké písmo, málo riadkov) */
.ph-bf { --ig-step: 200ms; }
.ph-bf__row:nth-child(2) { --ig-i: 1; }
.ph-bf__row:nth-child(3) { --ig-i: 2; }
.ph-bf__row:nth-child(4) { --ig-i: 3; }
.ph-bf__row:nth-child(5) { --ig-i: 4; }
.ph-bf__row:nth-child(n+6) { --ig-i: 5; }
/* DVA POHĽADY: najprv slabší (ľavý) pohľad, potom silnejší; jeho hrubá čiara sa natiahne zľava doprava */
.ph-bv { --ig-step: 380ms; }
.ph-bv__i:nth-child(2) { --ig-i: 1; }
.f-js .ph-prose:not(.lp-page *) .ph-bv__i.is-strong { position: relative; border-top-color: transparent; }
.f-js .ph-prose:not(.lp-page *) .ph-bv__i.is-strong::before {
  content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px; background: var(--f-ink);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--t-nabeh) var(--f-ease); transition-delay: calc(var(--ig-i, 0) * var(--ig-step) + 120ms);
}
.f-js .ph-prose:not(.lp-page *) .ph-bv.is-in .ph-bv__i.is-strong::before { transform: none; }
/* POROVNANIE: ľavá strana, potom pravá (silnejšia); riadky zoznamu v každej strane po jednom */
.ph-bx { --ig-step: 420ms; }
.ph-bx__p:nth-child(2) { --ig-i: 1; }
:is(.ph-bx__list > span, .ph-bx__tags > .ph-tag) { --ig-step: 80ms; --ig-d0: 160ms; }
.ph-bx__p:nth-child(2) :is(.ph-bx__list > span, .ph-bx__tags > .ph-tag) { --ig-d0: 580ms; }
:is(.ph-bx__list, .ph-bx__tags) > :nth-child(1) { --ig-i: 0; }
:is(.ph-bx__list, .ph-bx__tags) > :nth-child(2) { --ig-i: 1; }
:is(.ph-bx__list, .ph-bx__tags) > :nth-child(3) { --ig-i: 2; }
:is(.ph-bx__list, .ph-bx__tags) > :nth-child(4) { --ig-i: 3; }
:is(.ph-bx__list, .ph-bx__tags) > :nth-child(5) { --ig-i: 4; }
:is(.ph-bx__list, .ph-bx__tags) > :nth-child(6) { --ig-i: 5; }
:is(.ph-bx__list, .ph-bx__tags) > :nth-child(n+7) { --ig-i: 6; }
/* ŠTÍTKY: štítky po jednom, zvýraznený (pointa, .ph-tag--max) vždy posledný a jeho atóm „naskočí“ až po ňom */
.ph-bt { --ig-step: 90ms; }
.ph-bt > .ph-tag:nth-child(2) { --ig-i: 1; }
.ph-bt > .ph-tag:nth-child(3) { --ig-i: 2; }
.ph-bt > .ph-tag:nth-child(4) { --ig-i: 3; }
.ph-bt > .ph-tag:nth-child(5) { --ig-i: 4; }
.ph-bt > .ph-tag:nth-child(6) { --ig-i: 5; }
.ph-bt > .ph-tag:nth-child(7) { --ig-i: 6; }
.ph-bt > .ph-tag:nth-child(8) { --ig-i: 7; }
.ph-bt > .ph-tag:nth-child(n+9) { --ig-i: 8; }
.ph-bt > .ph-tag.ph-tag--max { --ig-i: 10; }
.f-js .ph-prose:not(.lp-page *) .ph-bt > .ph-tag--max::before {
  transform: scale(0); transition: transform var(--t-zmena) var(--f-ease); transition-delay: calc(10 * var(--ig-step) + 320ms);
}
.f-js .ph-prose:not(.lp-page *) .ph-bt.is-in > .ph-tag--max::before { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .f-js .ph-prose :is(.ph-br .ph-b__head, .ph-br__k, .ph-br__v, .ph-bq .ph-b__head, .ph-bq__row, .ph-bf__row, .ph-bv__i,
    .ph-bx__p, .ph-bx__list > span, .ph-bx__tags > .ph-tag, .ph-bt > .ph-tag),
  .f-js .ph-prose :is(.ph-bv__i.is-strong, .ph-bt > .ph-tag--max)::before { transform: none !important; transition: none !important; }
  .f-js .ph-prose .ph-br__v.is-dep { text-decoration-color: currentColor; }
}
/* infografika Chain v článkoch (@chain → .ph-bc__cap): popisok ako hlavička hore (ako Otázky),
   pod jej linkou 24 px vzduchu, aby linka hlavičky a čiara reťazca neležali tesne pod sebou */
.ph-bc__cap { order: -1; margin: 0 0 24px; padding: 0 0 22px; border-top: 0; }
/* poradové „L1, L2…“ pri bodoch reťazca skryté — poradie ukazuje čiara, „vrstva“ nesedí na cykly a postupy */
.ph-bc__st > .f-mono { display: none; }
/* ==========================================================================
   INFOGRAFIKY: HLAVIČKA NAD BOXOM (ako titulok obrázka)
   Otázky (.ph-bq), Record (.ph-br), Sekvencia (.ph-bs), Reťazec (.ph-bc) — názov vľavo, pointa/počet vpravo,
   mono 10.5 px, --f-mute-light, 12 px nad boxom, bez linky pod hlavičkou. Box je „čistý obraz“.
   Box dostane väčší horný odstup (miesto pre hlavičku). Stránky projektov/konceptov (.lp-page) sa nemenia.
   ========================================================================== */
.ph-prose :is(.ph-bq:has(> .ph-b__head), .ph-br:has(> .ph-b__head), .ph-bs, .ph-bc:has(> .ph-bc__cap)):not(.lp-page *) {
  position: relative;
}
/* hlavička Otázok, Recordu a Reťazca → nad box */
.ph-prose :is(.ph-bq, .ph-br) > .ph-b__head:not(.lp-page *),
.ph-prose .ph-bc > .ph-bc__cap:not(.lp-page *) {
  position: absolute; left: 0; right: 0; bottom: 100%; margin: 0 0 12px !important; padding: 0;
  border: 0 !important; color: var(--f-mute-light) !important;
}
.ph-prose :is(.ph-bq, .ph-br) > .ph-b__head:not(.lp-page *) *,
.ph-prose .ph-bc > .ph-bc__cap:not(.lp-page *) * { color: var(--f-mute-light); }
/* Sekvencia: hlavička je ::before (názov) a ::after (počet) → nad box */
.ph-prose .ph-bs:not(.lp-page *)::before, .ph-prose .ph-bs:not(.lp-page *)::after {
  position: absolute; bottom: 100%; top: auto; margin: 0 0 12px; padding: 0; border: 0;
}
.ph-prose .ph-bs:not(.lp-page *)::before { left: 0; }
.ph-prose .ph-bs:not(.lp-page *)::after { right: 0; }
/* Otázky bez hlavičky v boxe: prvý riadok (v 2 stĺpcoch prvé dva) bez hornej linky */
.ph-prose .ph-bq:not(.lp-page *) .ph-bq__row:nth-child(-n+2) { border-top: 0; padding-top: 0; }
@media (max-width: 860px) {
  .ph-prose .ph-bq:not(.lp-page *) .ph-bq__row:nth-child(2) { border-top: 1px solid var(--f-line-l); padding-top: 14px; }
}
/* Finale v boxe: prvý riadok bez hornej linky (box začína obsahom, nie čiarou) */
.ph-prose .ph-bf:not(.lp-page *) > .ph-bf__row:first-child { border-top: 0; padding-top: 0; }
/* Record bez hlavičky v boxe: viac vzduchu hore */
.ph-prose .ph-br:not(.lp-page *) .ph-br__grid { padding-top: 16px; }
/* REŤAZEC — dlhé slová neprečnievajú do susedného stĺpca: pri 5+ bodoch menšie písmo (16 px),
   ak sa slovo nezmestí ani tak, rozdelí sa podľa slovenských pravidiel so spojovníkom (Rozhodo-vanie; lang="sk").
   6. 11. 2026 (Martin): break-word lámal slovo kdekoľvek bez spojovníka („Rozhodovani / e“) → hyphens: auto. */
.ph-bc__t { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; min-width: 0;
  /* deliť len dlhé slová (12+ znakov) a nikdy nenechať krátky kúsok („meto-diky“, „kva-lity“ nie) — Chrome/Firefox
     cez hyphenate-limit-chars, Safari cez min. 6 znakov pred a 5 za spojovníkom */
  hyphenate-limit-chars: 12 6 5; -webkit-hyphenate-limit-before: 6; -webkit-hyphenate-limit-after: 5; }
.ph-bc__st { min-width: 0; }
.ph-bc__row:has(> .ph-bc__st:nth-child(6)) .ph-bc__t { line-height: var(--lh-veta); }
.ph-br__sig::before { background: var(--f-max-grad); }
/* ŽIADNA TMAVÁ INFOGRAFIKA V ČLÁNKOCH: prvý Record/Otázky v článku bol tmavý (.ph-b--dark), ďalšie mal skript
   prefarbené na svetlé (.ph-dia-light). Teraz sú všetky svetlé — rovnaké ako .ph-dia-light: plocha --f-neutral,
   text ink, popisky a čísla --f-mute-light, linky --f-line-l. Stránky projektov/konceptov (.lp-page) sa nemenia. */
.ph-prose .ph-b--dark:not(.lp-page *) { color: var(--f-ink) !important; background: var(--f-neutral); }
.ph-prose .ph-b--dark:not(.lp-page *) * { border-color: var(--f-line-l) !important; }
.ph-prose .ph-b--dark:not(.lp-page *) :is(.f-mute, [class*="__k"], [class*="__n"], [class*="mute"], [class*="__meta"], .ph-br__v.is-dep) { color: var(--f-mute-light); }
.ph-prose .ph-b--dark:not(.lp-page *) .ph-bq__row { border-top-color: var(--f-line-l); }
/* RECORD BEZ ZVÝRAZNENÍ: riadok „!KĽÚČ :: hodnota“ (.ph-br__k.is-sig) vyzerá ako ostatné — zvýraznenie bez opory
   v texte okolo nedávalo čitateľovi zmysel. Zrušený aj atóm v hlavičke Recordu (vpravo, .ph-br__sig).
   Značka „!“ v obsahu článkov ostáva, len sa nezobrazuje. */
.ph-br .ph-br__k.is-sig { color: var(--f-mute-light); }
.ph-br .ph-br__k.is-sig + .ph-br__v { color: inherit; font-weight: inherit; }
.ph-br__sig::before { display: none; }
/* INFOGRAFIKY: MONO ČÍSLA A KĽÚČE NA VRCH VEĽKÝCH PÍSMEN TEXTU (1. 11. 2026 — rovnaká technika ako D8 .ph-ol a obsah
   článku .ph-toc__n). Otázky (.ph-bq__n „Q-01“) a Finale (mono kľúč v .ph-bf__row; Record — výnimka nižšie): číslo sedí na
   účiari textu (align-items: baseline) a posunie sa hore o rozdiel výšok veľkých písmen: 1cap textu (zmerané na riadku /
   mriežke — má písmo textu; cez @property prevedené na px) − 1cap čísla, + 1 px optická korekcia. Funguje pri každej
   veľkosti; bez podpory jednotky cap ostane číslo na účiari. Orez text-box (trim-start cap, nižšie) ostáva — drží výšku
   riadkov a medzery v boxe. Predtým: align-items: start + orez → vrch čísla = vrch veľkých písmen (bez korekcie),
   v prehliadačoch bez text-box približne cez padding-top: .45em. Finale má na mobile (≤ 860 px) kľúč NAD textom → bez posunu. */
@property --ph-b-cap { syntax: "<length>"; inherits: true; initial-value: 0px; }
/* Otázky od 4. 11. 2026 (Martin): vrch „Q-01“ = vrch MALÝCH písmen textu (otázky sú väčšinou malými písmenami —
   pri vrchu veľkých písmen číslo opticky „letelo hore“). 1ex textu (zmerané na riadku) − 1cap čísla. */
@property --ph-b-ex { syntax: "<length>"; inherits: true; initial-value: 0px; }
.ph-bq__row { align-items: baseline; --ph-b-cap: 1cap; --ph-b-ex: 1ex; }
.ph-bq__n { position: relative; top: calc(1cap - var(--ph-b-ex)); }
/* Record: čiara riadku je na KAŽDEJ bunke (border-top na .ph-br__k aj .ph-br__v) — posun top by posunul aj čiaru pod kľúčom.
   Preto bunky zarovnané hore (čiary v jednej línii), vrch veľkých písmen kľúča = vrch veľkých písmen hodnoty drží orez
   text-box (nižšie) a +1 px optická korekcia je v odsadení (12 px bunky zo style-…css + 1 px). */
.ph-br__grid { align-items: start; --ph-b-cap: 1cap; --ph-b-ex: 1ex; }
@supports (text-box: trim-start cap alphabetic) {
  /* 4. 11. 2026 (Martin, ako Otázky): vrch kľúča = vrch MALÝCH písmen hodnoty → odsadenie 12 px + (1cap − 1ex písma
     hodnoty, zmerané na mriežke). Záporný spodný okraj o to isté: posunutý (aj zalomený) kľúč nesmie riadok predĺžiť. */
  .ph-br__k { padding-top: calc(12px + var(--ph-b-cap) - var(--ph-b-ex)); margin-bottom: calc(var(--ph-b-ex) - var(--ph-b-cap)); }
}
.ph-bf__row { align-items: start; }
@media (min-width: 861px) {
  /* 4. 11. 2026 (Martin, ako Otázky): vrch kľúča = vrch MALÝCH písmen textu */
  .ph-bf__row { align-items: baseline; --ph-b-cap: 1cap; --ph-b-ex: 1ex; }
  .ph-bf__row > .f-mono { position: relative; top: calc(1cap - var(--ph-b-ex)); }
  /* posledný riadok: text je orezaný aj na účiarí (nižšie) — kľúč tiež, inak by pri zarovnaní na účiarie predĺžil box */
  .ph-prose .ph-bf:not(.lp-page *) > .ph-bf__row:last-child > .f-mono { text-box: trim-both cap alphabetic; }
}
/* COMPARE (.ph-bx): obe strany ako zoznam. Pravý panel mal položky ako štítky (.ph-bx__tags > .ph-tag),
   ľavý ako zoznam s linkami (.ph-bx__list) — rozdiel nemal obsahový význam a sťažoval porovnanie riadok s riadkom.
   Teraz je pravá strana rovnaký zoznam: rovnaké písmo a veľkosť, linky vo farbe textu (na tmavom svetlé, na svetlom tmavé). */
.ph-bx__tags {
  display: flex; flex-direction: column; flex-wrap: nowrap; gap: 0;
  font-family: var(--font-f-font-sans); font-size: var(--ts-text); line-height: var(--lh-uvod);
  border-bottom: 1px solid color-mix(in srgb, currentColor 20%, transparent);
}
/* rámik porovnania ako vrstva navrch — plocha pravého panelu ho inak prekrývala (vnútorný tieň rodiča je pod deťmi) */
.ph-bx { position: relative; }
.ph-bx::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px var(--f-line-l2); pointer-events: none; }   /* jemná linka 24 % (o stupeň výraznejšia ako linky v zozname 16 %), nie plná čierna */
.ph-prose .ph-bx:not(.lp-page *) { box-shadow: none; }
/* pravý panel v článkoch vždy svetlosivý (--f-neutral), aj keď bol prvým tmavým blokom v článku */
.ph-prose .ph-bx__p--dark:not(.lp-page *) { background: var(--f-neutral); color: var(--f-ink); }
.ph-prose .ph-bx__p--dark:not(.lp-page *) :is(.f-mute, .ph-b__head, .ph-b__head .f-mute, .ph-bx__note) { color: var(--f-mute-light); }
.ph-prose .ph-bx__p--dark:not(.lp-page *) .ph-b__head > span:first-child { color: var(--f-ink); }
.ph-bx__tags > .ph-tag {
  display: block; height: auto; padding: 9px 0; margin: 0;
  background: none; box-shadow: none; border-top: 1px solid color-mix(in srgb, currentColor 20%, transparent);
  font: inherit; letter-spacing: normal; text-transform: none; color: inherit; white-space: normal;
}
:is(.ph-bf__row > *, .ph-bq__row > *, .ph-br__k, .ph-br__v) { text-box: trim-start cap alphabetic; }
/* 1. 11. 2026: náhradný padding-top: .45em pre prehliadače bez text-box zrušený — číslo zarovnáva účiarie + 1cap (vyššie);
   s paddingom by pri zarovnaní na účiarie riadok narástol. Na mobile Finale (kľúč nad textom) ostáva ako bolo. */
@supports not (text-box: trim-start cap alphabetic) {
  .ph-br__k { padding-top: 0.45em; }   /* Record: približne pre staršie prehliadače (ako predtým) */
  @media (max-width: 860px) { .ph-bf__row > .f-mono { padding-top: 0.45em; } }
}
/* INFOGRAFIKY V BOXE: SPODNÁ MEDZERA = HORNÁ
   Merané od hrany boxu po vrch veľkých písmen (hore) a od účiaria posledného riadku po hranu (dole).
   Predtým (desktop): Finale 32 / 60 px, Otázky 32 / 54 px, Record 28 / 35 px — dole bolo navyše odsadenie
   posledného riadku (18 / 14 / 12 px) a miesto pod písmom, ktoré hore už bolo orezané (text-box trim-start).
   Teraz: posledný riadok bez spodného odsadenia, text orezaný aj na účiarí (trim-end) a spodné odsadenie boxu = horné.
   Finale a Otázky 32 / 32 (mobil 24 / 24), Record 28 / 28. Steps, Chain a Versus sa nemenia. */
.ph-prose .ph-bf:not(.lp-page *) > .ph-bf__row:last-child,
.ph-prose .ph-bq:not(.lp-page *) .ph-bq__row:nth-last-child(-n+2),
.ph-prose .ph-br:not(.lp-page *) .ph-br__grid > :nth-last-child(-n+2) { padding-bottom: 0; }
.ph-prose .ph-bf:not(.lp-page *) > .ph-bf__row:last-child > :last-child,
.ph-prose .ph-bq:not(.lp-page *) .ph-bq__row:nth-last-child(-n+2) > *,
.ph-prose .ph-br:not(.lp-page *) .ph-br__grid > :nth-last-child(-n+2) { text-box: trim-both cap alphabetic; }
.ph-prose :is(.ph-bf, .ph-bq):not(.lp-page *) { padding-bottom: 32px !important; }
.ph-prose .ph-br:not(.lp-page *) .ph-br__grid { padding-bottom: 28px; }
@media (max-width: 860px) {
  .ph-prose :is(.ph-bf, .ph-bq):not(.lp-page *) { padding-bottom: 24px !important; }
  /* Otázky na mobile v 1 stĺpci: predposledný riadok už nie je v poslednom rade → späť bežné odsadenie a orez */
  .ph-prose .ph-bq:not(.lp-page *) .ph-bq__row:nth-last-child(2) { padding-bottom: 14px !important; }
  .ph-prose .ph-bq:not(.lp-page *) .ph-bq__row:nth-last-child(2) > * { text-box: trim-start cap alphabetic; }
}
/* INFOGRAFIKY V ČLÁNKOCH BEZ POPISKOV (2026-10-15): popisok nad grafikou (Záznam, Otázky, Reťazec)
   a automatický „Sekvencia · N krokov“ sa nezobrazujú — infografiku uvádza veta v texte tesne nad ňou
   a popisky boli nejednotné (časť typov ich nemala). Zápis „# NÁZOV | doplnok“ v článkoch ostáva,
   na vrátenie stačí zmazať tento blok. Stránky projektov a konceptov (.lp-page) sa nemenia. */
.ph-prose:not(.lp-page *) :is(.ph-br, .ph-bq) > .ph-b__head,
.ph-prose:not(.lp-page *) .ph-bc__cap { display: none; }
.ph-prose:not(.lp-page *) .ph-bs::before, .ph-prose:not(.lp-page *) .ph-bs::after { content: none !important; display: none; }
/* bez popisku netreba miesto nad boxom (blok „HLAVIČKA NAD BOXOM“ dával 52 px) → rovnaký odstup ako ostatné infografiky */
.ph-prose :is(.ph-bq:has(> .ph-b__head), .ph-br:has(> .ph-b__head), .ph-bs, .ph-bc:has(> .ph-bc__cap)):not(.lp-page *) { margin-top: 14px; }
.ph-br__sig::before {
  border-radius: var(--f-atom-r);
}
.ph-bs .ph-bs__t,
.ph-bv .ph-bv__t,
.ph-bx .ph-bx__t{ font-size: var(--ts-stredny) !important; letter-spacing: var(--tr-stredny) !important; }
.ph-bt .ph-tag:not(.f-mono) { font-size: var(--ts-ui) !important; letter-spacing: var(--tr-text) !important; }
.ph-b .ph-b__head, .ph-b .ph-b__head span, .ph-b .ph-bx__note, .ph-b .ph-ico, .ph-bc .ph-bc__st .f-mono, .ph-bc .ph-bc__cap, .ph-br .ph-br__k, .ph-prose .ph-bs::before, .ph-prose .ph-bs::after { font-size: var(--ts-popis); }
/* texty v infografikách: otázky (ph-bq), reťaz (ph-bc), porovnanie (ph-br) — boli 17–18 px aj na veľkej obrazovke → Väčší text 20 → 18 */
.ph-prose .ph-bq__grid, .ph-prose .ph-bc__t, .ph-prose .ph-br__grid { font-size: var(--ts-text-l); letter-spacing: var(--tr-text); }
/* reťaz so 6 krokmi ostáva menšia (úzke stĺpce) — Text 16 je v škále */
.ph-prose .ph-bc__row:has(> .ph-bc__st:nth-child(6)) .ph-bc__t { font-size: var(--ts-text); letter-spacing: var(--tr-text); }