/* baseline.css 1.7.0: the shared stylesheet of the project sites (the Atrium direction).
   Newsreader for text and headings, Public Sans for labels and navigation, JetBrains Mono for code,
   Dancing Script for the signature; the fonts are declared in fonts.css.
   Scale: perfect fourth (1.333) on a 1.1875rem base. No rules except the table header hairline.
   Colour comes only from the tokens in palettes.css and the family tokens below; the site class on <html>
   is the only per-site switch. Specification: docs/site-template-spec.md in jposluns/posluns_site. */

/* Family signature tokens (the link-preview cards): gold and silver, checked at 4.5:1 or better on every site background in each mode;
   the 3 ordering colours for aiqt are the text-safe accents of the green, orange and red sites from palettes.css. */
:root { --gold-rule: #d4a52a; --gold: #8a6a0a; --silver: #6a6a6a; --ord-progress: #3b752e; --ord-speed: #a25100; --ord-cost: #bc3732; }
/* Print tokens (from 1.7.0): paper and ink for matrix tables on paper, the same in both schemes (the print rules at the end). */
:root { --print-paper: #ffffff; --print-ink: #000000; }
/* Layout tokens: the page gutter, the hero logo column, the rail column, the label column of the document and
   region grids, and the footer's band, tile, logo and mark sizes. */
:root { --pad: clamp(1rem, 3vw, 3.2rem); --art: clamp(11rem, 22vw, 30rem); --railw: clamp(13rem, 13vw, 17rem); --label-col: 9rem; --band: 0.55rem; --tile: 3.4rem; --tile-logo: 2.75rem; --mark: 2rem; }
@media (prefers-color-scheme: dark) { :root:not([data-scheme="light"]) { --gold: #e6c15a; --silver: #cfcfcf; --ord-progress: #6faa62; --ord-speed: #e1791b; --ord-cost: #ef675c; } }
:root[data-scheme="dark"] { --gold: #e6c15a; --silver: #cfcfcf; --ord-progress: #6faa62; --ord-speed: #e1791b; --ord-cost: #ef675c; }
*, *::before, *::after { box-sizing: border-box; }
/* Hidden means hidden, whatever display a component gives the element: `.doc section` and `.doc article` are
   `display: contents`, which overrode the browser's own [hidden] rule and kept every section the install
   selector hid on screen (1.0.0 to 1.5.0). The older per-component [hidden] rules below are kept. */
[hidden] { display: none !important; }
:root { color-scheme: light dark; }
/* A forced scheme (the switch in the top bar, scheme.js) also sets the browser's own colours: scrollbars and form controls. */
:root[data-scheme="light"] { color-scheme: light; }
:root[data-scheme="dark"] { color-scheme: dark; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 1.25rem/1.6 "Newsreader", Georgia, "Times New Roman", serif;
  font-variant-numeric: oldstyle-nums proportional-nums;
  font-feature-settings: "kern", "liga";
  text-rendering: optimizeLegibility;
}
::selection { background: var(--selection); color: var(--text); }

/* Links */
a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: var(--rule-strong); }
a:hover { color: var(--link-hover); text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Skip link */
.skip { position: absolute; left: 1rem; top: -4rem; z-index: 50; background: var(--surface-raised); color: var(--text); padding: 0.6rem 1rem; border-radius: 0.3rem; font: 500 0.78rem/1 "Public Sans", system-ui, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; }
.skip:focus { top: 1rem; }

/* The label voice of the direction: tracked uppercase Public Sans */
.lbl, .label {
  font: 500 0.72rem/1.4 "Public Sans", system-ui, sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 0.6rem;
  font-variant-numeric: lining-nums tabular-nums;
}
.lbl.accent, .label.accent { color: var(--accent); }
.lbl.file { text-transform: none; letter-spacing: 0.06em; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.74rem; }
.lbl .n { font-family: "JetBrains Mono", ui-monospace, monospace; letter-spacing: 0.08em; }
.lbl a { color: inherit; text-decoration: none; }
.lbl a:hover { color: var(--text); }

/* Page container: the widest of the 3 directions */
.wrap { margin: 0; padding: 0 var(--pad); }

/* Masthead: no rule under it; the entrance field below gives it its edge. 2 columns: the wordmark and the site's
   page links on 1 row, right-aligned, GitHub last where the site has a public repository. Nothing wraps: when the
   row cannot hold the links it scrolls sideways, and a shadow at the scrolled edge (background-attachment: local,
   no script) shows that more links follow. Disclosure and Licence are not in the bar; the landing page's
   "About this project" line links them. The bar is positioned so that the visually hidden "(opens in a new tab)"
   span of the GitHub link is clipped inside the scrolling row instead of widening the page. From 1.6.0 a 3rd
   column holds the light and dark switch (button.scheme, scheme.js) after the links, outside the scrolling row,
   so it never scrolls away. The gap after the wordmark is its margin, not a column gap, so that the 3rd column
   takes no space when the switch is absent or hidden (no script, or a page on 1.5.1 markup). */
.mast { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "brand pages scheme"; align-items: center; column-gap: 0; padding: 1rem var(--pad) 0.9rem; }
/* The wordmark, in the style of the link-preview cards: bold name, gold .ai, gold rule beneath */
.brand { grid-area: brand; margin-right: clamp(1.2rem, 2.5vw, 2.5rem); display: inline-grid; gap: 0.3rem; color: var(--text); text-decoration: none; font: 700 clamp(1.6rem, 1.9vw, 2.2rem)/1 "Public Sans", system-ui, sans-serif; letter-spacing: -0.015em; padding: 0.35rem 0 0.1rem; white-space: nowrap; }
.brand .tld { color: var(--gold); }
.brand .rule { display: block; height: 3px; background: var(--gold-rule); border-radius: 2px; }
.brand:hover .name { color: var(--text); }
.nav { grid-area: pages; position: relative; display: flex; flex-wrap: nowrap; justify-content: flex-end; gap: 0 clamp(1rem, 1.6vw, 2rem); overflow-x: auto; scrollbar-width: thin; min-width: 0; font: 500 clamp(0.66rem, 0.45vw + 0.36rem, 0.74rem)/1 "Public Sans", system-ui, sans-serif; letter-spacing: 0.16em; text-transform: uppercase;
  background: linear-gradient(90deg, var(--bg) 40%, transparent) left / 2.4rem 100% no-repeat local, linear-gradient(270deg, var(--bg) 40%, transparent) right / 2.4rem 100% no-repeat local,
    linear-gradient(90deg, color-mix(in srgb, var(--rule-strong) 55%, transparent), transparent) left / 0.9rem 100% no-repeat scroll, linear-gradient(270deg, color-mix(in srgb, var(--rule-strong) 55%, transparent), transparent) right / 0.9rem 100% no-repeat scroll; }
.nav a { color: var(--text-muted); text-decoration: none; padding: 0.7rem 0; display: inline-block; white-space: nowrap; }
.nav a:hover { color: var(--text); }
.nav a[aria-current="page"] { color: var(--accent); }
/* The light and dark switch: a 24 px sun or moon glyph (inline SVG in the markup) in a 44 by 44 px target,
   --text-muted at rest and --text on hover, the standard focus ring. The glyph shows the scheme a press leads to:
   the moon while light shows, the sun while dark shows; aria-pressed carries the state. The negative right margin
   lines the glyph up with the gutter while the target reaches into it; the negative block margins keep the bar at
   its 1.5.1 height. */
.scheme { grid-area: scheme; position: relative; display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; margin: -0.25rem -0.625rem -0.25rem 0.6rem; padding: 0; border: 0; border-radius: 0.3rem; background: transparent; color: var(--text-muted); cursor: pointer; }
.scheme:hover { color: var(--text); }
.scheme svg { display: block; width: 1.5rem; height: 1.5rem; }
.scheme .sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-scheme="light"]) .scheme .sun { display: block; }
  :root:not([data-scheme="light"]) .scheme .moon { display: none; }
}
[data-scheme="dark"] .scheme .sun { display: block; }
[data-scheme="dark"] .scheme .moon { display: none; }

/* Hero: 1 section. The logo sits beside the title block, over a soft glow, at a size that supports the heading. */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) var(--art); grid-template-areas: "text art"; column-gap: clamp(2.5rem, 5vw, 6rem); align-items: center; padding: 1.2rem max(0px, calc(var(--art) * 0.5 - var(--pad))) 2.4rem 0; }
.hero-text { grid-area: text; container-type: inline-size; min-width: 0; }
.hero .lbl { grid-area: kicker; margin-bottom: 0.4rem; }
.hero .lbl.gold { color: var(--gold); }
.hero-art { grid-area: art; align-self: center; justify-self: end; width: 100%; aspect-ratio: 1; display: grid; place-items: center; background: radial-gradient(closest-side, var(--glow) 0%, var(--glow) 38%, transparent 100%); animation: field-in 400ms ease-out both; }
.hero-art img { width: 84%; height: auto; display: block; }
@keyframes field-in { from { opacity: 0; } to { opacity: 1; } }
/* The statement sits on 1 line whenever it fits the text column at 2.6rem or more (--sw is the statement's
   1-line width in em, measured per site and scheme); the size scales between the floor and 5rem to achieve that. Below
   the floor it breaks once, at the meaningful point: the emphasized part never splits, so a 1-sentence statement breaks
   before it and a 2-sentence statement breaks between the sentences. README: re-measure --sw when a statement changes (tools/measure.js). */
.statement { grid-area: title; font-weight: 300; font-size: clamp(2.6rem, 98cqw / var(--sw), 5rem); line-height: 1.06; letter-spacing: -0.015em; margin: 0 0 1rem; --sw: 20; }
.statement em { font-style: italic; font-weight: 300; color: var(--accent); white-space: nowrap; }
.site-secureconfig .statement { --sw: 13.712; } .site-opfiles .statement { --sw: 15.070; } .site-auditthis .statement { --sw: 12.562; }
.site-cleanlanguage .statement { --sw: 12.824; } .site-aiqt .statement { --sw: 19.868; } .site-grclibrary .statement { --sw: 13.069; }
/* The dark widths apply in system dark mode (sites never set data-scheme) and under a forced dark scheme. */
@media (prefers-color-scheme: dark) {
  .site-secureconfig:not([data-scheme="light"]) .statement { --sw: 14.612; } .site-opfiles:not([data-scheme="light"]) .statement { --sw: 16.070; } .site-auditthis:not([data-scheme="light"]) .statement { --sw: 13.337; }
  .site-cleanlanguage:not([data-scheme="light"]) .statement { --sw: 13.724; } .site-aiqt:not([data-scheme="light"]) .statement { --sw: 21.218; } .site-grclibrary:not([data-scheme="light"]) .statement { --sw: 13.894; }
}
.site-secureconfig[data-scheme="dark"] .statement { --sw: 14.612; } .site-opfiles[data-scheme="dark"] .statement { --sw: 16.070; } .site-auditthis[data-scheme="dark"] .statement { --sw: 13.337; }
.site-cleanlanguage[data-scheme="dark"] .statement { --sw: 13.724; } .site-aiqt[data-scheme="dark"] .statement { --sw: 21.218; } .site-grclibrary[data-scheme="dark"] .statement { --sw: 13.894; }
.hero .intro { grid-area: intro; font-size: clamp(1.35rem, 1.35vw, 1.8rem); line-height: 1.5; max-width: 68ch; margin: 0 0 1.4rem; }
.hero .intro .ordering { font-size: 1.2rem; margin: 0.6rem 0 0; }
.lead { font-size: 1.333rem; line-height: 1.5; max-width: 52ch; margin: 0 0 2rem; }
.start { grid-area: start; justify-self: start; display: inline-flex; align-items: baseline; gap: 1rem; font: 500 0.78rem/1 "Public Sans", system-ui, sans-serif; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text); text-decoration: none; border-bottom: 2px solid var(--brand); padding: 0.4rem 0 0.55rem; }
.start:hover { color: var(--text); }
.start .arrow { font-family: "Newsreader", serif; font-size: 1.2rem; color: var(--accent); transition: transform 150ms ease-out; display: inline-block; }
.start:hover .arrow { transform: translateX(0.25rem); }

/* Labelled regions: the label column at the left, content at the right.
   Used by the site plan, the family footer, the scope paragraph and every stand-alone block. */
.region { display: grid; grid-template-columns: var(--label-col) minmax(0, 1fr); gap: 0.4rem 2.5rem; padding: 0 0 2.6rem; align-items: start; }
.region > .lbl { padding-top: 0.5rem; }
.region.narrow > div { max-width: 72ch; }
.region p { margin: 0 0 1.1rem; }
.region p:last-child { margin-bottom: 0; }

/* Index lists: 2 columns, serif title, mono count or type at the right, no rules */
.plan { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 3rem; }
.plan.three { columns: 3; column-gap: 2.5rem; }
.plan li { break-inside: avoid; padding: 0.3rem 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: baseline; }
.plan li a { text-decoration: none; color: var(--text); }
.plan li a:hover { color: var(--link-hover); }
.plan li .n, .plan li .t { font: 400 0.82rem/1.8 "JetBrains Mono", ui-monospace, monospace; color: var(--text-muted); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.plan.one { columns: 1; }
.plan li small { display: block; font: 400 1rem/1.45 "Public Sans", system-ui, sans-serif; color: var(--text-muted); grid-column: 1 / -1; margin-top: 0; }
.plan.described li { padding: 0.35rem 0 1.15rem; row-gap: 0.05rem; }
.plan.described li a, .plan.described li .n { line-height: 1.35; }

/* Document page: label column, text column, contents rail */
.doc { display: grid; grid-template-columns: var(--label-col) minmax(0, 1fr) var(--railw); gap: 0 clamp(2rem, 3vw, 4rem); padding: 0.6rem 0 2rem; align-items: start; }
:is(.doc, .doc > section, .doc > article) > :is(p, h1, h2, h3, ul, ol.num, dl.record:not(.cols), blockquote, .callout, .download, details, .pair, .search) { max-width: 72ch; }
:is(.doc, .doc > section, .doc > article) > .steps { max-width: 84ch; }
.rail-logo { width: 100%; height: auto; display: block; margin: 0.3rem 0 1.2rem; }
:is(.doc, .doc > section, .doc > article) > * { grid-column: 2; min-width: 0; }
:is(.doc, .doc > section, .doc > article) > .lbl { grid-column: 1; padding-top: 0.55rem; margin: 0; }
:is(.doc, .doc > section, .doc > article) > .lbl.first { padding-top: 0.9rem; }
:is(.doc, .doc > section, .doc > article) > .rail { grid-column: 3; grid-row: 1 / span 200; position: sticky; top: 1.5rem; align-self: start; }
:is(.doc, .doc > section, .doc > article) > .wide { grid-column: 2; }
:is(.doc, .doc > section, .doc > article) > .full { grid-column: 1 / 4; }
.doc section, .doc article { display: contents; }
.doc h1 { font-weight: 300; font-size: 2.8rem; line-height: 1.1; margin: 0 0 0.5rem; letter-spacing: -0.012em; }
.doc h2 { font-weight: 400; font-size: 2rem; line-height: 1.18; margin: 2rem 0 0.7rem; }
.doc h3 { font-weight: 500; font-size: 1.45rem; line-height: 1.35; margin: 1.6rem 0 0.5rem; }
:is(.doc, .doc > section, .doc > article) > .lbl + h1, :is(.doc, .doc > section, .doc > article) > .lbl + h3 { margin-top: 0; }
:is(.doc, .doc > section, .doc > article) > .lbl + h2 { margin-top: 1.2rem; }
:is(.doc, .doc > section, .doc > article) > .lbl.sec { padding-top: 1.8rem; }
:is(.doc, .doc > section, .doc > article) > .lbl.blk { padding-top: 1.75rem; }
:is(.doc, .doc > section, .doc > article) > .lbl.first { padding-top: 0.9rem; }
:is(.doc, .doc > section, .doc > article) > .lbl + .tablewrap { margin-top: 0.4rem; }
:is(.doc, .doc > section, .doc > article) > .lbl + .tablewrap + * { margin-top: 0; }
:is(.doc, .doc > section, .doc > article) > .lbl.blk + .tablewrap { margin-top: 1.35rem; }
:is(.doc, .doc > section, .doc > article) > .lbl + .picker { margin-top: 1.1rem; }
:is(.doc, .doc > section, .doc > article) > .lbl + .chips { margin-top: 1.4rem; }
:is(.doc, .doc > section, .doc > article) > .lbl + .search { margin-top: 1.2rem; }
:is(.doc, .doc > section, .doc > article) > .side { grid-column: 1; grid-row: span 7; align-self: start; padding-top: 0.6rem; }
:is(.doc, .doc > section, .doc > article) > .side dd { font-size: 0.9rem; }
:is(.doc, .doc > section, .doc > article) > .lead + .side { margin-top: 0; }
.lbl.size { color: var(--text-muted); margin: 0.3rem 0 0.9rem; }
.ordering { font: 400 1.777rem/1.25 "Newsreader", serif; margin: 0 0 1rem; letter-spacing: -0.005em; }
.ordering .tier { color: var(--gold); }
.ordering .p { color: var(--ord-progress); }
.ordering .s { color: var(--ord-speed); }
.ordering .c { color: var(--ord-cost); }
.hero .intro .ordering { display: block; font: 400 1.25rem/1.35 "Newsreader", serif; }
.callout .ordering { font-size: 1.5rem; }
.region ol.num { padding-left: 0; list-style: none; counter-reset: c; margin: 0; }
.region ol.num > li { counter-increment: c; position: relative; padding-left: 2.6rem; margin-bottom: 0.9rem; }
.region ol.num > li::before { content: counter(c); position: absolute; left: 0; top: 0.12rem; font: 400 0.95rem/1.6 "Newsreader", serif; color: var(--accent); font-variant-numeric: lining-nums; }
:is(.doc, .doc > section, .doc > article) > details { margin: 0 0 1.1rem; }
details summary { cursor: pointer; font-weight: 600; padding: 0.4rem 0; }
details p, details ul { margin: 0.4rem 0 0.8rem; }
details ul ul { margin: 0.2rem 0 0.4rem; }
.doc p, .doc ul, .doc ol, .doc dl { margin: 0 0 1.1rem; }
.doc .meta { font: 400 1.05rem/1.5 "Public Sans", system-ui, sans-serif; color: var(--text-muted); margin: 0 0 1.6rem; max-width: 66ch; }
.doc .lead { margin-bottom: 1.4rem; }
.doc ul { padding-left: 1.2rem; }
.doc li { margin-bottom: 0.45rem; }
.doc ol.num { padding-left: 0; list-style: none; counter-reset: c; }
.doc ol.num > li { counter-increment: c; position: relative; padding-left: 2.6rem; margin-bottom: 0.9rem; }
.doc ol.num > li::before { content: counter(c); position: absolute; left: 0; top: 0.12rem; font: 400 0.95rem/1.6 "Newsreader", serif; color: var(--accent); font-variant-numeric: lining-nums; }
.doc ol.num ol { list-style: lower-alpha; padding-left: 1.4rem; margin-top: 0.5rem; }
.doc blockquote { margin: 0 0 1.1rem; padding-left: 1.4rem; font-style: italic; color: var(--text-muted); }

/* Contents rail */
.rail { font: 400 0.95rem/1.5 "Public Sans", system-ui, sans-serif; --logo-inset: 0.115; }
/* The rail text starts under the visible left edge of the logo artwork: each SVG's internal left margin, measured as a fraction of its box (README, tools/measure.js). */
.site-opfiles .rail { --logo-inset: 0.1225; } .site-auditthis .rail { --logo-inset: 0.2075; } .site-cleanlanguage .rail { --logo-inset: 0.185; } .site-aiqt .rail { --logo-inset: 0.0975; } .site-grclibrary .rail { --logo-inset: 0.115; }
.rail .lbl { margin: 0.6rem 0 0.8rem; }
.rail ol, .rail ul { list-style: none; margin: 0; padding: 0; counter-reset: r; }
.rail li { margin: 0; }
.rail li a { display: grid; grid-template-columns: 1.4rem 1fr; gap: 0.2rem; color: var(--text-muted); text-decoration: none; padding: 0.22rem 0; }
.rail ol li a::before { counter-increment: r; content: counter(r); font: 400 0.8rem/1.6 "Newsreader", serif; color: var(--accent); font-variant-numeric: lining-nums; }
.rail ul li a { grid-template-columns: 1fr; }
.rail li a:hover { color: var(--text); }
/* rail.js marks the section on screen with aria-current="location"; the "true" form is kept for pages built on 1.2.1 and earlier. */
.rail li a[aria-current="location"], .rail li a[aria-current="true"] { color: var(--accent); }
.rail > .lbl, .rail > ol, .rail > ul { margin-left: calc(100% * var(--logo-inset)); }

/* Left-rail page (from 1.5.0): .doc.left-rail replaces the label column and the right rail with 1 side list on the
   left, .lrail, so the main column gains their width (for a wide table). The list stays in view while the page
   scrolls, at the right rail's offset and in its type; labels sit above their content, as at 1000 px and below.
   rail.js reads only nav.rail, so it leaves the left list alone. */
.doc.left-rail { grid-template-columns: var(--railw) minmax(0, 1fr); }
:is(.doc.left-rail, .doc.left-rail > section, .doc.left-rail > article) > *,
:is(.doc.left-rail, .doc.left-rail > section, .doc.left-rail > article) > .lbl,
:is(.doc.left-rail, .doc.left-rail > section, .doc.left-rail > article) > .wide,
:is(.doc.left-rail, .doc.left-rail > section, .doc.left-rail > article) > .next { grid-column: 2; }
:is(.doc.left-rail, .doc.left-rail > section, .doc.left-rail > article) > .full { grid-column: 1 / 3; }
:is(.doc.left-rail, .doc.left-rail > section, .doc.left-rail > article) > .lbl,
:is(.doc.left-rail, .doc.left-rail > section, .doc.left-rail > article) > .lbl.sec,
:is(.doc.left-rail, .doc.left-rail > section, .doc.left-rail > article) > .lbl.blk { padding-top: 1.4rem; margin-bottom: 0.4rem; }
:is(.doc.left-rail, .doc.left-rail > section, .doc.left-rail > article) > .lbl.first { padding-top: 0.9rem; }
:is(.doc.left-rail, .doc.left-rail > section, .doc.left-rail > article) > .lbl + h2 { margin-top: 0; }
:is(.doc.left-rail, .doc.left-rail > section, .doc.left-rail > article) > .lbl.blk + .tablewrap { margin-top: 0.2rem; }
.doc.left-rail > .lrail { grid-column: 1; grid-row: 1 / span 200; align-self: stretch; font: 400 0.95rem/1.5 "Public Sans", system-ui, sans-serif; --logo-inset: 0.115; }
.site-opfiles .lrail { --logo-inset: 0.1225; } .site-auditthis .lrail { --logo-inset: 0.2075; } .site-cleanlanguage .lrail { --logo-inset: 0.185; } .site-aiqt .lrail { --logo-inset: 0.0975; } .site-grclibrary .lrail { --logo-inset: 0.115; }
.lrail > nav { position: sticky; top: 1.5rem; max-height: calc(100vh - 3rem); overflow-y: auto; padding-left: calc(100% * var(--logo-inset)); }
.lrail .lbl { margin: 0.6rem 0 0.8rem; }
.lrail ul { list-style: none; margin: 0; padding: 0; }
.lrail li { margin: 0; }
.lrail li a, .lrail li button { display: block; width: 100%; text-align: left; font: inherit; color: var(--text-muted); text-decoration: none; padding: 0.22rem 0; background: transparent; border: 0; cursor: pointer; }
.lrail li a:hover, .lrail li button:hover { color: var(--text); }
.lrail li [aria-current="true"], .lrail li [aria-pressed="true"] { color: var(--accent); font-weight: 600; }

/* Callouts: no border, label in the label column */
.callout { background: var(--callout-bg); padding: 1.2rem 1.4rem; margin: 0.4rem 0 1.6rem; border-radius: 0.3rem; font-size: 1.15rem; line-height: 1.55; }
.callout.rule { box-shadow: inset 4px 0 0 var(--brand); }
.callout p { margin: 0 0 0.8rem; }
.callout p:last-child, .callout ul:last-child, .callout ol:last-child { margin-bottom: 0; }

/* Code and prompt blocks */
pre, .code { font: 400 0.95rem/1.55 "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--code-bg); color: var(--text); padding: 1.3rem 1.4rem; border-radius: 0.3rem; margin: 0.4rem 0 1.6rem; position: relative; white-space: pre-wrap; overflow-wrap: anywhere; font-variant-numeric: lining-nums tabular-nums; }
pre.hascopy { padding-top: 3.2rem; }
code { font: 400 0.9em/1.4 "JetBrains Mono", ui-monospace, monospace; background: var(--code-bg); padding: 0.1em 0.35em; border-radius: 0.2rem; overflow-wrap: anywhere; }
pre code { background: none; padding: 0; font-size: inherit; }
.copy, .btn { position: absolute; top: 0.8rem; right: 0.8rem; font: 500 0.7rem/1 "Public Sans", system-ui, sans-serif; letter-spacing: 0.16em; text-transform: uppercase; background: transparent; color: var(--text-muted); border: 1px solid var(--rule-strong); border-radius: 999px; padding: 0.55rem 0.9rem; cursor: pointer; }
.copy:hover, .btn:hover { color: var(--text); border-color: var(--text); }
.copy[hidden] { display: none; }
.btn.inline { position: static; display: inline-block; text-decoration: none; margin: 0 0.6rem 0.6rem 0; }
.btn.inline:hover { color: var(--text); }
.code-note { font: 400 0.95rem/1.5 "Public Sans", system-ui, sans-serif; color: var(--text-muted); margin: -0.8rem 0 1.6rem; }
.prompt-block { max-height: 36rem; overflow: auto; }
/* The flowing variant: the whole text in the page flow, no cap and no inner scroll, for a portable text the reader reads in place. */
.prompt-flow { max-height: none; overflow: visible; }

/* Tables: header hairline only, tracked header, 0.6rem row padding. A table wider than its wrapper scrolls inside it;
   a long token wraps inside its own cell only in a fixed-layout table (table.fixed with colgroup widths). */
/* position: relative makes the wrapper the containing block of visually hidden text (.vh) inside cells, so that
   text is clipped by the wrapper and cannot widen the page (from 1.5.0). */
.tablewrap { position: relative; overflow-x: auto; margin: 0.4rem 0 1.6rem; -webkit-overflow-scrolling: touch; }
.tablewrap:focus-visible { outline-offset: 4px; }
table { border-collapse: collapse; width: 100%; font-size: 1.05rem; line-height: 1.45; font-variant-numeric: lining-nums tabular-nums; }
th { text-align: left; font: 500 0.68rem/1.4 "Public Sans", system-ui, sans-serif; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); padding: 0 1.2rem 0.6rem 0; border-bottom: 1px solid var(--rule-strong); vertical-align: bottom; white-space: nowrap; }
td { padding: 0.6rem 1.2rem 0.6rem 0; vertical-align: top; overflow-wrap: break-word; }
td code { white-space: normal; overflow-wrap: break-word; }
td.id code { white-space: nowrap; }
table.fixed { table-layout: fixed; min-width: 56rem; }
table.fixed th { white-space: normal; }
/* Column widths for fixed tables: col.w<N> for N in steps of 5, plus the 5 widths the framework registry uses. */
.fixed col.w5 { width: 5%; } .fixed col.w10 { width: 10%; } .fixed col.w15 { width: 15%; } .fixed col.w20 { width: 20%; } .fixed col.w25 { width: 25%; } .fixed col.w30 { width: 30%; } .fixed col.w35 { width: 35%; } .fixed col.w40 { width: 40%; } .fixed col.w45 { width: 45%; } .fixed col.w50 { width: 50%; } .fixed col.w55 { width: 55%; } .fixed col.w60 { width: 60%; } .fixed col.w65 { width: 65%; } .fixed col.w70 { width: 70%; } .fixed col.w75 { width: 75%; } .fixed col.w80 { width: 80%; } .fixed col.w85 { width: 85%; } .fixed col.w90 { width: 90%; } .fixed col.w95 { width: 95%; }
.fixed col.w11 { width: 11%; } .fixed col.w14 { width: 14%; } .fixed col.w16 { width: 16%; } .fixed col.w17 { width: 17%; } .fixed col.w26 { width: 26%; }
th:last-child, td:last-child { padding-right: 0; }
/* Sticky tables (from 1.5.0). A sticky header can stick only to its nearest scroll container, and .tablewrap is one,
   so the wrapper of a sticky table is a bounded box that scrolls in both directions: the header row stays at the
   box's top while the reader scrolls inside it. Mark the wrapper .bounded; 1.4.1 markup (.tablewrap holding
   table.sticky) is bounded through :has() where the browser supports it, and elsewhere renders as in 1.4.1.
   The 2 selectors stay in separate rules, so a browser without :has() still applies the first.
   table.sticky-col keeps the first column at the box's left edge. Sticky cells take the page background, so
   scrolled content never shows through, and the top-left cell sits above both the header row and the column. */
.tablewrap.bounded { max-height: 75vh; max-height: 75svh; overflow: auto; overscroll-behavior: contain; }
.tablewrap:has(> table.sticky) { max-height: 75vh; max-height: 75svh; overflow: auto; overscroll-behavior: contain; }
.register .tablewrap.bounded { padding-top: 0; }
.register .tablewrap:has(> table.sticky) { padding-top: 0; }
table.sticky, table.sticky-col { border-collapse: separate; border-spacing: 0; }
.sticky thead th { position: sticky; top: 0; z-index: 2; background: var(--bg); }
table.sticky-col th:first-child, table.sticky-col td:first-child { position: sticky; left: 0; z-index: 1; background: var(--bg); }
table.sticky-col thead th:first-child { z-index: 3; }
table [hidden] { display: none; }
/* Matrix (from 1.5.0, matrix.js): a row header per row in the text voice, short identifiers and count links in the cells,
   the instrument's organization under each column heading. */
table.matrix tbody th { font: 600 1rem/1.45 "Public Sans", system-ui, sans-serif; letter-spacing: 0; text-transform: none; color: var(--text); padding: 0.6rem 1.2rem 0.6rem 0; border-bottom: 0; vertical-align: top; white-space: nowrap; }
table.matrix td { white-space: nowrap; }
table.matrix td code { white-space: nowrap; }
table.matrix th .org { display: block; font: 400 0.72rem/1.4 "JetBrains Mono", ui-monospace, monospace; letter-spacing: 0.02em; text-transform: none; margin-top: 0.15rem; }
table.matrix td a { margin-left: 0.4rem; }
.matrix-status { font: 400 0.85rem/1.5 "Public Sans", system-ui, sans-serif; color: var(--text-muted); margin: 0 0 0.6rem; min-height: 1.3rem; }
td .sub { display: block; font: 400 0.95rem/1.45 "Public Sans", system-ui, sans-serif; color: var(--text-muted); margin-top: 0.15rem; }
td.id, .mono { font: 400 0.8rem/1.6 "JetBrains Mono", ui-monospace, monospace; white-space: nowrap; }
td.num { text-align: right; font-variant-numeric: lining-nums tabular-nums; }
.tag { display: inline-block; font: 500 0.66rem/1 "Public Sans", system-ui, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); padding: 0.35rem 0.55rem; border: 1px solid var(--rule-strong); border-radius: 999px; white-space: nowrap; }
.tag.accent { color: var(--accent); border-color: var(--brand); }
.tag.fill { background: var(--surface-sunken); border-color: transparent; }

/* Large matrix tables (from 1.7.0, specification 7.34): opt-in classes and attributes; markup without them renders
   as in 1.6.1.
   Column widths in rem for fixed-layout tables: col.r6 to col.r24 (steps of 2) set --colw, and 1 rule applies it,
   so a table whose columns add up to more than the page grows past it and scrolls inside .tablewrap. A col without
   a width class leaves --colw unset, so its width stays auto, and the col.w<N> percentages outrank this rule. */
col.r6 { --colw: 6rem; } col.r8 { --colw: 8rem; } col.r10 { --colw: 10rem; } col.r12 { --colw: 12rem; } col.r14 { --colw: 14rem; }
col.r16 { --colw: 16rem; } col.r18 { --colw: 18rem; } col.r20 { --colw: 20rem; } col.r22 { --colw: 22rem; } col.r24 { --colw: 24rem; }
.fixed col { width: var(--colw); }
/* Wrapping cells: table.matrix.cells-wrap lets data cells wrap inside their column; headers keep their rules;
   td.nowrap (and td.id) stay on 1 line, for example a count-only column. */
td.nowrap, td.nowrap code { white-space: nowrap; }
table.matrix.cells-wrap td:not(.nowrap, .id), table.matrix.cells-wrap td:not(.nowrap, .id) code { white-space: normal; }
/* The capped pinned column, opt-in: table.sticky-col.pin-cap gives the first column a capped width, overridable with
   --pin-col (the pin-r<N> classes set it), and lets its labels wrap. table.sticky-col without pin-cap renders as in
   1.6.1. The default's 8rem minimum keeps half of a 320 px window for data. */
table.sticky-col.pin-cap :is(th, td):first-child { width: var(--pin-col, clamp(8rem, 30vw, 15rem)); white-space: normal; overflow-wrap: break-word; }
table.pin-cap.pin-r6 { --pin-col: 6rem; } table.pin-cap.pin-r8 { --pin-col: 8rem; }
table.pin-cap.pin-r10 { --pin-col: clamp(8rem, 30vw, 10rem); } table.pin-cap.pin-r12 { --pin-col: clamp(8rem, 30vw, 12rem); }
table.pin-cap.pin-r14 { --pin-col: clamp(8rem, 30vw, 14rem); } table.pin-cap.pin-r16 { --pin-col: clamp(8rem, 30vw, 16rem); }
table.pin-cap.pin-r18 { --pin-col: clamp(8rem, 30vw, 18rem); } table.pin-cap.pin-r20 { --pin-col: clamp(8rem, 30vw, 20rem); }
/* Row guides: table.zebra tints even body rows, table.rowhover the row under the pointer. The tints are opaque
   palette tokens and reach every cell of the row, sticky cells included, so a pinned cell keeps the row's colour
   and scrolled content never shows through. No transition. */
table.zebra tbody tr:nth-child(even) > * { background: var(--row-tint); }
table.rowhover tbody tr:hover > * { background: var(--row-hover); }
/* Column highlight (matrix.js, data-col-highlight on the table): every cell of the hovered or focused column. */
table.matrix tr > :is(th, td).colhl { background: var(--row-hover); }
/* An empty cell: the word stays in the cell, centred, in muted text (4.5:1 on every surface and row tint). */
table td.na { color: var(--text-muted); text-align: center; }
/* Heat shading: td[data-heat="0"] to "4" in a matrix, 5 steps per site and scheme from palettes.css. The count stays
   printed; the cell's own text is --text (links keep --link), the colours each step is checked against. A heat
   cell keeps its step under the row and column tints. */
table.matrix tbody tr > td[data-heat], table.matrix tbody tr > td[data-heat] :is(.sub, .n) { color: var(--text); }
table.matrix tbody tr > td[data-heat="0"], .tag[data-heat="0"] { background: var(--heat-0); }
table.matrix tbody tr > td[data-heat="1"], .tag[data-heat="1"] { background: var(--heat-1); }
table.matrix tbody tr > td[data-heat="2"], .tag[data-heat="2"] { background: var(--heat-2); }
table.matrix tbody tr > td[data-heat="3"], .tag[data-heat="3"] { background: var(--heat-3); }
table.matrix tbody tr > td[data-heat="4"], .tag[data-heat="4"] { background: var(--heat-4); }
/* The heat legend: <ul class="chips heat-legend"> of .tag swatches, each with its step's words. */
ul.chips.heat-legend { align-items: center; padding-left: 0; }
.heat-legend .tag { color: var(--text); border-color: var(--rule-strong); }
/* Rotated column headers: th.rot sets the header text vertically, read from the bottom up, capped at 11rem (it
   wraps to a 2nd line beyond that). The text is unchanged, so screen readers read it as written. */
table th.rot { writing-mode: vertical-rl; white-space: normal; max-height: 11rem; text-align: left; vertical-align: bottom; padding: 0.6rem 0.4rem 0.6rem 0; }
@supports (writing-mode: sideways-lr) { table th.rot { writing-mode: sideways-lr; } }
table.matrix th.rot .org, table.matrix th.rot .grp { margin: 0 0 0 0.15rem; }
/* Column groups: a tag line naming the group (.grp) under the heading and a 3px accent under the header cell
   (th[data-grp="1"] to "6", the family's 6 hues made text-safe on each site). The group is named in text; the
   colour only reinforces it. */
table.matrix th .grp { display: block; font: 600 0.62rem/1.4 "Public Sans", system-ui, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; margin-top: 0.2rem; }
table.matrix thead th[data-grp="1"] { border-bottom: 3px solid var(--grp-1); } table.matrix thead th[data-grp="1"] .grp { color: var(--grp-1); }
table.matrix thead th[data-grp="2"] { border-bottom: 3px solid var(--grp-2); } table.matrix thead th[data-grp="2"] .grp { color: var(--grp-2); }
table.matrix thead th[data-grp="3"] { border-bottom: 3px solid var(--grp-3); } table.matrix thead th[data-grp="3"] .grp { color: var(--grp-3); }
table.matrix thead th[data-grp="4"] { border-bottom: 3px solid var(--grp-4); } table.matrix thead th[data-grp="4"] .grp { color: var(--grp-4); }
table.matrix thead th[data-grp="5"] { border-bottom: 3px solid var(--grp-5); } table.matrix thead th[data-grp="5"] .grp { color: var(--grp-5); }
table.matrix thead th[data-grp="6"] { border-bottom: 3px solid var(--grp-6); } table.matrix thead th[data-grp="6"] .grp { color: var(--grp-6); }
/* Column toggles (matrix.js): groups of chips as buttons, hidden until the script reveals them. */
.matrix-toggles { margin: 0 0 0.8rem; }
.matrix-toggles .lbl { margin: 0 0 0.4rem; }
.matrix-toggles .chips { margin: 0 0 0.8rem; }

/* Definition lists: tracked dt, serif dd */
dl.record { margin: 0; }
dl.record dt { font: 500 0.68rem/1.4 "Public Sans", system-ui, sans-serif; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 0.15rem; }
dl.record dd { margin: 0 0 0.9rem; font-size: 1.05rem; line-height: 1.45; }
dl.record dd:last-child { margin-bottom: 0; }
dl.record.cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0.6rem 2rem; }
dl.record.cols div { break-inside: avoid; }

/* Before and after */
.pair { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 0.4rem 0 1.6rem; }
.pair > div { padding: 1.2rem 1.4rem; border-radius: 0.3rem; font-size: 1.15rem; line-height: 1.5; }
.pair > div p { margin: 0; }
.pair .before { background: var(--surface-sunken); }
.pair .after { background: var(--surface-raised); }
.pair .lbl { margin-bottom: 0.5rem; }
.pair .after .lbl { color: var(--accent); }

/* Download and checksum block */
.download { margin: 0.4rem 0 1.6rem; }
.download .file { font-size: 1.333rem; line-height: 1.4; }
.download .file a { text-decoration-color: var(--brand); text-decoration-thickness: 2px; }
.download .size { margin: 0.3rem 0 0.9rem; }
.download code.sum { display: block; background: var(--code-bg); padding: 0.9rem 1rem; border-radius: 0.3rem; font-size: 0.85rem; overflow-wrap: anywhere; white-space: normal; margin: 0 0 0.9rem; }
.download pre { margin: 0; font-size: 0.8rem; padding: 0.9rem 1rem; }

/* Install selector: 6 tracked labels in a row */
.picker { display: flex; flex-wrap: wrap; gap: 0.4rem 1.8rem; margin: 0.4rem 0 1.4rem; padding: 0; list-style: none; }
.picker a { display: inline-block; font: 500 0.74rem/1 "Public Sans", system-ui, sans-serif; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); text-decoration: none; padding: 0.7rem 0; border-bottom: 1px solid transparent; }
.picker a:hover { color: var(--text); }
.picker a[aria-current="true"] { color: var(--accent); border-bottom-color: var(--brand); border-bottom-width: 2px; }
.picker-reset { position: static; margin: 0 0 1.6rem; }
.picker-reset[hidden] { display: none; }
.verified { font: 400 0.95rem/1.5 "Public Sans", system-ui, sans-serif; color: var(--text-muted); margin: -0.4rem 0 1rem; }

/* Search: progressive enhancement, all content visible without script */
.search { margin: 0.4rem 0 1.6rem; }
.search label { display: block; }
.search input { width: 100%; max-width: 40rem; font: 400 1.1875rem/1.4 "Newsreader", serif; padding: 0.7rem 1rem; border: 1px solid var(--rule-strong); border-radius: 0.3rem; background: var(--surface-raised); color: var(--text); }
.search input::placeholder { color: var(--text-muted); opacity: 1; }
.search .status { font: 400 0.85rem/1.5 "Public Sans", system-ui, sans-serif; color: var(--text-muted); margin: 0.6rem 0 0; min-height: 1.3rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0 0 1.6rem; padding: 0; }
.chips a { display: inline-block; font: 500 0.7rem/1 "Public Sans", system-ui, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); text-decoration: none; padding: 0.55rem 0.8rem; border: 1px solid var(--rule-strong); border-radius: 999px; }
.chips a:hover { color: var(--text); border-color: var(--text); }
.chips a .n, .chips button .n { font-family: "JetBrains Mono", ui-monospace, monospace; letter-spacing: 0.04em; margin-left: 0.4rem; }
/* Chips as buttons, and the chosen chip (from 1.5.0): search.js marks an active facet with aria-pressed="true";
   matrix.js marks the chosen preset with aria-pressed="true" on a button or aria-current="true" on a link.
   The chosen chip takes a 2px border in --accent, so the state does not rest on colour alone. */
.chips button { display: inline-block; font: 500 0.7rem/1 "Public Sans", system-ui, sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); background: transparent; padding: 0.55rem 0.8rem; border: 1px solid var(--rule-strong); border-radius: 999px; cursor: pointer; }
.chips button:hover { color: var(--text); border-color: var(--text); }
.chips [aria-pressed="true"], .chips [aria-current="true"] { color: var(--accent); border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.plan li[hidden] { display: none; }
/* A chip that would show no documents (from 1.7.0, search.js with data-filter-empty="disable"): aria-disabled="true",
   still focusable. A dashed border in place of the solid one and the not-allowed cursor, with no hover change; the
   text and border keep the chip's colours (--text-muted, --rule-strong), with no fading and no transition. */
.chips a[aria-disabled="true"], .chips button[aria-disabled="true"] { border-style: dashed; cursor: not-allowed; }
.chips a[aria-disabled="true"]:hover, .chips button[aria-disabled="true"]:hover { color: var(--text-muted); border-color: var(--rule-strong); }

/* Diagram: 3 rounded nodes, currentColor strokes, brand-coloured arrows */
.figure { margin: 0.4rem 0 1.6rem; }
.figure svg { width: 100%; height: auto; display: block; color: var(--text); font-family: "Public Sans", system-ui, sans-serif; }
.figure svg .node { fill: var(--surface-raised); stroke: currentColor; stroke-width: 1; }
.figure svg .arrow { stroke: var(--brand); stroke-width: 2; fill: none; }
.figure svg .head { fill: var(--brand); }
.figure svg .t { font-size: 11px; letter-spacing: 2.2px; text-transform: uppercase; fill: var(--text-muted); font-weight: 500; }
.figure svg .t.accent { fill: var(--accent); }
.figure svg .m { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12.5px; fill: var(--text); }
.figure svg .s { font-family: "Newsreader", serif; font-size: 14px; fill: var(--text); }
.figure .stack { display: none; }
.figure figcaption { font: 400 0.95rem/1.5 "Public Sans", system-ui, sans-serif; color: var(--text-muted); margin-top: 0.8rem; }

/* Source and view, side by side on wide screens */
.srcview { display: grid; grid-template-columns: 1fr; gap: 1rem; margin: 0.4rem 0 1.6rem; }
.srcview pre { margin: 0; }
.srcview .view { background: var(--surface-raised); border-radius: 0.3rem; padding: 1.3rem 1.4rem; font-size: 0.95rem; }
.srcview .view .gen { font: 400 0.78rem/1.5 "Public Sans", system-ui, sans-serif; color: var(--text-muted); margin: 0 0 0.8rem; }
.srcview .view h4 { font: 500 0.72rem/1.4 "Public Sans", system-ui, sans-serif; letter-spacing: 0.2em; text-transform: uppercase; margin: 0 0 0.6rem; color: var(--text); }
.srcview .view ul { margin: 0; padding: 0; list-style: none; }
.srcview .view li { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.srcview .lbl { margin-bottom: 0.5rem; }

/* The value paragraph of the landing page, and the "About this project" line beneath it: Disclosure, Licence,
   Privacy and Security as 1 line of links separated by middle dots. */
.region .value { max-width: 68ch; margin: 0; }
.region .about { margin: 0; font: 500 0.8rem/1.6 "Public Sans", system-ui, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.region .about a { color: var(--text-muted); text-decoration: none; }
.region .about a:hover { color: var(--text); }
.region .about .dot { padding: 0 0.5rem; }
/* From 1.7.0 the markup has 1 space after each dot, so the line breaks only after a dot; the dot's right padding
   gives up the space's width (0.36em: the space and its 0.12em tracking in Public Sans), so the gaps either side
   of a dot are equal. */
.region .about .dot { padding-right: calc(0.5rem - 0.36em); }
/* A safety net for pages still on the older markup, whose links and dots touch: it lets the line break inside a word, which happens
   only when nothing else fits (at 320 px the older line was 379 px wide). */
.region .about { overflow-wrap: anywhere; }

/* Family footer: 1 bar at the content width. The 6 project cards, current site first, on the rotated
   spectrum; then the GitHub, LinkedIn and ORCID tiles under a grey tail of the band; then the signature tile as the
   posluns.ca link. The footer is a size container, so the bar responds to its own width and never wraps:
   stage A (>= 1400 px of content width) full size; stage B (1040 to 1399) names kept, sizes scaled down;
   stage C (< 1040) names visually hidden, equal tiles that shrink to fit; the signature shrinks below 750,
   loses "A" and "Project" below 650, and shrinks again below 450. Below 600 the marks and the signature drop to a
   second line under the grey band (phones). The bar is contiguous: no gaps between tiles. */
.family { padding: 1.6rem var(--pad) 2.2rem; font: 400 0.9rem/1.4 "Public Sans", system-ui, sans-serif; color: var(--text-muted); container: footer / inline-size; }
.site-secureconfig .family { --tail-from: var(--rainbow-6); } .site-opfiles .family { --tail-from: var(--rainbow-1); } .site-auditthis .family { --tail-from: var(--rainbow-2); }
.site-cleanlanguage .family { --tail-from: var(--rainbow-3); } .site-aiqt .family { --tail-from: var(--rainbow-4); } .site-grclibrary .family { --tail-from: var(--rainbow-5); }
.family .bar { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 0; width: 100%; border-radius: 0.5rem; overflow: hidden; }
.family .cards, .family .tail { display: flex; flex-wrap: nowrap; list-style: none; margin: 0; padding: 0; min-width: 0; }
.family .cards { flex: 6 1 auto; gap: 0; }
.family .tail { flex: none; gap: 0; }
.family .slice, .family .tile { display: flex; min-width: 0; padding: var(--band) 0 0; }
.family .slice { flex: 1 1 auto; }
.family .sigtile { flex: none; }
.family .tail .tile-1 { background: linear-gradient(90deg, var(--tail-from) 0%, var(--band-grey) 20%); }
.family .tail .tile-2, .family .tail .tile-3, .family .sigtile { background: var(--band-grey); }
/* The first card starts on its own hue and the last ends on it, so the bar's ends and the grey tail take a clean colour. */
.family .slice-1:first-child { background: linear-gradient(90deg, var(--rainbow-1) 0%, var(--rainbow-1) 80%, var(--rainbow-join-1) 100%); } .family .slice-1:last-child { background: linear-gradient(90deg, var(--rainbow-join-6) 0%, var(--rainbow-1) 20%, var(--rainbow-1) 100%); }
.family .slice-2:first-child { background: linear-gradient(90deg, var(--rainbow-2) 0%, var(--rainbow-2) 80%, var(--rainbow-join-2) 100%); } .family .slice-2:last-child { background: linear-gradient(90deg, var(--rainbow-join-1) 0%, var(--rainbow-2) 20%, var(--rainbow-2) 100%); }
.family .slice-3:first-child { background: linear-gradient(90deg, var(--rainbow-3) 0%, var(--rainbow-3) 80%, var(--rainbow-join-3) 100%); } .family .slice-3:last-child { background: linear-gradient(90deg, var(--rainbow-join-2) 0%, var(--rainbow-3) 20%, var(--rainbow-3) 100%); }
.family .slice-4:first-child { background: linear-gradient(90deg, var(--rainbow-4) 0%, var(--rainbow-4) 80%, var(--rainbow-join-4) 100%); } .family .slice-4:last-child { background: linear-gradient(90deg, var(--rainbow-join-3) 0%, var(--rainbow-4) 20%, var(--rainbow-4) 100%); }
.family .slice-5:first-child { background: linear-gradient(90deg, var(--rainbow-5) 0%, var(--rainbow-5) 80%, var(--rainbow-join-5) 100%); } .family .slice-5:last-child { background: linear-gradient(90deg, var(--rainbow-join-4) 0%, var(--rainbow-5) 20%, var(--rainbow-5) 100%); }
.family .slice-6:first-child { background: linear-gradient(90deg, var(--rainbow-6) 0%, var(--rainbow-6) 80%, var(--rainbow-join-6) 100%); } .family .slice-6:last-child { background: linear-gradient(90deg, var(--rainbow-join-5) 0%, var(--rainbow-6) 20%, var(--rainbow-6) 100%); }
.family .card, .family .sig { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; min-height: var(--tile); background: var(--surface-raised); color: var(--text); text-decoration: none; white-space: nowrap; }
.family .card { gap: 0.6rem; padding: 0.3rem 0.7rem; font: 600 0.95rem/1.2 "Public Sans", system-ui, sans-serif; letter-spacing: -0.015em; }
.family .card:hover, .family .sig:hover { box-shadow: inset 0 -3px 0 var(--gold-rule); }
.family .card img { width: var(--tile-logo); height: var(--tile-logo); display: block; flex: none; }
.family .card .tld { color: var(--gold); }
.family .card[aria-current="page"] .cname { box-shadow: inset 0 -2px 0 var(--gold-rule); }
.family .tail .card { width: var(--tile); justify-content: center; padding: 0.3rem; }
.family .tail .card img { width: var(--mark); height: var(--mark); object-fit: contain; }
.sig { margin: 0; font: 400 1.5rem/1 "Dancing Script", cursive; color: var(--silver); white-space: nowrap; }
.sig .pre, .sig .post { font-size: 0.78em; white-space: pre; }
.sig .gold { color: var(--gold); }
.family .sig { padding: 0 0.6rem; justify-content: center; }
/* Stage B: names kept, every size scaled with the footer's own width (1 cqw = 1% of the content width). */
@container footer (max-width: 1399px) {
  .family .card { font-size: clamp(0.8rem, 0.8cqw + 4px, 0.95rem); gap: clamp(0.3rem, 1.53cqw - 11.8px, 0.6rem); padding: 0.3rem clamp(0.375rem, 1.73cqw - 13px, 0.7rem); }
  .family .cards .card img { width: clamp(2rem, 4cqw - 12px, var(--tile-logo)); height: clamp(2rem, 4cqw - 12px, var(--tile-logo)); }
  .family .tail .card { width: clamp(2.75rem, 4cqw - 2.4px, var(--tile)); padding: 0.2rem; }
  .family .tail .card img { width: clamp(1.5rem, 2.67cqw - 5.3px, var(--mark)); height: clamp(1.5rem, 2.67cqw - 5.3px, var(--mark)); }
  .family .sig { font-size: clamp(1.05rem, 2.4cqw - 9.6px, 1.5rem); padding: 0 0.4rem; }
}
/* Stage C: logos only. The 9 tiles share the width left by the signature; each logo fills its tile up to 2.75rem. */
@container footer (max-width: 1039px) {
  .family .cards { flex: 6 1 0; }
  .family .tail { flex: 3 1 0; }
  .family .slice, .family .tail .tile { flex: 1 1 0; }
  .family .card { justify-content: center; padding: 0.3rem 0.2rem; gap: 0; }
  .family .cards .cname { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
  .family .card[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--gold-rule); }
  .family .cards .card img { width: 100%; max-width: var(--tile-logo); height: auto; aspect-ratio: 1 / 1; }
  .family .tail .card { width: auto; padding: 0.3rem 0.2rem; }
  .family .tail .card img { width: 72%; max-width: var(--mark); height: auto; aspect-ratio: 1 / 1; }
  .family .sig { font-size: 1.5rem; padding: 0 0.5rem; }
}
@container footer (max-width: 749px) { .family .sig { font-size: clamp(1.05rem, 7.2cqw - 30px, 1.5rem); } }
@container footer (max-width: 649px) { .family .sig .pre, .family .sig .post { display: none; } .family .sig { padding: 0 0.4rem; } }
@container footer (max-width: 449px) { .family .sig { font-size: clamp(0.85rem, 4.6cqw - 4px, 1.05rem); padding: 0 0.3rem; } .family .card { padding: 0.3rem 0.1rem; } }
/* Phones (< 600 px of content width): the 3 marks and the signature drop to a second line, under a solid grey
   band that separates them from the project cards; logos and marks return to full size. */
@container footer (max-width: 599px) {
  .family .bar { flex-wrap: wrap; row-gap: 0; }
  .family .cards { flex: 1 1 100%; }
  .family .tail { flex: none; }
  .family .sigtile { flex: 1 1 auto; }
  .family .tail .tile-1 { background: var(--band-grey); }
  .family .card { padding: 0.3rem 0.2rem; }
  .family .tail .card { width: var(--tile); }
  .family .tail .card img { width: var(--mark); max-width: var(--mark); }
  .family .sig { font-size: clamp(1.05rem, 4.2cqw, 1.5rem); padding: 0 0.4rem; }
}
@container footer (min-width: 420px) and (max-width: 599px) { .family .sig .pre, .family .sig .post { display: inline; } }

/* Scheme-specific marks (GitHub's black and white Invertocat). The generic .only-* rules serve any element; the
   .family .card img.only-* forms (0,3,1) outrank .family .card img { display: block } (0,2,1), so inside a footer tile
   the off-scheme mark is removed from the layout and never takes a tile's width. */
img.only-dark, .only-dark { display: none; }
.family .card img.only-dark { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-scheme="light"]) img.only-light, :root:not([data-scheme="light"]) .family .card img.only-light { display: none; }
  :root:not([data-scheme="light"]) img.only-dark, :root:not([data-scheme="light"]) .family .card img.only-dark { display: block; }
}
[data-scheme="dark"] img.only-light, [data-scheme="dark"] .family .card img.only-light { display: none; }
[data-scheme="dark"] img.only-dark, [data-scheme="dark"] .family .card img.only-dark { display: block; }
[data-scheme="light"] img.only-light, [data-scheme="light"] .family .card img.only-light { display: block; }
[data-scheme="light"] img.only-dark, [data-scheme="light"] .family .card img.only-dark { display: none; }

/* Standard-document elements (aiqt.ai): document control strip, numbered clauses, framed notes, framed registers */
.control { display: flex; flex-wrap: wrap; gap: 0.3rem 2rem; margin: 0 0 1.6rem; padding: 0.6rem 0; border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong); font: 400 0.8rem/1.5 "JetBrains Mono", ui-monospace, monospace; color: var(--text-muted); max-width: none; }
.control div { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.control dt { text-transform: uppercase; letter-spacing: 0.08em; }
.control dd { margin: 0; color: var(--text); }
.doc h2.clause { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); column-gap: 0.4rem; align-items: baseline; }
h2.clause .num { font: 400 1.1rem/1.5 "JetBrains Mono", ui-monospace, monospace; color: var(--accent); }
ol.clauses { list-style: none; margin: 0 0 1.4rem; padding: 0; max-width: 72ch; }
ol.clauses > li { display: grid; grid-template-columns: 2.8rem minmax(0, 1fr); margin-bottom: 0.7rem; }
ol.clauses .n { font: 400 0.85rem/1.7 "JetBrains Mono", ui-monospace, monospace; color: var(--text-muted); }
ol.clauses p { margin: 0; }
.note { display: grid; grid-template-columns: 5.2rem minmax(0, 1fr); border: 1px solid var(--rule-strong); border-left: 4px solid var(--brand); background: var(--callout-bg); margin: 0.4rem 0 1.6rem; max-width: 72ch; }
.note > .label { font: 600 0.68rem/1.45 "Public Sans", system-ui, sans-serif; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); padding: 0.85rem 0.6rem 0.8rem 0.8rem; border-right: 1px solid var(--rule-strong); }
.note > div { padding: 0.75rem 1rem; font-size: 1.1rem; line-height: 1.55; }
.note p { margin: 0 0 0.8rem; }
.note p:last-child { margin-bottom: 0; }
.register { border: 1px solid var(--rule-strong); margin: 0.4rem 0 1.6rem; }
.reg-cap { margin: 0; display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; align-items: baseline; padding: 0.6rem 1rem; background: var(--surface-sunken); border-bottom: 1px solid var(--rule-strong); box-shadow: inset 4px 0 0 var(--brand); font: 500 0.68rem/1.4 "Public Sans", system-ui, sans-serif; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); }
.reg-cap b { color: var(--text); font-weight: 600; }
.reg-cap .count { margin-left: auto; font: 400 0.8rem/1.4 "JetBrains Mono", ui-monospace, monospace; letter-spacing: 0.04em; text-transform: none; }
.register .tablewrap { margin: 0; padding: 0.2rem 1rem 0.4rem; }
@media (max-width: 600px) { .note { grid-template-columns: minmax(0, 1fr); } .note > .label { border-right: 0; border-bottom: 1px solid var(--rule-strong); padding: 0.5rem 0.8rem; } .doc h2.clause { grid-template-columns: 2.2rem minmax(0, 1fr); } }

/* Spacing between page regions: 4rem; inside the text: the 0.6rem grid */
.pagehead { padding: 1rem 0 0; }
.region + .region { padding-top: 0; }
hr.space { border: 0; margin: 0; height: 2.4rem; }

/* Entry points: 1 row of equal tiles, numeral above title, metadata under the title; the landing page's only navigation list */
.entries { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 1rem 2.2rem; counter-reset: e; }
.entries li { counter-increment: e; }
.entries a { display: flex; flex-direction: column; align-items: flex-start; text-decoration: none; color: var(--text); padding: 0.3rem 0; }
.entries a::before { content: counter(e); font: 300 2.3rem/1 "Newsreader", serif; color: var(--accent); font-variant-numeric: lining-nums; margin-bottom: 0.45rem; }
.entries .t { font: 600 1.4rem/1.2 "Newsreader", serif; }
.entries .n { font: 400 0.8rem/1.6 "JetBrains Mono", ui-monospace, monospace; color: var(--text-muted); margin-top: 0.15rem; }
.entries .d { font: 400 1.05rem/1.45 "Public Sans", system-ui, sans-serif; color: var(--text-muted); margin-top: 0.4rem; }
.entries:has(li:nth-child(5)) .t { font-size: 1.2rem; }
.entries:has(li:nth-child(5)) .d { font-size: 0.95rem; }
.entries a:hover .t { color: var(--link-hover); }

/* Figures: a row of large numbers, the visual anchor of a reference page */
.figures { display: flex; flex-wrap: wrap; gap: 1rem 3rem; margin: 0.2rem 0 1.4rem; }
.fig { display: grid; gap: 0.2rem; padding-top: 0.4rem; border-top: 3px solid var(--brand); min-width: 7rem; }
.fig .num { font: 300 3rem/1 "Newsreader", serif; color: var(--accent); font-variant-numeric: lining-nums; }
.fig .cap { font: 500 0.72rem/1.4 "Public Sans", system-ui, sans-serif; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-muted); }

/* Compact figures (1.4.0): up to 6 figures on 1 line in the text column, smaller numerals, equal shares of the width;
   at 900 px and below, rows of 3. Markup: <div class="figures compact"> with the usual .fig children. */
.figures.compact { flex-wrap: nowrap; gap: 0.8rem 1.6rem; }
.figures.compact .fig { flex: 1 1 0; min-width: 0; }
.figures.compact .num { font-size: 2.2rem; }
.figures.compact .cap { letter-spacing: 0.08em; }
@media (max-width: 900px) { .figures.compact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 1.2rem; } }

/* Figure beside text (1.4.0): 1 figure and a short paragraph side by side, stacked at 600 px and below.
   Markup: <div class="fig-aside"><div class="fig">...</div><p>...</p></div>. */
.fig-aside { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.6rem 1.6rem; align-items: start; margin: 0.2rem 0 1.4rem; }
.fig-aside > p { margin: 0.4rem 0 0; }
@media (max-width: 600px) { .fig-aside { grid-template-columns: minmax(0, 1fr); } }

/* Inline accent (1.4.0): a number or key term in running text in the site's --accent (a text-safe colour,
   4.5:1 or more on every surface, per contrast-report.txt). Emphasis only: the sentence reads the same without it,
   so no meaning depends on colour (WCAG 2.2, 1.4.1). Markup: <span class="accent">28</span>. */
span.accent { color: var(--accent); font-variant-numeric: lining-nums; }

/* Brand marker (1.4.0), <mark class="marker">: emphasis in the site's rainbow colour that leaves the text in --text. A band of --brand
   behind the lower part of the line; --brand stays decorative and never colours text (section 6.1). Underlining
   was not used, because links are underlined. Browsers without color-mix() draw a thin solid --brand band. */
mark.marker { color: inherit; padding: 0 0.08em; background: linear-gradient(transparent 82%, var(--brand) 82%); }
@supports (background: color-mix(in srgb, red 50%, transparent)) {
  mark.marker { background: linear-gradient(transparent 58%, color-mix(in srgb, var(--brand) 38%, transparent) 58%); }
}

/* Steps: large brand-coloured numerals */
.steps { list-style: none; margin: 0 0 1.4rem; padding: 0; counter-reset: st; }
.steps li { counter-increment: st; display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); column-gap: 0.6rem; align-items: start; margin-bottom: 1.1rem; }
.steps li::before { content: counter(st); font: 300 2.6rem/1 "Newsreader", serif; color: var(--accent); font-variant-numeric: lining-nums; padding-top: 0.1rem; }
.steps li > span { padding-top: 0.25rem; }

/* Next step: closes every inner page */
.next { margin: 2.4rem 0 0.6rem; padding-top: 1.2rem; border-top: 3px solid var(--brand); }
.next p { margin: 0 0 0.6rem; color: var(--text-muted); font-size: 1.1rem; }
:is(.doc, .doc > section, .doc > article) > .next { grid-column: 2; }

/* iPad portrait and narrower: 1 column, labels above content, rail under the h1 */
@media (max-width: 1000px) {
  .mast { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand scheme" "pages pages"; row-gap: 0.2rem; }
  .brand { margin-right: 0; }
  .nav { justify-content: flex-start; padding-bottom: 0.1rem; }
  .doc { grid-template-columns: minmax(0, 1fr); gap: 0; }
  :is(.doc, .doc > section, .doc > article) > *, :is(.doc, .doc > section, .doc > article) > .lbl, :is(.doc, .doc > section, .doc > article) > .wide, :is(.doc, .doc > section, .doc > article) > .full { grid-column: 1; }
  :is(.doc, .doc > section, .doc > article) > .lbl, :is(.doc, .doc > section, .doc > article) > .lbl.sec, :is(.doc, .doc > section, .doc > article) > .lbl.blk { padding-top: 1.4rem; margin-bottom: 0.4rem; }
  :is(.doc, .doc > section, .doc > article) > .lbl.first { padding-top: 0; }
  :is(.doc, .doc > section, .doc > article) > .lbl + h2 { margin-top: 0; }
  :is(.doc, .doc > section, .doc > article) > .lbl.blk + .tablewrap { margin-top: 0.2rem; }
  :is(.doc, .doc > section, .doc > article) > .side { grid-row: auto; padding-top: 0; margin: 0 0 1.6rem; }
  :is(.doc, .doc > section, .doc > article) > .side dd { font-size: 0.95rem; }
  :is(.doc, .doc > section, .doc > article) > .rail { grid-column: 1; grid-row: auto; position: static; margin: 0.4rem 0 1.6rem; max-width: 62ch; }
  .rail ol { columns: 2; column-gap: 2rem; }
  .rail li { break-inside: avoid; }
  :is(.doc, .doc > section, .doc > article) > h1 + .rail { order: 0; }
  .region { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; padding-bottom: 2.2rem; }
  .region > .lbl { padding-top: 0; }
  .doc { grid-template-columns: minmax(0, 1fr); }
  .rail-logo { max-width: 7rem; margin: 0.6rem 0 0.8rem; }
  .rail > .lbl, .rail > ol, .rail > ul { margin-left: calc(7rem * var(--logo-inset)); }
  .hero { grid-template-columns: minmax(0, 1fr) clamp(9rem, 24vw, 13rem); column-gap: 2rem; padding: 1rem 0 2.2rem; }
  .hero { padding-right: 0; }
  .statement { font-size: clamp(2.4rem, 98cqw / var(--sw), 3.2rem); }
  .plan.three { columns: 2; }
  .entries { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); gap: 0.6rem 0; }
  .entries a { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); grid-template-areas: "n t" "n m" "n d"; column-gap: 0.4rem; }
  .entries a::before { grid-area: n; margin: 0; }
  .entries .t { grid-area: t; } .entries .n { grid-area: m; } .entries .d { grid-area: d; max-width: 62ch; }
  :is(.doc, .doc > section, .doc > article) > .next { grid-column: 1; }
}
@media (min-width: 1001px) {
  .pair { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .srcview { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
@media (max-width: 600px) {
  .plan, .plan.three { columns: 1; }
  .rail ol { columns: 1; }
  .hero { grid-template-columns: minmax(0, 1fr) 5.5rem; grid-template-areas: "kicker art" "title title" "intro intro" "start start"; column-gap: 1rem; row-gap: 0; padding: 0.6rem 0 2rem; }
  .hero-art { align-self: start; }
  .hero-art img { width: 86%; }
  .hero .lbl { align-self: center; }
  .hero-text { display: contents; }
  .figure .wide { display: none; }
  .figure .stack { display: block; max-width: 20rem; margin: 0 auto; }
  body { font-size: 1.125rem; }
  .statement { font-size: 2.2rem; margin-bottom: 0.8rem; }
  .statement.two em { display: block; white-space: normal; text-wrap: balance; }
  .lead, .hero .intro { font-size: 1.2rem; }

  .doc h1 { font-size: 2.2rem; }
  .doc h2 { font-size: 1.7rem; }
  .fig .num { font-size: 2.4rem; }
  .mast { padding-top: 1.1rem; padding-bottom: 1rem; }
  pre, .code { padding: 1rem 1rem; }
  pre.hascopy { padding-top: 3rem; }
  dl.record.cols { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-art { animation: none; }
  .start .arrow { transition: none; }
  .start:hover .arrow { transform: none; }
}

/* Dark mode: thin headings gain a little tracking; the field becomes the lit object */
@media (prefers-color-scheme: dark) {
  :root:not([data-scheme="light"]) .statement, :root:not([data-scheme="light"]) .doc h1 { letter-spacing: 0.01em; }
}
[data-scheme="dark"] .statement, [data-scheme="dark"] .doc h1 { letter-spacing: 0.01em; }


/* Left-rail page at 1000 px and below: 1 column, the left list under the h1 as the right rail sits there, not sticky. */
@media (max-width: 1000px) {
  .doc.left-rail { grid-template-columns: minmax(0, 1fr); }
  :is(.doc.left-rail, .doc.left-rail > section, .doc.left-rail > article) > *,
  :is(.doc.left-rail, .doc.left-rail > section, .doc.left-rail > article) > .lbl,
  :is(.doc.left-rail, .doc.left-rail > section, .doc.left-rail > article) > .wide,
  :is(.doc.left-rail, .doc.left-rail > section, .doc.left-rail > article) > .next,
  :is(.doc.left-rail, .doc.left-rail > section, .doc.left-rail > article) > .full { grid-column: 1; }
  :is(.doc.left-rail, .doc.left-rail > section, .doc.left-rail > article) > .lbl.first { padding-top: 0; }
  .doc.left-rail > .lrail { grid-row: auto; align-self: start; margin: 0.4rem 0 1.6rem; max-width: 62ch; }
  .lrail > nav { position: static; max-height: none; overflow: visible; padding-left: calc(7rem * var(--logo-inset)); }
  .lrail .rail-logo { max-width: 7rem; margin: 0.6rem 0 0.8rem; }
  .lrail ul { columns: 2; column-gap: 2rem; }
  .lrail li { break-inside: avoid; }
}
@media (max-width: 600px) { .lrail ul { columns: 1; } }

/* Fallback for browsers without container queries (before Chromium 105, Safari 16, Firefox 110): the footer bar
   wraps instead of overflowing, so the page never scrolls sideways. */
@supports not (container-type: inline-size) {
  .family .bar { flex-wrap: wrap; }
  .family .cards { flex: 1 1 100%; flex-wrap: wrap; }
}

/* Matrix tables on paper (from 1.7.0): the whole matrix prints. The bounded box loses its height cap and its inner
   scroll, sticky cells stay in place, the header row repeats on each page, the column controls are hidden, and every
   cell is black text on white, with no tint or heat. table.matrix.matrix doubles the class so that these rules
   outrank the heat steps and the group tags; the preset selectors name the contexts whose display rules they
   must outrank. */
@media print {
  .tablewrap:has(> table.matrix) { max-height: none; overflow: visible; }
  table.matrix.sticky thead th, table.matrix.sticky-col :is(th, td):first-child { position: static; }
  table.matrix thead { display: table-header-group; }
  table.matrix tr { break-inside: avoid; }
  [data-col-toggles], .lrail li [data-preset], .chips [data-preset], [data-preset] { display: none; }
  table.matrix.matrix :is(thead, tbody) tr > :is(th, td) { background: var(--print-paper); color: var(--print-ink); }
  table.matrix.matrix :is(thead, tbody) tr > :is(th, td) :is(a, code, .org, .grp, .sub, .n) { color: var(--print-ink); background: var(--print-paper); }
  .heat-legend .tag { background: var(--print-paper); color: var(--print-ink); }
}