/*
 * viry.cz theme — a thin layer on top of Bootstrap 5.3 (vendor/bootstrap.min.css).
 *
 * Dark only, on purpose: this is a security feed, it is read in the evening and on
 * a terminal-shaped screen, and half the palette carries meaning (green = fine,
 * amber = attention, red = severe). Red is used twice and the difference is the
 * weight, not the hue: KEV is filled and glowing because it is exploited today,
 * a critical CVSS is only outlined. A light variant would have to re-derive all
 * of that for no one.
 *
 * Everything here is plain CSS custom properties overriding Bootstrap's, plus a
 * handful of component rules. No build step, no JavaScript.
 */

:root,
[data-bs-theme='dark'] {
	/* Base: near-black with a green cast, not neutral grey. */
	--bs-body-bg: #05080a;
	--bs-body-bg-rgb: 5, 8, 10;
	--bs-body-color: #c6d3cc;
	--bs-body-color-rgb: 198, 211, 204;
	--bs-emphasis-color: #eafff2;
	--bs-secondary-color: rgba(198, 211, 204, 0.62);
	--bs-secondary-bg: #0b1014;
	--bs-tertiary-bg: #0e1418;
	--bs-border-color: #1c2b26;
	--bs-border-color-translucent: rgba(61, 220, 132, 0.14);

	/* Phosphor green: bright enough to glow, dark enough to read a paragraph in. */
	--bs-primary: #3ddc84;
	--bs-primary-rgb: 61, 220, 132;
	--bs-link-color: #4ee89a;
	--bs-link-color-rgb: 78, 232, 154;
	--bs-link-hover-color: #9dffc9;
	--bs-code-color: #7cf7b4;

	--bs-danger: #ff4d5e;
	--bs-danger-rgb: 255, 77, 94;
	--bs-warning: #ffb648;
	--bs-warning-rgb: 255, 182, 72;

	--bs-font-sans-serif: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--bs-font-monospace: ui-monospace, 'JetBrains Mono', 'SFMono-Regular', Menlo, Consolas, 'Liberation Mono', monospace;
	--bs-border-radius: 3px;
	--bs-border-radius-sm: 2px;
	--bs-border-radius-lg: 4px;

	/* Theme-local variables, not Bootstrap's. */
	--viry-glow: 0 0 0.5rem rgba(61, 220, 132, 0.35);
	--viry-rule: rgba(61, 220, 132, 0.18);
	--viry-panel: #090e11;
}

html {
	color-scheme: dark;
}

/* Long advisory titles need a measure, not the full width of a desktop screen. */
.container {
	max-width: 66rem;
}

body {
	/* Faint grid + a pool of light behind the header: a screen, not a sheet of paper. */
	background-color: var(--bs-body-bg);
	background-image:
		radial-gradient(ellipse 80% 45% at 50% -10%, rgba(61, 220, 132, 0.09), transparent 70%),
		linear-gradient(rgba(61, 220, 132, 0.028) 1px, transparent 1px),
		linear-gradient(90deg, rgba(61, 220, 132, 0.028) 1px, transparent 1px);
	background-size: 100% 100%, 34px 34px, 34px 34px;
	background-attachment: fixed;
	min-height: 100vh;
	font-size: 0.96rem;
}

/* Scanlines. Static, very low contrast — texture, not an effect. */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: repeating-linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.16) 0,
		rgba(0, 0, 0, 0.16) 1px,
		transparent 1px,
		transparent 3px
	);
	opacity: 0.5;
}

body > * {
	position: relative;
	z-index: 1;
}

::selection {
	background: rgba(61, 220, 132, 0.28);
	color: #eafff2;
}


/* --- header ------------------------------------------------------------- */

.site-header {
	border-bottom: 1px solid var(--viry-rule);
	background: linear-gradient(180deg, rgba(61, 220, 132, 0.06), transparent);
	backdrop-filter: blur(2px);
}

.brand {
	font-family: var(--bs-font-monospace);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--bs-primary);
	text-shadow: var(--viry-glow);
}

.brand:hover {
	color: var(--bs-link-hover-color);
}

/* The domain is the identity, the rest explains it — so it is lighter and smaller. */
.brand-suffix {
	margin-left: 0.5ch;
	font-weight: 400;
	font-size: 0.82em;
	color: var(--bs-secondary-color);
	text-shadow: none;
}

.brand:hover .brand-suffix {
	color: var(--bs-body-color);
}

/* Místo blikajícího kurzoru radar — stejná role (znamení, že to běží), ale říká
   i co to dělá: obchází dokola a co potká, to nasvítí. Bez JavaScriptu a bez
   obrázku: stínítko je pozadí elementu, ručička s dosvitem je jeden kuželový
   gradient v ::before a odraz je ::after. */
.brand-radar {
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-right: 0.6ch;
	vertical-align: -0.14em;
	position: relative;
	border-radius: 50%;
	border: 1px solid rgba(61, 220, 132, 0.42);
	box-shadow: var(--viry-glow);
	/* Střed, jeden kroužek a nitkový kříž. Statická část, proto je v pozadí
	   elementu, který se netočí. */
	background:
		radial-gradient(circle at 50% 50%, rgba(61, 220, 132, 0.8) 0 9%, transparent 10%),
		radial-gradient(circle at 50% 50%, transparent 0 52%, rgba(61, 220, 132, 0.22) 53% 56%, transparent 57%),
		linear-gradient(rgba(61, 220, 132, 0.13) 0 100%) 50% 0 / 1px 100% no-repeat,
		linear-gradient(rgba(61, 220, 132, 0.13) 0 100%) 0 50% / 100% 1px no-repeat,
		rgba(61, 220, 132, 0.05);
}

/* Tentýž radar na konci věty: v hlavičce stojí před názvem, tady za vykřičníkem,
   takže se odsazení překlápí na druhou stranu. */
.brand-radar-trailing {
	margin-right: 0;
	margin-left: 0.6ch;
}

.brand:hover .brand-radar {
	border-color: rgba(157, 255, 201, 0.7);
}

/* Ostrý přechod mezi 360° a 0° je ručička, plynulý úbytek za ní je dosvit.
   inset: -1px, aby dosvit dosáhl až na obrys a nezůstal tmavý prstenec. */
.brand-radar::before {
	content: '';
	position: absolute;
	inset: -1px;
	border-radius: 50%;
	background: conic-gradient(
		rgba(61, 220, 132, 0) 0deg,
		rgba(61, 220, 132, 0) 200deg,
		rgba(61, 220, 132, 0.1) 300deg,
		rgba(61, 220, 132, 0.38) 348deg,
		rgba(61, 220, 132, 0.95) 360deg
	);
	animation: viry-radar 2.6s linear infinite;
}

/* Odraz na 34° od dvanáctky: rozsvítí se v okamžiku, kdy tudy ručička projde
   (34/360 otáčky ≈ 9 % cyklu), a do dalšího kola zhasne. */
.brand-radar::after {
	content: '';
	position: absolute;
	top: 26%;
	left: 66%;
	width: 2px;
	height: 2px;
	border-radius: 50%;
	background: #9dffc9;
	box-shadow: 0 0 3px rgba(157, 255, 201, 0.9);
	opacity: 0;
	animation: viry-radar-blip 2.6s linear infinite;
}

@keyframes viry-radar {
	to {
		transform: rotate(360deg);
	}
}

@keyframes viry-radar-blip {
	0%, 8% {
		opacity: 0;
	}
	9% {
		opacity: 1;
	}
	55%, 100% {
		opacity: 0;
	}
}

/* Bez pohybu zůstane stínítko i s ručičkou na dvanáctce a odraz svítí trvale —
   je to pořád radar, jen zastavený. */
@media (prefers-reduced-motion: reduce) {
	.brand-radar::before,
	.brand-radar::after {
		animation: none;
	}

	.brand-radar::after {
		opacity: 0.75;
	}
}

/* Před titulkem karty stojí týž radar, ale zastavený. Na úvodní stránce je karet
   šedesát a každá otáčející se ručička je kuželový gradient překreslovaný v každém
   snímku; ta práce by šla za pohyb, kterého si u odrážky nikdo nevšimne. Podoba je
   táž, jakou dostanou lidé s prefers-reduced-motion — ručička na dvanáctce a odraz
   svítící trvale. Proto tenhle blok stojí až za tím médiem: obojí sahá na stejné
   vlastnosti a rozhoduje pořadí. */
.brand-radar-still::before,
.brand-radar-still::after {
	animation: none;
}

.brand-radar-still::after {
	opacity: 0.75;
}

.site-nav .nav-link {
	font-family: var(--bs-font-monospace);
	font-size: 0.85rem;
	text-transform: lowercase;
	color: var(--bs-secondary-color);
	padding: 0.25rem 0.6rem;
}

.site-nav .nav-link::before {
	content: '/';
	opacity: 0.45;
}

.site-nav .nav-link:hover,
.site-nav .nav-link.active {
	color: var(--bs-primary);
}


/* --- filter bar --------------------------------------------------------- */

.filters {
	background: var(--viry-panel);
	border: 1px solid var(--bs-border-color);
	border-left: 2px solid rgba(61, 220, 132, 0.5);
}

/* Věta nad panelem, ne v něm: uvnitř by ji čtenář četl jako popisek prvního pole.
   Tlumená a menší, protože je to nápověda k tomu, co je vidět níž na kartách.
   Bez max-width, aby byla přesně tak široká jako panel pod ní — obojí je přímý
   potomek téhož .container, takže se okraje potkají samy. Zúžená na čtecí míru
   končila uprostřed a vypadala vedle panelu jako utržený kus textu. */
.filters-tip {
	display: flex;
	gap: 0.7ch;
	font-size: 0.85rem;
	color: var(--bs-secondary-color);
}

/* Flex, ne inline: druhý řádek věty pak začíná pod prvním řádkem, ne pod stínítkem.
   Radar je o něco větší než písmo věty, aby se četl jako značka, a ne jako tečka
   odrážky; margin-top ho usadí na střed prvního řádku (0,85rem × 1,5 ≈ 20 px proti
   18 px stínítka), protože ve flexu vertical-align z .brand-radar neplatí. */
.filters-tip .brand-radar {
	flex: none;
	font-size: 1.15rem;
	margin-right: 0;
	margin-top: 0.06em;
}

.filters .form-label {
	font-family: var(--bs-font-monospace);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--bs-secondary-color);
	margin-bottom: 0.2rem;
}

.form-control,
.form-select {
	background-color: #060a0c;
	border-color: var(--bs-border-color);
	color: var(--bs-body-color);
}

.form-control:focus,
.form-select:focus {
	background-color: #060a0c;
	border-color: var(--bs-primary);
	color: var(--bs-emphasis-color);
	box-shadow: 0 0 0 0.2rem rgba(61, 220, 132, 0.16);
}

.form-control::placeholder {
	color: rgba(198, 211, 204, 0.35);
}

.form-check-input {
	background-color: #060a0c;
	border-color: var(--bs-border-color);
}

.form-check-input:checked {
	background-color: var(--bs-primary);
	border-color: var(--bs-primary);
}

.btn-terminal {
	font-family: var(--bs-font-monospace);
	font-size: 0.82rem;
	color: var(--bs-primary);
	border: 1px solid rgba(61, 220, 132, 0.55);
	background: rgba(61, 220, 132, 0.08);
}

.btn-terminal:hover,
.btn-terminal:focus {
	color: #04150c;
	background: var(--bs-primary);
	border-color: var(--bs-primary);
	box-shadow: var(--viry-glow);
}

/* Same shape as .btn-terminal, opposite meaning — pravidla se ruší, ne přidávají. */
.btn-terminal-danger {
	color: var(--bs-danger);
	border-color: rgba(255, 77, 94, 0.55);
	background: rgba(255, 77, 94, 0.08);
}

.btn-terminal-danger:hover,
.btn-terminal-danger:focus {
	color: #1a0406;
	background: var(--bs-danger);
	border-color: var(--bs-danger);
	box-shadow: 0 0 0.5rem rgba(255, 77, 94, 0.35);
}

.lang-switch {
	font-family: var(--bs-font-monospace);
	font-size: 0.78rem;
}

.lang-switch .active {
	color: var(--bs-primary);
	font-weight: 700;
}


/* --- intro --------------------------------------------------------------- */

/* Bez `max-width`: blok drží tutéž šířku jako filtr a karty pod ním, takže levá zelená
   hrana vede celou stránkou v jedné čáře. Řádek je tím delší, než je pro čtení ideální —
   proto jsou to tři krátké odstavce, ne jeden dlouhý. */
.site-intro {
	margin: 1.5rem 0 0.5rem;
	padding-left: 0.9rem;
	border-left: 2px solid rgba(61, 220, 132, 0.5);
}

/* Úvodní věta je co do velikosti nadpis, ne odstavec: drží se na 1.35rem stejně jako
   `.page-title` pod ní, aby dvě sdělení o tom, co stránka je, nezněla každé jinak
   nahlas. Následující odstavce si velikost sráží samy o kus níž. */
.site-intro p {
	margin: 0 0 0.6rem;
	color: var(--bs-emphasis-color);
	font-size: 1.35rem;
	line-height: 1.6;
}

.site-intro p:last-child {
	margin-bottom: 0;
}

/* Any sentence after the opening one is supporting text, not a headline. */
.site-intro p ~ p {
	color: var(--bs-body-color);
	font-size: 0.96rem;
}


/* Numbers read from the database. Bigger and in the accent colour, because they
   are the one part of an intro paragraph a reader actually scans for. */
.stat {
	font-family: var(--bs-font-monospace);
	font-size: 1.35em;
	font-weight: 700;
	line-height: 1;
	color: var(--bs-primary);
	font-variant-numeric: tabular-nums;
	text-shadow: 0 0 0.4rem rgba(61, 220, 132, 0.3);
}


/* --- listing ------------------------------------------------------------ */

.page-title {
	font-family: var(--bs-font-monospace);
	font-size: 1.35rem;
	color: var(--bs-emphasis-color);
	letter-spacing: -0.01em;
}

/* The intro and the filter panel carry the same green left edge, so stacked they read
   as one block and the heading between them gets lost. A rule above the heading draws
   the line where it belongs: what the site is, then what you are about to filter.
   On the heading rather than under the intro so it spans the full column — the intro
   stops at 44rem and a short line would look like part of it. */
.site-intro + .page-title {
	margin-top: 1.75rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--viry-rule);
}

.page-title::before {
	content: '// ';
	color: var(--bs-primary);
	opacity: 0.7;
}

.meta-line {
	font-family: var(--bs-font-monospace);
	font-size: 0.78rem;
	color: var(--bs-secondary-color);
}

.day-heading {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--bs-font-monospace);
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--bs-primary);
	padding-bottom: 0.35rem;
	border-bottom: 1px solid var(--viry-rule);
}

.day-heading::before {
	content: '>';
	opacity: 0.7;
}

.day-heading .count {
	font-family: var(--bs-font-monospace);
	font-size: 0.72rem;
	letter-spacing: 0;
	color: var(--bs-secondary-color);
	margin-left: auto;
}

.card-item {
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--bs-border-color);
	border-left: 2px solid transparent;
	padding: 0.85rem 0 0.85rem 0.85rem;
	transition: border-color 0.12s linear, background-color 0.12s linear;
}

.card-item:hover {
	border-left-color: var(--bs-primary);
	background: rgba(61, 220, 132, 0.03);
}

.card-item.is-kev {
	border-left-color: rgba(255, 77, 94, 0.65);
}

.card-title-link {
	color: var(--bs-emphasis-color);
	text-decoration: none;
	font-weight: 600;
	font-size: 1.02rem;
	line-height: 1.35;
}

.card-title-link:hover {
	color: var(--bs-primary);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.card-text {
	color: var(--bs-body-color);
	margin: 0.3rem 0 0.5rem;
}

.card-meta {
	font-family: var(--bs-font-monospace);
	font-size: 0.75rem;
	color: var(--bs-secondary-color);
}

/* Keeps a source and its time on one line, so a wrapping meta row never leaves a
   date orphaned under the name of the source it does not belong to. */
.card-source {
	display: inline-block;
	white-space: nowrap;
}

.card-source time {
	opacity: 0.75;
}

.machine-note {
	font-family: var(--bs-font-monospace);
	font-size: 0.72rem;
	color: rgba(255, 182, 72, 0.85);
}

.machine-note::before {
	content: '⚙ ';
}


/* Says what was filtered on, directly under the heading. Parts come and go, so the
   separator is drawn between whichever two survived rather than written into the
   markup next to one of them. */
.filter-line span + span::before {
	content: ' · ';
	opacity: 0.6;
}

/* --- CVE header --------------------------------------------------------- */

/* Shown when the listing is filtered down to a single CVE — a panel in the flow,
   above the listing it belongs to. Bylo to okno, které z něj dělal skript; s ním
   odešla past na fokus, pozadí, tlačítko na znovuotevření i pevná hlavička se
   scrollujícím tělem. Odklidit detail nejde a je to vědomé: 2 082 CVE z 2 292 má
   jediné hodnocení, takže panel je krátký. */
.cve-head {
	background: var(--viry-panel);
	border: 1px solid var(--bs-border-color);
	border-radius: var(--bs-border-radius);
	color: var(--bs-body-color);
	width: 100%;
	max-width: 48rem;
	margin: 0 0 1rem;
	padding: 1rem;
}

.cve-panel-title {
	font-family: var(--bs-font-monospace);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--bs-emphasis-color);
}

.cve-head-label {
	font-family: var(--bs-font-monospace);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bs-secondary-color);
}

/*
 * Hodnocení pod sebou, každé s rozpadem svého vektoru.
 *
 * Dřív to byla tabulka o čtyřech sloupcích. Rozpad se do ní nevešel: jedno CVE má až
 * čtyři hodnocení a osm řádků metrik krát čtyři by z okna udělalo formulář. Štítky se
 * zalomí a dají přelétnout očima.
 */
.cve-scores {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}

.cve-rating {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	padding-left: 0.8rem;
	border-left: 2px solid var(--bs-border-color);
}

.cve-rating-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	font-family: var(--bs-font-monospace);
	font-size: 0.8rem;
}

/* Popisek skupiny drží pevný sloupec, ať štítky začínají pod sebou. Pod 30rem se
   z toho stanou dva řádky — na telefonu je čtyřiapůl centimetru na popisek moc. */
.cve-metric-row {
	display: grid;
	grid-template-columns: 4.5rem 1fr;
	gap: 0.5rem;
	align-items: start;
}

@media (max-width: 30rem) {
	.cve-metric-row {
		grid-template-columns: 1fr;
		gap: 0.2rem;
	}
}

.cve-metric-label {
	font-family: var(--bs-font-monospace);
	font-size: 0.68rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bs-secondary-color);
	padding-top: 0.25em;
}

.cve-metric-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
}

/* The score borrows the badge palette so a 7.5 means the same colour here as on a
   card, but without the border — a row of framed cells would read as a grid. */
.cve-score {
	font-weight: 700;
	font-size: 1.05rem;
	font-variant-numeric: tabular-nums;
}

.cve-score-version,
.cve-score-source {
	color: var(--bs-secondary-color);
}

.cve-score-source {
	font-weight: 500;
	color: var(--bs-body-color);
}

/* The vector is the evidence, not the headline: readable when looked for, quiet
   otherwise. Zalomí se kdekoli — `nowrap` dávalo smysl, dokud vodorovně scrollovala
   tabulka kolem něj; teď stojí volně a na telefonu by okno rozšířil. */
.cve-score-vector {
	font-family: var(--bs-font-monospace);
	font-size: 0.68rem;
	color: var(--bs-secondary-color);
	opacity: 0.75;
	overflow-wrap: anywhere;
}

.cve-head-note {
	font-size: 0.8rem;
	color: var(--bs-secondary-color);
	max-width: 46rem;
}

.cve-head-links {
	font-size: 0.8rem;
}

/* --- badges ------------------------------------------------------------- */

.badge-fact {
	font-family: var(--bs-font-monospace);
	font-weight: 500;
	font-size: 0.7rem;
	letter-spacing: 0.02em;
	padding: 0.22em 0.5em;
	border: 1px solid var(--bs-border-color);
	background: rgba(255, 255, 255, 0.03);
	color: var(--bs-secondary-color);
}

/*
 * Tři stupně, ne fajfka a křížek: `AV:N` není chyba, je to okolnost. Šipka říká, kam
 * metrika tlačí **závažnost** — u dopadu totiž druhé čtení neplatí, `A:N` („bez
 * výpadku“) útok o nic neztěžuje, jen zmenšuje škodu.
 *
 * Kreslená v CSS, ne znakem: ↗ má v Unicode emoji variantu a část systémů ji tak
 * i vysází, takže by mezi štítky svítil barevný piktogram. Trojúhelník z rámečků
 * dědí `currentColor`, čímž se barva šipky drží barvy stupně sama.
 *
 * Stojí **za** `.badge-fact`, protože jinak by jeho `color: var(--bs-secondary-color)`
 * při shodné specificitě přebil barvy stupňů.
 */
.badge-metric {
	text-transform: none;
	/* Bootstrapí `.badge` má nowrap; nejdelší popisek má 39 znaků a na úzkém displeji
	   by štítek přetekl z panelu ven. */
	white-space: normal;
	display: inline-flex;
	align-items: baseline;
	gap: 0.4em;
}

.badge-metric::before {
	content: '';
	flex: none;
	width: 0;
	height: 0;
	border-left: 0.3em solid transparent;
	border-right: 0.3em solid transparent;
	border-bottom: 0.36em solid currentColor;
	transform: translateY(-0.05em);
}

/*
 * Tlumenější červená než `.badge-kev`, a platí to i pro štítek `E:A`, jehož text zní
 * doslova „aktivně zneužíváno“. Není to nedůslednost: KEV je katalog CISA, kdežto tohle
 * je tvrzení vydavatele v jeho vlastním vektoru — u čtrnácti CVE stojí bez KEV. Ostrá
 * červená zůstává vyhrazená katalogu.
 */
.badge-metric-aggravating {
	border-color: rgba(255, 77, 94, 0.4);
	color: #e08b93;
}

/* Mírně stoupající: týž trojúhelník otočený o 45°. */
.badge-metric-partial {
	border-color: rgba(255, 182, 72, 0.4);
	color: var(--bs-warning);
}

.badge-metric-partial::before {
	transform: rotate(45deg) translateY(-0.05em);
}

/*
 * Zelená, ne šedá. V tomhle tématu zelená znamená „v pořádku“ (viz README, *Vzhled*),
 * takže škála přestane být trojicí odstínů a je z ní táž paleta, jakou web používá
 * jinde: červená přitěžuje, oranžová varuje, zelená uklidňuje.
 *
 * Plná akcentní zelená, tatáž jako u tlačítka `.btn-terminal` — ne ztlumená. Riziko,
 * že se to bude číst jako odkaz, nese jen barva textu; štítek má rám a nepodtrhává se,
 * takže ho od odkazu odliší tvar.
 */
.badge-metric-mitigating {
	border-color: rgba(61, 220, 132, 0.55);
	color: var(--bs-primary);
}

.badge-metric-mitigating::before {
	transform: rotate(180deg) translateY(-0.05em);
}

/* Jediný neutrální štítek, a je to nutnost: hodnotami metriky `U` jsou samy názvy
   barev (Amber, Red), takže obarvený by tvrdil dvě barvy najednou. Šipku nemá —
   doplňkové metriky závažností nehýbou vůbec. */
.badge-metric-neutral {
	border-color: var(--bs-border-color);
	color: var(--bs-secondary-color);
}

.badge-metric-neutral::before {
	content: none;
}

/* Legenda je tatáž trojice štítků, jen s textem místo popisku metriky. */
.cve-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	margin-top: 1rem;
	padding-top: 0.8rem;
	border-top: 1px solid var(--viry-rule);
}


.badge-cve {
	border-color: rgba(61, 220, 132, 0.4);
	color: var(--bs-link-color);
}

.badge-cve:hover {
	border-color: var(--bs-primary);
	color: var(--bs-link-hover-color);
}

.badge-kev {
	border-color: rgba(255, 77, 94, 0.7);
	background: rgba(255, 77, 94, 0.12);
	color: #ff8b96;
	font-weight: 700;
	box-shadow: 0 0 0.45rem rgba(255, 77, 94, 0.28);
}

.badge-epss-high {
	border-color: rgba(255, 182, 72, 0.6);
	color: var(--bs-warning);
}

/* CVSS follows the qualitative bands of the specification, so the colour says the
   same thing here as on every other advisory tracker. Outline only — no fill, no
   glow, no bold: those belong to KEV, which outranks any score, and the critical
   band has to stay legible as the weaker of the two reds sitting side by side. */
.badge-cvss-none,
.badge-cvss-low {
	border-color: rgba(140, 167, 154, 0.35);
	color: #8ca79a;
}

.badge-cvss-medium {
	border-color: rgba(224, 207, 90, 0.42);
	color: #e0cf5a;
}

/* Two thirds of the scored items land here, so this is the resting state of the
   listing rather than a warning. Deliberately the quietest of the three warm tones. */
.badge-cvss-high {
	border-color: rgba(255, 145, 71, 0.45);
	color: #ff9147;
}

.badge-cvss-critical {
	border-color: rgba(255, 77, 94, 0.55);
	color: #ff6b78;
}

.badge-country {
	letter-spacing: 0.06em;
}

/* Vendor and sector tags are links (they filter the listing), so they need hover
   feedback the static badges do not have. */
a.badge-fact {
	text-decoration: none;
	transition: border-color 0.12s linear, color 0.12s linear;
}

.badge-vendor {
	border-color: rgba(111, 179, 242, 0.45);
	color: #8cc2f0;
}

.badge-vendor:hover {
	border-color: #8cc2f0;
	color: #c4e0fa;
}

.badge-sector {
	border-color: rgba(255, 182, 72, 0.45);
	color: var(--bs-warning);
}

.badge-sector:hover {
	border-color: var(--bs-warning);
	color: #ffd393;
}

/* --- badge v menu ------------------------------------------------------- */

/*
 * Upoutávky v hlavičce, ne fakta o položce — proto plná výplň, zatímco všechny
 * `badge-fact` jsou obrysové. Rozdíl v provedení je tu schválně: červená jinak
 * v tématu znamená „aktivně zneužíváno“ (`badge-kev`) a dvě různé věci ve stejném
 * kabátě by tu sémantiku rozmělnily. Vedle sebe se nepotkají — tyhle jsou
 * v hlavičce, KEV ve výpisu.
 *
 * Velikost v `em`, ne v `rem`, aby se řídila kontextem, kam se badge vloží.
 */
.badge-ai {
	display: inline-block;
	margin-left: 0.45ch;
	padding: 0.1em 0.42em;
	border-radius: 2px;
	font-family: var(--bs-font-monospace);
	font-size: 0.72em;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.45;
	/* Menu má `text-transform: lowercase`, který by ze zkratky udělal „ai“. */
	text-transform: uppercase;
	vertical-align: 0.12em;
	background: var(--bs-danger);
	color: #12060a;
	box-shadow: 0 0 0.5rem rgba(255, 77, 94, 0.5);
}

/* --- country flags ------------------------------------------------------ */

/*
 * Inline SVG rather than the flag emoji: Windows ships no glyphs for regional
 * indicator symbols, so 🇨🇿 renders there as the letters "CZ" and the badge reads
 * twice. These are deliberately crude — at 14 px what carries the meaning is the
 * colour pattern. A country with no rule here simply shows its code.
 */
.flag {
	display: inline-block;
	width: 1.15em;
	height: 0.78em;
	margin-right: 0.3em;
	vertical-align: -0.08em;
	border-radius: 1px;
	background-size: cover;
	background-position: center;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.flag-cz {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%206%204'%3E%3Crect%20width='6'%20height='2'%20fill='%23fff'/%3E%3Crect%20y='2'%20width='6'%20height='2'%20fill='%23d7141a'/%3E%3Cpath%20d='M0%200l3%202-3%202z'%20fill='%2311457e'/%3E%3C/svg%3E");
}

.flag-pl {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%206%204'%3E%3Crect%20width='6'%20height='2'%20fill='%23fff'/%3E%3Crect%20y='2'%20width='6'%20height='2'%20fill='%23dc143c'/%3E%3C/svg%3E");
}

.flag-at {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%206%204'%3E%3Crect%20width='6'%20height='4'%20fill='%23ed2939'/%3E%3Crect%20y='1.333'%20width='6'%20height='1.334'%20fill='%23fff'/%3E%3C/svg%3E");
}

.flag-sk {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%206%204'%3E%3Crect%20width='6'%20height='1.333'%20fill='%23fff'/%3E%3Crect%20y='1.333'%20width='6'%20height='1.334'%20fill='%230b4ea2'/%3E%3Crect%20y='2.667'%20width='6'%20height='1.333'%20fill='%23ee1c25'/%3E%3Cpath%20d='M1.05%201.15h1.7v1.2c0%20.8-.85%201.1-.85%201.1s-.85-.3-.85-1.1z'%20fill='%23ee1c25'%20stroke='%23fff'%20stroke-width='.24'/%3E%3Cpath%20d='M1.78%201.5h.24v1.85h-.24z'%20fill='%23fff'/%3E%3Cpath%20d='M1.35%201.95h1.1v.22h-1.1z'%20fill='%23fff'/%3E%3Cpath%20d='M1.5%202.5h.8v.22h-.8z'%20fill='%23fff'/%3E%3C/svg%3E");
}

.flag-eu {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%206%204'%3E%3Crect%20width='6'%20height='4'%20fill='%23039'/%3E%3Ccircle%20cx='3.000'%20cy='0.950'%20r='.17'%20fill='%23fc0'/%3E%3Ccircle%20cx='3.525'%20cy='1.091'%20r='.17'%20fill='%23fc0'/%3E%3Ccircle%20cx='3.909'%20cy='1.475'%20r='.17'%20fill='%23fc0'/%3E%3Ccircle%20cx='4.050'%20cy='2.000'%20r='.17'%20fill='%23fc0'/%3E%3Ccircle%20cx='3.909'%20cy='2.525'%20r='.17'%20fill='%23fc0'/%3E%3Ccircle%20cx='3.525'%20cy='2.909'%20r='.17'%20fill='%23fc0'/%3E%3Ccircle%20cx='3.000'%20cy='3.050'%20r='.17'%20fill='%23fc0'/%3E%3Ccircle%20cx='2.475'%20cy='2.909'%20r='.17'%20fill='%23fc0'/%3E%3Ccircle%20cx='2.091'%20cy='2.525'%20r='.17'%20fill='%23fc0'/%3E%3Ccircle%20cx='1.950'%20cy='2.000'%20r='.17'%20fill='%23fc0'/%3E%3Ccircle%20cx='2.091'%20cy='1.475'%20r='.17'%20fill='%23fc0'/%3E%3Ccircle%20cx='2.475'%20cy='1.091'%20r='.17'%20fill='%23fc0'/%3E%3C/svg%3E");
}

.flag-us {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%206%204'%3E%3Crect%20width='6'%20height='4'%20fill='%23fff'/%3E%3Crect%20y='0.0000'%20width='6'%20height='.3077'%20fill='%23b22234'/%3E%3Crect%20y='0.6154'%20width='6'%20height='.3077'%20fill='%23b22234'/%3E%3Crect%20y='1.2308'%20width='6'%20height='.3077'%20fill='%23b22234'/%3E%3Crect%20y='1.8462'%20width='6'%20height='.3077'%20fill='%23b22234'/%3E%3Crect%20y='2.4616'%20width='6'%20height='.3077'%20fill='%23b22234'/%3E%3Crect%20y='3.0770'%20width='6'%20height='.3077'%20fill='%23b22234'/%3E%3Crect%20y='3.6924'%20width='6'%20height='.3077'%20fill='%23b22234'/%3E%3Crect%20width='2.4'%20height='2.154'%20fill='%233c3b6e'/%3E%3Ccircle%20cx='0.40'%20cy='0.38'%20r='.11'%20fill='%23fff'/%3E%3Ccircle%20cx='0.95'%20cy='0.38'%20r='.11'%20fill='%23fff'/%3E%3Ccircle%20cx='1.50'%20cy='0.38'%20r='.11'%20fill='%23fff'/%3E%3Ccircle%20cx='2.05'%20cy='0.38'%20r='.11'%20fill='%23fff'/%3E%3Ccircle%20cx='0.40'%20cy='0.98'%20r='.11'%20fill='%23fff'/%3E%3Ccircle%20cx='0.95'%20cy='0.98'%20r='.11'%20fill='%23fff'/%3E%3Ccircle%20cx='1.50'%20cy='0.98'%20r='.11'%20fill='%23fff'/%3E%3Ccircle%20cx='2.05'%20cy='0.98'%20r='.11'%20fill='%23fff'/%3E%3Ccircle%20cx='0.40'%20cy='1.58'%20r='.11'%20fill='%23fff'/%3E%3Ccircle%20cx='0.95'%20cy='1.58'%20r='.11'%20fill='%23fff'/%3E%3Ccircle%20cx='1.50'%20cy='1.58'%20r='.11'%20fill='%23fff'/%3E%3Ccircle%20cx='2.05'%20cy='1.58'%20r='.11'%20fill='%23fff'/%3E%3C/svg%3E");
}


/* --- prose pages (about) ------------------------------------------------- */

.prose {
	max-width: 44rem;
}

.prose h2 {
	font-family: var(--bs-font-monospace);
	font-size: 0.95rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--bs-primary);
	margin: 2rem 0 0.75rem;
	padding-bottom: 0.3rem;
	border-bottom: 1px solid var(--viry-rule);
}

.prose p,
.prose li {
	line-height: 1.65;
}

.prose ul {
	padding-left: 1.1rem;
}

.prose li {
	margin-bottom: 0.35rem;
}

.lead-text {
	font-size: 1.05rem;
	color: var(--bs-emphasis-color);
}

/* --- pager --------------------------------------------------------------- */

.pager {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin: 2rem 0 1rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--viry-rule);
}

.pager .disabled {
	opacity: 0.35;
	pointer-events: none;
}

.pager-position {
	font-family: var(--bs-font-monospace);
	font-size: 0.8rem;
	color: var(--bs-secondary-color);
	font-variant-numeric: tabular-nums;
}


/* --- stats --------------------------------------------------------------- */

.stat-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.stat-tile {
	flex: 1 1 8rem;
	padding: 0.8rem 1rem;
	background: var(--viry-panel);
	border: 1px solid var(--bs-border-color);
	border-left: 2px solid rgba(61, 220, 132, 0.5);
	border-radius: var(--bs-border-radius);
}

/* Bots are shown for honesty about what the raw numbers contain, not as a result. */
.stat-tile-muted {
	border-left-color: var(--bs-border-color);
	opacity: 0.65;
}

.stat-tile .stat {
	display: block;
	font-size: 1.6rem;
}

.stat-label {
	display: block;
	margin-top: 0.15rem;
	font-family: var(--bs-font-monospace);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--bs-secondary-color);
}

.section-heading {
	font-family: var(--bs-font-monospace);
	font-size: 0.95rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--bs-primary);
	margin: 2rem 0 0.75rem;
	padding-bottom: 0.3rem;
	border-bottom: 1px solid var(--viry-rule);
}


/* --- sources table ------------------------------------------------------ */

.table {
	--bs-table-bg: transparent;
	--bs-table-color: var(--bs-body-color);
	--bs-table-border-color: var(--bs-border-color);
	--bs-table-hover-bg: rgba(61, 220, 132, 0.04);
	font-size: 0.86rem;
}

.table > thead th {
	font-family: var(--bs-font-monospace);
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: var(--bs-secondary-color);
	border-bottom-color: var(--viry-rule);
	font-weight: 500;
}

.table td {
	vertical-align: top;
}

.row-off {
	opacity: 0.55;
}

.source-name {
	color: var(--bs-emphasis-color);
	text-decoration: none;
	font-weight: 600;
}

.source-name:hover {
	color: var(--bs-primary);
}

/* Block-level, so it must stay on spans inside a cell — never on the <td> itself. */
.source-id,
.source-detail {
	display: block;
	font-family: var(--bs-font-monospace);
	font-size: 0.72rem;
	color: var(--bs-secondary-color);
	word-break: break-word;
}

.cell-mono {
	font-family: var(--bs-font-monospace);
	font-size: 0.72rem;
	color: var(--bs-secondary-color);
	white-space: nowrap;
}

.state {
	font-family: var(--bs-font-monospace);
	font-size: 0.74rem;
	font-weight: 700;
	white-space: nowrap;
}

.state-ok {
	color: var(--bs-primary);
}

.state-error {
	color: var(--bs-danger);
	text-shadow: 0 0 0.4rem rgba(255, 77, 94, 0.4);
}

.state-off,
.state-idle {
	color: var(--bs-secondary-color);
}


/* --- footer ------------------------------------------------------------- */

.site-footer {
	margin-top: 3rem;
	border-top: 1px solid var(--viry-rule);
	font-size: 0.8rem;
	color: var(--bs-secondary-color);
}

.site-footer .lead-line {
	font-family: var(--bs-font-monospace);
	color: rgba(61, 220, 132, 0.55);
}

.flag-be {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%206%204'%3E%3Crect%20width='2'%20height='4'%20fill='%23000'/%3E%3Crect%20x='2'%20width='2'%20height='4'%20fill='%23fdda24'/%3E%3Crect%20x='4'%20width='2'%20height='4'%20fill='%23ef3340'/%3E%3C/svg%3E");
}

.flag-ru {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%206%204'%3E%3Crect%20width='6'%20height='1.334'%20fill='%23fff'/%3E%3Crect%20y='1.334'%20width='6'%20height='1.333'%20fill='%230039a6'/%3E%3Crect%20y='2.667'%20width='6'%20height='1.333'%20fill='%23d52b1e'/%3E%3C/svg%3E");
}

.flag-il {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%206%204'%3E%3Crect%20width='6'%20height='4'%20fill='%23fff'/%3E%3Crect%20y='.45'%20width='6'%20height='.42'%20fill='%230038b8'/%3E%3Crect%20y='3.13'%20width='6'%20height='.42'%20fill='%230038b8'/%3E%3Cpath%20d='M3%201.35l.72%201.25H2.28z'%20fill='none'%20stroke='%230038b8'%20stroke-width='.16'/%3E%3Cpath%20d='M3%202.85L2.28%201.6h1.44z'%20fill='none'%20stroke='%230038b8'%20stroke-width='.16'/%3E%3C/svg%3E");
}

.flag-gb {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%206%204'%3E%3Crect%20width='6'%20height='4'%20fill='%23012169'/%3E%3Cpath%20d='M0%200l6%204M6%200L0%204'%20stroke='%23fff'%20stroke-width='.8'/%3E%3Cpath%20d='M0%200l6%204M6%200L0%204'%20stroke='%23c8102e'%20stroke-width='.45'/%3E%3Cpath%20d='M3%200v4M0%202h6'%20stroke='%23fff'%20stroke-width='1.3'/%3E%3Cpath%20d='M3%200v4M0%202h6'%20stroke='%23c8102e'%20stroke-width='.8'/%3E%3C/svg%3E");
}

.flag-fr {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%206%204'%3E%3Crect%20width='2'%20height='4'%20fill='%23002395'/%3E%3Crect%20x='2'%20width='2'%20height='4'%20fill='%23fff'/%3E%3Crect%20x='4'%20width='2'%20height='4'%20fill='%23ed2939'/%3E%3C/svg%3E");
}

.flag-jp {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%206%204'%3E%3Crect%20width='6'%20height='4'%20fill='%23fff'/%3E%3Ccircle%20cx='3'%20cy='2'%20r='1.2'%20fill='%23bc002d'/%3E%3C/svg%3E");
}

.flag-sg {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%206%204'%3E%3Crect%20width='6'%20height='2'%20fill='%23ed2939'/%3E%3Crect%20y='2'%20width='6'%20height='2'%20fill='%23fff'/%3E%3Ccircle%20cx='1.5'%20cy='1'%20r='.62'%20fill='%23fff'/%3E%3Ccircle%20cx='1.78'%20cy='1'%20r='.52'%20fill='%23ed2939'/%3E%3Ccircle%20cx='2.35'%20cy='.62'%20r='.11'%20fill='%23fff'/%3E%3Ccircle%20cx='2.35'%20cy='1.38'%20r='.11'%20fill='%23fff'/%3E%3Ccircle%20cx='2.62'%20cy='1'%20r='.11'%20fill='%23fff'/%3E%3C/svg%3E");
}

/* Země doplněné 19. 8. 2026 spolu s novými zdroji. Kreslí se stejně jako
   ostatní — jeden 6×4 SVG v data URI, bez vnějšího souboru. */

.flag-hu {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%206%204'%3E%3Crect%20x='0'%20y='0'%20width='6'%20height='1.333'%20fill='%23cd2a3e'/%3E%3Crect%20x='0'%20y='1.333'%20width='6'%20height='1.334'%20fill='%23ffffff'/%3E%3Crect%20x='0'%20y='2.667'%20width='6'%20height='1.333'%20fill='%23436f4d'/%3E%3C/svg%3E");
}

.flag-nl {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%206%204'%3E%3Crect%20x='0'%20y='0'%20width='6'%20height='1.333'%20fill='%23ae1c28'/%3E%3Crect%20x='0'%20y='1.333'%20width='6'%20height='1.334'%20fill='%23ffffff'/%3E%3Crect%20x='0'%20y='2.667'%20width='6'%20height='1.333'%20fill='%2321468b'/%3E%3C/svg%3E");
}

.flag-ua {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%206%204'%3E%3Crect%20x='0'%20y='0'%20width='6'%20height='2'%20fill='%23005bbb'/%3E%3Crect%20x='0'%20y='2'%20width='6'%20height='2'%20fill='%23ffd500'/%3E%3C/svg%3E");
}

.flag-es {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%206%204'%3E%3Crect%20x='0'%20y='0'%20width='6'%20height='1'%20fill='%23aa151b'/%3E%3Crect%20x='0'%20y='1'%20width='6'%20height='2'%20fill='%23f1bf00'/%3E%3Crect%20x='0'%20y='3'%20width='6'%20height='1'%20fill='%23aa151b'/%3E%3C/svg%3E");
}

.flag-ro {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%206%204'%3E%3Crect%20x='0'%20y='0'%20width='2'%20height='4'%20fill='%23002b7f'/%3E%3Crect%20x='2'%20y='0'%20width='2'%20height='4'%20fill='%23fcd116'/%3E%3Crect%20x='4'%20y='0'%20width='2'%20height='4'%20fill='%23ce1126'/%3E%3C/svg%3E");
}

.flag-it {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%206%204'%3E%3Crect%20x='0'%20y='0'%20width='2'%20height='4'%20fill='%23008c45'/%3E%3Crect%20x='2'%20y='0'%20width='2'%20height='4'%20fill='%23f4f5f0'/%3E%3Crect%20x='4'%20y='0'%20width='2'%20height='4'%20fill='%23cd212a'/%3E%3C/svg%3E");
}

.flag-fi {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%206%204'%3E%3Crect%20x='0'%20y='0'%20width='6'%20height='4'%20fill='%23ffffff'/%3E%3Crect%20x='0'%20y='1.6'%20width='6'%20height='0.8'%20fill='%23003580'/%3E%3Crect%20x='1.5'%20y='0'%20width='0.8'%20height='4'%20fill='%23003580'/%3E%3C/svg%3E");
}

.flag-se {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%206%204'%3E%3Crect%20x='0'%20y='0'%20width='6'%20height='4'%20fill='%23006aa7'/%3E%3Crect%20x='0'%20y='1.6'%20width='6'%20height='0.8'%20fill='%23fecc00'/%3E%3Crect%20x='1.5'%20y='0'%20width='0.8'%20height='4'%20fill='%23fecc00'/%3E%3C/svg%3E");
}

.flag-si {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%206%204'%3E%3Crect%20x='0'%20y='0'%20width='6'%20height='1.333'%20fill='%23ffffff'/%3E%3Crect%20x='0'%20y='1.333'%20width='6'%20height='1.334'%20fill='%23005ce6'/%3E%3Crect%20x='0'%20y='2.667'%20width='6'%20height='1.333'%20fill='%23ed1c24'/%3E%3Cpath%20d='M1.1.55h1.5v1.5c0%20.55-.75.85-.75.85s-.75-.3-.75-.85z'%20fill='%23005ce6'%20stroke='%23fff'%20stroke-width='.16'/%3E%3Cpath%20d='M1.85%201.05l.5.85h-1z'%20fill='%23fff'/%3E%3C/svg%3E");
}

.flag-hr {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%206%204'%3E%3Crect%20x='0'%20y='0'%20width='6'%20height='1.333'%20fill='%23ff0000'/%3E%3Crect%20x='0'%20y='1.333'%20width='6'%20height='1.334'%20fill='%23ffffff'/%3E%3Crect%20x='0'%20y='2.667'%20width='6'%20height='1.333'%20fill='%23171796'/%3E%3Crect%20x='2.4'%20y='1.35'%20width='0.4'%20height='0.4'%20fill='%23ff0000'/%3E%3Crect%20x='3.2'%20y='1.35'%20width='0.4'%20height='0.4'%20fill='%23ff0000'/%3E%3Crect%20x='2.8'%20y='1.75'%20width='0.4'%20height='0.4'%20fill='%23ff0000'/%3E%3Crect%20x='2.4'%20y='2.15'%20width='0.4'%20height='0.4'%20fill='%23ff0000'/%3E%3Crect%20x='3.2'%20y='2.15'%20width='0.4'%20height='0.4'%20fill='%23ff0000'/%3E%3C/svg%3E");
}

.flag-ca {
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%206%204'%3E%3Crect%20x='0'%20y='0'%20width='6'%20height='4'%20fill='%23ffffff'/%3E%3Crect%20x='0'%20y='0'%20width='1.5'%20height='4'%20fill='%23d52b1e'/%3E%3Crect%20x='4.5'%20y='0'%20width='1.5'%20height='4'%20fill='%23d52b1e'/%3E%3Cpath%20d='M3.00%2C0.85%203.13%2C1.22%203.38%2C1.15%203.32%2C1.49%203.76%2C1.40%203.68%2C1.63%203.95%2C1.88%203.57%2C2.05%203.63%2C2.23%203.25%2C2.16%203.32%2C2.83%203.10%2C2.78%203.10%2C3.15%202.90%2C2.78%202.68%2C2.83%202.75%2C2.16%202.37%2C2.23%202.43%2C2.05%202.05%2C1.88%202.32%2C1.63%202.24%2C1.40%202.68%2C1.49%202.62%2C1.15%202.87%2C1.22%203.00%2C0.85z'%20fill='%23d52b1e'/%3E%3C/svg%3E");
}


/* --- weekly digest ------------------------------------------------------- */

/* Text tématu má jinou roli než perex karty: je to redakční věta o tom, co ty karty
   pod ním spojuje, takže dostane šířku odstavce a ne šířku výpisu. */
.week-theme {
	margin-bottom: 2.5rem;
}

/* Nadpis nad leadem. Ve škále webu o stupeň nad nadpisem tématu (1,18) a pod názvem
   stránky (1,35): průřez stojí nad všemi tématy, ne vedle nich, a velikost je to
   jediné, co ten rozdíl na první pohled řekne. Bez linky pod sebou — ta odděluje
   téma od jeho karet, tady by lead odřízla od nadpisu, ke kterému patří. */
.week-lead-heading {
	font-size: 1.26rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--bs-primary);
	text-wrap: balance;
	margin: 1.5rem 0 0.5rem;
}

.week-lead-heading::before {
	content: '>';
	font-family: var(--bs-font-monospace);
	font-size: 0.9rem;
	color: var(--bs-primary);
	opacity: 0.7;
	margin-right: 0.6rem;
}

/* Nadpis tématu je titulek, ne oddělovač — proto vlastní třída a ne .day-heading,
   která je 0,82 rem verzálkami a byla by menší než odstavec pod sebou. Ve škále webu
   sedí mezi název stránky (1,35) a titulek karty (1,02): řídí skupinu karet, takže
   musí být nad nimi, ale pod názvem stránky. Bez verzálek — je to celá věta o čtyřiceti
   znacích a kapitálky by se na ní četly špatně a lámaly se přes dva řádky. Zelená jako
   u ostatních nadpisů sekcí; barvu tu nese role, ne délka textu. */
.week-theme-heading {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	font-size: 1.18rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--bs-primary);
	text-wrap: balance;
	margin: 0 0 0.75rem;
	padding-bottom: 0.4rem;
	border-bottom: 1px solid var(--viry-rule);
}

.week-theme-heading::before {
	content: '>';
	font-family: var(--bs-font-monospace);
	font-size: 0.9rem;
	color: var(--bs-primary);
	opacity: 0.7;
}

.week-theme-heading .count {
	margin-left: auto;
	font-family: var(--bs-font-monospace);
	font-size: 0.72rem;
	font-weight: 400;
	color: var(--bs-secondary-color);
	white-space: nowrap;
}

.week-theme-text {
	line-height: 1.65;
	color: var(--bs-emphasis-color);
	margin-bottom: 1rem;
}

.week-note {
	color: rgba(255, 182, 72, 0.85);
	font-family: var(--bs-font-monospace);
	font-size: 0.78rem;
	border-left: 2px solid rgba(255, 182, 72, 0.5);
	padding: 0.5rem 0.8rem;
	background: rgba(255, 182, 72, 0.05);
}

.themes-nav a {
	color: var(--bs-secondary-color);
}

.themes-nav a:hover {
	color: var(--bs-link-hover-color);
}

.archive-line {
	padding-top: 1rem;
	border-top: 1px solid var(--viry-rule);
}

.stat-tile.is-kev {
	border-left-color: rgba(255, 77, 94, 0.65);
}

/* Čeká se na přehled. Jantarová jako u strojového shrnutí — obojí je poznámka
   o stavu, ne obsah stránky. */
.week-pending {
	font-family: var(--bs-font-monospace);
	font-size: 0.78rem;
	color: rgba(255, 182, 72, 0.85);
	border-left: 2px solid rgba(255, 182, 72, 0.5);
	padding: 0.5rem 0.8rem;
	margin-bottom: 1.25rem;
	background: rgba(255, 182, 72, 0.05);
}

/* Točí se, jen když se opravdu něco děje — viz WeekPresenter::digestState().
   Prstýnek, ne tečky: jedna značka, žádné vrstvení elementů v šabloně. */
.week-spinner {
	display: inline-block;
	width: 0.75rem;
	height: 0.75rem;
	margin-right: 0.15rem;
	vertical-align: -0.08em;
	border: 2px solid rgba(255, 182, 72, 0.25);
	border-top-color: var(--bs-warning);
	border-radius: 50%;
	animation: week-spin 0.9s linear infinite;
}

@keyframes week-spin {
	to { transform: rotate(360deg); }
}

/* Bez pohybu zůstane statický prstýnek: pořád nese informaci „čeká se“. */
@media (prefers-reduced-motion: reduce) {
	.week-spinner {
		animation: none;
		border-top-color: rgba(255, 182, 72, 0.7);
	}
}

/* Nepovedlo se — červená jako všude jinde, kde je něco špatně. */
.week-note.is-failed {
	color: rgba(255, 139, 150, 0.9);
}


/* --- odběr e-mailem ------------------------------------------------------ */

.signup-form {
	background: var(--viry-panel);
	border: 1px solid var(--bs-border-color);
	border-left: 2px solid rgba(61, 220, 132, 0.5);
}

/* Odpověď na odeslaný formulář, stejný tvar jako .week-note. Zelená, protože
   nejčastější stav je „poslali jsme potvrzení“; is-failed ji přebarví. */
.signup-note {
	font-family: var(--bs-font-monospace);
	font-size: 0.78rem;
	color: rgba(61, 220, 132, 0.9);
	border-left: 2px solid rgba(61, 220, 132, 0.5);
	padding: 0.5rem 0.8rem;
	margin-bottom: 1.25rem;
	background: rgba(61, 220, 132, 0.05);
}

.signup-note.is-failed {
	color: rgba(255, 139, 150, 0.9);
	border-left-color: rgba(255, 139, 150, 0.5);
	background: rgba(255, 139, 150, 0.05);
}

.form-error {
	color: rgba(255, 139, 150, 0.9);
}

/* Odpověď na kontrolní otázku je jedna číslice nebo jedno slovo; pole široké přes
   celý formulář by slibovalo víc, než se má napsat. */
.signup-answer {
	max-width: 8rem;
}

.form-hint {
	color: var(--bs-secondary-color);
	margin-top: 0.6rem;
}

/* Honeypot. `display: none` část robotů přeskakuje právě proto, že je to poznat;
   odsunutí mimo plátno vypadá v DOM jako obyčejné pole. Nikdy se nesmí zobrazit —
   kdo ho vyplní, toho web mlčky zahodí. */
.signup-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}


/* --- příspěvek na provoz -------------------------------------------------- */

/* Výběr částky a QR kód vedle sebe, dokud je na to místo. Pod ~40rem se to zalomí
   pod sebe, protože kód pod 12rem už není co skenovat. */
.donate-qr {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.5rem;
	align-items: start;
	margin-top: 1rem;
}

/* Předvolené částky. Odkazy, ne tlačítka ve formuláři: pole pro vlastní částku
   odesílá svou hodnotu vždycky, takže by ve společném formuláři pod jedním jménem
   přebilo tu, na kterou člověk klikl. Skript kliknutí odchytí a stránku nenačítá. */
.donate-presets {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

.donate-preset {
	font-family: var(--bs-font-monospace);
	font-size: 0.85rem;
	padding: 0.3rem 0.7rem;
	border: 1px solid var(--bs-border-color);
	color: var(--bs-secondary-color);
	text-decoration: none;
	white-space: nowrap;
}

.donate-preset:hover,
.donate-preset:focus-visible {
	color: rgba(61, 220, 132, 0.9);
	border-color: rgba(61, 220, 132, 0.5);
}

/* Zvolená částka. Kontrast nese barva i rámeček, ne jen barva: samotný odstín by
   při vyšším jasu displeje splynul s ostatními. */
.donate-preset.is-active {
	color: rgba(61, 220, 132, 0.9);
	border-color: rgba(61, 220, 132, 0.5);
	background: rgba(61, 220, 132, 0.08);
}

/* Vlastní částka stojí v téže řádce jako předvolby — je to jen další volba téže
   otázky, ne samostatný formulář pod ní. */
.donate-custom {
	display: flex;
	gap: 0.5rem;
	align-items: center;
}

/* Široké jen tak, aby se do něj vešel vlastní popisek („Jiná částka v Kč“), ne přes
   celý formulář — to by slibovalo víc, než se do něj má napsat. Zadaná hodnota je
   nejvýš pětimístné číslo. Stejná úvaha jako u .signup-answer. */
.donate-amount {
	max-width: 11rem;
	font-size: 0.85rem;
	padding: 0.3rem 0.7rem;
}

/* Nepoužitelná částka. Označuje ji skript, dokud v poli je — kód se přitom
   nepřekresluje, takže to, co je na obrazovce, pořád platí. */
.donate-amount[aria-invalid='true'] {
	border-color: rgba(255, 139, 150, 0.7);
}

/* QR kód. **Barvy se do tmavého tématu neotáčejí** a je to záměr: čtečky počítají
   s tmavými moduly na světlém pozadí a invertovaný kód část z nich nepřečte vůbec.
   Rámeček odděluje bílý čtverec od tmavé stránky, aby nevypadal jako díra. */
.donate-qr-code {
	display: block;
	width: 13rem;
	height: auto;
	border: 1px solid var(--bs-border-color);
}

.donate-qr-facts {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.15rem 0.75rem;
	margin: 0;
	font-size: 0.9rem;
}

.donate-qr-facts dt {
	color: var(--bs-secondary-color);
	font-weight: normal;
}

.donate-qr-facts dd {
	margin: 0;
	font-family: var(--bs-font-monospace);
}