/* KARTY KONCEPTOV (koncepty.html, sekcia 01) — 18. 10. 2026, návrh site/navrh-karty-konceptov.html verzia 11.
   Karty generuje tools/karty_konceptov.py (spustiť aj po novom exporte stránky z editora).
   - vľavo hore IKONKA z hlavnej ilustrácie konceptu (18. 10.: Memory = kocka s vrstvami; ostatné zatiaľ prázdna doska),
     BEZ čísla; vpravo hore projekt, pod ktorým sa koncept spracúva; dole stav hlasom AI („> Vo vývoji▪“, ph-koncepty.js)
   - stav je LEN v texte (Martin 18. 10.) — podoba dosky ho už nekóduje
   - pri prejdení myšou sa doska zdvihne (zdvih = aktívne, ako všade na webe); rám pri „v produkte“ ostane na zemi
   - písmo len zo škály (--ts-*), mriežka 3 → 2 (do 1100 px) → 1 stĺpec (do 860 px) */
/* tmavá sekcia (ako predtým cez :has(#ph-concepts) v userStyles — „tmavá je tmavá“ za tmavou hlavičkou, 18. 10.) */

/* .ph-sec:has(> .kk.kk--mriezka) .f-mute zrušené 3. 11. 2026 (D1) — tlmený text v tmavej sekcii je mute-dark sám (--c-mute) */
.kk.kk--mriezka { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
/* výška podľa obsahu (18. 10.: pevných 360 px nechávalo pod doskou prázdne miesto); názvy v rade lícujú vďaka margin-top: auto */
.kk__c { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 20px 28px 28px;
  min-width: 0; box-sizing: border-box;   /* inak karta v úzkej mriežke pretečie (mobil) */
  color: var(--c-fg); text-decoration: none; box-shadow: inset 0 0 0 1px var(--c-line);
  transition: box-shadow var(--t-zmena) var(--f-ease); }
.kk__c:hover, .kk__c:focus-visible { box-shadow: inset 0 0 0 1px var(--c-fg); outline: none; }
.kk__prj { position: absolute; top: 24px; right: 28px; font-family: var(--font-f-font-mono); font-size: var(--ts-popis);
  letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
/* viditeľná medzera doska → názov ≈ 40 px: 11 px voľna pod doskou v kresbe + 8 + 16 (gap) + ~6 px nad písmenami názvu */
.kk__bd { display: block; width: 166px; height: auto; margin: 0 0 8px -21px; overflow: visible; }
.kk__bd .lift { transition: transform var(--t-zmena) var(--f-ease); }
/* IKONKA z hlavnej ilustrácie konceptu (18. 10.: Memory = kocka s 5 vrstvami) — vysoká ako doska, ľavý roh lícuje s textom;
   pri prejdení myšou sa vrstvy roztiahnu od seba (nič sa nerozsvecuje); oranžová len ako obal */
.kk__bd--ic { width: auto; height: 104px; margin: 0 0 8px -2px; align-self: flex-start; }
.kk__bd .mi-ob { stroke: var(--f-max-b); stroke-width: 1.2; stroke-dasharray: 6 5; fill: none; vector-effect: non-scaling-stroke; }
.kk__bd .mi-pl { transition: transform var(--t-nabeh) var(--f-ease); }
.kk__c:hover .kk__bd .mi-pl, .kk__c:focus-visible .kk__bd .mi-pl { transform: translateY(calc(var(--i) * 7px)); }
/* MGI pracovný stôl (26. 10., Martin: „môžu vyletieť trošku vyššie od dosky, aby bol viditeľnejší pohyb“): veci zo stola
   vyletia vyššie (úloha 16 px, ostatné 10–13 px podľa --i), stôl ostane; Memory s rovnakým .mi-pl ostáva 7 px */
.kk__c:hover .kk__bd.mg-ic .mi-pl, .kk__c:focus-visible .kk__bd.mg-ic .mi-pl { transform: translateY(calc(var(--i) * 16px)); }
@media (prefers-reduced-motion: reduce) { .kk__bd .mi-pl { transition: none; } }
/* PILL (22. 10.): kapsula nad prerušovaným tieňom (tools/navrh_pill_ilustracie.py pill_icon) — pri prejdení myšou sa zdvihne
   a kruh raz obehne (hlava okolo, chvost za ňou, zmizne), zaoblené konce — rovnako ako Pill na stránke konceptu */
.kk__bd.pi-ic .pi-lift { transition: transform var(--t-nabeh) var(--f-ease); }
.kk__c:hover .kk__bd.pi-ic .pi-lift, .kk__c:focus-visible .kk__bd.pi-ic .pi-lift { transform: translateY(-14px); }
.kk__bd.pi-ic .pi-arc { stroke-linecap: round; stroke-dasharray: 0 100; stroke-dashoffset: 0; opacity: 0; }
.kk__c:hover .kk__bd.pi-ic .pi-arc, .kk__c:focus-visible .kk__bd.pi-ic .pi-arc { animation: pi-run var(--t-dlhy) var(--f-ease) var(--t-rychlo) both; }
@keyframes pi-run { 0% { stroke-dasharray: 0 100; stroke-dashoffset: 0; opacity: 0; } 8% { opacity: 1; } 50% { stroke-dasharray: 100 0; stroke-dashoffset: 0; }
  92% { opacity: 1; } 100% { stroke-dasharray: 0 100; stroke-dashoffset: -100; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .kk__bd.pi-ic .pi-lift { transition: none; } .kk__c:hover .kk__bd.pi-ic .pi-arc { animation: none; } }
.kk__c:hover .kk__bd .lift, .kk__c:focus-visible .kk__bd .lift { transform: translateY(-8px); }
.kk__bd text { font-family: var(--font-f-font-mono); }
.kk__t { display: block; margin-top: auto; font-size: var(--ts-stredny); font-weight: 500; line-height: var(--lh-nadpis); letter-spacing: var(--tr-stredny); }
.kk__d { display: block; font-size: var(--ts-ui); line-height: var(--lh-text); max-width: 30em; opacity: .62; }
.kk__f { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
/* stav hlasom AI (ako Citát systému v článkoch): mono, sivá výzva „>“, kurzor = .ph-caret z userStyles (atóm FUTUR MAX) */
/* pozn.: ellograph má zámerne veľmi krátke spodné ťahy (p, ý, j…) — vyzerajú „orezané“, ale nie sú (overené 18. 10. pri 80 px) */
.kk__st { font-family: var(--font-f-font-mono); font-size: var(--ts-ui); line-height: var(--lh-text); letter-spacing: -0.01em; white-space: nowrap; opacity: .85; overflow: visible; }
.kk__st .t, .kk__st .pr { display: inline; overflow: visible; line-height: inherit; }
.kk__st .pr { opacity: .55; margin-right: .5em; }
.kk__arr { flex-shrink: 0; transition: transform var(--t-zmena) var(--f-ease); }
.kk__c:hover .kk__arr { transform: translateX(4px); }
@media (max-width: 1100px) { .kk.kk--mriezka { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .kk.kk--mriezka { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .kk__bd .lift, .kk__arr { transition: none; } }

/* KARTY PROJEKTOV (projekty.html, sekcia 01) — 19. 10. 2026, tools/karty_projektov.py. Prvky = karty konceptov (kk__*),
   vzhľad = verzia 2 z navrh-karty2.html „Svetlé karty na tmavom“: tmavá sekcia, karta papier + tmavý text;
   pri prejdení myšou biela a zdvih o 3 px. Bez ikonky → názov (logo FUTUR) sedí dole ako pri konceptoch (margin-top: auto). */

/* .ph-sec:has(> .kk.kk--mriezka) .f-mute zrušené 3. 11. 2026 (D1) — tlmený text v tmavej sekcii je mute-dark sám (--c-mute) */
.kk.kk--mriezka { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.kp__c { min-height: 307px;   /* 19. 10. (Martin): „rovnako vysoké ako v konceptoch“ — karta konceptu na 1440 px = 307 px (zmerané) */ padding-top: 24px; background: var(--f-paper); color: var(--f-ink); box-shadow: none;
  transition: background-color var(--t-zmena) var(--f-ease), transform var(--t-zmena) var(--f-ease); }
.kp__c:hover, .kp__c:focus-visible { background: var(--f-white); box-shadow: none; transform: translateY(-3px); }
/* 19. 10. (Martin): štítok P-0x preč, LOGO NAVRCHU na jeho mieste, o 30 % väčšie než názov konceptu; popis a stav dole */
.kp__c .kk__t { margin-top: 0; font-size: calc(var(--ts-stredny) * 1.3); }
.kp__c .kk__d { margin-top: auto; min-height: 3em; }
@media (max-width: 1100px) { .kk.kk--mriezka { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .kk.kk--mriezka { grid-template-columns: 1fr; } .kp__c { min-height: 220px; } }
@media (prefers-reduced-motion: reduce) { .kp__c { transition: none; } .kp__c:hover { transform: none; } }

/* ÚVOD — ROZCESTNÍK (21. 10. 2026, tools/uvod_rozcestnik.py). Karty sú TIE ISTÉ ako na Projektoch / Konceptoch, len bez
   obalu s id (id by prefarbilo sekciu cez :has). Pozadia (21. 10., Martin: „nechaj plochu v pozadí, ako bola, ale daj len
   tie projekty ako svetlé karty“): 02 Projekty SVETLÁ, karty BIELE s jemným rámikom (pri prejdení myšou výraznejší rámik
   a zdvih o 3 px ako na Projektoch); 03 Koncepty TMAVÁ (karty ako na Konceptoch) v posuvnom páse .ph-rail ako Články. */
.kp--uvod { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.kp--uvod .kp__c { background: var(--f-white); color: var(--f-ink); box-shadow: 0 0 0 1px rgba(16,24,32,.07); }
.kp--uvod .kp__c:hover, .kp--uvod .kp__c:focus-visible { background: var(--f-white); box-shadow: 0 0 0 1px rgba(16,24,32,.28); }
@media (max-width: 1100px) { .kp--uvod { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .kp--uvod { grid-template-columns: 1fr; } }


/* SOFTWARE AS BLUEPRINTS — ikonka karty (22. 10. 2026, návrh drafty/navrh-sab.html I-1): štvorcový výkres s pôdorysom, kótami
   a prerušovaným pásom vnútri, nad ním vznášajúci sa produkt (prechod FUTUR ONE, bez obrysu); pri prejdení myšou sa produkt zdvihne */
.sb-ic .sb-sheet { fill: var(--c-bg); stroke: color-mix(in srgb, var(--c-fg) 85%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sb-ic .sb-grid { stroke: color-mix(in srgb, var(--c-fg) 9%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sb-ic .sb-draw { fill: none; stroke: color-mix(in srgb, var(--c-fg) 75%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sb-ic .sb-plan { fill: none; stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.sb-ic .sb-dash { stroke-dasharray: 5 5; }
.sb-ic .sb-ext { stroke: color-mix(in srgb, var(--c-fg) 35%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sb-ic :is(.sb-dim, .sb-tick) { stroke-width: 1; vector-effect: non-scaling-stroke; }
.sb-ic .sb-guide { stroke: color-mix(in srgb, var(--c-fg) 35%, transparent); stroke-width: 1; stroke-dasharray: 3 5; vector-effect: non-scaling-stroke; }
.sb-ic .sb-obj { fill: var(--c-bg); stroke: color-mix(in srgb, var(--c-fg) 85%, transparent); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sb-ic .sb-lift { transition: transform var(--t-nabeh) var(--f-ease); }   /* = sekcia 02 na stránke (.sb-cyc .sb-step) */
/* VODIACE ČIARY SA ODVINÚ HORE (27. 10. 2026, Martin: „nechcem, aby sa rozťahovala čiarkovaná čiara, ale aby mala rovnaké
   medzery, len sa pridalo pár čiarok, akoby keď to vyroluje hore“). Hlavná čiara (.sb-ic-g) stojí; predĺženie (.sb-ic-gx)
   leží v pokoji presne na jej hornom kúsku (rovnaká fáza → nevidno ho) a pri hoveri sa posunie hore spolu s panelom.
   Čiarkovanie čiarka 5,6 · medzera 9,04 (perióda 14,64 jednotky ≈ 2,5 / 4 px); zdvih panela = 1 perióda = 14,64 (27. 10.: 2 periódy boli privysoko) →
   pribudne 1 čiarka a medzery sedia. Bez non-scaling-stroke (Safari), hrúbka 2,29 jednotky ≈ 1 px.
   Čiary a predĺženia kreslí tools/tmp/sab_guide_rolovanie.py (aj do tools/ikonky/sab-i1.svg). */
.kk__c:hover .sb-ic .sb-lift, .kk__c:focus-visible .sb-ic .sb-lift { transform: translateY(-14.64px); }
.kk__bd.sb-ic { overflow: visible; }   /* zdvihnutý panel presahuje vrch ikonky — inak by ho orezala */
.sb-ic .sb-guide { vector-effect: none; stroke-width: 2.29; stroke-dasharray: 5.6 9.04; }
.sb-ic .sb-ic-gx { transition: transform var(--t-nabeh) var(--f-ease); }
.kk__c:is(:hover, :focus-visible) .sb-ic .sb-ic-gx { transform: translateY(-14.64px); }
@media (prefers-reduced-motion: reduce) { .sb-ic :is(.sb-lift, .sb-ic-gx) { transition: none; } }

/* 31. 10. 2026: farby IKONIEK z PLOCHY — na tmavej tmavé dosky so svetlými čiarami (ako doteraz), na svetlej/sivej naopak.
   SVG ikonky používajú fill="var(--ic-fill)" a stroke="var(--ic-line)" (tools/ikonky_plocha.py). */
.kk__bd { --ic-fill: var(--c-bg); --ic-line: color-mix(in srgb, var(--c-fg) 85%, transparent); --ic-line-soft: color-mix(in srgb, var(--c-fg) 50%, transparent); }