:root {
	--font-sans: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;

	--paper: #f6f3ec;
	--paper-2: #efeae0;
	--surface: #fffdf9;
	--surface-2: #faf7f1;
	--ink: #17150f;
	--ink-2: #443e33;
	--muted: #6e6759;
	--faint: #928a7a;
	--rule: #ded7c9;
	--rule-strong: #c9c0ad;
	--accent: #1f4f8f;
	--route: #bc3b22;
	--shadow-2: 0 1px 3px rgba(23, 21, 15, 0.06), 0 8px 24px -12px rgba(23, 21, 15, 0.14);

	/* legend swatches, kept in step with the SVG palette in map.php */
	--up-bg: #ddddff;
	--pr-bg: #ccffcc;
	--ix-bg: #FF7F50;

	--r-md: 8px;
	--r-lg: 12px;
	--r-pill: 999px;
	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.5rem;
	--sp-6: 2rem;
	--sp-7: 3rem;
	--measure: 42rem;
	--wide: 62rem;

	color-scheme: light;
}

:root[data-theme="dark"] {
	--paper: #12110e;
	--paper-2: #171512;
	--surface: #1e1c18;
	--surface-2: #171512;
	--ink: #efeadf;
	--ink-2: #c9c0ad;
	--muted: #9b9486;
	--faint: #6d665a;
	--rule: #302d27;
	--rule-strong: #474338;
	--accent: #7ba4de;
	--route: #e3684c;
	--shadow-2: 0 1px 3px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6);

	--up-bg: #2b3242;
	--pr-bg: #26332a;
	--ix-bg: #4a2f24;

	color-scheme: dark;
}

* { box-sizing: border-box; }

/* The page is one centred column. The old <CENTER> + layout <table> tied the
   column width to the graph width, so a wide SVG dragged everything left. */
body {
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.6;
	color: var(--ink);
	background: var(--surface-2);
	margin: 0;
	padding: 0;
	font-feature-settings: "kern" 1;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	overflow-x: hidden;
}

.wrap {
	flex: 1 0 auto;
	width: min(var(--wide), calc(100% - 2 * var(--sp-5)));
	margin-left: auto;
	margin-right: auto;
	padding-top: var(--sp-6);
	padding-bottom: var(--sp-7);
	text-align: center;
}

a:link, a:visited, a:active {
	text-decoration: underline;
	background-color: transparent;
	color: var(--accent);
}

#header { padding: 0 0 var(--sp-2) 0; }

#header .brand {
	font-family: var(--font-display);
	font-size: 30px;
	color: var(--ink);
	font-weight: bold;
	letter-spacing: -0.5px;
	line-height: 1.2;
}

#header .brand span { color: var(--accent); }

#header .tag {
	font-size: 11px;
	color: var(--faint);
	letter-spacing: 1px;
}

h2 {
	font-size: 1.15rem;
	font-weight: 600;
	color: var(--ink);
	margin: var(--sp-4) 0 var(--sp-3) 0;
}

.intro {
	color: var(--muted);
	font-size: 15px;
	margin: 0 auto var(--sp-5) auto;
	max-width: var(--measure);
}

form { margin: 0; }

input[type=text] {
	font-family: var(--font-sans);
	font-size: 15px;
	color: var(--ink);
	background: var(--surface);
	border: 1px solid var(--rule-strong);
	border-radius: var(--r-md);
	padding: 6px 10px;
	min-width: 15rem;
}

input[type=text]:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba(31, 79, 143, 0.18);
}

.links {
	display: flex;
	gap: var(--sp-4);
	justify-content: center;
	margin: var(--sp-5) 0 var(--sp-3) 0;
	font-size: 15px;
}

hr {
	border: none;
	border-top: 1px solid var(--rule);
	margin: var(--sp-3) 0 var(--sp-4) 0;
}

.legend {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2) var(--sp-5);
	justify-content: center;
	align-items: center;
	margin: 0 0 var(--sp-4) 0;
	color: var(--muted);
	font-size: 13px;
}

.leg-item {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
}

.swatch {
	display: inline-block;
	width: 20px;
	height: 12px;
	border: 1px solid var(--rule-strong);
	border-radius: 3px;
}

.swatch.route {
	background: var(--route);
	border-color: var(--route);
	height: 4px;
	border-radius: var(--r-pill);
}

/* The graph frame: paper tone and the 22px grid come from these tokens, so a
   theme switch restyles the frame without re-rendering the graph. */
.mapwrap {
	box-sizing: border-box;
	background: var(--surface-2);
	overflow: hidden;
	padding: var(--sp-4);
	overscroll-behavior: contain;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	border: 1px solid var(--rule);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-2);
	max-width: 100%;
}

.mapwrap img {
	display: block;
	margin: 0 auto;
	width: auto;           /* never width:100% - that is what stretched it */
	max-width: 100%;       /* shrink on narrow screens, never blow up */
	height: auto;
	border: none;
}

/* theme switch, top right */
.themebtn {
	position: fixed;
	top: 14px;
	right: 16px;
	width: 34px;
	height: 34px;
	line-height: 32px;
	text-align: center;
	border: 1px solid var(--rule-strong);
	border-radius: var(--r-pill);
	background: var(--surface);
	color: var(--ink-2);
	text-decoration: none !important;
	font-size: 15px;
}

.themebtn:hover { border-color: var(--accent); }

.err {
	color: var(--route);
	font-weight: bold;
	display: block;
	margin: var(--sp-5) 0;
}

.foot {
	margin-top: var(--sp-5);
	font-size: 12px;
	color: var(--faint);
}