/* Created by Claude (Anthropic), model Claude Opus 5. Review before relying on it. */

/* ==========================================================================
   base.css - design tokens, reset, page shell, typography
   --------------------------------------------------------------------------
   Everything here is generic: it describes "a page of this app", not any
   particular form. Form controls live in form.css.

   ONE COLOUR DRIVES THE PAGE
   --------------------------
   `--brand` is injected from config/branding.yml. Every other colour below is
   derived from it with color-mix(): hover states, focus rings, tinted
   surfaces, borders, muted text, and the dark-mode variant. Change `brand` in
   branding.yml and the whole palette moves with it - there is nothing else to
   edit, here or anywhere else.

   Only --danger stays independent: an error must read as an error whatever the
   brand colour happens to be.

   Each token is declared twice - a plain fallback first, then the derived
   value. A browser without color-mix() keeps the fallback and still gets a
   coherent, if untinted, page.

   No web fonts, no external requests: the page renders identically offline and
   the Content-Security-Policy can stay at 'self'.
   ========================================================================== */

/* --- tokens ------------------------------------------------------------- */

:root {
	/* Overridden inline from branding.yml; this is the fallback. */
	--brand: #118282;
	--measure: 46rem;

	/* Brand roles ------------------------------------------------------- */
	--accent: var(--brand);
	--accent-contrast: #ffffff;
	--accent-hover: color-mix(in srgb, var(--brand) 84%, black);
	--accent-soft: color-mix(in srgb, var(--brand) 7%, white);
	--accent-line: color-mix(in srgb, var(--brand) 28%, #dcdce0);
	--accent-ring: color-mix(in srgb, var(--brand) 22%, transparent);

	/* Neutrals, faintly tinted toward the brand so the greys belong to the
	   same palette rather than sitting next to it. */
	--bg: #f3f5f5;
	--bg: color-mix(in srgb, var(--brand) 4%, #f4f4f5);
	--surface: #ffffff;
	--surface-sunken: #fafbfb;
	--surface-sunken: color-mix(in srgb, var(--brand) 3%, #fafafa);
	--border: #e1e4e4;
	--border: color-mix(in srgb, var(--brand) 9%, #e2e2e6);
	--border-strong: #c6cbcb;
	--border-strong: color-mix(in srgb, var(--brand) 13%, #c7c7cd);
	--text: #191b1c;
	--text: color-mix(in srgb, var(--brand) 7%, #17181a);
	--text-muted: #5c6263;
	--text-muted: color-mix(in srgb, var(--brand) 9%, #5f6166);
	--text-faint: #878d8e;
	--text-faint: color-mix(in srgb, var(--brand) 7%, #8a8c92);

	/* Independent of the brand on purpose. */
	--danger: #c0392b;
	--danger-soft: #fdf2f0;

	--radius: 10px;
	--radius-sm: 6px;
	--shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 8px 24px -12px rgba(0, 0, 0, .12);

	--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
	        Arial, "Noto Sans", sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
	             "Liberation Mono", monospace;
}

@media (prefers-color-scheme: dark) {
	:root {
		/* The brand colour at full strength is too dim on a dark ground, so
		   the accent role is filled by a lightened mix of the same hue. */
		--accent: color-mix(in srgb, var(--brand) 58%, white);
		--accent-contrast: color-mix(in srgb, var(--brand) 25%, black);
		--accent-hover: color-mix(in srgb, var(--brand) 40%, white);
		--accent-soft: color-mix(in srgb, var(--accent) 13%, #1b1c1e);
		--accent-line: color-mix(in srgb, var(--accent) 32%, #303138);
		--accent-ring: color-mix(in srgb, var(--accent) 28%, transparent);

		--bg: #111314;
		--bg: color-mix(in srgb, var(--brand) 6%, #101113);
		--surface: #1a1c1d;
		--surface: color-mix(in srgb, var(--brand) 5%, #1a1a1e);
		--surface-sunken: #202324;
		--surface-sunken: color-mix(in srgb, var(--brand) 6%, #202127);
		--border: #2f3335;
		--border: color-mix(in srgb, var(--brand) 10%, #303138);
		--border-strong: #434849;
		--border-strong: color-mix(in srgb, var(--brand) 12%, #43444d);
		--text: #eceded;
		--text-muted: #a3a9aa;
		--text-muted: color-mix(in srgb, var(--brand) 8%, #a6a8b0);
		--text-faint: #7c8283;
		--text-faint: color-mix(in srgb, var(--brand) 8%, #7e808a);

		--danger: #ff8a75;
		--danger-soft: #2a1d1b;

		--shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px -12px rgba(0, 0, 0, .6);
	}
}

/* --- reset -------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	font-family: var(--font);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--text);
	background: var(--bg);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol, figure, fieldset { margin: 0; }
fieldset { border: 0; padding: 0; min-width: 0; }
ul { list-style: none; padding: 0; }
img, svg { max-width: 100%; }

a {
	color: var(--accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: 3px;
}

code {
	font-family: var(--font-mono);
	font-size: .9em;
	/* An IBAN or a long URL must never push the card wider than the screen. */
	overflow-wrap: anywhere;
	background: var(--surface-sunken);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: .1em .4em;
}

.sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 10;
	background: var(--surface);
	color: var(--text);
	padding: .75rem 1rem;
	border: 1px solid var(--border);
	border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* --- layout ------------------------------------------------------------- */

.shell {
	width: 100%;
	max-width: var(--measure);
	margin-inline: auto;
	padding-inline: 1.25rem;
}

main.shell {
	flex: 1;
	padding-block: 2rem 3rem;
}

.card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: clamp(1.5rem, 1rem + 2vw, 2.75rem);
}

.card--centered { text-align: center; }

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

.site-header {
	background: var(--surface);
	border-bottom: 1px solid var(--border);
	/* A hairline of brand colour, so the palette is present before any
	   control is focused. */
	box-shadow: inset 0 3px 0 0 var(--accent);
}

.site-header__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: .75rem 1.5rem;
	padding-block: 1rem;
}

.brand { display: flex; align-items: center; gap: .75rem; }
.brand__logo { height: 2.25rem; width: auto; }
.brand__text { display: flex; flex-direction: column; }

.brand__name {
	font-weight: 650;
	font-size: 1.0625rem;
	letter-spacing: -.01em;
	line-height: 1.3;
}

.brand__tagline {
	font-size: .8125rem;
	color: var(--text-muted);
	line-height: 1.35;
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.link-back {
	font-size: .875rem;
	color: var(--text-muted);
	text-decoration: none;
}
.link-back:hover { color: var(--accent); text-decoration: underline; }

/* --- language switch ---------------------------------------------------- */

.lang-switch {
	display: inline-flex;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	overflow: hidden;
}

.lang-switch__item {
	padding: .3rem .6rem;
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .03em;
	color: var(--text-muted);
	text-decoration: none;
	background: var(--surface);
}
.lang-switch__item + .lang-switch__item { border-left: 1px solid var(--border); }
.lang-switch__item:hover { background: var(--accent-soft); color: var(--accent); }

.lang-switch__item.is-current {
	background: var(--accent);
	color: var(--accent-contrast);
}

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

.site-footer {
	border-top: 1px solid var(--border);
	padding-block: 1.5rem 2rem;
	font-size: .8125rem;
	color: var(--text-muted);
}

.site-footer__note { margin-bottom: .5rem; }

.site-footer__links {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem 1rem;
	margin-bottom: .5rem;
}

.site-footer__legal { color: var(--text-faint); }

/* --- typography --------------------------------------------------------- */

.page-title {
	font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem);
	line-height: 1.2;
	letter-spacing: -.02em;
	font-weight: 680;
	margin-bottom: 1rem;
}

.section-title {
	font-size: 1.125rem;
	font-weight: 650;
	letter-spacing: -.01em;
	margin-bottom: .5rem;
}

/* Rendered markdown from the config files. Single newlines in the YAML source
   are *not* line breaks here (see backend/text.py), so every paragraph reflows
   to whatever width the viewport gives it. */
.prose { line-height: 1.65; overflow-wrap: break-word; }
.prose > * + * { margin-top: .75em; }
.prose a { color: var(--accent); }
.prose strong { font-weight: 640; color: var(--text); }
.prose ul, .prose ol { padding-left: 1.25rem; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: .25em; }
.prose--inline > p { display: inline; margin: 0; }

.meta {
	margin-top: 1.5rem;
	font-size: .8125rem;
	color: var(--text-faint);
}

.notice {
	margin-top: 1.25rem;
	padding: .875rem 1rem;
	background: var(--surface-sunken);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	font-size: .9375rem;
	color: var(--text-muted);
	text-align: left;
}

/* --- success page ------------------------------------------------------- */

.success-mark {
	color: var(--accent);
	margin-bottom: 1rem;
}

/* The two amounts: what to transfer now, and the regular yearly fee. Side by
   side on anything but a narrow phone, where they stack. */
.amounts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	gap: .75rem;
	margin: 2rem 0 0 0;
	text-align: left;
}

.amount {
	padding: 1rem 1.1rem;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--surface-sunken);
}

/* The one they have to act on today. */
.amount--due {
	background: var(--accent-soft);
	border-color: var(--accent-line);
}

.amount__label {
	font-size: .8125rem;
	font-weight: 600;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.amount--due .amount__label { color: var(--accent); }

.amount__value {
	margin: .15rem 0 0 0;
	font-size: 1.625rem;
	font-weight: 680;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
	color: var(--text);
}

.amount__note {
	margin: .1rem 0 0 0;
	font-size: .8125rem;
	color: var(--text-muted);
}

/* Numbered "what happens next" list. Numbers come from a counter so the
   markup stays a plain <ol> and the steps stay configurable. */
.steps {
	counter-reset: step;
	list-style: none;
	margin-top: 2rem;
	padding: 0;
	text-align: left;
}

.steps__item {
	counter-increment: step;
	position: relative;
	padding-left: 3.25rem;
	padding-bottom: 1.75rem;
}

.steps__item:last-child { padding-bottom: 0; }

.steps__item::before {
	content: counter(step);
	position: absolute;
	left: 0;
	top: 0;
	width: 2.25rem;
	height: 2.25rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--accent);
	color: var(--accent-contrast);
	font-size: .9375rem;
	font-weight: 650;
	font-variant-numeric: tabular-nums;
}

/* The connecting line between the numbers. */
.steps__item:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 1.125rem;
	top: 2.5rem;
	bottom: .35rem;
	width: 2px;
	background: var(--accent-line);
}

.steps__title {
	font-size: 1rem;
	font-weight: 650;
	line-height: 2.25rem;
	margin-bottom: .15rem;
}

.steps__body {
	font-size: .9375rem;
	color: var(--text-muted);
}
.steps__body strong { color: var(--text); }

/* Bank details and the like: set them apart so they can be copied at a glance. */
.steps__body code {
	font-size: .9375em;
	background: var(--accent-soft);
	border-color: var(--accent-line);
}

.error-code {
	font-size: 3.5rem;
	font-weight: 700;
	line-height: 1;
	color: var(--border-strong);
	letter-spacing: -.03em;
	margin-bottom: .5rem;
}

.form-list__item + .form-list__item {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--border);
}
.form-list__title { font-size: 1.0625rem; font-weight: 640; margin-bottom: .5rem; }
.form-list__links { display: flex; gap: .5rem; }

/* --- motion ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}