/* Community board chrome. Uses only the website's design tokens and base
   styles (tokens.css + fonts.css, synced by scripts/sync-tokens.sh): .btn,
   .visually-hidden, .skip-link, headings, links and focus ring all come from
   there. Nav and footer below mirror packages/website/src/components/Nav.astro
   and Footer.astro rule for rule — change them together.
   No inline styles anywhere: CSP forbids them. */

/* --- Page frame: sticky footer ---
   The footer sits at the bottom of the viewport on short pages (404, empty
   lists) and simply follows the content on long ones. */
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}
.shell {
	flex: 1 0 auto;
	width: var(--shell);
	margin-inline: auto;
	padding-block: var(--sp-xl) var(--sp-2xl);
}

/* --- Nav (mirrors Nav.astro) --- */

.site-nav {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--ground-zone);
	border-bottom: 1px solid var(--petrol-deep);
}
.nav-inner {
	display: flex;
	align-items: center;
	gap: var(--sp-md);
	height: var(--nav-h);
	width: var(--shell);
	margin-inline: auto;
}
.brand {
	--cap-ratio: 0.701;
	--overshoot: 1.32;
	--gap-ratio: 0.3;
	--fs: 1.5rem;
	--cap: calc(var(--fs) * var(--cap-ratio));
	--mark-h: calc(var(--cap) * var(--overshoot));
	--gap: calc(var(--cap) * var(--gap-ratio));
	--shift: calc(var(--cap) * (var(--overshoot) - 1) / 2);
	display: flex;
	align-items: baseline;
	gap: var(--gap);
	text-decoration: none;
	color: var(--ink);
	margin-right: auto;
	min-width: 0;
}
.brand-mark {
	display: block;
	height: var(--mark-h);
	width: calc(var(--mark-h) * 0.7046);
	transform: translateY(var(--shift));
}
.brand-word {
	font-family: var(--font-serif);
	font-size: var(--fs);
	font-weight: 500;
	line-height: 1;
	white-space: nowrap;
}
.brand-word b {
	font-weight: 700;
	color: var(--petrol-deep);
}
/* Board-only: names the subdomain next to the shared lockup, in the eyebrow
   register (tokens.css .eyebrow). */
.brand-sub {
	align-self: center;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--petrol-deep);
	border-left: 1px solid var(--line-deep);
	padding-left: var(--sp-sm);
	white-space: nowrap;
}
.nav-links {
	display: flex;
	align-items: center;
	gap: var(--sp-md);
	min-width: 0;
}
.nav-anchor {
	display: inline-flex;
	align-items: center;
	min-height: var(--hit-min);
	text-decoration: none;
	color: var(--petrol-deep);
	font-weight: 500;
	font-size: 1rem;
	white-space: nowrap;
}
.nav-anchor:hover {
	text-decoration: underline;
	text-underline-offset: 5px;
	text-decoration-thickness: 1.5px;
}
.nav-anchor[aria-current='page'] {
	text-decoration: underline;
	text-underline-offset: 5px;
	text-decoration-thickness: 1.5px;
}
/* Sign-out is a POST form (templates/identity/_nav-account) whose button
   wears the .nav-anchor look; reset the UA button chrome here, because the
   nav is on every page and identity.css is not. */
.nav-logout {
	display: flex;
	margin: 0;
}
.nav-logout button {
	background: none;
	border: 0;
	padding: 0;
	font-family: inherit;
	cursor: pointer;
}
.lang-switch {
	border: 1px solid var(--petrol-deep);
	border-radius: var(--r-pill);
	padding: 4px 11px;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--petrol-deep);
	text-decoration: none;
	transition: background-color 0.15s ease;
}
.lang-switch:hover {
	background: var(--glass);
}
.text-toggle {
	display: inline-flex;
	align-items: baseline;
	gap: 2px;
	border: 1px solid var(--petrol-deep);
	border-radius: var(--r-pill);
	padding: 4px 11px;
	background: transparent;
	color: var(--petrol-deep);
	font-family: var(--font-sans);
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition:
		background-color 0.15s ease,
		color 0.15s ease;
}
.text-toggle .tt-a1 {
	font-size: 0.8125rem;
}
.text-toggle .tt-a2 {
	font-size: 1rem;
}
.text-toggle:hover {
	background: var(--glass);
}
.text-toggle[aria-pressed='true'] {
	background: var(--petrol-deep);
	color: var(--ground-page);
}
.theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--petrol-deep);
	border-radius: var(--r-pill);
	padding: 5px 9px;
	background: transparent;
	color: var(--petrol-deep);
	cursor: pointer;
}
.theme-toggle:hover {
	background: var(--glass);
}
/* Same hit layer as Nav.astro: the pills keep their visual size, the
   ::after extends the tap target to --hit-min. */
.lang-switch,
.text-toggle,
.theme-toggle {
	position: relative;
}
.lang-switch::after,
.text-toggle::after,
.theme-toggle::after {
	content: '';
	position: absolute;
	inset: min(0px, calc(50% - var(--hit-min) / 2));
}
.theme-toggle .ti-sun,
:root[data-theme='dark'] .theme-toggle .ti-moon {
	display: none;
}
:root[data-theme='dark'] .theme-toggle .ti-sun {
	display: block;
}
/* Same thresholds as Nav.astro. The website moves the theme switch into its
   menu below 900px; the board has no menu, so its toggle stays visible. */
/* Breakpoint cascade, measured like Nav.astro's (logged-out row, the
   widest: brand + "Community" eyebrow, website link, sign-in, register,
   theme, text size, language) with a margin over each fit point. The
   wordmark leaves at the same width as on the website (780px, 900px with
   larger text), so both headers switch to the mark-only lockup together. */
@media (max-width: 1100px) {
	.nav-website {
		display: none;
	}
}
@media (max-width: 940px) {
	.brand-sub {
		display: none;
	}
	/* The board keeps sign-in and register in the row (no menu sheet), so
	   it tightens the gaps instead of dropping the wordmark earlier. */
	.nav-inner,
	.nav-links {
		gap: 14px;
	}
}
@media (max-width: 780px) {
	.brand-word {
		display: none;
	}
}
@media (max-width: 1220px) {
	:root[data-text-size='large'] .nav-website {
		display: none;
	}
}
@media (max-width: 1040px) {
	:root[data-text-size='large'] .brand-sub {
		display: none;
	}
	:root[data-text-size='large'] .nav-inner,
	:root[data-text-size='large'] .nav-links {
		gap: var(--sp-sm);
	}
}
@media (max-width: 900px) {
	:root[data-text-size='large'] .brand-word {
		display: none;
	}
	:root[data-text-size='large'] .nav-inner,
	:root[data-text-size='large'] .nav-links {
		gap: var(--sp-xs);
	}
}
@media (max-width: 360px) {
	:root[data-text-size='large'] .nav-inner,
	:root[data-text-size='large'] .nav-links {
		gap: 6px;
	}
}
/* Phones: the board has no menu sheet to fold controls into, so the row
   keeps login, theme, text size and language and drops the rest (the login
   page links to registration). */
.theme-toggle,
.text-toggle,
.lang-switch {
	flex-shrink: 0;
}
/* Signed in, the row carries handle + sign-out + three pills. The handle
   is the one item that may shrink (ellipsis); sign-out turns into an icon
   button whose text stays its accessible name (font-size 0 keeps it in the
   accessibility tree). At 360px: brand 19 + icon 44 + pills ~38/48/44 +
   gaps leave ~95px (large text ~80px) for the handle, capped at 5rem. */
@media (max-width: 520px) {
	.nav-inner,
	.nav-links {
		gap: var(--sp-xs);
	}
	.brand-sub,
	.nav-anchor-primary {
		display: none;
	}
	.nav-account {
		display: block;
		min-width: 2.5rem;
		max-width: 5rem;
		flex-shrink: 1;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		line-height: var(--hit-min);
	}
	.nav-logout {
		flex-shrink: 0;
	}
	.nav-logout button {
		justify-content: center;
		width: var(--hit-min);
		font-size: 0;
	}
	.nav-logout button::before {
		content: '';
		width: 20px;
		height: 20px;
		background: currentColor;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4M16 17l5-5-5-5M21 12H9'/%3E%3C/svg%3E") center / contain no-repeat;
	}
}
/* --- Board nav (UX review M8, templates/content/_board-nav) ---
   Second row under the site nav: question lists left, search and the
   primary "ask" button right. Below 640px the list links fold into a
   <details> menu and search keeps only its icon; at 360px the row is
   menu (~80px) + search 44 + ask (~140px) + gaps, well inside the shell. */
.board-nav {
	background: var(--ground-page);
	border-bottom: 1px solid var(--line);
}
.board-nav-inner {
	display: flex;
	align-items: center;
	gap: var(--sp-md);
	width: var(--shell);
	margin-inline: auto;
	padding-block: var(--sp-xs);
}
.board-nav-links,
.board-menu-list {
	display: flex;
	gap: var(--sp-md);
	margin: 0;
	padding: 0;
	list-style: none;
}
.board-nav-links {
	margin-right: auto;
}
.board-nav-link {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-xs);
	min-height: var(--hit-min);
	color: var(--petrol-deep);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}
.board-nav-link:hover,
.board-nav-link[aria-current='page'] {
	text-decoration: underline;
	text-underline-offset: 5px;
	text-decoration-thickness: 1.5px;
}
.board-search {
	justify-content: center;
	min-width: var(--hit-min);
}
.board-ask {
	flex-shrink: 0;
	min-height: var(--hit-min);
	/* Same compact size as the website's nav button (Nav.astro .btn-nav). */
	padding: 9px 22px;
	font-size: 1rem;
	white-space: nowrap;
}
.board-menu {
	display: none;
	position: relative;
	margin-right: auto;
}
.board-menu-toggle {
	cursor: pointer;
	list-style: none;
}
.board-menu-toggle::-webkit-details-marker {
	display: none;
}
.board-menu-toggle::after {
	content: '';
	width: 0.5em;
	height: 0.5em;
	margin-top: -0.25em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
}
.board-menu[open] .board-menu-toggle::after {
	margin-top: 0.25em;
	transform: rotate(-135deg);
}
.board-menu-list {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 40;
	flex-direction: column;
	gap: 0;
	min-width: 14rem;
	padding: var(--sp-xs) var(--sp-md);
	background: var(--ground-page);
	border: 1px solid var(--line-deep);
	border-radius: var(--r-md);
}
@media (max-width: 640px) {
	.board-nav-links {
		display: none;
	}
	.board-menu {
		display: block;
	}
	.board-nav-inner {
		gap: var(--sp-xs);
	}
	/* Icon only; the label stays the accessible name (visually hidden). */
	.board-search-label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}
}

/* Print: the reading content only, like the website (Nav.astro,
   Footer.astro, ContentEntryLayout hide their chrome). */
@media print {
	.site-nav,
	.board-nav,
	.site-footer,
	.crumbs,
	.compose,
	.compose-comment,
	.post-action,
	.welcome-dismiss {
		display: none;
	}
}

/* --- Page --- */

.hero-title {
	font-family: var(--font-serif);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--ink);
	text-wrap: balance;
	/* Long German compounds ("Aktivierungsfunktion") must break, not run
	   past a 360px viewport; hyphens follow <html lang>. */
	overflow-wrap: break-word;
	hyphens: auto;
	margin-bottom: var(--sp-sm);
}
.hero-lead {
	max-width: 42rem;
	font-size: 1.25rem; /* DESIGN.md scale "20": lead paragraph */
	color: var(--ink-muted);
	margin-bottom: var(--sp-lg);
}
.board {
	border-top: 1px solid var(--line);
	padding-top: var(--sp-md);
}
.tabs {
	display: flex;
	gap: var(--sp-xs);
	flex-wrap: wrap;
	margin-bottom: var(--sp-md);
}
/* Sort tabs are navigation links (templates/content/_tabs): the current
   one carries aria-current="page". */
.tab {
	display: inline-flex;
	align-items: center;
	min-height: var(--hit-min);
	border: 1px solid var(--line-deep);
	border-radius: var(--r-pill);
	padding: 0 14px;
	font-size: 1rem;
	font-weight: 600;
	color: var(--ink-muted);
}
.tab[aria-current='page'] {
	background: var(--petrol-soft);
	border-color: var(--petrol-deep);
	color: var(--petrol-deep);
}
/* Notices: amber is the attention tone (DESIGN.md: progress/attention
   only), so plain and info notices keep it; errors and confirmations use
   the state colours instead. Flash tones arrive as notice-{success,error,
   info} on pages with and without identity.css. */
.notice {
	background: var(--amber-soft);
	border-left: 4px solid var(--amber);
	border-radius: var(--r-sm);
	padding: var(--sp-sm) var(--sp-md);
	margin-bottom: var(--sp-md);
	max-width: 42rem;
}
.notice-error {
	background: var(--field-error-bg);
	border-left-color: var(--error);
}
.notice-success {
	background: var(--ground-zone);
	border-left-color: var(--petrol-deep);
}

/* --- Badges: the board's one badge family. Type, pill and padding come
   from the website's .badge (tokens.css, eyebrow tier); the neutral status
   chip is outlined so the tinted variants stand out. --- */
.badge {
	padding: 3px 11px;
	border: 1px solid var(--line-deep);
	background: transparent;
	color: var(--ink-muted);
	vertical-align: middle;
}
.badge-ok {
	background: var(--ground-zone);
	border-color: var(--petrol-deep);
	color: var(--petrol-deep);
}
.badge-lang {
	border-style: dashed;
}
.badge-role {
	background: var(--petrol-deep);
	border-color: var(--petrol-deep);
	color: var(--ground-page);
}

/* --- Avatars (templates/content/_avatar.html.twig): the member's motif as
   a disc, sized in rem so it grows with the large-text setting. A hairline
   ring settles the light motif discs on the dark theme; a deleted member
   gets an empty dashed disc. `.with-avatar` sets the avatar in front of a
   name inside running text (lists, comments, the forum table). --- */
.avatar {
	display: inline-block;
	flex: none;
	border-radius: 50%;
	vertical-align: middle;
	box-shadow: 0 0 0 1px var(--line);
}
.avatar-sm {
	width: 1.5rem;
	height: 1.5rem;
}
.avatar-md {
	width: 2.5rem;
	height: 2.5rem;
}
.avatar-none {
	background: var(--ground-zone);
	border: 1px dashed var(--line-deep);
	box-shadow: none;
}
.with-avatar {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-xs);
	vertical-align: middle;
}

/* --- Error pages (templates/error.html.twig) ---
   One calm, centred column: the section mark, an eyebrow naming the
   situation, a serif headline, one explaining sentence and the next steps
   as buttons. Ground-page only, no zone tint — this is a wayfinding
   moment, not an overview section. */
.error-page {
	display: flex;
	justify-content: center;
	padding-block: var(--sp-lg) var(--sp-md);
}
.error-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	width: 100%;
	max-width: 40rem;
}
.error-bloom {
	display: block;
	width: 5.5rem;
	height: 5.5rem;
	margin-bottom: var(--sp-md);
	color: var(--petrol-deep);
}
.error-bloom .bloom-c0 {
	fill: var(--petrol-deep);
}
.error-bloom .bloom-c1 {
	fill: var(--petrol);
}
.error-bloom .bloom-c2 {
	fill: var(--petrol-viv);
}
@media (prefers-reduced-motion: no-preference) {
	.error-bloom {
		animation: error-bloom-in 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	}
	@keyframes error-bloom-in {
		from {
			opacity: 0;
			transform: scale(0.6) rotate(-12deg);
		}
		to {
			opacity: 1;
			transform: none;
		}
	}
}
.error-eyebrow {
	margin-bottom: var(--sp-xs);
}
.error-title {
	font-family: var(--font-serif);
	font-size: clamp(1.9rem, 1.2rem + 2.4vw, 2.75rem);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: -0.01em;
	color: var(--ink);
	text-wrap: balance;
	margin-bottom: var(--sp-sm);
}
.error-lead {
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--ink-muted);
	text-wrap: pretty;
	margin-bottom: var(--sp-md);
}
.error-search {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-xs);
	width: 100%;
	max-width: 32rem;
	margin-bottom: var(--sp-sm);
}
.error-search .field {
	flex: 1 1 14rem;
}
.error-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-xs) var(--sp-sm);
}
.error-actions .btn {
	padding-inline: var(--sp-md);
}
.error-details {
	font-size: 1rem;
	text-align: left;
	width: 100%;
	background: var(--ground-zone);
	padding: var(--sp-sm);
	border-radius: var(--r-sm);
	overflow-x: auto;
	margin-top: var(--sp-md);
}
.error-ref {
	margin-top: var(--sp-lg);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--ink-muted);
	text-wrap: balance;
}
@media (max-width: 520px) {
	.error-page {
		padding-block: var(--sp-sm) 0;
	}
	.error-bloom {
		width: 4.5rem;
		height: 4.5rem;
		margin-bottom: var(--sp-sm);
	}
	.error-actions {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}
	.error-actions .btn {
		justify-content: center;
	}
}

/* A bare .btn (no variant) is the secondary button, as before the board
   adopted the website's .btn base from tokens.css. .btn-danger is excluded:
   the :not() list gives this rule two classes' specificity, which used to
   repaint every danger button petrol. */
.btn:not(.btn-primary, .btn-secondary, .btn-on-dark-primary, .btn-on-dark-secondary, .btn-danger) {
	background: transparent;
	color: var(--petrol-deep);
	border-color: var(--petrol-deep);
}
.btn:not(.btn-primary, .btn-secondary, .btn-on-dark-primary, .btn-on-dark-secondary, .btn-danger):hover {
	background: var(--ground-zone);
}
/* Board-only: destructive actions (delete account, turn off two-factor).
   Outlined like the secondary button, in the error tone; the hover fill is
   the form error tint. error on ground-page 6.02:1 light / 8.39:1 dark, on
   field-error-bg 5.52:1 / 7.60:1. */
.btn-danger {
	background: transparent;
	color: var(--error);
	border-color: var(--error);
}
.btn-danger:hover {
	background: var(--field-error-bg);
}

/* --- Bot check (templates/identity/_captcha, public/assets/js/captcha.js) ---
   ALTCHA runs on load inside a visually hidden wrapper; captcha.js removes
   .is-quiet when the check fails so the reader can retry. Turnstile in
   interaction-only mode takes no space until Cloudflare needs the reader. */
.captcha {
	display: grid;
	gap: var(--sp-xs);
}
.captcha:has(.captcha-altcha.is-quiet):has([data-captcha-status][hidden]) {
	gap: 0;
}
.captcha-altcha.is-quiet {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.captcha-status {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 1rem;
	color: var(--ink-muted);
}
.captcha-status[hidden] {
	display: none;
}
.captcha-spinner {
	flex: none;
	width: 0.95em;
	height: 0.95em;
	border: 2px solid var(--petrol-viv);
	border-right-color: transparent;
	border-radius: 50%;
}
@media (prefers-reduced-motion: no-preference) {
	.captcha-spinner {
		animation: form-spin 0.8s linear infinite;
	}
}

/* --- Footer (mirrors Footer.astro) --- */

.site-footer {
	background: radial-gradient(115% 115% at 50% 27%, var(--hero-0) 0%, var(--hero-34) 34%, var(--hero-62) 62%, var(--hero-100) 100%);
	color: var(--on-dark-soft);
	padding: var(--sp-2xl) var(--sp-md) var(--sp-xl);
	text-align: center;
}
.foot-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: min(100%, 62rem);
	margin-inline: auto;
}
.foot-lockup {
	--cap-ratio: 0.701;
	--overshoot: 1.32;
	--gap-ratio: 0.3;
	--fs: clamp(1.2rem, 6.5vw, 2.5rem);
	--cap: calc(var(--fs) * var(--cap-ratio));
	--mark-h: calc(var(--cap) * var(--overshoot));
	--gap: calc(var(--cap) * var(--gap-ratio));
	--shift: calc(var(--cap) * (var(--overshoot) - 1) / 2);
	display: flex;
	align-items: baseline;
	gap: var(--gap);
}
.foot-mark {
	display: block;
	height: var(--mark-h);
	width: calc(var(--mark-h) * 0.7046);
	transform: translateY(var(--shift));
}
.foot-word {
	font-family: var(--font-serif);
	font-size: var(--fs);
	font-weight: 500;
	line-height: 1;
	color: var(--on-dark-fill);
	white-space: nowrap;
}
.foot-word b {
	font-weight: 700;
	color: var(--petrol-viv);
}
.foot-tagline {
	max-width: 32rem;
	margin-top: var(--sp-xs);
	color: var(--on-dark-mint);
	font-size: 1rem;
	line-height: 1.6;
}
.foot-nav {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-sm);
	margin-top: var(--sp-lg);
}
.foot-primary,
.foot-secondary {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.foot-primary {
	gap: 2px var(--sp-lg);
}
.foot-secondary {
	gap: 2px var(--sp-md);
}
.foot-nav a {
	padding: var(--sp-xs) 0;
	text-decoration: none;
	transition: color 0.15s ease;
}
.foot-primary a {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--on-dark-soft);
}
.foot-secondary a {
	font-size: 1rem;
	font-weight: 400;
	color: var(--on-dark-quiet);
}
.foot-nav a:hover {
	color: var(--on-dark-fill);
	text-decoration: underline;
	text-underline-offset: 4px;
}
.site-footer a:focus-visible {
	outline: 2px solid var(--on-dark-soft);
	outline-offset: 3px;
}
.foot-base {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-sm) var(--sp-md);
	width: 100%;
	margin-top: var(--sp-xl);
	padding-top: var(--sp-md);
	border-top: 1px solid var(--on-dark-hairline);
}
.foot-legal,
.foot-legal-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--sp-sm);
}
.foot-legal-list {
	list-style: none;
}
.foot-legal a {
	font-size: 0.875rem;
	color: var(--on-dark-quiet);
	text-decoration: none;
}
.foot-legal a:hover,
.foot-legal a[aria-current='page'] {
	color: var(--on-dark-soft);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.foot-legal .foot-lang {
	border: 1px solid var(--on-dark-line);
	border-radius: var(--r-pill);
	padding: 3px 10px;
	font-weight: 600;
	color: var(--on-dark-soft);
	text-decoration: none;
	transition:
		background-color 0.15s ease,
		border-color 0.15s ease;
}
/* Visual pill stays compact; the hit area reaches --hit-min. */
.foot-legal .foot-lang {
	position: relative;
}
.foot-legal .foot-lang::after {
	content: '';
	position: absolute;
	inset: min(0px, calc(50% - var(--hit-min) / 2));
}
.foot-legal .foot-lang:hover {
	background: var(--on-dark-hover);
	border-color: var(--on-dark-soft);
	text-decoration: none;
}
.foot-rights {
	font-size: 0.875rem;
	color: var(--on-dark-quietest);
}
@media (max-width: 720px) {
	.foot-base {
		flex-direction: column;
		justify-content: center;
		gap: var(--sp-sm);
	}
}
@media (max-width: 520px) {
	.site-footer {
		padding: var(--sp-xl) var(--sp-md) var(--sp-lg);
	}
	.foot-primary {
		gap: 2px var(--sp-md);
	}
	.foot-secondary {
		gap: 2px var(--sp-sm);
	}
}

/* --- Rendered post content (output of the Markdown pipeline) --- */

.post-body p,
.post-body ul,
.post-body ol,
.post-body pre,
.post-body blockquote {
	margin-bottom: var(--sp-sm);
}
.post-body ul,
.post-body ol {
	padding-left: 1.4em;
}
.post-body code {
	font-family: ui-monospace, monospace; /* = website .prose code */
	font-size: 0.95em;
	background: var(--ground-zone);
	border-radius: var(--r-sm);
	padding: 0.1em 0.35em;
}
.post-body pre {
	background: var(--ground-zone);
	border-radius: var(--r-sm);
	padding: var(--sp-sm);
	overflow-x: auto;
}
.post-body pre code {
	background: none;
	padding: 0;
}
/* The opening post sits on ground-zone (content.css .post-opening), where a
   zone-tinted code chip would vanish: flip the chips to ground-page there. */
.post-opening .post-body code,
.post-opening .post-body pre {
	background: var(--ground-page);
}
.post-opening .post-body pre code {
	background: none;
}
/* = website .prose blockquote: the serif quote mark of the brand voice, not
   a side-tab accent bar (a rejected pattern, DESIGN.md). */
.post-body blockquote {
	position: relative;
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 1.15em;
	line-height: 1.5;
	color: var(--ink-muted);
	padding-left: 1.1em;
}
.post-body blockquote::before {
	content: '\201C';
	position: absolute;
	left: 0;
	top: -0.05em;
	font-style: normal;
	font-size: 1.7em;
	line-height: 1;
	color: var(--petrol-soft);
}
.post-body a {
	color: var(--petrol-deep);
}
.post-body a.mention {
	font-weight: 600;
	text-decoration: none;
}

/* --- Legal pages (templates/legal/*, LegalPageHandler) --- */

.legal {
	max-width: 46rem;
	/* Long compounds, e-mail addresses and URLs must wrap, not widen the
	   page (= website LegalLayout.astro .legal). */
	overflow-wrap: break-word;
}
.legal-head {
	margin-bottom: var(--sp-lg);
}
.legal-meta {
	font-size: 1rem;
	color: var(--ink-muted);
	margin-bottom: var(--sp-sm);
}
.legal-note {
	font-size: 1rem;
	color: var(--ink-muted);
	border-left: 3px solid var(--line-deep);
	padding-left: var(--sp-sm);
}
.legal-toc {
	background: var(--ground-zone);
	border-radius: var(--r-md);
	padding: var(--sp-md);
	margin-bottom: var(--sp-lg);
}
.legal-toc h2 {
	/* Eyebrow tier (tokens.css .eyebrow), muted. */
	font-family: var(--font-sans);
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--ink-muted);
	margin-bottom: var(--sp-xs);
}
.legal-toc ol {
	columns: 2;
	column-gap: var(--sp-md);
	padding-left: 1.4em;
	font-size: 1rem;
}
.legal-toc li {
	break-inside: avoid;
	margin-bottom: 0.2em;
}
.legal-toc a,
.legal-body a {
	color: var(--petrol-deep);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
/* Sections and their separators as on the website (LegalLayout.astro). */
.legal-body section {
	margin-bottom: var(--sp-xl);
	padding-bottom: var(--sp-xl);
	border-bottom: 1px solid var(--line);
}
.legal-body section:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}
.legal-body h2 {
	font-family: var(--font-serif);
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--ink);
	margin-bottom: var(--sp-sm);
	scroll-margin-top: calc(var(--nav-h) + var(--sp-sm));
}
.legal-body p,
.legal-body ul,
.legal-body ol,
.legal-body dl,
.legal-body table {
	margin-bottom: var(--sp-sm);
}
.legal-body p,
.legal-body li {
	line-height: 1.75;
}
.legal-body ul,
.legal-body ol {
	padding-left: 1.25em;
}
.legal-body li {
	margin-bottom: 0.35em;
}
.legal-body dt {
	font-weight: 600;
	color: var(--ink-muted);
	margin-top: var(--sp-xs);
}
.legal-body code {
	font-family: ui-monospace, monospace;
	font-size: 0.95em;
	background: var(--ground-zone);
	border-radius: var(--r-sm);
	padding: 0.1em 0.35em;
}
.legal-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 1rem;
}
.legal-table th,
.legal-table td {
	text-align: left;
	vertical-align: top;
	padding: 0.45em 0.6em;
	border-bottom: 1px solid var(--line);
}
.legal-table th {
	font-weight: 600;
	border-bottom-color: var(--line-deep);
}
.matomo-opt-out {
	/* = website LegalLayout #matomo-opt-out frame. */
	background: var(--ground-zone);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	padding: var(--sp-md);
	margin-bottom: var(--sp-sm);
}
.posting-guidance {
	background: var(--ground-zone);
	border-left: 4px solid var(--petrol);
	border-radius: var(--r-sm);
	padding: var(--sp-md);
}
/* Inside the rules page the panel is a .legal-body section too: keep its
   own even padding instead of the section rhythm (48px bottom + rule). */
.legal-body section.posting-guidance {
	margin-bottom: var(--sp-lg);
	padding: var(--sp-md);
	border-bottom: none;
}
.posting-guidance h2 {
	font-size: 1.25rem; /* scale "20": panel title */
	margin: 0 0 var(--sp-xs);
}
.posting-guidance p {
	margin: 0 0 var(--sp-xs);
}
.posting-guidance p:last-child {
	margin-bottom: 0;
}
/* Bullets sit inside the panel's padding, not on its border. */
.posting-guidance ul {
	margin: 0 0 var(--sp-sm);
	padding-left: 1.25rem;
}
.posting-guidance li + li {
	margin-top: 4px;
}
@media (max-width: 640px) {
	.legal-toc ol {
		columns: 1;
	}
	.legal-table {
		display: block;
		overflow-x: auto;
	}
}

/* --- Welcome (templates/content/_welcome on the start page, templates/
   identity/welcome after the first sign-in). Lives here, not in content.css,
   because both pages share the look and neither stylesheet loads on both. --- */
.welcome {
	display: grid;
	gap: var(--sp-sm);
	max-width: 42rem;
	margin-block: var(--sp-md) var(--sp-lg);
	padding: clamp(var(--sp-md), 4vw, var(--sp-lg));
	background: var(--ground-zone);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
}
.welcome[hidden] {
	display: none;
}
.welcome-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--sp-xs) var(--sp-sm);
}
.welcome-title {
	flex: 1 1 12rem;
	min-width: 0;
	overflow-wrap: break-word;
	font-family: var(--font-serif);
	font-size: 1.25rem; /* scale "20": panel title */
	line-height: 1.2;
	color: var(--petrol-deep);
	text-wrap: balance;
	margin: 0;
}
.welcome-dismiss {
	flex: none;
	margin: 0;
}
.welcome-dismiss-btn {
	min-height: var(--hit-min);
	padding: 0 0.6rem;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--r-pill);
	color: var(--ink-muted);
	font: inherit;
	font-size: 1rem;
	cursor: pointer;
}
.welcome-dismiss-btn:hover,
.welcome-dismiss-btn:focus-visible {
	border-color: var(--petrol-deep);
	color: var(--petrol-deep);
}
.welcome-intro,
.welcome-cta {
	margin: 0;
}
.welcome-cta {
	font-weight: 600;
}
.welcome-rules {
	display: grid;
	gap: var(--sp-xs);
	margin: 0;
	padding-left: 1.25rem;
}
.welcome-rules li::marker {
	color: var(--petrol);
}
.welcome-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-sm);
	margin: var(--sp-xs) 0 0;
}
.welcome-handle {
	font-size: 1.125rem;
	margin-bottom: var(--sp-lg);
}
.welcome-section {
	margin-bottom: var(--sp-lg);
	padding-top: var(--sp-md);
	border-top: 1px solid var(--line);
}
.welcome-section h2 {
	font-family: var(--font-serif);
	font-size: 1.25rem;
	margin-bottom: var(--sp-xs);
}
.welcome-section p {
	margin-bottom: var(--sp-xs);
}
.welcome-section .welcome-rules {
	margin-bottom: var(--sp-xs);
}
@media (max-width: 480px) {
	.welcome-actions .btn {
		width: 100%;
	}
}