/* ---------- témy ---------- */
/* K3 (28. 10. 2026): POVRCH diagramu nastaví jednu sadu --c-* (rovnako ako sekcia v userStyles); --v-* ju len čítajú */
html body .vz-t-light { --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); }
html body .vz-t-dark { --c-fg: var(--f-paper); --c-bg: var(--f-ink); --c-on: var(--f-ink); --c-mute: var(--f-mute-dark); --c-body: var(--f-body-dark); --c-line: var(--f-line-d); --c-line-s: var(--f-line-d2); --c-line2: rgba(244,243,239,.35); --c-wash: rgba(244,243,239,.05); }
html body .f-neutral-bg .vz-t-light { --c-bg: var(--f-neutral); }   /* dosky a stavový riadok majú farbu sivej sekcie */
html body :is(.vz-t-light, .vz-t-dark) { --v-fg: var(--c-fg); --v-mute: var(--c-mute); --v-line: var(--c-line); --v-line-s: var(--c-fg);
  --v-plate: var(--c-bg); --v-plate-s: var(--c-fg); --v-act: var(--c-fg); --v-act-fg: var(--c-on); --v-node: var(--c-bg);
  --v-st-bg: var(--c-wash); --v-st-base: var(--c-bg); --v-st-fg: var(--c-fg); --v-st-mute: var(--c-mute); --v-st-line: var(--c-line); --v-rule: var(--c-line); color: var(--c-fg); }
/* stavový riadok na svetlom pozadí: 5 % farby písma cez pozadie sekcie (ako tmavá téma, len opačne) — blok „STAVOVÝ RIADOK — JEDNA LOGIKA“ nižšie */
html body .vz-t-dark { --v-plate-s: rgba(244,243,239,.85); }   /* výnimka: obrys dosky na tmavom 85 % papiera */
html body .vz-t-dark .vz-lead { color: var(--f-body-dark, rgba(244,243,239,.75)); }
/* dosky majú farbu POZADIA SEKCIE (kvázi priehľadné): v sivej sekcii (.f-neutral-bg) sivé, nie papierové (2026-10-17, Martin) */
/* STAVOVÝ RIADOK — JEDNA LOGIKA NA VŠETKÝCH POZADIACH (2026-10-19, Martin: „nemalo by to byť priesvitnejšie, podobná
   logika ako má tmavé?“): plocha = 5 % farby písma CEZ pozadie sekcie, rámik 16 % (tmavé: 5 % papiera cez ink).
   Kladie sa na PEVNÚ farbu sekcie (--v-st-base), aby bol riadok nepriehľadný aj prilepený na mobile.
   (Predtým: svetlé = plná sivá, sivé = plný papier — v sivej sekcii splývala sivá so sivou.) */
html body .vz-t-light .vz-status { background: linear-gradient(var(--v-st-bg), var(--v-st-bg)), var(--v-st-base); }
/* popis v menovke: vyvážené zalomenie, bez osamoteného slova na poslednom riadku (2026-10-19, DIAGRAMY.md).
   Zatiaľ len nové diagramy — staré majú v popisoch „ · “ bez pevnej medzery a bodka by mohla skočiť na začiatok riadku */
html body .vz-prep .vz-lab :is(.s, .t) { text-wrap: balance; }
/* menovka vpravo hore (Analýza a pamäť značky) užšia, aby bola celá VPRAVO od dráhy krúžiaceho atómu — inak atóm letel
   popod jej text (22. 10., Martin). Kontrola: python3 tools/kontrola_drahy_atomu.py */
html body .vz-prep .vz-lab.is-r { width: 17%; }

/* ---------- spoločné ---------- */
html body .vz-stage { position: relative; }
html body .vz-cap { display: flex; justify-content: space-between; column-gap: 16px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--v-rule);
  font-family: var(--font-f-font-mono); font-size: 11px; letter-spacing: var(--tr-popis, .08em); text-transform: uppercase; color: var(--v-mute); }

/* ---------- stavový riadok (jazyk AI) ---------- */
html body .vz-status { display: flex; align-items: center; column-gap: 20px; margin-top: 24px; padding: 16px 20px; background: var(--v-st-bg); color: var(--v-st-fg);
  box-shadow: inset 0 0 0 1px var(--v-st-line); font-family: var(--font-f-font-mono); font-size: 13px; line-height: var(--lh-text, 1.5); letter-spacing: .02em; min-height: 76px; box-sizing: border-box; }
html body .vz-status__k { flex: none; font-family: var(--font-f-font-mono); font-size: 34px; line-height: 1; letter-spacing: -.02em; color: var(--v-st-fg); }
html body .vz-status__body { display: flex; flex-direction: column; row-gap: 4px; min-width: 0; flex: 1; }
html body .vz-status__n { display: none; } /* 2026-10-17, Martin: bez názvu diagramu a počítadla — stačí veľké číslo a výpis AI */
html body .vz-status__t::before { content: "> "; color: var(--v-st-mute); }
html body .vz-status__t::after { content: ""; display: inline-block; width: .55em; height: .55em; margin-left: .25em; border-radius: 13.39%; background: var(--prj-grad, var(--f-max-grad));
  vertical-align: middle; animation: vz-blink var(--t-dlhy, 1200ms) steps(1) infinite; }
@keyframes vz-blink { 50% { opacity: 0; } }
/* 31. 10. 2026 (prieskum animácií, prístupnosť): pri „obmedziť pohyb“ kurzor stojí (svieti) — ako kurzor hlasu AI .ph-caret */
@media (prefers-reduced-motion: reduce) { html body .vz-status__t::after { animation: none; } }

/* ---------- menovky pri linkách (izometria aj pavúk): bezpätkové, číslo mono ---------- */
html body .vz-lab { position: absolute; top: var(--y); display: flex; flex-direction: column; row-gap: 6px; width: 27%; padding-top: 14px; }
html body .vz-lab.is-l { left: 0; }   /* zarovnané s okrajmi obsahu (linky idú až po okraj) */
html body .vz-lab.is-r { right: 0; text-align: right; align-items: flex-end; }
html body .vz-lab b { font-family: var(--font-f-font-mono); font-weight: 400; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--v-mute); transition: color var(--t-zmena, 400ms); }
html body .vz-lab .t { font-size: clamp(18px, 1.75vw, 24px); line-height: var(--lh-veta, 1.2); letter-spacing: -.01em; color: var(--v-fg); }
html body .vz-lab .s { font-size: clamp(14px, 1.15vw, 16px); line-height: var(--lh-text, 1.5); color: var(--v-mute); }
html body .vz-lab.is-active b { color: var(--v-fg); }
/* legenda pod obrázkom — na mobile namiesto menoviek.
   PRAVIDLO: poradie je vždy obrázok → stavový riadok → legenda (generátor kladie .vz-status pred .vz-legend). */
html body .vz-legend { display: none; margin: 24px 0 0; padding: 0; list-style: none; }
html body .vz-legend li { display: grid; grid-template-columns: 60px minmax(0,1fr); column-gap: 10px; padding: 14px 0; border-top: 1px solid var(--v-rule); transition: opacity var(--t-zmena, 400ms); }
html body .vz-legend li::before { content: none; }
html body .vz-legend b { font-family: var(--font-f-font-mono); font-weight: 400; font-size: 11px; padding-top: 4px; color: var(--v-mute); }
html body .vz-legend .t { display: block; font-size: 18px; line-height: var(--lh-veta, 1.2); color: var(--v-fg); }
html body .vz-legend .s { display: block; margin-top: 4px; font-size: 14px; line-height: var(--lh-text, 1.5); color: var(--v-mute); }
html body .vz-legend li.is-active b { color: var(--v-fg); }
@media (max-width: 760px) {
  html body .vz-lab, html body .vz-wlab, html body .vz-iso .ld{ display: none; }
  html body .vz-legend { display: block; }
  html body .vz-legend li:not(.is-active) { opacity: .55; }
  html body .vz-status { font-size: 12px; padding: 14px 16px; column-gap: 14px; }
  html body .vz-status__k { font-size: 26px; }
}

/* ---------- 1. izometria ---------- */
html body .vz-iso svg { display: block; width: 100%; height: auto; overflow: visible; }
html body .vz-iso .pl { transition: transform var(--t-nabeh, 600ms) var(--f-ease), opacity var(--t-nabeh, 600ms) linear; cursor: pointer; }
html body .vz-iso .pl-edge, html body .vz-iso .pl-top { fill: var(--v-plate); stroke: var(--v-plate-s); stroke-width: 1; vector-effect: non-scaling-stroke; transition: fill var(--t-zmena, 400ms) var(--f-ease); }
html body .vz-iso .pl.is-active { transform: translateY(-10px); }
html body .vz-iso .pl.is-active .pl-top { fill: var(--v-act); }
html body .vz-iso .pl-num { font-family: var(--font-f-font-mono); font-size: 11px; letter-spacing: .08em; fill: var(--v-mute); transition: fill var(--t-zmena, 400ms); }
html body .vz-iso .pl.is-active .pl-num { fill: var(--v-act-fg); }

/* linky k menovkám: ďaleko do strán, na rohu dosky atóm */
html body .vz-iso .ld { stroke: var(--v-line); stroke-width: 1; vector-effect: non-scaling-stroke; transition: stroke var(--t-zmena, 400ms); }
html body .vz-iso .ld.is-active { stroke: var(--v-line-s); }

/* Memory ako spojivo: prerušovaná izometrická krabička okolo všetkých dosiek, atóm na hornom rohu */
html body .vz-iso .mem-box { fill: none; stroke: var(--f-max-b); stroke-width: 1.5; stroke-dasharray: 6 5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
/* krabica patriaca projektu (data-prj) = farba projektu (PRAVIDLA-WEBU 15, 22. 10.: FUTUR STUDIO 06 — STUDIO + ONE) */
html body .vz-iso .mem-box[data-prj] { stroke: var(--prj-c, var(--f-max-b)); }
/* názov Memory naplocho na vrchnej stene krabičky pri pravom rohu (ako čísla na doskách) */
html body .vz-iso .mem-name .t { font-size: 24px; letter-spacing: -.01em; fill: var(--v-fg); }
html.f-js body .vz-iso:not(.is-in) :is(.mem-box, .mem-name) { opacity: 0; }
html body .vz-iso :is(.mem-box, .mem-name) { transition: opacity var(--t-nabeh, 600ms) linear 700ms; }
/* názov obalu ostáva aj na mobile (2026-10-17; predtým sa pod 760 px skrýval) */
/* zrod: dosky dopadnú zhora jedna po druhej */
html.f-js body .vz-iso:not(.is-in) .pl { transform: translateY(-40px); opacity: 0; }
html body .vz-iso .pl { transition-delay: calc(var(--i, 0) * 110ms); }
html body .vz-iso.is-in .pl { transition-delay: 0ms; }
/* LOGO na doske jadra (FUTUR + prípona, naplocho v izometrii) a KRÚŽIACI 3D ATÓM nad prstencom FUTUR ONE (2026-10-16, návrh) —
   atóm má gradient FUTUR MAX (výnimka na želanie); pri obmedzení pohybu sa skryje. */
html body .vz-iso .lk path { fill: var(--v-fg); }
html body .vz-iso .lk-suf { font-family: var(--font-f-font-mono); font-weight: 500; letter-spacing: .08em; fill: var(--v-fg); }
html body .vz-ring .rg-orb-t { fill: url(#vz-prj-g); }   /* PRECHOD projektu stránky (PRAVIDLA 15); bez projektu = MAX */
/* farby zastávok prechodu projektu (.pg-a/.pg-b) sú v userStyles (blok „FARBA PROJEKTU“) — platia aj mimo diagramov */
html body .vz-ring .rg-orb-e { fill: var(--prj-edge, var(--f-max-edge)); }   /* bočné steny = tmavší odtieň farby projektu */
html body .vz-ring .rg-orb-sh { fill: var(--prj-c, var(--f-max-b)); opacity: .14; }
html.f-js body .vz-ring:not(.is-in) .rg-orb { opacity: 0; }
html body .vz-ring .rg-orb { transition: opacity var(--t-pomaly, 900ms) linear 900ms; }
@media (prefers-reduced-motion: reduce) { html body .vz-ring .rg-orb { display: none; } }
/* 31. 10. 2026 (prieskum animácií, nález 1): pohupovanie a stmievanie atómu cez CSS namiesto animácií v SVG (SMIL), ktoré
   nútili prehliadač prepočítať stránku 60× za sekundu nonstop — aj mimo obrazovky aj pri „obmedziť pohyb“. Rovnaký pohyb
   (4,5 s, o 9 px hore a späť, tieň 1 → .6 → 1); beží len bez „obmedziť pohyb“ a len kým je diagram v zábere (is-vis, ph-viz.js). */
html body .vz-ring .rg-orb-bob { transform: translateY(var(--y, 0px)); }
@keyframes rg-orb-bob { 0%, 100% { transform: translateY(var(--y, 0px)); } 50% { transform: translateY(calc(var(--y, 0px) - 9px)); } }
@keyframes rg-orb-fade { 0%, 100% { opacity: 1; } 50% { opacity: .6; } }
@media (prefers-reduced-motion: no-preference) {
  html body .vz-ring .rg-orb-bob { animation: rg-orb-bob 4.5s linear infinite; }
  html body .vz-ring .rg-orb-fade { animation: rg-orb-fade 4.5s linear infinite; }
  html.f-js body .vz-ring:not(.is-vis) :is(.rg-orb-bob, .rg-orb-fade) { animation-play-state: paused; }
}
/* 31. 10. 2026 (prieskum animácií, nález 3): diagram mimo obrazovky — všetky jeho animácie (tečúce linky, pulzy, blikanie
   kurzora) stoja; cyklus fáz zastavuje ph-viz.js, ale aktívna fáza ostala označená a jej CSS animácie bežali donekonečna.
   is-vis prepína ph-viz.js (IntersectionObserver na kresbe); pri návrate na obrazovku pokračujú tam, kde stáli. */
/* to isté pre rámy a staršie diagramy (.lp-frame, .ph-d — is-vis prepína 003-lp-page.js); aj samotný obal a pseudoprvky
   (blikajúci kurzor je ::after, pavúk O mne má animáciu na obale) */
html.f-js body :is([data-cycle], .lp-frame, .ph-d):not(.is-vis),
html.f-js body :is([data-cycle], .lp-frame, .ph-d):not(.is-vis) *,
html.f-js body :is([data-cycle], .lp-frame, .ph-d):not(.is-vis) *::before,
html.f-js body :is([data-cycle], .lp-frame, .ph-d):not(.is-vis) *::after { animation-play-state: paused; }

/* ČASTI PLOCHY (.vz-zony, 06 STUDIO, 2026-10-16): plocha je rozdelená deliacou čiarou; aktívna časť sa rozsvieti len vo svojom výseku */
html body .vz-zony .zn { cursor: pointer; }
html body .vz-zony .zn-f { fill: transparent; transition: fill var(--t-zmena, 400ms); }
html body .vz-zony .zn.is-active .zn-f { fill: var(--v-act); }
html body .vz-zony .zn.is-active .pl-num { fill: var(--v-act-fg); }
html body .vz-zony .zn-l { fill: none; stroke: var(--v-plate-s); stroke-width: 1; vector-effect: non-scaling-stroke; }

/* CESTA VÝZNAMU (.vz-cesta, 06 STUDIO, 2026-10-16): ten istý atóm na každej vrstve — obrys → výplň → 3D blok;
   vlákna: význam nadol, spätná väzba nahor (nie waterfall); značka rezu FUTUR STUDIO / FUTUR ONE. Bez oranžovej. */
html body .vz-cesta .mo-o { fill: none; stroke: var(--v-fg); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
html body .vz-cesta .mo-f, html body .vz-cesta .mo-t { fill: var(--v-fg); }
html body .vz-cesta .mo-e { fill: var(--v-plate); stroke: var(--v-fg); stroke-width: .6; stroke-opacity: .6; }
html body .vz-cesta .pl.is-active .mo-o { stroke: var(--v-act-fg); }
html body .vz-cesta .pl.is-active .mo-f, html body .vz-cesta .pl.is-active .mo-t { fill: var(--v-act-fg); }
html body .vz-cesta .pl.is-active .mo-e { fill: var(--v-act); stroke: var(--v-act-fg); }
html body .vz-cesta .th { fill: none; stroke: var(--v-fg); stroke-width: 1.2; stroke-dasharray: 3 7; vector-effect: non-scaling-stroke; opacity: .75;
  animation: vz-th var(--t-dlhy, 1200ms) linear infinite; }
@keyframes vz-th { to { stroke-dashoffset: -20; } }

@media (prefers-reduced-motion: reduce) { html body .vz-cesta .th { animation: none; } }

/* TOK (.vz-flow, tools/vz_web.py flow) — 2026-10-16: kroky zľava doprava, lomené spojnice s medzerou, po spojnici
   do aktívneho uzla tečie signál; plochý uzol = atóm, v izometrii doska (.pl). Menovky pod uzlom (--x, --w), pri veľa krokoch aj nad. */
html body .vz-flow .fw-l { fill: none; stroke: var(--v-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
html body .vz-flow .fw-f { fill: none; stroke: transparent; stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-dasharray: 3 7; }
html body .vz-flow .fw-f.is-active { stroke: var(--v-fg); animation: vz-fw var(--t-pomaly, 900ms) linear infinite; }
@keyframes vz-fw { to { stroke-dashoffset: -20; } }
html body .vz-flow g.fw-n:not(.pl) rect { fill: var(--v-plate); stroke: var(--v-plate-s); stroke-width: 1; vector-effect: non-scaling-stroke; transition: fill var(--t-zmena, 400ms); }
html body .vz-flow g.fw-n { cursor: pointer; }
html body .vz-flow g.fw-n:not(.pl).is-active rect { fill: var(--v-act); }
html body .vz-flow .fw-num { font-family: var(--font-f-font-mono); font-size: 8.5px; letter-spacing: var(--tr-popis, .08em); fill: var(--v-mute); transition: fill var(--t-zmena, 400ms); }
html body .vz-flow .fw-mark { font-family: var(--font-f-font-mono); font-weight: 500; font-size: 11px; letter-spacing: .1em; fill: var(--v-fg); transition: fill var(--t-zmena, 400ms); }
html body .vz-flow .is-active .fw-num, html body .vz-flow .is-active .fw-mark { fill: var(--v-act-fg); }
html.f-js body .vz-flow:not(.is-in) g.fw-n:not(.pl) { opacity: 0; transform: translateY(-12px); }
html body .vz-flow g.fw-n { transition: opacity var(--t-nabeh, 600ms), transform var(--t-nabeh, 600ms) var(--f-ease); }
html body .vz-lab.vz-lab--x { left: var(--x); width: var(--w, 20%); transform: translateX(-50%); align-items: center; text-align: center; padding-top: 0; }
html body .vz-lab.vz-lab--x.vz-lab--up { transform: translate(-50%, -100%); }
html body .vz-lab.vz-lab--x.vz-lab--lft { transform: translate(-100%, -50%); align-items: flex-end; text-align: right; }

html body .vz-lab.vz-lab--x.vz-lab--endr { transform: translateX(-100%); align-items: flex-end; text-align: right; }
html body .vz-lab.vz-lab--x.vz-lab--endl { transform: none; align-items: flex-start; text-align: left; }
html body .vz-lab.vz-lab--x.vz-lab--up.vz-lab--endr { transform: translate(-100%, -100%); }
html body .vz-lab.vz-lab--x.vz-lab--up.vz-lab--endl { transform: translateY(-100%); }

@media (prefers-reduced-motion: reduce) { html body .vz-flow .fw-f.is-active { animation: none; stroke-dasharray: none; } }

/* UŽŠIA STRÁNKA — spoločné pre KAŽDÝ diagram s triedou .vz-fit (+ data-fit="900"; Memory, pavúk, ďalšie) — 2026-10-16:
   menovky sa zmenšujú SPOLU s obrázkom (cqw = % šírky diagramu), strop = pôvodné veľkosti; pod 900 px sa menovky
   aj linky k nim skryjú a pod obrázkom je zoznam. Výrez obrázka na celú šírku stiahne ph-viz.js (časť 3). */
html body .vz-fit .vz-stage { container-type: inline-size; }
html body .vz-fit .vz-lab { row-gap: min(.55cqw, 6px); padding-top: min(1.3cqw, 14px); }
html body .vz-fit .vz-lab b { font-size: var(--ts-diag-cislo); }
html body .vz-fit .vz-lab .t { font-size: var(--ts-diag-t); }
html body .vz-fit .vz-lab .s { font-size: var(--ts-diag-s); }
@media (max-width: 900px) {
  html body .vz-fit .vz-lab, html body .vz-fit .ld { display: none; }
  html body .vz-fit .vz-legend { display: block; }
  html body .vz-fit .vz-legend li:not(.is-active) { opacity: .55; }
}

/* ---------- 1b. schéma (pavúk) — v izometrii (.vz-iso.vz-web): dosky, linky po podlahe, jadro = pyramída ---------- */
html body .vz-iso .pl--core { cursor: default; }
html body .vz-lab.vz-lab--c { left: 50%; transform: translateX(-50%); width: 22%; align-items: center; text-align: center; padding-top: 0; }
html body .vz-iso .pl-max .pl-top, html body .vz-iso .pl-max .pl-edge { fill: url(#vz-max-g); stroke: none; }
/* tablet aj mobil (pod 1100 px): menovky pod obrázkom, aby sa dali prečítať */
@media (max-width: 1100px) {
  html body .vz-web .vz-lab, html body .vz-web .ld{ display: none; }
  html body .vz-web .vz-legend { display: block; }
  html body .vz-web .vz-legend li:not(.is-active) { opacity: .55; }
}
html body .vz-web svg { display: block; width: 100%; height: auto; overflow: visible; }
html body .vz-web .wt { fill: none; stroke: var(--v-fg); stroke-width: 1; vector-effect: non-scaling-stroke; }
html body .vz-web .wfig { font-family: var(--font-f-font-mono); font-size: 10px; letter-spacing: .12em; fill: var(--v-mute); }
html body .vz-web .wl { fill: none; stroke: var(--v-line); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--t-dlhy, 1200ms) var(--f-ease); }
html.f-js body .vz-web:not(.is-in) .wl { stroke-dashoffset: 1; }
html body .vz-web .wf { fill: none; stroke: transparent; stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-dasharray: 3 7; }
html body .vz-web .wf.is-active { stroke: var(--v-fg); animation: vz-flow var(--t-pomaly, 900ms) linear infinite; }
@keyframes vz-flow { to { stroke-dashoffset: -20; } }
html body .vz-web .wn { cursor: pointer; }
html body .vz-web .wn rect { fill: var(--v-node); stroke: var(--v-fg); stroke-width: 1; vector-effect: non-scaling-stroke; transition: fill var(--t-zmena, 400ms); }
html body .vz-web .wn.is-active rect { fill: var(--v-fg); }
html body .vz-web .wc { fill: none; stroke: var(--v-fg); stroke-width: 1; vector-effect: non-scaling-stroke; }
html body .vz-web .wc0 { stroke-opacity: .35; stroke-dasharray: 2 5; }
html body .vz-web .wc1 { stroke-opacity: .6; }
html body .vz-web .wc-atom { fill: url(#vz-max-g); }
html body .vz-wlab { position: absolute; top: var(--y); transform: translateY(-50%); display: grid; row-gap: 4px; width: 27%; }
html body .vz-wlab.is-in { left: 4.5%; width: 24%; grid-template-columns: 32px minmax(0,1fr); }
html body .vz-wlab.is-in b { grid-row: 1 / span 2; padding-top: 6px; }
html body .vz-wlab.is-out { left: 72.5%; }
html body .vz-wlab b { font-family: var(--font-f-font-mono); font-weight: 400; font-size: 10.5px; letter-spacing: var(--tr-popis, .08em); color: var(--v-mute); }
html body .vz-wlab .t { font-size: clamp(18px, 1.7vw, 24px); line-height: var(--lh-veta, 1.2); letter-spacing: -.01em; color: var(--v-mute); transition: color var(--t-zmena, 400ms); }
html body .vz-wlab .s { font-size: 14px; line-height: var(--lh-uvod, 1.35); color: var(--v-mute); }
html body .vz-wlab.is-active .t { color: var(--v-fg); }
html body .vz-wcore { position: absolute; left: 50%; top: 68%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; row-gap: 6px; text-align: center; }
html body .vz-wcore b { font-family: var(--font-f-font-mono); font-weight: 400; font-size: 13px; letter-spacing: .14em; color: var(--v-fg); }
html body .vz-wcore em { font-style: normal; font-family: var(--font-f-font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--v-mute); }
html body .vz-wres { display: grid; grid-template-columns: 1fr 1fr; align-items: baseline; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--v-rule); }
html body .vz-wres .f-mono { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--v-mute); }
html body .vz-wres span:last-child { font-size: clamp(22px, 2.2vw, 32px); letter-spacing: -.015em; color: var(--v-fg); }
@media (max-width: 760px) { html body .vz-wres { grid-template-columns: 1fr; row-gap: 8px; } }

/* ---------- 1d. kruh (FUTUR ONE) a poschodia (FUTUR STUDIO) ---------- */
html body .vz-ring .rg-orbit { fill: none; stroke: var(--v-line); stroke-width: 1; stroke-dasharray: 2 6; vector-effect: non-scaling-stroke; }
html body .vz-ring .rg-atom { fill: url(#vz-max-g); }
html body .vz-ring .rg-note { font-family: var(--font-f-font-mono); font-size: 10.5px; letter-spacing: .12em; fill: var(--v-mute); }
@media (prefers-reduced-motion: reduce) { html body .vz-ring .rg-atom { display: none; } }
html body .vz-iso .pl-ext { stroke-dasharray: 5 5; }
html body .vz-iso .pl-ini { font-family: var(--font-f-font-mono); font-size: 18px; letter-spacing: var(--tr-popis, .08em); fill: var(--v-fg); transition: fill var(--t-zmena, 400ms); }
html body .vz-iso .pl.is-active .pl-ini { fill: var(--v-act-fg); }
html body .vz-floors .fl-down, html body .vz-floors .fl-up { fill: none; stroke: var(--v-fg); stroke-width: 1.4; stroke-dasharray: 3 6; vector-effect: non-scaling-stroke; }
html body .vz-floors .fl-down { animation: vz-flow var(--t-pomaly, 900ms) linear infinite; }
html body .vz-floors .fl-up { animation: vz-flow var(--t-pomaly, 900ms) linear infinite; }
html body .vz-floors .fl-ar { fill: var(--v-fg); }
@media (prefers-reduced-motion: reduce) { html body .vz-floors .fl-down, html body .vz-floors .fl-up { animation: none; } }

/* pyramída: bok bloku = tieň (bez obrysov), navrchu obrysová doska; aktívny blok stmavne aj s bokom */
html body .vz-t-light { --v-side: var(--f-plate-side-l); --v-side-act: var(--f-plate-side-l-act); }
html body .vz-t-dark { --v-side: var(--f-plate-side-d); --v-side-act: var(--f-plate-side-d-act); }

/* pyramída · halftone: trojuholník z mini atómov v pásoch */

/* pyramída z dosiek: os so šípkou nahor, vrchná doska oranžová */
html body .vz-pyrp .py-axis { fill: none; stroke: var(--v-line-s); stroke-opacity: .5; stroke-width: 1; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
html body .vz-pyrp .py-arrow { fill: var(--v-fg); }
html body .vz-pyrp .py-axis-t { font-family: var(--font-f-font-mono); font-size: 9.5px; letter-spacing: .14em; fill: var(--v-mute); }
html body .vz-pyrp .pl-max .pl-top, html body .vz-pyrp .pl-max .pl-edge { fill: url(#vz-max-g); stroke: none; }
html body .vz-pyrp .pl-max .pl-num { fill: var(--f-ink); }
/* [vyradené] pyramída · izometria: hrany telesa, rezy úrovní, zadná hrana podstavy prerušovaná */

/* ---------- 1e. TOK v izometrii: koľaje po podlahe pod 30°, jadro = pyramída dosiek, putujúce balíčky (Rez vyradený) ---------- */
html body .vz-tok svg { display: block; width: 100%; height: auto; overflow: visible; }
html body .vz-tok .tk-l { fill: none; stroke: var(--v-line); stroke-width: 1; vector-effect: non-scaling-stroke; transition: stroke var(--t-zmena, 400ms); }
html body .vz-tok .tk-hit { fill: none; stroke: transparent; stroke-width: 24; cursor: pointer; }
html body .vz-tok .tk-lane.is-active .tk-l { stroke: var(--v-fg); stroke-width: 1.6; }

html body .vz-tok .tk-pks { opacity: 0; transition: opacity var(--t-zmena, 400ms); }
html body .vz-tok .tk-pks.is-active { opacity: 1; }
html body .vz-tok .tk-pk { fill: var(--v-fg); }
@media (prefers-reduced-motion: reduce) { html body .vz-tok .tk-pks { display: none; } }
/* menovky pri začiatku (vstupy) a konci (schopnosti) koľaje, nad ňou */
html body .vz-tlab2 { position: absolute; left: var(--x); top: var(--y); display: flex; flex-direction: column; row-gap: 2px; width: 26%; transform: translateY(calc(-100% - 10px)); }
html body .vz-tlab2.is-r { transform: translate(-100%, calc(-100% - 10px)); text-align: right; align-items: flex-end; }
html body .vz-tlab2 b { font-family: var(--font-f-font-mono); font-weight: 400; font-size: 10.5px; letter-spacing: .08em; color: var(--v-mute); }
html body .vz-tlab2 .t { font-size: clamp(16px, 1.5vw, 21px); line-height: var(--lh-veta, 1.2); color: var(--v-mute); transition: color var(--t-zmena, 400ms); }
html body .vz-tlab2 .s { font-size: 13px; line-height: var(--lh-uvod, 1.35); color: var(--v-mute); }
html body .vz-tlab2.is-active .t, html body .vz-tlab2.is-active b { color: var(--v-fg); }
@media (max-width: 1100px) { html body .vz-tlab2, html body .vz-tok .vz-lab--c { display: none; } html body .vz-tok .vz-legend { display: block; } }

/* ---------- 1c. prekryv / sústredné atómy ---------- */
html body .vz-ov svg { display: block; width: 100%; height: auto; overflow: visible; }
/* halftone z mini atómov: úroveň = počet prekrytých vrstiev (väčšie a hustejšie atómy), najvyššia úroveň oranžová */
html body .vz-ov [class^="ov-l"] { fill: var(--v-fg); transition: opacity var(--t-nabeh, 600ms) linear; transition-delay: calc(var(--i, 0) * 220ms); }
html body .vz-ov .ov-top { fill: url(#vz-max-u); }
html.f-js body .vz-ov:not(.is-in) [class^="ov-l"] { opacity: 0; }
html body .vz-ov .ld { fill: none; stroke: var(--v-line-s); stroke-opacity: .45; stroke-width: 1; vector-effect: non-scaling-stroke; transition: stroke-opacity var(--t-zmena, 400ms); }
html body .vz-ov .ld.is-active { stroke-opacity: 1; }
html body .vz-ov .ov-pt { fill: var(--f-paper); stroke: var(--f-ink); stroke-width: 1; vector-effect: non-scaling-stroke; cursor: pointer; transition: fill var(--t-zmena, 400ms); }
html body .vz-ov .ov-pt.is-active { fill: var(--f-ink); stroke: var(--f-paper); }
html body .vz-ovl { position: absolute; display: flex; flex-direction: column; row-gap: 8px; max-width: 30%; }
html body .vz-ovl.is-r { align-items: flex-end; text-align: right; }
html body .vz-ovl .w { font-size: clamp(30px, 3.4vw, 50px); font-weight: 300; line-height: 1; letter-spacing: -.025em; color: var(--v-fg); opacity: .55; transition: opacity var(--t-zmena, 400ms); }
html body .vz-ovl .s { font-size: clamp(14px, 1.15vw, 16px); line-height: var(--lh-text, 1.5); max-width: 260px; color: var(--v-mute); }
html body .vz-ovl.is-active .w { opacity: 1; }
@media (max-width: 760px) {
  html body .vz-ovl, html body .vz-ov .ld { display: none; }
}

/* ---------- 2. aktívne body ---------- */
.vz-photo { position: relative; overflow: visible; }
.vz-photo img { display: block; width: 100%; height: auto; }
.vz-pt { position: absolute; left: var(--x); top: var(--y); z-index: 3; width: 34px; height: 34px; margin: -17px 0 0 -17px; padding: 0; border: 0; cursor: pointer;
  display: grid; place-items: center; background: none; font-family: var(--font-f-font-mono); font-size: var(--ts-popis); letter-spacing: .02em; color: var(--f-ink); }   /* 18. 10.: 10 → 11 px (nič pod 11) */
.vz-pt::before { content: ""; position: absolute; inset: 5px; border-radius: 13.39%; background: var(--f-paper); box-shadow: 0 0 0 1px var(--f-line-l, rgba(16,24,32,.2)), 0 4px 14px rgba(16,24,32,.25);
  transition: transform var(--t-zmena, 400ms) var(--f-ease), background-color var(--t-zmena, 400ms); }
.vz-pt::after { content: ""; position: absolute; inset: 5px; border-radius: 13.39%; box-shadow: 0 0 0 1px var(--f-paper); opacity: 0; animation: vz-pulse 2.6s var(--f-ease) infinite; }
.vz-pt > span { position: relative; z-index: 1; }
.vz-pt:hover::before, .vz-pt:focus-visible::before { transform: scale(1.12); }
.vz-pt.is-open::before, .vz-pt.is-active::before { background: var(--f-paper); box-shadow: 0 0 0 2px var(--v-plate, var(--f-plate-ring)), 0 0 0 3.5px var(--v-fg, var(--f-paper)); transform: scale(1.12); }
.vz-pt.is-open, .vz-pt.is-active { color: var(--f-ink); }
.vz-pt.is-open::after, .vz-pt.is-active::after { box-shadow: 0 0 0 1px var(--v-fg, var(--f-paper)); }
@keyframes vz-pulse { 0% { opacity: .9; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.9); } }
@media (prefers-reduced-motion: reduce) { .vz-pt::after { animation: none; } }
.vz-card { position: absolute; left: var(--x); top: var(--y); z-index: 4; width: min(320px, 70vw); margin: 22px 0 0 22px; padding: 18px 20px 20px; background: var(--f-paper); color: var(--f-ink);
  box-shadow: 0 0 0 1px rgba(16,24,32,.12), 0 18px 40px var(--f-line-l, rgba(16,24,32,.2)); opacity: 0; transform: translateY(6px); transition: opacity var(--t-rychlo, 240ms), transform var(--t-rychlo, 240ms) var(--f-ease); text-align: left; }
.vz-card.is-open { opacity: 1; transform: none; }
.vz-card.is-left { margin-left: 0; transform: translate(calc(-100% - 22px), 6px); }
.vz-card.is-left.is-open { transform: translateX(calc(-100% - 22px)); }
.vz-card.is-up { margin-top: 0; top: auto; bottom: calc(100% - var(--y) + 22px); }

.vz-card__h { display: block; font-size: 20px; font-weight: 500; line-height: var(--lh-veta, 1.2); letter-spacing: -.01em; margin: 0 0 8px; }
.vz-card__p { font-size: 15px; line-height: var(--lh-text, 1.5); margin: 0; color: var(--f-body-light); }
.vz-card__x { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; border: 0; background: none; cursor: pointer; font-size: 16px; color: var(--f-mute-light); }
html body .vz-list { display: none; margin: 20px 0 0; padding: 0; list-style: none; }
html body .vz-list li { display: grid; grid-template-columns: 34px minmax(0,1fr); column-gap: 12px; padding: 12px 0; border-top: 1px solid var(--v-rule); font-size: 15px; line-height: var(--lh-text, 1.5); color: var(--v-fg); }
html body .vz-list li::before { content: none; }
html body .vz-list__n { font-size: 11px; padding-top: 3px; color: var(--v-mute); }
@media (max-width: 760px) {
  html body .vz-list { display: block; }
  .vz-pt { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
  .vz-card, .vz-card.is-left, .vz-card.is-up { position: fixed; left: 12px; right: 12px; bottom: 12px; top: auto; width: auto; margin: 0; z-index: var(--z-nav, 90); transform: translateY(24px); }
  .vz-card.is-open, .vz-card.is-left.is-open { transform: none; }
  html.vz-sheet-open body::after { content: ""; position: fixed; inset: 0; z-index: var(--z-panel, 80); background: rgba(16,24,32,.35); }
}

/* ---------- 3. diagram nad fotkou ---------- */

/* ---------- ZÁKAZ ORANŽOVEJ VRSTVY (2026-10-16, Martin) ----------
   Oranžový gradient FUTUR MAX sa v infografikách NEPOUŽÍVA ako atóm / vrstva navyše (atóm navrchu jadra, oranžová vrchná doska,
   obiehajúci oranžový atóm, oranžový uzol). VÝNIMKA: oranžová, ktorá niečo celé obopína — krabička Memory (.mem-box).
   Kurzor stavového riadku (.vz-status__t::after) nie je infografika, ostáva. Tento blok neutralizuje staré pravidlá vyššie. */
html body .vz-iso .pl-max:not(.is-active) .pl-top, html body .vz-iso .pl-max:not(.is-active) .pl-edge,
html body .vz-pyrp .pl-max:not(.is-active) .pl-top, html body .vz-pyrp .pl-max:not(.is-active) .pl-edge{ fill: var(--v-plate); stroke: var(--v-plate-s); }

html body .vz-pyrp .pl-max .pl-num { fill: var(--v-mute); }
html body .vz-pyrp .pl-max.is-active .pl-num { fill: var(--v-act-fg); }
 html body .vz-web .wc-atom, html body .vz-ring .rg-atom { fill: var(--v-fg); }

/* STAVOVÝ RIADOK PRILEPENÝ NA MOBILE (2026-10-17) */
@media (max-width: 900px) {
  
  html body .vz-fit .vz-status, html body .vz-flow .vz-status { position: sticky; bottom: 12px; z-index: 5; }
  html body .vz-t-dark .vz-status { background: linear-gradient(var(--v-st-bg), var(--v-st-bg)), var(--f-ink); }
}
/* STAVOVÝ RIADOK PRILEPENÝ AJ NA DESKTOPE (27. 10. 2026, Martin: „všade, kde máme stavový riadok pri ilustráciách, aby sa
   rovnako ako na mobile pripínal o spodok — keď je ilustrácia väčšia a okno menšie, tak ho nevidieť“). Rovnaké pravidlo ako
   mobil: sticky LEN keď je riadok naozaj pritlačený k spodku (.is-pin z ph-viz.js pinUpd — už bez obmedzenia na 900 px);
   keď dosiahne svoje miesto pod kresbou, prestane byť sticky (bez skoku). Tmavá téma plné pozadie (5 % svetlej cez --f-ink
   = rovnaký vzhľad), aby cez prilepený riadok nepresvitala kresba. */
@media (min-width: 901px) {
  
  /* každý diagram s cyklom (aj staršie prototypy bez .vz-fit — Brand components / Vizuálny systém) */
  html body [data-cycle].is-pin .vz-status { position: sticky; bottom: 12px; z-index: 5; }
  html body .vz-t-dark .vz-status { background: linear-gradient(var(--v-st-bg), var(--v-st-bg)), var(--f-ink); }
}

/* WHATSAPP SKRYTÝ, KÝM JE DIAGRAM V ZÁBERE (2026-10-17) */
@media (max-width: 900px) {
  
}

/* ZOZNAM POD OBRÁZKOM JE KLIKATEĽNÝ (2026-10-17) */
html body .vz-legend li[data-step-label] { cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* SPLEŤ — „Poznanie bez systému“ (tools/vz_splet.py, Memory 01) — 2026-10-18. Ručný blok (nie generovaný).
   Plochý diagram: 6 hlavných miest (kroky) + desiatky malých úložísk, linky krížom-krážom. Aktívne miesto sa vyplní
   (ako aktívna doska); po spojniciach občas prebehne signál. Pod 900 px kresba na výšku (.vz-mob). */
html body .vz-splet .vz-stage { position: relative; }
html body .vz-splet .sp-svg { display: block; width: 100%; height: auto; overflow: visible; }
html body .vz-splet .sp-ln { stroke: var(--v-plate-s); stroke-width: 1; fill: none; opacity: var(--o); vector-effect: non-scaling-stroke; transition: opacity var(--t-zmena, 400ms), stroke-width var(--t-zmena, 400ms); }
html body .vz-splet .sp-dash { stroke-dasharray: 4 4; }
html body .vz-splet .sp-pulse { stroke: var(--v-plate-s); stroke-width: 1.6; fill: none; vector-effect: non-scaling-stroke;
  stroke-dasharray: 14 600; stroke-dashoffset: 14; animation: sp-run 3s linear infinite; }
@keyframes sp-run { from { stroke-dashoffset: 14; } to { stroke-dashoffset: -600; } }
html body .vz-splet .sp-dot { fill: var(--v-plate); stroke: var(--v-plate-s); stroke-width: 1; vector-effect: non-scaling-stroke; }
html body .vz-splet .sp-dot--f { fill: var(--v-plate-s); }
html body .vz-splet .sp-at { fill: var(--v-plate); stroke: var(--v-plate-s); stroke-width: 1; vector-effect: non-scaling-stroke; transition: fill var(--t-zmena, 400ms); }
html body .vz-splet .sp-num { font-family: var(--font-f-font-mono); font-size: 11px; fill: var(--v-mute); transition: fill var(--t-zmena, 400ms); }
html body .vz-splet .vz-mob .sp-num { font-size: 13px; }       /* mobilná kresba ~0,84 → na obrazovke ≥ 11 px */
html body .vz-splet .sp-m { cursor: pointer; }
html body .vz-splet .sp-m.is-active .sp-at { fill: var(--v-act); }
html body .vz-splet .sp-m.is-active .sp-num { fill: var(--v-act-fg); }
/* spojnice aktívneho miesta sa NEZVÝRAZŇUJÚ (18. 10., Martin: „moc tmavé“) — vyplní sa len atóm; triedy sp-l0…5 ostávajú v kresbe */
html body .vz-splet .vz-mob { display: none; }
html body .vz-splet .vz-lab .s { text-transform: none; }
@media (max-width: 900px) {
  html body .vz-splet .vz-stage > .sp-svg { display: none; }
  html body .vz-splet .vz-mob { display: block; }
  html body .vz-splet .vz-mob .sp-svg { max-width: 420px; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) { html body .vz-splet .sp-pulse { display: none; } }

/* AUDIT 01 — DVE OTÁZKY (tools/audit_01.py) — 18. 10. Firma ako mriežka nad vetami; vľavo bliká, vpravo 3 vybrané pulzujú. */
html body .a2 .a2-firma { display: block; margin: 0 0 12px; }
html body .a2 .a2-svg { display: block; width: 100%; height: auto; margin: 0 0 32px; overflow: visible; }
html body .a2-ram { fill: none; stroke: var(--v-plate-s); stroke-width: 1; vector-effect: non-scaling-stroke; }
html body .a2-at { fill: var(--v-plate); stroke: var(--v-plate-s); stroke-width: 1; vector-effect: non-scaling-stroke; }
html body .a2-f { fill: var(--v-plate-s); }
html body .a2-o { fill: none; stroke: var(--v-plate-s); stroke-width: 1; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; opacity: .45; }
/* vľavo: pomalé náhodné blikanie (každý atóm vlastný rytmus --t a posun --d) */
html body .a2-bl { animation: a2-bl var(--t, 7s) steps(1, end) var(--d, 0s) infinite; }
@keyframes a2-bl { 0% { fill: var(--v-plate); } 8% { fill: var(--v-plate-s); } 22% { fill: var(--v-plate); } 100% { fill: var(--v-plate); } }
/* vpravo: pulz ako bod „i“ (vz-pulse), ale pomalší — 4,2 s */
html body .a2-pu { fill: none; stroke: var(--v-plate-s); stroke-width: 1; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center;
  opacity: 0; animation: vz-pulse 4.2s var(--f-ease) var(--d, 0s) infinite; }
/* zliaty tvar / skupina: obrys sa rozšíri o rovnakých ~12 px na každú stranu (nie 1,9 × — široký tvar by narazil na susedov) */
html body .a2-puw { animation-name: a2-pulse-w; }
@keyframes a2-pulse-w { 0% { opacity: .9; transform: scale(1, 1); } 70%, 100% { opacity: 0; transform: scale(var(--sx, 1.2), var(--sy, 1.2)); } }
html body .a2-grp { fill: none; stroke: var(--v-plate-s); stroke-width: 1; vector-effect: non-scaling-stroke; }
@media (prefers-reduced-motion: reduce) { html body .a2-bl, html body .a2-pu { animation: none; } }

/* AUDIT A STRATÉGIA — 3 diagramy (tools/vz_audit.py) — základ blokov pre diagram 02 (vz-aud3).
   18. 10.: pravidlá starých návrhov (reťaz, Audit v4, kontext — vz-audr/v/k, au-at, au-ln, au-ov…) odstránené. */
html body .au-pl { fill: var(--v-plate); stroke: var(--v-plate-s); stroke-width: 1; vector-effect: non-scaling-stroke; transition: fill var(--t-zmena, 400ms); }

/* AUDIT 02 — DVE VRSTVY (tools/vz_audit.py dve_vrstvy) — 18. 10. */
html body .au-pl--d { fill: none; stroke-dasharray: 4 3; }
/* prerušovaná dlaždica nemá výplň → bez tohto by sa dala kliknúť len presne na čiaru; takto celá plocha (Martin, 18. 10.) */
html body .vz-aud3 .au-pl--d { pointer-events: all; }
/* kostra Memory (vz-aud3): prerušovaná vrstva Audit je priehľadná (matica pod ňou ostáva vidieť), bez hrany, klikateľná celou plochou */
html body .vz-aud3 .pl-ext .pl-top { fill: none; pointer-events: all; }
html body .vz-aud3 .pl-ext .pl-edge { display: none; }
/* aktívny krok: SVIETIA LEN MALÉ BLOKY na doske, doska ostáva tmavá (18. 10., Martin: „rozsvecujme malé bloky, nie dosku, na všetkých“);
   doska sa len zdvihne (ako všetky aktívne dosky v izometrii) */
html body .vz-aud3 .pl.is-active .pl-top { fill: var(--v-plate); }
html body .vz-aud3 .pl.is-active .pl-num { fill: var(--v-fg); }
html body .vz-aud3 .pl.is-active .au-pl:not(.au-edge) { fill: var(--v-act); }
/* priority stratégie sú v pokoji stlmené, aby pri kroku 04 bolo ich rozsvietenie vidieť */
/* aj STRATÉGIA v prechode FUTUR MAX (Martin, 18. 10.: „veď sa to volá Audit a stratégia“): priority a ich pulz */
html body .vz-aud3 .au-pl--f:not(.au-edge) { fill: url(#au-max-g); stroke: url(#au-max-g); fill-opacity: .4; transition: fill-opacity var(--t-zmena, 400ms); }
html body .vz-aud3 .pl.is-active .au-pl--f:not(.au-edge) { fill: url(#au-max-g); fill-opacity: 1; }
/* 04 STRATÉGIA — mikroakcia: priority zasvietia a pulzujú (ako sekcia 01) */
html body .vz-aud3 .au-pu { fill: none; stroke: var(--f-max-b); stroke-width: 1; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; opacity: 0; }
html body .vz-aud3 .pl.is-active .au-pu { animation: vz-pulse 2.6s var(--f-ease) var(--d, 0s) infinite; }
@media (prefers-reduced-motion: reduce) { html body .vz-aud3 .pl.is-active .au-pu { animation: none; } }
/* prerušovaná doska (Audit): bez výplne aj pri aktívnom kroku — len plná čiara (DIAGRAMY.md 5), svietia jej bloky */
/* aktívny AUDIT (Martin, 18. 10.): bloky sa len vyplnia bielou, rám aj obrysy ostanú prerušované v prechode */
html body .vz-aud3 .pl.pl-ext.is-active .pl-top { fill: none; }
html body .vz-aud3 .pl.pl-ext.is-active .au-pl--d:not(.au-edge) { fill: var(--v-act); stroke: none; }   /* bez obrysu okolo blokov */
/* AUDIT v žlto-oranžovom prechode FUTUR MAX (výnimka z „oranžová len ako obal“ — na želanie, 18. 10.): rám, bloky, číslo */
html body .vz-aud3 .pl-ext .pl-top, html body .vz-aud3 .pl-ext .au-pl--d { stroke: url(#au-max-g); }
html body .vz-aud3 .pl-ext .pl-num, html body .vz-aud3 .pl-ext.is-active .pl-num { fill: var(--f-max-b); }

/* SOFTWARE AS BLUEPRINTS — VÝKRES A PRODUKT (22. 10. 2026, koncepty/software-as-blueprints.html sekcia 02, <!--vz:blueprints-vykres-->;
   návrh drafty/navrh-sab.html C). Kostra ako Audit 02 (.vz-iso .vz-fit, linky .ld, menovky .vz-lab, stavový riadok, zoznam).
   01 produkt (prechod FUTUR ONE, pulz) sa vznáša nad pôdorysom · 02 výkres A4 s kótami (prechod na každej kóte) · 03 prerušovaný pás.
   Aktívny krok sa zdvihne; výkres rozsvieti obrys, pás = plná hrubšia čiara s podkladom, celá plocha pásu je klikateľná. */
html body .sb-cyc .sb-svg { display: block; width: 100%; height: auto; overflow: visible; }
html body .sb-cyc .sb-sheet { fill: var(--f-ink); stroke: rgba(244,243,239,.85); stroke-width: 1; vector-effect: non-scaling-stroke; }
html body .sb-cyc .sb-grid { stroke: rgba(244,243,239,.09); stroke-width: 1; vector-effect: non-scaling-stroke; }
html body .sb-cyc .sb-draw { fill: none; stroke: rgba(244,243,239,.75); stroke-width: 1; vector-effect: non-scaling-stroke; }
html body .sb-cyc .sb-plan { fill: none; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
html body .sb-cyc .sb-dash { stroke-dasharray: 5 5; }
html body .sb-cyc .sb-ext { stroke: rgba(244,243,239,.35); stroke-width: 1; vector-effect: non-scaling-stroke; }
html body .sb-cyc :is(.sb-dim, .sb-tick) { stroke-width: 1; vector-effect: non-scaling-stroke; }
html body .sb-cyc .sb-num { font-family: var(--font-f-font-mono); letter-spacing: var(--tr-popis, .08em); }
html body .sb-cyc .sb-pn { font-family: var(--font-f-font-mono); font-size: 11px; letter-spacing: .08em; fill: var(--v-mute); }   /* = .vz-iso .pl-num */
html body .sb-cyc .sb-pn--on { fill: var(--f-ink); fill-opacity: .7; }
html body .sb-cyc .sb-guide { stroke: rgba(244,243,239,.35); stroke-width: 1; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
/* VODIACE ČIARY IDÚ S DOSKAMI (26. 10. 2026, Martin: „čiarky sa neprispôsobujú, keď sa pri kliknutí mení poloha“):
   aktívny krok sa zdvihne o 10 → vrch čiary ide s 01 (produkt), spodok s 02 (výkres). Čiara sa natiahne / posunie
   (--L = jej dĺžka v jednotkách kresby, zapísaná na čiare): translateY(−b) · scaleY((L + a − b) / L) okolo spodku. */
html body .sb-cyc .sb-guide { --a: 0; --b: 0; transform-box: fill-box; transform-origin: 50% 100%;
  transform: translateY(calc(var(--b) * -1px)) scaleY(calc((var(--L, 100) + var(--a) - var(--b)) / var(--L, 100)));
  transition: transform var(--t-nabeh, 600ms) var(--f-ease); }
html body .sb-cyc:has(.sb-step[data-order="1"].is-active) .sb-guide { --a: 10; }
html body .sb-cyc:has(.sb-step[data-order="2"].is-active) .sb-guide { --b: 10; }
html body .sb-cyc .sb-obj { fill: var(--f-ink); stroke: rgba(244,243,239,.85); stroke-width: 1; vector-effect: non-scaling-stroke; }
html body .sb-cyc .sb-pu { fill: none; stroke-width: 1; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; opacity: 0; animation: vz-pulse 2.6s var(--f-ease) infinite; }
html body .sb-cyc .sb-step { cursor: pointer; transition: transform var(--t-nabeh, 600ms) var(--f-ease); }
html body .sb-cyc .sb-step.is-active { transform: translateY(-10px); }
html body .sb-cyc .sb-step :is(.sb-sheet, .sb-plan, .sb-pn) { transition: stroke var(--t-zmena, 400ms), stroke-width var(--t-zmena, 400ms), fill var(--t-zmena, 400ms), fill-opacity var(--t-zmena, 400ms); }
html body .sb-cyc .sb-step.is-active .sb-sheet { stroke: var(--f-paper); }
html body .sb-cyc .sb-step.is-active .sb-pn:not(.sb-pn--on) { fill: var(--v-fg); }
/* pás 03 je bez výplne → neviditeľná výplň, aby bola klikateľná celá plocha (nie len prerušovaná čiara) */
html body .sb-cyc .sb-step .sb-plan.sb-dash { fill: var(--f-paper); fill-opacity: 0; pointer-events: all; }
html body .sb-cyc .sb-step.is-active .sb-plan.sb-dash { stroke-dasharray: none; stroke-width: 1.6; fill-opacity: .07; }
@media (prefers-reduced-motion: reduce) { html body .sb-cyc :is(.sb-step, .sb-guide) { transition: none; } html body .sb-cyc .sb-pu { animation: none; } }

/* 404 — 3D „404“ Z ATÓMOVÉHO PÍSMA AKO MINI HRA (23. 10. 2026, site/404.html, <!--vz:404-polozene-->, kreslí
   tools/navrh_404_hra.py, hrá site/_instatic/js/ph-404-hra.js). VÝNIMKA z PRAVIDLA-WEBU 7 (tichá ilustrácia) — na 404
   je zámerne hra so stavovým riadkom (Martin). Štvorky = plné telesá (vrch .pl-top v tvare glyfu, zaoblené steny), na
   mieste nuly prerušovaný obrys nuly. Nula sa rozsypala na štyri paličky z kociek: ťahať (bez otáčania), zapadnú do
   obrysu; po doskladaní sa kocky spoja do hladkej nuly so zaoblenými rohmi (blok „404 HRA“ nižšie). */
html body .nf3 .nf3-slot { fill: none; stroke: url(#nf3-g); stroke-width: 1.5; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
/* zaoblené steny štvoriek: plochy bez obrysu (farba pozadia — švy nevidno), hrany zvlášť — spodná hrana a zvislé hrany */
html body .nf3 .nf3-w { fill: var(--v-plate); stroke: none; }
html body .nf3 .nf3-e { stroke: var(--v-plate-s); stroke-width: 1; stroke-linecap: butt; vector-effect: non-scaling-stroke; }   /* butt: okrúhly koniec trčal nad hranu vrchu ako bodka */
/* nula: steny majú farbu priamo v kresbe (odtieň podľa natočenia); obrys rovnakou farbou zakryje švy medzi úsekmi */

html body .nf3 .nf3-ze { stroke: var(--f-max-deep); stroke-width: 1; stroke-opacity: .55; stroke-linecap: butt; vector-effect: non-scaling-stroke; }
html body .nf3 .nf3-zt { fill: url(#nf3-g); stroke: none; }

/* >>> 404 HRA (generuje tools/navrh_404_hra.py — neupravovať ručne) */
/* kocky kúskov: farba v kresbe, tenký šev medzi kockami */
html body .nf3-hra .cb { stroke: var(--f-max-deep); stroke-opacity: .35; stroke-width: .8; stroke-linejoin: round; transition: stroke-opacity var(--t-zmena, 400ms); }
html body .nf3-hra .tile { fill: var(--f-max-b); fill-opacity: .35; stroke: var(--f-max-b); stroke-width: 1; }
html body .nf3-hra .pc { cursor: grab; outline: none; touch-action: none; }   /* prst na kúsku ťahá, inde posúva stránku */
html body .nf3-hra .pc .hit { fill: transparent; stroke: none; pointer-events: all; }   /* väčší dosah pre prst */
html body .nf3-hra .pc.lift { cursor: grabbing; }
html body .nf3-hra .pc .in { transition: transform var(--t-rychlo, 240ms) var(--f-ease); }
html body .nf3-hra .pc.lift .in { transform: translate(0, -14px); filter: drop-shadow(0 10px 6px rgba(0,0,0,.12)); }
html body .nf3-hra .pc:hover .cb, html body .nf3-hra .pc:focus-visible .cb { stroke: var(--f-max-deeper); stroke-opacity: .85; }
html body .nf3-hra.done .pc { cursor: default; }   /* kým nie je nula celá, dajú sa chytiť aj kúsky, ktoré už sedia */
html body .nf3-hra .pc.on .in { animation: nf3-click var(--t-zmena, 400ms) var(--f-ease); }
@keyframes nf3-click { from { transform: translate(0, -8px); } to { transform: translate(0, 0); } }
html body .nf3-hra .pc.shake .in { animation: nf3-shake var(--t-zmena, 400ms); }
@keyframes nf3-shake { 25% { transform: translate(-5px, 0); } 50% { transform: translate(5px, 0); } 75% { transform: translate(-3px, 0); } }
/* hladká nula: bez skriptu viditeľná (kresba je úplná), v hre skrytá; po doskladaní sa kocky SPOJA —
   najprv zmiznú švy, potom sa cez ne prelnie hladká nula so zaoblenými rohmi a kocky pod ňou zmiznú */
/* hrana vrchu hladkej nuly: tenká svetlá linka (svetlo na hrane) — vrch a steny nesplývajú */
html body .nf3-hra .nf3-smooth .nf3-zt { stroke: rgba(255,228,176,.8); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
html body .nf3-hra.play .nf3-smooth { opacity: 0; pointer-events: none; }
html body .nf3-hra.play.done .nf3-smooth { opacity: 1; transition: opacity var(--t-pomaly, 900ms) var(--f-ease) .35s; }
html body .nf3-hra.done .pc .cb { stroke-opacity: 0; }
html body .nf3-hra.done .pc { opacity: 0; transition: opacity var(--t-rychlo, 240ms) linear 1.15s; }
html body .nf3-hra.done .nf3-slot { opacity: 0; transition: opacity var(--t-zmena, 400ms); }
html body .nf3-hra:not(.play) .nf3-st, html body .nf3-hra:not(.play) .nf3-slot { display: none; }

/* stavový riadok webu (.vz-status): veľké = stopky (tabuľkové číslice), výpis = stav hry, vpravo odkazy */
html body .nf3-hra .nf3-time { font-variant-numeric: tabular-nums; min-width: 2.6em; }
html body .nf3-hra.done .nf3-time { color: var(--f-max-b); }
html body .nf3-hra .nf3-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 18px; flex: none; }
html body .nf3-hra .nf3-re { all: unset; cursor: pointer; font-family: var(--font-f-font-mono); font-size: 12px;
  letter-spacing: var(--tr-popis, .08em); text-transform: uppercase; text-decoration: underline; text-underline-offset: 4px; color: var(--v-st-mute); }
html body .nf3-hra .nf3-re:hover, html body .nf3-hra .nf3-re:focus-visible { color: var(--v-st-fg); }

/* rozcestník pod hrou: bez vlastných štýlov — sekcia ph-sec f-light + karty kk kp kp--uvod (ph-koncepty.css), ako na úvode */
@media (max-width: 640px) { html body .nf3-hra .nf3-st { flex-wrap: wrap; row-gap: 10px; } html body .nf3-hra .nf3-acts { width: 100%; justify-content: flex-start; } }
@media (prefers-reduced-motion: reduce) { html body .nf3-hra .pc .in { transition: none; animation: none; } html body .nf3-hra.play.done .nf3-smooth, html body .nf3-hra.done .pc { transition: none; } }
/* <<< 404 HRA */

/* >>> DIAGRAMY Z tools/vz_web.py — GENEROVANÉ (vz_web.sync_css), NEUPRAVOVAŤ RUČNE */
/* 00-tok-mobil */
html body .vz-flow .vz-mob{display:none}
@media (max-width:900px){html body .vz-flow.vz-has-mob>.vz-stage>svg{display:none}
html body .vz-flow .vz-mob{display:block}
html body .vz-flow .vz-mob svg{display:block;width:100%;height:auto;margin:0 auto}}
/* 04-lievik */

/* 06-zatvorka */
html body .vz-zatvorka path.ld{fill:none}
html body .vz-zatvorka .mn{fill:none;stroke:var(--v-line-s);stroke-width:1;opacity:.55;vector-effect:non-scaling-stroke}
html.f-js body .vz-zatvorka:not(.is-in) :is(.mn,.lk){opacity:0}
html body .vz-zatvorka :is(.mn,.lk){transition:opacity var(--t-nabeh, 600ms) linear 600ms}
/* 11-pamat */
html body .vz-mg .mg-hole{fill:none;stroke-width:1;stroke-dasharray:4 5;opacity:1;vector-effect:non-scaling-stroke}
html body .vz-mg .mg-ghost{fill:none;pointer-events:all;stroke-width:1;stroke-dasharray:4 5;opacity:1;vector-effect:non-scaling-stroke}
html body .vz-mg .mg-mem.is-active .mg-ghost{opacity:1;fill:none}
html body .vz-mg .mg-pu{fill:none;stroke-width:1;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;opacity:0;pointer-events:none}
html body .vz-mg .mg-mem.is-active .mg-pu{animation:mg-pulse 2.6s var(--f-ease) infinite}@keyframes mg-pulse{0%{opacity:.9;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.12)}}
@media (prefers-reduced-motion:reduce){html body .vz-mg .mg-mem.is-active .mg-pu{animation:none}}
html body .vz-mg .mg-mem .pl-num,html body .vz-mg .mg-mem.is-active .pl-num{fill:var(--f-max-b)}
html body .vz-mg .mg-guide{fill:none;stroke:var(--v-plate-s);stroke-width:1;stroke-dasharray:3 4;opacity:.4;vector-effect:non-scaling-stroke}
html body .vz-mg .mg-guide{--a:0;--b:0;transform-box:fill-box;transform-origin:50% 100%;transform:translateY(calc(var(--b) * -1px)) scaleY(calc((var(--L, 100) + var(--a) - var(--b)) / var(--L, 100)));transition:transform var(--t-nabeh, 600ms) var(--f-ease)}
html body .vz-mg :is(svg:has(.pl[data-order="3"].is-active),svg:has(.pl[data-step-tap="2"].is-active)) .mg-guide{--a:10}
html body .vz-mg svg:has(.mg-mem.is-active) .mg-guide{--b:10}
@media (prefers-reduced-motion:reduce){html body .vz-mg .mg-guide{transition:none}}
html body .vz-mg .pl:is([data-order="1"],[data-step-label="0"]).is-active{transform:none}
html body .vz-mg .mg-mem.is-active .mg-hole{opacity:1}
/* 12-stol */
html body .vz-stol .sd-desk .pl-top,html body .vz-stol .sd-desk .pl-edge{fill:var(--v-plate);stroke:var(--v-plate-s);stroke-width:1;vector-effect:non-scaling-stroke}
html body .vz-stol .sd-desk{pointer-events:none}
html body .vz-stol path.ld{fill:none}
html body .vz-stol .sd-tray{fill:var(--v-plate);fill-opacity:0;pointer-events:all;stroke:var(--v-plate-s);stroke-width:1;stroke-dasharray:5 5;vector-effect:non-scaling-stroke}
html body .vz-stol .sd-slot{fill:var(--v-act);fill-opacity:0;stroke:var(--v-plate-s);stroke-width:1;stroke-dasharray:4 4;vector-effect:non-scaling-stroke;transition:fill-opacity var(--t-zmena, 400ms)}
html body .vz-stol .sd-rel.is-active .pl-num{fill:var(--v-fg)}
html body .vz-stol .sd-rel.is-active .sd-slot{fill:var(--v-act);fill-opacity:1;stroke:none}
/* 13-cesta */
html body .vz-flow .fw-n .lk path{fill:var(--v-fg);transition:fill var(--t-zmena, 400ms)}
html body .vz-flow .fw-n .lk-suf{font-family:var(--font-f-font-mono);font-weight:500;letter-spacing:.08em;fill:var(--v-fg);transition:fill var(--t-zmena, 400ms)}
html body .vz-flow .fw-n.is-active .lk path,html body .vz-flow .fw-n.is-active .lk-suf{fill:var(--v-act-fg)}
/* 13-zaznam */
html body .vz-zaznam .zr-row{cursor:pointer}
html body .vz-zaznam .zr-card{fill:var(--v-plate);stroke:var(--v-plate-s);stroke-width:1;vector-effect:non-scaling-stroke;transition:fill var(--t-zmena, 400ms),stroke var(--t-zmena, 400ms)}
html body .vz-zaznam .zr-row.is-active .zr-card{fill:var(--v-act);stroke:var(--v-act)}
html body .vz-zaznam .zr-row.is-active :is(.zr-v,.zr-why,.zr-dt){fill:var(--v-act-fg)}
html body .vz-zaznam .zr-row.is-active .zr-at:not(.zr-at--now){fill:none;stroke:var(--v-act-fg)}
html body .vz-zaznam :is(.zr-v,.zr-why,.zr-dt){transition:fill var(--t-zmena, 400ms)}
html body .vz-zaznam .vz-mob{display:none}
html body .vz-zaznam .zr-v.zr-v--m{font-size:21px}
html body .vz-zaznam .zr-why.zr-why--m{font-size:16px}
@media (max-width:900px){html body .vz-zaznam>.vz-stage>svg{display:none}
html body .vz-zaznam .vz-mob{display:block}
html body .vz-zaznam .vz-mob svg{display:block;width:100%;height:auto}}
html body .vz-zaznam .zr-at{fill:var(--v-plate);stroke:var(--v-plate-s);stroke-width:1;vector-effect:non-scaling-stroke;transition:fill var(--t-zmena, 400ms)}
html body .vz-zaznam .zr-at--past{fill:none;stroke-dasharray:4 4}
html body .vz-zaznam .zr-at--now{stroke:none}
html body .vz-zaznam .zr-dt{font-family:var(--font-f-font-mono);font-size:11px;letter-spacing:.08em;fill:var(--v-mute)}
html body .vz-zaznam .zr-v{font-family:var(--font-f-font-sans,"articulat-cf");font-size:17px;fill:var(--v-mute);transition:fill var(--t-zmena, 400ms)}
html body .vz-zaznam .zr-row.is-now:not(.is-active) .zr-v{fill:var(--v-fg)}
html body .vz-zaznam .zr-why{font-family:var(--font-f-font-sans,"articulat-cf");font-size:12.7px;fill:var(--v-mute)}
/* <<< koniec generovaných štýlov */

/* zatváracie × karty bodu „i“: neutrálny rámik namiesto modrého z prehliadača (2026-10-17) */
/* × = atómová ikonka close.svg presne v strede tlačidla; rámik len pri ovládaní klávesnicou
   (2026-10-17, Martin: na mobile bolo × vysunuté zo štvorca, ktorý ho obaľuje) */
.vz-card__x { display: grid; place-items: center; padding: 0; margin: 0; line-height: 0; font-size: 0;
  -webkit-appearance: none; appearance: none; border-radius: 0; -webkit-tap-highlight-color: transparent; }
.vz-card__x::before { content: ""; width: 10px; height: 10px; background: currentColor;
  -webkit-mask: url(../../uploads/icons/close.svg) no-repeat center / contain; mask: url(../../uploads/icons/close.svg) no-repeat center / contain; }
.vz-card__x:hover { color: var(--f-ink); }
.vz-card__x:focus { outline: none; box-shadow: none; }
.vz-card__x:focus-visible { outline: 1px solid var(--f-ink); outline-offset: 0; }
/* karta bez malého nápisu (kicker) — všade, aj na fotkách (2026-10-17); nadpis nevbehne pod × */

.vz-card__h { padding-right: 26px; }
/* >>> AUDIT 03 — ŠIROKÝ KONTEXT (tools/navrh_audit_03.py) */
.a3x .vz-stage{position:relative}
.a3x svg{display:block;width:100%;height:auto;overflow:visible}
.a3x .at{fill:var(--v-plate);stroke:var(--v-plate-s);stroke-width:1;vector-effect:non-scaling-stroke;transition:fill var(--t-zmena, 400ms)}
.a3x .bd{fill:none;stroke:var(--v-line);stroke-width:1;vector-effect:non-scaling-stroke}

.a3x .ln{fill:none;stroke:var(--v-line);stroke-width:1;vector-effect:non-scaling-stroke}



.a3x .nm{font-family:var(--font-f-font-mono);font-size:11px;letter-spacing:var(--tr-popis, .08em);fill:var(--v-mute)}
.a3x .q{font-family:var(--font-f-font-mono);font-size:30px;fill:var(--v-fg)}

.a3x .st{cursor:pointer}
/* čísla krokov na kresbe (ako dosky Memory): klikateľné miesto. 18. 10. (Martin: „prečo to na hover tak stučnieva —
   nepáči sa mi“): ŽIADNE hrubnutie obrysov (hover ani aktívny krok). Nadvihnutie o 10 px skúsené a ZRUŠENÉ
   („zdvíhanie nefunguje, je to divné“). Kresba sa nehýbe: aktívny krok = stmavne číslo + linka a menovka + stavový riadok */
.a3x .nu{font-family:var(--font-f-font-mono);font-size:11px;letter-spacing:.08em;fill:var(--v-mute);transition:fill var(--t-zmena, 400ms)}
.a3x .st.is-active .nu{fill:var(--v-fg)}

/* obal = Celok (ako .mem-box pri Memory: jediná povolená žltá) */
.a3x .box{fill:none;stroke:var(--f-max-b);stroke-width:1.5;stroke-dasharray:6 5;stroke-linejoin:round;vector-effect:non-scaling-stroke}

.a3x .sel{fill:var(--v-act);fill-opacity:0;stroke:var(--v-fg);stroke-width:1;stroke-dasharray:4 5;vector-effect:non-scaling-stroke}
.a3x .tr{fill:none;stroke:var(--v-fg);stroke-width:1;stroke-dasharray:3 5;vector-effect:non-scaling-stroke}

.a3x .g-max{fill:url(#a3-max-g);stroke:none}
/* (18. 10., „04 má mať stroke prázdny, ale gradient hore“): hrana = prázdna (len obrys v prechode), vrch = plný prechod */
.a3x .g-edge{fill:var(--v-plate);stroke:url(#a3-max-g);stroke-width:1.2;vector-effect:non-scaling-stroke}

.a3x .sym{fill:var(--v-plate);stroke:var(--f-max-b);stroke-width:1.2;vector-effect:non-scaling-stroke}

.a3x .nu.n-or{fill:var(--f-max-b)}

/* AKTÍVNY KROK (19. 10., Martin: „efekt po kliku, aby sa zvýraznila plocha — pozri iné diagramy a odvoď“):
   plocha / rámik = ako 02 Pamäť v diagrame 11 (Memory Graph): prerušovaná → PLNÁ čiara + jemné podfarbenie 7 %;
   dlaždica = ako uzol pavúka: VYPLNÍ sa (konverzia svojou oranžovou); značka je už plná → tenký rámik okolo (ako výber Audit 01).
   Nič nehrubne ani sa nezdvíha. */
/* 27. 10. 2026 (Martin: „na klik to divno preblikne“): farba plochy je STÁLE v-act, mení sa len sila 0 → 7 %.
   Predtým fill:transparent → v-act sa prepol naraz a sila 100 % → 7 % sa animovala = záblesk tmavej plochy. */
.a3x .ar{fill:var(--v-act);fill-opacity:0}
.a3x .sel,.a3x .ar{transition:fill-opacity var(--t-zmena, 400ms)}
.a3x .st.is-active .sel{stroke-dasharray:none;fill:var(--v-act);fill-opacity:.07}
.a3x .st.is-active .ar{fill:var(--v-act);fill-opacity:.07}
.a3x .sym{transition:fill var(--t-zmena, 400ms)}
.a3x .st.is-active .sym{fill:url(#a3-max-g);stroke:none}
.a3x .st.is-active .nu.n-or{fill:var(--f-paper)}
.a3x .ring{fill:none;stroke:var(--v-fg);stroke-width:1;vector-effect:non-scaling-stroke;opacity:0;transition:opacity var(--t-zmena, 400ms)}
.a3x .st.is-active .ring{opacity:1}

.a3x path.ld{stroke-linejoin:round}
.a3x .ld{fill:none;stroke:var(--v-line);stroke-width:1;vector-effect:non-scaling-stroke;transition:stroke var(--t-zmena, 400ms)}
.a3x .ld.is-active{stroke:var(--v-line-s)}
@media (max-width:900px){.a3x .ld{display:none}}
@media (max-width:900px){.a3x .nm{display:none}.a3x .nm.nm-k{display:inline;font-size:17px;letter-spacing:0}.a3x .nu{font-size:15px}}

.a3x[data-k="1"] .f1,.a3x[data-k="2"] .f1,.a3x[data-k="3"] .f1,.a3x[data-k="4"] .f1{fill:var(--v-plate-s)}

.a3x[data-k="3"] .nf3,.a3x[data-k="4"] .nf3{fill:var(--v-plate)}

/* <<< AUDIT 03 */
/* >>> FUTUR MAX 05 — PLOCHÝ STROM (rámec: MAX hore, pod ním STUDIO · ONE · Koncepty) — 19. 10. 2026 (pomocná stránka návrhu zmazaná, je v histórii gitu) */
html body .vz-flatfr svg{display:block;width:100%;height:auto;overflow:visible}
html body .vz-flatfr .pl{cursor:pointer}
html body .vz-flatfr .fr-ln2{fill:none;stroke:var(--v-line-s);stroke-width:1;vector-effect:non-scaling-stroke}
html body .vz-flatfr .lk path{fill:var(--v-fg);transition:fill var(--t-zmena, 400ms)}
html body .vz-flatfr .lk-suf{font-family:var(--font-f-font-mono);font-weight:500;letter-spacing:.08em;fill:var(--v-fg);transition:fill var(--t-zmena, 400ms)}
html body .vz-flatfr .fr-node{fill:var(--v-plate);stroke:var(--v-plate-s);stroke-width:1;vector-effect:non-scaling-stroke;transition:fill var(--t-zmena, 400ms)}
html body .vz-flatfr .fr-dashn{stroke-dasharray:6 5;fill:transparent}
html body .vz-flatfr .pl.is-active .fr-node{fill:var(--v-act)}
html body .vz-flatfr .pl.is-active .fr-dashn{fill:var(--v-act);fill-opacity:.07;stroke-dasharray:none}
html body .vz-flatfr .pl-num{font-family:var(--font-f-font-mono);font-size:13px;letter-spacing:.08em;fill:var(--v-mute);transition:fill var(--t-zmena, 400ms)}
html body .vz-flatfr .pl.is-active .pl-num{fill:var(--v-act-fg)}
/* prerušovaný obrys: pod číslom ostáva svetlá plocha → číslo sa neprefarbuje (DIAGRAMY.md) */
html body .vz-flatfr .pl.is-active .fr-dashn ~ .pl-num{fill:var(--v-mute)}
html body .vz-flatfr .pl.is-active .lk path,html body .vz-flatfr .pl.is-active .lk-suf{fill:var(--v-act-fg)}
html body .vz-flatfr .fr-sub{font-family:var(--font-f-font-sans);font-size:16px;fill:var(--v-mute);transition:fill var(--t-zmena, 400ms)}
html body .vz-flatfr .pl.is-active .fr-sub{fill:var(--v-act-fg);fill-opacity:.7}
/* názvy projektov v menovkách ako logo FUTUR (ph-mono.js prepíše „FUTUR …“ v .ph-pc__t) */
html body .vz-flatfr .vz-lab .t.ph-pc__t{font-size:clamp(20px,2vw,26px)}
/* mobil: strom je široký → kresba sa zmenší ~0,5×; čísla väčšie (na obrazovke ~12 px ako Memory), popis v paneli preč (je v zozname pod kresbou) */
@media (max-width:900px){html body .vz-flatfr .pl-num{font-size:22px}html body .vz-flatfr .fr-sub{display:none}html body .vz-flatfr .fr-logo{transform:translate(605.14px,100px) scale(2.8)}}
/* <<< FUTUR MAX 05 */
/* >>> FUTUR STUDIO 04 — PREPOJENIE PROJEKTOV (kruh: MAX · STUDIO · ONE okolo jadra „Značka“) — 19. 10. 2026, tools/vz_web.py studio_prepojenie */
html body .vz-prep .prep-core{font-family:var(--font-f-font-mono);font-size:11px;letter-spacing:.12em;fill:var(--v-mute)}
html body .vz-prep .lk path,html body .vz-prep .lk-suf{transition:fill var(--t-zmena, 400ms)}
/* aktívna doska je tmavá → logo na nej svetlé */
html body .vz-prep .pl.is-active .lk path,html body .vz-prep .pl.is-active .lk-suf{fill:var(--v-act-fg)}
/* linky do jadra + tok dnu (ako pavúk FUTUR MAX: .pv-06 .sp / .sf) */
html body .vz-prep .sp{fill:none;stroke:var(--v-line);stroke-width:1;vector-effect:non-scaling-stroke}
html body .vz-prep .sf{fill:none;stroke:transparent;stroke-width:1.6;vector-effect:non-scaling-stroke;stroke-dasharray:3 7}
html body .vz-prep .sf.is-active{stroke:var(--v-fg);animation:vz-flow var(--t-pomaly, 900ms) linear infinite}
@media (prefers-reduced-motion:reduce){html body .vz-prep .sf.is-active{animation:none;stroke-dasharray:none}}
/* mobil: kruh je široký → kresba sa zmenší ~0,55×; čísla a „ZNAČKA“ väčšie, na obrazovke ~12 px ako ostatné diagramy */
@media (max-width:900px){html body .vz-prep .pl-num{font-size:20px}html body .vz-prep .prep-core{font-size:15px}}
/* <<< FUTUR STUDIO 04 */
/* >>> TOK · SPOLOČNÁ PLOCHA SKUPINY (Grp(..., plate=True)) — 19. 10. 2026, prvé použitie FUTUR ONE 03 (4 realizačné cesty):
   uzly skupiny ležia na jednej ploche, číslo kroku je vľavo dole na ploche; pod číslom ostáva svetlá plocha → neprefarbuje sa */
/* okraj plochy PREŠUŠOVANÝ (19. 10., Martin: „ten okrajový dajme čiarkovaný“) — plocha je zoskupenie, nie ďalší krok */
html body .vz-flow .fw-plate rect{fill:var(--v-plate);stroke:var(--v-plate-s);stroke-width:1;stroke-dasharray:6 5;vector-effect:non-scaling-stroke;transition:stroke-width var(--t-zmena, 400ms)}
/* aktívny krok: rozsvieti sa CELÁ plocha, nielen uzly (19. 10., Martin) — ako každý prerušovaný tvar na webe
   (DIAGRAMY.md): plná hrubšia čiara + jemný podklad farbou aktívneho stavu */
html body .vz-flow .fw-plate.is-active rect{stroke-width:1.6;stroke-dasharray:none;fill:var(--v-act);fill-opacity:.07}
html body .vz-flow .fw-plate .fw-num,html body .vz-flow .fw-plate.is-active .fw-num{fill:var(--v-mute)}
html body .vz-flow .fw-plate{cursor:pointer}
html.f-js body .vz-flow:not(.is-in) .fw-plate{opacity:0}
html body .vz-flow .fw-plate{transition:opacity var(--t-nabeh, 600ms)}
/* <<< TOK · SPOLOČNÁ PLOCHA */
/* >>> TOK · ÚSEKY A SPOLOČNÁ ZÁTVORKA (flow(..., bands, span)) — 19. 10. 2026, FUTUR ONE 07 (realizácia | prevádzka = jeden systém) */
html body .vz-flow .fw-span.is-band{stroke:var(--v-line)}
html body .vz-flow .fw-band-t{font-family:var(--font-f-font-mono);font-size:11px;letter-spacing:.12em;fill:var(--v-mute)}
html body .vz-flow .fw-span{fill:none;stroke:var(--v-line-s);stroke-width:1;vector-effect:non-scaling-stroke}
html body .vz-flow svg > .lk path,html body .vz-flow svg > g > .lk path{fill:var(--v-fg)}
html body .vz-flow svg > .lk .lk-suf,html body .vz-flow svg > g > .lk .lk-suf{font-family:var(--font-f-font-mono);font-weight:500;letter-spacing:.08em;fill:var(--v-fg)}
/* <<< TOK · ÚSEKY */

/* ANSWER ENGINE 03 — tools/vz_answer.py (neupravovať ručne) */
/* 03: aktívny krok = doska ostáva svetlá, rozsvietia sa (stmavnú) LEN jej bloky (ako Audit: „rozsvecujme malé bloky,
   nie dosku“); výsledok (odpoveď / priority) vždy v prechode FUTUR MAX; prerušovaná vrstva bez výplne; výrez = prázdne pole */
html body .vz-ae3 .pl.is-active .pl-top { fill: var(--v-plate); }
html body .vz-ae3 .pl.is-active .pl-cell > .pl-top { fill: var(--v-act); }
html body .vz-ae3 .ae-res > .pl-top, html body .vz-ae3 .pl.is-active .pl-cell.ae-res > .pl-top { fill: url(#vz-max-g); stroke: none; }
html body .vz-ae3 .ae-res > .pl-edge { fill: var(--f-max-b); stroke: none; }
html body .vz-ae3 .pl-ext > .pl-top, html body .vz-ae3 .pl.is-active .pl-ext > .pl-top, html body .vz-ae3 .pl-ext.is-active > .pl-top { fill: none; stroke-dasharray: 5 5; }
html body .vz-ae3 .pl-ext > .pl-edge { display: none; }

/* 02 AUDIT (spodná vrstva kroku 02): rám a bloky prerušovane v prechode FUTUR MAX, bez výplne — ako Audit 02 */
html body .vz-ae3 .ae-aud > .pl-top { stroke: url(#vz-max-g); stroke-width: 1.2; }
/* 02 pri aktívnom kroku (ako Audit 02, na svetlom pozadí): priority stratégie v pokoji stlmené → naplno + pulz obrysu;
   polia auditu sa vyplnia (svetlá téma: aktívne = tmavé, ako všetky aktívne bloky na svetlom), rám auditu ostáva prerušovaný */
html body .vz-ae3 .ae-pri > .pl-top, html body .vz-ae3 .ae-pri > .pl-edge { fill-opacity: .4; transition: fill-opacity var(--t-zmena, 400ms); }
html body .vz-ae3 .pl.is-active .ae-pri > .pl-top, html body .vz-ae3 .pl.is-active .ae-pri > .pl-edge { fill-opacity: 1; }
html body .vz-ae3 .ae-pu { fill: none; stroke: url(#vz-prj-g); stroke-width: 1; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; opacity: 0; }
html body .vz-ae3 .pl.is-active .ae-pu { animation: vz-pulse 2.6s var(--f-ease) var(--d, 0s) infinite; }
@media (prefers-reduced-motion: reduce) { html body .vz-ae3 .pl.is-active .ae-pu { animation: none; } }
/* (21. 10.: polia auditu sa pri aktívnom kroku už NEVYPĹŇAJÚ — len pulz obrysu ako priority) */
/* čísla pri aktívnom kroku ostávajú čitateľné (svetlá téma: --v-act-fg je svetlé → na svetlej doske neviditeľné, napr. 02S) */
html body .vz-ae3 .pl.is-active .pl-num { fill: var(--v-fg); }
html body .vz-ae3 .pl-num.ae-anum, html body .vz-ae3 .pl.is-active .pl-num.ae-anum { fill: var(--f-max-b); }
/* verzia B: prerušovaný audit v 3D — hrana sa kreslí (prerušovane, bez výplne), vrch nad ňou bez výplne */

/* 03 ANSWER ENGINE = celá doska v prechode FUTUR MAX (aj pri aktívnom kroku), biele AE a číslo */
html body .vz-ae3 .pl.ae-full > .pl-top, html body .vz-ae3 .pl.ae-full.is-active > .pl-top { fill: url(#vz-max-g); stroke: none; }
html body .vz-ae3 .pl.ae-full > .pl-edge { fill: var(--f-max-b); stroke: none; }
html body .vz-ae3 .ae-ini { font-family: var(--font-f-font-mono); font-weight: 500; font-size: 34px; letter-spacing: var(--tr-popis, .08em); fill: var(--f-white); }
html body .vz-ae3 .pl.ae-full .pl-num, html body .vz-ae3 .pl.ae-full.is-active .pl-num { fill: var(--f-white); }
/* /ANSWER ENGINE 03 */
/* >>> AUDIT 03 · DVE ODPOVEDE (tools/vz_audit03.py, 26. 10. 2026) */
.a3x .ao-h{fill:var(--v-fg)}
.a3x .ao-sub{text-transform:none;letter-spacing:0;font-family:var(--font-f-font-sans, inherit);font-size:15px}
.a3x .ao-ghost{fill:none;stroke:var(--v-plate-s);stroke-width:1;stroke-dasharray:2 4;opacity:.55;vector-effect:non-scaling-stroke}
.a3x .ao-scope{fill:none;stroke:var(--v-fg);stroke-width:1;vector-effect:non-scaling-stroke}
.a3x .ao-tr{stroke-width:1;stroke-dasharray:none;stroke-linejoin:round}   /* plná, hrúbka ako ostatné linky (27. 10.) */
.a3x .ao-ans{stroke-dasharray:4 4}
/* 27. 10. 2026 — aktívny krok ako v ostatných diagramoch: obrys → výplň, linka k odpovedi stmavne.
   05 odpoveď s kontextom: obrys, pri kroku 05 plná tmavá (číslo svetlé); značka: obrys v prechode, pri 04 plný prechod. */
.a3x .ao-ok{fill:var(--v-plate);stroke:var(--v-fg);stroke-width:1;vector-effect:non-scaling-stroke;transition:fill var(--t-zmena, 400ms)}
.a3x .st.is-active .ao-ok{fill:var(--v-fg)}
.a3x .st.is-active .nu.ao-nw{fill:var(--v-plate)}
.a3x .ao-fill{opacity:0;transition:opacity var(--t-zmena, 400ms)}
.a3x .st.is-active .ao-fill{opacity:1}
/* 27. 10. 2026 (Martin: „to, čo je aktívne, nemá byť čierne?“): ako Answer Engine — dosky aktívneho kroku sa VYPLNIA
   ČIERNOU (01 výrez, 04 celok); 03 odpoveď z výrezu tiež čierna. Symptóm ostáva oranžový, značka prechod FUTUR MAX. */
.a3x .ao-at{transition:fill var(--t-zmena, 400ms)}
.a3x .st.is-active .ao-at{fill:var(--v-fg)}
.a3x .st.is-active .sel.ao-ans{fill:var(--v-fg);fill-opacity:1}
.a3x .ao-ln{transition:stroke var(--t-zmena, 400ms)}
.a3x .st.is-active .ao-ln{stroke:var(--v-fg)}

@media (max-width:900px){.a3x .ao-sub{display:none}}
/* <<< AUDIT 03 · DVE ODPOVEDE */