@runbooks/design 0.1.0

package/dist/stylesheet.js

@@ -0,0 +1,987 @@
+/**
+ * The tokens, as the stylesheet the pages actually get.
+ *
+ * D-01 produced `PALETTES`, `TYPE_SCALE`, `FONT_STACKS` and `NUMERIC_FEATURES`, and its
+ * contrast tests measured them against each other. Nothing consumed them. The site
+ * shipped with no stylesheet at all — default serif, no measure, no tabular figures — so
+ * every token in this package was a value the product had agreed on and never applied,
+ * and the tests passed because they were checking the agreement rather than the page.
+ *
+ * Emitted rather than written beside the tokens, for the reason the rest of this
+ * repository keeps arriving at: a hand-kept CSS file with `#141A1F` in it is a second
+ * copy of a decision, and the copy is the one that goes stale. Every colour, size and
+ * stack below is read from the token objects; a test asserts the output contains no
+ * literal that did not come from one.
+ *
+ * §18.2's prohibitions are kept the way that file keeps them — by having nothing to
+ * reach for. There is no shadow token, no gradient except the risk legend's, and no
+ * uppercase transform, so none of the three can be spelled here.
+ */
+import { PALETTES, RISK_COLORS, TYPE_SCALE, FONT_STACKS, NUMERIC_FEATURES, NODE_RADIUS } from "./tokens.js";
+import { RISK_ORDER } from "@runbooks/schema";
+/** Where the self-hosted faces are served from. */
+export const FONT_DIR = "/fonts";
+/**
+ * Where they are kept, relative to this package.
+ *
+ * Source, not build output: `apps/web/public` is emitted in its entirety and gitignored
+ * as such, so a font left there would vanish on a fresh clone and the site would render
+ * in the fallback stack with nothing failing. The package that declares the faces owns
+ * the files, and the catalog build copies them out with the rest of what it serves.
+ */
+export const FONT_SOURCE_DIR = "fonts";
+/**
+ * The faces, and only the ones the type scale asks for.
+ *
+ * 400 and 500 are the scale's two weights; 600 is what `strong` needs and italic is what
+ * `em` needs, and synthesising either from a regular face is how a careful type choice
+ * ends up looking careless. Six files, Latin1 subsets, ~124 kB in total.
+ */
+export const FACES = [
+    { family: "IBM Plex Sans", file: "IBMPlexSans-Regular-Latin1.woff2", weight: 400, style: "normal" },
+    { family: "IBM Plex Sans", file: "IBMPlexSans-Italic-Latin1.woff2", weight: 400, style: "italic" },
+    { family: "IBM Plex Sans", file: "IBMPlexSans-Medium-Latin1.woff2", weight: 500, style: "normal" },
+    { family: "IBM Plex Sans", file: "IBMPlexSans-SemiBold-Latin1.woff2", weight: 600, style: "normal" },
+    { family: "IBM Plex Mono", file: "IBMPlexMono-Regular-Latin1.woff2", weight: 400, style: "normal" },
+    { family: "IBM Plex Mono", file: "IBMPlexMono-SemiBold-Latin1.woff2", weight: 600, style: "normal" },
+];
+/**
+ * Upstream's own range for the Latin1 split, copied rather than narrowed.
+ *
+ * It carries U+2013-2014 and U+2018-201E and U+2026 — the dashes, the curly quotes and
+ * the ellipsis this catalog's prose is full of. A range invented here would be a
+ * subsetting decision made twice, and the half that is wrong shows up as one character in
+ * a different typeface in the middle of a sentence.
+ */
+export const LATIN1_RANGE = "U+0000, U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, " +
+    "U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, " +
+    "U+20AC, U+2122, U+2212, U+FB01-FB02";
+function fontFaces() {
+    return FACES.map((face) => `@font-face{
+  font-family:"${face.family}";
+  font-style:${face.style};
+  font-weight:${face.weight};
+  font-display:swap;
+  src:url("${FONT_DIR}/${face.file}") format("woff2");
+  unicode-range:${LATIN1_RANGE};
+}`).join("\n");
+}
+/** One theme's palette as custom properties. */
+function palette(theme) {
+    const values = PALETTES[theme];
+    return [
+        `--rb-background:${values.background}`,
+        `--rb-surface:${values.surface}`,
+        `--rb-border:${values.border}`,
+        `--rb-text:${values.text}`,
+        `--rb-text-secondary:${values.textSecondary}`,
+        `--rb-trust:${values.trust}`,
+        /**
+         * The risk scale as properties too, so a graph follows the theme.
+         *
+         * The SVG is server-rendered — §18.4 puts it above the fold and a picture that waits
+         * for script is invisible during the incident it is opened in — so it is drawn once,
+         * before anyone has chosen anything. Emitting `var(--rb-risk-…)` with the drawn
+         * theme's value as the fallback is what lets one drawing serve both: in a page it
+         * takes the theme in force, and exported on its own it keeps the colours it was
+         * drawn with.
+         */
+        ...RISK_ORDER.map((risk) => `--rb-risk-${risk}:${RISK_COLORS[theme][risk]}`),
+    ].join(";");
+}
+/** The type scale as custom properties, in the units the scale is stated in. */
+function typeScale() {
+    return Object.entries(TYPE_SCALE)
+        .flatMap(([name, step]) => {
+        const kebab = name.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+        const parts = [
+            `--rb-${kebab}-size:${step.size}px`,
+            `--rb-${kebab}-leading:${step.leading}px`,
+            `--rb-${kebab}-weight:${step.weight}`,
+        ];
+        if ("maxLineLength" in step)
+            parts.push(`--rb-measure:${step.maxLineLength}ch`);
+        return parts;
+    })
+        .join(";");
+}
+/**
+ * The whole stylesheet.
+ *
+ * Deliberately one string rather than a file Next imports. A generated file on disk is a
+ * file somebody edits, and then the tokens and the page disagree again with nothing to
+ * catch it. Inlined in the document head it also costs no second request and cannot
+ * flash unstyled, which on a static catalog of this size is the better trade anyway.
+ */
+export function stylesheet(options) {
+    return `${fontFaces()}
+
+:root{
+  ${palette(options.defaultTheme)};
+  ${typeScale()};
+  --rb-sans:${FONT_STACKS.sans};
+  --rb-mono:${FONT_STACKS.mono};
+  --rb-radius:${NODE_RADIUS}px;
+  --rb-step:8px;
+  /* The page, which is not the measure: prose is capped, a diagram is not. */
+  color-scheme:${options.defaultTheme === "dark" ? "dark light" : "light dark"};
+}
+
+/**
+ * The other theme is reached by choosing it, not by an operating-system setting.
+ *
+ * Following \`prefers-color-scheme\` made the catalog's default whatever the desktop
+ * happened to be set to, which is not a default at all — the site had one look on this
+ * machine and another on the next, and neither was the one it was designed in.
+ *
+ * Q10 refused to *lock* a theme, and that still holds: the toggle in the header sets
+ * \`data-theme\` and it wins, in either direction, and both palettes are measured against
+ * the same contrast floors. What changed is only which one you get before you choose.
+ */
+:root[data-theme="light"]{ ${palette("light")}; color-scheme:light; }
+:root[data-theme="dark"]{ ${palette("dark")}; color-scheme:dark; }
+
+*,*::before,*::after{box-sizing:border-box;}
+
+body{
+  margin:0;
+  background:var(--rb-background);
+  color:var(--rb-text);
+  font-family:var(--rb-sans);
+  font-size:var(--rb-body-size);
+  line-height:var(--rb-body-leading);
+  font-weight:var(--rb-body-weight);
+  /* Numbers appear in sequence in every table, every trust level and every step id. */
+  font-variant-numeric:${NUMERIC_FEATURES};
+  -webkit-text-size-adjust:100%;
+}
+
+/**
+ * The page is as wide as the screen, and the padding is the only thing that scales.
+ *
+ * Two different limits, and conflating them cost the site most of its display twice over.
+ * First a single column at the measure made the graph, the table and the step list all as
+ * narrow as a paragraph. Then a 1180px shell fixed that for a laptop and spent two thirds
+ * of a 4K display on margins.
+ *
+ * So width belongs to the page, and each kind of content is held by the rule that suits
+ * it: prose by --rb-measure, cards by the width one card needs before it stops being
+ * readable, the graph by its column. The header is inside this rule so the navigation
+ * runs edge to edge — its underline is a line across the screen rather than a line across
+ * a column floating in the middle of one.
+ *
+ * A clamp rather than breakpoints: 16px of padding on a phone, growing with the viewport,
+ * and stopping at 80px so a very large screen does not push the content into a frame.
+ */
+header,main{
+  max-width:none;
+  margin:0;
+  padding:0 clamp(calc(var(--rb-step) * 2), 3vw, calc(var(--rb-step) * 10));
+}
+
+header{
+  display:flex;
+  flex-wrap:wrap;
+  gap:var(--rb-step) calc(var(--rb-step) * 2);
+  align-items:baseline;
+  justify-content:space-between;
+  padding-top:calc(var(--rb-step) * 3);
+  padding-bottom:calc(var(--rb-step) * 2);
+  border-bottom:1px solid var(--rb-border);
+  margin-bottom:calc(var(--rb-step) * 4);
+}
+/* The nav ran together as one word without this: "runbooks.directoryCatalogTrust…". */
+header nav{ display:flex; flex-wrap:wrap; gap:calc(var(--rb-step) * 2); }
+header nav[aria-label="For machines"]{
+  gap:var(--rb-step);
+  font-family:var(--rb-mono);
+  font-size:var(--rb-meta-size);
+}
+header nav[aria-label="For machines"] a{ color:var(--rb-text-secondary); }
+header [data-slot="theme"]{
+  padding:calc(var(--rb-step) * 0.3) calc(var(--rb-step) * 0.9);
+  font-size:var(--rb-meta-size);
+  font-family:var(--rb-sans);
+  color:var(--rb-text-secondary);
+}
+
+main{ padding-bottom:calc(var(--rb-step) * 8); }
+
+/*
+ * A long title has to break somewhere rather than push the page sideways — but only where
+ * it must.
+ *
+ * This was anywhere on every piece of prose, and that value does more than permit a
+ * break: it makes the narrowest letter the element's minimum width, so a table column
+ * collapses to nothing and takes the ordinary words with it. The status page printed
+ * "not meas / ured" in a column that had a whole screen beside it.
+ */
+h1,h2,h3,p,li,dt,dd,td,th{ overflow-wrap:break-word; }
+
+/*
+ * A ref, a capability URN and a content hash carry no break of their own and are each
+ * longer than a phone is wide, so these may break anywhere. They are also the only things
+ * on the page that need to.
+ */
+code,kbd,samp{ overflow-wrap:anywhere; }
+
+h1{
+  font-size:var(--rb-page-title-size);
+  line-height:var(--rb-page-title-leading);
+  font-weight:var(--rb-page-title-weight);
+  margin:0 0 calc(var(--rb-step) * 2);
+  letter-spacing:-0.01em;
+}
+h2{
+  font-size:var(--rb-section-title-size);
+  line-height:var(--rb-section-title-leading);
+  font-weight:var(--rb-section-title-weight);
+  margin:calc(var(--rb-step) * 5) 0 calc(var(--rb-step) * 1.5);
+}
+h3{
+  font-size:var(--rb-body-size);
+  line-height:var(--rb-body-leading);
+  font-weight:600;
+  margin:calc(var(--rb-step) * 3) 0 var(--rb-step);
+}
+
+p,li{ max-width:var(--rb-measure); }
+p{ margin:0 0 calc(var(--rb-step) * 1.5); }
+ul,ol{ margin:0 0 calc(var(--rb-step) * 2); padding-left:calc(var(--rb-step) * 3); }
+li{ margin-bottom:calc(var(--rb-step) * 0.5); }
+
+a{ color:var(--rb-trust); text-underline-offset:2px; }
+a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
+  outline:2px solid var(--rb-trust);
+  outline-offset:2px;
+}
+
+strong{ font-weight:600; }
+
+code,kbd,pre,samp{
+  font-family:var(--rb-mono);
+  font-size:var(--rb-code-size);
+  line-height:var(--rb-code-leading);
+  font-variant-numeric:${NUMERIC_FEATURES};
+}
+code{
+  background:var(--rb-surface);
+  border:1px solid var(--rb-border);
+  border-radius:var(--rb-radius);
+  padding:0.1em 0.35em;
+}
+pre{
+  background:var(--rb-surface);
+  border:1px solid var(--rb-border);
+  border-radius:var(--rb-radius);
+  padding:calc(var(--rb-step) * 2);
+  overflow-x:auto;
+}
+pre code{ background:none; border:0; padding:0; }
+
+/* Meta text: provenance, trust lines, counts. Secondary, never smaller than the scale. */
+dl,[data-slot="fidelity"],[data-slot="pointer"],[data-slot="graph-note"],[data-section="trust"] p{
+  font-size:var(--rb-meta-size);
+  line-height:var(--rb-meta-leading);
+  color:var(--rb-text-secondary);
+}
+/*
+ * The value column may shrink below what is in it.
+ *
+ * A bare 1fr track never goes under its content's min-content width, and provenance holds
+ * source URLs, which have no break in them. At 390px the track sized itself to the longest
+ * URL - 471px inside a 263px list - and the record page scrolled sideways to 604px.
+ * Every other grid in this stylesheet was already written minmax(0,...); this was the one
+ * that was not, and it is the only page-level overflow the phone pass found.
+ */
+dl{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--rb-step) calc(var(--rb-step) * 2); }
+dt{ color:var(--rb-text); font-weight:500; }
+dd{ margin:0; }
+
+/* A wide table scrolls inside its own box; it never widens the page. */
+table{ border-collapse:collapse; font-variant-numeric:${NUMERIC_FEATURES}; width:100%; }
+main :where(table){ display:block; overflow-x:auto; }
+th,td{ border-bottom:1px solid var(--rb-border); padding:var(--rb-step) calc(var(--rb-step) * 2) var(--rb-step) 0; text-align:left; vertical-align:top; }
+th{ font-weight:500; }
+/*
+ * Prose is prose in a cell too.
+ *
+ * The measure above is set on p and li, which is where prose lives on every page but one.
+ * The status table holds its sentences in the cell directly, so its definition column ran
+ * at about 120 characters against the 75 the design holds everywhere else - the widest
+ * line on the site, on the page whose subject is honesty about itself. The table gets
+ * taller and every line stays readable, which is the trade the measure exists to make.
+ */
+td{ max-width:var(--rb-measure); }
+
+/* Anything the build hands over as markup: the graph, a card, a specimen. */
+svg{ max-width:100%; height:auto; }
+
+/**
+ * The step being read, marked in both places at once.
+ *
+ * Set by a script and by nothing else: absent, every node keeps its own weight and the
+ * page is what it was. The graph already draws a hovered node heavier, so this is the same
+ * emphasis reaching the same element from the prose — weight, never hue, because hue is
+ * the risk channel and nothing else may borrow it (§18.2).
+ */
+[data-slot="graph-column"][data-reading] [data-node]>path:first-of-type{ stroke-opacity:.45; }
+[data-slot="graph-column"][data-reading] [data-node][data-reading="true"]>path:first-of-type{
+  stroke-opacity:1;
+  stroke-width:2.6;
+}
+/* A rule, not a shadow: §18.2 has no shadows to reach for, and this is the trust accent
+   doing what it does everywhere else — marking the thing the reader is on. */
+/* Drawn as a 2px rule plus 14px of padding, pulled back by the 16px that adds up to, so
+   marking a step moves nothing on the page. */
+[data-step]{ border-left:2px solid transparent; padding-left:calc(var(--rb-step) * 2 - 2px); margin-left:calc(var(--rb-step) * -2); }
+[data-step][data-reading="true"]{ border-left-color:var(--rb-trust); }
+
+/**
+ * A tool page: the thing you are working on, and everything about it beside it.
+ *
+ * The submit page put a document editor down the left and its gate list, its promise and
+ * its instructions underneath, one after another, with two thirds of the screen empty
+ * next to them — so a reader fixing a failing gate scrolled away from the document to read
+ * which gate had failed. Drawn in the canvas as two columns for that reason.
+ *
+ * 420px is the canvas's number. The rule shipped 32rem — 512px — from the commit that made
+ * these two columns, half an hour after the artboard landed and without a word about the
+ * width, and the parity check for this page compared that there were two columns without
+ * comparing how wide. The record page's check does compare the number, which is why its
+ * 600px never drifted. Owner's call, 2026-09-05: the drawing is right.
+ */
+[data-layout="tool"]{
+  display:grid;
+  grid-template-columns:minmax(0,1fr) minmax(0,420px);
+  column-gap:calc(var(--rb-step) * 5);
+  align-items:start;
+}
+/*
+ * Placement through :where(), so the narrow-screen rule below can take it back.
+ *
+ * It could not before: a selector naming the slot outranks one naming every child, so
+ * grid-column:2 survived the media query, column 2 became an implicit auto track, and the
+ * 1fr had nothing left to distribute. Measured in a 390px viewport, the work column - the
+ * matcher on /stack, the paste field on /import, the gate runner on /submit - was 0 pixels
+ * wide. Not narrow: gone.
+ *
+ * :where() contributes no specificity, so these place the panels and the media query wins
+ * on source order, which is what a media query is for.
+ */
+[data-layout="tool"]>:where(h1){ grid-column:1 / -1; grid-row:1; }
+[data-layout="tool"]>:where(p){ grid-column:1 / -1; grid-row:2; }
+/*
+ * The wide column is named by where it sits, not by what one page happens to put in it.
+ *
+ * It was [data-section="run"], which is the gate runner on /submit and nothing at all on
+ * the other three routes this layout covers. /stack and /import shipped one column for
+ * that reason: the drawing had always shown two and there was no name for the left one.
+ */
+[data-layout="tool"]>:where([data-slot="work"]){ grid-column:1; grid-row:3; }
+[data-layout="tool"]>:where([data-slot="beside"]){ grid-column:2; grid-row:3; min-width:0; }
+
+@media (max-width:1100px){
+  [data-layout="tool"]{ grid-template-columns:minmax(0,1fr); }
+  [data-layout="tool"]>*{ grid-column:1; grid-row:auto; position:static; }
+}
+
+/**
+ * The constructor is three panels, and the page already says so.
+ *
+ * Library, canvas, inspector: the markup names them, and stacking them put a step palette
+ * above an editor above an inspector, each as wide as a paragraph, on a screen with room
+ * for all three. The page itself warns that editing needs a wider window — this is what a
+ * wider window is for.
+ */
+[data-page="constructor"]{
+  display:grid;
+  grid-template-columns:minmax(0,16rem) minmax(0,1fr) minmax(0,22rem);
+  column-gap:calc(var(--rb-step) * 4);
+  align-items:start;
+}
+/* Through :where() for the reason the tool layout gives above. Without it the inspector
+   stayed in column 3 on a phone, three tracks were computed at 390px - 0px, 114px, 219px -
+   and the heading, the notice and the step library were all 0 pixels wide. */
+[data-page="constructor"]>:where(h1, [data-section="mobile-notice"], [data-section="draft-notice"]){ grid-column:1 / -1; }
+[data-page="constructor"]>:where([data-panel="library"]){ grid-column:1; }
+[data-page="constructor"]>:where([data-panel="canvas"]){ grid-column:2; }
+[data-page="constructor"]>:where([data-panel="inspector"]){ grid-column:3; }
+
+/* Below this the three do not fit, and the page is honest about being read-only there. */
+@media (max-width:1100px){
+  [data-page="constructor"]{ grid-template-columns:minmax(0,1fr); }
+  [data-page="constructor"]>*{ grid-column:1; position:static; }
+}
+
+/**
+ * A record page is two things read together, so it is two columns.
+ *
+ * The graph and the prose about it were stacked, which meant that reading step five put
+ * the picture of the procedure off the top of the screen — exactly when a reader wants to
+ * see where step five sits. The graph column is sticky, and that is the whole reason for
+ * the layout: it stays while the steps scroll past it.
+ *
+ * Width goes to the graph, not the prose. Prose is capped by its measure whatever the
+ * column allows, so surplus width does nothing for it and everything for a diagram.
+ *
+ * The heading spans both columns and comes first in the markup, so a reader with no CSS
+ * meets the record's name, then its picture, then its prose — the order the page had
+ * before this rule existed. The grid is what arranges them; without it they stack.
+ */
+[data-layout="record"]{
+  display:grid;
+  grid-template-columns:minmax(0,1fr) minmax(0,600px);
+  align-items:start;
+}
+[data-layout="record"]>:where([data-slot="head"]){ grid-column:1 / -1; }
+
+/**
+ * The graph column is a panel the height of the screen, and the rule between the columns
+ * is what separates them — not a gap. Drawn this way in the canvas, and the height is what
+ * lets the picture be fitted rather than panned: a graph that fills the column needs no
+ * scrollbar of its own, and the page keeps the only one on the screen.
+ */
+[data-layout="record"]>[data-slot="graph-column"]{
+  min-width:0;
+  display:flex;
+  flex-direction:column;
+  border-right:1px solid var(--rb-border);
+}
+/*
+ * The prose is what stays put.
+ *
+ * The graph is the long thing now that it takes the width it is given, so sticking it
+ * would pin the tall half and scroll the short one. The steps are the reference a reader
+ * keeps glancing at, so they are the half that stays while the picture goes past. Nothing
+ * here scrolls on its own: the page has the only scrollbar, and a column taller than the
+ * screen simply travels with it.
+ */
+[data-layout="record"]>[data-slot="prose-column"]{
+  min-width:0;
+  padding:calc(var(--rb-step) * 5) calc(var(--rb-step) * 5) calc(var(--rb-step) * 12);
+}
+
+/**
+ * The right column stays put, on every page that has one.
+ *
+ * The record page had this rule and no other page did, so the same two-column reading —
+ * picture on the left, what is said about it on the right — behaved one way on a record
+ * and another way on the dry pass, the home page and the submit page. The reason given
+ * for the record is not about records: the left half is the long one, so sticking it
+ * would pin the tall column and scroll the short one.
+ *
+ * One declaration rather than five, because it is one rule. Each layout below only says
+ * which of its children is the right column; what happens to it is decided here.
+ *
+ * Every one of these selectors names a SINGLE element. A sticky column has to be one
+ * element: a grid whose right-hand children are flat, each sticky on its own, pins them
+ * all to the same top edge and stacks them on top of each other. That is why the markup
+ * of the pages that had flat children now wraps them.
+ *
+ * Nothing scrolls on its own: the page keeps the only scrollbar, and a column taller than
+ * its own row simply travels with the page — sticky gives it no room to move, which is
+ * the correct behaviour rather than a special case.
+ */
+[data-layout="record"]>[data-slot="prose-column"],
+[data-section="simulation"]>[data-slot="beside"],
+[data-section="hero"]>[data-slot="beside"],
+[data-layout="tool"]>[data-slot="beside"],
+[data-page="constructor"]>[data-panel="inspector"]{
+  position:sticky;
+  top:0;
+  align-self:start;
+}
+
+/*
+ * And it stops staying put where there is no second column to stay beside.
+ *
+ * One declaration takes back the one above, with the same selectors so it wins on source
+ * order rather than on a specificity trick. Each of these layouts already collapses to one
+ * column at this width; the sticky rule did not follow, because the position:static in
+ * those media queries names every child and lost to the five selectors above.
+ *
+ * What that looked like: on a phone the record page stacked its two halves and then pinned
+ * the prose to the top edge, so scrolling drew the rest of the page underneath it.
+ */
+@media (max-width:1100px){
+  [data-layout="record"]>[data-slot="prose-column"],
+  [data-section="simulation"]>[data-slot="beside"],
+  [data-section="hero"]>[data-slot="beside"],
+  [data-layout="tool"]>[data-slot="beside"],
+  [data-page="constructor"]>[data-panel="inspector"]{
+    position:static;
+  }
+}
+
+/*
+ * The picture first and the controls under it, which is the order the canvas draws.
+ *
+ * A grid rather than a flex column, and the reason is the fitting below: a percentage
+ * height resolves against a grid row that was given a size, and does not resolve against
+ * a flex item that merely ended up one. Measured in the browser both ways — flexed, the
+ * picture kept its own 1064px inside a 664px frame and was clipped.
+ */
+[data-layout="record"] [data-slot="graph-column"] [data-section="graph-viewer"]{
+  min-height:0;
+  display:grid;
+  grid-template-rows:auto auto;
+}
+/* The step being read, named at the end of the bar the way the canvas names it. */
+[data-layout="record"] [data-slot="graph-column"] [data-slot="reading"]{
+  margin-left:auto;
+  color:var(--rb-trust);
+  font-family:var(--rb-mono);
+  font-size:var(--rb-meta-size);
+}
+[data-layout="record"] [data-slot="graph-column"] [data-slot="controls"]{
+  order:1;
+  margin:0;
+  border-top:1px solid var(--rb-border);
+  padding:calc(var(--rb-step) * 1.5) calc(var(--rb-step) * 3);
+}
+[data-layout="record"] [data-slot="graph-column"] [data-slot="frame"]{
+  min-height:0;
+  max-height:none;
+  border:0;
+  border-radius:0;
+  background:transparent;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  padding:calc(var(--rb-step) * 3);
+}
+/*
+ * A graph takes the width it is given, and its container takes its height. Everywhere.
+ *
+ * This was written inside the record layout and left every other graph — the dry pass, a
+ * full-screen view — drawn at its own size in the left third of a frame that ran the width
+ * of the screen. The default is the rule; the record page only adds the border and the
+ * order of the controls.
+ *
+ * Nothing drags and nothing scrolls until somebody zooms in: at rest the whole picture is
+ * there, so the page keeps the only scrollbar on the screen.
+ *
+ * And the page keeps the wheel too. Hidden overflow leaves the frame a scroll container
+ * that cannot scroll, and contained overscroll stops the chaining out of it, so a wheel
+ * over the graph did nothing at all: not the picture, not the page. Clipping is the same
+ * visual result and is not a scroll container, and touch is handed back for the state that
+ * has no gesture to protect.
+ *
+ * Containment is gone from the frame entirely, and that is the fix rather than a detail of
+ * it. It was written for a pan that runs past its end, and it also fires wherever the
+ * frame happens not to be scrollable — which the record layout guarantees, because there
+ * the frame grows instead of scrolling. Measured in a browser: zoomed in, the wheel moved
+ * neither the picture nor the page. Chaining at the end of a scroll is what a reader
+ * expects; a wheel that does nothing is not.
+ */
+[data-section="graph-viewer"] [data-slot="frame"][data-zoomed="false"]{
+  overflow:clip;
+  cursor:default;
+  max-height:none;
+  touch-action:auto;
+}
+[data-section="graph-viewer"] [data-slot="frame"][data-zoomed="false"] [data-slot="canvas"],
+[data-section="graph-viewer"] [data-slot="frame"][data-zoomed="false"] [data-slot="scaled"]{
+  display:block;
+  min-width:0;
+  width:100%;
+  height:auto;
+}
+/*
+ * Width leads and height follows: a graph is drawn to be read, and a picture that fits by
+ * height leaves half its column empty beside a tall procedure. It still may not exceed the
+ * screen, so the height is capped rather than fixed — below that cap the width is what
+ * decides.
+ */
+/*
+ * The picture fills the column it was given.
+ *
+ * This said down-to-fit-never-up for a while, and the reason was real: the renderer picks
+ * the drawing size for legibility — node widths, and type at 14 — so scaling the picture
+ * up scales its labels with it, and a five-node dry pass across a wide column comes out
+ * with type larger than the page's own headings. The trade was made the other way on
+ * purpose: a graph that stops halfway across its column reads as a picture that failed to
+ * load, and half an empty column is a worse answer than large labels. The viewBox does the
+ * scaling, so the drawing keeps its proportions and nothing is cropped.
+ */
+[data-section="graph-viewer"] [data-slot="frame"][data-zoomed="false"] svg{
+  width:100%;
+  height:auto;
+}
+
+/**
+ * One column below the breakpoint, and nothing sticky.
+ *
+ * A sticky graph on a phone is a graph occupying the screen the prose needs. The two
+ * columns become the order they are written in, which is the order they read in.
+ */
+@media (max-width:1100px){
+  [data-layout="record"]{ grid-template-columns:minmax(0,1fr); }
+  [data-layout="record"]>*{ grid-column:1; position:static; }
+  /*
+   * One column has nothing to separate, and nothing to indent away from.
+   *
+   * The rule down the graph column is what stands between the two columns. Stacked, it
+   * became a vertical line down the right edge of a full-width block, separating the page
+   * from the window. The prose column's own 40px sat on top of the page padding, which
+   * already tightens with the viewport: measured at 390px, 56 pixels a side went to
+   * margin, leaving 259 for the text.
+   */
+  [data-layout="record"]>[data-slot="graph-column"]{ border-right:0; }
+  [data-layout="record"]>[data-slot="prose-column"]{
+    padding:calc(var(--rb-step) * 3) 0 calc(var(--rb-step) * 6);
+  }
+}
+
+/*
+ * The composition, drawn member by member.
+ *
+ * The playbook borrows the record's grid, so the column and the sticky prose beside it
+ * come for free; what is its own is the stack inside. Each member is a figure with its
+ * caption above the picture, because the caption says whose procedure this is and whose
+ * trust level it carries — read after the drawing it names, it is a footnote to something
+ * the reader has already taken on faith.
+ *
+ * The pictures take the column's width the way every other graph on the site does.
+ */
+[data-page="playbook"] [data-slot="graph-column"] [data-section="drawn"]{
+  padding:calc(var(--rb-step) * 3);
+}
+[data-page="playbook"] figure[data-member-picture]{
+  margin:0 0 calc(var(--rb-step) * 4);
+}
+[data-page="playbook"] figure[data-member-picture] figcaption{
+  margin-bottom:var(--rb-step);
+  font-family:var(--rb-mono);
+  font-size:var(--rb-meta-size);
+  color:var(--rb-text-secondary);
+}
+[data-page="playbook"] figure[data-member-picture] svg{ width:100%; height:auto; }
+
+/**
+ * The dry pass reads in two columns, because it was drawn in two.
+ *
+ * The picture and the questions about it are the record page's shape again: width belongs
+ * to the graph, and what a reader answers stays beside it rather than under it. The
+ * artboard has had these two columns since the page was designed; the page shipped as one,
+ * and nothing compared them, so a reader answered a fork with the graph scrolled off the
+ * top — which is the moment the picture matters most.
+ *
+ * Placed rather than wrapped: the runner's children are flat, so the picture takes the
+ * first column and everything else the second, the way the hero does. Neither half is
+ * sticky: the graph is bounded and the answers are short, so there is nothing long enough
+ * to travel past the other.
+ */
+[data-section="simulation"]{
+  display:grid;
+  grid-template-columns:minmax(0,1fr) minmax(0,380px);
+  column-gap:calc(var(--rb-step) * 5);
+  align-items:start;
+}
+[data-section="simulation"]>[data-slot="picture"]{ grid-column:1; grid-row:1; }
+[data-section="simulation"]>[data-slot="beside"]{ grid-column:2; grid-row:1; }
+
+@media (max-width:1100px){
+  [data-section="simulation"]{ grid-template-columns:minmax(0,1fr); }
+  [data-section="simulation"]>*{ grid-column:1; grid-row:auto; position:static; }
+}
+
+/**
+ * The home page's hero graph, bounded by height.
+ *
+ * §18.4 puts the graph above the fold, and a width cap alone does not keep it there: a
+ * procedure laid out top to bottom is a thousand pixels tall, so scaling it to the column
+ * width still leaves a picture that runs off the first screen and pushes everything the
+ * page has to say below it. The hero had no rule of its own at all — it was drawn at
+ * whatever size the renderer produced, and the day the layout turned vertical it stopped
+ * being a poster and became a wall.
+ *
+ * Height is the constraint, width follows it, and the viewBox does the scaling. It is a
+ * poster rather than a document: the reader is meant to see that a procedure is a graph
+ * with a branch and a dangerous step in it, and to open the record for the rest.
+ */
+/**
+ * The hero is the graph and the words about it, side by side.
+ *
+ * Centred in a full-width page the picture became an island: the prose sat at its measure
+ * on the left, the graph floated in the middle, and the space between them was the widest
+ * thing on the screen. Drawn in the canvas as two columns, and that is what makes the
+ * width worth having — the half that gains from it takes it, and the half that would be
+ * harmed by it keeps the measure.
+ */
+[data-section="hero"]{
+  display:grid;
+  grid-template-columns:minmax(0,1fr) minmax(0,420px);
+  column-gap:calc(var(--rb-step) * 5);
+  align-items:start;
+}
+[data-section="hero"]>h2{ grid-column:1 / -1; grid-row:1; }
+[data-section="hero"]>.hero-graph{ grid-column:1; grid-row:2; align-self:start; }
+[data-section="hero"]>[data-slot="beside"]{ grid-column:2; grid-row:2; min-width:0; }
+
+@media (max-width:1100px){
+  [data-section="hero"]{ grid-template-columns:minmax(0,1fr); }
+  [data-section="hero"]>*{ grid-column:1; grid-row:auto; position:static; }
+}
+
+.hero-graph{ display:flex; justify-content:center; margin:calc(var(--rb-step) * 2) 0; }
+.hero-graph svg{ width:100%; height:auto; max-width:100%; max-height:min(58vh, 540px); }
+
+/**
+ * The graph's frame.
+ *
+ * A bounded, scrolling box rather than a picture that sets the page's width: a procedure
+ * is as wide as it is, and letting it push the column out moves every paragraph on the
+ * page to accommodate a diagram. Panning is a pointer gesture, so text selection inside
+ * the frame is off — a drag that selects the labels instead of moving the graph reads as
+ * the page being broken.
+ */
+[data-section="graph-viewer"]{ margin:calc(var(--rb-step) * 2) 0 calc(var(--rb-step) * 3); }
+[data-section="graph-viewer"] [data-slot="frame"]{
+  overflow:auto;
+  max-height:70vh;
+  border:1px solid var(--rb-border);
+  border-radius:var(--rb-radius);
+  background:var(--rb-surface);
+  cursor:grab;
+  touch-action:none;
+  user-select:none;
+  -webkit-user-select:none;
+}
+[data-section="graph-viewer"] [data-slot="frame"]:active{ cursor:grabbing; }
+
+/**
+ * On a phone the graph is a card, not the screen.
+ *
+ * Seventy per cent of the viewport is most of a phone, and a reader who came for the steps
+ * meets a picture they then have to scroll past. What the card has to do here is what a
+ * silhouette does on a catalog page: show that the procedure branches and that there is red
+ * in it. Reading it is the full-screen view's job, and the control that opens it is the one
+ * thing on the card that has to be easy to hit.
+ *
+ * Full screen keeps the whole viewport, because that is the view that exists to be read.
+ */
+@media (max-width:700px){
+  [data-section="graph-viewer"] [data-slot="frame"]{ max-height:34vh; }
+  [data-section="graph-viewer"]:fullscreen [data-slot="frame"]{ max-height:none; }
+  [data-section="graph-viewer"] [data-slot="controls"]{ flex-wrap:wrap; row-gap:var(--rb-step); }
+  [data-section="graph-viewer"] [data-slot="hint"]{ display:none; }
+}
+[data-section="graph-viewer"] [data-slot="canvas"]{ width:max-content; }
+[data-section="graph-viewer"] [data-slot="scaled"]{ width:max-content; }
+[data-section="graph-viewer"] [data-slot="scaled"]>svg{ display:block; max-width:none; }
+[data-section="graph-viewer"] [data-slot="controls"]{
+  display:flex;
+  align-items:center;
+  gap:var(--rb-step);
+  margin-bottom:var(--rb-step);
+  font-size:var(--rb-meta-size);
+  color:var(--rb-text-secondary);
+}
+[data-section="graph-viewer"] [data-slot="controls"] button{
+  min-width:2.2em;
+  padding:calc(var(--rb-step) * 0.4) calc(var(--rb-step) * 0.8);
+}
+[data-section="graph-viewer"] [data-slot="zoom"]{
+  font-family:var(--rb-mono);
+  font-variant-numeric:tabular-nums;
+  min-width:4.5ch;
+  text-align:center;
+}
+[data-section="graph-viewer"] [data-slot="hint"]{ margin-left:auto; }
+
+/**
+ * Full screen. The browser's own mode where it exists, and a fixed cover where it does
+ * not — an iPhone has no element fullscreen, and a control that silently does nothing is
+ * worse than one that does the useful part.
+ */
+[data-section="graph-viewer"]:fullscreen{
+  background:var(--rb-background);
+  padding:calc(var(--rb-step) * 2);
+  display:flex;
+  flex-direction:column;
+}
+[data-section="graph-viewer"]:fullscreen [data-slot="frame"]{ flex:1; max-height:none; }
+[data-section="graph-viewer"][data-full="true"]:not(:fullscreen){
+  position:fixed;
+  inset:0;
+  z-index:50;
+  margin:0;
+  padding:calc(var(--rb-step) * 2);
+  background:var(--rb-background);
+  display:flex;
+  flex-direction:column;
+}
+[data-section="graph-viewer"][data-full="true"]:not(:fullscreen) [data-slot="frame"]{
+  flex:1;
+  max-height:none;
+}
+
+@media (max-width:600px){
+  [data-section="graph-viewer"] [data-slot="frame"]{ max-height:60vh; }
+  /* The hint describes a pointer nobody on a phone has. */
+  [data-section="graph-viewer"] [data-slot="hint"]{ display:none; }
+}
+
+/**
+ * A target a finger can hit.
+ *
+ * 44px is the smallest square most people can reliably tap, and the controls on this site
+ * are laid out for a pointer: a zoom button was 22px tall and a facet chip barely more.
+ * Applied where there is no fine pointer rather than at a width, because the question is
+ * what is doing the pointing, not how wide the screen is — a touch laptop needs this and
+ * a narrow desktop window does not.
+ */
+@media (pointer:coarse){
+  button,
+  [data-chip="facet"],
+  summary,
+  header nav a,
+  input,
+  select{
+    min-height:44px;
+  }
+  button,[data-chip="facet"]{ min-width:44px; justify-content:center; }
+  /* A link inside a paragraph is read, not tapped as a control; only lists of links get
+     the spacing, or every article would be double-spaced. */
+  [data-slot="chips"]{ gap:calc(var(--rb-step) * 1.25); }
+}
+
+/**
+ * The catalog: facets beside the results, not above them.
+ *
+ * A sidebar at a width that fits the longest facet value and no more, and the rest of the
+ * shell to the records. Below the breakpoint the columns stack and the facets become a
+ * row of chips that wraps — which is the same markup, read the other way.
+ */
+[data-layout="catalog"]{
+  display:grid;
+  grid-template-columns:minmax(0,15rem) minmax(0,1fr);
+  gap:calc(var(--rb-step) * 5);
+  align-items:start;
+}
+[data-layout="catalog"] [data-section="facets"] h2{ margin-top:0; }
+[data-layout="catalog"] [data-section="results"] h2{ margin-top:0; }
+[data-facet]{ margin-bottom:calc(var(--rb-step) * 2.5); }
+[data-facet] h3{ margin:0 0 var(--rb-step); color:var(--rb-text-secondary); font-size:var(--rb-meta-size); font-weight:500; }
+
+/* A navigation control is not prose, so it carries no list marker. */
+[data-slot="chips"]{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:calc(var(--rb-step) * 0.75); }
+[data-slot="chips"]>li{ margin:0; max-width:none; }
+[data-chip="facet"]{
+  display:inline-flex;
+  align-items:baseline;
+  gap:calc(var(--rb-step) * 0.6);
+  padding:calc(var(--rb-step) * 0.35) calc(var(--rb-step) * 0.9);
+  border:1px solid var(--rb-border);
+  border-radius:999px;
+  background:var(--rb-surface);
+  text-decoration:none;
+  font-size:var(--rb-meta-size);
+}
+[data-chip="facet"]:hover{ border-color:var(--rb-trust); }
+[data-chip="facet"] [data-slot="count"]{ color:var(--rb-text-secondary); font-variant-numeric:${NUMERIC_FEATURES}; }
+[data-slot="not-offered"],[data-slot="reading"]{ font-size:var(--rb-meta-size); color:var(--rb-text-secondary); }
+/**
+ * Cards reflow by how many fit, not by how wide the window was said to be.
+ *
+ * One column at any width meant a 4K display showed three cards where it has room for
+ * eight, and a breakpoint list would answer only for the widths somebody thought of.
+ * auto-fill asks the one question that matters — how many cards of a readable width fit —
+ * and the inner min() keeps the answer at one when the screen is narrower than a card.
+ */
+/**
+ * The card leads with a silhouette, not a diagram.
+ *
+ * Its job is to say that the procedure branches and that there is red in it, at a glance
+ * and before a word is read. Drawn at its own size it came out as specks of different
+ * heights, so the cards were ragged and the shape was the one thing you could not see. A
+ * band of one height with the picture fitted inside gives every card the same thing to
+ * compare, which is what makes a row of them scannable.
+ */
+[data-slot="mini-graph"]{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  height:calc(var(--rb-step) * 14);
+  overflow:hidden;
+}
+[data-slot="mini-graph"] svg{ max-width:100%; max-height:100%; width:auto; height:auto; }
+
+[data-slot="cards"]{
+  display:grid;
+  gap:calc(var(--rb-step) * 2);
+  grid-template-columns:repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
+  align-items:start;
+}
+
+@media (max-width:820px){
+  [data-layout="catalog"]{ grid-template-columns:minmax(0,1fr); gap:calc(var(--rb-step) * 3); }
+}
+
+/*
+ * Two pictures over one coordinate system, side by side (W-17, §18.4).
+ *
+ * The diff page carried this attribute and the stylesheet had no rule for it, so the two
+ * graphs - laid out over one coordinate system precisely so they can be compared - would
+ * have stacked a full graph apart. Nobody saw it because the route generated no page: it
+ * asked for pairs from a list of one version, and the catalog kept one version. Both of
+ * those are fixed, so the rule has to exist before the first republication rather than
+ * after somebody opens the first diff.
+ *
+ * Placement through :where() and a stack below the breakpoint, for the reason the tool
+ * layout gives: a comparison is two columns or it is not a comparison, and on a phone it
+ * is one column read in order.
+ */
+[data-section="side-by-side"]{
+  display:grid;
+  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
+  gap:calc(var(--rb-step) * 3);
+  align-items:start;
+}
+[data-section="side-by-side"]>:where(*){ min-width:0; }
+
+@media (max-width:1100px){
+  [data-section="side-by-side"]{ grid-template-columns:minmax(0,1fr); }
+}
+
+/* A pasted document, a command line, a step id: none of them may widen the page. */
+pre{ max-width:100%; }
+[data-slot="text"]{ overflow-x:auto; }
+
+input,select,textarea,button{
+  font:inherit;
+  color:inherit;
+  background:var(--rb-surface);
+  border:1px solid var(--rb-border);
+  border-radius:var(--rb-radius);
+  padding:calc(var(--rb-step) * 0.75) var(--rb-step);
+}
+/*
+ * A field somebody pastes a document into is not prose.
+ *
+ * The measure keeps a paragraph readable; a document has structure, and seeing the shape
+ * of it is the point of pasting it here. Capped at the measure the import page showed a
+ * 700px field with half its column empty beside it and the button hanging off the edge.
+ */
+textarea{ font-family:var(--rb-mono); width:100%; max-width:100%; }
+button{ cursor:pointer; }
+button[aria-pressed="true"]{ background:var(--rb-text); color:var(--rb-background); }
+button[disabled]{ cursor:not-allowed; color:var(--rb-text-secondary); }
+label{ display:block; margin:calc(var(--rb-step) * 2) 0 calc(var(--rb-step) * 0.5); font-weight:500; }
+
+form,fieldset{ border:0; margin:0; padding:0; }
+fieldset{ margin:calc(var(--rb-step) * 2) 0; }
+
+/* §18.3 rule 1's toggle, and every other run of controls. */
+[role="group"]{ display:flex; gap:var(--rb-step); margin-bottom:calc(var(--rb-step) * 2); }
+
+details{ margin:calc(var(--rb-step) * 2) 0; }
+summary{ cursor:pointer; font-weight:500; }
+
+@media (prefers-reduced-motion:reduce){
+  *,*::before,*::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
+}
+`;
+}