/* ===================================================================
   SPOLOČNÝ OBAL REPORTOV
   ===================================================================

   Reporty v `resources/reporty/` sa vykresľujú VNÚTRI portálu — s hlavičkou
   aj pätou. Každý si nesie vlastnú sádzbu v inline `<style>` a tú im
   **necháváme**; `App\Support\Report` ju len zabalí do `@scope (#report)`,
   aby neunikla do zvyšku stránky.

   Tento hárok zjednocuje to, čo je pri pohľade na dva reporty vedľa seba
   vidno hneď:

     šírka obsahu · písmo · pozadie · farba textu · nadpisy · odkazy

   PRIPÁJA SA AŽ ZA `app.css` (cez `@stack('styly')`), takže pri rovnakej
   špecificite vyhráva — netreba `!important`.

   =================================================================== */


/* Celý hárok žije vnútri `#report`, rovnako ako sádzba jednotlivých reportov
   (tú balí do `@scope` trieda `App\Support\Report`). Bez toho by pravidlá
   pre `body` a nadpisy prefarbili hlavičku aj pätu portálu. */
#report {
	/* Report stojí na TEJ ISTEJ osi ako zvyšok webu — na stĺpci `main`.
	 *
	 * Prvý pokus mu dal vlastnú šírku 1240 px na stred okna. Zvonku to
	 * vyzeralo takmer dobre, ale s ničím nelícovalo: pri okne 1425 px má naša
	 * os 1262 px, takže tlačidlo „Späť" začínalo o 11 px vedľa reportu. Radšej
	 * žiadna vlastná šírka — nech report dýcha presne ako hlavička, päta
	 * a každá iná stránka.
	 */
	grid-column: main;

	/* `min-width: 0` ruší `min-width: 320px`, ktoré si štyri reporty
	   nesú na vlastnom `body` (`leto`, `salon`, `financny-poradca`,
	   `osobny-audit`) — a `App\Support\Report` prepisuje `body` na
	   `:scope`, teda priamo na `#report`.

	   Na samostatnom súbore to zmysel malo. U nás je `#report` položka
	   mriežky v drážke `min(100% − 2 × --page-margin, 1600px)`, takže
	   pri úzkom okne je drážka užšia než tých 320 px a report z nej
	   vytŕča: odmerané pri okne 340 px presah 11 px, čiže celá stránka
	   sa dá ťahať do strán.

	   Pravidlo `min-width: 0` na potomkoch nižšie v hárku toto nerieši —
	   je vnorené, takže mieri na deti `#report`, nie na `#report` sám. */
	min-width: 0;

	/* Pôvodné pozadia sú rôzne — od plochých farieb po radiálne prechody
	   v troch odtieňoch. Zjednotené na náš podklad. */
	background: var(--theme-surface-surface);
	color: var(--theme-surface-on-surface);

	/* Segoe UI, Inter, Arial — každý report iné. Teraz písmo portálu. */
	font-family: "Google Sans Flex", sans-serif;
	font-weight: 400;

	/* Dve veľkosti, ktoré naša škála nemá. Medzi 17,5 a 32 px má web kroky
	   pod 1,2 (17,5 → 24 → 28 → 32), takže sa doň kartový nadpis ani KPI
	   číslo nemajú kam postaviť bez toho, aby splynuli so susedom. Sú to
	   hodnoty REPORTOV, nie webu — preto sedia tu a nie v `@layer tokens`. */
	--report-cislo: 21px;
	--report-cislo-riadok: 24px;
	--report-nadpis-karty: 18px;
	--report-nadpis-karty-riadok: 22px;

	@media (width >= 1024px) {
		--report-cislo: 26px;
		--report-cislo-riadok: 29px;
		--report-nadpis-karty: 21px;
		--report-nadpis-karty-riadok: 25px;
	}

	/* ZÁKLAD REPORTU — najširší jediný zásah celého rebríka.
	 *
	 * `App\Support\Report` prepisuje `body` na `:scope`, takže dnes na
	 * `#report` sedí základ jednotlivých reportov: `pc` má 14 px cez `font:`
	 * shorthand, ostatné dedia 16 px z prehliadača. `#report` má špecificitu
	 * (1,0,0) a `:scope` len (0,1,0), takže to prebije a všetky role BEZ
	 * vlastného `font-size` sa vyriešia naraz. Bez tohto riadku by sa museli
	 * vymenovať po jednej.
	 *
	 * Bezpečné je to preto, že reporty nemajú ANI JEDNU veľkosť v `em` —
	 * všetkých 216 je v `rem`, a tie sa počítajú od koreňa, nie odtiaľto. */
	font-size: var(--telo-velkost);
	line-height: var(--telo-riadok);
	letter-spacing: var(--telo-preloz);

	/* Pastelovejší tón. Pôvodné reporty majú dosť sýte akcenty — zelené
	   a červené čísla, farebné linky pri kartách. Stlmenie sýtosti ich
	   zjemní, ale rozdiel medzi „plus" a „mínus" zostane čitateľný.
	 *
	 * Je to JEDEN gombík: 1 = pôvodné farby, 0 = odtiene sivej. Robiť to
	 * prepisom premenných v každom reporte zvlášť by znamenalo desať sád
	 * rôzne pomenovaných farieb.
	 *
	 * POZOR: `filter` robí z prvku kotvu pre `position: fixed` potomkov.
	 * V troch reportoch je taký jeden — `.skip-link` nižšie.
	 */
	filter: saturate(0.72);

	button,
	input,
	select,
	textarea {
		font-family: inherit;
	}

	/* Na os ide VŠETKO, čo je v reporte na prvej úrovni — nielen `.page`
	 * a `.wrap`.
	 *
	 * Vymenovať konkrétne kontajnery nestačilo: päť reportov má nad obsahom
	 * ešte `<header>` s vlastným pozadím a tri aj `<footer>`, a tie zostávali
	 * cez celé okno. Na stránke to vyzeralo, že nadpis reportu je pás cez celú
	 * šírku a obsah pod ním úzky.
	 *
	 * Nameraná vlastná šírka pred zjednotením: byty 1240 · domácnosť 1220
	 * · pc 1220 · kaviareň 1180 · účtovníctvo 920 · finančný poradca 820
	 * · salón 800 · osobný audit 790 · leto 760 · kalkulačka 720.
	 */
	> * {
		width: 100%;
		max-width: none;
		margin-inline: 0;
	}

	/* VÝŠKA PODĽA OKNA NEPLATÍ. Reporty boli písané ako samostatné
	   stránky, kde prvý blok vypĺňal obrazovku. U nás je nad ním hlavička
	   portálu aj tlačidlo „Späť na prompty", takže z toho zostáva len
	   prázdny pás.

	   Odmerané na `byty` (7. 9. 2026): `.hero { min-height: 72vh }` a k tomu
	   `align-items: end` — pri okne 900 px vysoké to je 648 px na obsah
	   vysoký 462 px, teda 118 px prázdna NAD nadpisom. Presne tá „veľká
	   medzera za nadpisom", ktorú nahlásil zadávateľ.

	   Vo `vh` sú ešte dva: `kalkulacka` (`body`, teda po prepise `:scope`)
	   a `kaviaren` (`.page`). Tie nerobia škodu, ale nerobia ani nič —
	   report je vždy dlhší než okno. Pravidlo ich berie všetky naraz. */
	min-height: 0;

	> *,
	> * :is(.hero, .page, main, header) {
		min-height: 0;
	}

	/* Vnútorné kontajnery — teda tie POD prvou úrovňou. Šírku už drží rodič
	   nad nimi, takže sa len roztiahnu naňho.

	   `> * :is(…)`, nie `:is(…)` samotné: keby pravidlo siahalo aj na prvú
	   úroveň, prebilo by pravidlo nad ním (je špecifickejšie) a `main` by sa
	   roztiahol na 100 % celého okna.

	   `width`, nie `max-width`: rodina s `.wrap` má šírku nastavenú natvrdo
	   (`width: 1180px`), takže samotné `max-width` by na ňu vôbec nesiahlo —
	   vyzeralo by to, že sa nič nestalo. */
	> * :is(.page, main, .wrap, .app) {
		width: 100%;
		max-width: none;
		margin-inline: auto;
	}

	.skip-link {
		/* SCHOVANÝ NAOZAJ, NIE POSUNOM. Originál sa skrýva cez
		   `position: fixed` + `transform: translateY(-150%)`, teda nad horný
		   okraj OKNA. Lenže `filter` vyššie spravil z `#report` kotvu, takže
		   sa `fixed` správa ako `absolute` a tých −150 % sa ráta od začiatku
		   reportu. Odmerané 7. 9. 2026: nápis „Preskočiť na obsah" skončil na
		   y = 127 px a prekrýval tlačidlo „Späť na prompty" (y = 120 px) —
		   práve to nahlásil zadávateľ pri `salon`. Týka sa troch reportov:
		   `salon`, `financny-poradca` a `osobny-audit`.

		   NIE JE TO LEN PRIAME DIEŤA. `financny-poradca` použil tú istú triedu
		   ešte raz a na niečo iné: `<span class="skip-link">Hľadať podľa ID,
		   regiónu alebo signálu</span>` je skrytý popis vyhľadávacieho poľa
		   v strede reportu. Prvá verzia opravy mierila selektorom `> .skip-link`
		   a tento popis nechala visieť nad celým reportom — preto je pravidlo
		   potomkové. Na `<span>` sa vetva `:focus` nikdy nechytí, a to je
		   správne: nie je to odkaz, len text pre čítačku obrazovky.

		   Riešenie nestojí na geometrii, ale na orezaní — to platí bez
		   ohľadu na to, od čoho sa prvok pozicuje. Odkaz zostáva v poradí
		   tabulátora a pri fokuse sa ukáže; klávesnicovú pomôcku nezmazávame,
		   len ju prestávame ukazovať myši. */
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		transform: none;

		&:focus {
			inset: var(--space-sm) auto auto var(--space-sm);
			z-index: 2;
			width: auto;
			height: auto;
			overflow: visible;
			clip-path: none;
		}
	}

	/* Hlavička reportu mala tónované pozadie cez celé okno — niekde dokonca
	   radiálny prechod v cudzích odtieňoch. Pás zostáva (drží hierarchiu),
	   ale v našej farbe a s naším zaoblením.

	   Päta sem NEPATRÍ: tie boli priehľadné, takže dať im pozadie by nebolo
	   zjednotenie, ale pridanie niečoho, čo tam nikdy nebolo.

	   KTO BERIE POZADIE, MUSÍ VZIAŤ AJ TEXT. Prvá verzia prepísala len
	   pozadie a to bola tichá chyba na štyroch reportoch: `leto`, `salon`,
	   `financny-poradca` a `osobny-audit` majú `<header class="hero">`
	   s tmavým podkladom a BIELYM textom (`color: #fffdf7`, `rgba(255,
	   255, 255, .7)`…). Podklad sme im zosvetlili, biely text zostal —
	   odmerané pomery kontrastu 1,01 až 1,05 pri požadovaných 4,5.
	   Čiže neviditeľný text, presne ako to nahlásil zadávateľ.

	   Farby sa preto prepisujú v celej hlavičke, nie len na nej samej:
	   biele `color` majú aj vnorené `p`, `span`, `strong`. Zoznam je
	   menovitý a nie `*`, aby sa nezhodili odkazy (tie majú vlastnú
	   farbu nižšie) ani zámerné akcenty v ikonách či `<svg>`.

	   `--report-hlavicka-text` drží obe hodnoty na jednom mieste, nech sa
	   nedá zmeniť jedna bez druhej. */
	> header {
		--report-hlavicka-text: var(--theme-surface-on-surface);

		background: var(--theme-surface-surface-container);
		background-image: none;
		border-radius: var(--shape-corner-lg);
		color: var(--report-hlavicka-text);

		/* TEXT SA NESMIE DOTýKAŤ OKRAJA PÁSU. Vodorovnú výplň držal
		   v týchto piatich reportoch `.wrap` (`width: calc(100% − 32px)`)
		   a pravidlo o osi vyššie mu ju vzalo. Odmerané na `salon`
		   (7. 9. 2026): pás 72–1353 px a nápis „DEMO Salón Alfa" začínal
		   presne na 72 px, teda nalepený na hranu. To je to „celé posunuté",
		   ktoré nahlásil zadávateľ.

		   24 px je to isté číslo, aké majú vo vlastnom `padding` `byty`
		   a `pc` — nie zvolené, ale prevzaté z rodiny reportov, ktorá to
		   už mala správne. */
		padding-inline: var(--space-lg);

		:is(p, span, strong, em, small, li, dt, dd, time, output, label) {
			color: var(--report-hlavicka-text);
		}

		/* Stlmený riadok (dátum, poznámka pod nadpisom) zostáva stlmený —
		   inak by hlavička stratila hierarchiu a všetko by kričalo rovnako. */
		:is(.stamp, .lead, .hero-copy, .model-label, .muted, .meta, .sub) {
			color: var(--theme-surface-on-surface-variant);
		}

		/* `div` a `b` sem patria tiež — `.brand` v `salon` a `<b>RADAR 1.0</b>`
		   vo `financny-poradca` sú biele a v zozname vyššie neboli. Odkaz si
		   farbu berie z nášho pravidla pre odkazy nižšie, tu len istota, že
		   nezostane biely. */
		:is(div, b, i, a) {
			color: var(--report-hlavicka-text);
		}
	}

	/* TMAVÉ BLOKY V TELE REPORTU — text v nich musí zostať SVETLÝ.
	 *
	 * Opak chyby v hlavičke: tu podklad tmavý zostáva (je to zámerný
	 * akcent, nie chróm stránky), ale náš rebrík doň vnútil tmavý text.
	 * Odmerané na `byty`: nadpis 》Executive Summary《 mal `rgb(18,19,23)`
	 * na podklade `rgb(16,21,31)` — pomer 1,02 pri požadovaných 3.
	 * Teda úplne neviditeľný nadpis.
	 *
	 * Prečo tieto ostávajú tmavé, kým hlavičku zosvetľujeme: hlavička je
	 * chróm, ktorý sa bije s hlavičkou nášho webu a je na každej stránke
	 * raz. Tieto bloky sú akcenty vnútri obsahu — zosvetliť ich by
	 * neznamenalo zjednotiť, ale zmazať štruktúru, ktorú report kreslí.
	 *
	 * Zoznam je MENOVITÝ a odmeraný, nie odhadnutý: prešiel som CSS
	 * všetkých desiatich reportov skriptom, ktorý ráta jas (`luminance`)
	 * každého `background` a hlási tie pod 0,25. Bez toho sa nedá povedať,
	 * ktorý blok je tmavý — farby sú v premenných a v každom reporte iné.
	 *
	 * `section.summary`, nie `.summary`: samotné `.summary` je aj
	 * v `uctovnictvo` (`.summary-list`, `.summary-item`) a tam je podklad
	 * svetlý — biely text by ho zmazal. Overené grepom. */
	:is(
		section.summary,
		.priority-panel, .day-head,
		.holiday,
		.headline-card, .relationship-summary, .checkin-result,
		.experiment-number,

		/* `:not(.secondary)` — `osobny-audit` má dva varianty toho istého
		   tlačidla: `.check-button` na slivkovom podklade a
		   `.check-button.secondary` na BIELOM. `:is()` preberá špecificitu
		   najsilnejšieho argumentu (0,2,0 z `.tab[...]` nižšie), takže by
		   prebilo aj ten biely a spravilo z 》Obnoviť modelové hodnoty《
		   prázdny biely obdĺžnik. Odmerané: biela na bielej, pomer 1,00. */
		.check-button:not(.secondary),

		.first-move, .scenario-result, .approval-board,
		.tab[aria-selected="true"], .filter[aria-pressed="true"]
	) {
		&,
		/* Výnimka pre odznaky, ktoré si NESÚ VLASTNÉ svetlé pozadie.
		   V tmavom paneli sedí napr. `.evidence.observation` na svojom
		   mentolovom podklade — biely text by ho zmazal. Odmerané:
		   biela na `rgb(220,235,232)`, pomer 1,23. */
		:is(h1, h2, h3, h4, h5, h6, p, li, span, strong, em, small,
			dt, dd, td, th, time, output, b, i, div):not(
			:is(.evidence, .badge, .chip, .pill, .tag, .flow-chip)) {
			color: var(--theme-primary-on-primary);
		}
	}

	h1,
	h2 {
		max-width: none;

		/* `width: auto` NIE JE nadbytočné k `max-width: none`.
		   `app.css` dáva v `@layer base` nad 1024 px `h2 { width: 50% }`
		   (veľký nadpis sekcie na našom webe). V reporte to znamená, že
		   KAŽDÝ `h2` je široký presne polovicu rodiča — odmerané
		   v `osobny-audit`: 146 px v 338 px rodičovi, text potreboval
		   181 px a slovo vytŕčalo von. `max-width` sám to nespraví,
		   `width` je záväznejšie. */
		width: auto;

		color: var(--theme-surface-on-surface);
	}

	h1 {
		font-size: var(--nadpis-4-velkost);
		line-height: var(--nadpis-4-riadok);
		letter-spacing: var(--nadpis-4-preloz);
		font-weight: var(--vaha-nadpis);
	}

	h2 {
		font-size: var(--nadpis-5-velkost);
		line-height: var(--nadpis-5-riadok);
		letter-spacing: var(--nadpis-5-preloz);
		font-weight: var(--vaha-nadpis);

		/* Pod 1024 px má naša škála `--nadpis-4` aj `--nadpis-5` na 28 px.
		   Na našich stránkach to nevadí, tie dva nadpisy nikde nestoja nad
		   sebou — v reporte áno, a titulok reportu tam splýval s nadpisom
		   sekcie na pixel. Preto na mobile o priečku nižšie. */
		@media (width < 1024px) {
			font-size: var(--nadpis-6-velkost);
			line-height: var(--nadpis-6-riadok);
			letter-spacing: var(--nadpis-6-preloz);
		}
	}

	/* ODZNAKY POD 12 px ZOSTÁVAJÚ MALÉ — a je to vedomé.
	 *
	 * 29. 8. 2026 som ich pri audite kontrastu zdvihol na 12 px
	 * (`.owner` 10,4 → 12, `.brand-mark` 11,5, `.route-dot` 11,8)
	 * a bola to regresia: `.owner` má v `financny-poradca` pevný štvorec
	 * 28 × 28 px, takže sa text zalomil a vytiekol 14 px POD čip —
	 * vo všetkých 48 riadkoch tabuľky naraz.
	 *
	 * Zdvih som vrátil. Dôvod je napísaný nižšie v bode 2 bloku
	 * „ČO REBRÍK NECHYTÁ": presne tento pokus tam už raz bol, skončil
	 * rovnako a záver znel, že sa dá zdvihnúť až po prepise pevných
	 * `width`/`height` na `min-width` s výplňou — teda zásahom do
	 * rozloženia, nie do typografie.
	 *
	 * Kontrast týchto odznakov je vyriešený osobitne (farbou, nie
	 * veľkosťou) v bloku s akcentmi nižšie. */

	/* `.owner` PRETEKÁ AJ V PÔVODNEJ VEĽKOSTI — a to je iná chyba.
	 *
	 * Toto nesúvisí so zdvihom vyššie. Aj pri pôvodných 10,4 px sa
	 * 》TÍM-A《 v pevnom štvorci 28 × 28 px zalomí na dva riadky a vytečie
	 * 14 px pod čip — vo všetkých 48 riadkoch tabuľky. Príčinou je výmena
	 * písma na „Google Sans Flex" (hore v tomto hárku): je širšie než
	 * pôvodný Inter, takže sa slovo prestalo zmestiť na jeden riadok.
	 *
	 * Prvý priebeh auditu to prehliadol, lebo meral len VODOROVNÝ presah
	 * (`scrollWidth − clientWidth`); tu je zvislý.
	 *
	 * Je to zásah do rozloženia, ktorý si bod 2 nižšie vyhradzuje — robím
	 * ho vedome a v najmenšom možnom rozsahu: štvorec sa mení na MINIMUM,
	 * takže chip si vypýta len toľko, koľko naozaj potrebuje. Odmerané:
	 * presah 14 px → 0, šírka chipu 28 → 45 px, výška zostáva 28 px,
	 * stránka bez vodorovného presahu. Tabuľka sa posúva vo vlastnom
	 * ráme, takže širší stĺpec nič nerozbije.
	 *
	 * `white-space: nowrap` je súčasť opravy, nie ozdoba: bez neho by sa
	 * text mohol zalomiť aj v širšom chipe. */
	.owner {
		width: auto;
		min-width: 28px;
		padding-inline: 5px;
		white-space: nowrap;
	}

	/* AKCENTOVÁ FARBA AKO DROBNÝ TEXT — stmavená na hranicu čitateľnosti.
	 *
	 * Každý report má vlastný teplý akcent (`--coral`, `--rose`,
	 * `--orange`) a používa ho aj na 14,5 px popiskoch `.kicker`, `time`
	 * a `.step-no`. Akcenty sú navrhnuté na veľké plochy; pri drobnom
	 * texte padnú pod hranicu 4,5. Odmerané na bielom/krémovom podklade
	 * reportu: `financny-poradca` 2,69, `leto` 3,10, `salon` 4,20,
	 * `osobny-audit` 4,37.
	 *
	 * Stmavenie je NAJMENŠIE MOŽNÉ — spočítané, nie odhadnuté: pre každú
	 * farbu som hľadal najvyšší jas, pri ktorom pomer ešte prejde 4,5.
	 * Vyšlo 75 až 98 % pôvodného jasu, takže odtieň zostáva ten istý
	 * a report si drží svoju identitu.
	 *
	 * NEMENÍ sa samotná premenná (`--coral` a spol.): tá istá farba nesie
	 * aj pozadia, prúžky a veľké nadpisy, kde vyhovuje. Meniť ju by
	 * znamenalo prefarbiť report tam, kde problém nie je.
	 *
	 * Adresne cez `data-report`, lebo spoločná farba pre všetkých by
	 * zmazala rozdiel medzi nimi. Háčik pridáva `pages/report.blade.php`.
	 *
	 * Vnútri tmavých blokov toto pravidlo NEPLATÍ — blok vyššie má vyššiu
	 * špecificitu a drží tam svetlý text. */
	/* Pozor na TÓNOVANÉ podklady. Prvé kolo počítalo stmavenie voči
	   bielej, lenže časť týchto popiskov sedí na farebných paneloch
	   (`#dfeee7`, `#eaf1fe`, `#dff3f0`…), kde je rozdiel jasov menší.
	   Hodnoty nižšie sú prepočítané voči SKUTOČNÉMU podkladu, odmeranému
	   na živej stránke — nie voči bielej. */
	&[data-report="leto"] {
		:is(.kicker, time) {
			color: #a6513b;
		}

		.company {
			color: #a74c36;
		}
	}

	&[data-report="byty"] {
		.eyebrow {
			color: #5275c0;
		}

		:is(.metric-label, .metric-hint) {
			color: #656e80;
		}
	}

	&[data-report="kalkulacka"] {
		.year-pill {
			color: #087974;
		}

		:is(.eyebrow, small) {
			color: #626f67;
		}
	}

	&[data-report="financny-poradca"] {
		/* `.factor-top b` a `.brief-kicker` nesú ten istý oranžový akcent
		   ako `.kicker` — 2,73 na bielej. */
		:is(.kicker, time, .brief-kicker, .factor-top b) {
			color: #b35e34;
		}

		th {
			color: #697376;
		}

		.owner {
			color: #4d6e83;
		}

		/* Odznak priority má vlastnú tehlovú na ružovkastom podklade. */
		.priority-badge {
			color: #ac473e;
		}
	}

	&[data-report="salon"] {
		/* 95 %, nie 96: `.kicker` sedí na KRÉMOVOM podklade
		   (`#fffdfa`), nie na čistej bielej, takže potrebuje o kúsok
		   viac. Prvá verzia s 96 % skončila na 4,45 — tesne pod.
		   `.kpi span` a `.week-label` nesú tú istú ružovú. */
		:is(.kicker, .step-no, .week-label, .kpi span) {
			color: #b45a64;
		}

		.gate {
			color: #65726e;
		}

		.badge {
			color: #4a6f7f;
		}
	}

	&[data-report="osobny-audit"] {
		.kicker {
			color: #b05c61;
		}

		.evidence {
			color: #6c666f;
		}

		/* Popisky stupnice sedia v ZÁLOŽKÁCH, ktoré sú v pokoji `hidden`.
		   Prvý priebeh auditu ich preto nevidel — meranie preskakuje
		   `display: none`. Druhý priebeh ich pred meraním odkrýva.
		   #918a92 na bielej má 3,36. */
		.range-scale span {
			color: #7a747b;
		}
	}

	/* Odkazy majú vlastnú, tmavšiu modrú než zvyšok webu.
	 *
	 * `--palette-blue-600` (#3279f9) má na bielej pomer kontrastu 4,01
	 * a na našej svetlosivej 3,81 — obe pod hranicou 4,5 pre bežný text.
	 * Odmerané na živých reportoch: `kalkulacka` mala takto 6 odkazov pod
	 * hranicou, `leto` a `byty` ďalšie.
	 *
	 * #2a6ae0 je ten istý odtieň o kúsok tmavší: 4,96 na bielej a 4,71 na
	 * `--theme-surface-surface-container`. Prejde teda aj v paneloch, nie
	 * len na čistej ploche.
	 *
	 * Zámerne LEN pre reporty a nie ako oprava `--palette-blue-600`:
	 * paleta stránky sa používa aj tam, kde je odkaz na tmavom podklade
	 * alebo väčší než 18,66 px, a tam #3279f9 vyhovuje. Meniť ju kvôli
	 * reportom by bol zásah do slovníka celého webu. */
	a {
		--report-odkaz: #2a6ae0;

		color: var(--report-odkaz);
	}

	/* Široké tabuľky a grafy sa na úzkom okne posúvajú VO VLASTNOM ráme, nie
	   celou stránkou. Pôvodné súbory to neriešili — na 375 px sa dali posúvať
	   do strán (kaviareň po 656 px, pc po 674 px). */
	table {
		display: block;
		width: max-content;
		max-width: 100%;
		overflow-x: auto;
	}

	/* To isté pre bloky kódu. `<pre>` nezalamuje, takže dlhý riadok
	   vytečie — odmerané v `pc` pri okne 320 px presah 560 px. Stránka
	   sa síce ťahať nedala (niečo vyššie ho orezalo), ale to je horšie
	   než posuv: text sa jednoducho nedal prečítať celý.
	   `overscroll-behavior-x` drží ťahanie vnútri rámu, nech pri
	   dočítaní riadka neodskočí celá stránka. */
	pre {
		max-width: 100%;
		overflow-x: auto;
		overscroll-behavior-x: contain;
	}

	svg,
	img {
		max-width: 100%;
	}

	/* Potomok mriežky alebo flexu má `min-width: auto`, takže sa NEZMENŠÍ pod
	   šírku svojho obsahu a roztiahne celú stránku. Klasická pasca — v `pc`
	   takto `.panel` na okne 375 px siahal po 770 px a v `kaviarni` to bol
	   `div` bez triedy.

	   `:where()` má NULOVÚ špecificitu, takže je to len východisko: kde si
	   pôvodný report `min-width` naozaj nastavil, jeho pravidlo vyhrá. */
	:where(div, section, article, li, figure, table) {
		min-width: 0;
	}

	/* Nadpis sekcie a jeho popis sedia vedľa seba vo `flex` riadku, ktorý sa
	   nezalamoval — na okne 375 px popis vyčnieval 6 px za okraj stránky.
	   Rovnaká trieda je v piatich reportoch, zalomenie im neuškodí. */
	.section-head {
		flex-wrap: wrap;
	}

	/* ===============================================================
	   TYPOGRAFICKÝ REBRÍK
	   ---------------------------------------------------------------
	   Šesť priečok, zlom na 1024 px ako zvyšok webu, žiadny `clamp()`:

	     42 · 32 · 26 · 21 · 17,5 · 14,5    (pomery 1,31 · 1,23 · 1,24
	                                         · 1,20 · 1,21)

	   PREČO STAČIA KRÁTKE SELEKTORY: `Report.php` balí sádzbu reportu do
	   `@scope (#report)`, čo NEPRIDÁVA špecificitu — `.metric .value`
	   zostáva (0,2,0). Každé pravidlo tu je vnorené v `#report`, teda má
	   aspoň (1,0,1), a ID prebije ľubovoľný počet tried aj poradie
	   v súbore. Žiadne `!important`.

	   DÔSLEDOK NA BUDÚCNOSŤ: nové pravidlo v jednotlivom reporte musí byť
	   písané s `#report`, inak nemá šancu prebiť `#report p`.
	   =============================================================== */

	/* 3 · DISPLEJOVÉ ČÍSLO — 26/700
	 *
	 * Väčšina týchto hodnôt sa ZMENŠÍ (51,2 → 42 → 37,6 → 34,4 → 31 → 26)
	 * a to je zámer: veľké číslo v karte nemá prekričať nadpis sekcie (32),
	 * a v dvoch reportoch bolo dokonca väčšie než vlastný titulok (42).
	 * Zmenšenie je zároveň jediná zmena, ktorá v mriežkach `repeat(4–6,1fr)`
	 * s reťazcami typu „−145 500,00 €" nemôže pretiecť. */
	:is(.metric-value, .metric .value, .kpi .value, .card .value,
		.stat-value, .score-value, .result-card strong, .result-metric output,
		.opportunity-total output, .budget-total strong, .holiday-budget-head strong),
	:is(.stat, .pulse) > strong {
		font-size: var(--report-cislo);
		line-height: var(--report-cislo-riadok);
		font-weight: var(--vaha-nadpis-7);
		font-variant-numeric: tabular-nums;
	}

	/* 4 · NADPIS KARTY A PODSEKCIE — 21/700
	 *
	 * Toto je jadro zadania. `h3` mal naprieč reportmi 19 RÔZNYCH veľkostí
	 * (14,08 – 23 px) a osem z nich bolo menších než telo textu — nadpis
	 * menší než odsek, ktorý uvádza. V `byty` mal odsek 20 px a `h3` nad
	 * ním 19. 21 px je jediná hodnota, ktorá je súčasne nad telom, pod
	 * nadpisom sekcie a znesie sa v dvoj- až trojstĺpcovej karte.
	 *
	 * Kartové `h2` sú tu zámerne, aby „Rýchly verdikt" nedostal 32 px
	 * sekčného nadpisu. */
	:is(h3, h4),
	:is(.hero-panel, .profile-card, .legend, .section-title, .assumptions) h2,
	:is(.destination, .price),
	:is(.hero-card, .hero-note, .first-move, .result-head, .snapshot, .boundary,
		.month-head, .route-copy, .approval-row, .kpi, .stop-rule, .friction,
		.summary-item, .verdict, .workflow-title) strong {
		font-size: var(--report-nadpis-karty);
		line-height: var(--report-nadpis-karty-riadok);
		font-weight: var(--vaha-nadpis-7);
	}

	/* 4b · NADPIS V HUSTEJ MRIEŽKE — 17,5/700   (MUSÍ NASLEDOVAŤ ZA 4)
	 *
	 * Jediné miesto, kde vedome obetujem jeden stupeň hierarchie za
	 * použiteľnosť: v `repeat(6,1fr)` má stĺpec asi 200 px a 21 px nadpis
	 * by z neho spravil tri riadky v karte s `min-height: 142px`.
	 *
	 * Pravidlo: 4 a viac rovnakých stĺpcov ALEBO karta s `min-height`.
	 * Trojstĺpcové mriežky sem NEPATRIA — 400 px na stĺpec 21 px unesie. */
	summary,
	:is(.process-step, .next-actions, .week, .assumption, .factor, .day-head,
		.scenario-button, .experiment-copy, .strength, .finding, .rec) strong,
	:is(.ssc, .week, .winner-card, .limit-card, .note-card, .detail-panel) h3 {
		font-size: var(--telo-velkost);
		line-height: var(--telo-riadok);
		letter-spacing: var(--telo-preloz);
		font-weight: var(--vaha-nadpis-7);
	}

	/* 5 · PROZAICKÝ TEXT A ZOZNAM — 17,5/400
	 *
	 * Blanket je zámer. `#report p` (1,0,1) prebije aj `.rec-card p` (0,2,0),
	 * takže netreba vymenúvať odseky po reportoch — a jedenásty
	 * report s inými názvami tried takto neprepadne cez sito. Odsekov bolo
	 * nameraných 26 rôznych veľkostí, od 20 px po 10,88. */
	:is(p, li),
	:is(.lead, .subtitle, .subhead, .section-lead, .hero-copy, .callout,
		.note-box, .truth-note, .context-note, .summary-item, .brief-reason,
		.result-copy, .trip-plan, .legend-row, .stop-rule, .friction span,
		.rec > div) {
		font-size: var(--telo-velkost);
		line-height: var(--telo-riadok);
		letter-spacing: var(--telo-preloz);
		font-weight: var(--vaha-telo);
	}

	/* 5b · TLAČIDLO — sedí s `.tlacidlo` v `app.css`. Prepínače majú
	   `flex-wrap` alebo `overflow-x: auto`, takže zväčšenie pridá zalomenie
	   alebo posun, nie pretečenie. */
	:is(button, .filter, .tab, .check-button, .back),
	.segment span {
		font-size: var(--telo-velkost);
		line-height: var(--telo-riadok);
		font-weight: var(--vaha-tlacidlo);
	}

	/* 5c · FORMULÁROVÉ POLE — nikdy pod 16 px.
	   Pod 16 px si iOS Safari pri fokuse sám priblíži stránku a používateľ
	   sa musí odzoomovať ručne; na mobile je náš token 15 px, preto `max()`. */
	:is(input, select, textarea) {
		font-size: max(16px, var(--telo-velkost));
		line-height: var(--telo-riadok);
	}

	/* 6a · BUNKA TABUĽKY A POZNÁMKA POD ČIAROU — 14,5/400
	 *
	 * Tabuľky NEDÁVAM na telo (17,5): osemstĺpcová tabuľka vo finančnom
	 * poradcovi (`min-width: 990px`) a deväťstĺpcová v bytoch (1060) by
	 * skrolovali natrvalo aj na našej osi 1262 px. 14,5 je pritom zdvih
	 * pre deväť reportov z desiatich (12 → 14,5 · 12,16 → 14,5 · 13,5 → 14,5).
	 *
	 * Páry „X, X p" sú nutné: bez nich by odsek vnútri pätky vyhral cez
	 * `#report p`, ktoré má rovnakú špecificitu a je vyššie. */
	:is(td, .row, .mono, .num),
	:is(footer, .footer, .footer-note, .note, .note-line, .small, .chart-note,
		.method, .plan-b, .holiday-note, .privacy-note, .saved-note, .save-status,
		.scenario-formula, .gate, .approval, .priority-note, .brief-action,
		.blocked, .synthetic-banner, .slot-reason, .stamp, .metric-hint,
		.bar-label, .bar-value, .result-card small, .property-cell span,
		.budget-caption, td small),
	:is(.metric, .kpi) .hint,
	:is(footer, .footer, .method, .approval, .plan-b, .holiday-note) p {
		font-size: var(--popisok-velkost);
		line-height: var(--popisok-riadok);
		letter-spacing: var(--popisok-preloz);
		font-weight: var(--vaha-telo);
	}

	/* 6b · TEXT A ZOZNAM V HUSTEJ MRIEŽKE — 14,5/400
	   Ten istý dôvod ako 4b. Aj tak je to zdvih z 10,2–12,6 px. */
	:is(.process-step, .next-actions li, .week, .assumption, .factor,
		.ssc, .winner-card, .experiment) :is(p, li, small, span),
	:is(.success, .winner-grid) {
		font-size: var(--popisok-velkost);
		line-height: var(--popisok-riadok);
		letter-spacing: var(--popisok-preloz);
		font-weight: var(--vaha-telo);
	}

	/* 6c · POPISOK, HLAVIČKA TABUĽKY, ŠTÍTOK — 14,5/700   (ZA 6b)
	 *
	 * Rovnaká veľkosť ako bunka a poznámka, rozdiel nesie VÁHA — presne to,
	 * čo reporty dnes robia na 12/13 px, len o priečku vyššie. Zdvíha to
	 * celé typografické dno naraz: najmenší nameraný text mal 9,44 px.
	 * `uppercase` a `letter-spacing` pôvodných reportov nechávam —
	 * prepisujem len veľkosť, riadok a váhu. */
	:is(th, thead th, .kv th),
	:is(.eyebrow, .kicker, .pill, .badge, .chip, .tag, .impact, .flow-chip,
		.model-label, .model-tag, .brand, .year-pill, .winner-label, .evidence,
		.source, .loop-step, .nights, .company, .score-pill, .priority-badge,
		.owner-label, .profile-list span),
	:is(.metric-label, .metric .label, .kpi .label, .kpi span, .stat-label,
		.label, .label-line, .score-label, .assumption-label, .assumption span,
		.snapshot-label, .snapshot-line, .hero-card-label, .mini-label,
		.week-label, .day-head span, .slot, .slot time, .brief-kicker, .step-no,
		.result-head span, .result-metric span, .opportunity-total small,
		.impact-line, .dimension-score, .range-head label, .note-label,
		.pulse span, .locality-head span, .zone span, .rec-meta, .meta,
		.table-meta, .weekend-meta, .trip-line, .budget-total span,
		.month-head span, .capacity span, .data-flag, .section-title span,
		.scenario-button span, .distribution-row, .factor b, .success strong,
		.stat > span) {
		font-size: var(--popisok-velkost);
		line-height: var(--popisok-riadok);
		letter-spacing: var(--popisok-preloz);
		font-weight: var(--vaha-nadpis-7);
	}


	/* 6d · DOZBERANIE — to, čo po prvom meraní zostalo mimo rebríka.
	 *
	 * Po nasadení priečok 3–6c sedelo na rebríku 90 % textu (3 187 z 3 524
	 * prvkov). Zvyšok som odmeral menovite a rozdelil na tri kôpky: toto sú
	 * tie, ktoré tam patria a len nemali triedu zo zoznamu. Sú to skoro samé
	 * bezmenné `span` a `strong` v `leto` a `salon`, preto sa chytajú cez
	 * rodiča.
	 *
	 * Zvyšné dve kôpky sú ZÁMERNE mimo — viď blok „ČO REBRÍK NECHYTÁ" nižšie. */
	:is(.month-event, .route-copy, .budget-row, .approval-row > div,
		.range-scale, .strength, .weeks > .week, .gauge-subtitle) :is(span, strong, time),
	:is(.month-event time, .date-month, .range-scale span, .gauge-subtitle,
		.weeks > .week, .label-line small, .data-flag strong, .model-pill,
		.range-value) {
		font-size: var(--popisok-velkost);
		line-height: var(--popisok-riadok);
		letter-spacing: var(--popisok-preloz);
	}

	/* Dátum v dlaždici víkendu je nadpis karty, nie popisok — „5–7" nad
	   mesiacom je to prvé, čo na kartičke prečítaš. */
	.date-block .date-days {
		font-size: var(--report-nadpis-karty);
		line-height: var(--report-nadpis-karty-riadok);
		font-weight: var(--vaha-nadpis-7);
	}

	/* Ručička v `pc` je displejové číslo ako každé iné (bola 29 px). */
	.gauge-value {
		font-size: var(--report-cislo);
		line-height: var(--report-cislo-riadok);
		font-weight: var(--vaha-nadpis-7);
		font-variant-numeric: tabular-nums;
	}

	/* Panel so skóre v `pc` nesmie pohltiť hlavičku.
	 *
	 * Hlavička reportu je `grid-template-columns: 1fr auto` a v pravom
	 * stĺpci sedí `.score-box`. Stĺpec `auto` sa nafúkne na max-content
	 * svojho obsahu — a tým je veta 》Heuristika podľa RAM, disku, CPU,
	 * reboot stavu, logov a health dát. Nie je to benchmark.《 Report jej
	 * dal 12 px, náš rebrík `--popisok` (14,5 px), takže panel narástol
	 * na 648 px a `1fr` vľavo skolaboval.
	 *
	 * Odmerané pred opravou: pri 841 px mal nadpis šírku **9 px**, pri
	 * 1024 px 208 px. Použiteľné to bolo až od ~1440 px.
	 *
	 * Strop je v px zámerne, nie v `rem` ani `ch`: report je hotový
	 * artefakt s pevnou sádzbou (`min-width: 190px` má panel od autora)
	 * a nemá dôvod škálovať so základom stránky. Pod 840 px si report
	 * hlavičku stohuje sám, tam sa strop neuplatní.
	 *
	 * `.score-box` je len v `pc.html`, takže to nič iné nezasiahne. */
	.score-box {
		max-width: 380px;
	}

	/* `white-space: nowrap` z reportov musí povoliť zalomenie.
	 *
	 * Reporty ním držia krátke popisky na jednom riadku — pri ich
	 * pôvodných 12–14 px sa zmestili. Náš rebrík ich zdvihol na
	 * `--popisok` (14,5 px) a nowrap ich potom vytlačí z vlastného
	 * stĺpca: odmerané na `pc` pretiekla `.stamp` o 410 px do panela
	 * so skóre vpravo a `.bar-value` o 18 px z grafu.
	 *
	 * Samotné reporty to riešia až v `@media (max-width: …)`, teda len
	 * na úzkych oknách — u nás to treba na všetkých. Zarovnanie doprava
	 * si nechávajú, takže zalomený riadok sadne pod predošlý správne. */
	.stamp,
	.bar-value {
		white-space: normal;
	}

	/* KOLIESKA V `pc` — text ide POD koliesko, nie doň.
	 *
	 * Report kreslí kartu tak, že `.gauge-text` (hodnota + nadpis +
	 * podnadpis) je `position: absolute` a leží v diere kolieska.
	 * Vychádzalo mu to, lebo mal základ 14 px a podnadpis 12 px.
	 *
	 * Náš rebrík mu základ zdvihol na `--telo` (17,5 px) a podnadpis na
	 * `--popisok` (14,5 px) — a to je zámer, kvôli ktorému rebrík
	 * vznikol. Text tým ale prerástol dieru: odmerané 126 px textu do
	 * 91 px diery a šírka 150 px do 91 px, takže sa písmo vysypalo cez
	 * prstenec a bolo nečitateľné.
	 *
	 * Zmenšovať písmo späť by rebrík poprelo. Preto sa mení ROZLOŽENIE:
	 * v koliesku zostáva len hodnota (》nízke《, 》vysoké《, 》OK《 — krátke
	 * slová), nadpis a podnadpis idú pod koliesko do bežného toku.
	 *
	 * `display: contents` na `.gauge-text` je jadro triku: obal zmizne
	 * a jeho tri deti sa stanú priamymi položkami mriežky karty. Inak by
	 * sa hodnota nedala položiť do toho istého políčka ako `<svg>` —
	 * je to jeho neter, nie súrodenec.
	 *
	 * Vďaka `grid-area: 1 / 1` sa hodnota a koliesko prekrývajú bez
	 * jediného pevného čísla, takže to drží pri akejkoľvek veľkosti
	 * písma aj kolieska. */
	.gauge-card {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		justify-items: center;
		align-content: center;
	}

	.gauge-text {
		display: contents;
	}

	.gauge,
	.gauge-value {
		grid-area: 1 / 1;
	}

	/* Koliesko je väčšie než v reporte (bolo 142 px). Pri 142 px má diera
	   91 px a najdlhšia hodnota 》vysoké《 odmerané 89 px — dva pixle
	   rezervy, čo je na inom písme alebo dlhšom slove hneď preč. Pri
	   168 px má diera 108 px, teda takmer 20 px vzduchu. `stroke-width`
	   sa škáluje s viewBoxom, prstenec teda ostáva pomerovo rovnaký. */
	.gauge {
		width: 168px;
		height: 168px;
	}

	/* Hodnota sa vycentruje na koliesko; `place-self` musí byť oboje,
	   inak ju `justify-items: center` z karty síce zarovná vodorovne,
	   ale zvislo ostane na vrchu políčka. */
	.gauge-value {
		place-self: center;
	}

	.gauge-title {
		grid-area: 2 / 1;
		margin-top: var(--space-md);
	}

	.gauge-subtitle {
		grid-area: 3 / 1;
		max-width: 30ch;
		text-align: center;
	}

	/* ===============================================================
	   ČO REBRÍK NECHYTÁ — a prečo
	   ---------------------------------------------------------------
	   Nie je to opomenutie. Obe kôpky sú odmerané a vedome vynechané;
	   keby ich niekto „doopravil", rozbije ich.

	   1 · TEXT V `<svg>` — 158 prvkov v `domacnost` a `kaviaren`
	        (`text` na 11 – 15 px). Popisky sú kotvené na absolútne
	        súradnice vo `viewBox`. Pri dvanástich mesiacoch je rozostup
	        okolo 80 px a hodnota „−3 900 €" je už dnes tesná — zväčšenie
	        by ich preložilo cez seba. Graf sa škáluje cez `viewBox`,
	        nie cez `font-size`.

	   2 · TEXT V PEVNOM ŠTVORCI — 59 prvkov: `.owner` 28×28,
	        `.route-dot` 34×34, `.priority` 46×46, `.approval-row b`
	        28×28, `.brand-mark` 34×34 a 30×30, `.zone b` 54×54.
	        Box sa s písmom nezväčší, takže text z neho vytečie. Overené:
	        pri pokuse zdvihnúť ich na 12,5 px pretieklo 48 z nich naraz.
	        Zdvihnúť sa dajú až po prepise pevných `width`/`height` na
	        `min-width` s výplňou — a to je už zásah do rozloženia, nie
	        do typografie.

	   3 · CITÁTOVÁ VRSTVA V `osobny-audit` — `.headline-card strong`
	        (21,6 px), `.conversation-card blockquote` (16,8) a
	        `.relationship-summary h3` (22,08). Všetky tri sú Georgia, ktorá
	        má inú x-výšku než Google Sans Flex — rovnaké px v nej vyzerajú
	        väčšie. Škáluje sa celá, alebo vôbec; `h3` je jediný z nich,
	        ktorý rebrík chytil, preto sa nižšie vracia späť.

	   Kontrola po nasadení: na okne 1425 px sedí na rebríku 3 246 z 3 246
	   prvkov mimo týchto výnimiek, na 375 px 3 245 z 3 246 — ten jeden je
	   `.headline-card strong` z bodu 3.
	   =============================================================== */

	/* NÁVRAT — vždy posledný.
	 *
	 * Georgia v `osobny-audit` je zámerná citátová vrstva. Má inú x-výšku
	 * než Google Sans Flex, takže rovnaké px v nej vyzerajú väčšie —
	 * nasadenie našich priečok by ju rozladilo voči sebe samej. Škáluje sa
	 * celá, alebo vôbec; jediné, čo treba vrátiť, je `h3`. */
	.relationship-summary h3 {
		font-size: 22.08px;
		line-height: 1.3;
		font-weight: 500;
	}

	/* Tlač. `#report td` (1,0,1) by prebilo aj `@media print table
	   { font-size: .58rem }` vo finančnom poradcovi, kde sa navyše ruší
	   `min-width` aj `overflow` — osemstĺpcová tabuľka by sa na A4
	   nezmestila. Preto vlastné tlačové pravidlo, nie mlčanie. */
	@media print {
		:is(table, td, th) {
			font-size: 11px;
			line-height: 1.35;
		}
	}

	/* NAJUŽŠIE TELEFÓNY — NAVRSTVENÉ VÝPLNE.
	 *
	 * Nájdené auditom responzívnosti 3. 9. 2026. Pri okne 320 px má obsah
	 * reportu 245 px. Karta (`.rec-card`, `.panel`) si z toho vezme 18 px
	 * z každej strany a zoznam v nej ešte 40 px odsadenia — na text zostalo
	 * 167 px, teda 17 znakov na riadok. Text sa tam láme po dvoch slovách.
	 *
	 * Výplne sa preto na úzkom okne stiahnu. Zlom je 420 px, nie 375: pri
	 * 375 px bol text ešte v poriadku a nie je dôvod uberať priestor tam,
	 * kde nechýba.
	 *
	 * Platí to pre VŠETKY reporty naraz — každý si nesie vlastnú sádzbu
	 * v inline `<style>`, ale tieto triedy majú spoločné.
	 */
	@media (width < 420px) {
		:is(.rec-card, .panel, .card, .box, .note, .callout, .evidence) {
			padding-inline: 12px;
		}

		:is(ol, ul) {
			padding-inline-start: 22px;
		}
	}

	/* VNORENÉ MRIEŽKY.
	 *
	 * Report „leto" má dvojstĺpcovú mriežku (`.weekend-grid`) a v každej jej
	 * karte ešte jednu (`.weekend-card`, stĺpce 78 px + zvyšok). Pri okne
	 * 768 px z toho na text zostalo 164 px, teda 16 znakov na riadok —
	 * odmerané auditom 3. 9. 2026. Vnútorná mriežka nemá ako vedieť, že
	 * vonkajšia jej už polovicu vzala.
	 *
	 * Vonkajšia sa preto rozbalí skôr (pod 1000 px), vnútorná až na
	 * telefóne (pod 560 px). Tabuľkové riadky (`.budget-row`, `.route-stop`)
	 * sa NEROZBAĽUJÚ — sú to stĺpce s číslami, kde by strata zarovnania
	 * uškodila viac než úzky riadok.
	 */
	@media (width < 1000px) {
		:is(.weekend-grid, .verdict-grid, .assumptions, .actions-grid) {
			grid-template-columns: 1fr;
		}
	}

	@media (width < 560px) {
		:is(.weekend-card, .month-event) {
			grid-template-columns: 1fr;
		}

		/* Položky odškrtávacieho zoznamu majú vľavo 43 px na značku. Na
		   telefóne je to šestina riadku — značka sa zmestí aj do 28 px. */
		.checklist li {
			padding-inline-start: 28px;
		}
	}

	/* ZÁVEREČNÁ POZNÁMKA POD ČIAROU — jedna podoba pre všetkých desať.
	 *
	 * Zadávateľ (7. 9. 2026): „pod všetkými reportami je rôzne zarovnaný
	 * text pod čiarou, zarovnaj všetko doľava". Bola to pravda a bolo toho
	 * viac než zarovnanie — prešiel som závery všetkých desiatich:
	 *
	 *     značka   `<p class="footer">` (byty) · `<footer>` (domacnost, pc)
	 *              `<section class="footer">` (kaviaren)
	 *              `<footer class="footer"><div class="wrap">` (leto, salon,
	 *              financny-poradca, osobny-audit)
	 *     čiara    má ju byty, domacnost, pc, salon, osobny-audit — ostatní nie
	 *     smer     `text-align: center` vo `financny-poradca` a `leto`,
	 *              inde vľavo
	 *     kalkulacka a uctovnictvo záver nemajú vôbec
	 *
	 * Veľkosť písma už zjednotenú mala (bod 6a vyššie). Tu dochádza
	 * zvyšok: čiara nad, rovnaký odstup, jedna farba a všetko vľavo.
	 *
	 * `.footer-inner` (osobny-audit) je flex s `space-between`, teda jeden
	 * blok vľavo a druhý vpravo. Prepína sa na stĺpec — „všetko doľava"
	 * znamená aj toto, nie len `text-align`. */
	:is(footer, .footer) {
		margin-block-start: var(--space-2xl);
		padding-block: var(--space-md) 0;
		padding-inline: 0;
		border-block-start: 1px solid var(--theme-outline-variant);
		text-align: left;
		color: var(--theme-surface-on-surface-variant);

		.footer-inner {
			flex-direction: column;
			align-items: start;
			gap: var(--space-sm);
		}
	}

	/* KPI KARTY V HERO (`byty`) — DVA STĽPCE, NIE ŠTYRI.
	 *
	 * Zadávateľ (7. 9. 2026): „pretekajúce texty v Analyzované a predané byty,
	 * Nájomné benchmarky, Top hrubý výnos, Najvyššie skóre". Cez okraj text
	 * netečie — je stlačený, čo vyzerá rovnako zle. Odmerané pri okne 1440 px:
	 *
	 *     `.metric-grid` má `repeat(4, 1fr)`, ale sedí v ľavom stĺpci hera
	 *     (`1.08fr .92fr`), ktorý má 645 px — na kartu teda 151 px a na text
	 *     v nej 113 px. To je 8 až 12 znakov na riadok:
	 *
	 *         „Analyzované predajné byty"            3 riadky, 8,3 znaku
	 *         „kombinácia výnosu, likvidity a rizika" 3 riadky, 12,3 znaku
	 *
	 * A JE TO HORŠIE V ÚZKOM OKNE. Report si vlastný zlom robí cez
	 * `@media (max-width: 980px)`, teda podľa OKNA — ale šírku karty určuje
	 * stĺpec hera. Pri okne 1024 px je stĺpec už len ~455 px, zlom ešte
	 * neplatí a na kartu zostáva ~106 px. Preto to neopítame posunom zlomu.
	 *
	 * DVA STĽPCE sú správny počet: karty sú štyri, takže 2 × 2 je plná
	 * mriežka bez osamelej karty v druhom riadku — to by dalo `auto-fit`,
	 * ktoré pri 818 px (okno 1920) vyráta tri stĺpce a štvrtú kartu nechá
	 * samú. Odmerané po zmene: 315 px na kartu pri 1440 px, teda 279 px na
	 * text — najdlhší popisok sa zmestí na jeden riadok.
	 *
	 * Zlom reportu NÁM ZOSTÁVA: pod 980 px má byť jeden stĺpec a naše
	 * pravidlo je špecifickejšie než jeho, takže by ho inak prebilo. */
	.metric-grid {
		grid-template-columns: repeat(2, 1fr);

		@media (width <= 980px) {
			grid-template-columns: 1fr;
		}
	}

	/* `pc` má v hlavičke vetu „Ukážkové údaje · identita zariadenia…"
	   zarovnanú DOPRAVA, hoci nadpis aj perex nad ňou sú vľavo a je to ich
	   pokračovanie. Odmerané: `p.stamp` široký 829 px, text pri pravom
	   okraji toho istého stĺpca — vyzerá to ako odtrhnutý popisok obrázka.
	   Nahlásené zadávateľom 7. 9. 2026 („divne odsadená"). */
	.stamp {
		text-align: left;
	}
}

/* Návrat na zoznam promptov. Hlavička je `position: fixed`, preto to odsadenie. */
.report-navrat {
	grid-column: main;
	padding-block: 120px var(--space-lg);
}