/*
 * The skin every page on this origin wears.
 *
 * ── Why this file exists ────────────────────────────────────────────────────
 *
 * The site strip has been identical on every page for a while (see
 * sitenav.css, and the tests that keep it so). The pages *under* it were not:
 * ten standalone HTML files had each grown their own copy of the palette,
 * their own body background — one a sheet of graph paper, four a pair of
 * coral-and-blue radial blooms, the front page something else again — their
 * own reading measure, and with it their own position for the strip's
 * wordmark, which visibly jumped as you walked from page to page. Each copy
 * was defensible on its own and the set of them was not a design.
 *
 * So the tokens, the background, the type and the page column live here,
 * once. A page still styles what is genuinely its own — a download table, a
 * terminal transcript, a feedback form — in its own <style> block, which is
 * loaded after this file and therefore wins wherever it disagrees.
 *
 * ── One strip position ──────────────────────────────────────────────────────
 *
 * `--sitenav-measure` is set here and only here. It used to follow each
 * page's reading measure, which is a coherent idea — the origin node over the
 * content's left edge — and which in practice meant the strip re-laid itself
 * out on every navigation, 880px here, 980px there, 760px on the forms. The
 * strip is furniture: it should be the one thing on screen that does not move.
 * The page column keeps its own width through `--measure`.
 *
 * ── Themes ──────────────────────────────────────────────────────────────────
 *
 * Three states, matching /theme.js: light, dark, and no choice at all. The
 * last is the default and follows `prefers-color-scheme`; the `:not()` guard
 * is what lets an explicit light choice win over a dark system setting.
 */

:root {
	/* Paper, ink and one accent. Surfaces run *lighter* than the page in
	   daylight and darker at night, so a card reads as a sheet laid on the
	   page rather than a hole cut into it. */
	--paper: #f3f1ec;
	--paper-dim: #e9e6dd;
	--paper-low: #fbfaf7;
	--paper-high: #ebe8e0;
	--ink: #14171b;
	--ink-soft: #3d4249;
	--muted: #63666b;
	--outline: #dcd8ce;
	--outline-soft: #e6e2d9;
	/* One accent, three jobs, because one hex cannot do all three and stay
	   legible. --coral is the mark: the dot beside the wordmark, the rule over
	   a heading, a node on a thread — shapes, never words. --coral-ink is the
	   accent as *text* on paper, and is darker because the brand coral on this
	   paper is 2.7:1, well under the 4.5:1 that small text needs. --coral-fill
	   is a filled button, darker again so that white on it clears the same
	   bar. Both were the brand coral before, and both failed it. */
	--coral: #f26a4b;
	--coral-ink: #b8431e;
	--coral-fill: #c2451d;
	--coral-soft: #fbdcd2;
	--coral-on: #ffffff;
	--rail: #1f4ea1;
	--rail-on: #0a1f44;
	--rail-soft: #d9e2f4;
	--bus: #2a7f52;
	--tram: #b8672c;
	--walk: #7a7b7a;
	--shadow: 0 1px 2px rgb(20 23 27 / 0.04), 0 12px 32px rgb(20 23 27 / 0.06);
	--shadow-lift: 0 2px 4px rgb(20 23 27 / 0.05), 0 22px 54px rgb(20 23 27 / 0.10);
	--sans: "Helvetica Neue", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
	--radius: 12px;
	/* The reading column. Each page sets its own; this is the widest one. */
	--measure: 1180px;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--paper: #0d1014;
		--paper-dim: #1a1f25;
		--paper-low: #151a20;
		--paper-high: #222831;
		--ink: #ecebe6;
		--ink-soft: #c3c5c8;
		--muted: #969ba1;
		--outline: #272d34;
		--outline-soft: #333a42;
		--coral: #ff8f76;
		--coral-ink: #ff8a68;
		--coral-fill: #ff8a68;
		--coral-soft: #4c2015;
		--coral-on: #1a0d07;
		--rail: #6f9ae4;
		--rail-on: #d9e2f4;
		--rail-soft: #0e2a5a;
		--bus: #5bb682;
		--tram: #e0905a;
		--walk: #9c9c9c;
		--shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 12px 32px rgb(0 0 0 / 0.28);
		--shadow-lift: 0 2px 4px rgb(0 0 0 / 0.35), 0 22px 54px rgb(0 0 0 / 0.4);
		color-scheme: dark;
	}
}

:root[data-theme="dark"] {
	--paper: #0d1014;
	--paper-dim: #1a1f25;
	--paper-low: #151a20;
	--paper-high: #222831;
	--ink: #ecebe6;
	--ink-soft: #c3c5c8;
	--muted: #969ba1;
	--outline: #272d34;
	--outline-soft: #333a42;
	--coral: #ff8f76;
	--coral-ink: #ff8a68;
	--coral-fill: #ff8a68;
	--coral-soft: #4c2015;
	--coral-on: #1a0d07;
	--rail: #6f9ae4;
	--rail-on: #d9e2f4;
	--rail-soft: #0e2a5a;
	--bus: #5bb682;
	--tram: #e0905a;
	--walk: #9c9c9c;
	--shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 12px 32px rgb(0 0 0 / 0.28);
	--shadow-lift: 0 2px 4px rgb(0 0 0 / 0.35), 0 22px 54px rgb(0 0 0 / 0.4);
	color-scheme: dark;
}

/* The UA's own colours — form controls, scrollbars — must not stay on the
   system's dark side when the reader has pinned light. */
:root[data-theme="light"] { color-scheme: light; }

* { box-sizing: border-box; }

body {
	margin: 0;
	min-height: 100vh;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--sans);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* One warm breath of colour behind the top of the page, and nothing else.
   There used to be a sheet of graph paper on one page and two saturated
   blooms on four others; both read as a texture applied to the page rather
   than as anything the product does, and the graph paper fought every
   hairline in the search card it sat behind. */
body::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 780px;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(70rem 34rem at 88% -14%, color-mix(in srgb, var(--coral) 11%, transparent), transparent 68%),
		radial-gradient(58rem 30rem at 4% -18%, color-mix(in srgb, var(--rail) 8%, transparent), transparent 66%);
}

a { color: inherit; }

::selection { background: color-mix(in srgb, var(--coral) 26%, transparent); }

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

.page {
	width: min(var(--measure), 100%);
	margin: 0 auto;
	padding: 28px clamp(18px, 4vw, 48px) 52px;
}

/* Set here and nowhere else; see the note at the top of this file. */
.sitenav { --sitenav-measure: 1180px; }

/* ── The page's own title ────────────────────────────────────────────────────
 *
 * One scale for every page that has a plain title over it. The front page
 * overrides this — its headline is the whole design of that page — and so may
 * anything else with a reason.
 */
h1 {
	margin: 0;
	font-size: clamp(2.4rem, 5.6vw, 3.9rem);
	line-height: 1.02;
	letter-spacing: -0.035em;
	font-weight: 700;
	text-wrap: balance;
	/* The floor of that clamp is 38.4px, and at 38.4px the German word
	   «Nutzungsbedingungen» is 415px wide. The terms page gives its heading a
	   308px column on a phone, so the word left the card, left the page, and
	   made the document wider than the screen — on the one page nobody reads
	   twice and everybody is entitled to read once.

	   This is the net rather than the fix: it acts only where a single word
	   cannot fit at any break, which is exactly that case, and leaves every
	   heading that fits exactly as it was. The pages that can hyphenate
	   properly say so themselves, next to the `lang` that makes it possible. */
	overflow-wrap: break-word;
}

/* ── Shared furniture ───────────────────────────────────────────────────── */

.pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 24px;
	border: 1.5px solid var(--outline);
	border-radius: 999px;
	background: transparent;
	color: var(--ink);
	font: inherit;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.pill:hover {
	border-color: color-mix(in srgb, var(--ink) 40%, transparent);
	background: color-mix(in srgb, var(--ink) 4%, transparent);
}

.pill.primary {
	border-color: transparent;
	background: var(--coral-fill);
	color: var(--coral-on);
	transition: filter 0.15s ease, transform 0.15s ease;
}

.pill.primary:hover {
	filter: brightness(1.06);
	transform: translateY(-1px);
}

/* The one thing on this site that has to be read even when nothing else is. */
.disclaimer {
	padding: 16px 18px;
	border-left: 3px solid var(--coral);
	border-radius: 0 var(--radius) var(--radius) 0;
	background: color-mix(in srgb, var(--coral) 6%, transparent);
	color: var(--ink-soft);
}

/* Anything with the hidden attribute stays hidden, whatever display rule its
   class carries — without this, an empty chip renders as a blank button. */
[hidden] { display: none !important; }

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}
}