/* =========================================================================
   portlets.css — vzhled pro markup, který generuje admin3_frontend
   -------------------------------------------------------------------------
   portlet-manager.css (admin3) řeší jen strukturu a funkční stavy; barvy,
   rámečky, zaoblení a hover patří sem, do šablony. Názvy tříd se NEMĚNÍ —
   jsou dané renderery a šablona je pouze obléká.
   ========================================================================= */

/* ── Boční menu (a3_menu_sidemenu) ─────────────────────────────────── */

/* Menu není karta. Bílý obdélník kolem seznamu odkazů nic nesděluje a vedle
   otevřeného obsahu vypadal jako vsazený widget z jiného webu — nabídku drží
   pohromadě její nadpis a odsazení položek. */
.sidemenu {
	background: none;
	border: 0;
	padding: 0;
}

/* Titulek nabídky sdílí tvar s titulkem boxu v panelu (`.portlet-sidebar-title`)
   — zelený text a krátká linka ve značce. Vodorovné odsazení má TÉŽ jako
   odkazy pod ním, aby text stál na jedné svislici. */
.sidemenu .menuheading {
	padding: 0 var(--nol-mezera-3) var(--nol-mezera-2);
	margin-bottom: var(--nol-mezera-3);
	color: var(--nol-primarni);
	border-bottom: 2px solid var(--nol-primarni);
	font-weight: 700;
	font-size: var(--nol-text-sm);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	display: inline-block;
}

/* Přesah podbarvení jako ve výpisech tady BÝT NESMÍ: boční panel je nad
   992 px `overflow-y: auto` a prohlížeč z toho dopočítá i `overflow-x: auto`,
   takže by ze záporného okraje byl vodorovný posuvník. Odsazení proto nese
   odkaz i nadpis stejné a celá nabídka je o ně zasunutá od hrany sloupce. */
.sidemenu a {
	display: block;
	padding: var(--nol-mezera-2) var(--nol-mezera-3);
	border-radius: var(--nol-radius-sm);
	color: var(--nol-text);
	font-size: var(--nol-text-sm);
	text-decoration: none;
	transition: background-color var(--nol-prechod), color var(--nol-prechod);
}

/* Pozor: a3_menu_sidemenu_uroven() dává sublink/activelink PŘÍMO na <a> (na rozdíl od
   megamenu, kde je obaluje <div>). Selektory proto míří na a.trida, ne na .trida > a. */
.sidemenu a.sublink {
	padding-left: var(--nol-mezera-5);
	color: var(--nol-text-tlumeny);
}

.sidemenu a.sublink2 {
	padding-left: var(--nol-mezera-6);
	color: var(--nol-text-tlumeny);
}

.sidemenu a.sublink3 {
	padding-left: var(--nol-mezera-7);
	color: var(--nol-text-tlumeny);
	font-size: var(--nol-text-xs);
}

.sidemenu a:hover {
	background: var(--nol-primarni-svetla);
	color: var(--nol-primarni);
}

.sidemenu a.activelink {
	background: var(--nol-primarni-svetla);
	color: var(--nol-primarni);
	font-weight: 600;
}

/* ── Drobečková navigace ───────────────────────────────────────────── */

.nol-drobecky {
	padding-block: var(--nol-mezera-3);
	border-bottom: 1px solid var(--nol-ramecek);
	background: var(--nol-pozadi-tlumene);
}

.breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--nol-mezera-2);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--nol-text-sm);
	color: var(--nol-text-tlumeny);
}

.breadcrumb li {
	display: inline-flex;
	align-items: center;
	gap: var(--nol-mezera-2);
}

.breadcrumb li+li::before {
	content: '-';
	color: var(--nol-ramecek-vyrazny);
}

.breadcrumb a {
	color: var(--nol-text-tlumeny);
	text-decoration: none;
}

.breadcrumb a:hover {
	color: var(--nol-primarni);
	text-decoration: underline;
}

.breadcrumb .active {
	color: var(--nol-text);
	font-weight: 600;
}

/* Ikona domečku z Entypo — šablona Entypo nenačítá, kreslí si ji sama. */
.entypo-home {
	display: inline-block;
	width: 15px;
	height: 15px;
	background: currentColor;
	-webkit-mask: var(--nol-ikona-domecek) center / contain no-repeat;
	mask: var(--nol-ikona-domecek) center / contain no-repeat;
}

:root {
	--nol-ikona-domecek: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5'/%3E%3Cpath d='M5.5 9.5V21h13V9.5'/%3E%3C/svg%3E");
}

/* ── Portlet a mřížka ──────────────────────────────────────────────── */

/* Rozestup mezi portlety nese `--portlet-gap` z baseline (`tokens.css` ho
   přemapoval na `--nol-mezera-6`). Musí zůstat VĚTŠÍ než odsazení nadpisu od
   jeho vlastního těla (`--nol-mezera-4` z `base.css`), jinak nadpis přilne
   k předchozímu výpisu místo k tomu svému. */
.portlet {
	min-width: 0;
}

.portlet>.row {
	row-gap: var(--portlet-gap);
}

/* Poslední portlet nemá koho odstrkávat — spodní okraj sekce nese sekce. */
.nol-obsah>.portlet:last-child,
.a3-box-obsah>.portlet:last-child {
	margin-bottom: 0;
}

/* ── Výpis aktualit — položka seznamu ──────────────────────────────
   Aktualita NENÍ karta. Rámeček kolem každé položky nic nesděluje (že jde
   o samostatný záznam, je vidět z odsazení a z linky) a při deseti položkách
   pod sebou z výpisu udělá plot. Položky proto oddělují jen vlasové linky
   a hover, který podbarví celý řádek — přesně jako v úředním seznamu.

   Zbytek podoby (klikací plocha, ořez náhledu, odznaky) zůstává beze změny:
   `position: relative` je pořád kotva pro překryv nadpisu. */

.article {
	position: relative;
	display: flex;
	gap: var(--nol-mezera-4);
	/* Vodorovné odsazení je na položce, ne na obalu, aby podbarvení při
	   hoveru přesahovalo text a nekončilo těsně na písmenech. Zpět ho bere
	   záporný margin, takže text stojí na svislici sloupce. */
	padding: var(--nol-vypis-radek);
	margin-inline: calc(-1 * var(--nol-vypis-presah));
	/* Linka mezi položkami je JEDINÝ předěl, který výpis má — bez ní se deset
	   aktualit pod sebou slilo v jeden sloupec textu a mezera mezi nimi se
	   četla jako mezera mezi odstavci jedné z nich. */
	border-bottom: var(--nol-vypis-linka);
	border-radius: var(--nol-vypis-radius);
	transition: background-color var(--nol-prechod);
}

.article:last-child { border-bottom: 0; }

.article:hover,
.article:focus-within {
	background: var(--nol-vypis-hover);
}

/* Renderer dělí dlaždici bootstrapovými sloupci (`col-lg-3` + `col-lg-9`) a vedle
   nich emituje neutrální `.a3-aktualita-nahled` / `.a3-aktualita-text`. Cílíme ty
   třídy, ne pozici v `.row`: procentní sloupec dává v každé šířce okna jiný rozměr
   obrázku, takže dlaždice by nebyly stejné. Mřížku Bootstrapu jen přebíjíme. */
.article>.row {
	flex: 1;
	min-width: 0;
	align-items: flex-start;
}

.article .a3-aktualita-nahled {
	flex: 0 0 auto;
	width: var(--nol-aktualita-nahled);
	max-width: none;
}

.article .a3-aktualita-text {
	flex: 1 1 0;
	width: auto;
	max-width: none;
	min-width: 0;
}

.article .article-image {
	min-width: 0;
}

.article-image a {
	display: block;
	line-height: 0;
}

.article-image img {
	display: block;
	width: 100%;
	height: auto;
	/* Jednotný ořez drží výpis pohromadě: bez něj se v mřížce potkají
	   panorama, čtverec a logo z okresního zpravodaje. */
	aspect-ratio: var(--nol-pomer-nahledu);
	object-fit: cover;
	border-radius: var(--nol-radius);
	background: var(--nol-povrch-zvyrazneny);
}

.article-title {
	display: block;
	margin-bottom: var(--nol-mezera-2);
	/* Titulek aktuality je nadpis, i když ho renderer emituje jako <div> —
	   patří tedy do rodiny nadpisů, ne do textového řezu.

	   VELIKOST ale drží u rozhraní (`--nol-text-lg`), ne u <h3>: ve výpisu
	   stojí deset titulků pod sebou a v 21 px byly větší než nadpis stránky
	   v hlavičce i než položky navigace. Odlišuje je váha a barva, ne kegl. */
	font-family: var(--nol-pismo-nadpis);
	font-size: var(--nol-text-lg);
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: var(--nol-vyska-radku-tesna);
	color: var(--nol-text);
}

/* Nadpis nese odkaz celé dlaždice: `::after` ho roztáhne přes celou kartu, takže
   klikací je i prázdné místo mezi prvky. Náhled i perex míří na stejnou adresu,
   takže je překryv smí zakrýt. */
.article-title a {
	color: inherit;
	text-decoration: none;
}

.article-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

.article:hover .article-title a,
.article-title a:focus-visible {
	color: var(--nol-primarni);
}

/* Fokusový prstenec patří celé dlaždici, ne jen textu nadpisu. */
.article-title a:focus-visible {
	outline: none;
}

.article:focus-within {
	outline: 2px solid var(--nol-primarni);
	outline-offset: 2px;
}

/* =========================================================================
   META ŘÁDEK — jeden jazyk pro všechny doprovodné údaje
   -------------------------------------------------------------------------
   Datum, kategorie, typ a velikost souboru, platnost výstrahy, čas snímku
   z kamery — všechno jsou to údaje DRUHÉ úrovně, které doprovázejí název.
   Každý renderer je pojmenoval jinak, takže si je dřív každý portlet sázel
   po svém: aktualita `Zveřejněno: 11.08.2026` drobným tlumeným řádkem, deska
   tytéž údaje verzálkovou hlavičkou sloupce nad holým datem, dokumenty ještě
   jinak. Vedle sebe na titulce to byly tři jazyky pro totéž.

   Odsud dál platí jedna velikost (`--nol-text-xs`), jedna barva
   (`--nol-text-tlumeny`) a číslice pod sebou. Rozdíl mezi popiskem
   a hodnotou nese VÁHA, ne velikost ani verzálky.
   ========================================================================= */

.article-meta,
.article-inside-meta,
.a3-deska .a3-deska-hlavicka,
.a3-deska .a3-deska-udaj,
.portlet-doc-meta,
.a3-hledani-meta,
.a3-filetype,
.portlet-content-desc {
	font-size: var(--nol-text-xs);
	letter-spacing: 0;
	color: var(--nol-text-tlumeny);
	font-variant-numeric: tabular-nums;
}

/* Meta údaje tečou v jednom řádku a zalomí se až na konci — nikdy nestojí
   pod sebou jako sloupec. */
.article-meta,
.article-inside-meta,
.portlet-doc-meta,
.a3-hledani-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--nol-mezera-1) var(--nol-mezera-2);
}

.article-meta {
	margin-bottom: var(--nol-mezera-2);
}

/* Popisek údaje („Zveřejněno:", „Vyvěšeno:") je v rendereru součástí textu,
   oddělit se nedá — váhu proto nese celý údaj a odznak kategorie vedle něj
   se odlišuje plochou.

   `opacity: 1` PŘEBÍJÍ BASELINE, ne kosmetika: `portlet-manager.css` dává
   `.article-meta-datetime` i `.datetime-*` `opacity: 0.75`. Barvu tím ředila
   za zády tokenu — datum aktuality vycházelo světlejší než totéž datum
   v desce (ta žádnou průhlednost nemá) a vedle sebe na titulce to byly dvě
   šedi pro tentýž údaj. Průhlednost je vzhled, ten patří skinu
   (`system_instructions.md` → 7); barvu drží `--nol-text-tlumeny`, který je
   na kontrast vybraný — ředěním klesal pod čitelnou mez. */
.article-meta-datetime,
.datetime-clanek,
.datetime-udalost {
	opacity: 1;
}

.article-meta-datetime {
	display: inline-flex;
	align-items: center;
	font-size: var(--nol-text-xs);
	font-weight: 600;
	color: var(--nol-text-tlumeny);
}

/* Oddělovač „|“ z rendereru — odznak kategorie ho nahrazuje. */
.article-meta-oddelovac {
	display: none;
}

/* Termín akce se odlišuje od data zveřejnění — pro návštěvníka je důležitější. */
.datetime-udalost {
	padding: 0.15rem 0.6rem;
	border-radius: var(--nol-radius-pill);
	background: var(--nol-primarni-svetla);
	color: var(--nol-primarni);
}

/* =========================================================================
   ODZNAK KATEGORIE — jeden tvar a jedno psaní pro celý web
   -------------------------------------------------------------------------
   Odznak se objevuje na ČTYŘECH místech a v každém z nich ho kreslí jiný
   renderer: dlaždice aktuality (`.article-meta-kategorie`), detail aktuality
   (`.cat`), řádek úřední desky (`.a3-deska-kategorie small`) a záložky
   kategorií nad výpisem aktualit (`.a3-kat-zalozka`). Tvar, velikost a psaní
   proto drží JEDNO pravidlo — barvu si každý výskyt dobarvuje níž.

   PSANÍ: kategorie AKTUALIT jsou v datech verzálkami (`AKTUALITY`,
   `UŽITEČNÉ INFORMACE`), kategorie DOKUMENTŮ normálně (`Ostatní`,
   `Hospodaření obce`) — vedle sebe z toho výpis skákal. Sjednocuje to CSS,
   ne migrace: `lowercase` srovná zápis a `::first-letter` vrátí velké
   písmeno na začátek.

   Přepis se ale pouští JEN na kategorie aktualit, ne plošně. Zkratku uvnitř
   názvu CSS poznat neumí, takže by z `Hospodaření svazků obcí (DV, Rakovec)`
   udělal `(dv, rakovec)` — a to je název, který je v datech správně a nemá
   se na co srovnávat. Kategorie dokumentů proto zůstávají, jak jsou; po
   zmenšení těch aktualitních vypadají obě sady stejně.

   Zbývá jediná oběť, `INFO z OÚ` → `Info z oú`. Opraví se přejmenováním
   kategorie v administraci, ne dalším pravidlem v CSS.

   `--a3-kategorie-barva` posílá renderer inline z admin3 (stejná barva jako
   v kalendáři). Barvu si vybírá redaktor, takže se nesmí dostat do textu
   v plné sytosti — světle žlutá kategorie by byla nečitelná. Podklad je jen
   slabý nádech a text drží většinu kontrastu základní barvy písma (platí
   i v tmavém režimu).
   ========================================================================= */

.article-meta-kategorie,
.cat,
.a3-deska-radek .a3-deska-kategorie small,
.a3-kat-zalozka {
	display: inline-block;
	/* tvar je společný; přepis písmen níž jen pro kategorie aktualit */
	margin: 0;
	padding: 0.1rem 0.6rem;
	border-radius: var(--nol-radius-pill);
	font-size: var(--nol-text-xs);
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: 0;
	white-space: nowrap;
}

/* Přepis jen pro kategorie AKTUALIT — viz zdůvodnění v hlavičce sekce. */
.article-meta-kategorie,
.cat,
.a3-kat-zalozka {
	text-transform: lowercase;
}

/* Velké písmeno na začátku. `::first-letter` prochází i vnořeným <a>, takže
   pravidlo platí i pro odznak, který je odkazem na výpis kategorie. */
.article-meta-kategorie::first-letter,
.cat::first-letter,
.a3-kat-zalozka::first-letter {
	text-transform: uppercase;
}

.article-meta-kategorie,
.a3-deska-radek .a3-deska-kategorie small {
	background: color-mix(in srgb, var(--a3-kategorie-barva, var(--nol-text-tlumeny)) 16%, transparent);
	color: color-mix(in srgb, var(--a3-kategorie-barva, var(--nol-text-tlumeny)) 40%, var(--nol-text));
}

/* Odznak je odkaz na výpis kategorie — barvu i tvar drží odznak, odkaz je
   jen aktivní plocha. Podtržení až na hover/fokus, ať se z odznaku nestane
   „obyčejný odkaz" uprostřed meta řádku. */
.article-meta-kategorie a,
.cat a {
	color: inherit;
	text-decoration: none;
}

.article-meta-kategorie a:hover,
.article-meta-kategorie a:focus-visible,
.cat a:hover,
.cat a:focus-visible {
	text-decoration: underline;
}

.article-perex {
	margin: 0;
	color: var(--nol-text-tlumeny);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Perex je v rendereru zabalený do odkazu — v dlaždici má být obyčejný text. */
.article-perex a {
	color: inherit;
	text-decoration: none;
}

/* Detail aktuality. Renderer sem posílá `--a3-kategorie-barva` stejně jako do
   dlaždice (`a3_kategorie_odznak()`), takže odznak nemá důvod být jinak barevný
   než ve výpisu, ze kterého na detail návštěvník přišel. */
.cat {
	margin-left: var(--nol-mezera-2);
	background: color-mix(in srgb, var(--a3-kategorie-barva, var(--nol-text-tlumeny)) 16%, transparent);
	color: color-mix(in srgb, var(--a3-kategorie-barva, var(--nol-text-tlumeny)) 40%, var(--nol-text));
}

@media (max-width: 575px) {

	/* Náhled zůstává VEDLE textu i na mobilu, jen menší a čtvercový.
	   Přes celou šířku displeje z něj byl největší prvek stránky, přestože
	   nese nejmíň informace — u hlášení rozhlasu je to navíc většinou
	   zástupná grafika „Bez náhledu".

	   Šířka je pevná (token), ne procento: pevná šířka slouží flexovému
	   prvku i jako automatické minimum, kdežto procento se při dopočtu
	   min-content chová jako `auto` a minimem sloupce by se stala
	   intrinsická šířka fotky (běžně 1400 px) — výpis by přetekl mimo
	   viewport. `min-width: 0` na textovém sloupci proto zůstává povinné. */
	.article .a3-aktualita-nahled {
		flex: 0 0 var(--nol-aktualita-nahled-mobil);
		width: var(--nol-aktualita-nahled-mobil);
	}

	.article .a3-aktualita-text {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
	}

	.article .article-image img {
		aspect-ratio: 1 / 1;
	}

	.article>.row {
		row-gap: var(--nol-mezera-3);
	}
}

/* ── Detail aktuality ──────────────────────────────────────────────── */

.clanek_titulek {
	font-size: var(--nol-nadpis-1);
	font-weight: 700;
	line-height: var(--nol-vyska-radku-tesna);
	margin-bottom: var(--nol-mezera-3);
}

/* Velikost, barvu i rozestup bere z meta rodiny výš — tady zbývá jen linka,
   která na detailu odděluje hlavičku článku od textu. */
.article-inside-meta {
	padding-bottom: var(--nol-mezera-4);
	margin-bottom: var(--nol-mezera-5);
	border-bottom: 1px solid var(--nol-ramecek);
}

.perex_inside {
	max-width: var(--nol-sirka-textu);
	margin-bottom: var(--nol-mezera-5);
	font-size: var(--nol-text-lg);
	font-weight: 500;
	color: var(--nol-text);
}

.udalost-opakovani {
	display: inline-flex;
	align-items: center;
	gap: var(--nol-mezera-2);
	padding: var(--nol-mezera-2) var(--nol-mezera-4);
	margin-bottom: var(--nol-mezera-4);
	border-radius: var(--nol-radius);
	background: var(--nol-info-pozadi);
	color: var(--nol-info);
	font-size: var(--nol-text-sm);
	font-weight: 600;
}

.text_clanku,
.clanek,
.vypis {
	min-width: 0;
}

/* =========================================================================
   BLOK — otevřená plocha, ne karta
   -------------------------------------------------------------------------
   Výstraha ČHMÚ, webkamera, rozcestník, akordeon, box úřadu, formuláře
   i kalendář rezervací byly do 2026-08 bílé karty s vlasovým rámečkem
   a barevnou hlavičkou. Kartu z nich sundal tenhle blok: rámeček kolem
   portletu neříká nic, co by nebylo vidět z jeho nadpisu, a když jich pod
   sebou stojí pět, je z obsahové části plot z obdélníků. Pohromadě je drží
   NADPIS, MEZERA a VLASOVÁ LINKA.

   Rámeček v obsahu zůstává dvěma věcem: POLI FORMULÁŘE (ovládací prvek, ne
   plocha — `base.css`) a OZNÁMENÍ (`.block`, `.a3-msg-*`, `.a3rez-closed`,
   jednotlivá výstraha ČHMÚ), kde linka i barva nesou význam.

   Kdo sem dopíše `background` nebo `border`, staví kartu zpátky.
   ========================================================================= */

.urad_lista_box,
.accordion .card,
.a3-rozcestnik-panel,
.a3-rozcestnik--seznam>.a3-rozcestnik-seznam,
.a3-odber-form,
.a3kf-form,
.a3rez-form,
.a3rez-cal,
.a3-chmi,
.a3-kamera,
.a3-anketa,
.a3-pocasi {
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

/* Nadpis UVNITŘ bloku — vlasová linka pod textem místo barevné hlavičky.
   Tvar sdílí s nadpisem skupiny dokumentů (`.portlet-content-subtitle`),
   aby „Formuláře" nad výpisem a „Kontakt" nad boxem úřadu byly tentýž
   prvek, ne dva. Velikost je `--nol-text-lg`, tedy stejná jako název
   položky výpisu: nadpis uvnitř portletu nesmí přebít nadpis nad ním. */
.urad_lista_box_nadpis,
.a3-anketa-otazka {
	display: block;
	padding: 0 0 var(--nol-mezera-2);
	margin: 0 0 var(--nol-blok-mezera);
	background: none;
	border-bottom: var(--nol-blok-linka);
	font-family: var(--nol-pismo-nadpis);
	font-size: var(--nol-text-lg);
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: var(--nol-vyska-radku-tesna);
	color: var(--nol-text);
}

/* Renderer sází dva ze tří nadpisů boxu úřadu VERZÁLKAMI („ZNAK OBCE",
   „GEOGRAFICKÉ ÚDAJE"), třetí normálně („Obecní úřad") — pod sebou to byly
   dvě sazby v jednom sloupci. Srovnává je stejný postup jako u kategorií
   aktualit: text na malá, první písmeno zpátky na velké. Bezpečné je to
   proto, že jde o tři pevné řetězce z `info_urad.php`, ne o redakční data
   se zkratkami. */
.urad_lista_box_nadpis {
	text-transform: lowercase;
}

.urad_lista_box_nadpis::first-letter {
	text-transform: uppercase;
}

/* Rozbalovací řádek (souhrn rozcestníku, hlavička akordeonu) je ŘÁDEK VÝPISU,
   ne hlavička karty: stejné odsazení, stejný přesah podbarvení i stejný
   poloměr jako u aktuality. Rozcestník a seznam aktualit pod sebou se pak
   čtou jako jeden web, ne jako dvě komponenty. */
.a3-rozcestnik-panel,
.accordion .card {
	/* Přesah nese OBAL, ne řádek: linka mezi položkami tím sahá přesně tak
	   daleko jako podbarvení řádku pod myší. Kdyby přesah nesl jen řádek,
	   byla by linka o 1,5 rem kratší než plocha, kterou odděluje. */
	margin-inline: calc(-1 * var(--nol-vypis-presah));
	padding-inline: var(--nol-vypis-presah);
	border-bottom: var(--nol-vypis-linka);
}

.a3-rozcestnik-panel:last-child,
.accordion .card:last-child {
	border-bottom: 0;
}

.a3-rozcestnik-sumar,
.accordion .btn-link {
	padding: var(--nol-vypis-radek);
	margin-inline: calc(-1 * var(--nol-vypis-presah));
	background: none;
	border-radius: var(--nol-vypis-radius);
	font-size: var(--nol-text-zakl);
	font-weight: 600;
	color: var(--nol-text);
}

/* ── Důležité oznámení ─────────────────────────────────────────────
   Jediný portlet, který si rámeček PONECHAL. Není to dekorace: oznámení má
   návštěvníka zastavit, takže musí být vidět, že je to vsazený prvek, a ne
   další odstavec stránky. Ostatní portlety jsou otevřené (viz „BLOK" výš)
   — tím právě tenhle vynikne. */

.block {
	margin-bottom: var(--nol-mezera-5);
	background: var(--nol-povrch);
	border: 1px solid var(--nol-ramecek);
	border-radius: var(--nol-radius-lg);
	overflow: hidden;
}

.block_header {
	padding: var(--nol-mezera-3) var(--nol-mezera-4);
	background: var(--nol-povrch-zvyrazneny);
	border-bottom: 1px solid var(--nol-ramecek);
	font-size: var(--nol-text-zakl);
	font-weight: 700;
	color: var(--nol-text);
}

.block_header_text {
	font-size: inherit;
}

.block_content {
	padding: var(--nol-mezera-4);
}

.block_more {
	padding: 0 var(--nol-mezera-4) var(--nol-mezera-4);
}

.block_more a {
	display: inline-flex;
	align-items: center;
	gap: var(--nol-mezera-1);
	font-weight: 600;
	font-size: var(--nol-text-sm);
}

/* Důležité oznámení musí být poznat na první pohled. */
.block-dulezite {
	border-color: var(--nol-chyba);
	border-left-width: 5px;
}

.block-dulezite .block_header {
	background: var(--nol-chyba-pozadi);
	color: var(--nol-chyba);
	border-bottom-color: var(--nol-chyba);
}

/* =========================================================================
   DOPLNĚK — tlumená plocha pro věci KOLEM obsahu
   -------------------------------------------------------------------------
   Filtr nad výpisem aktualit a filtr nad úřední deskou jsou od sjednocení
   (migrace 081) tentýž markup — jedna tlumená karta pro obojí. Grid lišty
   samotné je níž, v sekci úřední desky, a platí pro obě agendy.
   ========================================================================= */

.portlet-search-header,
.a3-portlet-filtr-info {
	padding: var(--nol-mezera-5);
	margin-bottom: var(--nol-mezera-5);
	background: var(--nol-doplnek-pozadi);
	border-radius: var(--nol-doplnek-radius);
}

/* Řádek vysvětlující filtr, který lišta nenabízí jako pole — omezení na den
   z grafického kalendáře. Text vlevo, „Zrušit filtr" hned za ním. */
.a3-portlet-filtr-info {
	font-size: var(--nol-text-sm);
	color: var(--nol-text-tlumeny);
}

.a3-portlet-filtr-info-text {
	font-weight: 600;
}

/* Lišta aktualit bez výběru kategorie (žádná kategorie nemá obsah) má o sloupec
   míň — jinak by tlačítka zůstala viset ve sloupci selectu. */
.a3-aktuality-filtr:not(:has(.search_by_cat)) {
	grid-template-columns: auto minmax(0, 1fr) auto;
}

/* ── Záložky kategorií nad výpisem aktualit ──────────────────────────
   Přepínač kategorie tvarem NAVAZUJE na odznak kategorie v dlaždici (společné
   pravidlo výš): stejná pilulka, stejné psaní, stejná barva. Výpis, jeho filtr
   i záložky pak čte návštěvník jako jednu rodinu prvků, ne jako tři ovládání
   od tří různých autorů. Barvu své kategorie nese záložka v `--a3-kategorie-barva`
   (inline z rendereru), a platí pro ni tatáž opatrnost jako u odznaku: do textu
   jen část, jinak by světlá kategorie byla nečitelná. */

.a3-kat-zalozky {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--nol-mezera-1) var(--nol-mezera-2);
	margin-bottom: var(--nol-mezera-4);
}

.a3-kat-zalozka {
	background: color-mix(in srgb, var(--a3-kategorie-barva, var(--nol-primarni)) 12%, var(--nol-povrch));
	border: 1px solid color-mix(in srgb, var(--a3-kategorie-barva, var(--nol-primarni)) 35%, var(--nol-ramecek));
	color: color-mix(in srgb, var(--a3-kategorie-barva, var(--nol-primarni)) 40%, var(--nol-text));
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--nol-prechod), border-color var(--nol-prechod),
		color var(--nol-prechod);
}

.a3-kat-zalozka:hover {
	background: color-mix(in srgb, var(--a3-kategorie-barva, var(--nol-primarni)) 22%, var(--nol-povrch));
	border-color: color-mix(in srgb, var(--a3-kategorie-barva, var(--nol-primarni)) 65%, var(--nol-ramecek));
}

.a3-kat-zalozka:focus-visible {
	outline: var(--nol-obrys);
	outline-offset: var(--nol-obrys-odsazeni);
}

/* Zapnutá záložka musí být poznat na první pohled i u světlé kategorie —
   proto plná barva značky, ne barva kategorie. */
.a3-kat-zalozka.is-aktivni {
	background: var(--nol-primarni);
	border-color: var(--nol-primarni);
	color: var(--nol-primarni-kontrast);
}

/* ── Úřední deska a dokumenty ──────────────────────────────────────────
   Baseline (portlet-manager.css) kreslí desku jako `display: table`
   s pevnými px šířkami buněk — dlouhý název se do nich nevejde, datum se
   ořízne a tabulka přeteče stránku. Skin ji proto překlápí na TÝŽ tvar,
   jaký má výpis aktualit: název na svém řádku, pod ním tekoucí meta řádek.
   Sloupce ani jejich hlavička ve skinu nejsou vůbec — ani na celé stránce.

   Baseline má na buňkách px šířky se specificitou 0,2,0
   (`.portlet-dokument-prop.portlet-wider-prop`) a skrývání sloupců přes
   `:nth-child` se specificitou 0,3,0, proto i tady dvě až tři třídy.

   `container-type` na kořeni `.a3-deska` zůstává — řídí už jen skládání
   filtru, ale je součástí kontraktu (tatáž deska stojí na celé stránce
   i ve 4/12 sloupci titulky). */

.a3-deska {
	container-type: inline-size;
	/* `deska` = pravidla řádků výpisu, `filtr` = lišta filtru nad ním. Druhé
	   jméno má i `.a3-aktuality`, takže se lišta skládá podle šířky VÝPISU
	   v obou agendách — obě stojí i ve 4/12 sloupci titulky. */
	container-name: deska filtr;
}

.a3-aktuality {
	container-type: inline-size;
	container-name: filtr;
}

.portlet-content-deska,
.portlet-dokument-container {
	min-width: 0;
}

/* Tabulky desky nesmí roztáhnout stránku. */
.portlet-content-deska table,
.portlet-dokument-container table {
	min-width: 34rem;
}

/* Filtr ------------------------------------------------------------- */

.portlet-search-header {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) minmax(0, 15rem) auto;
	gap: var(--nol-mezera-3);
	align-items: center;
}

.portlet-search-col {
	min-width: 0;
}

.a3-deska-filtr-popisek {
	font-size: var(--nol-text-sm);
	font-weight: 600;
	color: var(--nol-text-tlumeny);
	white-space: nowrap;
}

/* Baseline dává poli i tlačítku pevnou výšku 24 px — s odsazením
   formulářových prvků skinu z toho byl uříznutý text a prázdný select. */
.search_by_title,
.search_by_cat {
	width: 100%;
	height: auto;
}

.portlet_cancel_btn {
	height: auto;
	line-height: var(--nol-vyska-radku-tesna);
	padding: 0.5rem 1rem;
	border: 1px solid var(--nol-ramecek-vyrazny);
	border-radius: var(--nol-radius-pill);
	background: var(--nol-povrch);
	color: var(--nol-text-tlumeny);
	font-size: var(--nol-text-sm);
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--nol-prechod), color var(--nol-prechod);
}

.portlet_cancel_btn:hover {
	background: var(--nol-povrch-zvyrazneny);
	color: var(--nol-text);
}

.portlet_cancel_btn:focus-visible {
	outline: var(--nol-obrys);
	outline-offset: var(--nol-obrys-odsazeni);
}

/* Výpis — článkový seznam, ne tabulka --------------------------------

   Deska se kreslí TOTOŽNĚ jako výpis aktualit (`.article`): název na svém
   řádku, pod ním jeden tekoucí meta řádek. Sloupcová tabulka zmizela úplně
   — na titulce stály oba výpisy vedle sebe a mřížka se sloupci vedle článků
   četla jako jiný web. Pravidla proto sdílejí hodnoty s `.article`
   (odsazení, mezery, hover, kegl názvu, tvar odznaku kategorie) a meta
   údaje berou velikost i barvu z rodiny meta řádku výš.

   Reset baseline (obal buněk je `display: table` s rámečkem, buňky
   `table-cell` s px šířkami) tady musí zůstat: u portletu jednoho dokumentu
   je obal buněk a výpis tentýž prvek, takže by mu jinak rámeček zase
   přibyl. */
.a3-deska .portlet-content-formular,
.a3-deska .portlet-content-deska {
	display: block;
	border: 0;
	/* Vodorovné odsazení nese řádek (kvůli podbarvení při hoveru), zpět ho
	   bere obal — text pak stojí na svislici sloupce. Týž postup jako
	   u `.article`, jen tam je záporný margin přímo na položce. */
	margin-inline: calc(-1 * var(--nol-vypis-presah));
}

.a3-deska .a3-deska-tabulka,
.a3-deska .a3-deska-skupina {
	margin-bottom: var(--nol-mezera-5);
	background: transparent;
	border: 0;
}

/* Nadpis kategorie (rozdělená deska) je volný nadpis, ne hlavička karty. */
.a3-deska-skupina .portlet-content-subtitle {
	margin: 0 0 var(--nol-mezera-2);
	padding: 0;
	background: none;
	border: 0;
}

/* Řádek = dlaždice aktuality: název přes celou šířku, pod ním meta řádek,
   který se zalamuje. Hodnoty odsazení a mezer jsou tytéž jako u `.article`. */
.a3-deska .a3-deska-radek {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	width: 100%;
	height: auto;
	gap: var(--nol-mezera-2);
	padding: var(--nol-vypis-radek);
	/* Táž linka jako mezi aktualitami — deska a aktuality stojí na titulce
	   vedle sebe a musí se číst jako jeden výpis. */
	border-bottom: var(--nol-vypis-linka);
	border-radius: var(--nol-vypis-radius);
	transition: background-color var(--nol-prechod);
}

.a3-deska .a3-deska-radek:last-child {
	border-bottom: 0;
}

/* HLAVIČKA SLOUPCŮ SE NEKRESLÍ — sloupce nejsou. Co je které datum, říká
   popisek u samotné hodnoty (`data-a3-popis` → „Vyvěšeno: 14.07.2026"),
   stejně jako u aktuality („Zveřejněno: …"). Renderer hlavičku dál emituje
   kvůli ostatním skinům; pravidlo musí stát ZA pravidlem pro řádek —
   hlavička je taky `.a3-deska-radek` a se shodnou specificitou by ji
   `display: flex` vrátilo zpátky. */
.a3-deska .a3-deska-hlavicka {
	display: none;
}

/* Buňky: pryč s pevnými šířkami a rámečky z baseline. `display: block`
   zároveň přebíjí skrývání sloupců na úzkém okně z baseline (`:nth-child(4)`
   se specificitou 0,3,0 — proto tři třídy i tady); zmizel by údaj, kvůli
   kterému lidi na desku chodí. */
.a3-deska .a3-deska-radek>.a3-deska-nazev,
.a3-deska .a3-deska-radek>.a3-deska-kategorie,
.a3-deska .a3-deska-radek>.a3-deska-udaj {
	display: block;
	width: auto;
	max-width: none;
	padding: 0;
	border: 0;
	text-align: left;
}

.a3-deska .a3-deska-radek>.a3-deska-nazev {
	flex: 1 0 100%;
}

.a3-deska .a3-deska-radek>.a3-deska-udaj {
	flex: 0 0 auto;
}

/* POŘADÍ META ÚDAJŮ je stejné jako u aktuality — nejdřív data, odznak
   kategorie až za nimi. V markupu stojí kategorie PŘED daty, pořadí proto
   srovnává `order`, ne přepis rendereru (ten drží kontrakt pro ostatní
   skiny). Prefix „· " u druhého údaje jede podle pořadí v markupu, takže
   se odznakem nehne — kategorie je z toho řetězu vynechaná. */
.a3-deska .a3-deska-radek>.a3-deska-kategorie {
	order: 1;
}

/* Název se ZALAMUJE — ořez elipsou schovával konec názvu vyhlášky. Kegl,
   řez i písmo jsou tytéž jako u titulku aktuality (`.article-title`): na
   titulce stojí oba výpisy vedle sebe a rozdíl z nich dělal dva weby. */
.a3-deska .a3-deska-nazev {
	font-family: var(--nol-pismo-nadpis);
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: var(--nol-vyska-radku-tesna);
}

.a3-deska .a3-deska-nazev a {
	display: inline;
	font-size: var(--nol-text-lg);
	font-weight: 700;
	line-height: var(--nol-vyska-radku-tesna);
	color: var(--nol-text);
	text-decoration: none;
}

.a3-deska .a3-deska-nazev a:hover {
	color: var(--nol-primarni);
	text-decoration: underline;
}

/* Velikost a barvu bere z meta rodiny výš; váha 600 je táž jako
   u `.article-meta-datetime`. Číslice pod sebou drží `font-variant-numeric`
   z meta rodiny — číslicové písmo tu není, aby datum v desce a datum
   v dlaždici aktuality bylo doslova totéž. */
.a3-deska .a3-deska-udaj {
	font-weight: 600;
	white-space: nowrap;
}

/* Popisek ke každé hodnotě — hlavička je pryč, samotné „14.07.2026" by
   neřeklo, jestli je to vyvěšení nebo sejmutí. */
.a3-deska .a3-deska-udaj[data-a3-popis]::before {
	content: attr(data-a3-popis) ": ";
	font-family: var(--nol-pismo);
	font-size: var(--nol-text-xs);
	font-weight: 600;
	letter-spacing: 0;
}

/* ODDĚLOVAČ MEZI ÚDAJI ŽÁDNÝ NENÍ — údaje odděluje mezera mřížky, stejně
   jako v meta řádku aktuality („Zveřejněno: … [odznak]"). Interpunkce mezi
   nimi (dřív „· ") je navíc: každý údaj má vlastní popisek, takže se nemá
   s čím splést, a tečka uprostřed řádku vypadala jako překlep. */
.a3-deska .a3-deska-kategorie[data-a3-popis]::before {
	content: none;
}

/* Renderer balí hodnotu do `<small>`, kterému prohlížeč dává 80 % velikosti
   rodiče. Po sjednocení buňky na `--nol-text-xs` by z data bylo 10 px — na
   obecním webu nečitelných. Velikost drží buňka, `<small>` je tu jen kvůli
   sémantice rendereru.
   (Ikona typu souboru tím nijak netrpí: baseline jí drží šířku v `rem`,
   ne v `em`, a to je tam schválně — viz komentář u `.a3-fileicon`.) */
.a3-deska small {
	font-size: inherit;
}

/* Kategorie je štítek, ne další sloupec šedého textu. Tvar i podbarvení bere
   ze společného pravidla odznaku výš — VČETNĚ ZÁSKOKU `--nol-text-tlumeny`.
   Kategorie dokumentů nemají v datech vlastní barvu (`dokument_kategorie`
   nemá sloupec `barva`), takže se `--a3-kategorie-barva` nevypíše; kdyby si
   deska držela vlastní záskok v tónu značky, stál by na titulce zelený odznak
   desky vedle šedého odznaku aktuality bez kategorie a byly by to zase dva
   jazyky. Vlastní je tady jen ořez dlouhého názvu. */
.a3-deska-radek .a3-deska-kategorie small {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: baseline;
}

/* Podbarvený je jen řádek pod myší; celoplošné podbarvení všech řádků
   z baseline dělalo z výpisu jednolitou šedou plochu. */
.a3-deska .portlet-row-bg {
	background: transparent;
}

.a3-deska .portlet-row-bg:hover {
	background: var(--nol-vypis-hover);
}

/* VÝJIMKA — soubory ke stažení (název | typ | velikost) zůstávají mřížkou
   i v úzkém sloupci: typ a velikost jsou pár znaků a vejdou se vedle názvu,
   kdežto skládání pod sebe z krátkého výpisu dělá dlouhý sloup. Kontrakt
   `a3-deska-soubory` — system_instructions.md → 7.

   Mřížku drží OBAL a řádky do ní vstupují `subgrid`em, jinak by se sloupce
   mezi řádky nesrovnaly (každý řádek je vlastní mřížka a `auto` sloupec má
   v každém jinou šířku). Prohlížeč bez subgridu spadne na fallback řádku. */
.a3-deska .a3-deska-soubory {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	margin-inline: calc(-1 * var(--nol-mezera-2));
}

.a3-deska .a3-deska-soubory .a3-deska-radek {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	grid-column: 1 / -1;
	align-items: center;
	gap: var(--nol-mezera-1) var(--nol-mezera-3);
	padding: var(--nol-mezera-3) var(--nol-mezera-2);
}

@supports (grid-template-columns: subgrid) {
	.a3-deska .a3-deska-soubory .a3-deska-radek {
		grid-template-columns: subgrid;
	}
}

.a3-deska .a3-deska-soubory .a3-deska-radek>.a3-deska-udaj {
	justify-self: end;
	text-align: right;
}

/* Typ a velikost stojí ve svých sloupcích — popisek by z nich udělal
   „Typ: PDF · Velikost: 240 kB" a řádek by přetekl. */
.a3-deska .a3-deska-soubory .a3-deska-udaj[data-a3-popis]::before {
	content: none;
}

/* Úzký výpis (mobil i boční sloupec): filtr se skládá pod sebe. Samotný
   seznam se nemění — článkový tvar je stejný v každé šířce. */
@container filtr (max-width: 40rem) {
	.portlet-search-header {
		grid-template-columns: 1fr;
	}

	.a3-deska-filtr-popisek,
	.a3-aktuality-filtr-popisek {
		display: none;
	}
}

.portlet-list-all a {
	display: inline-flex;
	align-items: center;
	gap: var(--nol-mezera-1);
	font-weight: 600;
	font-size: var(--nol-text-sm);
}

/* Náhledové dlaždice dokumentů — bez rámečku, jako výpis aktualit.
   Ohraničení nese samotný náhled souboru (`.portlet-doc-thumb`). */
.portlet-doc-tile {
	border-radius: var(--nol-radius);
	overflow: hidden;
	transition: background-color var(--nol-prechod);
}

.portlet-doc-tile:hover {
	background: var(--nol-vypis-hover);
}

.portlet-doc-thumb {
	background: var(--nol-povrch-zvyrazneny);
}

.portlet-doc-caption {
	padding: var(--nol-mezera-3);
}

/* Název dlaždice čte stejně jako název dokumentu v desce a jako titulek
   aktuality — je to táž věc, jen jinak vypsaná, takže i táž rodina, velikost
   a váha. Váha 600 bez rodiny nadpisů z ní dělala čtvrtý řez v témže výpisu. */
.portlet-doc-name {
	font-family: var(--nol-pismo-nadpis);
	font-size: var(--nol-text-lg);
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: var(--nol-vyska-radku-tesna);
	color: var(--nol-text);
}

/* Velikost a barvu bere z meta rodiny. */
.portlet-doc-meta {
	margin-top: var(--nol-mezera-1);
}

/* Odznak typu souboru na náhledu. Barva jde z `--portlet-badge-*`, které se
   v `tokens.css` přemapovaly na tokeny šablony — bez toho zůstane hex
   z baseline a v tmavém režimu na tmavé kartě zhasne. */
.portlet-doc-badge {
	border-radius: var(--nol-radius-sm);
	font-weight: 700;
	letter-spacing: 0.03em;
	color: var(--nol-na-tmave);
}

/* Typ souboru u příloh. Zkratka a ikona stojí na účaří řádku a mají velikost
   meta údaje — ve výpisu souborů to je sloupec vedle názvu, ne samostatný
   prvek. */
.a3-filetype {
	display: inline-flex;
	align-items: center;
	gap: var(--nol-mezera-2);
}

.a3-filetype-zkratka {
	font-weight: 700;
}


/* =========================================================================
   VÝSTRAHY ČHMÚ (portlet `chmi`)
   -------------------------------------------------------------------------
   Odsazení a typografii dodává skin; BARVU STUPNĚ NE. Žlutá, oranžová
   a červená nesou VÝZNAM výstrahy, ne dekoraci, a `system_instructions.md` → 4
   je má jako výslovnou výjimku z pravidla „vzhled patří skinu": skin nesmí
   červenou výstrahu zobrazit jako šedou. Barevný proto zůstává levý pruh
   a ikona z baseline; skin na ně nesahá.

   Obal portletu KARTA NENÍ (viz „BLOK" výš) — rámovaná je jednotlivá
   výstraha, protože ta je OZNÁMENÍ. Bílá karta kolem seznamu výstrah navíc
   škodila: barevný pruh na ní ležel jako proužek na papíře, kdežto na tlumené
   ploše ve vlastní barvě stupně je výstraha čitelná na první pohled i pro
   toho, kdo pruh na okraji přehlédne.
   ========================================================================= */

/* Vnitřní rozestupy si řídí skin: baseline je odvozuje od `--portlet-gap`,
   což je rozestup MEZI portlety (2 rem), a uvnitř výstrahy je to příliš. */
.a3-chmi-vystraha {
	padding: var(--nol-mezera-4);
	margin-bottom: var(--nol-mezera-3);
	border-radius: 0 var(--nol-radius) var(--nol-radius) 0;
	/* Podklad v barvě stupně, jen sneseně slabý. `color-mix` s `transparent`
	   drží průhlednost, takže tón sedne na světlý i na tmavý papír bez
	   druhé sady hodnot. Barvu dodává `--a3-chmi-barva` z baseline — kdo ji
	   tady přebije, přebije význam. */
	background: color-mix(in srgb, var(--a3-chmi-barva, transparent) 9%, transparent);
}

.a3-chmi-vystraha:last-of-type {
	margin-bottom: 0;
}

.a3-chmi-hlava {
	gap: var(--nol-mezera-3);
	align-items: center;
}

.a3-chmi-popis {
	margin-top: var(--nol-mezera-3);
}

/* Název výstrahy je nadpis UVNITŘ portletu (renderer ho emituje jako <h3>),
   takže nesmí být větší než nadpis nad portletem. Velikost proto z rozhraní,
   ne z rodiny nadpisů — stejná úvaha jako u titulku aktuality. */
.a3-chmi-nazev {
	font-family: var(--nol-pismo-nadpis);
	font-size: var(--nol-text-lg);
	font-weight: 700;
	line-height: var(--nol-vyska-radku-tesna);
	color: var(--nol-text);
}

/* Úroveň a platnost jsou meta údaj, ne text — stejný řádek jako datum
   u aktuality. */
.a3-chmi-stitek {
	margin-top: var(--nol-mezera-1);
	font-size: var(--nol-text-xs);
	color: var(--nol-text-tlumeny);
}

/* Úroveň smí nést barvu stupně — je to jediné slovo, které ji pojmenovává. */
.a3-chmi-uroven {
	color: var(--a3-chmi-barva, var(--nol-text));
}

.a3-chmi-popis {
	color: var(--nol-text);
}

/* Doporučení se rozbaluje stejně jako panel rozcestníku — jeden rozbalovací
   prvek na celý web, ne dva. */
.a3-chmi-instrukce-nadpis {
	display: inline-flex;
	align-items: center;
	gap: var(--nol-mezera-2);
	color: var(--nol-primarni);
	font-size: var(--nol-text-sm);
	font-weight: 600;
	list-style: none;
}

.a3-chmi-instrukce-nadpis::marker {
	content: none;
}

.a3-chmi-instrukce-nadpis:hover {
	text-decoration: underline;
}

.a3-chmi-instrukce-text {
	color: var(--nol-text-tlumeny);
	font-size: var(--nol-text-sm);
}

/* Zdroj dat je meta řádek pod výpisem, ne patka karty — linka nad ním by
   v otevřeném bloku uzavírala něco, co nemá stěny. */
.a3-chmi-zdroj {
	margin-top: var(--nol-mezera-3);
	font-size: var(--nol-text-xs);
	color: var(--nol-text-tlumeny);
}

/* TMAVÝ REŽIM STUPŇŮ. Baseline je přebarvuje v `@media (prefers-color-scheme:
   dark)`, jenže tenhle skin systémovou preferenci ZÁMĚRNĚ neposlouchá a jede
   podle `data-rezim` z localStorage. Bez tohohle bloku by výstraha měla světlé
   barvy podle nastavení operačního systému, ne podle přepínače na webu —
   a na tmavé kartě by tmavě červený pruh zmizel.
   Hodnoty jsou tytéž jako v baseline; kdo mění tam, mění i tady. */
:root[data-rezim="tmavy"] .a3-chmi--zelena,
:root[data-rezim="tmavy"] .a3-chmi--klid {
	--a3-chmi-barva: #4ade80;
}

:root[data-rezim="tmavy"] .a3-chmi--zluta {
	--a3-chmi-barva: #fbbf24;
}

:root[data-rezim="tmavy"] .a3-chmi--oranzova {
	--a3-chmi-barva: #fb923c;
}

:root[data-rezim="tmavy"] .a3-chmi--cervena {
	--a3-chmi-barva: #f87171;
}

/* A naopak: ve SVĚTLÉM režimu na stroji s tmavým systémem by baseline media
   query zesvětlila pruh na bílé kartě do nečitelna. Vrací se hodnoty baseline
   pro světlo. */
@media (prefers-color-scheme: dark) {

	:root:not([data-rezim="tmavy"]) .a3-chmi--zelena,
	:root:not([data-rezim="tmavy"]) .a3-chmi--klid {
		--a3-chmi-barva: #15803d;
	}

	:root:not([data-rezim="tmavy"]) .a3-chmi--zluta {
		--a3-chmi-barva: #b45309;
	}

	:root:not([data-rezim="tmavy"]) .a3-chmi--oranzova {
		--a3-chmi-barva: #c2410c;
	}

	:root:not([data-rezim="tmavy"]) .a3-chmi--cervena {
		--a3-chmi-barva: #b91c1c;
	}
}

/* =========================================================================
   WEBKAMERA (portlet `webkamera`)
   -------------------------------------------------------------------------
   Baseline dodá rám s poměrem stran a výplň obrazem; zaoblení a popisek
   jsou na skinu.

   Kamera je OBRAZ, ne karta. Bílý rámeček kolem fotky jen zdvojoval hranu,
   kterou už má sama fotka, takže zaoblení dostal přímo rám snímku — stejně
   jako náhled v galerii a náhled aktuality. Popisek pod ním je meta řádek
   webu (čas snímku je údaj druhé úrovně), ne patka karty.
   ========================================================================= */

/* Rám má vlastní podklad — než se snímek stáhne, nesmí na stránce zůstat
   světlá díra bez tvaru. */
.a3-kamera-ram {
	background: var(--nol-povrch-zvyrazneny);
	border-radius: var(--nol-radius-lg);
	overflow: hidden;
}

.a3-kamera-popisek {
	padding: var(--nol-mezera-3) 0 0;
	font-size: var(--nol-text-xs);
	color: var(--nol-text-tlumeny);
}

.a3-kamera-nazev {
	font-weight: 600;
	color: var(--nol-text);
}

/* Tlačítko zvětšení vkládá JS do rámu, tedy NA fotku — musí být čitelné na
   jakémkoli snímku, proto vlastní tmavý podklad, ne jen `currentColor`. */
.a3-kamera-zvetsit {
	right: var(--nol-mezera-3);
	bottom: var(--nol-mezera-3);
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border-radius: var(--nol-radius-pill);
	background: var(--nol-zaclona-barva);
	color: var(--nol-na-tmave);
	font-size: var(--nol-text-lg);
	transition: background-color var(--nol-prechod);
}

.a3-kamera-zvetsit:hover {
	background: var(--nol-pruh);
}

.a3-kamera-zvetsit:focus-visible {
	outline: var(--nol-obrys);
	outline-offset: calc(-1 * var(--nol-obrys-odsazeni));
}

/* ── Fotogalerie ───────────────────────────────────────────────────── */

/* Řadu náhledů i dlaždic dělá flexový rodič z portlet-manager.css
   (`.portlet-gallery-thumbs` / `.portlet-album-tiles`). Tady se řeší jen rozestup —
   `gap` místo marginů na dětech. `.portlet-content-gallery` obaluje vždy JEDNU fotku,
   mřížka na něm nemá co rozmisťovat. */
.portlet-gallery-thumbs,
.portlet-album-tiles {
	gap: var(--nol-mezera-3);
}

.portlet-gallery-thumbs>.portlet-content-full-gallery,
.portlet-album-tiles>.portlet-fixed-width-container {
	margin-right: 0;
	margin-bottom: 0;
}

.portlet-content-gallery a,
.portlet-content-full-gallery {
	display: block;
	border-radius: var(--nol-radius);
	overflow: hidden;
	background: var(--nol-povrch-zvyrazneny);
}

.portlet-content-gallery img,
.portlet-content-full-gallery img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 0;
	transition: transform var(--nol-prechod-dlouhy), opacity var(--nol-prechod);
}

/* Náhledy fotek uvnitř galerie mají z admin3 vrstvy (portlet-manager.css) pevný
   čtvercový rám. Fotka ho musí vyplnit celý — s pouhým `aspect-ratio: 4/3` výše zbyde
   pod fotkou prázdný pruh podkladu a spodní rohy vypadají useknuté.
   `max-height: none !important` přebíjí `max-height: 100% !important` z admin3 vrstvy
   (baseline se načítá PŘED šablonou, takže při shodné specificitě i váze vyhraje skin). */
a.portlet-content-full-gallery img {
	height: 100%;
	aspect-ratio: auto;
	max-height: none !important;
}

.portlet-content-gallery a:hover img,
.portlet-content-full-gallery:hover img {
	transform: scale(1.04);
}

.portlet-content-photo img {
	border-radius: var(--nol-radius);
}

/* `.portlet-content-subtitle` emitují renderery pro DVĚ různé věci a doteď
   měly obě tutéž velikost, takže popisek pod fotkou vypadal jako nadpis:

     — v `.a3-deska-skupina` je to NADPIS SKUPINY dokumentů („Formuláře"),
     — v mřížce galerií a alb je to POPISEK NÁHLEDU (název galerie).

   Základ je popisek; nadpis skupiny si velikost bere níž. */
.portlet-content-subtitle {
	margin-bottom: var(--nol-mezera-2);
	font-size: var(--nol-text-sm);
	font-weight: 600;
	color: var(--nol-text);
}

.a3-deska-skupina>.portlet-content-subtitle,
.portlet-list-all>.portlet-content-subtitle {
	font-family: var(--nol-pismo-nadpis);
	font-size: var(--nol-text-lg);
	font-weight: 700;
	line-height: var(--nol-vyska-radku-tesna);
	/* Název dokumentu pod ním má tutéž velikost (obojí je „název položky
	   výpisu"), takže rozdíl nese linka — stejná, jakou má hlavička sloupců
	   v tabulkové variantě desky. Bez ní nadpis skupiny splynul s prvním
	   řádkem výpisu. */
	padding-bottom: var(--nol-mezera-2);
	margin-bottom: var(--nol-mezera-2);
	border-bottom: 1px solid var(--nol-ramecek);
}

.portlet-content-desc {
	margin-bottom: var(--nol-mezera-4);
	color: var(--nol-text-tlumeny);
}

/* ── Boxy v bočním panelu ──────────────────────────────────────────── */

/* POZOR na specificitu: baseline dává boxu `padding: var(--portlet-gap)`, tedy
   rozestup MEZI portlety. Barevné záhlaví boxu tím nedosáhlo na okraje karty
   (viselo v ní zapuštěné) a obsah měl odsazení dvakrát — jednou z boxu,
   podruhé z `.portlet-sidebar-content`. Odsazení nese výhradně obsah,
   proto se tady nuluje. */
.portlet-sidebar-box {
	padding: 0;
	margin-bottom: var(--nol-mezera-6);
	background: none;
	border-radius: 0;
}

/* Titulek boxu v panelu je „chrom" webu, ne obsah — verzálky tedy smí (viz
   pravidlo o verzálkách níž). Barevný pruh přes celou šířku z něj ale dělal
   hlavičku karty; zůstává tedy jen zelený text a krátká linka ve značce,
   která odděluje titulek od obsahu bez toho, aby ho zarámovala. */
.portlet-sidebar-title {
	padding: 0 0 var(--nol-mezera-2);
	margin-bottom: var(--nol-mezera-3);
	background: none;
	border-bottom: 2px solid var(--nol-primarni);
	color: var(--nol-primarni);
	font-weight: 700;
	font-size: var(--nol-text-sm);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.portlet-sidebar-content {
	padding: 0;
}

.portlet-subheader {
	font-weight: 700;
	color: var(--nol-text);
	margin-bottom: var(--nol-mezera-2);
}

/* Baseline (`portlet-manager.css`) drží hodnotu na jednom řádku
   s `text-overflow: ellipsis`. V úzkém sloupci tím ale zmizí kus ÚDAJE
   („Jihomoravský" → „Jiho…", GPS bez souřadnic) — na kontaktní stránce je to
   ztráta informace, ne úspora místa. Skin proto nechá hodnotu zalomit. */
.portlet-subcontent {
	color: var(--nol-text-tlumeny);
	font-size: var(--nol-text-sm);
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	overflow-wrap: anywhere;
}

/* =========================================================================
   ANKETA (portlet `anketa`)
   -------------------------------------------------------------------------
   Baseline dodá jen kostru (řádky voleb, dráhu pruhu, skrytý přepínač
   v režimu „jedna odpověď") — barvy, plochy a typografie jsou na skinu
   a doteď chyběly úplně, takže anketa jela na výchozím vzhledu prohlížeče.

   Volba je ŘÁDEK VÝPISU, ne karta: totéž odsazení, tentýž přesah podbarvení
   a týž poloměr jako u aktuality. Vybraná volba se pozná podle plochy ve
   značce, ne podle obrysu — obrys z baseline (`outline: 2px currentColor`)
   se proto přebíjí.
   ========================================================================= */

/* Nadpis ankety (`.a3-anketa-otazka`) bere tvar z pravidla pro nadpis uvnitř
   bloku, viz sekce „BLOK". */

.a3-anketa-popis {
	margin-bottom: var(--nol-blok-mezera);
	max-width: var(--nol-sirka-textu);
	color: var(--nol-text-tlumeny);
}

.a3-anketa-moznosti {
	gap: 0;
	margin-bottom: var(--nol-mezera-4);
}

.a3-anketa-moznost {
	padding: var(--nol-vypis-radek);
	margin-inline: calc(-1 * var(--nol-vypis-presah));
	gap: var(--nol-mezera-3);
	border-bottom: var(--nol-vypis-linka);
	border-radius: var(--nol-vypis-radius);
	font-weight: 500;
	transition: background-color var(--nol-prechod), color var(--nol-prechod);
}

.a3-anketa-moznosti>.a3-anketa-moznost:last-child {
	border-bottom: 0;
}

.a3-anketa-moznost:hover {
	background: var(--nol-vypis-hover);
	color: var(--nol-primarni);
}

.a3-anketa-moznost input {
	width: auto;
	accent-color: var(--nol-primarni);
}

/* Režim „jedna odpověď": kolečko je skryté a volbu nese celý řádek, takže
   ohnisko klávesnice i vybraný stav musí být vidět na ploše. Baseline sahá
   po `outline: currentColor` — to je na papíře šedá čára kolem obdélníku
   a v otevřeném výpisu vypadá jako karta. Tady je z toho plocha ve značce. */
.a3-anketa-form[data-a3-anketa-jedna] .a3-anketa-moznost:focus-within {
	outline: var(--nol-obrys);
	outline-offset: calc(-1 * var(--nol-obrys-odsazeni));
}

.a3-anketa-form[data-a3-anketa-jedna] .a3-anketa-moznost:has(.a3-anketa-vyber:checked) {
	outline: none;
	background: var(--nol-primarni-svetla);
	color: var(--nol-primarni);
	font-weight: 600;
}

/* ── Výsledky ───────────────────────────────────────────────────────── */

.a3-anketa-vysledky {
	gap: var(--nol-mezera-4);
}

.a3-anketa-radek-hlavicka {
	gap: var(--nol-mezera-3);
}

.a3-anketa-radek-text {
	font-weight: 600;
}

.a3-anketa-procenta {
	font-family: var(--nol-pismo-cislice);
	font-variant-numeric: tabular-nums;
	color: var(--nol-primarni);
}

/* POZOR: baseline dává dráze `background: var(--portlet-bg)`, a ten je
   v tomhle skinu `transparent` (portlety kreslí na papír, ne na vlastní
   plochu). Bez vlastní hodnoty by tedy dráha zmizela a z výsledků zůstal
   plovoucí pahýl bez měřítka. */
.a3-anketa-pruh {
	height: 10px;
	margin: var(--nol-mezera-2) 0 var(--nol-mezera-1);
	background: var(--nol-pozadi-tlumene);
	border-radius: var(--nol-radius-pill);
}

.a3-anketa-pruh-vypln {
	background: var(--nol-primarni);
	border-radius: var(--nol-radius-pill);
	transition: width var(--nol-prechod-dlouhy);
}

/* Počty hlasů jsou meta řádek webu — velikost a barva odsud, ne z `opacity`
   baseline (ta ředí barvu za zády tokenu, viz sekce META ŘÁDEK výš). */
.a3-anketa-pocet,
.a3-anketa-celkem,
.a3-anketa-hotovo {
	font-size: var(--nol-text-xs);
	font-variant-numeric: tabular-nums;
	color: var(--nol-text-tlumeny);
	opacity: 1;
}

/* Součet hlasů uzavírá výpis výsledků, takže ho od něj dělí linka. Věta
   „Hlasování bylo uzavřeno." stojí i tam, kde žádné výsledky nejsou —
   linka nad ní by neoddělovala nic. */
.a3-anketa-celkem {
	margin-top: var(--nol-mezera-3);
	padding-top: var(--nol-mezera-3);
	border-top: var(--nol-vypis-linka);
}

.a3-anketa-hotovo {
	margin-top: var(--nol-mezera-3);
}

/* =========================================================================
   POČASÍ (portlet `pocasi`)
   -------------------------------------------------------------------------
   Lišta na papíře, ne widget v kartě: aktuální stav vlevo, řada dnů vpravo.
   Baseline dodá rozvržení a ikony; odsud jde velikost, barva a předěl mezi
   aktuálním stavem a výhledem.
   ========================================================================= */

.a3-pocasi {
	gap: var(--nol-mezera-5) var(--nol-mezera-6);
	align-items: stretch;
}

.a3-pocasi-ted {
	gap: var(--nol-mezera-4);
	color: var(--nol-primarni);
}

/* Teplota je HLAVNÍ údaj celého portletu — jediné číslo, kvůli kterému se na
   lištu kouká. Číslice v tabulkovém řezu, ať neposkakuje mezi „5" a „11". */
.a3-pocasi-teplota {
	font-family: var(--nol-pismo-nadpis);
	font-size: var(--nol-nadpis-2);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: var(--nol-vyska-radku-tesna);
	color: var(--nol-text);
}

.a3-pocasi-jev {
	font-weight: 600;
	color: var(--nol-text);
}

.a3-pocasi-misto,
.a3-pocasi-doplnky {
	font-size: var(--nol-text-xs);
	color: var(--nol-text-tlumeny);
}

.a3-pocasi-doplnky {
	margin-top: var(--nol-mezera-1);
	gap: var(--nol-mezera-1) var(--nol-mezera-4);
	font-variant-numeric: tabular-nums;
}

/* Výhled se od aktuálního stavu dělí vlasovou linkou, ne rámečkem — je to
   předěl uvnitř jedné lišty, ne druhý blok. V úzkém sloupci se lišta zalomí
   a linka musí přeskočit nad řadu dnů, jinak by visela ve vzduchu vpravo. */
.a3-pocasi-dny {
	gap: var(--nol-mezera-4);
	justify-content: space-between;
	padding-left: var(--nol-mezera-6);
	border-left: var(--nol-vypis-linka);
}

/* Práh je TÝŽ jako v baseline (30em), ne o kus jinde: baseline při něm skládá
   aktuální stav a výhled pod sebe. S vlastní hodnotou by mezi oběma prahy
   stála svislice u řady, která už je pod aktuálním stavem, ne vedle něj. */
@container (max-width: 30em) {

	.a3-pocasi-dny {
		padding-left: 0;
		padding-top: var(--nol-mezera-4);
		border-left: 0;
		border-top: var(--nol-vypis-linka);
	}
}

.a3-pocasi-den {
	gap: var(--nol-mezera-1);
	padding: var(--nol-mezera-2);
	border-radius: var(--nol-vypis-radius);
	transition: background-color var(--nol-prechod);
}

.a3-pocasi-den:hover {
	background: var(--nol-vypis-hover);
}

.a3-pocasi-den-nazev {
	font-size: var(--nol-text-xs);
	font-weight: 600;
	color: var(--nol-text-tlumeny);
}

.a3-pocasi-den-ikona {
	color: var(--nol-primarni);
}

.a3-pocasi-den-teploty {
	gap: var(--nol-mezera-2);
	font-size: var(--nol-text-sm);
	font-variant-numeric: tabular-nums;
}

.a3-pocasi-den-max {
	font-weight: 700;
	color: var(--nol-text);
}

.a3-pocasi-den-min,
.a3-pocasi-den-srazky {
	color: var(--nol-text-tlumeny);
}

.a3-pocasi-den-srazky {
	font-size: var(--nol-text-xs);
	font-variant-numeric: tabular-nums;
}

/* Atribuce MET Norway je LICENČNÍ PODMÍNKA, ne dekorace — smí se zmenšit
   a ztlumit, ale nikdy skrýt. */
.a3-pocasi-zdroj {
	margin-top: var(--nol-mezera-2);
	font-size: var(--nol-text-xs);
	color: var(--nol-text-tlumeny);
}

/* ── Kalendář aktualit ─────────────────────────────────────────────── */
/* Widget je admin3-vlastní (admin3_frontend/kalendar.php + portlet-manager.css)
   a barví se přes --a3cal-* proměnné — to je jeho určený rozšiřovací bod.
   Protože míří na tokeny, dostane kalendář tmavý režim i všech pět barevných
   variant zadarmo.
   Dvojité třídy v selektorech níž (`.a3-cal .a3-cal-*`,
   `.a3-cal .responsive-calendar .days .day a`) kopírují specificitu baseline,
   která na tytéž prvky míří přes vnořené selektory. `_head.php` dnes načítá
   portlet-manager.css PŘED šablonou, takže při shodné specificitě vyhrává
   šablona — vyšší specificita je pojistka, ne nutnost. */

.a3-cal {
	--a3cal-accent: var(--nol-primarni);
	--a3cal-day-bg: var(--nol-pozadi-tlumene);
	--a3cal-day-hover: var(--nol-povrch-zvyrazneny);
	--a3cal-day-color: var(--nol-text);
	--a3cal-active-bg: var(--nol-primarni-svetla);
	--a3cal-active-hover: var(--nol-primarni);
	--a3cal-active-color: var(--nol-primarni-tmava);
	--a3cal-today-bg: var(--nol-primarni);
	--a3cal-today-color: var(--nol-primarni-kontrast);
	--a3cal-weekend-bg: var(--nol-povrch-zvyrazneny);
	/* Počet akcí nesmí splynout s podkladem buňky — a tou může být i dnešek
	   v barvě značky. Proto neutrální pár text/pozadí + prstenec níže. */
	--a3cal-badge-bg: var(--nol-text);
	--a3cal-badge-color: var(--nol-pozadi);
	--a3cal-bar-radius: var(--nol-radius-pill);

	/* Bez rámečku a bez bílé karty — dny si nesou vlastní podklad, takže
	   mřížka je čitelná i tak a kalendář sedí vedle deboxovaného výpisu
	   aktualit. */
}

.a3-cal .a3-cal-header {
	gap: var(--nol-mezera-3);
	margin-bottom: var(--nol-mezera-4);
}

/* `.a3-cal-title` je VLASTNÍ titulek portletu — u kalendáře ho nepíše redaktor
   textovým blokem jako u sousedních výpisů, kreslí si ho renderer sám. Na
   titulce proto stojí vedle redaktorova `<h3>Aktuality</h3>` a musí mít tutéž
   velikost, jinak ta dvojice sloupců nečte jako jeden řádek. */
.a3-cal .a3-cal-title {
	font-family: var(--nol-pismo-nadpis);
	font-size: var(--nol-nadpis-3);
	letter-spacing: -0.018em;
}

.a3-cal .a3-cal-title,
.a3-cal .a3-cal-period {
	font-weight: 700;
}

.a3-cal .a3-cal-nav {
	width: 34px;
	height: 34px;
	border: 1px solid var(--nol-ramecek);
	border-radius: var(--nol-radius-pill);
	background: var(--nol-povrch);
	font-size: var(--nol-text-lg);
	cursor: pointer;
	transition: background-color var(--nol-prechod), border-color var(--nol-prechod),
		color var(--nol-prechod);
}

.a3-cal .a3-cal-nav:hover {
	background: var(--nol-primarni-svetla);
	border-color: var(--nol-primarni);
	color: var(--nol-primarni);
}

/* Tvar buňky (barvy dělají proměnné výše). Mřížku baseline kreslí 1px rámečky
   `--a3cal-gridline`; skin místo nich chce odsazené dlaždice, proto `border: 0`
   + `margin` — a proto o třídu specifičtější selektor. */
.a3-cal .responsive-calendar .days .day a {
	border: 0;
	border-radius: var(--nol-radius-sm);
	margin: 2px;
	font-variant-numeric: tabular-nums;
	transition: background-color var(--nol-prechod), color var(--nol-prechod);
}

/* Najetí na den s akcí = plná barva značky (jinak by baseline hover prohrál
   specificitou s podbarvením aktivního dne a den by nedal žádnou odezvu). */
.a3-cal .responsive-calendar .day.active a:hover {
	color: var(--nol-primarni-kontrast);
}

/* Prstenec v barvě karty odděluje počet od jakéhokoli podkladu buňky. */
.a3-cal .responsive-calendar .day .badge {
	box-shadow: 0 0 0 2px var(--nol-povrch);
}

.a3-cal .a3-cal-legend {
	gap: var(--nol-mezera-2) var(--nol-mezera-4);
	margin-top: var(--nol-mezera-4);
	padding-top: var(--nol-mezera-3);
	border-top: 1px solid var(--nol-ramecek);
	color: var(--nol-text-tlumeny);
}

/* Legenda nese TYTÉŽ názvy kategorií jako odznaky ve výpisu (`AKCE`,
   `INFO z OÚ`), takže se sází stejně — jinak by na titulce stály vedle sebe
   „Aktuality" v odznaku a „AKTUALITY" v legendě.

   POZOR na dvě věci, bez kterých `::first-letter` mlčky NEZABERE:
     1) baseline dává položce `display: inline-flex` a ve flexovém kontejneru
        se `::first-letter` neuplatňuje vůbec — proto `inline-block`;
     2) vzorek barvy stojí v markupu PŘED textem, takže by prvním obsahem
        řádku nebylo písmeno — proto se vyvěsí z toku `position: absolute`
        a místo pro něj drží `padding-left`.
   Obojí je nutnost, ne ladění; kdo tu sáhne na `display` nebo na pozici
   vzorku, shodí velké písmeno na začátku názvu kategorie. */
.a3-cal .a3-cal-legend-item {
	position: relative;
	display: inline-block;
	padding-left: calc(16px + var(--nol-mezera-2));
	font-size: var(--nol-text-xs);
	text-transform: lowercase;
}

.a3-cal .a3-cal-legend-item::first-letter {
	text-transform: uppercase;
}

/* Vzorek má stejný tvar jako pruh v buňce — legenda pak čte jako klíč k mřížce,
   ne jako druhá sada symbolů. Z toku je vyvěšený kvůli `::first-letter` výš. */
.a3-cal .a3-cal-legend-swatch {
	position: absolute;
	left: 0;
	top: 50%;
	margin-top: calc(var(--a3cal-bar-height) / -2);
	width: 16px;
	height: var(--a3cal-bar-height);
	border-radius: var(--nol-radius-pill);
}

/* ── Stránkování ───────────────────────────────────────────────────── */

/* Renderer vypisuje pager NAD výpisem i POD ním. Nahoře je to čtyři řádky
   ovládání dřív, než návštěvník uvidí první aktualitu — a u čtyřpoložkového
   výpisu na titulce úplný nesmysl. Skin nechává jen ten spodní; markup
   rendereru zůstává nedotčený (jen se neukazuje). */
.strankovani.a3-pager[data-pager-pos="top"] {
	display: none;
}

.strankovani.a3-pager {
	display: flex;
	flex-wrap: wrap;
	gap: var(--nol-mezera-2);
	justify-content: left;
	margin-top: var(--nol-mezera-6);
	margin-bottom: 0;
	/* Popisek „Stránky" z rendereru je textový uzel bez obalu — nedá se
	   zaměřit selektorem, ale jako flexová položka sedí v řadě s tlačítky. */
	align-items: center;
	font-size: var(--nol-text-sm);
	color: var(--nol-text-tlumeny);
}

.strankovani.a3-pager a,
.strankovani.a3-pager span,
.strankovani.a3-pager strong {
	display: inline-grid;
	place-items: center;
	min-width: 40px;
	height: 40px;
	padding-inline: var(--nol-mezera-3);
	border: 1px solid var(--nol-ramecek);
	border-radius: var(--nol-radius-pill);
	background: var(--nol-povrch);
	color: var(--nol-text);
	font-weight: 600;
	font-size: var(--nol-text-sm);
	text-decoration: none;
	transition: background-color var(--nol-prechod), border-color var(--nol-prechod),
		color var(--nol-prechod);
}

.strankovani.a3-pager a:hover {
	background: var(--nol-primarni-svetla);
	border-color: var(--nol-primarni);
	color: var(--nol-primarni);
}

/* Aktuální stránka je <strong> bez odkazu — musí být vidět, že je vybraná. */
.strankovani.a3-pager strong {
	background: var(--nol-primarni);
	border-color: var(--nol-primarni);
	color: var(--nol-primarni-kontrast);
}

.strankovani.a3-pager .pager-disabled {
	opacity: 0.45;
}

/* Šipky mají vlastní kolečkový rámeček (viz výše) — hranaté závorky z baseline
   markupu (pro skiny bez CSS) tu jsou navíc a vypadají rozbitě, schováme je. */
.strankovani.a3-pager .a3-pager-bracket {
	display: none;
}

.a3-portlet-paged {
	position: relative;
}

.a3-pager-loading {
	opacity: 0.55;
}

/* ── Hlášky ────────────────────────────────────────────────────────── */

.a3-msg {
	padding: var(--nol-mezera-3) var(--nol-mezera-4);
	margin-bottom: var(--nol-mezera-4);
	border: 1px solid transparent;
	border-left-width: 4px;
	border-radius: var(--nol-radius);
	font-size: var(--nol-text-sm);
}

.a3-msg-ok {
	background: var(--nol-uspech-pozadi);
	border-color: var(--nol-uspech);
	color: var(--nol-uspech);
}

.a3-msg-err {
	background: var(--nol-chyba-pozadi);
	border-color: var(--nol-chyba);
	color: var(--nol-chyba);
}

.a3-msg-warning {
	background: var(--nol-vystraha-pozadi);
	border-color: var(--nol-vystraha);
	color: var(--nol-vystraha);
}

.a3-msg-info {
	background: var(--nol-info-pozadi);
	border-color: var(--nol-info);
	color: var(--nol-info);
}

/* ── Informace o úřadu / povinné informace ─────────────────────────── */

.info_left_normal {
	min-width: 0;
}

.info_novy_nadpis,
.povinf_heading {
	margin-top: var(--nol-mezera-6);
	margin-bottom: var(--nol-mezera-3);
	padding-bottom: var(--nol-mezera-2);
	border-bottom: 2px solid var(--nol-primarni);
	font-size: var(--nol-nadpis-3);
	font-weight: 700;
}

.povinf_oddil {
	padding: var(--nol-mezera-4) 0;
	max-width: var(--nol-sirka-textu);
	/* Kotva z obsahu dokumentu — odstup pod lepivou hlavičku (baseline čte
	   `--a3-kotva-odstup`, `html { scroll-padding-top }` v base.css drží zbytek). */
	--a3-kotva-odstup: calc(var(--nol-vyska-hlavicky) + var(--nol-mezera-4));
}

.povinf_obsah {
	list-style: none;
	margin: 0 0 var(--nol-mezera-4);
	padding: 0;
	max-width: var(--nol-sirka-textu);
}

.povinf_obsah li {
	margin-bottom: var(--nol-mezera-1);
}

.oddelovnik {
	height: 1px;
	background: var(--nol-ramecek);
	margin: var(--nol-mezera-4) 0;
}

.urad_lista_box {
	margin-bottom: var(--nol-mezera-4);
}

/* Nadpis boxu úřadu bere tvar z pravidla pro nadpis uvnitř bloku („BLOK"
   výš). Obsah nemá stěny, od kterých by se odsazoval. */
.urad_lista_box_obsah {
	padding: 0;
}

/* Geografické údaje — dvojice popisek/hodnota (dřív jednosloupcová tabulka,
   ta si od `table`/`td` brala rámečky a vodorovné rolování z nol.js). */
.a3-info-geo dt {
	font-size: var(--nol-text-xs);
	font-weight: 600;
	letter-spacing: 0;
	color: var(--nol-text-tlumeny);
}

.a3-info-geo dd+dt {
	margin-top: var(--nol-mezera-3);
	padding-top: var(--nol-mezera-3);
	border-top: 1px solid var(--nol-ramecek);
}

.a3-info-geo dd {
	font-size: var(--nol-text-sm);
}

/* ── Kontaktní údaje (redakční HTML z migrace) ──────────────────────
   Markup píše redaktor v editoru a je to mřížka Bootstrapu 3:
   `.info-box > .row > .col-sm-4.info-th + .col-sm-8.info-td`. Skin ho jen
   obléká — měnit se nesmí, je to obsah.

   Řádky uvnitř boxu si z mřížky BS5 nesou záporné vodorovné okraje
   (`--bs-gutter-x`), takže bez vynulování text vylézal z odsazení boxu ven
   až na jeho hranu a dvojice popisek/hodnota se slévaly do jednoho bloku.
   Vynulovat gutter ale znamená dodat vlastní mezeru mezi sloupci — odtud
   `padding-right` na popisku. */

/* Selektor je dvoutřídový SCHVÁLNĚ: baseline míří `.portlet .info-box`
   a jednotřídové pravidlo skinu prohrávalo specificitou, takže box měl
   odsazení 7 px a text seděl na jeho hraně. Totéž platí pro `.info-title`
   níž (`.portlet .info-title` v baseline). */
.info-box,
.portlet .info-box {
	--bs-gutter-x: 0;
	padding: var(--nol-mezera-2) var(--nol-mezera-5) var(--nol-mezera-4);
	margin-bottom: var(--nol-mezera-4);
	background: var(--nol-doplnek-pozadi);
	border-radius: var(--nol-doplnek-radius);
}

/* Nadpis kontaktního boxu je nadpis skupiny údajů — stejná role jako
   `.portlet-content-subtitle` nad skupinou dokumentů, tedy i stejná podoba
   včetně vlasové linky pod ním. Dvoutřídový selektor kvůli specificitě
   baseline (viz `.info-box` výš). */
.info-title,
.portlet .info-title {
	display: block;
	margin: 0 0 var(--nol-mezera-2);
	padding-top: var(--nol-mezera-3);
	padding-bottom: var(--nol-mezera-2);
	border-bottom: 1px solid var(--nol-ramecek);
	font-family: var(--nol-pismo-nadpis);
	font-size: var(--nol-text-lg);
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: var(--nol-vyska-radku-tesna);
	color: var(--nol-text);
}

.info-box .row {
	padding-block: var(--nol-mezera-2);
}

.info-box .row + .row {
	border-top: 1px solid var(--nol-ramecek);
}

.info-th {
	padding-right: var(--nol-mezera-4);
	font-weight: 600;
}

/* E-mail ani číslo účtu se nesmí protlačit přes hranu sloupce. */
.info-td {
	overflow-wrap: anywhere;
}

/* ── Veřejné formuláře — společný vzhled ───────────────────────────── */

/* Tři veřejné formuláře webu nemají vypadat jako tři weby — společná je
   podoba i míra. Karta kolem nich není (viz „BLOK" výš): pole formuláře mají
   vlastní rámeček, takže je na první pohled poznat, kam se píše, a druhý
   rámeček kolem nich byl obal bez obsahu.

   Šířka je ale POVINNÁ. Bez karty by se pole roztáhla přes celou obsahovou
   část (až 1280 px) — do takového pole se nepíše jméno a formulář o třech
   řádcích v něm vypadá jako prázdná stránka. */
.a3-odber-form,
.a3kf-form,
.a3rez-form {
	max-width: var(--nol-sirka-formulare);
	overflow: visible;
}

/* Doprovodné a prázdné stavy. Popis nad formulářem, „rezervace jsou uzavřeny",
   „kalendář zatím není vybrán" — všechno jsou to VĚTY ke čtení, ne prvky
   rozhraní, takže žádná vlastní plocha ani rámeček; jen tlumený text v šířce
   pohodlné ke čtení. Uzavřený kalendář je výjimka: to je stav, ne poznámka,
   a nese ho hláška `.a3-msg-warning` (kontrakt admin3). */
.a3rez-popis,
.a3kf-popis,
.a3rez-note,
.a3rez-empty,
.a3kf-empty {
	margin-bottom: var(--nol-mezera-4);
	max-width: var(--nol-sirka-textu);
	color: var(--nol-text-tlumeny);
}

.a3rez-closed {
	padding: var(--nol-mezera-3) var(--nol-mezera-4);
	margin-bottom: var(--nol-mezera-4);
	border: 1px solid var(--nol-vystraha);
	border-left-width: 4px;
	border-radius: var(--nol-radius);
	background: var(--nol-vystraha-pozadi);
	color: var(--nol-vystraha);
	font-size: var(--nol-text-sm);
	font-weight: 600;
}

/* Stavový text („Ověřuji prohlížeč…") a výpis chybějících polí drží sdílená
   rodina `.a3-form-*` — prvky odběru i rezervace nesou obě jména tříd, takže
   jedno pravidlo stačí všem formulářům. */
.a3-form-cekejte {
	color: var(--nol-text-tlumeny);
	font-size: var(--nol-text-sm);
}

.a3-form-missing {
	color: var(--nol-chyba);
}

.a3-form-noscript {
	color: var(--nol-text-tlumeny);
	font-size: var(--nol-text-sm);
}

/* ── Kontaktní formulář (elektronická podatelna) ───────────────────── */

.a3kf-popis {
	margin-bottom: var(--nol-mezera-4);
	max-width: var(--nol-sirka-textu);
}

/* Odsazení nese SKUPINA pole, ne vstup — jinak nápověda pod inputem odplave
   od svého popisku a přilepí se k dalšímu poli. */
.a3kf-pole,
.a3kf-check,
.a3kf-gdpr {
	margin-bottom: var(--nol-mezera-4);
}

/* Popisky jako v odběru, kde je nese <strong>. Váha patří do CSS, ne do
   markupu — pole se generují z definice formuláře v administraci. */
.a3kf-pole>label {
	font-weight: 700;
}

.a3kf-check input,
.a3kf-gdpr input {
	width: auto;
}

.a3kf-napoveda {
	margin-top: var(--nol-mezera-1);
	color: var(--nol-text-tlumeny);
	font-size: var(--nol-text-sm);
	opacity: 1;
}

.a3kf-submit {
	margin-top: var(--nol-mezera-2);
}

/* ── Odběr novinek ─────────────────────────────────────────────────── */

/* Baseline míří `.a3-odber-form .a3-odber-radek`, tedy dvěma třídami —
   jednotřídové pravidlo skinu by prohrálo specificitou a řádek by si vzal
   rozestup MEZI portlety. */
.a3-odber-form .a3-odber-radek {
	margin-bottom: var(--nol-mezera-4);
}

.a3-odber-sekce {
	margin-top: var(--nol-mezera-5);
	padding-top: var(--nol-mezera-4);
	border-top: 1px solid var(--nol-ramecek);
}

.a3-odber-sekce-nazev {
	display: block;
	margin-bottom: var(--nol-mezera-2);
}

.a3-odber-volba {
	display: flex;
	align-items: flex-start;
	gap: var(--nol-mezera-2);
	margin-bottom: var(--nol-mezera-2);
}

.a3-odber-volba input {
	width: auto;
}

/* sbalený výběr jednotlivých kategorií */
.a3-odber-vyber>summary {
	color: var(--nol-primarni);
	font-size: var(--nol-text-sm);
	padding: var(--nol-mezera-1) 0;
}

.a3-odber-vyber>summary:hover {
	text-decoration: underline;
}

.a3-odber-vyber ul {
	margin-left: var(--nol-mezera-4);
}

.a3-odber-vyber li label {
	display: flex;
	align-items: flex-start;
	gap: var(--nol-mezera-2);
	margin-bottom: var(--nol-mezera-1);
}

.a3-odber-vyber li input {
	width: auto;
}

/* ── Rezervace ─────────────────────────────────────────────────────── */

/* Kalendář si mřížku kreslí sám (FullCalendar) — linky uvnitř nese, protože
   oddělují DNY, a to je funkce, ne dekorace. Vnější rámeček by je jen
   zdvojil. */
.a3rez-cal {
	margin-bottom: var(--nol-mezera-6);
}

/* Podoba formuláře je společná všem veřejným formulářům — viz sekce
   „Veřejné formuláře" výš. */

.a3rez-field {
	margin-bottom: var(--nol-mezera-4);
}

/* Řádek Datum / Od / Do. Rozvržení (Datum přes celou šířku, Od a Do na půl) drží
   portlet-manager.css — tady jen odsazení v tokenech šablony. */
.a3rez-termin {
	gap: var(--nol-mezera-3);
	margin-bottom: var(--nol-mezera-4);
}

/* Datum je text input s flatpickrem, Od/Do jsou <select> s nabídkou povolených
   časů — obojí má vypadat jako jedno pole formuláře, tedy stejná výška. */
.a3rez-termin .a3rez-i-datum,
.a3rez-termin .a3rez-i-cas {
	padding-top: var(--nol-mezera-2);
	padding-bottom: var(--nol-mezera-2);
}

/* Vlastní šipka místo nativní — tu kreslí každý prohlížeč jinak. Trojúhelník
   z rámečků se barví `currentColor`, takže sedí ve světlém i tmavém režimu.
   `pointer-events: none`, jinak by klik na šipku select neotevřel. */
.a3rez-termin .a3rez-i-cas {
	appearance: none;
	-webkit-appearance: none;
	padding-right: var(--nol-mezera-6);
}

.a3rez-cas-obal::after {
	content: '';
	position: absolute;
	top: 50%;
	right: var(--nol-mezera-3);
	width: 0;
	height: 0;
	margin-top: -0.15em;
	border-left: 0.3em solid transparent;
	border-right: 0.3em solid transparent;
	border-top: 0.35em solid currentColor;
	opacity: 0.6;
	pointer-events: none;
}

/* Nedostupné časy (minulost, mimo povolené hodiny, uzavření) — šrafura, ať je
   šeď čitelná i pro toho, kdo barvy nerozliší. Vlastní výběr naopak plnou barvou. */
.fc .a3rez-off {
	background: var(--nol-pozadi-tlumene);
}

.fc .a3rez-mysel {
	background: var(--nol-primarni);
	opacity: 0.35;
}

.fc .fc-day.a3rez-den-off {
	background: var(--nol-pozadi-tlumene);
}

.a3rez-selected {
	margin: var(--nol-mezera-3) 0;
	color: var(--nol-text-tlumeny);
	font-size: var(--nol-text-sm);
}

.a3rez-selected-err {
	color: var(--nol-chyba);
}

.a3rez-gdpr {
	display: flex;
	align-items: flex-start;
	gap: var(--nol-mezera-2);
	margin-bottom: var(--nol-mezera-4);
	font-size: var(--nol-text-sm);
}

.a3rez-gdpr input {
	width: auto;
}

.a3rez-missing {
	border-color: var(--nol-chyba) !important;
}

.a3rez-submit.is-loading {
	opacity: 0.65;
	pointer-events: none;
}

/* ── Akordeon ([[rozbalovaci_podstranky]]) ─────────────────────────── */

/* Akordeon je VÝPIS rozbalovacích řádků. Karta kolem každé položky z něj
   dělala hromádku obdélníků; teď je to seznam s vlasovými linkami — stejně
   jako výpis aktualit nebo úřední deska o kus výš na stránce. Linku i přesah
   nese obal, viz společné pravidlo v sekci „BLOK". */

.accordion .card-header {
	padding: 0;
	background: none;
}

.accordion .card-header h2 {
	margin: 0;
	font-size: inherit;
}

/* Odsazení, přesah podbarvení i velikost bere ze společného pravidla pro
   rozbalovací řádek („BLOK" výš); váha je 600, ne 700 — je to ovládací
   prvek, ne nadpis sekce. */
.accordion .btn-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--nol-mezera-3);
	/* NE `width: 100%`: řádek si vodorovný přesah bere záporným okrajem,
	   a pevná stoprocentní šířka počítá ze SVÉHO obalu — podbarvení by pak
	   vlevo přesahovalo a vpravo končilo o tentýž kus dřív. `auto` u flexového
	   bloku dopočte šířku včetně záporných okrajů. */
	width: auto;
	border: 0;
	background: transparent;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	transition: color var(--nol-prechod), background-color var(--nol-prechod);
}

.accordion .btn-link:hover {
	background: var(--nol-vypis-hover);
	color: var(--nol-primarni);
}

.accordion .btn-link::after {
	content: '';
	flex: none;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid currentColor;
	transition: transform var(--nol-prechod);
}

.accordion .btn-link.collapsed::after {
	transform: rotate(-90deg);
}

/* Tělo je odsazené jen zleva, aby bylo poznat, že patří k řádku nad ním —
   výplň dokola by z otevřené položky zase udělala kartu. */
.accordion .card-body {
	padding: 0 0 var(--nol-mezera-5) var(--nol-mezera-4);
}

/* ── Rozcestník (portlet 'rozcestnik') ─────────────────────────────── */

/* Společné pro všechny tři režimy. Kostra (rozvržení, odsazení úrovní,
   skrytí nativního trojúhelníku <details>) je v portlet-manager.css. */

.a3-rozcestnik-sipka {
	flex: none;
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 6px solid currentColor;
	opacity: 0.55;
	transition: transform var(--nol-prechod), opacity var(--nol-prechod);
}

/* ── režim „seznam" ── */

/* Řádek rozcestníku = řádek výpisu: totéž odsazení, tentýž přesah podbarvení
   i táž linka jako u aktuality a u řádku desky. Odkazy na úřad tak stojí na
   stejné svislici jako aktuality nad nimi. */
.a3-rozcestnik--seznam .a3-rozcestnik-odkaz {
	padding: var(--nol-vypis-radek);
	margin-inline: calc(-1 * var(--nol-vypis-presah));
	border-bottom: var(--nol-vypis-linka);
	border-radius: var(--nol-vypis-radius);
	color: var(--nol-text);
	font-weight: 600;
	transition: color var(--nol-prechod), background-color var(--nol-prechod);
}

/* Seznam si vynuluje typografii <ul>; kartu kolem něj skin nekreslí. */
.a3-rozcestnik--seznam>.a3-rozcestnik-seznam {
	margin: 0;
}

/* Poslední řádek celého výpisu bez linky — výpis nemá dno, které by uzavírala. */
.a3-rozcestnik--seznam>.a3-rozcestnik-seznam>.a3-rozcestnik-polozka:last-child>.a3-rozcestnik-odkaz {
	border-bottom: 0;
}

.a3-rozcestnik--seznam .a3-rozcestnik-odkaz:hover {
	background: var(--nol-vypis-hover);
	color: var(--nol-primarni);
}

.a3-rozcestnik--seznam .a3-rozcestnik-odkaz:hover .a3-rozcestnik-sipka {
	opacity: 1;
	transform: translateX(3px);
}

/* Podúrovně: tlumenější a lehčí než hlavní řádek, odsazení drží kostra. */
.a3-rozcestnik--seznam .a3-rozcestnik-seznam .a3-rozcestnik-seznam .a3-rozcestnik-odkaz {
	font-weight: 400;
	font-size: var(--nol-text-sm);
	color: var(--nol-text-tlumeny);
}

/* ── režim „dlaždice" ── */

/* Dlaždice v obsahu (mimo pás úkonů na titulce) je taky jen položka výpisu,
   jen srovnaná do mřížky. Místo rámečku ji drží pohromadě zlatá svislice
   ve značce a podbarvení pod myší — plot z bílých obdélníků v obsahu nemá
   co dělat. */
.a3-rozcestnik-dlazdice-polozka {
	position: relative;
	padding: var(--nol-mezera-4) var(--nol-mezera-4) var(--nol-mezera-4) var(--nol-mezera-5);
	border-radius: var(--nol-vypis-radius);
	transition: background-color var(--nol-prechod);
}

.a3-rozcestnik-dlazdice-polozka::before {
	content: '';
	position: absolute;
	inset: var(--nol-mezera-1) auto var(--nol-mezera-1) 0;
	width: 3px;
	border-radius: var(--nol-radius-pill);
	background: var(--nol-ramecek-vyrazny);
	transition: background-color var(--nol-prechod);
}

.a3-rozcestnik-dlazdice-polozka:hover {
	background: var(--nol-vypis-hover);
}

.a3-rozcestnik-dlazdice-polozka:hover::before,
.a3-rozcestnik-dlazdice-polozka:focus-within::before {
	background: var(--nol-zlata);
}

.a3-rozcestnik-dlazdice-odkaz {
	color: var(--nol-text);
	font-weight: 600;
	font-size: var(--nol-text-lg);
	line-height: 1.3;
}

.a3-rozcestnik-dlazdice-polozka:hover .a3-rozcestnik-dlazdice-odkaz {
	color: var(--nol-primarni);
}

.a3-rozcestnik-podseznam {
	margin-top: var(--nol-mezera-2);
	font-size: var(--nol-text-sm);
}

.a3-rozcestnik-podseznam a {
	display: block;
	padding: var(--nol-mezera-1) 0;
	color: var(--nol-text-tlumeny);
	text-decoration: none;
}

.a3-rozcestnik-podseznam a:hover {
	color: var(--nol-primarni);
	text-decoration: underline;
}

/* ── režim „rozbalovací obsah" ── */

/* Rozbalovací panel je řádek výpisu, ne karta — linku i přesah nese obal,
   viz společné pravidlo v sekci „BLOK". */

.a3-rozcestnik-sumar {
	transition: color var(--nol-prechod), background-color var(--nol-prechod);
}

.a3-rozcestnik-sumar:hover {
	background: var(--nol-vypis-hover);
	color: var(--nol-primarni);
}

/* Šipka ukazuje doprava, po rozbalení dolů. */
.a3-rozcestnik-panel[open]>.a3-rozcestnik-sumar .a3-rozcestnik-sipka {
	transform: rotate(90deg);
	opacity: 1;
}

/* Obsah je odsazený jen zleva — patří pod svůj řádek, ale nemá stěny. */
.a3-rozcestnik-obsah {
	padding: 0 0 var(--nol-mezera-4) var(--nol-mezera-4);
}

/* Vnořený panel uvnitř obsahu — bez vlastního odsazení navíc, hierarchii nese
   už samo zanoření v rámečku. */
.a3-rozcestnik-obsah>.a3-rozcestnik-panel:first-of-type {
	margin-top: var(--nol-mezera-3);
}

/* ── Náhled konceptu ───────────────────────────────────────────────── */

.a3-preview-banner,
.preview-banner {
	padding: var(--nol-mezera-3) var(--nol-mezera-4);
	margin-bottom: var(--nol-mezera-4);
	background: var(--nol-vystraha-pozadi);
	border: 1px solid var(--nol-vystraha);
	border-radius: var(--nol-radius);
	color: var(--nol-vystraha);
	font-weight: 600;
}

/* ── Datepicker (flatpickr) ────────────────────────────────────────────
   Vendor CSS vozí funkční vzhled sám — tohle je jen obléknutí do tokenů
   šablony. Kalendář se kreslí do <body>, takže se musí vejít nad lepivou
   hlavičku i nad mobilní panel. */

.flatpickr-calendar {
	z-index: var(--nol-vrstva-menu);
	border-radius: var(--nol-radius);
	box-shadow: var(--nol-stin-lg);
}

.flatpickr-day {
	border-radius: var(--nol-radius-sm);
}

.flatpickr-day:hover,
.flatpickr-day:focus {
	background: var(--nol-primarni-svetla);
	border-color: var(--nol-primarni-svetla);
	color: var(--nol-primarni);
}

.flatpickr-day.today {
	background: var(--nol-primarni-svetla);
	border-color: var(--nol-primarni-svetla);
	color: var(--nol-primarni);
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus {
	background: var(--nol-primarni);
	border-color: var(--nol-primarni);
	color: var(--nol-primarni-kontrast);
}
/* =========================================================================
   VYHLEDÁVÁNÍ — výsledková stránka, AI odpověď, našeptávač
   Kontrakt `a3-hledani-*` / `a3-naseptavac-*` emituje admin3
   (admin3_frontend/hledani.php, ai.php); kostra je v portlet-manager.css.
   ========================================================================= */

.a3-hledani-souhrn {
	color: var(--nol-text-tlumeny);
	margin-bottom: var(--nol-mezera-4);
}

.a3-hledani-dotaz {
	color: var(--nol-text);
	font-weight: 600;
}

.a3-hledani-navrh {
	background: var(--nol-doplnek-pozadi);
	border-radius: var(--nol-doplnek-radius);
	padding: var(--nol-mezera-3) var(--nol-mezera-4);
}

/* Karta „Jak si zařídit" — odpověď na situaci, ne obyčejný výsledek. */
.a3-hledani-karta {
	background: var(--nol-primarni-svetla);
	border-left: 4px solid var(--nol-primarni);
	border-radius: var(--nol-radius);
	padding: var(--nol-mezera-4) var(--nol-mezera-5);
	margin-bottom: var(--nol-mezera-5);
}

.a3-hledani-karta-stitek {
	color: var(--nol-primarni);
	font-size: var(--nol-text-xs);
	font-weight: 700;
	letter-spacing: 0;
}

.a3-hledani-karta-nadpis {
	font-size: var(--nol-nadpis-2);
	margin: var(--nol-mezera-1) 0 var(--nol-mezera-2);
}

.a3-hledani-karta-text,
.a3-hledani-karta-odkaz { margin: 0; }

.a3-hledani-karta-odkaz { margin-top: var(--nol-mezera-3); }

/* Filtry typů — stejná pilulka jako ostatní přepínače ve skinu. */
.a3-hledani-filtry { margin-bottom: var(--nol-mezera-5); }

.a3-hledani-filtr {
	background: var(--nol-povrch);
	border: 1px solid var(--nol-ramecek);
	border-radius: var(--nol-radius-pill);
	color: var(--nol-text);
	font-size: var(--nol-text-sm);
	padding: 0.35rem 0.85rem;
	text-decoration: none;
	transition: background var(--nol-prechod), border-color var(--nol-prechod);
}

.a3-hledani-filtr:hover {
	background: var(--nol-primarni-svetla);
	border-color: var(--nol-primarni);
	color: var(--nol-primarni);
}

.a3-hledani-filtr.je-aktivni {
	background: var(--nol-primarni);
	border-color: var(--nol-primarni);
	color: var(--nol-primarni-kontrast);
}

.a3-hledani-filtr-pocet {
	font-variant-numeric: tabular-nums;
	opacity: 0.7;
}

/* Výsledky */
.a3-hledani-polozka {
	border-bottom: 1px solid var(--nol-ramecek);
	padding-bottom: var(--nol-mezera-4);
}

.a3-hledani-polozka:last-child { border-bottom: 0; }

.a3-hledani-odkaz {
	color: var(--nol-primarni);
	font-size: var(--nol-nadpis-3);
	text-decoration: none;
}

.a3-hledani-odkaz:hover { text-decoration: underline; }

.a3-hledani-meta {
	color: var(--nol-text-tlumeny);
	font-size: var(--nol-text-xs);
	margin-top: var(--nol-mezera-1);
}

.a3-hledani-meta > span + span::before {
	content: "•";
	margin-right: 0.5rem;
	opacity: 0.5;
}

.a3-hledani-typ {
	color: var(--nol-primarni);
	font-weight: 600;
}

.a3-hledani-uryvek {
	color: var(--nol-text-tlumeny);
	font-size: var(--nol-text-sm);
	line-height: var(--nol-vyska-radku);
}

.a3-hledani mark {
	color: var(--nol-text);
	background: var(--nol-primarni-svetla);
	border-radius: var(--nol-radius-sm);
	padding: 0 0.15em;
}

/* AI odpověď — vizuálně oddělená od výsledků, ať je jasné, kdo ji sestavil.
   Není to karta, ale DOPLNĚK se svislicí ve značce: tentýž prvek jako
   `.a3-hledani-karta` o kus výš, protože obojí je odpověď webu, ne nalezený
   dokument. */
.a3-hledani-ai {
	padding: var(--nol-mezera-4) var(--nol-mezera-5);
	margin-bottom: var(--nol-mezera-5);
	background: var(--nol-doplnek-pozadi);
	border-left: 4px solid var(--nol-primarni);
	border-radius: var(--nol-radius);
	box-shadow: none;
}

.a3-hledani-ai-hlavicka {
	align-items: center;
	color: var(--nol-primarni);
	display: flex;
	font-size: var(--nol-text-xs);
	font-weight: 700;
	gap: var(--nol-mezera-2);
	letter-spacing: 0;
	margin-bottom: var(--nol-mezera-2);
}

.a3-hledani-ai-text {
	line-height: var(--nol-vyska-radku);
	margin: 0;
}

.a3-hledani-ai-zdroj a {
	background: var(--nol-pozadi-tlumene);
	border-radius: var(--nol-radius-pill);
	color: var(--nol-text);
	display: inline-block;
	font-size: var(--nol-text-xs);
	padding: 0.25rem 0.7rem;
	text-decoration: none;
}

.a3-hledani-ai-zdroj a:hover {
	background: var(--nol-primarni-svetla);
	color: var(--nol-primarni);
}

.a3-hledani-ai-vysvetleni {
	color: var(--nol-text-tlumeny);
	font-size: var(--nol-text-xs);
	margin: var(--nol-mezera-3) 0 0;
}

/* Načítání odpovědi — pulzující text, žádný spinner navíc. */
.a3-hledani-ai-ceka {
	color: var(--nol-text-tlumeny);
	font-size: var(--nol-text-sm);
	margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
	.a3-hledani-ai-ceka { animation: nol-puls 1.4s ease-in-out infinite; }
}

@keyframes nol-puls {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.45; }
}

/* Našeptávač pod polem hledání. Nabízí SLOVA, ne výsledky — návštěvník si jím
   doplní dotaz a teprve odesláním dostane výpis. */
.nol-hledani { position: relative; }

.a3-naseptavac {
	background: var(--nol-povrch);
	border: 1px solid var(--nol-ramecek);
	border-radius: var(--nol-radius);
	box-shadow: var(--nol-stin-lg);
	margin-top: 0.25rem;
	max-height: 60vh;
	overflow-y: auto;
	top: 100%;
}

.a3-naseptavac-polozka {
	align-items: baseline;
	color: var(--nol-text);
	display: flex;
	font-size: var(--nol-text-sm);
	gap: var(--nol-mezera-2);
	justify-content: space-between;
	padding: 0.5rem 0.9rem;
}

.a3-naseptavac-polozka:hover,
.a3-naseptavac-polozka.je-aktivni {
	background: var(--nol-primarni-svetla);
	color: var(--nol-primarni);
}

.a3-naseptavac-typ {
	color: var(--nol-text-tlumeny);
	font-size: var(--nol-text-xs);
	white-space: nowrap;
}

/* Značka odkazu na podklad uvnitř AI odpovědi ([1], [2]…). Odkaz sestavuje
   server ze svého seznamu — model vrací jen číslo. */
.a3-hledani-ai-znacka {
	color: var(--nol-primarni);
	font-size: var(--nol-text-xs);
	font-weight: 600;
	text-decoration: none;
	vertical-align: super;
}

.a3-hledani-ai-znacka:hover { text-decoration: underline; }

/* ── Mapa stránek (a3-mapa-*) ───────────────────────────────────────────
   Kontrakt markupu: admin3_frontend/sitemap_pristupnost.php. Mapa je jen
   vykreslení stromu nabídky, takže se drží stejné typografie jako rozcestník
   v režimu seznam — kategorie je nadpis skupiny, stránka a custom odkaz proklik. */

.a3-mapa,
.a3-mapa-podseznam {
	margin: 0;
	padding: 0;
	list-style: none;
}

.a3-mapa {
	margin-top: var(--nol-mezera-4);
}

.a3-mapa-polozka {
	padding: var(--nol-mezera-1) 0;
}

.a3-mapa-polozka>a {
	color: var(--nol-text);
	text-decoration: none;
}

.a3-mapa-polozka>a:hover {
	color: var(--nol-primarni);
	text-decoration: underline;
}

.a3-mapa-skupina {
	display: block;
	margin-top: var(--nol-mezera-4);
	color: var(--nol-text-tlumeny);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: var(--nol-text-sm);
}

/* Odsazení nese úroveň, ne inline style — hloubka je nejvýš A3_MENU_MAX_HLOUBKA. */
.a3-mapa-podseznam {
	margin-left: var(--nol-mezera-5);
}

.a3-mapa-uroven-2>a,
.a3-mapa-uroven-3>a,
.a3-mapa-uroven-4>a {
	color: var(--nol-text-tlumeny);
	font-size: var(--nol-text-sm);
}