/* ============================================================================
KROS API dokumentácia — vizuálna vrstva
----------------------------------------------------------------------------
Načítava sa AŽ PO kros-tokens.css a docs-tokens.css:
Pravidlá, ktoré tento súbor drží (DESIGN-BRIEF.md, sekcie 3–5):
* žiadne pevné farby — všetko cez custom properties z dvoch súborov vyššie
(jediné číselné konštanty sú rozmery/hrúbky ťahov, nie farby),
* primárna farba je sienna (--primary / --brand-500), fialová (--mauve-500)
len ako jediný akcent na .prompt-card,
* svetlý aj tmavý režim cez [data-theme] — komponenty stavajú na
sémantických tokenoch, nie na primitívach,
* nikdy nescrolluje vodorovne; scrollujú len .code__body
a .table-scroll vo svojich kontajneroch.
Obsah:
1. Docs-level sémantické tokeny
2. Základ, typografia v obsahu, focus
3. Shell (.docs-shell / .docs-sidebar / .docs-main / .docs-toc)
3b. Swagger CTA (.swagger-cta) — na každej stránke, sidebar + topbar
4. Navigácia (.docs-nav)
4b. Pätka sidebaru (.docs-sidebar__foot) — kontakt + prepínač témy
5. Table of contents (.docs-toc)
6. Code block (.code) + JSON tokeny (.tok)
7. Callouts (.callout)
8. Karty (.ds-card, .model-card)
9. Kroky (.steps)
10. Badge (.badge)
11. Prompt karta (.prompt-card)
12. Taby (.tabs) — progressive enhancement
13. Diagramy (.diagram)
14. Tabuľka (.table-scroll + .docs-table)
15. Poznámka na konci obsahu (.docs-footer) + prepínač témy
16. Responzívne správanie pod 900 px
17. Tlač
18. prefers-reduced-motion
========================================================================= */
/* ==========================================================================
1. Docs-level sémantické tokeny
--------------------------------------------------------------------------
Design systém nemá sémantickú rolu "info" (má len primitív --blue-600,
ktorý je v tmavom režime nečitateľný). Rola sa preto zavádza tu, rovnakým
mechanizmom ako kros-tokens.css: default = svetlá, potom OS-tmavá, potom
explicitné [data-theme]. Žiadna komponenta nižšie nesiaha na --blue-*
priamo.
========================================================================== */
:root {
--docs-info: var(--blue-600);
--docs-pro: var(--mauve-500); /* KROS PRO akcent — len .prompt-card */
/* Logo sa vkladá ako , takže fill="currentColor" v SVG sa vyhodnocuje
voči dokumentu obrázka (počiatočná farba = čierna), nie voči --fg
stránky — v tmavej téme by ostalo čierne na tmavom. brightness(0) zrazí
akúkoľvek farbu loga na čiernu a invert(1) ju preklopí na bielu, takže
pravidlo prežije aj to, keby logo prestalo byť jednofarebné. */
--docs-logo-filter: none;
/* Prepínač témy pomenúva akciu, nie stav: v svetlej ponúka „Tmavá téma",
v tmavej „Svetlá téma". Obe znenia aj ikony sú v značke a prepínajú sa
týmito dvomi rolami. */
--docs-theme-to-dark: inline;
--docs-theme-to-light: none;
/* Rozmery shellu. Nie farby — pevné hodnoty sú tu v poriadku. */
--docs-sidebar-w: 280px;
--docs-toc-w: 240px;
--docs-content-max: 900px;
}
@media (prefers-color-scheme: dark) {
:root {
--docs-info: var(--blue-500);
--docs-pro: var(--mauve-400);
--docs-logo-filter: brightness(0) invert(1);
--docs-theme-to-dark: none;
--docs-theme-to-light: inline;
}
}
[data-theme="dark"], .theme-dark {
--docs-info: var(--blue-500);
--docs-pro: var(--mauve-400);
--docs-logo-filter: brightness(0) invert(1);
--docs-theme-to-dark: none;
--docs-theme-to-light: inline;
}
[data-theme="light"], .theme-light {
--docs-info: var(--blue-600);
--docs-pro: var(--mauve-500);
--docs-logo-filter: none;
--docs-theme-to-dark: inline;
--docs-theme-to-light: none;
}
/* ==========================================================================
2. Základ, typografia v obsahu, focus
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-width: 0; }
/* Dokumentácia API je plná JSON payloadov a názvov polí — monospace tu nie je
štylistická preferencia, ale čitateľnosť (0/O, l/1, zarovnanie zátvoriek).
kros-tokens.css štýluje `code` cez --font-sans; tu to prepisujeme. */
code, kbd, .mono {
font-family: var(--font-mono);
font-size: 0.9em;
overflow-wrap: break-word;
}
/* Sémantické: iba viditeľné, keď element dostane fokus z klávesnice. */
:focus-visible {
outline: 2px solid var(--ring);
outline-offset: 2px;
border-radius: var(--radius-xs);
}
/* Preskočiť na obsah — prvý tabovateľný prvok stránky. */
.docs-skip {
position: absolute;
left: var(--space-3);
top: var(--space-3);
z-index: 100;
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-md);
background: var(--primary);
color: var(--primary-fg);
font-size: var(--text-sm);
font-weight: var(--fw-medium);
text-decoration: none;
transform: translateY(-200%);
transition: transform var(--dur-fast) var(--ease-standard);
}
.docs-skip:focus { transform: translateY(0); color: var(--primary-fg); }
/* Nadpisy: kros-tokens.css je nastavený na marketingové veľkosti (h1 48 px,
h2 36 px). V tele dokumentácie sú o stupeň nižšie, aby hierarchia H2/H3
fungovala na dlhej stránke. Len tokeny, žiadne nové veľkosti. */
.docs-main h1 { font-size: var(--text-4xl); margin: 0 0 var(--space-4); }
.docs-main h2 {
font-size: var(--text-2xl);
margin: var(--space-10) 0 var(--space-3);
padding-top: var(--space-2);
scroll-margin-top: var(--space-6);
}
.docs-main h3 {
font-size: var(--text-lg);
margin: var(--space-6) 0 var(--space-2);
scroll-margin-top: var(--space-6);
}
.docs-main h2:first-child, .docs-main h1 + h2 { margin-top: var(--space-6); }
.docs-main ul, .docs-main ol { margin: 0 0 var(--space-4); padding-left: var(--space-6); }
.docs-main li { margin-bottom: var(--space-2); line-height: var(--lh-relaxed); }
/* .lead je definovaný v kros-tokens.css — tu len odstup pod perexom. */
.lead { margin: 0 0 var(--space-6); }
/* ==========================================================================
3. Shell
--------------------------------------------------------------------------
minmax(0, 1fr) v strednom stĺpci je nosné: s obyčajným `1fr` má grid item
min-width:auto, široký code block ho roztlačí a vodorovný scroll skončí na
namiesto v .code__body.
========================================================================== */
.docs-shell {
display: grid;
grid-template-columns: var(--docs-sidebar-w) minmax(0, 1fr) var(--docs-toc-w);
align-items: start;
min-height: 100vh;
background: var(--bg);
color: var(--fg);
}
/* Stĺpec, nie blok: spodná pätka (.docs-sidebar__foot) sa `margin-top: auto`
drží pri dolnej hrane, kým je nad ňou miesto. Položky sa nezmrštia — majú
overflow: visible, takže platí automatické minimum flexboxu a dlhá
navigácia radšej pretečie do vlastného scrollu. */
.docs-sidebar {
display: flex;
flex-direction: column;
position: sticky;
top: 0;
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
padding: var(--space-6) var(--space-4);
background: var(--bg-elevated);
border-right: 1px solid var(--border-subtle);
}
.docs-main {
min-width: 0; /* pár k minmax(0,1fr) — nutné pre grid item */
max-width: var(--docs-content-max);
padding: var(--space-10) var(--space-8) var(--space-16);
}
.docs-toc {
position: sticky;
top: 0;
max-height: 100vh;
overflow-y: auto;
padding: var(--space-10) var(--space-4) var(--space-8);
font-size: var(--text-xs);
}
/* Logo v hlavičke sidebaru. */
.docs-logo {
display: flex;
align-items: center;
gap: var(--space-2);
margin: 0 0 var(--space-6);
padding: 0 var(--space-2);
font-family: var(--font-display);
font-size: var(--text-base);
font-weight: var(--fw-bold);
letter-spacing: var(--tracking-snug);
color: var(--fg);
text-decoration: none;
}
.docs-logo:hover { color: var(--fg); }
/* Logo je široké 199×47; fixná šírka by ho zdeformovala, preto len výška. */
.docs-logo { --docs-logo-height: 21.6px; }
.docs-logo img, .docs-logo svg {
width: auto;
height: var(--docs-logo-height);
flex: 0 0 auto;
}
.docs-logo span { min-width: 0; }
/* Prefarbenie loga podľa témy — hodnota a dôvod sú pri --docs-logo-filter
v sekcii 1. Cez dedenú custom property, nie cez [data-theme] ... img:
v component-gallery.html sú tmavé aj svetlé sekcie vnorené pod jedným
, kde by o víťazovi rozhodlo poradie pravidiel, nie
najbližší téma-scope. */
.docs-logo img { filter: var(--docs-logo-filter); }
/* „API" vedľa loga, oddelené tenkou linkou.
Veľkosť je odvodená od výšky loga, aby verzálky sedeli s nápisom KROS:
verzálky v logu merajú 31.4 z 47 jednotiek (0.669) a cap height písma
je ~0.705 em, čiže font-size = výška × 0.669 / 0.705 ≈ výška × 0.95. */
.docs-logo__api {
padding-left: var(--space-2);
border-left: 1px solid var(--border);
font-family: var(--font-display);
font-size: calc(var(--docs-logo-height) * 0.95);
font-weight: var(--fw-bold);
letter-spacing: var(--tracking-snug);
line-height: 1;
color: var(--fg-muted);
}
.docs-logo:hover .docs-logo__api { color: var(--fg); }
/* ==========================================================================
3b. Swagger CTA
--------------------------------------------------------------------------
Živý Swagger je najčastejší dôvod, prečo sa integrátor na tento web vracia:
dokumentáciu si prečíta raz, potom už chodí len po konkrétny endpoint.
Preto tento odkaz nesmie byť schovaný na jednej podstránke — je v značke
každej stránky, a to na dvoch miestach, aby bol vidieť v oboch režimoch
shellu:
* v hlavičke sidebaru — nad 900 px, hneď pod logom a nad navigáciou,
* v mobilnej lište — pod 900 px, kde je sidebar off-canvas a jeho obsah
teda nie je vidieť, kým používateľ neotvorí menu.
Farba je tint z --primary, nie plná --primary: prvok má byť nájditeľný na
prvý pohľad, ale nesmie prekričať aktívnu položku navigácie hneď pod ním
(tá je jediná vec v sidebare, ktorá nesie --primary ako plnú farbu).
Pred každým color-mix() je plná fallback hodnota — rovnaký postup ako pri
calloutoch v sekcii 7.
========================================================================== */
.swagger-cta {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3);
border: 1px solid var(--border);
border-color: color-mix(in srgb, var(--primary) 30%, var(--border));
border-radius: var(--radius-md);
background: var(--bg-elevated);
background: color-mix(in srgb, var(--primary) 7%, var(--bg-elevated));
color: var(--fg);
text-decoration: none;
transition: background var(--dur-fast) var(--ease-standard),
border-color var(--dur-fast) var(--ease-standard);
}
.swagger-cta:hover {
border-color: var(--primary);
background: color-mix(in srgb, var(--primary) 14%, var(--bg-elevated));
color: var(--fg);
}
.swagger-cta__icon {
flex: 0 0 auto;
font-size: 20px;
line-height: 1;
color: var(--accent-fg);
}
.swagger-cta__text {
display: flex;
flex-direction: column;
min-width: 0;
}
.swagger-cta__title {
font-family: var(--font-display);
font-size: var(--text-sm);
font-weight: var(--fw-semibold);
line-height: var(--lh-snug);
}
.swagger-cta__hint {
font-size: var(--text-2xs);
line-height: var(--lh-snug);
color: var(--fg-subtle);
}
/* Šípka „odchádza mimo web". Posun pri hoveri je jediná animácia prvku —
drží ho decentným a zároveň dáva spätnú väzbu, že ide o externý cieľ. */
.swagger-cta__go {
flex: 0 0 auto;
margin-left: auto;
font-size: 16px;
line-height: 1;
color: var(--fg-subtle);
transition: color var(--dur-fast) var(--ease-standard),
transform var(--dur-fast) var(--ease-standard);
}
.swagger-cta:hover .swagger-cta__go {
color: var(--accent-fg);
transform: translate(2px, -2px);
}
/* Verzia v sidebare: blok nad navigáciou, odsadený rovnako ako logo nad ním. */
.swagger-cta--sidebar { margin: 0 var(--space-2) var(--space-5); }
/* Verzia v mobilnej lište: výška 36 px sedí s [data-sidebar-toggle] vedľa,
`margin-left: auto` ju drží pri pravom okraji lišty. */
.swagger-cta--compact {
height: 36px;
margin-left: auto;
gap: var(--space-2);
padding: 0 var(--space-3);
font-size: var(--text-sm);
font-weight: var(--fw-medium);
}
.swagger-cta--compact .swagger-cta__icon { font-size: 16px; }
/* Mobilná lišta je vždy len jeden riadok: Menu + logo + toto tlačidlo.
Pod ~380 px sa to celé nezmestí, takže tlačidlo padne na samotnú ikonu —
význam nesie aria-label, ktorý je na odkaze aj tak. */
@media (max-width: 379px) {
.swagger-cta--compact { padding: 0 var(--space-2); }
.swagger-cta--compact .swagger-cta__title { display: none; }
}
/* Mobilná lišta s prepínačom sidebaru. Nad 900 px sa nezobrazuje. */
.docs-topbar { display: none; }
[data-sidebar-toggle] {
display: none;
align-items: center;
justify-content: center;
gap: var(--space-2);
height: 36px;
min-width: 36px;
padding: 0 var(--space-3);
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--bg-elevated);
color: var(--fg);
font-family: inherit;
font-size: var(--text-sm);
cursor: pointer;
}
/* Zatvárací krížik v off-canvas paneli — nad 900 px nemá zmysel. */
.docs-sidebar__close {
display: none;
position: absolute;
top: var(--space-3);
right: var(--space-3);
width: 32px;
height: 32px;
align-items: center;
justify-content: center;
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--bg-elevated);
color: var(--fg);
font-family: inherit;
font-size: var(--text-base);
line-height: 1;
cursor: pointer;
}
/* ==========================================================================
4. Navigácia
========================================================================== */
.docs-nav { display: flex; flex-direction: column; gap: var(--space-5); }
.docs-nav__group { display: flex; flex-direction: column; gap: 2px; }
/* Zoznam odkazov je sémanticky
, vizuálne nie: bez tohto resetu si od
prehliadača berie odrážky a 40 px odsadenie, ktoré v 280 px stĺpci ukroja
šestinu šírky a rozídu sa so zarovnaním nadpisov skupín. Rovnaký reset má
z rovnakého dôvodu aj .docs-toc ul (sekcia 5). */
.docs-nav ul { list-style: none; margin: 0; padding: 0; }
/* Popis skupiny. Voliteľný — pozri aj `.docs-nav__group > h2/h3` nižšie,
aby fungoval aj sémantický nadpis bez triedy. */
.docs-nav__label,
.docs-nav__group > h2,
.docs-nav__group > h3 {
margin: 0 0 var(--space-1);
padding: 0 var(--space-2);
font-family: var(--font-sans);
font-size: var(--text-2xs);
font-weight: var(--fw-semibold);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--fg-subtle);
}
.docs-nav__link {
display: flex;
align-items: center;
gap: var(--space-2);
min-width: 0;
padding: var(--space-2) var(--space-2);
border-radius: var(--radius-md);
font-size: var(--text-sm);
line-height: var(--lh-snug);
color: var(--fg-muted);
text-decoration: none;
transition: background var(--dur-fast) var(--ease-standard),
color var(--dur-fast) var(--ease-standard);
}
.docs-nav__link:hover { background: var(--secondary); color: var(--fg); }
.docs-nav__link > span { min-width: 0; }
/* Badge v riadku navigácie (Token Broker, Obchod doplnkov) sa musí zmestiť
do 280 px stĺpca — preto zalomenie a menšie písmo, nie orezanie. */
.docs-nav__link .badge {
margin-left: auto;
flex: 0 1 auto;
font-size: var(--text-2xs);
white-space: normal;
text-align: right;
}
.docs-nav__link--active {
background: var(--secondary);
color: var(--fg);
font-weight: var(--fw-medium);
box-shadow: inset 2px 0 0 0 var(--primary);
}
.docs-nav__link--active:hover { color: var(--fg); }
/* ==========================================================================
4b. Pätka sidebaru
--------------------------------------------------------------------------
Kontakt a prepínač témy sedeli v pásovej pätke cez celú šírku okna. Dva
drobné prvky pás neuživili — bol to prázdny pruh pod obsahom, ktorý sa
navyše musel odsadzovať o šírku sidebaru, aby vôbec nadväzoval na text.
Oba prvky patria k rámu stránky, nie k jej obsahu, takže sú tam, kde je
zvyšok rámu: na spodku menu. Pod 900 px idú spolu s ním do off-canvas
panela — prepínač témy je tam o jedno klepnutie ďalej, ale to je lacnejšie
ako pás, ktorý sa na mobile tlačí pod každú stránku.
Je to jeden riadok — kontakt vľavo, prepínač ako ikona vpravo. Výška je
tu vzácna: na notebooku (~720 px okna) je samotná navigácia vyššia než
sidebar, takže každý riadok navyše ukrajuje z toho, čo z menu vidno.
`margin-top: auto` pätku drží pri dolnej hrane, kým je nad ňou miesto.
Keď nie je, scrolluje spolu s navigáciou za spodnú hranu — nie je to
podstatná informácia, takže si nezaslúži trvalý kus výšky sidebaru.
Záporné bočné marginy ju roztiahnu cez celú šírku sidebaru, aby deliaca
linka nekončila 16 px pred okrajom.
========================================================================== */
.docs-sidebar__foot {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
margin-top: auto;
margin-inline: calc(var(--space-4) * -1);
padding: var(--space-3) var(--space-4) 0;
border-top: 1px solid var(--border-subtle);
}
.docs-sidebar__contact {
min-width: 0;
margin: 0;
padding: 0 var(--space-2);
font-size: var(--text-2xs);
line-height: var(--lh-normal);
color: var(--fg-subtle);
}
.docs-sidebar__contact a { color: var(--fg-muted); }
.docs-sidebar__contact a:hover { color: var(--fg); }
/* ==========================================================================
5. Table of contents
========================================================================== */
.docs-toc__title {
margin: 0 0 var(--space-3);
font-family: var(--font-sans);
font-size: var(--text-2xs);
font-weight: var(--fw-semibold);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--fg-subtle);
}
.docs-toc ul { list-style: none; margin: 0; padding: 0; }
.docs-toc li { margin: 0; }
.docs-toc__link {
display: block;
padding: var(--space-1) var(--space-2);
border-left: 2px solid var(--border-subtle);
color: var(--fg-muted);
line-height: var(--lh-snug);
text-decoration: none;
transition: color var(--dur-fast) var(--ease-standard),
border-color var(--dur-fast) var(--ease-standard);
}
.docs-toc__link:hover { color: var(--fg); border-left-color: var(--border-strong); }
.docs-toc__link--h3 { padding-left: var(--space-5); }
.docs-toc__link--active {
color: var(--accent-fg);
border-left-color: var(--primary);
font-weight: var(--fw-medium);
}
/* ==========================================================================
6. Code block
--------------------------------------------------------------------------
Povrch zostáva tmavý v OBOCH témach (docs-tokens.css) — svetlý code block
v tmavej stránke číta ako chyba renderovania. Mení sa iba --code-border.
Štruktúra:
request.json
…
========================================================================== */
.code {
margin: 0 0 var(--space-5);
border: 1px solid var(--code-border);
border-radius: var(--radius-lg);
background: var(--code-bg);
overflow: hidden; /* drží rádius a zakladá BFC */
max-width: 100%;
}
.code__header {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
background: var(--code-header-bg);
border-bottom: 1px solid var(--code-border);
min-width: 0;
}
.code__lang {
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--code-fg);
opacity: 0.75;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.code__copy {
margin-left: auto;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: var(--space-1);
height: 26px;
padding: 0 var(--space-3);
border: 1px solid var(--code-border);
border-radius: var(--radius-md);
background: transparent;
color: var(--code-fg);
font-family: var(--font-sans);
font-size: var(--text-xs);
font-weight: var(--fw-medium);
cursor: pointer;
transition: background var(--dur-fast) var(--ease-standard),
border-color var(--dur-fast) var(--ease-standard);
}
.code__copy:hover { background: var(--code-header-bg); border-color: var(--code-fg); }
/* docs.js nastaví data-copied="true" a vymení text na "Skopírované". */
.code__copy[data-copied="true"] { color: var(--code-string); border-color: var(--code-string); }
.code__body {
overflow-x: auto; /* scrolluje blok, nikdy */
margin: 0;
padding: var(--space-4);
font-family: var(--font-mono);
font-size: var(--text-sm);
line-height: var(--lh-relaxed);
color: var(--code-fg);
tab-size: 2;
scrollbar-color: var(--code-punct) transparent;
}
/* kros-tokens.css dáva `code` pozadie a padding — vnútri bloku to ruší. */
.code__body code, .code__body pre {
background: none;
padding: 0;
border-radius: 0;
color: inherit;
font-family: inherit;
font-size: inherit;
white-space: pre;
}
/* Voliteľné zvýraznenie riadku (napr. práve pridaná hlavička).
Negatívny padding-inline dotiahne pás cez celú šírku bloku. */
.code__line { display: block; margin: 0 calc(-1 * var(--space-4)); padding: 0 var(--space-4); }
.code__line--highlight {
background: var(--code-header-bg);
box-shadow: inset 2px 0 0 0 var(--primary);
}
/* JSON syntax tokeny. */
.tok { color: var(--code-fg); }
.tok--key { color: var(--code-key); }
.tok--string { color: var(--code-string); }
.tok--number { color: var(--code-number); }
.tok--boolean { color: var(--code-boolean); }
.tok--punct { color: var(--code-punct); }
/* ==========================================================================
7. Callouts
--------------------------------------------------------------------------
Vizuál po vzore preview/alerts.html návrhového systému, ale tónovanie sa
počíta z tokenov cez color-mix() namiesto pevných hex hodnôt, aby to
fungovalo v oboch témach. Pred každým color-mix() je plná fallback hodnota
pre engine, ktorý color-mix() nepozná.
Štruktúra (ikona aj titulok sú voliteľné):
Pozor
…
========================================================================== */
.callout {
--callout-accent: var(--border-strong);
position: relative;
margin: 0 0 var(--space-5);
padding: var(--space-4);
border: 1px solid var(--border-subtle);
border-left: 3px solid var(--callout-accent);
border-radius: var(--radius-md);
background: var(--bg-elevated);
font-size: var(--text-sm);
line-height: var(--lh-relaxed);
color: var(--fg);
}
.callout > :last-child { margin-bottom: 0; }
.callout p { font-size: inherit; }
.callout__title {
display: flex;
align-items: center;
gap: var(--space-2);
margin: 0 0 var(--space-2);
font-size: var(--text-sm);
font-weight: var(--fw-semibold);
line-height: var(--lh-snug);
color: var(--fg);
}
/* Ikona ide z externého Hugeicons stylesheetu. Ak sa nenačíta, ostane prázdny
inline box — preto žiadna fixná šírka a žiadny layout na nej nestojí. */
.callout__icon, .callout__title > i {
flex: 0 0 auto;
font-size: var(--text-base);
line-height: 1;
color: var(--callout-accent);
}
.callout--info {
--callout-accent: var(--docs-info);
background: var(--bg-elevated);
background: color-mix(in srgb, var(--docs-info) 8%, var(--bg-elevated));
border-color: var(--border-subtle);
border-left-color: var(--callout-accent);
}
.callout--warning {
--callout-accent: var(--warning);
background: var(--bg-elevated);
background: color-mix(in srgb, var(--warning) 14%, var(--bg-elevated));
border-color: var(--border-subtle);
border-left-color: var(--callout-accent);
}
.callout--restricted {
--callout-accent: var(--primary);
background: var(--bg-elevated);
background: color-mix(in srgb, var(--primary) 8%, var(--bg-elevated));
border-color: var(--border-subtle);
border-left-color: var(--callout-accent);
}
/* --------------------------------------------------------------------------
.callout--todo — chýbajúci fakt
Toto NIE JE bežný info box. Označuje miesto, kde web zámerne nemá hodnotu
(OPEN-QUESTIONS.md) — ak by čítal ako obyčajná próza, čitateľ si neznámu
hodnotu odnesie ako dokumentovaný fakt. Preto trojitý signál:
prerušovaný okraj po celom obvode, --warning akcent a povinný štítok
"Nezistené" z ::before.
-------------------------------------------------------------------------- */
.callout--todo {
--callout-accent: var(--warning);
border: 2px dashed var(--warning);
background: var(--bg-elevated);
background: color-mix(in srgb, var(--warning) 10%, var(--bg-elevated));
}
.callout--todo::before {
content: "Nezistené";
display: inline-block;
margin: 0 0 var(--space-2);
padding: 2px var(--space-2);
border-radius: var(--radius-full);
background: var(--warning);
color: var(--warning-fg);
font-family: var(--font-sans);
font-size: var(--text-2xs);
font-weight: var(--fw-bold);
letter-spacing: 0.04em;
line-height: 1.6;
}
.callout--todo > :last-child { margin-bottom: 0; }
/* ==========================================================================
8. Karty
--------------------------------------------------------------------------
.ds-card je definovaná v kros-tokens.css — tu sa iba dopĺňa (nikdy sa
neprepisuje jej povrch, okraj ani rádius).
========================================================================== */
.ds-card { margin: 0 0 var(--space-5); min-width: 0; }
.ds-card > :last-child { margin-bottom: 0; }
.ds-card h3, .ds-card h4 { margin-top: 0; }
/* Mriežka porovnávacích kariet. Tri karty sa musia zmestiť vedľa seba aj do
stredného stĺpca pri 1280 px (~680 px), preto minimum 200 px; pod ~640 px
sa poskládajú pod seba. */
.model-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
gap: var(--space-4);
margin: 0 0 var(--space-6);
}
.model-card {
display: flex;
flex-direction: column;
gap: var(--space-3);
min-width: 0;
padding: var(--space-5);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
background: var(--bg-elevated);
box-shadow: var(--shadow-xs);
}
.model-card > :last-child { margin-bottom: 0; }
.model-card__title {
margin: 0;
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: var(--fw-semibold);
line-height: var(--lh-snug);
color: var(--fg);
}
.model-card p { margin: 0; font-size: var(--text-sm); color: var(--fg-muted); }
/* "Vhodné pre" riadok — musí zostať čitateľný aj v úzkom stĺpci, preto
zalomenie textu a nie ellipsis. */
.model-card__audience {
margin: 0;
padding: var(--space-3) 0 0;
border-top: 1px solid var(--border-subtle);
font-size: var(--text-xs);
line-height: var(--lh-normal);
color: var(--fg-muted);
overflow-wrap: break-word;
}
.model-card__audience strong {
display: block;
margin-bottom: 2px;
font-size: var(--text-2xs);
font-weight: var(--fw-semibold);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--fg-subtle);
}
/* Yes/No marker pre self-service. Nesie aj textový popis, nielen farbu. */
.model-card__marker {
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin: 0;
font-size: var(--text-xs);
font-weight: var(--fw-medium);
}
.model-card__marker::before {
content: "";
width: 8px;
height: 8px;
border-radius: var(--radius-full);
background: var(--fg-subtle);
flex: 0 0 auto;
}
.model-card__marker--yes { color: var(--success); }
.model-card__marker--yes::before { background: var(--success); }
.model-card__marker--no { color: var(--fg-muted); }
.model-card__marker--no::before { background: var(--destructive); }
/* ==========================================================================
9. Numbered step flow
--------------------------------------------------------------------------
Krok môže obsahovať vlastný code block alebo callout — číslovanie
a spojnica na tom nesmú stáť.
========================================================================== */
.steps {
list-style: none;
counter-reset: docs-step;
margin: 0 0 var(--space-6);
padding: 0;
}
.steps__item {
counter-increment: docs-step;
position: relative;
min-width: 0;
padding: 0 0 var(--space-6) var(--space-10);
}
.steps__item:last-child { padding-bottom: 0; }
.steps__item > :last-child { margin-bottom: 0; }
.steps__item::before {
content: counter(docs-step);
position: absolute;
left: 0;
top: 0;
width: 28px;
height: 28px;
display: grid;
place-items: center;
border-radius: var(--radius-full);
background: var(--primary);
color: var(--primary-fg);
font-family: var(--font-sans);
font-size: var(--text-xs);
font-weight: var(--fw-semibold);
line-height: 1;
}
/* Spojnica medzi kruhmi — od spodku kruhu po spodok kroku. */
.steps__item::after {
content: "";
position: absolute;
left: 13px; /* stred 28px kruhu mínus polovica ťahu */
top: 32px;
bottom: 0;
width: 2px;
background: var(--border-subtle);
}
.steps__item:last-child::after { display: none; }
.steps__item > h3, .steps__item > h4, .steps__item .steps__title {
margin: 0 0 var(--space-2);
padding-top: 4px; /* opticky zarovná titulok s číslom v kruhu */
font-size: var(--text-base);
font-weight: var(--fw-semibold);
line-height: var(--lh-snug);
}
/* ==========================================================================
10. Badge
========================================================================== */
.badge {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: 2px var(--space-2);
border-radius: var(--radius-md); /* 8 px na ovládacích prvkoch */
background: var(--secondary);
color: var(--secondary-fg);
font-family: var(--font-sans);
font-size: var(--text-2xs);
font-weight: var(--fw-semibold);
line-height: 1.5;
letter-spacing: 0.02em;
white-space: nowrap;
vertical-align: middle;
}
/* HTTP metódy — plný farebný chip s textom metódy, kompaktný natoľko, aby
sedel inline vo vete aj v .code__header vedľa cesty endpointu. */
.badge--get {
background: var(--success);
color: var(--success-fg);
font-family: var(--font-mono);
}
.badge--post {
background: var(--docs-info);
color: var(--primary-fg);
font-family: var(--font-mono);
}
.badge--put {
background: var(--warning);
color: var(--warning-fg);
font-family: var(--font-mono);
}
.badge--delete {
background: var(--destructive);
color: var(--destructive-fg);
font-family: var(--font-mono);
}
/* "Vyžaduje partnerský prístup" — --brand-500 podklad, --primary-fg text
(požiadavka zo zadania Tasku 4). Brand primitív je tu zámerný: badge musí
byť v oboch témach rovnako sýty, nie svetlejší v tmavom režime. */
.badge--restricted {
background: var(--brand-500);
color: var(--primary-fg);
}
/* ==========================================================================
11. Prompt karta (ai.html)
--------------------------------------------------------------------------
Najdôležitejší interaktívny prvok webu. Jediné miesto, kde sa na celom
webe používa mauve (KROS PRO) — a to len ako 3px pás na hornom okraji.
========================================================================== */
.prompt-card {
position: relative;
margin: 0 0 var(--space-6);
padding: var(--space-6);
border: 1px solid var(--border-subtle);
border-top: 3px solid var(--docs-pro);
border-radius: var(--radius-lg);
background: var(--bg-elevated);
box-shadow: var(--shadow-sm);
min-width: 0;
}
.prompt-card__title {
margin: 0 0 var(--space-2);
font-family: var(--font-display);
font-size: var(--text-xl);
font-weight: var(--fw-bold);
line-height: var(--lh-snug);
color: var(--fg);
}
.prompt-card > p { color: var(--fg-muted); }
/* Prepínač variantov promptu. Rovnaký mechanizmus ako .tabs (12) — bez JS
sú viditeľné všetky varianty, prepínač sa zobrazí až s .js-tabs. */
.prompt-card__variants {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin: 0 0 var(--space-4);
}
.prompt-card__variant {
padding: var(--space-1) var(--space-3);
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--bg-elevated);
color: var(--fg-muted);
font-family: inherit;
font-size: var(--text-xs);
font-weight: var(--fw-medium);
cursor: pointer;
transition: background var(--dur-fast) var(--ease-standard),
color var(--dur-fast) var(--ease-standard);
}
.prompt-card__variant:hover { color: var(--fg); background: var(--secondary); }
.prompt-card__variant--active {
background: var(--primary);
border-color: var(--primary);
color: var(--primary-fg);
}
/* Telo promptu: monospace, vlastný vnútorný scroll (prompt má niekoľko
odsekov — scrolluje karta, nie stránka). */
.prompt-card__body {
margin: 0 0 var(--space-4);
padding: var(--space-4);
max-height: 320px;
overflow: auto;
border: 1px solid var(--code-border);
border-radius: var(--radius-md);
background: var(--code-bg);
color: var(--code-fg);
font-family: var(--font-mono);
font-size: var(--text-sm);
line-height: var(--lh-relaxed);
white-space: pre-wrap;
overflow-wrap: break-word;
scrollbar-color: var(--code-punct) transparent;
}
/* Copy tlačidlo, ktoré sa nedá prehliadnuť — primárna farba, plná šírka na
mobile. Nie skryté v hlavičke ako pri bežnom .code bloku. */
.prompt-card__copy {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
height: 44px;
padding: 0 var(--space-6);
border: 1px solid var(--primary);
border-radius: var(--radius-md);
background: var(--primary);
color: var(--primary-fg);
font-family: inherit;
font-size: var(--text-base);
font-weight: var(--fw-semibold);
cursor: pointer;
transition: background var(--dur-fast) var(--ease-standard);
}
.prompt-card__copy:hover { background: var(--primary-hover); border-color: var(--primary-hover); }
/* docs.js nastaví data-copied="true" a vymení text na "Skopírované". */
.prompt-card__copy[data-copied="true"] {
background: var(--success);
border-color: var(--success);
color: var(--success-fg);
}
/* ==========================================================================
12. Taby — progressive enhancement
--------------------------------------------------------------------------
Bez JavaScriptu sú viditeľné VŠETKY panely a prepínač sa nezobrazuje —
to je použiteľný default, nie rozbitý stav. Panely sa skrývajú až keď
docs.js pridá na .tabs triedu `js-tabs`.
========================================================================== */
.tabs { margin: 0 0 var(--space-5); min-width: 0; }
.tabs__list { display: none; } /* bez JS by prepínač nič nerobil */
.tabs__panel { display: block; } /* bez JS: všetko viditeľné */
.tabs.js-tabs .tabs__list {
display: flex;
flex-wrap: wrap;
gap: var(--space-1);
margin: 0 0 var(--space-3);
border-bottom: 1px solid var(--border-subtle);
}
.tabs.js-tabs .tabs__panel { display: none; }
.tabs.js-tabs .tabs__panel--active { display: block; }
.tabs__tab {
padding: var(--space-2) var(--space-3);
margin-bottom: -1px;
border: 0;
border-bottom: 2px solid transparent;
background: transparent;
color: var(--fg-muted);
font-family: inherit;
font-size: var(--text-sm);
font-weight: var(--fw-medium);
cursor: pointer;
transition: color var(--dur-fast) var(--ease-standard),
border-color var(--dur-fast) var(--ease-standard);
}
.tabs__tab:hover { color: var(--fg); }
.tabs__tab--active {
color: var(--accent-fg);
border-bottom-color: var(--primary);
}
/* ==========================================================================
13. Diagramy (inline SVG)
--------------------------------------------------------------------------
SVG nesmie mať zapísanú farbu natvrdo — inak sa pri prepnutí témy musí
editovať súbor diagramu. Preto tieto triedy: uzly, spojnice, popisky
a hrot šípky čítajú výhradne tokeny.
Hrúbky ťahov sú jediné pevné hodnoty v tomto bloku (nie farby):
--diagram-stroke: 1.5px hlavné spojnice
--diagram-stroke-thin: 1px pomocné / voliteľné cesty
Sú tu preto, že návrhový systém žiadne stroke-width tokeny nedefinuje
(DESIGN-BRIEF.md 5.9 ich vyžaduje ako konzistentnú hodnotu naprieč webom).
figcaption je povinný a je to nosný obsah, nie dekorácia — AI agent
namiesto diagramu dostane práve jeho text (tools/check.mjs to vynucuje
ako ERROR).
========================================================================== */
.diagram {
--diagram-stroke: 1.5px;
--diagram-stroke-thin: 1px;
margin: 0 0 var(--space-6);
padding: var(--space-5);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
background: var(--bg-elevated);
overflow-x: auto;
max-width: 100%;
}
.diagram svg {
display: block;
width: 100%;
height: auto;
max-width: 100%;
font-family: var(--font-sans);
}
.diagram__caption {
margin: var(--space-4) 0 0;
font-size: var(--text-xs);
line-height: var(--lh-relaxed);
color: var(--fg-muted);
}
/* Uzol: povrch --bg-elevated, okraj --border-strong; zvýraznený uzol --primary. */
.diagram .dg-node {
fill: var(--bg-elevated);
stroke: var(--border);
stroke-width: var(--diagram-stroke);
}
.diagram .dg-node--highlight { fill: var(--primary); stroke: var(--primary); }
.diagram .dg-node--muted { fill: var(--bg-muted); stroke: var(--border-subtle); }
/* Spojnice. Jeden hrot šípky (plný trojuholník) pre celý web — marker
v každého diagramu má fill: var(--border-strong). */
.diagram .dg-line {
fill: none;
stroke: var(--border-strong);
stroke-width: var(--diagram-stroke);
stroke-linecap: round;
}
.diagram .dg-line--optional {
stroke-width: var(--diagram-stroke-thin);
stroke-dasharray: 4 4;
}
.diagram .dg-arrow { fill: var(--border-strong); stroke: none; }
/* Popisky. */
.diagram .dg-label {
fill: var(--fg);
font-size: var(--text-sm);
font-weight: var(--fw-medium);
}
.diagram .dg-label--on-node { fill: var(--primary-fg); }
.diagram .dg-label--muted { fill: var(--fg-muted); font-size: var(--text-xs); font-weight: var(--fw-regular); }
/* ==========================================================================
14. Dátová tabuľka
--------------------------------------------------------------------------
.docs-table je vždy obalená v .table-scroll — obal nesie zodpovednosť za
vodorovný scroll.
sa nikdy nevkladá do obsahu
bez neho.
========================================================================== */
.table-scroll {
overflow-x: auto; /* scrolluje obal, nikdy */
max-width: 100%;
margin: 0 0 var(--space-6);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--bg-elevated);
scrollbar-color: var(--border) transparent;
}
.docs-table {
width: 100%;
min-width: 100%;
border-collapse: collapse;
font-size: var(--text-sm);
background: var(--bg-elevated);
}
.docs-table thead th {
position: relative;
padding: var(--space-2) var(--space-4);
background: var(--bg-muted);
border-bottom: 1px solid var(--border-subtle);
color: var(--fg-muted);
font-size: var(--text-xs);
font-weight: var(--fw-semibold);
letter-spacing: 0.03em;
text-align: left;
vertical-align: bottom;
white-space: nowrap; /* hlavička sa nezalamuje — tabuľka scrolluje */
}
.docs-table tbody th {
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--border-subtle);
color: var(--fg);
font-weight: var(--fw-semibold);
text-align: left;
vertical-align: top;
}
.docs-table td {
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--border-subtle);
color: var(--fg);
line-height: var(--lh-normal);
vertical-align: top;
/* Celá slovenská veta v bunke sa zalamuje vnútri bunky — nie je to dôvod
na rozšírenie tabuľky ani stránky. */
overflow-wrap: break-word;
/* Bez tohto minima vytlačí `table-layout: auto` textový stĺpec do šírky
jedného slova a riadok narastie na desiatky liniek. */
min-width: 8ch;
}
/* Stĺpec s celou vetou popisu (napr. význam chybového kódu). Dáva sa na