/*
 * The stylesheet for the generated reference pages.
 *
 * Deliberately not app.css, and deliberately not a copy of privacy.html's
 * inline block either.
 *
 * app.css sets `overflow: hidden` and `height: 100%` on html and body, because
 * the planner is a fixed-viewport app whose panes scroll internally. A long
 * reference document under those rules cannot be scrolled at all: everything
 * past the first screen is simply unreachable. privacy.html hit the same wall
 * and solved it by restating the palette inline, which is right for one page.
 *
 * It is wrong for a hundred and twenty six. Inlining this block in every
 * generated page would add roughly 6 KB to each of them, half a megabyte of
 * deploy for bytes that are identical every time. So it ships once, as a
 * content-hashed asset, and every generated page links it. The palette and the
 * type scale below are lifted from app.css rather than invented, so the
 * reference pages and the planner cannot drift apart in look.
 *
 * No custom properties are read from app.css at runtime: the two stylesheets
 * are never loaded by the same document.
 */

:root {
	--ground: #0b0a0c;
	--surface: #201d25;
	--surface-2: #2b2833;
	--line: #423d4c;
	--ink: #f4f1ea;
	--muted: #aba5b2;
	--accent: #d9a441;
	--accent-dim: #8a6a2c;

	--font-display: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
	--font-ui: system-ui, -apple-system, 'Segoe UI', sans-serif;
	--font-data: ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, monospace;

	/* Prose wants a measure; a reference table wants the window. Two widths,
	   named, so no block has to guess which it is. */
	--measure: 68ch;
	--wide: 1120px;
}

* { box-sizing: border-box; }

/*
 * The UA sheet's `[hidden] { display: none }` is the weakest rule in the
 * cascade, and every author rule below beats it: `.row` is display:flex and a
 * `.row[hidden]` therefore stayed on screen. The filter hides rows by setting
 * the attribute, so without this it hid nothing at all and the whole feature
 * failed silently on the pages with the most rows in them.
 */
[hidden] { display: none !important; }

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

body {
	margin: 0;
	background: var(--ground);
	color: var(--ink);
	font-family: var(--font-ui);
	font-size: 16px;
	line-height: 1.6;
}

/* ---------- top bar and site navigation ---------- */

/*
 * Two rows, and they are the planner's own two rows.
 *
 * Every value below is lifted from app.css: 56px masthead, 47px strip, the same
 * surface, the same hairline under the pair rather than between them, the same
 * 13.5px links and the same accent underline on the current one. The strip is
 * the only element that appears on every page of the site, so it is the one that
 * has to be identical, and it is written out here rather than shared because the
 * two stylesheets are never loaded by the same document.
 *
 * It used to be three links inside the masthead, on a bar that scrolls sideways
 * on a phone, which put them off the end of the screen on the device most
 * visitors arrive on.
 */
header.bar {
	display: flex;
	align-items: center;
	gap: 6px;
	min-height: 56px;
	padding: 0 12px;
	background: var(--surface);
	overflow-x: auto;
	scrollbar-width: none;
}
header.bar::-webkit-scrollbar { display: none; }

header.bar .brand {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 8px;
	font-family: var(--font-display);
	font-size: 16px;
	color: var(--ink);
	text-decoration: none;
	white-space: nowrap;
}
header.bar .brand:hover { color: var(--accent); }
header.bar .spacer { flex: 1; }

nav.sitenav {
	display: flex;
	align-items: stretch;
	gap: 2px;
	/* 47, matching --nav in app.css. The links stretch to the strip less its 1px
	   rule, and 44x44 is the touch target the audit advises. */
	min-height: 47px;
	padding: 0 10px;
	background: var(--surface);
	border-bottom: 1px solid var(--line);
	overflow-x: auto;
	scrollbar-width: none;
}
nav.sitenav::-webkit-scrollbar { display: none; }

/* Height from the strip, not from padding. The a11y audit fails an interactive
   target under 24x24 CSS pixels, and bare 13.5px text is about eighteen. */
nav.sitenav a {
	display: inline-flex;
	align-items: center;
	padding: 0 11px;
	border-bottom: 2px solid transparent;
	color: var(--muted);
	font-size: 13.5px;
	text-decoration: none;
	white-space: nowrap;
}
nav.sitenav a:hover { color: var(--ink); background: var(--surface-2); }
nav.sitenav a[aria-current='page'] { color: var(--accent); border-bottom-color: var(--accent); }
/* Inset, because the strip has no room under the text for the default 2px ring
   and the outline would be clipped by the row. */
nav.sitenav a:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; border-radius: 4px; }

/* The planner is a tool and the two after it are documents. Three identical
   pills in a row would say they are the same kind of thing. */
.navsep {
	flex: none;
	align-self: center;
	width: 1px;
	height: 18px;
	margin: 0 7px;
	background: var(--line);
}
.navlbl {
	display: inline-flex;
	align-items: center;
	padding-right: 4px;
	color: var(--muted);
	font-size: 9.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	white-space: nowrap;
	/* 0.75 measured 3.6:1 on --surface. This is a label, and a label is text. */
	opacity: 0.9;
}
@media (max-width: 560px) {
	.navlbl { display: none; }
	nav.sitenav a { padding: 0 9px; font-size: 13px; }
	.navsep { margin: 0 5px; }
}

/* The planner's .btn, for the filter controls. */
.btn {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 8px 12px;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--surface-2);
	color: var(--ink);
	font: inherit;
	font-size: 13px;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
}
.btn:hover { border-color: var(--accent-dim); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- document ---------- */

main {
	max-width: var(--wide);
	margin: 0 auto;
	padding: 24px 20px 72px;
}
/* A single recipe is neither an index nor a table: it is a short document with
   a few value rows in it, and at the full width the value column ends up a
   hand's width away from the label it belongs to. */
main.doc { max-width: 860px; }
/* Prose gets the measure even on a wide page. The card grid and the chip rows
   are not prose and must keep the full width, or `minmax(280px, 1fr)` resolves
   against 68ch and lays four columns of cards out as two. */
main > .lede,
main > p,
main > ul:not(.cards):not(.inline),
main > ol { max-width: var(--measure); }

nav.crumbs {
	margin: 0 0 14px;
	color: var(--muted);
	font-size: 13px;
}
/* inline-block with a floor, because a breadcrumb is navigation rather than a
   link inside a sentence, so the inline exception to the 24x24 target-size rule
   does not cover it and bare 13px text is about seventeen pixels tall. */
nav.crumbs a {
	display: inline-block;
	min-height: 24px;
	padding: 3px 1px;
	color: var(--muted);
}
nav.crumbs a:hover { color: var(--accent); }
nav.crumbs span { padding: 0 6px; }

h1 {
	margin: 0 0 8px;
	font-family: var(--font-display);
	font-size: 32px;
	font-weight: 400;
	line-height: 1.15;
	text-wrap: balance;
}

h2 {
	margin: 40px 0 12px;
	padding-top: 16px;
	border-top: 1px solid var(--line);
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 400;
	line-height: 1.25;
	text-wrap: balance;
}

h3 {
	margin: 24px 0 8px;
	font-family: var(--font-display);
	font-size: 17px;
	font-weight: 400;
}
h2 .sub, h3 .sub { color: var(--muted); font-family: var(--font-ui); font-size: 13px; }

p, li { margin: 0 0 14px; }
ul, ol { margin: 0 0 14px; padding-left: 22px; }
li { margin-bottom: 6px; }

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

/* The focus pair app.css uses everywhere. */
a:focus-visible, .btn:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
	border-radius: 3px;
}

.lede {
	margin: 0 0 20px;
	color: var(--ink);
	font-size: 18px;
	line-height: 1.55;
}

.kicker {
	margin: 0 0 22px;
	color: var(--muted);
	font-size: 14px;
}
.kicker b { color: var(--ink); font-weight: 600; }

/* ---------- the filter bar ---------- */

/*
 * Shown only once pages.js has run: the markup ships carrying `hidden` and
 * nothing else takes it off. There is therefore no state in which this is on
 * screen and inert.
 *
 * Sticky, because the lists it filters are hundreds of rows long and a field
 * you have to scroll back up to is a field you stop using. `--ground` behind it
 * so rows do not show through as it passes over them, and the top offset is 0
 * because the header does not stick: on a phone the whole point is to get the
 * header out of the way and keep the field.
 */
.find {
	position: sticky;
	top: 0;
	z-index: 2;
	max-width: var(--measure);
	margin: 0 0 20px;
	padding: 12px 0 10px;
	background: var(--ground);
}
.findlabel {
	display: block;
	margin-bottom: 6px;
	color: var(--muted);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.findrow { display: flex; gap: 8px; }
.find input[type='search'] {
	flex: 1;
	min-width: 0;
	min-height: 40px;
	padding: 8px 11px;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--surface);
	color: var(--ink);
	font: inherit;
	font-size: 15px;
}
/* A border tint is not a focus indicator; the ring is. Both, for the same
   reason app.css keeps both. */
.find input[type='search']:focus { border-color: var(--accent-dim); }
.find input[type='search']:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.findcount {
	margin: 8px 0 0;
	min-height: 1.4em;
	color: var(--muted);
	font-size: 13px;
}

.findempty {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	max-width: var(--measure);
	margin: 0 0 24px;
	padding: 14px 16px;
	border: 1px dashed var(--line);
	border-radius: 8px;
	color: var(--muted);
	font-size: 14px;
}

/* ---------- key facts ---------- */

/* The what-it-needs block. A description list, because that is what it is:
   term and value, and a screen reader gets the pairing for free. */
dl.facts {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 10px;
	margin: 0 0 22px;
	padding: 0;
}
dl.facts > div {
	padding: 12px 14px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--surface);
}
dl.facts dt {
	margin: 0 0 3px;
	color: var(--muted);
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
dl.facts dd {
	margin: 0;
	font-size: 16px;
	line-height: 1.35;
}
dl.facts dd .sub { display: block; margin-top: 2px; color: var(--muted); font-size: 13px; }

/* ---------- rune line ---------- */

.runeline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0 0 20px;
}
.runechip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 12px 6px 8px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--surface);
	font-family: var(--font-data);
	font-size: 14px;
}
/* --muted, not --accent-dim. The dim gold reads as the right weight for a
   separator and measures 3.93:1 on the page ground, which is under the 4.5:1
   that text this size needs. Being decorative and aria-hidden does not exempt
   it: the contrast rule is about what is on screen. */
.runearrow { color: var(--muted); font-size: 15px; }

/* A sprite cut out of one of the shipped atlases. Geometry arrives as an
   inline style attribute, which the deploy CSP allows through
   style-src 'unsafe-inline'; only the box is described here. */
.ico {
	display: inline-block;
	flex: none;
	width: 26px;
	height: 26px;
	background-repeat: no-repeat;
	vertical-align: middle;
}
.ico.sm { width: 18px; height: 18px; }

/* ---------- rows ---------- */

/* The two-column stat row, the same shape the planner's .row2 uses: label on
   the left, value hard right, hairline between. */
.rows { margin: 0 0 22px; }
.row {
	display: flex;
	align-items: baseline;
	gap: 14px;
	padding: 9px 2px;
	border-bottom: 1px solid var(--line);
}
.row:last-child { border-bottom: 0; }
.row .k { flex: 1; min-width: 0; }
.row .v {
	flex: none;
	color: var(--ink);
	font-family: var(--font-data);
	font-size: 14px;
	text-align: right;
}
.row .sub { display: block; color: var(--muted); font-size: 13px; }
.row .tag {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 6px;
	border: 1px solid var(--line);
	border-radius: 4px;
	color: var(--muted);
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	vertical-align: 1px;
}
.row .tag.unique { color: var(--accent); border-color: var(--accent-dim); }

/* A drop weight. Monospace and dim, because it is a raw client number and the
   note under every one of these lists says so. */
.wt { color: var(--muted); font-family: var(--font-data); font-size: 13px; }

/* ---------- card lists ---------- */

.cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 10px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}
.cards li { margin: 0; }
.cards a {
	display: block;
	height: 100%;
	padding: 13px 15px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--surface);
	color: var(--ink);
	text-decoration: none;
}
.cards a:hover { border-color: var(--accent-dim); background: var(--surface-2); }
.cards .nm { display: block; font-family: var(--font-display); font-size: 17px; }
.cards .meta { display: block; margin-top: 3px; color: var(--muted); font-size: 13px; }
.cards .runes {
	display: block;
	margin-top: 6px;
	color: var(--accent);
	font-family: var(--font-data);
	font-size: 13px;
	overflow-wrap: anywhere;
}

/* A dense list of sibling links, for the bottom of a detail page. */
ul.inline {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}
ul.inline li { margin: 0; }
ul.inline a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 4px 11px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--surface);
	color: var(--ink);
	font-size: 14px;
	text-decoration: none;
}
ul.inline a:hover { border-color: var(--accent-dim); color: var(--accent); }

/* ---------- place blocks ---------- */

.place {
	margin: 0 0 18px;
	padding: 16px 18px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: var(--surface);
}
/* A place is a section of the page, so its heading is an h2: an h3 sitting
   directly under the h1 skips a level, which is a real navigation defect for
   anyone moving through the document by heading. Styled back down, because
   being the right level is a structural fact and not a licence to be 22px with
   a rule above it. */
.place > h2 {
	margin: 0 0 10px;
	padding-top: 0;
	border-top: 0;
	font-size: 18px;
}
.place .rows { margin-bottom: 0; }
.place .also {
	margin: 0 0 10px;
	color: var(--muted);
	font-size: 13px;
}

/* ---------- notes ---------- */

.note {
	max-width: var(--measure);
	margin: 26px 0 0;
	padding: 15px 18px;
	border: 1px solid var(--line);
	border-left: 3px solid var(--accent-dim);
	border-radius: 8px;
	background: var(--surface);
	color: var(--muted);
	font-size: 14px;
}
.note > :last-child { margin-bottom: 0; }
.note strong { color: var(--ink); font-weight: 600; }

.panel {
	max-width: var(--measure);
	margin: 0 0 24px;
	padding: 16px 20px;
	border: 1px solid var(--line);
	border-left: 3px solid var(--accent);
	border-radius: 8px;
	background: var(--surface);
}
.panel > :last-child { margin-bottom: 0; }

code {
	padding: 2px 6px;
	border: 1px solid var(--line);
	border-radius: 5px;
	background: var(--surface);
	color: var(--accent);
	font-family: var(--font-data);
	font-size: 0.88em;
	overflow-wrap: anywhere;
}

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

footer {
	max-width: var(--wide);
	margin: 0 auto;
	padding: 22px 20px 64px;
	border-top: 1px solid var(--line);
	color: var(--muted);
	font-size: 14px;
}
footer ul.inline { margin-bottom: 12px; }
footer p { max-width: var(--measure); }

/* ---------- phone ---------- */

@media (max-width: 620px) {
	body { font-size: 15px; }
	main { padding: 18px 14px 52px; }
	footer { padding: 18px 14px 44px; }
	h1 { font-size: 26px; }
	h2 { font-size: 20px; margin-top: 32px; }
	.lede { font-size: 16px; }
	.place { padding: 13px 14px; }
	dl.facts { grid-template-columns: 1fr; }
	/* The value column stops fitting beside a long item name at 390px, so the
	   row becomes two lines rather than squeezing either half. */
	.row { flex-wrap: wrap; gap: 2px 12px; }
	.row .v { text-align: left; }
}