/* The documentation theme. A man page for every page but the landing
   page, which is airier. It styles every class tilder writes (tilder
   docs/theme.md; tilder's build.py --check checks it), and the
   theme's own: the page frame, the home and doc layouts, the search, the
   copy button.

   Contents: fonts - tokens - base - frame (header, footer) - sections and
   blocks - entries and cards - code - collection navigation - home - doc
   layout - search - copy button - motion. */

/* --- fonts: self-hosted, OFL (fonts/OFL-*.txt) ---------------------------- */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
	src: url("fonts/inter-regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 400; font-display: swap;
	src: url("fonts/inter-italic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap;
	src: url("fonts/inter-bold.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap;
	src: url("fonts/jetbrains-mono-regular.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 700; font-display: swap;
	src: url("fonts/jetbrains-mono-bold.woff2") format("woff2"); }

/* --- tokens: every colour of the theme; tilder's build.py --check checks
   the pairs theme.toml's [check] names (README.md, "Contrast"). Hex
   colours only. --------------------------------------------------------- */

:root {
	--bg: #ffffff; --surface: #f2f2f2; --text: #111111; --muted: #4d4d4d;
	--faint: #595959; --rule: #dcdcdc; --accent: #c2410c;
	--info: #c2410c; --warning: #333333; --error: #1a1a1a;
	--mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--measure: 75ch;         /* the text column, like the text mirror */
	--gutter: 11ch;          /* a section's name, on wide screens */
	color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
	:root {
		--bg: #0e0e0e; --surface: #1a1a1a; --text: #e6e6e6; --muted: #b3b3b3;
		--faint: #999999; --rule: #333333; --accent: #f59e0b;
		--info: #f59e0b; --warning: #cccccc; --error: #f2f2f2;
	}
}

/* --- base ------------------------------------------------------------------ */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--text);
	font: 1rem/1.65 var(--sans); }
a { color: var(--accent); text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
b, strong { font-weight: 700; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 2rem 0; }
p, ul, ol { margin: 0 0 1.1rem; }
ul, ol { padding-left: 2.5ch; }
img { max-width: 100%; height: auto; }

/* Required: read by screen readers, not shown. The landing page's hero
   `<h2>` (`.home > .s:first-of-type > h2`) shares this rule rather than
   repeating its declarations: the title stays for screen readers, the
   `.home-tagline` carries it visually (Resolution C3). */
.sr-only, .home > .s:first-of-type > h2 { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: absolute; left: -9999px; }
.skip:focus { position: static; display: inline-block; margin: 0.5rem 0; }

/* --- the frame: the man-page rules, the wordmark, the navigation ----------- */

/* The site's frame: the header and the footer sit in the same, fixed
   width and gutters on every page and every layout, so the wordmark, the
   navigation row and the footer rule never move. Only the content below
   the header (.page and its --wide/--home variants) may be wider, when a
   layout needs it, and stays centred on the same middle. */
.frame { max-width: calc(var(--measure) + var(--gutter) + 4rem); margin: 0 auto; padding: 0 1.25rem; }
header.frame { padding-top: 1.5rem; padding-bottom: 1.5rem; }
footer.frame { padding-bottom: 3rem; }
.page { max-width: calc(var(--measure) + var(--gutter) + 4rem); margin: 0 auto; padding: 0 1.25rem; }
.page--wide { max-width: 90rem; }
.manline { display: flex; justify-content: space-between; gap: 1ch;
	font: 0.75rem/1.4 var(--mono); color: var(--muted); text-transform: uppercase; }
.manline > span:nth-child(2) { text-align: center; }
.manline--head { border-bottom: 1px solid var(--rule); padding-bottom: 0.6rem; }
.manline--foot { border-top: 1px solid var(--rule); padding-top: 0.6rem; margin-top: 3rem; }
.manline a { color: inherit; }
/* Always two lines, at any width: the wordmark alone, full width, then a
   second line holding the navigation (left) and the language switcher
   (right). .bar is a plain block: the wordmark (a block h1) and .bar-nav
   (a block div) stack on their own lines by themselves. */
.bar { margin: 1.5rem 0 0.3rem; }
/* The navigation and the language switcher share this one row, the
   switcher at its far right (nowrap: the pair never splits into two
   rows); .nav still wraps its own links onto more than one line if it
   must, rather than pushing the switcher down. */
.bar-nav { display: flex; flex-wrap: nowrap; justify-content: space-between;
	align-items: baseline; gap: 0.5rem 2rem; margin-top: 0.5rem; }
.wordmark { font: 700 1.5rem/1.2 var(--mono); text-transform: lowercase; margin: 0;
	overflow-wrap: anywhere; }
.wordmark a { color: inherit; text-decoration: none; }
.wordmark a:hover { text-decoration: underline; }
.wordmark .tilde { color: var(--accent); }
.wordmark .slash { color: var(--muted); font-weight: 400; }
/* A zero-width space after each separator: a place to break the path
   (~/fixture docs/documentation/Getting started) without scrolling the
   page sideways at narrow widths. */
.wordmark .slash::after { content: "\200B"; }
.wordmark .here { text-transform: none; }
.wordmark .cursor { display: inline-block; width: 0.55em; height: 1em; margin-left: 0.1em;
	vertical-align: -0.12em; background: var(--accent); animation: blink 1.2s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
/* The accent is the theme's one colour: a link needs its underline to
   read as a link even here; the current page still stands out by
   weight. */
.nav { font: 0.9rem var(--mono); flex: 1 1 auto; min-width: 0; }
.nav a[aria-current="page"] { color: var(--text); font-weight: 700; text-decoration: none; }
.nav .sep { color: var(--muted); padding: 0 0.6ch; }
.languages { font: 0.85rem var(--mono); flex: 0 0 auto; }
.languages a { margin-left: 1ch; }
.languages a[aria-current="page"] { color: var(--text); font-weight: 700; text-decoration: none; }
.tagline { font: 0.85rem var(--mono); color: var(--muted); margin: 0; }
.tagline:empty, .home-tagline:empty { display: none; }
.to-top { font: 0.8rem var(--mono); text-align: right; margin: 3rem 0 0; }
@media (max-width: 40rem) {
	.wordmark { font-size: 1.15rem; }
}

/* --- sections: the name in a gutter, like a man page ----------------------- */

.s { display: grid; grid-template-columns: var(--gutter) minmax(0, var(--measure));
	gap: 0 1.5rem; margin: 0 0 2.5rem; }
.s > h2 { font: 700 0.8rem/1.6 var(--mono); text-transform: uppercase; letter-spacing: 0.12em;
	color: var(--muted); margin: 0.15rem 0 0; overflow-wrap: anywhere; }
.b > :last-child { margin-bottom: 0; }
.b.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 1rem; align-items: start; }
.members, .posts, .upcoming, .past, .next-event { min-width: 0; }   /* list markers */
@media (max-width: 40rem) {
	.s { grid-template-columns: minmax(0, 1fr); }
	.s > h2 { margin-bottom: 0.6rem; }
}

.mono { font-family: var(--mono); font-size: 0.92em; }
.small { font-size: 0.85rem; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
.warn { color: var(--warning); }
.empty { font: 0.9rem var(--mono); color: var(--muted); }
u.u { text-decoration: underline dotted; text-underline-offset: 0.2em; }
del { color: var(--muted); }

/* Boxes. An inset frames a live example (the page writes its label). */
.inset { border: 1px dashed var(--muted); padding: 1rem 1.2rem; margin: 0 0 1.1rem; }
.inset > :last-child { margin-bottom: 0; }
/* Info/warning/error are told apart by more than colour: each has its
   own border style too (solid/dashed/double). */
.callout { --kind: var(--info); border-left: 3px solid var(--kind); background: var(--surface);
	padding: 0.8rem 1.1rem; margin: 0 0 1.1rem; }
.callout--info { --kind: var(--info); }
.callout--warning { --kind: var(--warning); border-left-style: dashed; }
.callout--error { --kind: var(--error); border-left-style: double; border-left-width: 5px; }
.callout > :last-child { margin-bottom: 0; }
.callout-label { font: 700 0.75rem var(--mono); letter-spacing: 0.08em; color: var(--kind);
	margin: 0 0 0.3rem; }

/* Tables: the wrapper scrolls, the page does not. */
.table { overflow-x: auto; margin: 0 0 1.1rem; scrollbar-color: var(--muted) var(--surface); scrollbar-width: thin; }
table { border-collapse: collapse; font-size: 0.95rem; }
th, td { text-align: left; vertical-align: top; padding: 0.35rem 2ch 0.35rem 0;
	border-bottom: 1px solid var(--rule); }
th { font: 700 0.8rem var(--mono); color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
th.center, td.center { text-align: center; }
th.right, td.right { text-align: right; }

.tasks { list-style: none; padding-left: 0; }
.task { display: inline-block; width: 0.85em; height: 0.85em; border: 1px solid var(--muted);
	margin-right: 0.8ch; vertical-align: -0.05em; }
.task--done { background: var(--accent); border-color: var(--accent); }
.task--todo { background: transparent; }
.figure { margin: 1.5rem 0; }
.figure img { display: block; }
.figure figcaption { font-size: 0.85rem; color: var(--muted); margin-top: 0.4rem; }
.toc { font: 0.9rem var(--mono); border-left: 1px solid var(--rule); padding-left: 1rem; margin: 0 0 1.5rem; }
.toc-label { cursor: pointer; color: var(--muted); font-weight: 700; text-transform: uppercase;
	letter-spacing: 0.08em; font-size: 0.75rem; }
.toc ol { margin: 0.5rem 0 0; padding-left: 3ch; }

/* --- entries and cards ----------------------------------------------------- */

.entry { border-top: 1px solid var(--rule); padding: 1.1rem 0; }
.entry:first-child { border-top: 0; padding-top: 0; }
.entry h3 { font: 700 1rem/1.4 var(--mono); margin: 0 0 0.35rem; }
.entry > :last-child { margin-bottom: 0; }
.entry--link { position: relative; }
.entry--link h3 a { text-decoration: none; }
.entry--link h3 a::after { content: ""; position: absolute; inset: 0; }
.entry--link:hover h3 a { text-decoration: underline; }
.entry--next h3 { color: var(--accent); }
.entry--full h3 { color: var(--muted); }
.entry--group { margin-top: 1.5rem; }
/* A live example of a block construct: `### Rendered {example}`, the
   construct indented under it (an inset holds paragraphs only). */
.b .entry--example { border: 1px dashed var(--muted); padding: 0.9rem 1.2rem; margin: 0 0 1.1rem; }
.entry--example h3 { font: 700 0.72rem var(--mono); color: var(--muted); text-transform: uppercase;
	letter-spacing: 0.1em; }
.b.grid .entry { border: 1px solid var(--rule); padding: 1rem 1.1rem; background: var(--bg); }
.b.grid .entry--link:hover { border-color: var(--accent); }
.meta { display: flex; flex-wrap: wrap; gap: 0.2rem 1ch; font: 0.8rem var(--mono);
	color: var(--muted); margin: 0 0 0.6rem; }
.meta > span + span:not(.tag)::before { content: "\00B7\00A0"; }
.tag { border: 1px solid var(--rule); padding: 0 0.6ch; }
.tag--next { color: var(--accent); border-color: var(--accent); }
.tag--full { color: var(--warning); border-color: var(--warning); }
.profiles { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; }
.profiles a { position: relative; z-index: 1; }
.icon { width: 1.1rem; height: 1.1rem; fill: currentColor; vertical-align: -0.15em; }

/* --- code ------------------------------------------------------------------ */

code, pre { font-family: var(--mono); font-size: 0.875rem; font-variant-ligatures: none; }
:not(pre) > code { background: var(--surface); padding: 0.05em 0.35ch; border-radius: 2px; }
/* scrollbar-color: a themed track/thumb instead of the platform's default
   (often white), so a scrolling code block never shows a pale band. */
pre { background: var(--surface); padding: 0.9rem 1rem; margin: 0 0 1.1rem; overflow-x: auto;
	line-height: 1.55; tab-size: 4; scrollbar-color: var(--muted) var(--surface); scrollbar-width: thin; }
/* Room for the language label and the copy button, so neither ever
   overlaps the code's first line. */
pre.code { position: relative; padding-top: 1.9rem; }
pre.code[data-lang]::before { content: attr(data-lang); position: absolute; top: 0.55rem; right: 0.75rem;
	font-size: 0.72rem; color: var(--muted); }
/* Mostly monochrome: weight, italics and the muted grey tell most of a
   highlighted block apart; the accent (the theme's one colour) still
   marks a keyword or a type, where it helps most. */
.hl-k, .hl-t { font-weight: 700; color: var(--accent); }
.hl-b, .hl-n { font-weight: 700; }
.hl-c { color: var(--muted); font-style: italic; }
.hl-s, .hl-v, .hl-gi, .hl-p, .hl-gh { color: var(--muted); }
.hl-gd { color: var(--muted); text-decoration: line-through; }

/* The copy button (code.js): the block is wrapped in .code-box. */
.code-box { position: relative; margin: 0 0 1.1rem; }
.code-box > pre.code { position: static; margin: 0; }
.code-copy { position: absolute; top: 0.3rem; right: 0.4rem; font: 0.75rem var(--mono);
	color: var(--text); background: var(--bg); border: 1px solid var(--rule); border-radius: 2px;
	padding: 0.1rem 0.8ch; cursor: pointer; opacity: 0; transition: opacity 0.15s; }
.code-box:hover .code-copy, .code-box:focus-within .code-copy { opacity: 1; }
@media (hover: none) {
	.code-copy { opacity: 1; }
	.code-box > pre.code[data-lang]::before { right: 6rem; }
}

/* --- a collection's order: the sidebar, previous and next ------------------ */

.collection-nav { font: 0.88rem/1.5 var(--mono); }
.collection-nav ul { list-style: none; padding-left: 0; margin: 0; }
.collection-nav li { margin: 0.2rem 0; }
.collection-nav a { text-decoration: none; color: var(--text); display: block;
	padding: 0.1rem 0 0.1rem 1ch; border-left: 2px solid transparent; }
.collection-nav a:hover { color: var(--accent); }
.collection-nav a[aria-current="page"] { color: var(--accent); font-weight: 700;
	border-left-color: var(--accent); }
.collection-group { margin-top: 1rem; }
.collection-group-label { display: block; font: 700 0.72rem var(--mono); color: var(--muted);
	text-transform: uppercase; letter-spacing: 0.1em; margin: 0 0 0.3rem; }
/* A folder of the manual (tilder 1.2, a recursive collection): its label,
   a link to the section's own page (a span when it has none), then its
   pages one step in. Only the section holding the page stays unfolded:
   every other one is a link away (one without its own page, a span, never
   folds). */
.collection-section { margin-top: 0.6rem; }
.collection-nav .collection-section-label { font-weight: 700; }
span.collection-section-label { display: block; padding: 0.1rem 0 0.1rem 1ch; color: var(--muted); }
.collection-section > ul { padding-left: 2ch; margin-top: 0.2rem; }
.collection-section--open > .collection-section-label:not([aria-current]) { color: var(--accent); }
.collection-section:not(.collection-section--open) > a.collection-section-label + ul { display: none; }
.pager { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
	border-top: 1px solid var(--rule); padding-top: 1rem; margin-top: 2.5rem; font-family: var(--mono); }
.pager:empty { display: none; }
.prev, .next { text-decoration: none; }
.prev:hover, .next:hover { text-decoration: underline; }
.next { margin-left: auto; text-align: right; }
.prev-label, .next-label { display: block; font-size: 0.75rem; color: var(--muted);
	text-transform: uppercase; letter-spacing: 0.08em; }

/* --- home: the landing page, airier ---------------------------------------- */

.page--home { max-width: 72rem; }
.home { font-size: 1.05rem; }
.home .s { grid-template-columns: minmax(0, 1fr); margin: 0 0 4rem; }
.home .s > h2 { margin-bottom: 1rem; }
.home-tagline { font: 700 clamp(2rem, 5vw, 3.4rem)/1.1 var(--sans); letter-spacing: -0.02em;
	max-width: 20ch; margin: 1rem 0 1.5rem; }
.home > .s:first-of-type { margin-bottom: 5rem; }
.home > .s:first-of-type .b { font-size: clamp(1.1rem, 2.2vw, 1.35rem); color: var(--muted); max-width: 60ch; }
.home .b.grid { grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1.25rem; }
.home .b.grid > pre, .home .b.grid > .code-box { margin: 0; height: 100%; }
.home .b.grid .entry { padding: 1.4rem; }

/* --- doc: sidebar, text, contents ------------------------------------------ */

.doc { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 0 3rem; align-items: start; }
.doc-side { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto;
	padding-right: 0.5rem; }
.doc-side > summary { display: none; }
.doc-main { min-width: 0; }
.doc-toc { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; }
.doc-toc-label { font: 700 0.72rem var(--mono); color: var(--muted); text-transform: uppercase;
	letter-spacing: 0.1em; margin: 0 0 0.5rem; }
.doc-toc .toc { border: 0; padding: 0; margin: 0; }
.doc-toc .toc-label { display: none; }
.doc-toc .toc ol { margin: 0; padding-left: 0; list-style: none; }
.doc-toc .toc li { margin: 0.25rem 0; }
.doc-toc .toc a { text-decoration: none; color: var(--muted); }
.doc-toc .toc a:hover { color: var(--accent); }
@media (min-width: 60rem) {
	.doc--toc { grid-template-columns: 15rem minmax(0, 1fr) 13rem; }
}
/* Below 60rem the doc-main column is too narrow for the gutter and the
   text side by side (.s keeps a fixed 11ch name column): drop to one. */
@media (max-width: 60rem) {
	.doc-main .s { grid-template-columns: minmax(0, 1fr); }
	.doc-main .s > h2 { margin-bottom: 0.6rem; }
}
@media (max-width: 45rem) {
	.doc { display: block; }
	.doc-side { position: static; max-height: none; overflow: visible; padding: 0;
		border: 1px solid var(--rule); margin: 0 0 2rem; }
	.doc-side > summary { display: list-item; cursor: pointer; padding: 0.6rem 1rem;
		font: 700 0.8rem var(--mono); text-transform: uppercase; letter-spacing: 0.08em; }
	.doc-side[open] > summary { border-bottom: 1px solid var(--rule); }
	.doc-side > :not(summary) { margin: 1rem; }
}

/* --- search (search.js) ---------------------------------------------------- */

.doc-search { margin: 0 0 1.5rem; }
.doc-search-label { display: block; font: 700 0.72rem var(--mono); color: var(--muted);
	text-transform: uppercase; letter-spacing: 0.1em; margin: 0 0 0.3rem; }
.doc-search-input { width: 100%; font: 0.9rem var(--mono); color: var(--text); background: var(--bg);
	border: 1px solid var(--muted); border-radius: 2px; padding: 0.4rem 0.6rem; }
.doc-search-status { font: 0.75rem var(--mono); color: var(--muted); margin: 0.4rem 0 0; }
.doc-search-status:empty { display: none; }
.doc-search-results { list-style: none; padding: 0; margin: 0.4rem 0 0; font-size: 0.88rem; }
.doc-search-results li { margin: 0; }
.doc-search-results a { display: block; padding: 0.35rem 0.5rem; text-decoration: none;
	border-left: 2px solid transparent; }
.doc-search-results a span { display: block; color: var(--muted); font-size: 0.8rem; }
.doc-search-results [aria-selected="true"] a { border-left-color: var(--accent); background: var(--surface); }

/* --- motion ---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important;
		scroll-behavior: auto !important; }
}