/* ══════════════════════════════════════════════════════════════════════════════════════════
KNIHOVNA PODOB (ADR-0131) — jedno místo, kde bydlí vzhled sdílených prvků.
PROČ GLOBÁLNÍ LIST A NE SCOPED CSS KOMPONENT: prvky knihovny dostávají obsah jako
`RenderFragment` od volajícího (`
`, `
`, `
`). Ten se kompiluje do KOMPONENTY
VOLAJÍCÍHO, takže nese jeho scope — scoped pravidlo prvku by na něj nedopadlo a tabulka by
se vykreslila bez linek a odsazení. Týž důvod a týž vzor jako `dialog.css`,
`karta-sekce.css` a `upravitelna-hodnota.css`.
CO SE TU NEOPAKUJE: hustota a linky samotné tabulky zůstávají v `tabulka.css` (`.tabulka`,
`.tabulka.je-vzdusna`) — knihovna je jen POJMENOVÁVÁ jako podoby, nepíše je podruhé. Dvě
sady čísel pro touž věc jsou přesně to, čemu se tady předchází.
══════════════════════════════════════════════════════════════════════════════════════════ */
/* ── TABULKA ──────────────────────────────────────────────────────────────────────────────
Obal je podoba ze záložky Majetek na kartě klienta (pokyn uživatele 18. 9. 2026: „prozatím
stejného designu jako ta, co je na kartě majetek u klienta") — bílá plocha, vlasový rámeček,
velké zaoblení a jemný stín.
ROLUJE SE JEN VODOROVNĚ. Svisle roluje STRÁNKA: `overflow-y` na obalu by z něj udělal
rolovací kontejner a přilepené záhlaví (`position: sticky` v `tabulka.css`) by se přilepilo
k němu, tedy nikam. Tabulka, která má mít vlastní svislé rolování a slepenou hlavičku, má
dodnes vlastní obal `.tabulka-obal` (32 míst) — ten se knihovnou NENAHRAZUJE, je to jiný
prvek s jiným chováním. */
.kn-tabulka {
background: var(--white);
border: 1px solid var(--border-hairline);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
overflow-x: auto;
}
.kn-tabulka .tabulka { width: 100%; }
/* Tabulka uvnitř karty už rámeček má — druhý by z ní udělal krabici v krabici. */
.kn-tabulka.je-bez-obalu {
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
}
/* ČÍSLO VPRAVO, i v záhlaví. `tabulka.css` zarovnává buňku, ale hlavičku ne — a popisek nad
číslem zarovnaný doleva vypadá jako jiný sloupec (nález ze záložky Majetek). */
.kn-tabulka th.sl-cislo { text-align: right; }
/* ── FORMULÁŘ ─────────────────────────────────────────────────────────────────────────────
Svislý rytmus formuláře, a nic jiného. Tři míry pojmenované jednou; kdo je potřebuje jinak,
mění knihovnu (a mluví s Pavlem), ne stránku.
ČÍSLA JSOU PŘEVZATÁ, NE VYMYŠLENÁ: přesně ta, která má dnes PRAVÝ sloupec dialogu a která
jsou proti návrhu změřená jako správná. Levý sloupec je nikdy nedostal (měl `gap: 0`
a jedinou náhradu mířenou na třídu, kterou používá jediný dialog), takže v něm dvě pole za
sebou seděla na nule — v pěti dialozích. Změřeno v prohlížeči, ne odhadnuto.
MARGIN, NE GAP. Gap dá jednu mezeru všemu a nadpis skupiny potřebuje jiné odstupy nahoru
a dolů; s gapem by se k nim přičítal a nadpisy by se rozjely (přesně tak vznikl posuvník
v dialogu tiketu, kvůli kterému se gap vypnul plošně). */
/* MÍRY JSOU NA `:root` SCHVÁLNĚ. Dokud nejsou všechny formuláře na prvku, potřebuje je číst
i `dialog.css` u sloupců, které převedené ještě nejsou — a smysl téhle práce je, aby se
čísla měnila na JEDNOM místě, ne aby vedle sebe stály dvě sady. */
/* ČÍSLA Z NÁVRHU 24. 9. 2026 (29. 9. 2026, jednotný dialog, ADR-0161 §11): pole má pod sebou
11 px (`.fld { margin-bottom: 11px }`), nadpis skupiny 16 px nad a 9 px pod (`.sgh`). Změřeno
na dialogu epiky, klienta a wizardu tiketu v návrhu, ne opsáno. Do 29. 9. tu byla čísla
13 / 21 / 10 ze starší kopie (8. 9. je návrh ve všech dialozích zhustil). */
:root {
--kn-formular-mezera: 11px; /* prvek → prvek */
--kn-formular-nad-skupinou: 16px; /* prvek → nadpis skupiny */
--kn-formular-pod-skupinou: 9px; /* nadpis skupiny → prvek */
}
.mck .kn-formular {
display: flex;
flex-direction: column;
gap: 0;
}
/* JEN HORNÍ OKRAJE. Svislé okraje se ve flexovém sloupci NESČÍTAJÍ do jednoho (nekolabují),
takže „spodní 13 u pole + horní 21 u nadpisu" dá 34 — což se mi při první verzi tohohle
prvku stalo a změřil jsem to (21 → 34 px nad „Rozsah průvodce"). Model proto nejdřív všechny
okraje vynuluje — včetně těch, které si prvky nesou samy (`.dlg-sekce` má 21/10,5) — a pak
nastaví JEDINÝ okraj: horní, podle toho, co po čem následuje. Odstup je tím vždy právě jedno
číslo a nedá se sečíst. */
.mck .kn-formular > * { margin-top: 0; margin-bottom: 0; }
/* prvek → prvek */
.mck .kn-formular > * + * { margin-top: var(--kn-formular-mezera); }
/* nadpis skupiny → prvek (menší, nadpis k obsahu patří) */
.mck .kn-formular > .je-skupina + * { margin-top: var(--kn-formular-pod-skupinou); }
/* prvek → nadpis skupiny (větší, odděluje skupiny) */
.mck .kn-formular > * + .je-skupina { margin-top: var(--kn-formular-nad-skupinou); }
/* ── POZNÁMKY K VYDÁNÍM (Administrace → Vydání) ──────────────────────────────────────────
Šířky sloupců a popis v rozbaleném řádku. Je to tu, a ne ve scoped CSS té komponenty,
z téhož důvodu jako všechno ostatní v tomhle listu: buňky posílá volající a nesou jeho
scope. (Šířky jsou vlastnost TÉHLE tabulky — podoba je výš a ta se nepřebíjí.) */
/* Sloupec šipky je úzký a beze jména — je to znak, ne údaj. */
.vyd-tabulka .sl-rozbal { width: 26px; padding-right: 0; }
.vyd-tabulka .sl-verze { width: 84px; font-family: var(--font-cisla); font-weight: 600; }
.vyd-tabulka .sl-datum { width: 104px; color: var(--brown-400); }
.vyd-tabulka .sl-druh { width: 116px; }
.vyd-tabulka .sl-tikety { width: 170px; }
/* Klíč tiketu v buňce — drobná pilulka, ať jde poznat od textu. */
.vyd-tiket {
display: inline-block;
font-family: var(--font-cisla);
font-size: 11.5px;
font-weight: 700;
color: var(--brown-500);
background: var(--cream-100);
border: 1px solid var(--border-hairline);
border-radius: var(--radius-pill);
padding: 0 8px;
margin-right: 4px;
white-space: nowrap;
}
/* POPIS VYDÁNÍ JE V ROZBALENÉM ŘÁDKU (`tr.tabulka-rozsireni`), protože `.tabulka td` ořezává
na jeden řádek — a to je u husté tabulky správně. Přebíjet ořez v buňce by znamenalo
lokálně rozbít podobu, které se knihovnou právě předchází. */
.vyd-tabulka .vyd-telo {
padding: 12px 14px 14px;
font-size: 13.5px;
line-height: 1.6;
color: var(--brown-600);
max-width: 96ch;
}
.vyd-tabulka .vyd-telo :first-child { margin-top: 0; }
.vyd-tabulka .vyd-telo :last-child { margin-bottom: 0; }
.vyd-tabulka .vyd-telo p { margin: 0 0 8px; }
.vyd-tabulka .vyd-telo ul,
.vyd-tabulka .vyd-telo ol { margin: 0 0 8px; padding-left: 20px; }
.vyd-tabulka .vyd-telo li { margin: 2px 0; }
.vyd-tabulka .vyd-telo code {
font-family: var(--font-mono);
font-size: 12.5px;
background: var(--cream-100);
border-radius: var(--radius-xs);
padding: 1px 5px;
}
/* ZNAK ROZBALITELNOSTI. U řádku tabulky žádný v aplikaci nebyl — tam se ale rozbaluje NÁHLED
toho, co je v řádku vidět, takže stačil `cursor: pointer` a zelený hover. Tady je pod řádkem
text, o kterém řádek sám nic neříká. Je to týž ▶ jako u skládací sekce karty (ADR-0095),
ne nový slovník. */
.vyd-tabulka .vyd-sipka {
display: inline-block;
width: 11px;
font-size: 10px;
line-height: 1;
color: var(--brown-300);
transition: transform var(--dur-fast) var(--ease-standard);
}
.vyd-tabulka .vyd-sipka.je-otevrena { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) {
.vyd-tabulka .vyd-sipka { transition: none; }
}
/* ══════════════════════════════════════════════════════════════════════════════════════════
PRVKY FORMULÁŘE A VOLBY (ADR-0131, ADR-0149, 24. 9. 2026 — návrh Onboarding v2)
Pole, pilulky, karty, přepínač, posuvník, kalendář, výběr roku, bublina „Proč se ptáme",
prstenec postupu, plocha pro soubory a plovoucí tlačítko. Čísla jsou z návrhu Pavla
Müllera (`podklady/claude-design/onboarding-v2-2026-09-19`) a jsou ZMĚŘENÁ v prohlížeči
(getComputedStyle), ne opsaná od oka.
BEZ SCOPE TVÁŘE. Prvky nejsou pod `.mck` ani pod `.onb`: sdílí se chování a rozměry, barvy
jdou z tokenů, které mají obě tváře stejné (ADR-0131 „dvě tváře, jedna sada prvků").
Proto tu taky nejsou pravidla na holé značky (`button`, `a`) — na ně sahají listy tváří
a specifičtější selektor by prvku podobu tiše přebil (hlídá `KnihovnaPrvkuTests`).
══════════════════════════════════════════════════════════════════════════════════════════ */
/* ── POLE: MŘÍŽKA ──────────────────────────────────────────────────────────────────────────
Dva sloupce, pole je buď přes celou šířku, nebo na půl.
SLOUPCE ŘÍDÍ ŠÍŘKA MŘÍŽKY, NE OKNA (container query). Prostřední sloupec průvodce má na
okně 901 px jen 218 px (rail a panel si vezmou zbytek), kdežto telefon 390 px má 358 px —
podle okna by se tedy rozhodlo obráceně. Hranice 480 px dělí přesně tak, jak to kreslí
návrh: prostřední sloupec (758 px) a dialog (540 px) mají dva sloupce, telefon jeden.
„PŘES CELOU ŠÍŘKU" JE `1 / -1`, NIKDY `span 2`. `span 2` v jednosloupcové mřížce ZALOŽÍ
druhý, implicitní sloupec — pole pak byla na telefonu široká 80 px a text v nich uříznutý
(U2, změřeno 24. 9. 2026 na 390 px). `1 / -1` se roztáhne jen přes sloupce, které jsou. */
.kn-pole-obal { container-type: inline-size; min-width: 0; }
.kn-pole-mrizka {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px 16px;
}
.kn-pole-mrizka.je-kompaktni { gap: 13px; }
.kn-pole {
display: flex;
flex-direction: column;
gap: 8px;
grid-column: 1 / -1;
min-width: 0;
}
.kn-pole.je-pulka { grid-column: auto; }
.je-kompaktni > .kn-pole { gap: 6px; }
@container (max-width: 480px) {
.kn-pole-mrizka { grid-template-columns: minmax(0, 1fr); }
.kn-pole.je-pulka { grid-column: 1 / -1; }
}
/* Popisek a hvězdička povinného pole. Hvězdička je jantarová z návrhu (`.req`), ne červená:
povinné není chyba. */
.kn-pole-popisek {
display: flex;
align-items: center;
flex-wrap: wrap;
row-gap: 4px;
font-size: 13px;
font-weight: 600;
line-height: 1.3;
color: var(--brown-600);
margin: 0;
}
.je-kompaktni .kn-pole-popisek { font-size: 12px; }
.kn-povinne { color: #a8741a; font-weight: 700; margin-left: 3px; }
.kn-pole-napoveda { font-size: 12px; line-height: 1.5; color: var(--brown-400); }
/* Věta u pole (odepření, výtka) — u prvku, kterého se týká, ne oknem (ADR-0067). */
.kn-pole-chyba {
font-size: 12.5px;
line-height: 1.5;
color: #a8741a;
background: #f8edd8;
border-radius: var(--radius-sm);
padding: 9px 12px;
}
/* ── POLE: VSTUP ───────────────────────────────────────────────────────────────────────────
Jedna podoba pro text, odstavec, výběr i obal čísla a data (`CisloPole`/`DatumPole` dostanou
tuhle třídu parametrem `Trida`).
PRÁZDNÉ POLE JE VIDĚT (návrh: „Nápověda musí být jasně odlišená od skutečně vyplněné
hodnoty"): krémová plocha, čárkovaný rámeček a nápověda kurzívou. Bez toho vypadá
předvyplněný formulář a prázdný formulář stejně — a klient neví, co ještě chybí. */
.kn-vstup {
font-family: var(--font-body);
font-size: 15px;
color: var(--brown-700);
background: var(--white);
height: 44px;
padding: 0 14px;
border-radius: var(--radius-md);
border: 1px solid var(--border-hairline);
outline: 0;
width: 100%;
margin: 0;
line-height: normal;
box-sizing: border-box;
}
.kn-vstup:focus { border-color: var(--green-500); box-shadow: var(--shadow-focus); }
.kn-vstup::placeholder { color: var(--brown-300); font-style: italic; opacity: 1; }
.kn-vstup:placeholder-shown { background: var(--cream-50); border-style: dashed; }
.kn-vstup:placeholder-shown:focus { background: var(--white); border-style: solid; }
textarea.kn-vstup {
height: auto;
min-height: 88px;
padding: 12px 14px;
line-height: 1.6;
resize: vertical;
}
/* Výběr dostane týž kabát — jinak je to jediný prvek obrazovky, který si kreslí operační
systém po svém. Šipka je z návrhu (`select.sel`): 16 px, tah brown-300, 11 px od kraje. */
select.kn-vstup {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 11px center;
background-size: 16px;
padding-right: 34px;
cursor: pointer;
}
/* VÝBĚR V DIALOGU má v návrhu v2 vlastní podobu (`select.in.cbx`, 24. 9. 2026): menší
zaoblení (radius-sm), 12 px od kraje a plnou šipku 10 × 6 px v brown-600, 13 px od kraje.
Ve formuláři kapitoly zůstává `select.sel` výš. Změřeno v návrhu nad dialogem majetku. */
dialog .kn-pole-mrizka select.kn-vstup {
border-radius: var(--radius-sm);
padding-left: 12px;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none' stroke='%23594334' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.2 5 4.8 9 1.2'/%3E%3C/svg%3E");
background-position: right 13px center;
background-size: 10px 6px;
line-height: 36px;
}
dialog .kn-pole-mrizka select.kn-vstup:focus { border-color: var(--green-300); box-shadow: 0 0 0 3px rgba(175, 202, 11, .18); }
.je-kompaktni .kn-vstup { height: 38px; font-size: 14px; }
.je-kompaktni textarea.kn-vstup { height: auto; min-height: 62px; padding: 10px 12px; }
/* Obal čísla a data (`.zpole` z cimpel.css) je řádkový flex — v poli průvodce roste přes
celou šířku jako ostatní vstupy. */
.kn-pole .zpole { display: flex; width: 100%; max-width: none; }
/* ── POLE „CO KONKRÉTNĚ?" ─────────────────────────────────────────────────────────────────
Doplnění k volbě „jiné" — ukáže se, až když je „jiné" zvolené (návrh `hasOther`). */
.kn-upresneni { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.kn-upresneni-popisek { flex: 0 0 auto; font-size: 12px; line-height: 1.5; color: var(--brown-400); }
.kn-upresneni .kn-vstup { height: 38px; font-size: 14px; max-width: 340px; }
/* ── PILULKY VOLBY ─────────────────────────────────────────────────────────────────────────
Jedna i víc voleb. Zvolená pilulka: zelená plocha, zelený rámeček, tučnější písmo. */
.kn-pilulky { display: flex; flex-wrap: wrap; gap: 8px; }
.kn-pilulky.je-kompaktni,
.je-kompaktni .kn-pilulky { gap: 6px; }
.kn-pilulka {
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 0 17px;
margin: 0;
white-space: nowrap;
border-radius: var(--radius-pill);
border: 1px solid var(--border-hairline);
background: var(--white);
font: 500 13.5px var(--font-body);
line-height: normal;
color: var(--brown-600);
cursor: pointer;
text-align: left;
}
.kn-pilulka:hover { border-color: var(--green-300); }
.kn-pilulka:focus-visible { outline: 0; box-shadow: var(--shadow-focus); }
.kn-pilulka.je-zvolena {
background: var(--green-100);
border-color: var(--green-300);
color: var(--green-700);
font-weight: 600;
}
/* Hustota se DĚDÍ z mřížky: pilulky v kompaktní `MrizkaPoli` jsou kompaktní samy. */
.je-kompaktni .kn-pilulka { min-height: 34px; padding: 0 13px; font-size: 12.5px; }
/* ── KARTY VOLBY ───────────────────────────────────────────────────────────────────────────
Volba s podtitulkem. Kolečko = jedna volba, čtvereček = víc voleb (návrh `.rdo` × `.ck`). */
.kn-karty { display: grid; gap: 9px; }
.kn-karty.je-kompaktni,
.je-kompaktni .kn-karty { gap: 7px; }
.kn-karty.je-vedle-sebe { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.kn-karta {
display: grid;
grid-template-columns: 18px minmax(0, 1fr);
gap: 12px;
align-items: start;
width: 100%;
min-height: 44px;
margin: 0;
padding: 15px 16px;
text-align: left;
font-family: var(--font-body);
border: 1px solid var(--border-hairline);
border-radius: var(--radius-md);
background: var(--white);
cursor: pointer;
}
.je-kompaktni .kn-karta { padding: 11px 13px; }
.kn-karta:hover { border-color: var(--green-300); background: var(--cream-50); }
.kn-karta:focus-visible { outline: 0; box-shadow: var(--shadow-focus); }
.kn-karta.je-zvolena { border-color: var(--green-500); background: var(--green-100); }
.kn-karta-znacka {
width: 17px;
height: 17px;
margin-top: 2px;
border: 1.5px solid var(--brown-300);
display: flex;
align-items: center;
justify-content: center;
color: var(--white);
box-sizing: border-box;
}
.kn-karta-znacka.je-kolecko { border-radius: 50%; }
.kn-karta-znacka.je-ctverec { border-radius: 5px; }
.kn-karta-znacka svg { width: 11px; height: 11px; opacity: 0; }
.kn-karta.je-zvolena .kn-karta-znacka { background: var(--green-700); border-color: var(--green-700); }
.kn-karta.je-zvolena .kn-karta-znacka.je-kolecko { box-shadow: inset 0 0 0 3px var(--white); }
.kn-karta.je-zvolena .kn-karta-znacka.je-ctverec svg { opacity: 1; }
.kn-karta-nazev { display: block; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--brown-700); }
.kn-karta-podtitulek {
display: block;
margin-top: 4px;
font-size: 12px;
line-height: 1.5;
color: var(--brown-400);
text-wrap: pretty;
}
/* ── PŘEPÍNAČ ANO / NE ─────────────────────────────────────────────────────────────────────
Nativní zaškrtávací pole schované pod vlastní kolejničkou — funguje i bez okruhu (formulář
ho odešle) a slovo „ano"/„ne" přepíná CSS, ne skript. */
.kn-prepinac {
position: relative;
display: inline-flex;
align-items: center;
gap: 10px;
height: 38px;
cursor: pointer;
margin: 0;
}
.kn-prepinac-vstup {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
margin: 0;
}
.kn-prepinac-kolej {
position: relative;
flex: 0 0 auto;
width: 38px;
height: 22px;
border-radius: var(--radius-pill);
background: var(--cream-200);
border: 1px solid var(--border-hairline);
box-sizing: border-box;
transition: background var(--dur-fast) var(--ease-standard);
}
.kn-prepinac-kolej::after {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--white);
box-shadow: 0 1px 3px rgba(46, 35, 26, .28);
transition: transform var(--dur-fast) var(--ease-standard);
}
.kn-prepinac-vstup:checked + .kn-prepinac-kolej { background: var(--green-500); border-color: #9bb40a; }
.kn-prepinac-vstup:checked + .kn-prepinac-kolej::after { transform: translateX(16px); }
.kn-prepinac-vstup:focus-visible + .kn-prepinac-kolej { box-shadow: var(--shadow-focus); }
/* Řádkování slova je `normal` jako v návrhu (`.swt b` uvnitř tlačítka), ne 1,55 z formuláře —
slovo stojí uprostřed 38px řádku a vyšší řádek by ho neposunul, jen by měřil jinak. */
.kn-prepinac-text { font-size: 13px; font-weight: 500; color: var(--brown-500); line-height: normal; }
.kn-prepinac-vstup:checked ~ .kn-prepinac-text { color: var(--brown-700); }
.kn-prepinac-vstup:checked ~ .kn-prepinac-text.je-ne,
.kn-prepinac-vstup:not(:checked) ~ .kn-prepinac-text.je-ano { display: none; }
@media (prefers-reduced-motion: reduce) {
.kn-prepinac-kolej, .kn-prepinac-kolej::after { transition: none; }
}
/* ── POSUVNÍK ČÁSTKY ───────────────────────────────────────────────────────────────────────
Velké číslo nahoře, posuvník pod ním, krajní hodnoty pod posuvníkem.
NATIVNÍ POSUVNÍK V BARVĚ ZNAČKY (`accent-color`), NE VE VÝCHOZÍ ŠEDI. Návrh ho kreslí
právě takhle; vlastní kolejnice z `::-webkit-slider-*` by se v každém prohlížeči chovala
jinak a klávesnice i čtečka by přišly o to, co nativní prvek umí zadarmo. */
.kn-posuvnik-hodnota { display: flex; align-items: baseline; gap: 12px; }
.kn-posuvnik-cislo {
font-family: var(--font-cisla);
font-size: 26px;
font-weight: 700;
line-height: 1.55;
letter-spacing: -.01em;
color: var(--brown-700);
white-space: nowrap;
}
.kn-posuvnik-jednotka { font-size: 13px; color: var(--brown-400); }
.kn-posuvnik {
display: block;
width: 100%;
max-width: 420px;
height: 16px;
margin: 12px 2px 2px;
accent-color: var(--green-500);
cursor: pointer;
}
.kn-posuvnik:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.kn-posuvnik-meze {
display: flex;
justify-content: space-between;
max-width: 420px;
margin-top: 6px;
font-size: 11px;
color: var(--brown-300);
}
/* ── INFORMAČNÍ BUBLINA („Proč se ptáme") ──────────────────────────────────────────────────
Tlačítko s ikonou (i), klik otevře PLOVOUCÍ bublinu. Není to `