/**
 * Blueberry — hlavní styly.
 *
 * Vanilla CSS3 (bez frameworku), Material 2, light/dark režim, layout tří zón
 * přes CSS Grid + Flexbox, responzivní (desktop / tablet / mobile).
 * Písmo: Google Open Sans (lokální webfont ve vendors/, žádná CDN).
 *
 * BARVY: výhradně přes tokeny v :root / :root[data-theme="dark"] — v pravidlech
 * není a nesmí být ani jedna barva napevno (platí i pro stavy, stíny a tisk).
 * Hodnoty jsou konkrétní odstíny Material 2; tmavý režim staví na jeho dark
 * specifikaci (základ #121212 + elevace), protože šedá řada je pro tmu hrubá.
 * BEZ STÍNŮ: v projektu není jediný box-shadow. Plochy odděluje barva a čára,
 * fokus označuje prstenec (outline). Na tmavém není stín stejně vidět.
 * Podrobně: docs/documentation.md → Barevná paleta (as-built).
 *
 * CESTY: každé url() je RELATIVNÍ vůči tomuhle souboru (../../vendors/…,
 * ../img/…), nikdy od kořene domény. Prohlížeč je vyhodnocuje proti adrese
 * stylu, takže fungují i v podadresáři — a CSS o umístění appky nic vědět
 * nemusí. Viz docs/documentation.md → Robustnost a přenositelnost.
 */

/* ---------- Open Sans ----------
   Soubory fontu jsou ve vendors/@fontsource/open-sans@5.3.0/ (nedotčená kopie
   balíčku). Tenhle @font-face je NÁŠ — vybírá jen řezy, které používáme, a při
   aktualizaci balíčku se v něm mění jediné: číslo verze v cestě. */
/* latin */
@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../../vendors/@fontsource/open-sans@5.3.0/files/open-sans-latin-400-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../../vendors/@fontsource/open-sans@5.3.0/files/open-sans-latin-600-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../../vendors/@fontsource/open-sans@5.3.0/files/open-sans-latin-700-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext (diakritika — čeština) */
@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../../vendors/@fontsource/open-sans@5.3.0/files/open-sans-latin-ext-400-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../../vendors/@fontsource/open-sans@5.3.0/files/open-sans-latin-ext-600-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Open Sans";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../../vendors/@fontsource/open-sans@5.3.0/files/open-sans-latin-ext-700-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Barevné tokeny — light (výchozí) ---------- */
:root {
	--font-sans: "Open Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

	--color-bg: #ffffff;
	--color-surface: #ffffff;
	--color-surface-alt: #eeeeee;
	/* Rail drží stejný odstín jako headery (Grey 50) — nav-panel je o stupeň tmavší. */
	--color-rail: #fafafa;
	--color-nav: #f5f5f5;
	--color-header: #fafafa;
	--color-text: #000000;
	/* Tlumený text: jedna sdílená hodnota nevyjde v obou režimech (co je čitelné
	   na bílé, je tmavé na černé), proto má každý režim svůj odstín z Material řady. */
	--color-text-muted: #616161;
	--color-border: #e0e0e0;

	--color-accent: #3f51b5;
	--color-accent-hover: #303f9f;
	--color-on-accent: #ffffff;

	/* Stavy ikon a tlačítek (rail, header, toolbar) — Material Indigo.
	   Hover nese podbarvení, aktivní stav jen barvu (podbarvení nemá). */
	--color-hover-bg: #e8eaf6;
	--color-hover-text: var(--color-accent);
	--color-active-text: var(--color-accent);
	/* Aplikace je BEZ STÍNŮ — plochy odděluje čára, fokus označuje prstenec. */
	--color-focus-ring: #c5cae9;

	/* Nebezpečné akce (mazání) — Material Red 700 (Red 500 táhne do oranžova). */
	--color-danger: #d32f2f;
	--color-danger-hover: #b71c1c;
	--color-on-danger: #ffffff;

	/* Stavové barvy — viz documentation.md → Stavové barvy (závazná definice).
	   Podklad je odstín 50, text na něm musí být 800/900 (500 by neměla kontrast). */
	--color-error-text: #c62828;
	--color-error-bg: #ffebee;
	--color-warning-text: #e65100;
	--color-warning-bg: #fff3e0;
	--color-success-text: #33691e;
	--color-success-bg: #f1f8e9;

	/* POPISKY (v1.76.0). Bublina je tmavá plocha nad světlou aplikací — Grey 900
	   s bílým textem. V tmavém režimu se hodnota MUSÍ obrátit, jinak by černá
	   bublina zmizela v černém pozadí; viz dark tokeny níž. */
	--color-tooltip-bg: #212121;
	--color-tooltip-text: #ffffff;

	/* Zatmavení pod modálem a bílá stránka dokumentu (PDF/HTML náhled). */
	--color-overlay: rgba(0, 0, 0, 0.45);
	--color-doc-page: #ffffff;

	/* JEDINÝ poloměr zaoblení v celé aplikaci — 5px, bez výjimky. Dřív jich
	   bylo pět (10, 5, 4, 3 a 999 u pilulek) a rozdíly nic neznamenaly. */
	--radius: 5px;
	/* Odsazení a mezery v ZÓNĚ OBSAHU — 20px, pokud není důvod jinak.
	   Chrom kolem obsahu (rail, headery, panel se stromem) má vlastní odladěný
	   64px modul s 10px rozestupy a tímhle se neřídí. */
	--space: 20px;
	--transition: 160ms ease;

	/* 64px modul = tlačítko 44 + 10px margin z obou stran */
	--rail-w: 64px;
	/* nav-panel fixní: 10 + 5×44 + 4×10 (gap) + 10 = 280px (5 tlačítek v toolbaru) */
	--nav-w: 280px;
	--header-h: 64px;
}

/* ---------- Barevné tokeny — dark ---------- */
:root[data-theme="dark"] {
	/* Material 2 dark: základ #121212 + bílý překryv podle elevace (řada Grey
	   je pro tmu nepoužitelná — pod Grey 900 už je jen čerň). Na tmavém není
	   vidět stín, proto hierarchii zón nese barva plochy. */
	--color-bg: #121212;
	--color-surface: #1e1e1e;
	--color-surface-alt: #2c2c2c;
	--color-rail: #1e1e1e;
	--color-nav: #232323;
	--color-header: #1e1e1e;
	--color-text: #ffffff;
	--color-text-muted: #9e9e9e;
	--color-border: #333333;

	/* Modrá je Indigo i v tmavém režimu, jen světlejší tón: Indigo 500 dává na
	   tmavém 2,7:1 (nečitelné), proto Material pro dark předepisuje řadu 200.
	   Tlačítko je pak světlé, takže text na něm musí být tmavý. */
	--color-accent: #9fa8da;
	--color-accent-hover: #c5cae9;
	--color-on-accent: #121212;

	/* Stejná logika jako v light, jen jinak vyrobená: Indigo 50 je na tmavém
	   moc světlá, proto je podbarvení PRŮSVITNÉ Indigo 200 (12 %). Přizpůsobí
	   se tak samo všem třem tmavým plochám (obsah, rail, strom). */
	--color-hover-bg: rgba(159, 168, 218, 0.12);
	--color-hover-text: var(--color-accent);
	--color-active-text: var(--color-accent);
	/* Na tmavém by plné Indigo 100 pálilo, proto průsvitné Indigo 200. */
	--color-focus-ring: rgba(159, 168, 218, 0.4);
	/* Popisek na tmavém: Grey 900 (#212121) je proti pozadí #121212 skoro
	   neviditelná, tady tedy Grey 700 — nejtmavší odstín, který se od ploch
	   aplikace (#1e1e1e a #2c2c2c) ještě odlepí. Text zůstává bílý. */
	--color-tooltip-bg: #616161;
	--color-danger: #d32f2f;
	--color-danger-hover: #b71c1c;
	--color-on-danger: #ffffff;

	/* Stavové barvy pro tmu: podklad 50 by na tmavém zářil, proto průsvitný
	   odstín 500 (16 %), a text v odstínu 200 místo 800/900. */
	--color-error-text: #ef9a9a;
	--color-error-bg: rgba(244, 67, 54, 0.16);
	--color-warning-text: #ffcc80;
	--color-warning-bg: rgba(255, 152, 0, 0.16);
	--color-success-text: #c5e1a5;
	--color-success-bg: rgba(139, 195, 74, 0.16);

	--color-overlay: rgba(0, 0, 0, 0.6);
	/* Stránka dokumentu zůstává bílá i v tmavém režimu — je to obsah, ne UI. */
	--color-doc-page: #ffffff;

}

/* ---------- Nativní prvky se řídí NAŠÍM tématem — ZÁVAZNÉ (v1.79.2) ----------
   Co si kreslí operační systém — rozbalený seznam `<select>`, zaškrtávátko,
   posuvník, kurzor v poli, doplněné přihlašovací údaje — se neřídí naším CSS,
   ale vlastnostní `color-scheme`. Dokud stálo jen `<meta color-scheme="light
   dark">`, znamenalo to „umíme obojí, vyber podle SYSTÉMU“: appka ve světlém
   režimu na tmavém Androidu nebo Windows rozbalila černý seznam a nakreslila
   tmavý posuvník.

   Hodnota proto visí na `data-theme`, tedy na tom, co appka opravdu vykreslí —
   včetně volby „podle systému“, kde atribut doplní `theme.js` ještě před
   vykreslením. Bez JS atribut chybí a appka je světlá; větev bez `data-theme`
   říká přesně to.

   `accent-color` je táž věc o krok dál: bez ní si zaškrtávátko vezme systémový
   akcent (na Windows modrý, na Androidu podle značky telefonu), takže by
   v aplikaci svítila barva, která v paletě není. */
:root {
	color-scheme: light;
	accent-color: var(--color-accent);
}

:root[data-theme="dark"] {
	color-scheme: dark;
}

/* ---------- Reset a základ ---------- */
* {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	height: 100%;
}

body {
	font-family: var(--font-sans);
	font-size: 12px;
	line-height: 1.5;
	color: var(--color-text);
	background: var(--color-bg);
	-webkit-font-smoothing: antialiased;
	/* Aplikace je shell přes 100vh a skrolují jen vnitřní plochy — stránka
	   jako celek nikdy. Bez tohohle Mermaid po dokreslení diagramů přidá na
	   konec body absolutní .mermaidTooltip, stránka je o pár px vyšší než
	   okno a Chrome ji nechá odskočit (nahoře utečou headery, dole vznikne
	   bílý proužek). Login má výjimku níž — na nízkém okně se musí doskrolovat
	   ke kartě; v tisku výjimku drží @media print. */
	overflow: hidden;
}

body.login-body {
	overflow: auto;
}

/* ---------- Typografická škála nadpisů ----------
   Text webu je 12px a nadpisy nad ním stoupají po dvou bodech: H1 18, H2 16,
   H3 14. H4–H6 zůstávají na velikosti textu a liší se jen tučností — hlouběji
   než tři úrovně nese hierarchii struktura dokumentu, ne velikost písma.
   Nadpisy mají těsnější řádkování než text (1.3 vs. 1.5): lámou se zřídka a
   při 1.5 by se rozpadaly. */
h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 0.4em;
	font-weight: 600;
	font-size: 12px;
	line-height: 1.3;
}

h1 {
	font-size: 18px;
}

h2 {
	font-size: 16px;
}

h3 {
	font-size: 14px;
}

a {
	color: var(--color-accent);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

.muted {
	color: var(--color-text-muted);
}

/* ---------- Skryté, ale místo si drží (v1.43.1) ----------
   Sdílená pomocná třída pro prvek, který nemá být vidět, ale jehož MÍSTO má
   zůstat obsazené — okolí se tím pádem nikam neposune. Proto `visibility`,
   ne `display: none`.

   Kde se to hodí: tlačítko, které v dané situaci nedává smysl, ale v jiné ano
   (kořen prostoru v NAV-B). Vypnuté tlačítko tam být nemá — trojí „nejde“ za
   sebou je nabídka bez nabídky —, jenže kdyby zmizelo úplně, toolbar by se
   na každé stránce skládal jinak.

   `visibility: hidden` zároveň prvek vyřadí z fokusu i z odečítače, takže
   `aria-hidden` a `tabindex="-1"` v šabloně jsou jen pás k šlím. */
.is-invisible {
	visibility: hidden;
}

.icon {
	font-size: 18px;
	line-height: 1;
}

/* ---------- Přepínač panelu (složená ikona) ----------
   Rám `dock-left` má vpravo výřez; do něj sedí malá šipka, která říká, co se
   po kliknutí stane. Panel je vidět → šipka doleva (zavře se); panel je skrytý
   → šipka doprava (otevře se). Přepíná je CSS podle `is-nav-hidden`, takže se
   ikona změní hned při kliknutí, bez zásahu JS. */
/* PEVNÝ BOX 18×18 (v1.51.1) — nutný, ne kosmetika. Bez rozměrů měl rám výšku
   podle font metrik MDI (na macOS 18,5px), a protože si je každý systém
   zaokrouhluje po svém, střed boxu se rozešel se středem výřezu v glyfu:
   na Windows šipka padala ke spodní hraně okýnka, na macOS sedávala na středu
   jen náhodou (nahlášeno 30. 7. 2026 z Windows). `line-height: 1` drží glyf
   přesně na velikosti boxu. */
.icon-dock {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	line-height: 1;
}

.icon-dock > .mdi {
	display: block;
	width: 18px;
	height: 18px;
	font-size: 18px;
	line-height: 1;
}

.icon-dock-arrow {
	position: absolute;
	/* Střed výřezu v pravé části glyfu — ne střed celé ikony. Obě hodnoty se
	   počítají z boxu výš, který je proto pevný. */
	top: 50%;
	left: 62%;
	transform: translate(-50%, -50%);
	display: inline-flex;
	line-height: 1;
	pointer-events: none;
}

.icon-dock-arrow .icon {
	font-size: 13px;
}

/* Ve výchozím stavu (panel viditelný) svítí šipka „zavřít“. */
.icon-dock-open {
	display: none;
}

.app.is-nav-hidden .icon-dock-close {
	display: none;
}

.app.is-nav-hidden .icon-dock-open {
	display: inline-flex;
}

/* Přepínač režimu: v light se ukazuje měsíc (klik → tmavý),
   v dark slunce (klik → světlý). */
.js-theme-toggle .icon-night {
	display: block;
}

.js-theme-toggle .icon-sunny {
	display: none;
}

:root[data-theme="dark"] .js-theme-toggle .icon-night {
	display: none;
}

:root[data-theme="dark"] .js-theme-toggle .icon-sunny {
	display: block;
}

/* ---------- Layout tří zón ---------- */
/* VÝŠKA JE `dvh`, NE `vh` — ZÁVAZNÉ (v1.50.2). Na telefonu `100vh` počítá
   s oknem, jako by lišty prohlížeče nebyly: spodní pruh (adresní řádek, lišta
   gest) pak leží PŘES spodek aplikace a poslední kus stránky není vidět —
   nahlášeno z telefonu při editaci poznámky. `dvh` se mění spolu s tím, jak
   se lišty vysouvají a zasouvají. `vh` zůstává o řádek výš jako záloha pro
   prohlížeč, který `dvh` nezná (Safari do 15.4, Chrome do 108). */
.app {
	display: grid;
	grid-template-columns: var(--rail-w) var(--nav-w) 1fr;
	grid-template-rows: var(--header-h) 1fr;
	height: 100vh;
	height: 100dvh;
}

/* Horní řádek = header, 2 buňky vedle sebe */
.header-a {
	grid-area: 1 / 1 / 2 / 3;
	border-right: 1px solid var(--color-border);
}

/* Ikonová tlačítka (header, rail, toolbar, přepínač na loginu) — jeden vzhled,
   jedno pravidlo. Dřív byly tři identické kopie. */
.header-btn,
.rail-btn,
.tool-btn,
.login-theme-btn,
.nav-b-btn {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 10px;
	color: var(--color-text);
	background: transparent;
	border: 0;
	border-radius: var(--radius);
	cursor: pointer;
	transition: background var(--transition), color var(--transition);
}

.header-btn:hover,
.rail-btn:hover,
.tool-btn:hover,
.login-theme-btn:hover,
.nav-b-btn:hover {
	color: var(--color-hover-text);
	background: var(--color-hover-bg);
}

.header-btn.is-active,
.rail-btn.is-active,
.tool-btn.is-active,
.login-theme-btn.is-active,
.nav-b-btn.is-active {
	color: var(--color-active-text);
	background: transparent;
}

.header-right {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-left: auto;
}

.header-b {
	grid-area: 1 / 3 / 2 / 4;
}

/* ---------- Uživatel v Header-B ----------
   Avatar s iniciálami + jméno a role pod sebou; celé je to jedno tlačítko,
   které otevírá menu (profil, odhlášení). Chová se jako ostatní ikonová
   tlačítka headeru, jen je širší. */
.user-menu-wrap {
	position: relative;
}

.user-button {
	display: flex;
	align-items: center;
	gap: 10px;
	height: 44px;
	padding: 0 10px 0 0;
	font: inherit;
	color: var(--color-text);
	background: transparent;
	border: 0;
	border-radius: var(--radius);
	cursor: pointer;
	transition: background var(--transition), color var(--transition);
}

.user-button:hover {
	color: var(--color-hover-text);
	background: var(--color-hover-bg);
}

/* Iniciály — stejná dvojice barev jako pilulka, jen ve čtverci. */
.user-avatar {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	margin-left: 5px;
	font-size: 12px;
	font-weight: 700;
	color: var(--color-accent);
	background: var(--color-surface-alt);
	border-radius: var(--radius);
}

.user-ident {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1.3;
	overflow: hidden;
}

.user-name {
	font-weight: 600;
	white-space: nowrap;
}

.user-role {
	color: var(--color-text-muted);
	white-space: nowrap;
}

/* Jméno pod myší nepřebarvujeme na accent celé — role zůstává tlumená. */
.user-button:hover .user-role {
	color: var(--color-text-muted);
}

/* Pozicování menu uživatele je níž, u ostatních kontextových menu — musí stát
   ZA .context-menu, jinak by ho přebilo jeho `position: fixed`. */

.header-a,
.header-b {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px;
	background: var(--color-header);
	border-bottom: 1px solid var(--color-border);
}

/* Logo v Header-A: značka „B“ (SVG přes mask) na středu railu + text „lueberry“.
   Header-A nemá padding, ať značka sedí v ose railu. Při sbalení panelu zůstane
   jen značka (na stejném místě, bez skoku). */
.header-a {
	padding: 0;
}

.app-logo {
	display: flex;
	align-items: center;
	height: 100%;
	color: var(--color-text);
	text-decoration: none;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.2px;
	overflow: hidden;
}

.app-logo:hover {
	text-decoration: none;
	color: var(--color-accent);
}

/* Značka „B“ — 64px slot (šířka railu), SVG maska (přebarvitelná přes currentColor). */
.logo-mark {
	flex-shrink: 0;
	display: inline-block;
	width: var(--rail-w);
	height: 32px;
	font-size: 0;
	background-color: currentColor;
	-webkit-mask: url("../img/logo-blueberry.svg") center / contain no-repeat;
	mask: url("../img/logo-blueberry.svg") center / contain no-repeat;
}

/* Text „lueberry“ se táhne ke značce: glyf je 24px široký (32 × poměr SVG 0,75)
   uprostřed 64px slotu, takže vpravo od něj zbývá 20px. Mezera má být 0,06×
   velikost textu (20 × 0,06 = 1,2px), proto margin 1,2 − 20 = −18,8px.
   Platí i pro tablet — Header-B nese týž .app-logo. */
.logo-rest {
	white-space: nowrap;
	margin-left: -18.8px;
}

/* Sbalený panel → jen značka, text „lueberry“ zmizí (značka zůstává na místě). */
.app.is-nav-hidden .logo-rest {
	display: none;
}

/* Dolní řádek = 3 zóny */
.rail {
	grid-area: 2 / 1 / 3 / 2;
}

.nav-panel {
	grid-area: 2 / 2 / 3 / 3;
}

.content {
	grid-area: 2 / 3 / 3 / 4;
}

/* Skrytý boční (navigační) panel — 2 sloupce */
.app.is-nav-hidden {
	grid-template-columns: var(--rail-w) 1fr;
}

.app.is-nav-hidden .nav-panel {
	display: none;
}

.app.is-nav-hidden .header-a {
	grid-area: 1 / 1 / 2 / 2;
}

.app.is-nav-hidden .header-b {
	grid-area: 1 / 2 / 2 / 3;
}

.app.is-nav-hidden .content {
	grid-area: 2 / 2 / 3 / 3;
}

/* Zóna 1 — boční panel s ikonkami */
.rail {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	padding: 10px;
	background: var(--color-rail);
	border-right: 1px solid var(--color-border);
}

.rail-group {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Zóna 2 — kontextový navigační panel */
.nav-panel {
	display: flex;
	flex-direction: column;
	padding: 0;
	background: var(--color-nav);
	border-right: 1px solid var(--color-border);
	overflow: hidden;
}

/* Pevný nav-header (toolbar) nahoře, jen strom/list skroluje */
.nav-toolbar {
	flex-shrink: 0;
}

.nav-tree {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
}

/* Toolbar nad seznamem (tvorba / filtrování / oblíbené) — à la Obsidian */
.nav-toolbar {
	display: flex;
	justify-content: space-between;
	padding: 10px;
	border-bottom: 1px solid var(--color-border);
}

.nav-toolbar-left,
.nav-toolbar-right {
	display: flex;
	gap: 10px;
}

/* Toolbar je flex — tlačítka se nesmí stlačit. */
.tool-btn {
	flex-shrink: 0;
}

/* Aktivní stav nese jen barvu ikony; podbarvení patří hoveru — a to i tehdy,
   když uživatel najede na položku, která je zrovna aktivní. */
.header-btn.is-active:hover,
.rail-btn.is-active:hover,
.tool-btn.is-active:hover,
.login-theme-btn.is-active:hover {
	background: var(--color-hover-bg);
}





/* Zóna 3 — obsah */
/* Obsah je sloupec: nahoře pevný NAV-B, pod ním skrolující plocha — stejné
   uspořádání jako v navigačním panelu (NAV-A + strom). */
.content {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	/* Zóna je kontejner pro dotazy na šířku — podle ní se pozná, jestli se vedle
	   sloupce vejde obsah poznámky (viz `@container` u `.toc-rail`). */
	container-type: inline-size;
}

/* NAV-B — toolbar obsahu. Vzhledově shodný s NAV-A v panelu, ale jde přes
   CELOU šířku zóny; omezení na 768px se ho záměrně netýká. */
.nav-b {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-shrink: 0;
	min-height: var(--header-h);
	padding: 10px;
	/* Splývá s plochou obsahu (light bílá / dark základ), ne se šedí chromu. */
	background: var(--color-bg);
	border-bottom: 1px solid var(--color-border);
}

.nav-b-left,
.nav-b-right {
	display: flex;
	gap: 10px;
}

/* Mazání je červené i tady — stejná Red 700 jako tlačítko a položka v ⋮ menu.
   Pravidlo stojí za sdíleným .nav-b-btn:hover, aby ho barvou přebilo. */
.nav-b-btn-danger {
	color: var(--color-danger);
}

/* Uložit je zelené, zahodit změny červené (to jede přes sdílené
   `.nav-b-btn-danger` výš — zahození práce je destruktivní akce jako mazání).
   Barvu nese ikona, ne vyplněná plocha; plný obdélník by v řadě ikonových
   tlačítek trčel.

   Odstín je `--color-success-text` — v celé aplikaci má zelená JEDEN odstín
   (Light Green 900, v tmavém 200). Rozhodnuto 28. 7. 2026: samostatný, světlejší
   token pro ikony (700) byl zvážen a zamítnut ve prospěch jednotnosti. */
.nav-b-btn-success {
	color: var(--color-success-text);
}

/* Barva zůstává, přibude jen jemný podklad — stejný princip jako u mazání. */
.nav-b-btn-success:hover {
	color: var(--color-success-text);
	background: var(--color-success-bg);
}

.nav-b-btn-danger:hover {
	color: var(--color-danger-hover);
	background: var(--color-error-bg);
}

/* Na kraji seznamu není kam listovat — tlačítko zůstává na místě, jen zešedne. */
/* Vypnuté tlačítko vypadá stejně v obou toolbarech — v NAV-B (kraj seznamu,
   dokument bez editace) i v NAV-A, kde od v1.33.0 zešednou akce nad
   poznámkami na stránkách, které poznámky neukazují. */
.nav-b-btn[disabled],
.tool-btn[disabled] {
	color: var(--color-text-muted);
	opacity: 0.4;
	cursor: default;
}

.nav-b-btn[disabled]:hover,
.tool-btn[disabled]:hover {
	color: var(--color-text-muted);
	background: transparent;
}

/* ---------- Koš v railu (v1.43.0) ----------
   Ikona nese stav sama: prázdný koš je ztlumený a NENÍ odkaz (není kam jít),
   plný svítí červeně s odklopeným víkem. Prázdná podoba je `<span>`, ne odkaz,
   takže vypnutí nejde přes [disabled] — stav drží třídy. */
.rail-btn-trash.is-empty {
	color: var(--color-text-muted);
	opacity: 0.4;
	cursor: default;
}

.rail-btn-trash.is-empty:hover {
	color: var(--color-text-muted);
	background: transparent;
}

.rail-btn-trash.is-full {
	color: var(--color-danger);
}

.rail-btn-trash.is-full:hover {
	color: var(--color-danger-hover);
	background: var(--color-error-bg);
}

/* JEDINÁ šířka obsahu — platí pro všechny stránky bez rozdílu (poznámka,
   přehled, nastavení, administrace, nápověda, hledání). 768px = 12 × 64px
   modul. Odsazení zatím žádné: obsah se teprve tvoří a chceme ho vidět syrový. */
/* Skroluje CELÁ šířka zóny, aby posuvník seděl u pravého okraje okna a ne
   uprostřed stránky na hraně textového sloupce. */
.content-scroll {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
}

/* Sloupec sedí NA STŘEDU zóny (v1.47.0). Do v1.46.0 byl u levého kraje —
   na širokém monitoru pak celý text visel u panelu a vpravo zbývala prázdná
   plocha. Centrování je jediné pravidlo (`margin-inline: auto`) a **tabletu ani
   mobilu se nedotkne**: tam je zóna užší než 768px, takže se sloupec roztáhne
   na celou šířku a auto nemá co rozdělovat. */
.content-inner {
	max-width: 768px;
	margin-inline: auto;
	padding: var(--space);
}

.page-header {
	margin-bottom: 22px;
}


.page-sub {
	margin: 0;
	color: var(--color-text-muted);
}

/* ---------- Panely ---------- */
.panels {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--space);
}

/* Čtyři seznamy dashboardu: 2×2 a všechny stejně vysoké — tlačítko „zobrazit
   vše“ drží dole, takže panely nekončí každý jinde. */
/* `grid-auto-rows: 1fr` srovná i řádky mezi sebou — bez toho by spodní dvojice
   byla nižší než horní, protože každý řádek gridu se jinak řídí svým obsahem. */
.panels-dash {
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: 1fr;
}

.panel-list {
	display: flex;
	flex-direction: column;
}

.panel-list .recent-list {
	flex: 1;
}

.panel-more {
	align-self: flex-start;
	margin-top: 12px;
}

@media (max-width: 900px) {
	.panels-dash {
		grid-template-columns: 1fr;
	}
}

.panel {
	padding: var(--space);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

/* Boxy pod sebou dělí táž mezera jako všechno ostatní v obsahu (--space).
   Platí jen pro boxy stojící PŘÍMO v obsahu (profil, administrace, nápověda);
   panely v mřížce přehledu si rozestupy řeší přes `gap`, takže by jim margin
   rozhodil stejně vysoké řádky. Poslední box mezeru pod sebou nepotřebuje —
   tu už drží odsazení obsahu. */
.content-inner > .panel {
	margin-bottom: var(--space);
}

.content-inner > .panel:last-child {
	margin-bottom: 0;
}


/* Seznamy v přehledu (poslední otevřené / vytvořené) */
.recent-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.recent-item {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 6px 0;
	border-bottom: 1px solid var(--color-border);
}

.recent-item:last-child {
	border-bottom: 0;
}

.recent-link {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.recent-time {
	flex-shrink: 0;
	font-size: 12px;
}

/* ---------- Tlačítko "nahoru" ---------- */
.to-top {
	position: fixed;
	right: 22px;
	bottom: 22px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	color: var(--color-on-accent);
	background: var(--color-accent);
	border: 0;
	border-radius: var(--radius);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}

.to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.to-top:hover {
	background: var(--color-accent-hover);
}

/* ---------- Strom prostoru — RESET (jen text; formu stavíme postupně) ---------- */
/* Levý padding 16 (10 + 6) = prostor pro −6px přesah aktivní pilulky, ať není namáčklá. */
.nav-tree {
	font-size: 12px;
	padding: 10px 10px 10px 16px;
}

.tree,
.tree ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Obsah otevřené složky: odsazený na 23px (pod název) + tenká vodicí linka
   na ose chevronu (~8px). margin 8 + border 1 + padding 14 = obsah na 23. */
.tree ul {
	margin-left: 8px;
	padding-left: 14px;
	border-left: 1px solid var(--color-border);
}

.tree summary {
	display: flex;
	align-items: center;
	cursor: pointer;
	list-style: none;
	font-weight: 600;
	padding: 5px 6px;
	margin-left: -6px;
	border-radius: var(--radius);
}

.tree summary::-webkit-details-marker {
	display: none;
}

/* Chevron před složkou — objekt 18×18px (right zavřená / down otevřená). */
.tree summary::before {
	content: "\F0142"; /* chevron-right */
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	margin-right: 5px;
	font: normal normal 18px/1 "Material Design Icons";
	color: var(--color-text-muted);
}

.tree details[open] > summary::before {
	content: "\F0140"; /* chevron-down */
}

.tree-name {
	flex: 1;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Název složky je odkaz na její stránku — dědí barvu řádku, ne barvu odkazů. */
.tree-folder-link {
	color: var(--color-text);
}

.tree-folder-link:hover {
	text-decoration: none;
}

/* Otevřená složka se značí stejně jako otevřená poznámka: barvou a tučností. */
.tree-folder-link.is-active {
	color: var(--color-active-text);
}

/* Modal s delším výpisem — seznam smí být dlouhý, proto vlastní scroll. */
.modal-list {
	max-width: 520px;
}

.modal-list .recent-list {
	max-height: 60vh;
	max-height: 60dvh;
	overflow-y: auto;
}

.tree-row {
	display: flex;
	align-items: center;
	padding: 5px 6px;
	margin-left: -6px;
	border-radius: var(--radius);
}

.tree-link {
	display: block;
	flex: 1;
	color: var(--color-text);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* Aktivní/vybraná poznámka = modrá a tučná, bez podbarvení. */
.tree-row.is-active {
	background: transparent;
}

.tree-link.is-active {
	color: var(--color-active-text);
	font-weight: 600;
}

/* Hover kdekoli na řádku (vč. ⋮) → modrý text a podbarvení Indigo 50.
   Platí i na aktivním řádku, který sám podbarvení nemá. */
.tree summary:hover,
.tree-row:hover {
	background: var(--color-hover-bg);
}

.tree summary:hover .tree-name,
.tree-row:hover .tree-link {
	color: var(--color-hover-text);
	text-decoration: none;
}

/* Ikona typu souboru (PDF) — vlevo od ⋮ a stejně jako ono skrytá do hoveru,
   aby strom v klidu zůstal čistým seznamem názvů.

   Skrývá se JEN tam, kde hover existuje (viz `.tree-action` níž). */
.tree-type {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	margin-right: 6px;
	color: var(--color-text-muted);
}

@media (hover: hover) {
	.tree-type {
		opacity: 0;
	}

	.tree-row:hover .tree-type {
		opacity: 1;
	}
}

.tree-type .icon {
	font-size: 16px;
}

/* ⋮ tlačítko zůstává funkční (otevírá menu), jen minimální — skryté do hoveru. */
/* ⋮ NAD POLOŽKOU STROMU — ZÁVAZNÉ: viditelné tam, kde není hover (v1.57.0).
 *
 * Do v1.57.0 mělo `opacity: 0` natvrdo a odkrývalo se jen přes `:hover`
 * a `:focus-visible`. Na telefonu ani tabletu **hover neexistuje**, takže tam
 * ⋮ nešlo vidět vůbec — a s ním ani jediná cesta k přejmenování, přesunu,
 * smazání a oblíbeným u položky, kterou uživatel zrovna nemá otevřenou.
 * (⋮ v NAV-B pokrývá jen otevřený soubor.) Mobilní verze byla přitom od
 * v1.41.2 vedená jako hotová; ověřovalo se čtení obsahu, ne správa stromu.
 *
 * Řeší to `@media (hover: hover)`: schovávání je **výsada zařízení s myší**,
 * kde se dá kdykoli odkrýt pohybem. Kde myš není, jsou akce vidět rovnou.
 * Dělá to CSS samo, bez JS a bez detekce zařízení v PHP. */
.tree-action {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	padding: 0;
	color: var(--color-text-muted);
	background: transparent;
	border: 0;
	cursor: pointer;
}

@media (hover: hover) {
	.tree-action {
		opacity: 0;
	}

	.tree summary:hover .tree-action,
	.tree-row:hover .tree-action {
		opacity: 1;
	}
}

/* A kde není hover, nestačí ⋮ jen UKÁZAT — musí se dát i TREFIT. Glyf měří
   18×19 px, což je na prst málo; dostane proto míru akčního tlačítka (44px,
   závazná od v1.28.0). Roste jen plocha k dotyku, ikona zůstává stejně velká,
   takže se vzhled nemění — jen řádek stromu na dotykovém zařízení povyroste,
   což je tam správně: 29px řádky se prstem trefují špatně i samy o sobě. */
@media (hover: none) {
	.tree-action {
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
	}
}

.tree-action .icon {
	font-size: 18px;
}

/* Hover na ⋮ → tečky accent (název se obarví přes hover řádku níže). */
.tree-action:hover {
	color: var(--color-accent);
}

/* ---------- Kontextová menu (JEDEN vzhled pro celou aplikaci) ----------
   Platí bez rozdílu pro menu u položky stromu (⋮), filtr v toolbaru i menu
   uživatele v Header-B. Nová vyskakovací nabídka = tyhle třídy, ne vlastní
   pravidla — jinak se vzhledy během chvíle rozejdou.

   Menu je HOLÝ SEZNAM položek: žádné hlavičky, dělicí linky ani ikony. Když
   takový prvek někde přibude, musí přibýt ve VŠECH menu, jinak přestanou být
   stejná. Podrobně: docs/documentation.md → Kontextová menu. */
.context-menu {
	position: fixed;
	z-index: 60;
	min-width: 160px;
	padding: 4px;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

.context-menu[hidden] {
	display: none;
}

.context-menu-item {
	display: block;
	width: 100%;
	padding: 8px 10px;
	font: inherit;
	font-size: 12px;
	text-align: left;
	color: var(--color-text);
	background: transparent;
	border: 0;
	border-radius: var(--radius);
	cursor: pointer;
}

.context-menu-item:hover {
	background: var(--color-surface-alt);
	text-decoration: none;
}

.context-menu-item.is-active {
	color: var(--color-active-text);
}

/* Mazání je červené i v menu — stejná Red 700 jako tlačítko Smazat. */
.context-menu-danger {
	color: var(--color-danger);
}

/* Položka může být i tlačítkem ve formuláři (odhlášení jde POSTem) — formulář
   sám nesmí do menu vnést vlastní mezeru. */
.context-menu form {
	margin: 0;
}

/* ---------- Popisek (tooltip) — v1.76.0 ----------

   JEDNA bublina pro celou aplikaci, stejně jako je jedno kontextové menu:
   leží na konci <body> a `assets/js/tooltip.js` do ní jen sype text a posouvá
   ji k prvku. Kdyby si bublinu nesl každý prvek sám, byla by v DOM stokrát
   a uvnitř skrolující plochy by se ořízla.

   Pozicuje se `fixed`, protože stránka jako celek neskroluje (skroluje zóna
   obsahu) — souřadnice tedy chodí rovnou z getBoundingClientRect().

   Bez stínu (závazné pravidlo) — bublinu odděluje od plochy sama barva. */
.tooltip {
	position: fixed;
	z-index: 90;
	max-width: 260px;
	padding: 8px 12px;
	font-size: 12px;
	line-height: 1.35;
	color: var(--color-tooltip-text);
	background: var(--color-tooltip-bg);
	border-radius: var(--radius);
	/* Ukazuje se pod kurzorem, ale sama myš nezajímá — bez tohohle by bublina
	   pod kurzorem vyvolala mouseleave na prvku a začala blikat. */
	pointer-events: none;
}

.tooltip[hidden] {
	display: none;
}

/* ŠIPKA je trojúhelník z okrajů, ne otočený čtvereček: čtvereček by se musel
   podbarvit i pootočit a na okraji bubliny by prosvítal její poloměr.
   Směr určuje třída, kterou dává JS podle toho, kam se bublina vešla. */
.tooltip::after {
	content: "";
	position: absolute;
	left: var(--tooltip-arrow, 50%);
	width: 0;
	height: 0;
	margin-left: -6px;
	border: 6px solid transparent;
}

/* Bublina NAD prvkem — šipka dolů, tedy horní okraj obarvený. */
.tooltip.is-above::after {
	top: 100%;
	border-top-color: var(--color-tooltip-bg);
	border-bottom-width: 0;
}

/* Bublina POD prvkem (nahoře nebylo místo) — šipka nahoru. */
.tooltip.is-below::after {
	bottom: 100%;
	border-bottom-color: var(--color-tooltip-bg);
	border-top-width: 0;
}

/* V tisku popisek nemá co dělat — je to pomůcka k ovládání, ne obsah. */
@media print {
	.tooltip {
		display: none;
	}
}

/* Menu uživatele je totéž kontextové menu, jen nevisí u kurzoru, ale pevně pod
   svým tlačítkem v Header-B. Proto jediné dvě odchylky: pozicování a šířka.
   Pravidlo MUSÍ zůstat za .context-menu, jinak ho přebije `position: fixed`. */
.user-menu {
	position: absolute;
	right: 0;
	top: calc(100% + 6px);
	z-index: 40;
	min-width: 220px;
}

/* Rychlý přepínač prostoru v Header-B (v1.46.0) — visí pod svou ikonou
   stejně jako menu uživatele, jen je užší (nese jen názvy prostorů). */
.space-quick-wrap {
	position: relative;
}

.space-quick-menu {
	position: absolute;
	right: 0;
	top: calc(100% + 6px);
	z-index: 40;
	min-width: 180px;
}

/* ---------- Pilulka (pill / badge) ---------- */
.pill {
	display: inline-block;
	padding: 2px 10px;
	font-size: 12px;
	font-weight: 600;
	color: var(--color-accent);
	background: var(--color-surface-alt);
	border-radius: var(--radius);
}

/* ---------- Vyrenderovaná poznámka ---------- */
.note {
}

/* Hlavička poznámky: drobečky → název → data → dělicí linka. */
.note-header {
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--color-border);
}

/* ---------- Drobečková navigace ----------
   Je na začátku obsahu KAŽDÉ stránky a celá klikací — včetně posledního
   článku. Začíná názvem aplikace, který vede na kořen prostoru. */
.crumbs {
	margin: 0 0 4px;
	color: var(--color-text-muted);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.crumb {
	color: var(--color-text-muted);
}

.crumb:hover {
	color: var(--color-hover-text);
	text-decoration: none;
}

/* Oddělovač patří k výpisu, ne k odkazu — proto nereaguje na najetí. */
.crumb-sep {
	margin: 0 6px;
	color: var(--color-border);
}

.note-title {
	margin: 0 0 4px;
}



.note-meta {
	margin: 8px 0 0;
	font-size: 12px;
}

.note-content {
	line-height: 1.5;
	/* Dlouhý nezalomitelný řetězec (cesta v registrech, URL) nesmí roztáhnout
	   stránku do šířky — na mobilu pak ujíždí celý obsah. */
	overflow-wrap: break-word;
}

/* ---------- Obsah poznámky (TOC, v1.48.0) ----------
   Pruh s nadpisy H1–H3 vedle textu. Stojí **mimo tok** (absolutně vpravo od
   sloupce), takže se text nikam neposune a zůstává na středu zóny — tím se
   liší od pokusu z 27. 7. 2026, kdy to byl box uvnitř textu, který ho obtékal
   a vzhledově se neosvědčil.

   VÝCHOZÍ STAV JE SKRYTO — pruh i jeho vypínač v NAV-B. Zapne je až kontejnerový
   dotaz níž, tedy jen tam, kde se pruh do zóny vejde. */
.toc-rail,
.js-toc-toggle {
	display: none;
}

/* Kotva pro absolutní pruh; jinak by se počítal od zóny, ne od sloupce. */
.note {
	position: relative;
}

/* Rozhoduje ŠÍŘKA ZÓNY, ne okna (`@container`, ne `@media`) — zóna je jediné
   místo, kde se TOC může vejít, a její šířka nezávisí jen na okně: roste
   i skrytím panelu se stromem. Dotaz na okno by pruh na širokém okně se
   skrytým panelem zbytečně schoval.

   Hranice 1208px je ODVOZENÁ: sloupec 768 + na každou stranu 200 (pruh) + 20
   (mezera), tedy 768 + 2 × 220. Pod tím by pruh vylezl ze zóny a udělal
   vodorovný posuvník. Kdyby se změnila šířka sloupce nebo pruhu, PŘEPOČÍTAT.

   Kontejner je `.content`, takže totéž pravidlo řídí i **vypínač v NAV-B**:
   kde se pruh nevejde, není co zapínat. Mobil a tablet mají zónu hluboko pod
   hranicí, takže tam TOC nemůže vzniknout ani omylem. */
@container (min-width: 1208px) {
	/* Odsazení od horní hrany platí HNED, ne až po odskrolování: box tak stojí
	   od začátku tam, kde při skrolování zůstane, a nikam se neposouvá. */
	.toc-rail {
		display: block;
		position: absolute;
		left: 100%;
		top: var(--space);
		bottom: 0;
		width: 200px;
		margin-left: var(--space);
	}

	.js-toc-toggle {
		display: grid;
	}

	/* Vypnuto vypínačem v NAV-B (cookie `toc_hidden`, třídu nasazuje server). */
	.app.is-toc-hidden .toc-rail {
		display: none;
	}

	/* Box jako každý jiný v obsahu — táž plocha, rámeček i zaoblení jako `.panel`.
	   Při skrolování zůstává na očích, a to na TÉŽE pozici, kde stojí od začátku:
	   odsazený od hrany zóny o tutéž mezeru, jakou má text (`--space`). */
	.toc {
		position: sticky;
		top: var(--space);
		max-height: calc(100vh - var(--header-h) * 2 - var(--space) * 2);
		max-height: calc(100dvh - var(--header-h) * 2 - var(--space) * 2);
		overflow-y: auto;
		padding: var(--space);
		background: var(--color-surface);
		border: 1px solid var(--color-border);
		border-radius: var(--radius);
	}

	.toc-title {
		margin: 0 0 8px;
		font-size: 12px;
		text-transform: uppercase;
		letter-spacing: 0.4px;
		color: var(--color-text-muted);
	}

	.toc-list {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	/* ŘÁDEK JE TÝŽ JAKO VE STROMU: stejná míra (5/6px se záporným marginem, aby
	   text lícoval s okrajem boxu), stejné zaoblení, stejné podbarvení pod myší
	   a stejné oříznutí dlouhého názvu na jednu řádku. Strom a obsah poznámky
	   jsou dva seznamy téhož druhu — nemají vypadat každý jinak. */
	.toc-item a {
		display: block;
		padding: 5px 6px;
		margin-left: -6px;
		border-radius: var(--radius);
		color: var(--color-text);
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.toc-item a:hover {
		color: var(--color-hover-text);
		background: var(--color-hover-bg);
		text-decoration: none;
	}

	/* Úroveň nadpisu nese odsazení, ne velikost písma — pruh má být klidný
	   seznam, ne druhá typografická škála. Krok 14px je týž jako zanoření
	   ve stromu (`.tree ul` má padding-left 14px). */
	.toc-level-2 a {
		padding-left: 14px;
	}

	.toc-level-3 a {
		padding-left: 28px;
	}
}

/* Nadpis patří k tomu, co po něm následuje, takže potřebuje odstup od textu
   NAD sebou — a všechny úrovně stejně. Dosud ho měly jen H2 a H3, takže se H1
   lepil na předchozí odstavec a H4–H6 na sebe navzájem. Mezera je v `em`, takže
   roste s velikostí nadpisu (H1 27px … H6 18px). */
.note-content h1,
.note-content h2,
.note-content h3,
.note-content h4,
.note-content h5,
.note-content h6 {
	margin-top: 1.5em;
}

/* První prvek poznámky nemá nad sebou co odsazovat. */
.note-content > :first-child {
	margin-top: 0;
}

.note-content p {
	margin: 0 0 1em;
}

/* Odrážkový i číslovaný seznam mají STEJNÉ odsazení — ať se dokument nezalamuje
   pokaždé jinak podle toho, jaký typ seznamu zrovna je.

   Hodnotu určuje ten náročnější z obou: marker číslovaného seznamu roste s
   číslem. Změřeno v Open Sans 12px — „9.“ 10px, „99.“ 17px, „999.“ 24px,
   „1000.“ 31px — takže při dřívějších 1.4em (17px) by trojciferná položka
   vylezla mimo textový sloupec. 2.9em (35px) pokryje i čtyřciferný seznam. */
.note-content ul,
.note-content ol {
	margin: 0 0 1em;
	padding-left: 2.9em;
}

.note-content li {
	margin: 3px 0;
	/* Dlouhé slovo nebo URL v položce se zalomí, místo aby roztáhlo řádek. */
	overflow-wrap: anywhere;
}

/* Odstavec uvnitř položky = víceřádková položka seznamu. Poslední za sebou
   mezeru nedělá, tu už nese sama položka. */
.note-content li > p {
	margin: 0.5em 0;
}

.note-content li > p:last-child {
	margin-bottom: 0;
}

/* Podseznam patří ke své položce — nesmí za sebou nechat odstavcovou mezeru
   jako seznam na konci textu. */
.note-content li > ul,
.note-content li > ol {
	margin: 3px 0 0;
}

/* Task-list je jediná výjimka z jednotného odsazení, a to z věcného důvodu:
   marker nemá vůbec (místo něj je checkbox), takže by 2.9em jen odsunulo
   políčka od kraje. Vnořený task-list odsazení naopak potřebuje — jinak by
   nebylo poznat, že je vnořený. */
.note-content .task-list .task-list {
	padding-left: 1.4em;
}

/* Citace je odstavec se svislou čárou, ne plocha — proto se sází v `em` jako
   text a neřídí se `--space`. S 20px nahoře a dole by se odtrhla od textu,
   ke kterému patří. */
.note-content blockquote {
	margin: 0 0 1em;
	padding: 4px 16px;
	border-left: 3px solid var(--color-accent);
	color: var(--color-text-muted);
}

/* Odsazení uvnitř citace má být nahoře i dole stejné (v1.79.3). Mezera mezi
   odstavci patří MEZI ně, ne za poslední — a protože citace má padding, mezera
   se ven neslije, ale zůstane uvnitř: dole pak bylo 4px + 1em = 16px proti 4px
   nahoře. Nadpis v citaci by udělal totéž obráceně (má `margin-top: 1.5em`).

   Je to táž oprava, jakou už má víceřádková položka seznamu
   (`li > p:last-child`) a první prvek poznámky (`.note-content > :first-child`)
   — jen na místě, kde chyběla. */
.note-content blockquote > :first-child {
	margin-top: 0;
}

.note-content blockquote > :last-child {
	margin-bottom: 0;
}

/* ODKAZ VEN Z APLIKACE (v1.72.0) — ikona `open-in-new` na konci.

   Nová záložka je změna, kterou uživatel nečeká, pokud ji odkaz nepřizná
   dopředu; tohle je ta přiznávka. Ikona sedí UVNITŘ odkazu, takže se podtrhává
   i zvýrazňuje spolu s textem a klik na ni vede tam, kam odkaz.

   Třídu `.ext-link` dává odkazům z poznámek `mdLinkAttrs()`; v šablonách
   (nápověda) se píše ručně — pravidlo je tedy jedno pro obojí.

   `white-space: nowrap` na ikoně drží značku u posledního slova — bez něj se
   při zalomení řádku odtrhne a visí na dalším řádku sama. */
.ext-link .icon {
	font-size: 0.85em;
	margin-left: 0.15em;
	vertical-align: baseline;
	white-space: nowrap;
}

.note-content code {
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	font-size: 12px;
	padding: 1px 5px;
	background: var(--color-surface-alt);
	border-radius: var(--radius);
}

.note-content pre {
	margin: 0 0 1em;
	padding: var(--space);
	background: var(--color-surface-alt);
	border-radius: var(--radius);
	overflow-x: auto;
}

.note-content pre code {
	padding: 0;
	background: none;
}

/* ---------- Zvýraznění syntaxe (highlight.js, v1.54.0) ----------
   BARVY JSOU NAŠE, ne z tématu knihovny — a je to podmínka, ne preference.
   highlight.js dodává ~250 hotových témat, ale každé nese i vlastní pozadí
   a pevné barvy: tmavé téma by v light režimu udělalo černý blok v bílé
   stránce a naopak. Tady se mapují jen třídy `.hljs-*` na tokeny palety,
   takže se zvýraznění **přepíná se světlým a tmavým režimem samo** — včetně
   volby „podle systému“, kterou by `prefers-color-scheme` v cizím CSS neuměl
   respektovat (appka řídí téma atributem `data-theme`).

   Plocha bloku zůstává `--color-surface-alt` jako u kódu bez zvýraznění,
   takže se přepnutím jazyka nic nikam neposune.

   Rozdělení odstínů: klíčová slova akcentem, řetězce zeleně, čísla oranžově,
   komentáře ztlumeně, značky a selektory červeně. Vychází to z toho, jak barvy
   v aplikaci fungují jinde — žádné nové tokeny nevznikly. */
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-doctag,
.hljs-meta .hljs-keyword {
	color: var(--color-accent);
	font-weight: 600;
}

.hljs-string,
.hljs-regexp,
.hljs-addition,
.hljs-attribute,
.hljs-meta .hljs-string {
	color: var(--color-success-text);
}

.hljs-number,
.hljs-symbol,
.hljs-bullet,
.hljs-quote,
.hljs-selector-attr,
.hljs-selector-pseudo {
	color: var(--color-warning-text);
}

.hljs-name,
.hljs-selector-id,
.hljs-selector-class,
.hljs-section,
.hljs-deletion,
.hljs-variable,
.hljs-template-variable {
	color: var(--color-error-text);
}

.hljs-title,
.hljs-title.class_,
.hljs-title.function_,
.hljs-type,
.hljs-built_in,
.hljs-class .hljs-title {
	color: var(--color-text);
	font-weight: 600;
}

/* Komentář je poznámka, ne kód — ztlumený a kurzívou, jako všude jinde
   v aplikaci (`.muted`). */
.hljs-comment,
.hljs-meta,
.hljs-tag {
	color: var(--color-text-muted);
}

.hljs-comment {
	font-style: italic;
}

/* Zvýraznění se tiskne černobíle: barvy z palety jsou v tisku přebité
   (viz @media print), takže se o to nemusí starat nic dalšího. */
.hljs-emphasis {
	font-style: italic;
}

.hljs-strong {
	font-weight: 700;
}

.note-content img {
	max-width: 100%;
	height: auto;
}

.note-content hr {
	border: 0;
	border-top: 1px solid var(--color-border);
	margin: 1.4em 0;
}

/* Marker zalomení stránky je od v1.90.0 VIDĚT i na obrazovce — tlumená
   přerušovaná čára s popiskem uprostřed. Do té doby byl `display: none`,
   takže se autor na výsledek nemohl připravit jinak než tiskovým náhledem.
   V tisku se nic nemění: tam marker jen zalomí a sám nic nekreslí
   (viz @media print).

   Popisek stojí v `data-label` u značky, ne tady — text patří do PHP. */
hr.page-break {
	display: block;
	position: relative;
	height: 0;
	margin: 32px 0;
	border: 0;
	border-top: 1px dashed var(--color-border);
	overflow: visible;
}

hr.page-break::after {
	content: attr(data-label);
	position: absolute;
	top: 0;
	left: 50%;
	/* Čára jde středem popisku; pozadí ji pod textem překryje. */
	transform: translate(-50%, -50%);
	padding: 0 8px;
	background: var(--color-surface);
	color: var(--color-text-muted);
	font-size: 12px;
	white-space: nowrap;
}

.note-content del {
	color: var(--color-text-muted);
}

/* ---------- Vzorce (KaTeX) a diagramy (Mermaid) ----------
   Renderer vyrobí jen obal s LaTeXem / zdrojem diagramu; vykreslení dělá
   knihovna z vendors/, načtená jen u poznámky, která je potřebuje. Dokud
   nedoběhne (nebo když JS chybí), zůstane v dokumentu čitelný zdroj. */
.math-block {
	margin: 0 0 1em;
	padding: 4px 0;
	overflow-x: auto;
	text-align: center;
}

/* Nevykreslený vzorec je pořád LaTeX — ať je poznat, že jde o zápis.
   Po vykreslení si KaTeX nese vlastní písmo, takže se tohle neuplatní.

   *(Do v1.60.0 tu stálo `:not(.katex-display-rendered)`. Tu třídu ale nikdo
   nenasazoval — ani renderer, ani `render-extras.js` —, takže podmínka platila
   vždycky a nefiltrovala nic.)* */
.math-block {
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

/* INLINE VZOREC `$…$` (v1.83.0) zůstává v řádku textu — žádný `display`
   ani `margin`, jinak by větu roztrhl. Dokud KaTeX nedoběhne, je z něj
   LaTeX ve stejném písmu jako blokový vzorec, ať je poznat, že jde o zápis.
   Dlouhý vzorec se smí zalomit, aby nerozšířil sloupec. */
.math-inline {
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	overflow-wrap: anywhere;
}

/* Vzorec, který KaTeX odmítl přeložit. */
.math-error {
	color: var(--color-error-text);
}

/* Zdroj diagramu vypadá jako blok kódu; po vykreslení ho nahradí SVG. */
pre.mermaid {
	margin: 0 0 1em;
	padding: var(--space);
	background: var(--color-surface-alt);
	border-radius: var(--radius);
	overflow-x: auto;
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	font-size: 12px;
	line-height: 1.5;
}

/* Hotový diagram žádné pozadí kódu nepotřebuje. */
pre.mermaid[data-processed] {
	padding: 0;
	background: none;
	text-align: center;
}

/* Mermaid si po vykreslení přidá na konec body absolutní .mermaidTooltip.
   V klidu ležel POD aplikací a zvyšoval stránku o pár px — Chrome ji pak
   (kolečkem na konci vnitřního scrollu, nebo obnovou pozice po refresh)
   nechal odskočit: headery utekly nahoru a dole vznikl bílý proužek.
   Ukotvení k hornímu okraji výšku stránky nemění; při skutečném zobrazení
   si Mermaid pozici stejně nastavuje inline stylem, takže tooltip funguje
   dál. Pojistka k tomu: overflow: hidden na body (viz základ). */
body > .mermaidTooltip {
	top: 0;
	pointer-events: none;
}

pre.mermaid svg {
	max-width: 100%;
	height: auto;
}

/* Tabulky (GFM). Obal drží vodorovný posuvník pro tabulku širší než sloupec —
   stejně jako `.user-table-wrap` v administraci. Dělá to obal, ne tabulka:
   `display: block` na `<table>` sice posuvník taky umí, ale zároveň z tabulky
   udělá blok a vnitřní řádky se smrsknou na šířku obsahu, takže tabulka
   přestane vyplňovat sloupec (v1.79.1). */
.md-table-wrap {
	overflow-x: auto;
}

.md-table {
	width: 100%;
	margin: 0 0 1em;
	border-collapse: collapse;
	font-size: 12px;
}

.md-table th,
.md-table td {
	padding: 7px 12px;
	border: 1px solid var(--color-border);
	text-align: left;
}

.md-table th {
	background: var(--color-surface-alt);
	font-weight: 600;
}

.md-table .ta-left {
	text-align: left;
}

.md-table .ta-center {
	text-align: center;
}

.md-table .ta-right {
	text-align: right;
}

/* Task-listy (GFM) */
.task-list {
	list-style: none;
	padding-left: 0.3em;
}

.task-item {
	list-style: none;
}

/* Zaškrtávátko si kreslíme SAMI (v1.79.2) — táž cesta jako u šipky selectu
   ve v1.28.0. `color-scheme` sice srovná, jestli si ho systém nakreslí světlé,
   nebo tmavé, ale pořád je to systémový glyf: jinak vypadá na Androidu, jinak
   ve Windows, jinak na Macu, a zaoblení ani rámeček tokeny neposlouchají.
   `appearance: none` ho sundá a zbytek je obyčejný box podle palety.

   Fajfka je **glyf z MDI** (`check`, F012C), ne obrázek v CSS — ikony v tomhle
   projektu nese font a barvu jim dává token, takže se s tématem přebarví sama.

   Prvek je `disabled` (poznámka se čte, nezaškrtává) a prohlížeč by ho sám
   ztlumil — proto `opacity: 1`; stav „vypnuto“ tady nic neříká, hodnota
   pochází z textu poznámky. */
.task-item input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	display: inline-grid;
	place-content: center;
	width: 16px;
	height: 16px;
	margin: 0 6px 0 0;
	vertical-align: -3px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
	background: var(--color-surface);
	opacity: 1;
}

.task-item input[type="checkbox"]:checked {
	border-color: var(--color-accent);
	background: var(--color-accent);
}

.task-item input[type="checkbox"]:checked::after {
	content: "\F012C";
	font-family: "Material Design Icons";
	font-size: 14px;
	line-height: 1;
	color: var(--color-on-accent);
}

/* ---------- Míra formulářových prvků — ZÁVAZNÉ ----------
   Pole, select, textarea i tlačítko s textem mají STEJNÝ padding, písmo
   a řádkování. Výška 44px z toho vyjde sama (18px text + 2×12px padding
   + 2×1px rámeček), takže ji nikdo nenastavuje zvlášť.

   Proč takhle: dřív si pole počítalo výšku z paddingu (38px), kdežto tlačítko
   ji mělo natvrdo přes `min-height: 44px`. V jedné řadě si pak nesedly o 6px
   — nejlíp to bylo vidět u „Vytvořit“ vedle role v administraci. Jakmile míru
   nese jediná dvojice hodnot, rozejít se nemají jak.

   Ikonová tlačítka (rail, toolbary, ⋮ ve stromu) sem NEPATŘÍ — ta drží 44px
   z 64px modulu a mají vlastní třídy. */
.input,
.textarea,
.btn {
	padding: 12px 14px;
	font-size: 12px;
	line-height: 1.5;
	border: 1px solid transparent;
	border-radius: var(--radius);
}

/* ---------- Tlačítka ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font: inherit;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--color-text);
	background: var(--color-surface-alt);
	cursor: pointer;
	text-decoration: none;
	transition: background var(--transition), color var(--transition), border-color var(--transition);
}

.btn:hover {
	text-decoration: none;
}

.btn-primary {
	color: var(--color-on-accent);
	background: var(--color-accent);
}

.btn-primary:hover {
	background: var(--color-accent-hover);
}

.btn-ghost {
	color: var(--color-text);
	background: transparent;
	border-color: var(--color-border);
}

.btn-ghost:hover {
	background: var(--color-surface-alt);
}

.btn-danger {
	color: var(--color-on-danger);
	background: var(--color-danger);
}

.btn-danger:hover {
	background: var(--color-danger-hover);
}

/* ---------- Editace poznámky ---------- */
.note-edit {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.input-title {
	font-size: 18px;
	font-weight: 700;
}

/* ---------- EasyEditor: nástrojový pás editoru (v1.52.0) ----------
   Sedí nad polem s textem a vkládá markdown syntaxi. V dokumentaci se mu říká
   **EasyEditor**, v kódu nese předponu `md-`.

   VLASTNÍ MÍRA, NE 44px — a je to vědomá výjimka ze závazného pravidla
   „pole i tlačítka 44px“. To platí pro AKČNÍ tlačítka a formulářové prvky
   (Uložit, Přepnout, input, select), kde se míří jednou. Tady je **hustý
   nástrojový pás**, kde se klikne desetkrát za minutu: při 44px by osmnáct
   tlačítek zabralo 792px z 728px sloupce a na mobilu by se nevešlo vůbec.

   Míra je **34 × 34px a odsazení 5px** — tedy táž stavba jako všude, jen
   na polovičním odsazení (44 = 18 + 2 × 13, 34 = 18 + 2 × 8; mezery 10 → 5).
   Ikona zůstává 18px jako ve stromu. Rozhodnuto 30. 7. 2026 s autorem.

   Pás se nesmršťuje (`flex-shrink: 0`), takže výškový řetěz `is-editing`
   platí dál: pole s textem si vezme zbytek zóny. Pod 720px se pás zlomí
   do víc řádků — proto `flex-wrap`, ne vodorovný posuvník.

   Plochu má **jako panel se stromem** (`--color-nav`) a odsazení **jako
   toolbary v aplikaci** (10px) — pás je chrom, ne obsah.

   MEZERY MEZI SKUPINAMI SE ROZTAHUJÍ (`space-between`), nejsou pevné. Pás tak
   vždycky vyplní šířku sloupce, *Zahodit změny* drží pravý okraj bez
   pomocného marginu a nezlomí se kvůli pár pixelům — přesně to se stalo při
   sedmnácti nástrojích, kde pevných 10px chybělo o 5px (v1.53.0). `gap`
   zůstává jako MINIMUM pro případ, že se pás na úzké obrazovce zlomí.

   Minimum je 5px (poloviční odsazení pásu). Osmnáct tlačítek po 34px se
   sedmi linkami potřebuje 699px z 728px, takže `space-between` zbylých 29px
   rozdělí do mezer. Mezera je proto z jedné strany linky větší než z druhé
   (pružná × pevných 5px) — vědomě, autor to tak chtěl. */
.md-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 5px;
	flex-shrink: 0;
	padding: 5px;
	background: var(--color-nav);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

/* Skupina = nástroje, které patří k sobě (písmo · odkaz · seznamy · citace ·
   bloky). Dělí je mezera z `gap` výš a jemná linka, ne rámeček. */
/* Tlačítka jedné skupiny se DOTÝKAJÍ (gap 0) — je to sdružená sada, ne pět
   samostatných tlačítek, a odděluje je hover pilulka. Původní 2px mezery
   spotřebovaly 24px, které při sedmnácti nástrojích chyběly: pás se lámal
   o 5px a červené *Zahodit změny* padalo na druhý řádek (v1.53.0). */
.md-tool-group {
	display: flex;
	align-items: center;
}

/* DĚLICÍ LINKA — **samostatný prvek**, ne `border-left` skupiny. Je to kvůli
   symetrii: jako rámeček skupiny měla mezera před linkou pružnou šířku
   (dopočítanou) a za linkou pevnou, což je na pásu vidět (nahlásil autor).
   Samostatný prvek dostane od `space-between` mezeru z obou stran stejnou.

   Rozměry (opakovaně použitelné): **1px** `--color-border` jako všechny linky
   v aplikaci, výška jako tlačítko (34px). Linku má KAŽDÁ skupina — i zalomení
   stránky a odchod z editace, žádná výjimka. */
.md-divider {
	flex-shrink: 0;
	width: 1px;
	height: 34px;
	background: var(--color-border);
}

/* ⋮ je jen pro úzké obrazovky, takže jeho linka taky. */
.md-divider-more {
	display: none;
}

.md-btn {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	font-size: 18px;
	color: var(--color-text);
	background: transparent;
	border: 0;
	border-radius: var(--radius);
	cursor: pointer;
	transition: background var(--transition), color var(--transition);
}

.md-btn:hover {
	color: var(--color-hover-text);
	background: var(--color-hover-bg);
}

/* Zahození změn je rušící akce, tedy červená — stejná Red 700 jako v NAV-B
   a v kontextových menu. Pod myší barva zůstává, přibude jen jemný podklad. */
.md-btn-danger {
	color: var(--color-danger);
}

.md-btn-danger:hover {
	color: var(--color-danger-hover);
	background: var(--color-error-bg);
}

/* ⋮ „další nástroje“ je JEN pro úzké obrazovky — na desktopu se všechno vejde
   do pásu, takže by menu jen nabízelo podruhé to, co je vidět. Zapíná ho
   mobilní blok na konci souboru. */
/* `position: relative` je KOTVA pro nabídku, ne kosmetika — bez ní se menu
   počítalo od `.note` a spadlo pod viewport (naměřeno `top: 818` na okně
   vysokém 812px, tedy úplně mimo obrazovku). */
.md-more-wrap {
	display: none;
	position: relative;
}

/* Nabídka nadpisů visí pod svým tlačítkem — týž princip jako menu v hlavičce. */
.md-heading-wrap {
	position: relative;
	display: flex;
}

.md-heading-menu,
.md-list-menu,
.md-block-menu,
.md-more-menu {
	position: absolute;
	left: 0;
	top: calc(100% + 6px);
	z-index: 40;
	min-width: 150px;
}

/* ⋮ stojí u pravého okraje, takže mu nabídka nesmí vylézt ze stránky. */
.md-more-menu {
	left: auto;
	right: 0;
	min-width: 180px;
}

/* Pole s textem sahá až ke spodnímu okraji zóny — psát do okénka uprostřed
   volné plochy nedává smysl. Výšku nese řetěz od skrolující plochy dolů:
   každý článek si vezme celou výšku a formulář uvnitř zbytek po drobečkách.
   Příznak `is-editing` nasazuje includes/header.php, stejně jako `is-document`.

   Je to `min-height`, ne `height`: na nízkém okně (nebo až bude pole s názvem
   zalomené) smí obsah přerůst a skrolující plocha se o něj postará. */
.content.is-editing .content-inner {
	display: flex;
	flex-direction: column;
	min-height: 100%;
}

.content.is-editing .note-edit {
	flex: 1;
	min-height: 0;
}

/* Od v1.32.0 je pole pod názvem poslední — Uložit a Zahodit změny sedí v NAV-B,
   takže si vezme celý zbytek výšky.
   `min-height` ze sdíleného pravidla (340px) by ho zdola nepustilo zmenšit,
   takže by na nízkém okně přerostlo plochu. Tady ho nahrazuje rozumné dno. */
.content.is-editing .textarea {
	flex: 1;
	min-height: 200px;
	/* Pole plochu vyplňuje samo — táhnout za roh nemá kam. */
	resize: none;
}

/* ---------- Účet na profilu (v1.34.0) ----------
   Čtení je popisový seznam: vlevo popisek, vpravo hodnota. Řádky jsou stejně
   vysoké jako pole ve formuláři, aby přepnutí do úpravy nikam neposkočilo. */
.account-view {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 12px var(--space);
	margin: 0;
}

.account-view dt {
	font-size: 12px;
	font-weight: 600;
	color: var(--color-text-muted);
}

.account-view dd {
	margin: 0;
}

/* Formulář v boxu: pole pod sebou, ne v řadě, s odsazením `--space` jako
   všude v obsahu. Používá ho účet i změna hesla, ať mají oba boxy na profilu
   tutéž sazbu.

   *(Do v1.60.0 se tu odkazovalo na `.form-row` jako na alternativu „řady“.
   Ta třída ale v aplikaci nikde nebyla — zůstalo po ní jen CSS a poznámka
   v roadmapě mezi rozhodnutími. Obojí smazáno.)* */
.form-stack {
	display: flex;
	flex-direction: column;
	gap: var(--space);
}

/* Tlačítko si drží svou šířku — ve sloupci by se jinak roztáhlo přes celý box. */
.form-stack .btn {
	align-self: flex-start;
}

/* Vysvětlivka pod polem, které se needituje (přihlašovací jméno, role). */
.field-note {
	display: block;
	margin-top: 6px;
	font-size: 12px;
}

/* Needitovatelné pole vypadá jako pole, ale nezve k psaní. */
.input[readonly] {
	color: var(--color-text-muted);
	background: var(--color-surface-alt);
	cursor: default;
}

/* ---------- Formulářové prvky ---------- */
.field {
	display: block;
}

.field-label {
	display: block;
	margin-bottom: 6px;
	font-size: 12px;
	font-weight: 600;
	color: var(--color-text-muted);
}

/* Míru (padding, písmo, řádkování, rámeček, zaoblení) nese sdílené pravidlo
   výš — tady zbývá jen to, čím se pole od tlačítka liší. Písmo se dědí
   schválně: formulářové prvky by si jinak vzaly systémové. */
.input,
.textarea {
	width: 100%;
	font-family: inherit;
	font-weight: 400;
	color: var(--color-text);
	background: var(--color-surface);
	border-color: var(--color-border);
}

/* ---------- Select ----------
   Vlastní šipka: nativní si kreslí operační systém, takže v každém prohlížeči
   vypadá jinak a neposlouchá tokeny. `appearance: none` ji sundá, náhradu nese
   ikona MDI v obalu (`icon('menu-down')` — stejná cesta jako všude jinde,
   žádný obrázek napevno v CSS a barva jde přes token).

   Obal je potřeba proto, že select je nahrazený prvek a pseudoprvek ani vlastní
   potomky mít nemůže. */
.select-wrap {
	position: relative;
	display: block;
}

.select-wrap .input {
	/* Místo pro šipku, ať do ní nenaběhne dlouhý název složky. */
	padding-right: 34px;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.select-arrow {
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
	font-size: 18px;
	line-height: 1;
	color: var(--color-text-muted);
	/* Klik musí projít skrz na select, jinak by šipka rozbalování blokovala. */
	pointer-events: none;
}

/* Fokus = obarvená čára + prstenec kolem ní. Nahrazuje dřívější `outline: none`,
   které pole při psaní klávesnicí nijak neoznačilo. */
.input:focus,
.textarea:focus {
	outline: 3px solid var(--color-focus-ring);
	outline-offset: 0;
	border-color: var(--color-accent);
}

/* Totéž pro vše ostatní, na co se dá doskákat klávesnicí (tlačítka, odkazy,
   položky menu, rozbalovací složky). Myší se prstenec neukazuje. */
.btn:focus-visible,
.header-btn:focus-visible,
.login-theme-btn:focus-visible,
.rail-btn:focus-visible,
.tool-btn:focus-visible,
.tree-link:focus-visible,
.tree-action:focus-visible,
.context-menu-item:focus-visible,
.app-logo:focus-visible,
.login-logo-link:focus-visible,
.recent-link:focus-visible,
.tree summary:focus-visible,
/* Doplněno ve v1.57.0 — tyhle prvky se ovládají klávesnicí stejně jako ostatní,
   jen na seznam nikdy nepřibyly, takže po nich fokus skákal neviditelně. */
.nav-b-btn:focus-visible,
.row-action:focus-visible,
.md-btn:focus-visible,
.to-top:focus-visible,
.crumb:focus-visible,
.user-button:focus-visible,
.tree-folder-link:focus-visible {
	outline: 3px solid var(--color-focus-ring);
	outline-offset: 1px;
}

/* ⋮ je na zařízení s myší skryté do hoveru — při doskákání klávesnicí se musí
   ukázat. Kde hover není, je vidět pořád (viz `.tree-action` výš). */
.tree-action:focus-visible {
	opacity: 1;
}

/* ---------- Přeskočit na obsah (v1.57.0) ----------
   Odkaz je v toku stránky první, ale vidět není — dokud na něj nedoskáče
   fokus. Neschovává se přes `display: none` ani `visibility`, protože takový
   prvek by se nedal zaostřit vůbec; odsune se proto mimo plochu okna. */
.skip-link {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100;
	padding: 10px 16px;
	color: var(--color-on-accent);
	background: var(--color-accent);
	border-radius: var(--radius);
	transform: translateY(-200%);
}

.skip-link:focus {
	transform: translateY(0);
	outline: 3px solid var(--color-focus-ring);
	outline-offset: 1px;
}

/* ---------- Omezený pohyb (v1.57.0) ----------
   Kdo má v systému zapnuté „omezit pohyb“, má k tomu důvod — u části lidí
   spouštějí animace nevolnost nebo migrénu. Aplikace je nemá kde bránit,
   takže se všechny zkrátí na neznatelné minimum.

   **JEDINÉ místo v projektu, kde se `!important` používá ve větším počtu**
   (jinde je celkem jednou). Je to tady na místě: smyslem pravidla je přebít
   VŠECHNY přechody a animace bez ohledu na to, kde jsou zapsané — kdyby se
   dalo obejít specifičností, neplnilo by účel. Plynulé rolování řeší
   `app.js`, protože ho spouští JavaScript, ne styl. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

.textarea {
	min-height: 340px;
	resize: vertical;
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	font-size: 12px;
	line-height: 1.5;
}

/* ---------- Modály ---------- */
.modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space);
	background: var(--color-overlay);
	animation: modal-fade 150ms ease;
}

.modal-overlay[hidden] {
	display: none;
}

.modal {
	width: 100%;
	max-width: 420px;
	padding: var(--space);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

.modal-title {
	margin-bottom: 14px;
}

.modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-top: 18px;
}

@keyframes modal-fade {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* ---------- Hledání ---------- */
.search-form {
	display: flex;
	gap: 8px;
	margin-bottom: 18px;
}

.search-form .input {
	flex: 1;
}

.search-count {
	margin: 0 0 14px;
	font-size: 12px;
}

.search-results {
	list-style: none;
	margin: 0;
	padding: 0;
}

.search-result {
	padding: 12px 0;
	border-bottom: 1px solid var(--color-border);
}

.search-result-title {
	font-size: 12px;
	font-weight: 600;
}

.search-snippet {
	margin: 4px 0 0;
	font-size: 12px;
}

mark {
	padding: 0 2px;
	color: var(--color-accent);
	background: color-mix(in srgb, var(--color-accent) 18%, transparent);
	border-radius: var(--radius);
}

/* ---------- Přihlašovací stránka ---------- */
.login-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	min-height: 100dvh;
	padding: 20px;
	background: var(--color-bg);
}

/* Karta drží stejný odstín jako rail (light Grey 50 / dark elevace 01dp), aby
   se odlišila od plochy pod sebou — bez stínu ji nese barva a čára. */
/* Přihlašovací stránka je vystředěná flex sloupcem, aby pod kartou mohl sedět
   přepínač režimu. */
.login-theme {
	display: flex;
	justify-content: center;
	margin-top: 12px;
}

/* Přepínač je tu vedlejší volba, ne akce stránky — drží tlumenou barvu textu,
   ať pod přihlašovací kartou nesvítí. Pod myší se rozsvítí jako všude jinde. */
.login-theme-btn {
	color: var(--color-text-muted);
}

.login-card {
	width: 100%;
	max-width: 360px;
	padding: 32px;
	background: var(--color-rail);
	border: 1px solid var(--color-border);
	border-radius: var(--radius);
}

/* Značka na přihlašovací stránce — stejná sestava jako v Header-A („B“ jako
   SVG maska + zbytek názvu textem), jen větší a vycentrovaná. Rozměr značky si
   určuje sama, proto se přebíjí šířka i zámek textu z railové varianty. */
.login-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 32px;
	font-size: 26px;
	font-weight: 700;
	letter-spacing: 0.2px;
	color: var(--color-text);
}

/* Logo je jeden celek, takže drží POMĚRY z Header-A: při 20px textu je tam
   glyf 32px vysoký a mezera 1,2px, tedy 1,6em a 0,06em. Tady je text 26px,
   z toho výška 26 × 1,6 = 41,6px, šířka 41,6 × 0,75 (poměr SVG 600:800) =
   31,2px a mezera 26 × 0,06 = 1,56px. V em to zapsat nejde — .logo-mark má
   font-size: 0 (skrývá písmeno), takže by em na něm vyšlo nulové. Rám je
   utažený přesně na glyf; v Header-A vzniká sestava jinak (rám 64px railu
   + záporný margin). */
.login-logo .logo-mark {
	width: 31.2px;
	height: 41.6px;
}

.login-logo .logo-rest {
	margin-left: 1.56px;
}

/* Logo je odkaz na kořen — stejné chování jako logo v Header-A. */
.login-logo-link {
	display: flex;
	align-items: center;
	color: inherit;
	text-decoration: none;
}

.login-logo-link:hover {
	text-decoration: none;
	color: var(--color-accent);
}


/* Chybová hláška má jeden háv, ať přijde odkud chce: `.login-error` píše server
   (špatné heslo, zamčený login), `.form-error` píše JS místo bubliny prohlížeče
   (viz assets/js/app.js). Kdyby měly každá své pravidlo, rozejdou se. */
.login-error,
.form-error {
	padding: 9px 12px;
	margin-bottom: 14px;
	font-size: 12px;
	color: var(--color-error-text);
	background: var(--color-error-bg);
	border-radius: var(--radius);
}

/* Uvítání při prvním spuštění (v1.44.0). Není to chyba ani varování, jen
   vysvětlení, proč se stránka ptá na jiné věci než obvykle — proto neutrální
   plocha, ne stavová barva. Rozměry sdílí s hláškou, ať karta drží rytmus. */
.login-setup-note {
	padding: 9px 12px;
	margin-bottom: 14px;
	font-size: 12px;
	color: var(--color-text-muted);
	background: var(--color-surface-alt);
	border-radius: var(--radius);
}

/* Hláška pojmenuje pole, rámeček ho ukáže. Barva je táž jako text hlášky —
   žádný nový token pro jednu roli navíc. */
.input.is-invalid,
.textarea.is-invalid {
	border-color: var(--color-error-text);
}

.login-field {
	margin-top: 12px;
}

.login-ok {
	padding: 9px 12px;
	margin-bottom: 14px;
	font-size: 12px;
	color: var(--color-success-text);
	background: var(--color-success-bg);
	border-radius: var(--radius);
}

.login-submit {
	width: 100%;
	justify-content: center;
	margin-top: 18px;
}

/* *(Uživatel a odhlášení v railu — `.rail-user` a `.rail-logout` smazány
   ve v1.60.0. Uživatel sedí od v1.14.0 v Header-B a odhlášení je v jeho
   nabídce; v railu po nich zbylo jen CSS.)* */

/* ---------- Administrace ---------- */
.user-table-wrap {
	overflow-x: auto;
}

.user-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 12px;
}

.user-table th,
.user-table td {
	padding: 10px 12px;
	text-align: left;
	border-bottom: 1px solid var(--color-border);
	white-space: nowrap;
}

/* Zdraví systému: VŠECHNY jeho tabulky mají stejné sloupce, aby na sebe boxy
   pod sebou navazovaly. Bez pevného rozvržení si každá tabulka počítá šířky
   podle svého obsahu a pilulky pak v každém boxu končí jinde.
   (Výpis názvů souborů má vlastní sloupce — ten se tímhle neřídí.) */
.health-table {
	table-layout: fixed;
}

.health-table td:first-child {
	width: 46%;
}

/* Poslední sloupec drží pilulku — pevná šířka podle nejdelšího slova
   („Varování“), ať jsou pilulky ve všech boxech na jedné svislici. */
.health-table td:last-child {
	width: 104px;
}

/* Dlouhá cesta v popisku se smí zalomit, jinak by z pevného sloupce vylezla. */
.health-table td {
	white-space: normal;
	overflow-wrap: anywhere;
}

.user-table th {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	color: var(--color-text-muted);
}

.ta-right {
	text-align: right;
}

.user-id {
	display: block;
	font-size: 12px;
}

/* ⋮ v řádku tabulky. Vypadá jako ⋮ ve stromu, ale NEskrývá se do hoveru —
   v tabulce není řádek zvýrazněný myší, takže by se hledalo naslepo. */
.row-action {
	display: inline-flex;
	align-items: center;
	padding: 0;
	color: var(--color-text-muted);
	background: transparent;
	border: 0;
	cursor: pointer;
}

.row-action .icon {
	font-size: 18px;
}

.row-action:hover {
	color: var(--color-accent);
}

/* ---------- Nastavení: volba tématu ---------- */
.theme-choice {
	display: flex;
	gap: 8px;
	margin-top: 12px;
}

.js-theme-set.is-active {
	color: var(--color-accent);
	border-color: var(--color-accent);
}

/* ---------- Prostory na profilu (v1.46.0) ---------- */
/* Vzhled si nese tabulka (.user-table) a ⋮ (.row-action) z administrace,
   nabídku sdílené .context-menu — nové je jen zrušení odsazení formuláře,
   který ve sloupci Stav nese tlačítko Přepnout.
   Dřív tu byl `details.space-switcher` nad stromem poznámek — celý zmizel,
   i s vlastním vzhledem nabídky, který se se .context-menu nikdy nesrovnal. */
.space-switch-form {
	margin: 0;
}

/* ---------- Náhled dokumentu (PDF) ----------
   Dokument NENÍ text ve sloupci — dostane celou zónu obsahu pod NAV-B.
   Zbytek layoutu (rail, panel se stromem, obě hlavičky, NAV-B) zůstává,
   mění se jen vnitřek obsahu: bez limitu šířky, bez odsazení, na plnou výšku.
   Příznak `is-document` nasazuje includes/header.php podle přípony souboru.
   Jediný dokument je PDF — HTML čtečka i její `.doc-frame` padly ve v1.50.0. */

/* Stránka se do plochy nemusí vejít (zvětšení lupou) — posuvník potřebuje
   i vodorovně. */
.content.is-document .content-scroll {
	overflow: auto;
}

/* ---------- Čtečka PDF (PDF.js) ----------
   Stránky pod sebou, vykreslené do <canvas> — vestavěná čtečka prohlížeče
   nemusí existovat (viz assets/js/pdf-view.js). */
/* Plocha kolem dokumentu jde přes celou zónu (je to „stůl“, na kterém list
   leží), ale stránka sama sedí ve STEJNÉM sloupci jako text poznámky —
   od v1.47.0 tedy **na středu**, se stejným odsazením a stejně široká.
   Přepnutí mezi poznámkou a dokumentem tak nikam neposkočí.
   Odstín je shodný s hlavičkou a railem (Grey 50 / elevace 01dp), aby plocha
   patřila ke chromu aplikace, ne k obsahu. */
.pdf-view {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space);
	padding: var(--space);
	min-height: 100%;
	background: var(--color-rail);
}

/* Šířku stránky řídí JS (základ = sloupec textu × zvolené zvětšení), proto tu
   NENÍ `max-width: 100%` — ta by zvětšení zastropovala šířkou okna a od zhruba
   dvojnásobku by lupa přestala dělat cokoli. Zvětšená stránka smí plochu
   přerůst; od toho je vodorovný posuvník.

   NA STŘED přes `margin-inline: auto`, NE přes `align-items: center` na ploše
   (v1.47.0). Vypadá to stejně, ale chová se to jinak, jakmile stránka plochu
   přeroste: `align-items: center` ji vystrčí i doleva mimo plochu, kam se
   posuvníkem nedá dojet, takže **levý okraj zvětšené stránky se ztratí**
   (naměřeno při zvětšení 1,8× — chybělo 27px, `scrollWidth` je nezahrnul).
   Automatický margin se v takové chvíli chová podle flexboxu jako nulový,
   takže stránka spadne na levý kraj a doskrolovat jde celá. */
.pdf-page {
	height: auto;
	margin-inline: auto;
	background: var(--color-doc-page);
	border: 1px solid var(--color-border);
}

/* Hláška zmizí, jakmile je vykresleno; při chybě zůstane i s odkazem. */
.pdf-fallback {
	margin: 0;
	color: var(--color-text-muted);
}

.pdf-view.is-loaded .pdf-fallback {
	display: none;
}

.content.is-document .content-inner {
	max-width: none;
	padding: 0;
	height: 100%;
}

/* ---------- Zdraví systému + log ---------- */
.pill-ok {
	color: var(--color-success-text);
	background: var(--color-success-bg);
}

/* Prostřední stupeň: „Varování“ = je dobré o tom vědět, ale nic to nerozbíjí
   (zaostalá knihovna, osiřelá cesta). Konečně se tím používají oranžové tokeny,
   které v paletě čekaly nevyužité.

   POZOR na text: Orange 900 na Orange 50 dává 3,46:1, tedy pod normou 4,5:1 —
   proto je slovo v pilulce KRÁTKÉ a tučné (tam 3:1 stačí). Delší text v této
   dvojici psát nelze, viz Stavové barvy v dokumentaci. */
.pill-warn {
	color: var(--color-warning-text);
	background: var(--color-warning-bg);
}

.pill-bad {
	color: var(--color-error-text);
	background: var(--color-error-bg);
}

.log-view {
	margin: 0;
	padding: var(--space);
	overflow: auto;
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
	font-size: 12px;
	line-height: 1.5;
	white-space: pre-wrap;
	background: var(--color-surface-alt);
	border-radius: var(--radius);
}

/* Log zabírá celou výšku zóny (desktop i mobil) — stejný řetěz jako editace
   (`is-editing`): každý článek si vezme celou výšku a log zbytek po nadpisu.
   Příznak `is-log` nasazuje includes/header.php. Dřívější strop 280px padl. */
.content.is-log .content-inner {
	display: flex;
	flex-direction: column;
	/* `height`, ne `min-height` jako u editace: pre roste s obsahem, takže
	   bez stropu by log plochu přerostl místo toho, aby skroloval uvnitř.
	   Na nízkém okně ho zdola drží jeho vlastní min-height (200px). */
	height: 100%;
}

.content.is-log .content-inner > .panel {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
}

.content.is-log .log-view {
	flex: 1;
	min-height: 200px;
}

/* ---------- Nápověda ---------- */
.help {
	display: flex;
	flex-direction: column;
	gap: var(--space);
}

.help ul {
	margin: 8px 0 0;
	padding-left: 1.3em;
}

.help li {
	margin: 4px 0;
}

/* ---------- Tisk / export do PDF ---------- */
@media print {
	/* Skrytý overflow z obrazovky by v Chromu ořízl tisk na jednu stránku —
	   papír potřebuje obsah nechat volně téct. */
	body {
		overflow: visible;
	}

	/* Tisk je papír, ne obrazovka. Místo přepisování jednotlivých pravidel se
	   přebijí rovnou tokeny, takže i tisk zůstává řízený jedním místem a
	   vytiskne se černá na bílé bez ohledu na zvolený režim. */
	:root,
	:root[data-theme="dark"] {
		--color-bg: #ffffff;
		--color-surface: #ffffff;
		--color-text: #000000;
		--color-text-muted: #616161;
		--color-border: #bdbdbd;
	}

	/* Na papír patří jen dokument — všechen chrom kolem něj jde pryč
	   (rail, panel se stromem, obě hlavičky, toolbar obsahu, modály).
	   Obsah poznámky (TOC) taky: je to navigace po obrazovce, na papíře by byl
	   seznam odkazů, které nikam nevedou. */
	.rail,
	.nav-panel,
	.header-a,
	.header-b,
	.nav-b,
	.toc-rail,
	.to-top,
	.modal-overlay {
		display: none !important;
	}

	.app {
		display: block;
		height: auto;
	}

	.content {
		padding: 0;
		overflow: visible;
	}

	.content-scroll {
		overflow: visible;
	}

	.content-inner {
		max-width: none;
		padding: 0;
	}

	@page {
		margin: 1.5cm;
	}

	/* Odkaz na papíře nikam nevede — barva a podtržení by jen rušily. */
	a {
		color: var(--color-text);
		text-decoration: none;
	}

	/* Na papíře není kam skrolovat — obal tabulky by širší obsah oříznul. */
	.md-table-wrap,
	.user-table-wrap {
		overflow: visible;
	}

	/* Co se nemá roztrhnout přes dvě stránky. */
	pre,
	blockquote,
	table,
	figure,
	.math-block,
	pre.mermaid {
		break-inside: avoid;
		page-break-inside: avoid;
	}

	/* Nadpis nemá zůstat sám na konci stránky bez svého textu. */
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		break-after: avoid;
		page-break-after: avoid;
	}

	/* Osamocený řádek odstavce nahoře/dole vypadá špatně. */
	p,
	li {
		orphans: 3;
		widows: 3;
	}

	/* Ruční zalomení stránky ([pagebreak] v Markdownu) — na obrazovce je
	   marker od v1.90.0 vidět (čára s popiskem), tady zalomí stránku
	   a **sám nic nekreslí**. Proto se ruší i popisek: `visibility: hidden`
	   by ho sice schovala taky, ale na papíře nemá co dělat ani jako
	   prázdné místo. */
	hr.page-break {
		display: block;
		break-before: page;
		page-break-before: always;
		height: 0;
		visibility: hidden;
		border: 0;
		margin: 0;
	}

	hr.page-break::after {
		content: none;
	}

	/* Tisk PDF: každá vykreslená strana dostane vlastní list papíru a roztáhne
	   se na jeho šířku — zvětšení zvolené na obrazovce se do tisku nepromítá. */
	.pdf-view {
		display: block;
		padding: 0;
		background: none;
	}

	.pdf-page {
		width: 100%;
		height: auto;
		border: 0;
		break-after: page;
		page-break-after: always;
	}

	.pdf-page:last-child {
		break-after: auto;
		page-break-after: auto;
	}

	.pdf-fallback {
		display: none;
	}
}

/* ---------- Responzivita ---------- */

/* Prvky mobilní a tabletové navigace na desktopu neexistují. */
.mobile-nav-toggle,
.mobile-home-link,
.header-b-logo,
.nav-mobile-sections,
.nav-b-more-wrap {
	display: none;
}

/* Řádek ikon dole v panelu (jen mobil) — rail naležato: hledání, cíle railu a menu
   uživatele vodorovně vedle sebe, tlačítka sdílí vzhled railu (44px). */
.nav-mobile-sections {
	justify-content: space-evenly;
	align-items: center;
	gap: 10px;
	padding: 10px;
	border-top: 1px solid var(--color-border);
}

.nav-mobile-logout-form {
	margin: 0;
	display: flex;
}

/* Odhlášení je rušící akce — červeně jako všude. */
.nav-mobile-logout {
	color: var(--color-danger);
}

.nav-mobile-logout:hover {
	color: var(--color-danger-hover);
}

/* Menu ⋮ v NAV-B visí pod svým tlačítkem (jako .user-menu) — pravidlo musí
   stát až ZA .context-menu, které je fixed u kurzoru. */
.nav-b-menu {
	position: absolute;
	top: calc(100% + 4px);
	right: 0;
	left: auto;
}

/* Pod 1112px se strom nevejde jako stálý sloupec — hranice je odvozená,
   ne pocitová: sloupec obsahu 768px + chrom 344px (rail + strom) = 1112px.
   Menu je pak tentýž .nav-panel, vysunutý PŘES obsah (postup z roadmapy),
   zavírá se hamburgerem, Escape, klikem na položku i klikem mimo. */
@media (max-width: 1112px) {
	.nav-panel,
	.app.is-nav-hidden .nav-panel {
		display: flex;
		position: fixed;
		top: var(--header-h);
		bottom: 0;
		z-index: 40;
		transform: translateX(-100%);
		transition: transform 0.2s ease;
	}

	.app.is-mobile-nav-open .nav-panel {
		transform: translateX(0);
	}

	/* *(Tabulka širší než okno skrolovala do v1.79.0 tím, že se z ní udělal
	   blok (`display: block`). Bylo to špatně: blok se sice do okna vejde, ale
	   vnitřní řádky se smrsknou na šířku obsahu, takže tabulka **přestala
	   vyplňovat box** — na tabletu končily pilulky Zdraví systému v polovině
	   panelu. Posuvník má obal (`.md-table-wrap`, `.user-table-wrap`), a to
	   v každé šířce, ne jen tady.)* */
}

/* Tablet (721–1112px) — vypadá jako desktop se schovaným panelem:
   Header-A je buňka 64px nad railem — jen s hamburgerem — a předělová
   linka navazuje na linku railu; Header-B nese vlevo značku „B“ (bez
   textu, jako při schovaném sidebaru na desktopu) a vpravo hledání
   s uživatelem. Přepínač skrýt/zobrazit je skrytý, strom není sloupec
   mřížky, ale překryv 320px od railu (obsah pod ním zůstává vidět).
   NAV-B se vejde celá (i PDF řada 476px), ⋮ tu není; řádek ikon v menu
   taky ne — hledání i uživatel jsou v Header-B, nápověda s administrací
   v railu. */
@media (min-width: 721px) and (max-width: 1112px) {
	.header-a,
	.app.is-nav-hidden .header-a {
		grid-area: 1 / 1 / 2 / 2;
		justify-content: center;
	}

	/* Logo z Header-A se schová — na tabletu ho nese Header-B. */
	.header-a > .app-logo {
		display: none;
	}

	.mobile-nav-toggle {
		display: grid;
	}

	.header-b,
	.app.is-nav-hidden .header-b {
		grid-area: 1 / 2 / 2 / 4;
	}

	.header-b-logo {
		display: flex;
	}

	/* Desktopové skrytí panelu (cookie nav_hidden) text loga schovává —
	   na tabletu je logo v plné velikosti vždy. */
	.app.is-nav-hidden .logo-rest {
		display: inline;
	}

	.js-nav-toggle {
		display: none;
	}

	/* Mřížka zůstává třísloupcová kvůli buňce headeru — obsah si bere
	   sloupec stromu i zbytek. */
	.app,
	.app.is-nav-hidden {
		grid-template-columns: var(--rail-w) var(--nav-w) 1fr;
	}

	.content,
	.app.is-nav-hidden .content {
		grid-area: 2 / 2 / 3 / 4;
	}

	.nav-panel,
	.app.is-nav-hidden .nav-panel {
		left: var(--rail-w);
		width: 320px;
		border-right: 1px solid var(--color-border);
		/* -100 % odsouvá jen o šířku panelu — left (šířku railu) neodečte,
		   takže by pravý okraj panelu koukal zpod railu ven. */
		transform: translateX(calc(-100% - var(--rail-w)));
	}
}

/* Mobil (do 720px) — zůstává jen Header-A s logem a hamburgerem; rail,
   Header-B i sloupec stromu se schovají a menu jde přes celou obrazovku.
   NAV-B a drobečky zůstávají v obsahu — jsou kontextové ke stránce. */
@media (max-width: 720px) {
	.app,
	.app.is-nav-hidden {
		grid-template-columns: 1fr;
	}

	.rail,
	.header-b {
		display: none;
	}

	/* Logo vlevo, vpravo dvojice ikon (poznámky + hamburger). Není to
	   `space-between` se třemi prvky — ta by ikonu poznámek odsunula doprostřed;
	   místo toho ji vytlačí doprava `margin-left: auto` a `gap` je pak drží
	   u sebe jako jednu skupinu. */
	.header-a,
	.app.is-nav-hidden .header-a {
		grid-area: 1 / 1 / 2 / 2;
		justify-content: flex-start;
		padding-right: 10px;
		border-right: 0;
	}

	.mobile-home-link {
		display: grid;
		margin-left: auto;
	}

	/* Desktopové skrytí panelu (cookie nav_hidden) na mobil nepatří —
	   text loga zůstává a menu řídí jen hamburger. */
	.app.is-nav-hidden .logo-rest {
		display: inline;
	}

	.mobile-nav-toggle {
		display: grid;
	}

	/* Nástrojový pás pod 720px: co se nevejde, jde pod ⋮ (v1.53.0). V pásu
	   zůstává jen to nejčastější — nadpis, tučně, kurzíva, odkaz, odrážky —
	   plus ⋮ a červené zahození. Osmnáct tlačítek by se do 375px nevešlo ani
	   ve dvou řádcích. */
	.md-overflow {
		display: none;
	}

	.md-more-wrap {
		display: flex;
	}

	.md-divider-more {
		display: block;
	}

	/* Skupina, ze které se všechna tlačítka schovala pod ⋮, nesmí zůstat jako
	   prázdné místo s dělicí linkou — mizí celá. Bez tohohle pravidla zabraly
	   tři prázdné skupiny (citace, bloky, zalomení) tolik, že se červené
	   zahození zlomilo na druhý řádek. */
	.md-tool-group:not(:has(.md-btn:not(.md-overflow))) {
		display: none;
	}

	/* Bez vlastního paddingu — o odsazení textu se stará .content-inner,
	   NAV-B musí sedět hned pod hlavičkou jako na desktopu. */
	.content,
	.app.is-nav-hidden .content {
		grid-area: 2 / 1 / 3 / 2;
	}

	.nav-panel,
	.app.is-nav-hidden .nav-panel {
		left: 0;
		width: 100%;
		border-right: 0;
	}

	.nav-mobile-sections {
		display: flex;
	}

	/* Akce nad souborem se na mobil nevejdou (PDF jich má v NAV-B až 7) —
	   sdružují se pod ⋮ se stejným menu jako strom a administrace. */
	.nav-b-overflow {
		display: none;
	}

	.nav-b-more-wrap {
		display: block;
		position: relative;
	}
}