/* amber — page styles.
 * Element selectors only: the markdown renderer emits plain HTML,
 * so there are no classes to hook. Every value comes from tokens.css.
 */

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

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

body {
	margin: 0;
	/* min-height, not height: a two-line placeholder sits in the middle of the
	   window while a full markdown page grows from the top under the same rule. */
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--space-14) var(--space-6) var(--space-16);
	background: var(--bg);
	color: var(--fg);
	font-family: var(--font-sans);
	font-size: var(--text-base);
	line-height: var(--leading-body);
	/* Nothing the operator writes may push the document sideways: a bare url or a
	   long token in a table cell breaks rather than widening the page. */
	overflow-wrap: break-word;
}

main {
	width: 100%;
	max-width: var(--measure);
	margin: 0 auto;
	min-width: 0;
}

::selection {
	background: var(--accent-ink);
	color: var(--bg);
}

:focus-visible {
	outline: var(--rule) solid var(--accent-ink);
	outline-offset: 2px;
}

h1 {
	margin: 0 0 var(--space-3);
	font-size: var(--text-xl);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-tight);
	line-height: var(--leading-tight);
	/* A long single-word name would otherwise break mid-syllable at 44px.
	   APP_LANG is what makes the break points correct rather than arbitrary. */
	hyphens: auto;
}

/* the lead: first paragraph after h1 */
h1 + p {
	margin: 0 0 var(--space-8);
	max-width: var(--measure-lead);
	font-size: var(--text-md);
	line-height: var(--leading-snug);
	color: var(--fg-muted);
}

h2 {
	margin: var(--space-10) 0 var(--space-3);
	padding-top: var(--space-3);
	border-top: var(--rule) solid var(--border-strong);
	font-size: var(--text-xs);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
}

h3 {
	margin: var(--space-8) 0 var(--space-3);
	font-size: var(--text-lg);
	font-weight: var(--weight-bold);
	letter-spacing: var(--tracking-snug);
}

h4, h5, h6 {
	margin: var(--space-6) 0 var(--space-2);
	font-size: var(--text-base);
	font-weight: var(--weight-bold);
}

/* The scale runs out of sizes before the markup runs out of levels, so the
   deepest levels step back in tone and then in weight. */
h5, h6 { color: var(--fg-muted); }
h6 { font-weight: var(--weight-medium); }

p, ul, ol, pre, blockquote, table, figure, details {
	margin: 0 0 var(--space-5);
}

p { text-wrap: pretty; }

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

strong { font-weight: var(--weight-bold); }
em { font-style: italic; }
del { color: var(--fg-faint); }

hr {
	margin: var(--space-8) 0;
	border: 0;
	border-top: var(--hairline) solid var(--border);
}

ul, ol { padding-left: var(--space-5); }
li { margin-bottom: var(--space-2); }
li > ul, li > ol {
	margin: var(--space-2) 0 0;
	padding-left: var(--space-4);
	color: var(--fg-subtle);
}
li:last-child { margin-bottom: 0; }

/* A task list item carries no class, only the checkbox — so the marker has to go
   per item, because an ordinary item may sit in the same list. */
li:has(> input[type="checkbox"]) { list-style: none; margin-left: calc(-1 * var(--space-5)); }

/* The renderer emits these boxes disabled, and a disabled control ignores
   accent-color — so the box is drawn here: empty or filled, square like
   everything else. */
li > input[type="checkbox"] {
	appearance: none;
	width: 0.85em;
	height: 0.85em;
	/* Box plus this gap has to consume the item's pull-back, or the label sits
	   further right than the labels of the ordinary items beside it. */
	margin: 0 var(--space-1) 0 0;
	vertical-align: -0.05em;
	border: var(--hairline) solid var(--border-strong);
	background: none;
}
li > input[type="checkbox"]:checked {
	border-color: var(--accent);
	background: var(--accent);
}

/* Forced colours discard background-color, and the fill is the only thing
   separating a ticked box from an empty one — so the platform draws it there. */
@media (forced-colors: active) {
	li > input[type="checkbox"] { appearance: auto; }
}

summary::marker { color: var(--accent); }

code {
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	color: var(--accent-code);
}

pre {
	padding: var(--space-5);
	background: var(--bg-sunken);
	overflow-x: auto;
}
pre code {
	font-size: var(--text-sm);
	line-height: var(--leading-code);
	color: var(--fg);
}

/* Four tones, from Chroma, which is what the renderer highlights with.
   Anything unlisted keeps body colour. */
pre .c, pre .ch, pre .cm, pre .c1, pre .cs, pre .cp, pre .cpf {
	color: var(--code-comment);
}
pre .k, pre .kc, pre .kd, pre .kn, pre .kp, pre .kr, pre .kt,
pre .nb, pre .bp, pre .nf, pre .nt, pre .ow {
	color: var(--code-keyword);
}
pre .m, pre .mb, pre .mf, pre .mh, pre .mi, pre .mo, pre .il, pre .no {
	color: var(--code-number);
}
pre .s, pre .sa, pre .sb, pre .sc, pre .dl, pre .sd, pre .s1, pre .s2,
pre .se, pre .sh, pre .si, pre .sr, pre .ss, pre .sx, pre .nv {
	color: var(--code-string);
}

blockquote {
	padding: var(--space-4) var(--space-5);
	background: var(--bg-note);
	color: var(--fg-note);
	border: 0;
}
blockquote > :last-child { margin-bottom: 0; }

/* A quote inside a quote cannot tint a tint, so it steps back to a rule — in the
   quote's own ink, because a neutral hairline is invisible on the tint. */
blockquote blockquote {
	margin-top: var(--space-4);
	padding: 0 0 0 var(--space-4);
	background: none;
	border-left: var(--hairline) solid var(--fg-note);
}

/* Raw html passes through the renderer, which makes the disclosure idiom usable. */
summary {
	font-weight: var(--weight-bold);
	cursor: pointer;
}

details > :last-child { margin-bottom: 0; }

/* A block, so an over-wide table scrolls inside itself the way a code block
   already does. Table cells do not shrink below their longest word, so nothing
   in the text can make the document scroll sideways instead. */
table {
	display: block;
	width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
	font-size: var(--text-base);
}
th {
	text-align: left;
	padding: 0 var(--space-3) var(--space-2) 0;
	border-bottom: var(--rule) solid var(--border-strong);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-weight: var(--weight-medium);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
td {
	padding: var(--space-3) var(--space-3) var(--space-3) 0;
	border-bottom: var(--hairline) solid var(--border);
}
/* display:block leaves the grid inside shrink-wrapped to its content, so a narrow
   table would end mid-column while every rule above and below runs full width.
   The slack all goes to the last column; distributing it would cost the
   content-driven column widths. */
th:last-child, td:last-child { padding-right: 0; width: 100%; }
td code { color: var(--fg); }

img {
	display: block;
	max-width: 100%;
	height: auto;
}

figure { margin-inline: 0; }
figcaption {
	margin-top: var(--space-2);
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--fg-faint);
}

/* Footnote markers are digits and arrows, not words: an underline would read as
   part of the sentence. The collected notes sit a step back from the body. */
sup a, .footnote-backref { text-decoration: none; }

/* An underline would read as part of the sentence at rest, but without one these
   two are the only links on the page with no answer to a pointer at all. */
sup a:hover, .footnote-backref:hover { text-decoration: underline; }

sup a { font-size: var(--text-xs); }

/* A hairline, not the section rule: the heavy rule always carries an uppercase
   label, and the renderer gives this block none. */
.footnotes {
	margin-top: var(--space-8);
	padding-top: var(--space-3);
	border-top: var(--hairline) solid var(--border);
	font-size: var(--text-sm);
	color: var(--fg-subtle);
}
.footnotes hr { display: none; }
.footnotes ol { padding-left: var(--space-5); }
.footnotes p { margin: 0; }

@media (max-width: 34rem) {
	body { padding: var(--space-8) var(--space-5) var(--space-10); }
	:root { --text-xl: 2.125rem; --text-md: 1.0625rem; }
}