/*
 * 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);
}

.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;
	}
}

.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);
}

.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 --------------------------------------------------------------- */

.site-intro {
	margin: 1.5rem 0 0.5rem;
	padding-left: 0.9rem;
	border-left: 2px solid rgba(61, 220, 132, 0.5);
	max-width: 44rem;
}

.site-intro p {
	margin: 0 0 0.6rem;
	color: var(--bs-emphasis-color);
	font-size: 1.05rem;
	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. Server-rendered as
   <dialog open>, i.e. an ordinary block; cve-dialog.js reopens it with showModal().
   Both states are styled here, which is why the width rules are written to work
   whether the element is in the flow or centred by the browser. */
.cve-head {
	background: var(--viry-panel);
	border: 1px solid var(--bs-border-color);
	border-radius: var(--bs-border-radius);
	color: var(--bs-body-color);
	position: relative;
	width: 100%;
	max-width: 48rem;
	/* Spacing lives here rather than on a Bootstrap `mb-*` class: those carry
	   !important, and a fixed margin-bottom beats the `margin: auto` the browser
	   uses to centre a modal, which lands the window at the bottom of the screen. */
	margin: 0 0 1rem;
}

/* Only a modal dialog matches :modal, so everything specific to the overlay state
   lives here and the inline fallback is untouched by it. */
.cve-head:modal {
	/* Both axes: the UA lays a modal out as position:absolute with inset:0, so auto
	   margins on all four sides are what centres it. */
	margin: auto;
	/* width:100% above would otherwise run the window edge to edge on a phone. */
	max-width: min(48rem, calc(100vw - 2rem));
	max-height: calc(100vh - 4rem);
	max-height: calc(100dvh - 4rem); /* dvh accounts for mobile browser chrome */
	overflow-y: auto;
	box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.6);
	border-color: var(--viry-rule);
}

.cve-head::backdrop {
	background: rgba(5, 8, 10, 0.72);
}

.cve-close-form {
	float: right;
	margin: -0.25rem -0.25rem 0 0.75rem;
}

/* A square box with the glyph centred by flexbox, not by padding: the × sits high
   in its em box, so symmetric padding leaves the border visibly off-centre. */
.cve-close {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.9rem;
	height: 1.9rem;
	padding: 0;
	background: none;
	border: 1px solid transparent;
	border-radius: var(--bs-border-radius);
	color: var(--bs-secondary-color);
	font-size: 1.3rem;
	line-height: 1;
	cursor: pointer;
}

.cve-close:hover,
.cve-close:focus-visible {
	border-color: var(--bs-border-color);
	color: var(--bs-emphasis-color);
}

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

.cve-reopen {
	font-family: var(--bs-font-monospace);
	font-size: 0.75rem;
	background: none;
	border: 1px solid var(--bs-border-color);
	border-radius: var(--bs-border-radius);
	color: var(--bs-link-color);
	padding: 0.25rem 0.6rem;
	cursor: pointer;
}

.cve-reopen:hover,
.cve-reopen:focus-visible {
	border-color: var(--bs-primary);
	color: var(--bs-link-hover-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);
}

.cve-scores {
	font-family: var(--bs-font-monospace);
	font-size: 0.8rem;
	border-collapse: collapse;
}

.cve-scores td {
	padding: 0.2rem 0.9rem 0.2rem 0;
	vertical-align: baseline;
	white-space: nowrap;
}

/* The score borrows the badge palette so a 7.5 means the same colour here as on a
   card, but without the border — a table of framed cells would read as a grid. */
.cve-score {
	font-weight: 700;
	font-size: 0.95rem;
	text-align: right;
}

.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. It is the longest cell, so it wraps last and scrolls with the table. */
.cve-score-vector {
	font-size: 0.7rem;
	color: var(--bs-secondary-color);
	white-space: nowrap;
}

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

/* Set apart from the notes above it: this one is about how to use the page, not
   about the vulnerability. */
.cve-tip {
	font-size: 0.8rem;
	color: var(--bs-secondary-color);
	border-top: 1px solid var(--bs-border-color);
	padding-top: 0.7rem;
}

.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);
}

.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);
}

/*
 * Obálka u „odebírat“ a mince u „podpořit“ — kreslené ikony, ne štítky.
 *
 * Štítek zbyl jediný, „AI“, a je to tak správně: ten jeden říká něco, co čtenář
 * musí vědět dřív, než začne text číst. Nabídka odběru a příspěvku je něco jiného
 * a hranatá cedule vedle „AI“ z ní dělala třetí stejně křiklavou značku.
 *
 * Zelená u obálky, ne červená: odběr není varování. U mince je zlatá, která je
 * v téhle paletě nejblíž oranžové „pozor“ — jako obdélníkový štítek by se tak
 * i četla, ale kruh do řady cedulí nepatří. Význam nese tvar, barva je tu jen
 * proto, že mince prostě je zlatá.
 *
 * Obojí kreslené v CSS, ne obrázkem ani znakem: žádný další požadavek, a hlavně
 * ✉ i zlatý kotouč vypadají na každém systému jinak (nebo vůbec). Rozměry jsou
 * v `em`, takže se zvětší s písmem.
 */

/* Tělo obálky je rámeček, chlopeň dvě úhlopříčky složené z gradientů: levá
   polovina vede z levého horního rohu dolů, pravá zrcadlově. */
.nav-mail {
	display: inline-block;
	width: 1.15em;
	height: 0.82em;
	margin-left: 0.5ch;
	vertical-align: -0.04em;
	border: 1px solid rgba(61, 220, 132, 0.75);
	border-radius: 1px;
	background-color: rgba(61, 220, 132, 0.1);
	background-image:
		linear-gradient(to bottom right, transparent calc(50% - 0.5px), rgba(61, 220, 132, 0.75) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
		linear-gradient(to bottom left, transparent calc(50% - 0.5px), rgba(61, 220, 132, 0.75) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px));
	background-size: 50% 100%;
	background-position: 0 0, 100% 0;
	background-repeat: no-repeat;
	box-shadow: var(--viry-glow);
}

/*
 * Mince u „podpořit“ — kotouč, ne badge.
 *
 * Zlatá je v téhle paletě nejblíž oranžové, která znamená „pozor“, takže jako
 * obdélníkový štítek vedle „AI“ by se četla jako další varování. Kruh do té řady
 * nepatří: štítky jsou hranaté a s textem, tohle je předmět. Význam nese tvar,
 * barva je tu jen proto, že mince prostě je zlatá.
 *
 * Kreslené v CSS, ne obrázkem: dva soustředné gradienty, žádný další požadavek
 * a při zvětšení písma se to zvětší s ním, protože rozměr je v `em`. Světlo je
 * zleva shora a hrana o něco tmavší, jinak by z toho byl puntík, ne kotouč.
 */
.nav-coin {
	display: inline-block;
	width: 0.92em;
	height: 0.92em;
	margin-left: 0.5ch;
	vertical-align: -0.08em;
	border-radius: 50%;
	background:
		radial-gradient(circle at 50% 50%, transparent 0 50%, rgba(120, 82, 12, 0.5) 52% 62%, transparent 64%),
		radial-gradient(circle at 34% 28%, #ffeeb4 0 16%, #f3c855 46%, #d09a24 78%, #90650e 100%);
	box-shadow: 0 0 0.4rem rgba(243, 200, 85, 0.4);
}

/* Odkaz už je zvýrazněný, ikona se přisvítí s ním — jinak by při najetí ztmavla
   proti textu, který se rozsvítil. */
.site-nav .nav-link:hover .nav-coin {
	box-shadow: 0 0 0.55rem rgba(243, 200, 85, 0.65);
}

.site-nav .nav-link:hover .nav-mail {
	border-color: var(--bs-link-hover-color);
	box-shadow: 0 0 0.55rem rgba(61, 220, 132, 0.55);
}


/* --- 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");
}

/* --- 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 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);
}