/* KOMPONENT diagramy-stare — staré diagramy z Instatic, 1. 11. 2026, krok 9 kúsok 6 — patria do cvičenia DIAGRAMY-A-3D.md.
   Dnes na stránkach len diagram „posun“ .ph-ds (z → na) na 6 stránkach konceptov (answer-engine, audit-a-strategia,
   memory-graph-interface, memory, pill, software-as-blueprints); pripojený len k nim.
   Vybraté zo starých súborov (userStyles-b7accc8e732d.css, style-a5de0145ecc1.css) v pôvodnom poradí — pozri časti nižšie.
   Pozor: 003-lp-page.js vie diagram .ph-ds poskladať aj z bloku „@shift“ v článku — článok, ktorý by ho použil, musí
   tento súbor načítať. Diagramy „hub“ (.ph-df) a „cycle“ (.ph-dl) a .ph-d__atoms zmazané 1. 11. 2026 (rozhodnutie
   Martina) — pravidlá aj ich časť v skripte (@hub / @cycle).
   Bez výnimiek „important“ a html body (predtým 16 a 27). Kde výnimka naozaj rozhodovala, je silnejší selektor:
   šípka „.ph-ds .ph-ds__row .ph-ds__arr::after“ (inak by prvý riadok dostal oranžový prechod z :nth-child(1)) a popis pod
   diagramom „.ph-d .ph-d__cap.is-below“ (inak by .lp-page .ph-ds .ph-d__cap pridal spodný okraj 56 px). */

/* --- z userStyles-b7accc8e732d.css --- */
.ph-d__cap { display: flex; justify-content: space-between; align-items: center; column-gap: 16px; min-height: 48px; padding: 0 28px; border-bottom: 1px solid var(--f-line-d); color: var(--c-on); }
.ph-d__sig { color: var(--f-mute-dark); }
@media (max-width: 600px) { .ph-d__cap { padding-left: 18px; padding-right: 18px; } }
.ph-ds .ph-d__cap { padding: 0; min-height: 0; padding-bottom: 12px; border-bottom: 1px solid var(--c-fg); color: var(--c-fg); }
.ph-ds .ph-d__sig { color: var(--c-mute); }
.ph-ds__row { display: grid; grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1.25fr); column-gap: 20px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--c-line); }
.ph-ds__from, .ph-ds__to { display: flex; align-items: baseline; column-gap: 12px; min-width: 0; }
.ph-ds__from .f-mono, .ph-ds__to .f-mono { flex: 0 0 22px; }
.ph-ds__from > span:last-child { text-wrap: pretty; }
.ph-ds__to > span:last-child { line-height: var(--lh-veta); text-wrap: balance; }
.ph-ds__arr { position: relative; height: 1px; background: var(--c-fg); }
.ph-ds__arr::after { content: ""; position: absolute; right: -4px; top: -4px; width: 9px; height: 9px; border-radius: 2px; background: var(--c-fg); transition: transform var(--t-nabeh) var(--f-ease) calc(var(--i, 0) * var(--t-rychlo)); }
.ph-ds__row:nth-child(1) .ph-ds__arr::after { background: var(--f-max-grad); }
.ph-d.is-on .ph-ds__arr::after { transform: rotate(90deg); }
@media (max-width: 600px) { .ph-ds__row { grid-template-columns: minmax(0, 1fr); row-gap: 10px; } }
@media (max-width: 600px) { .ph-ds__arr { width: 40px; } }
html.f-js .ph-d .ph-ds__row { transition: opacity var(--t-nabeh) var(--f-ease) calc(var(--i, 0) * 80ms); }
html.f-js .ph-d.is-on .ph-ds__row { opacity: 1; }
@media (prefers-reduced-motion: reduce) { html.f-js .ph-d .ph-ds__row { } }
.lp-page.lp-page .ph-d { --ph-atom: var(--lpc-ink, var(--f-paper)); }
.ph-ds .ph-ds__arr { --ph-atom: currentColor; }
.ph-ds .ph-ds__row .ph-ds__arr::after, .ph-ds .ph-ds__arr::before { background: currentColor; background-image: none; }
.lp-page--pill .ph-d { --ph-atom: var(--lpc-ink, var(--f-paper)); }
.lp-page--futur-one .ph-d { --ph-atom: var(--prj-one); }
.lp-page .ph-ds { background: transparent; color: inherit; box-shadow: none; --mu: var(--c-mute); --ln: var(--c-line2); --cap: var(--f-line-d2); }
.lp-page :is(.f-light, .f-neutral-bg) .ph-ds { --cap: var(--f-line-l); }
.lp-page .ph-ds .ph-d__cap { display: flex; justify-content: space-between; column-gap: 16px; min-height: 0; padding: 18px 0 0; margin-bottom: clamp(32px, 4vw, 56px); border: 0; border-top: 1px solid var(--cap); color: var(--mu); }
.lp-page .ph-ds .ph-d__sig { color: var(--mu); }
.ph-ds__to > span:last-child { letter-spacing: var(--tr-stredny); }
.ph-ds__from > span:last-child { line-height: var(--lh-odsek); letter-spacing: 0; font-weight: 400; }
.ph-d .ph-d__cap.is-below { margin-bottom: 0; }
.ph-ds .ph-d__cap.is-below { border-top: 0; }
.ph-d__cap.is-below { margin-top: 32px; }
.ph-ds .ph-d__cap.is-below { margin-top: 0; padding-top: 18px; }
.ph-ds { --f1: clamp(17px, 1.4vw, 19px); --f2: clamp(21px, 1.9vw, 27px); --g: 12px; --a: 11px; --x: 30px; --ds-ink: var(--c-fg); }
.ph-ds .ph-ds__rows { border-top: 1px solid currentColor; }
.ph-ds .ph-ds__row { display: flex; flex-direction: column; align-items: stretch; row-gap: var(--g); padding: 24px 0 26px var(--x); }
.ph-ds .ph-ds__arr { display: none; }
.ph-ds :is(.ph-ds__from, .ph-ds__to) { display: block; position: relative; max-width: 40em; }
.ph-ds :is(.ph-ds__from, .ph-ds__to) > span { display: inline; flex: none; font: inherit; letter-spacing: inherit; color: inherit; text-transform: none; }
.ph-ds :is(.ph-ds__from, .ph-ds__to) > .f-mono { margin-right: .28em; }
.ph-ds .ph-ds__from { font-family: var(--font-f-font-sans); font-size: var(--f1); line-height: var(--lh-uvod); font-weight: 400; letter-spacing: 0; color: var(--mu, var(--c-mute)); text-wrap: pretty; }
.ph-ds .ph-ds__to { font-family: var(--font-f-font-sans); font-size: var(--f2); line-height: var(--lh-veta); font-weight: 500; letter-spacing: -.01em; color: inherit; text-wrap: balance; }
.ph-ds :is(.ph-ds__from, .ph-ds__to)::before { content: ""; position: absolute; left: calc(-1 * var(--x)); width: var(--a); height: var(--a); box-sizing: border-box; }
.ph-ds .ph-ds__from::before { top: calc(var(--f1) * .65 - var(--a) / 2); background: transparent; box-shadow: inset 0 0 0 1px var(--ds-ink); }
.ph-ds .ph-ds__to::before { top: calc(var(--f2) * .575 - var(--a) / 2); background: var(--ds-ink); }
.ph-ds .ph-ds__from::after { content: ""; position: absolute; left: calc(-1 * var(--x) + var(--a) / 2 - .5px); width: 1px; background: var(--ds-ink); top: calc(var(--f1) * .65 + var(--a) / 2); bottom: calc(-1 * var(--g) - (var(--f2) * .575 - var(--a) / 2)); }
@media (max-width: 600px) { .ph-ds { --x: 26px; } }
html.f-js .ph-ds .ph-ds__row { opacity: 1; transition: none; --d: calc(var(--i, 0) * 260ms); }
html.f-js .ph-ds :is(.ph-ds__from, .ph-ds__to) { opacity: 0; transform: translateY(6px); transition: opacity var(--t-zmena) var(--f-ease), transform var(--t-zmena) var(--f-ease); }
html.f-js .ph-ds :is(.ph-ds__from, .ph-ds__to)::before { transform: scale(0); transition: transform var(--t-zmena) var(--f-ease); }
html.f-js .ph-ds .ph-ds__from, html.f-js .ph-ds .ph-ds__from::before { transition-delay: var(--d); }
html.f-js .ph-ds .ph-ds__from::after { transform: scaleY(0); transform-origin: top; transition: transform var(--t-zmena) cubic-bezier(.5, 0, .3, 1) calc(var(--d) + 260ms); }
html.f-js .ph-ds .ph-ds__to, html.f-js .ph-ds .ph-ds__to::before { transition-delay: calc(var(--d) + 620ms); }
html.f-js .ph-ds.is-on :is(.ph-ds__from, .ph-ds__to) { opacity: 1; transform: none; }
html.f-js .ph-ds.is-on :is(.ph-ds__from, .ph-ds__to)::before, html.f-js .ph-ds.is-on .ph-ds__from::after { transform: none; }
@media (prefers-reduced-motion: reduce) { html.f-js .ph-ds :is(.ph-ds__from, .ph-ds__to), html.f-js .ph-ds :is(.ph-ds__from, .ph-ds__to)::before, html.f-js .ph-ds .ph-ds__from::after { opacity: 1; transform: none; transition: none; } }
.ph-ds__arr::after, .ph-ds :is(.ph-ds__from, .ph-ds__to)::before { border-radius: var(--f-atom-r); }
.ph-ds { --f1: var(--ts-text-l); --f2: var(--ts-stredny); }

/* --- kúsok 7 (1. 11. 2026): zvyšok pravidiel diagramu „posun“ (.ph-d, .ph-ds) z web-ph.css (pôvodne userStyles) --- */
/* src/styles/diagrams.css */
.ph-prose .ph-d { max-width: none; margin: 18px 0; background: var(--c-fg); color: var(--c-on); font-family: var(--font-f-font-sans); box-shadow: inset 0 0 0 1px var(--f-line-d); }
.ph-prose .ph-ds { background: transparent; color: var(--c-fg); box-shadow: none; }
/* články: statické atómy v diagramoch neutrálne, signál len pohyblivý orb */
.ph-prose .ph-d { --ph-atom: currentColor; }
/* Z → na: šípky bez farby značky (statický prvok) */
.ph-ds .ph-ds__row .ph-ds__arr i { --ph-atom: currentColor; }
.ph-ds .ph-ds__arr i { background: currentColor; background-image: none; }
.lp-page--futur-x .ph-d { --ph-atom: var(--prj-x); }
.lp-page--futur-studio .ph-d { --ph-atom: var(--prj-studio); }