/*
 * 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 {
	/* Direction G. Kept in step with app.css by hand, because the two
	   stylesheets are never loaded by the same document and so cannot share a
	   custom property at runtime. If one moves, move the other. */
	color-scheme: dark;
	--ground: #0B0C0D;
	--surface: #15181B;
	--surface-2: #1B1F23;
	--line: #262C33;
	--ink: #E9EDF0;
	--muted: #9AA4AD;
	--accent: #38C8E0;
	--accent-dim: #0E3F4A;

	/* The rarity ladder, so an item name on a reference page is the same colour
	   it is in the planner. */
	--r-normal: #C9D1D9;
	--r-magic: #5AA9FF;
	--r-rare: #E3C34A;
	--r-unique: #E28A2C;
	--r-mythic: #B166DC;
	--r-satanic: #E14B39;
	--r-angelic: #F2DFA0;
	--r-heroic: #55C77C;
	--r-unholy: #D14372;
	--r-rune: #C79A58;

	--font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, sans-serif;
	--font-ui: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
	--font-data: "Cascadia Mono", ui-monospace, "SF 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;

	/* ---- the design's measure ----
	   The same four numbers app.css declares, written to the same values. The
	   two stylesheets are never loaded by the same document so nothing can be
	   shared at runtime; what keeps the site one site is that these agree. */
	--max: 1600px;
	--pad: 28px;
	--pillar: 160px;
	--line-2: #313941;

	/* The class hue, as app.css declares it. The masthead script rewrites
	   --class-h from the saved build, exactly as the planner does. */
	--class-h: 190;
	--class: hsl(var(--class-h) 52% 62%);
	--class-dim: hsl(var(--class-h) 40% 40%);
}

* { 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; }

/* The gutter is reserved whether or not this page scrolls, and the planner
   reserves the same one on a page that never does. Both centre their content in
   the same 1600px container, and a container centred in 1920 does not land where
   one centred in 1905 lands: without this the whole masthead shifted sideways
   every time you moved between a document and the tool. */
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }

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;
	/* 64 and 20px of padding, matching --bar and #bar in app.css. These pages
	   and the planner are one site, so the masthead is one height. */
	min-height: 64px;
	padding: 0 20px;
	background: var(--surface);
	overflow-x: auto;
	scrollbar-width: none;
	position: relative;
}
/* The class hairline the planner carries under its masthead. There is no class
   selected on a reference page, so it holds the resting hue rather than
   changing, which is what makes the two rows read as the same component. */
header.bar::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 1px;
	background: linear-gradient(90deg, var(--accent-dim) 0%, transparent 46%);
}
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);
	/* 19/600, as the planner sets it. At 16/regular the wordmark read as one
	   more label in a row of labels rather than as the name of the site. */
	font-size: 19px;
	font-weight: 600;
	letter-spacing: 0.005em;
	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;
	/* 42, matching --nav in app.css at desktop. The phone value is restored in
	   the narrow block at the foot of this file, where a 44x44 touch target is
	   the rule that binds. */
	min-height: 42px;
	padding: 0 20px;
	/* The planner's strip sits on the page floor rather than on a second slab
	   of surface: two filled rows stacked is the grey blob this direction was
	   built to remove. */
	background: var(--ground);
	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 ---------- */

/*
 * The reference shell, written to the planner's four numbers.
 *
 * A 1600px container, 28px of page padding, a 160px pillar and 48px between the
 * document and it. `main` used to carry the container itself with a 46px
 * measure inside it, which put its first line 230px from the left of a 1920
 * window while the planner's tab strip started at 369, and then a second rule
 * further down added another 184 to try to reconcile the two. Two elements each
 * holding half of one measure is how the two halves came to disagree.
 *
 * The shell holds the measure now, exactly as #app does in the planner, and
 * `main` is simply the first column of it.
 */
.refshell {
	max-width: var(--max);
	margin: 0 auto;
	padding: 0 var(--pad);
}
main {
	max-width: none;
	margin: 0;
	padding: 32px 0 64px;
}

@media (min-width: 1101px) {
	.refshell {
		display: grid;
		grid-template-columns: minmax(0, 1fr) var(--pillar);
		gap: 48px;
		align-items: start;
	}
	.refshell > main { grid-column: 1; min-width: 0; }
	/* Sticky, so a 600px column beside a fifty-three row table stays with the
	   reader instead of leaving at the first screenful. */
	.refshell > .pillar {
		grid-column: 2;
		position: sticky;
		top: 32px;
		margin-top: 32px;
	}
}
/* Below 1101 the pillar is what gives, on the same reasoning as the planner's:
   it is the one column carrying nothing the reader came for. */
@media (max-width: 1100px) {
	.refshell > .pillar { display: none; }
}
main > * { max-width: var(--wide); }
/* 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; }
}

/* ---------- Direction G chrome on the reference pages ---------- */
.bar .brandbox { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
/* 30px, the design's, and the same figure the planner uses. */
.bar .logomark { width: 30px; height: 30px; flex: 0 0 30px; color: var(--accent); }
.bar .brandtext { display: flex; flex-direction: column; justify-content: center; }
.bar .brand { font-family: var(--font-display); font-size: 18px; font-weight: 600; line-height: 1.15; }
.bar .tagline {
	font-family: var(--font-display); font-size: 10px; font-weight: 600;
	letter-spacing: .15em; text-transform: uppercase; color: var(--muted); line-height: 1;
}
.sitenav .season {
	margin-left: auto; font-family: var(--font-data); font-size: 12px;
	color: var(--muted); white-space: nowrap; align-self: center;
}
.sitenav .season b { color: var(--ink); font-weight: 400; }
@media (max-width: 760px) { .bar .tagline { display: none; } }
/* 900 for the stamp, not 760: it is 197px wide and pushed to the right of the
   strip, so between 761 and 900 it hung past the edge of the glass. It is a
   client build date, not navigation, and it is the first thing that can go. */
@media (max-width: 900px) { .sitenav .season { display: none; } }


/* ==========================================================================
   ONE CONTAINER
   The bars keep a full-bleed background and constrain what is inside them, so
   the masthead spans the glass while its contents line up with the page below
   and with the planner. Without this the wordmark sat at x=12 here and x=160
   in the planner, which is the single most visible way two pages say they are
   different sites.
   ========================================================================== */
header.bar, nav.sitenav {
	justify-content: flex-start;
}
header.bar > *, nav.sitenav > * { flex: none; }
/*
 * The masthead's content sits on the container's left edge, at every width.
 *
 * This used to be a media query at 1640 that centred the row's padding only
 * once the window was wider than the container plus its padding, using 100vw.
 * Both halves were wrong for this site. 100vw includes the scrollbar and a
 * reference page has one, so the row was offset from the planner's by the
 * scrollbar's width; and below 1640 the row fell back to a flat 20px while the
 * document below it was already centred in 1600, so the wordmark and the first
 * paragraph started at two different places on exactly the widths a laptop uses.
 *
 * max() states both cases at once, in one place, against 100% of the body,
 * which is the width the document is centred in.
 */
header.bar, nav.sitenav {
	padding-left: max(var(--pad), calc((100% - var(--max)) / 2 + var(--pad)));
	padding-right: max(var(--pad), calc((100% - var(--max)) / 2 + var(--pad)));
}
/* The links are spaced by a gap rather than by their own padding, so the first
   one's text lands on the same vertical as the wordmark above it. The phone
   block at the foot of this file gives them their 44px targets back. */
nav.sitenav { gap: 24px; }
nav.sitenav a { padding: 0; }
nav.sitenav a:hover { background: none; }

/* The phone values, restored. A 42px strip is a desktop measure; on a phone
   this is the row a finger reaches for and it keeps its 44px target, and the
   seven sections wrap rather than scrolling off the end. */
@media (max-width: 760px) {
	:root { --pad: 16px; }
	/* The padded 44px targets come back with the finger that needs them. The
	   row's own padding gives back the 11px they add, so the first link's text
	   still lands on the page edge. A negative margin did this before and put
	   11px of the strip off the left of a 320px screen. */
	nav.sitenav {
		min-height: 0;
		flex-wrap: wrap;
		gap: 2px;
		padding-left: calc(var(--pad) - 11px);
		padding-right: calc(var(--pad) - 11px);
	}
	nav.sitenav a { min-height: 44px; padding: 0 11px; }
	header.bar { min-height: 56px; }
	main { padding: 20px 0 56px; }
}


/* ==========================================================================
   THE SAME SITE AS THE PLANNER
   Everything here is copied from app.css, not chosen again. If a value moves
   there it has to move here: the two stylesheets are never loaded by the same
   document, so nothing can share a custom property at runtime and the only
   thing keeping them together is that they are written to the same numbers.
   ========================================================================== */

/*
 * The reserved column, drawn the way the planner draws its own: a dashed
 * rectangle labelled with its dimensions. An empty box with no border reads as
 * a rendering fault; a labelled dashed one reads as a slot.
 */
.pillar { min-width: 0; }
.adslot {
	display: grid;
	place-items: center;
	width: var(--pillar);
	height: 600px;
	border: 1px dashed var(--line-2, var(--line));
	border-radius: 6px;
	color: var(--muted);
	font-family: var(--font-display);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.pillar[data-filled] .adslot { display: none; }

/*
 * Section heads are compartments, exactly as The Workbench and The Ledger are:
 * the title, a hairline across the gap, and the count on the right. A 26px
 * heading with nothing after it is a document convention, and these pages are
 * part of a tool.
 */
main h2 {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 40px 0 16px;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--ink);
}
main h2::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--line);
}
/* The count that follows a heading is the compartment's kicker, so it sits at
   the far end of the rule rather than beside the words. */
main h2 .count, main h2 small {
	order: 3;
	font-family: var(--font-display);
	font-size: 11px;
	letter-spacing: 0.14em;
	color: var(--muted);
	white-space: nowrap;
}

/* h1 keeps its size: it is the page's name, and the planner has no equivalent
   because the planner is one page. It loses the serif weight it was carrying. */
h1 { font-weight: 600; letter-spacing: -0.01em; }

/*
 * Cards, at the planner's scale and with its treatment: a keyline down the
 * left, one raised tier, a hairline border, 10px radius. 367px wide with no
 * keyline was a different component that happened to be the same colour.
 */
.cards { grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 12px; }
.cards a {
	background: var(--surface);
	border: 1px solid var(--line);
	border-left: 2px solid var(--line-2, var(--line));
	border-radius: 10px;
	padding: 12px 14px;
	transition: background .12s, border-color .12s;
}
.cards a:hover { background: var(--surface-2); border-color: var(--line); border-left-color: var(--accent); }
.cards .nm { font-family: var(--font-ui); font-size: 14.5px; font-weight: 500; }
.cards .meta { font-size: 12px; }

/* A panel is the same object as the planner's sunken well. */
.panel {
	background: var(--ground);
	border: 1px solid var(--line);
	border-left: 2px solid var(--accent-dim);
	border-radius: 10px;
	padding: 14px 18px;
}

/*
 * Tables match the Ledger: rules between rows, never a boxed grid, and the
 * figures in the data face so columns of digits line up.
 *
 * They also scroll inside their own box rather than widening the page. A
 * four-column table of dungeon drops has a floor of about 360px whatever the
 * cells are told to do, because "Satan's Molten Steps" is one word to a
 * browser; at 320 that made the whole document 56px wider than the screen and
 * every heading and paragraph on it slid sideways with it. A table that
 * scrolls sideways in place is a table you can read on a phone. The page
 * behind it must never be the thing that moves.
 */
main table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
main table > * { min-width: 100%; }
table { border-collapse: collapse; width: 100%; }
th {
	font-family: var(--font-display);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
	text-align: left;
	padding: 0 12px 8px;
	border-bottom: 2px solid var(--line);
}
td { padding: 10px 12px; border-bottom: 1px solid var(--line); }
tr:hover td { background: var(--surface); }
td.num, th.num {
	text-align: right;
	font-family: var(--font-data);
	font-variant-numeric: tabular-nums;
}
.muted { color: var(--muted); }


/* Masthead buttons, written to app.css's 34px so the row is the same height
   here as on the planner. `key` is the one emphasised control, exactly as the
   planner emphasises Sign in. */
header.bar .btn {
	height: 34px;
	min-height: 34px;
	display: inline-flex;
	align-items: center;
	padding: 0 12px;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: none;
	color: var(--muted);
	font: inherit;
	font-size: 14px;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
}
header.bar .btn:hover { border-color: var(--muted); color: var(--ink); }
header.bar .btn.key {
	border-color: var(--accent-dim);
	color: var(--accent);
	background: rgba(56, 200, 224, .05);
}
header.bar .btn.key:hover { border-color: var(--accent); background: rgba(56, 200, 224, .1); }
@media (max-width: 760px) { header.bar .btn:not(.key) { display: none; } }

/* The masthead control row, written to app.css's numbers so the header is one
   object across the site: a 32px chip with the label as a bordered segment of
   it, and a drawn arrow because `appearance: none` removes the platform one. */
/* app.css's own two rules, to the same numbers. The spacer is what puts the
   chips in the middle of the row and the buttons on its right edge. */
.ctlgroup { display: flex; align-items: center; gap: 10px; flex: none; }
header.bar .spacer { flex: 1; }
header.bar .ctl {
	display: flex;
	align-items: center;
	height: 34px;
	border: 1px solid var(--line);
	border-radius: 6px;
	background: var(--ground);
	overflow: hidden;
}
header.bar .ctl label {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0 10px;
	font-family: var(--font-display);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--muted);
	border-right: 1px solid var(--line);
	white-space: nowrap;
}
header.bar .ctl select, header.bar .ctl input {
	height: 100%;
	border: 0;
	background: none;
	color: var(--ink);
	font: inherit;
	font-size: 14px;
	padding: 0 10px;
}
header.bar .ctl select {
	appearance: none;
	padding-right: 26px;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--muted) 50%),
		linear-gradient(135deg, var(--muted) 50%, transparent 50%);
	background-position: calc(100% - 14px) center, calc(100% - 9px) center;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	cursor: pointer;
}
/* 64, matching app.css: at 54 a level of 100 was clipped to two and a half
   digits by the spinner the browser draws inside the field. */
header.bar .ctl input { width: 64px; text-align: right; font-family: var(--font-data); }
header.bar .ctl:focus-within { border-color: var(--accent-dim); }

/* The same status box the planner uses for a control that is not built yet. */
#unbuiltNotice {
	position: fixed;
	left: 50%;
	transform: translateX(-50%);
	bottom: 16px;
	z-index: 30;
	max-width: 620px;
	padding: 12px 16px;
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-left: 2px solid var(--accent);
	border-radius: 10px;
	font-size: 13.5px;
	color: var(--muted);
}

/* A phone masthead keeps the class it is planning and drops the rest: the row
   is 390px wide and four buttons and three chips do not fit in it. */
@media (max-width: 900px) {
	header.bar .ctl:not(:first-child) { display: none; }
}
/*
 * Below 760 the character chips go entirely.
 *
 * Spec and level had already gone at 900 and the Class chip stayed, at 181px
 * against a 320px screen: with the wordmark and Sign in either side of it the
 * masthead was 130px wider than the glass, and because the row scrolls
 * sideways rather than wrapping, that width became the document's. Measured at
 * 320 it pushed every page 56 to 70px wide, which is the horizontal scrollbar
 * on a phone that no page on this site may have.
 *
 * Nothing is lost: the chips write to the same saved build the planner reads,
 * and the planner is one tap away with the chips on it at full size.
 */
@media (max-width: 760px) {
	header.bar .ctl { display: none; }
	header.bar .btn:not(.key) { display: none; }
}


/* ==========================================================================
   THE MASTHEAD IS THE PLANNER'S MASTHEAD
   Every rule below is app.css's, restated to the same numbers, and it is
   stated LAST on purpose. Earlier rules in this file describe the same
   elements at different values, and a rule of equal specificity earlier in a
   stylesheet loses in silence: that is how the wordmark came to be 40px tall
   here and 22 on the planner, and the buttons 14px here and 13 there, while
   both stylesheets looked correct read on their own.

   Measured against the planner before this block existed: brand 152x40 against
   167x22, tagline 10px against 11, every button a size and a colour apart,
   Sign in cyan here and neutral there, and the strip a pixel short.
   ========================================================================== */

header.bar .brandbox, .bar .brandbox { gap: 9px; }
header.bar .brand, .bar .brand {
	display: block;
	min-height: 0;
	padding: 0;
	font-family: var(--font-display);
	font-size: 19px;
	font-weight: 600;
	letter-spacing: 0.005em;
	line-height: 1.15;
	white-space: nowrap;
}
header.bar .tagline, .bar .tagline {
	font-family: var(--font-display);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--muted);
	line-height: 1;
	white-space: nowrap;
}

/* The buttons, all four the same object. `key` is neutralised rather than
   deleted: the class stays on Sign in so the day the planner emphasises it
   again, both rows change together. The planner does not emphasise it today,
   so neither does this. */
header.bar .btn, header.bar .btn.key {
	height: 34px;
	min-height: 34px;
	padding: 0 12px;
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: 6px;
	color: var(--ink);
	font-size: 13px;
}
header.bar .btn:hover, header.bar .btn.key:hover {
	border-color: var(--muted);
	background: var(--surface-2);
	color: var(--ink);
}

/* 43: the design's 42px strip plus the hairline that ends the header, which
   this grid counts inside the row. */
nav.sitenav { min-height: 43px; }

/* The mark carries the class hue, as it does on the planner. It is the one
   piece of chrome allowed to say whose character is loaded, and a reference
   page knows which character that is: the chips beside it are reading the same
   saved build. It was fixed cyan here, so moving between a document and the
   tool changed the colour of the site's own mark. */
/* `.bar .logomark` further up sets `color: var(--accent)` and is a two-class
   selector, so a one-class rule here loses however late it is written. That
   is why the hue was carrying in --class-h and the mark stayed cyan. */
.bar .logomark, header.bar .logomark { color: var(--class, var(--accent)); transition: color .25s; }