/* Generated by scripts/build-website.ts from docs/brand/tokens.json (design system "Factory · Plumb", light only), with the docs site's generator. Do not edit. */

/* Design tokens, generated from docs/brand/tokens.json. Every colour in this stylesheet is here. */
:root {
  color-scheme: light;
  --ink: #080d1a;
  --muted: #58627b;
  --rail: #f3f6fa;
  --rule: #dce2ec;
  --blue: #075bea;
  --blue-dark: #0547b8;
  --select: #dceaff;
  --ok: #1f9a4b;
  --warn: #b25400;
  --problem: #b42318;
  --hover: #f7f9fc;
  --canvas: #ffffff;
  --nav-hover: #e8eef7;
  --notice-bg: #f5f8fe;
  --warn-bg: #fff8f0;
  --ok-bg: #f1f9f4;
  --blocked-bg: #fdecea;
  --stale-bg: #fff1e0;
  --input-border: #b8c1d1;
  --mark-off: #9aa3b5;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --focus: 0 0 0 3px #ffffff, 0 0 0 6px #075bea;
  --rail-width: 258px;
  --inset: 40px;
  --control-height: 48px;
  --touch-min: 44px;
  --mark-lg: 72px;
  --mark-md: 64px;
  --mark-sm: 56px;
  --mark-min: 48px;
  --illustration: 128px;
  --status-icon: 40px;
  --icon: 24px;
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
/* End of design tokens. */

/* Type styles (tokens.json type.groups); each sets its .type-<name> class and the elements listed. */
.type-page-title, h1 { font-family: var(--font-sans); font-size: 48px; line-height: 1.1; font-weight: 750; letter-spacing: -0.02em; }
.type-metric-value { font-family: var(--font-sans); font-size: 44px; line-height: 1.15; font-weight: 750; }
.type-wordmark, .wordmark { font-family: var(--font-sans); font-size: 40px; line-height: 1.1; font-weight: 750; letter-spacing: -0.02em; }
.type-section-heading, h2 { font-family: var(--font-sans); font-size: 26px; line-height: 1.2; font-weight: 750; }
.type-status-title { font-family: var(--font-sans); font-size: 24px; line-height: 1.4; font-weight: 650; }
.type-panel-heading { font-family: var(--font-sans); font-size: 22px; line-height: 1.2; font-weight: 750; }
.type-blocker-title { font-family: var(--font-sans); font-size: 20px; line-height: 1.4; font-weight: 650; }
.type-subtitle, .subtitle { font-family: var(--font-sans); font-size: 24px; line-height: 1.4; font-weight: 400; }
.type-nav-item, .nav-item { font-family: var(--font-sans); font-size: 20px; line-height: 1.4; font-weight: 400; }
.type-item-title, h3 { font-family: var(--font-sans); font-size: 19px; line-height: 1.4; font-weight: 650; }
.type-body, body { font-family: var(--font-sans); font-size: 18px; line-height: 1.4; font-weight: 400; }
.type-label { font-family: var(--font-sans); font-size: 18px; line-height: 1.4; font-weight: 500; }
.type-control, .button, .skip-link { font-family: var(--font-sans); font-size: 18px; line-height: 1.4; font-weight: 650; }
.type-subheading, h4, .facts dt, .words dt { font-family: var(--font-sans); font-size: 18px; line-height: 1.4; font-weight: 650; }
.type-compact, .example-list dd, .page-index a, .words dd { font-family: var(--font-sans); font-size: 17px; line-height: 1.4; font-weight: 400; }
.type-supporting, .supporting, .scope, .missing, .plan, .evidence, .stage-number, .log-date, figcaption, .prerelease, .site-footer, .example-list dt { font-family: var(--font-sans); font-size: 16px; line-height: 1.4; font-weight: 400; }
.type-badge, .state, .tag { font-family: var(--font-sans); font-size: 16px; line-height: 1.4; font-weight: 500; }
.type-small { font-family: var(--font-sans); font-size: 15px; line-height: 1.4; font-weight: 400; }
.type-caption { font-family: var(--font-sans); font-size: 14px; line-height: 1.3; font-weight: 400; }
.type-code, code { font-family: var(--font-mono); font-size: 0.88em; line-height: 1.4; font-weight: 400; }
.type-path { font-family: var(--font-mono); font-size: 16px; line-height: 1.4; font-weight: 400; }

/* Website measures: not design-system tokens yet (docs/brand/design-language.md). The reading measure, the narrowest page,
   the page container's widest extent and a card's narrowest column. */
:root { --measure: 70ch; --page-min: 320px; --content-max: 80rem; --card-min: 15rem; }

/* Components, after the dashboard (apps/dashboard/src/styles.css) and the docs site (scripts/build-docs-site.ts). */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-width: var(--page-min); background: var(--canvas); color: var(--ink); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
strong { font-weight: 650; }
img { max-width: 100%; height: auto; }
code { overflow-wrap: anywhere; }

a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }
/* Keyboard focus: links show a 3 px blue outline; buttons and the skip link, which act as controls, show the focus ring. */
:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: var(--radius-sm); }
.skip-link:focus-visible, .button:focus-visible { outline: none; box-shadow: var(--focus); }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: var(--space-4);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  padding: 0 var(--space-4);
  border-radius: var(--radius-md);
  background: var(--blue);
  color: var(--canvas);
  text-decoration: none;
  transform: translateY(calc(-100% - var(--space-8)));
}
.skip-link:focus { transform: none; }

/* The page container: centred, never wider than --content-max, inset by --inset. */
.container { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--inset); }

/* The pre-release notice on every page, above the header: plain words on the notice ground, no imagery. */
.prerelease { border-bottom: 1px solid var(--rule); background: var(--notice-bg); }
.prerelease p { padding: var(--space-2) 0; }

/* Header: the mark beside the live-text wordmark, then the site navigation, which wraps on narrow screens. */
.site-header { border-bottom: 1px solid var(--rule); }
.header-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-6); padding-top: var(--space-4); padding-bottom: var(--space-4); }
/* The mark's canvas keeps its transparent margin; the negative margins leave about half a bob width of clear
   space, and bottom alignment sets the live wordmark's baseline near the bob's tip. Never below --mark-min. */
.wordmark { --mark: var(--mark-lg); display: flex; align-items: flex-end; min-height: var(--touch-min); color: var(--ink); text-decoration: none; }
.brand-mark { flex: none; width: var(--mark); height: var(--mark); min-width: var(--mark-min); min-height: var(--mark-min); margin: calc(var(--mark) * -0.1) calc(var(--mark) * -0.23) 0; }
.nav-list { display: flex; flex-wrap: wrap; gap: var(--space-1); padding: 0; list-style: none; }
.nav-item { display: flex; align-items: center; min-height: var(--touch-min); padding: 0 var(--space-4); border-radius: var(--radius-lg); color: var(--ink); text-decoration: none; }
.nav-item:hover { background: var(--nav-hover); }
.nav-item[aria-current="page"] { background: var(--select); color: var(--blue); font-weight: 500; }

/* Page headers: one page title per view, then its subtitle in muted. */
.hero { padding: var(--space-12) 0 var(--space-10); }
.page-header { padding: var(--space-12) 0 var(--space-8); border-bottom: 1px solid var(--rule); }
.hero h1, .page-header h1 { max-width: var(--measure); overflow-wrap: break-word; }
.subtitle { max-width: var(--measure); margin-top: var(--space-4); color: var(--muted); }
.page-header .notice { margin-top: var(--space-6); }

/* Actions: at most one primary button per page (blue); the rest are secondary. */
.actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-8); }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-height); padding: 0 var(--space-6); border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--canvas); color: var(--ink); text-decoration: none; white-space: nowrap; }
.button:hover { background: var(--hover); }
.button.primary { border-color: var(--blue); background: var(--blue); color: var(--canvas); }
.button.primary:hover { border-color: var(--blue-dark); background: var(--blue-dark); }
/* The home page's status strip: Factory as a whole in words, then its capabilities counted by state, each count
   linking to its list on the Status page. The counts come from the content, never typed. */
.status-strip { max-width: var(--measure); margin-top: var(--space-8); padding-top: var(--space-6); border-top: 1px solid var(--rule); }
.status-strip > * + * { margin-top: var(--space-3); }
.claim-line .state { margin-right: var(--space-2); }
.counts { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-6); padding: 0; list-style: none; }
.counts a { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--touch-min); color: var(--ink); text-decoration: none; }
.counts a:hover strong { text-decoration: underline; }

/* State labels: always a word, never colour alone. Working today · verified on select; In development outlined;
   Planned with a dashed outline in muted. The site shows no live state, so it uses no ok, warn or problem colour. */
.state { display: inline-block; padding: var(--space-1) var(--space-3); border: 1px solid var(--select); border-radius: var(--radius-md); background: var(--select); color: var(--blue-dark); white-space: nowrap; }
.state-developing { border-color: var(--muted); background: var(--canvas); color: var(--ink); }
.state-planned { border-style: dashed; border-color: var(--muted); background: var(--canvas); color: var(--muted); }
.state-line { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Sections: open bands on canvas and alternate bands on rail; flat, with no raised surface. */
.band { padding: var(--space-12) 0; }
.band.alt { background: var(--rail); }
.band-intro { max-width: var(--measure); margin-bottom: var(--space-8); }
.band-intro > * + * { margin-top: var(--space-3); }
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--space-4); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-10); align-items: start; }

/* Cards: hairline borders on canvas, small corners, no shadow. A card's claim states its label in words. */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr)); gap: var(--space-4); padding: 0; list-style: none; }
/* Three proof points, six capabilities and the domain words read best three to a row on wide screens. */
.grid.three, .words { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-6); border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--canvas); }
.card > * { max-width: 100%; }
.card .more { margin-top: auto; }
.stack { display: grid; gap: var(--space-4); max-width: var(--measure); padding: 0; list-style: none; }
.scope, .missing, .plan, .evidence { color: var(--muted); }
.more-link { margin-top: var(--space-6); }

/* Notices: pre-release facts, what is not established and the illustrative note, on notice-bg behind a blue border. */
.notice { max-width: var(--measure); padding: var(--space-4) var(--space-6); border-left: 3px solid var(--blue); background: var(--notice-bg); }
.notice > * + * { margin-top: var(--space-3); }
.notice ul { padding-left: var(--space-6); }
.notice li + li { margin-top: var(--space-2); }

/* The loop's stages on the home page, one row each under the drawing: the stage and its label, then what it leaves. */
.loop + .stage-list { margin-top: var(--space-8); }
.stage-list { padding: 0; list-style: none; }
.stage-list > li { display: grid; grid-template-columns: var(--card-min) minmax(0, 1fr); gap: var(--space-2) var(--space-6); align-items: start; padding: var(--space-4) 0; border-top: 1px solid var(--rule); }
.stage-name > * + * { margin-top: var(--space-2); }

/* The domain words on the How it works page, each in plain terms. */
.words { display: grid; gap: var(--space-6) var(--space-8); }
.words dd { margin-top: var(--space-1); }

/* The loop's stages on the How it works page: the stage and its capabilities beside its illustrative example. */
.page-index { margin-top: var(--space-8); }
.page-index ol { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0; list-style: none; }
.page-index a { display: inline-flex; align-items: center; min-height: var(--touch-min); padding: 0 var(--space-3); border: 1px solid var(--rule); border-radius: var(--radius-lg); color: var(--ink); text-decoration: none; }
.page-index a:hover { background: var(--nav-hover); }
.stage { padding: var(--space-12) 0; border-top: 1px solid var(--rule); }
.stage-header { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-6); }
.stage-number { width: 100%; color: var(--muted); }
.stage-body > * + * { margin-top: var(--space-4); }
.facts { display: grid; gap: var(--space-3); }
.facts dd { margin-top: var(--space-1); }

/* Illustrative examples: a dashed frame that says "Illustrative example" first, so invented data never reads as a
   result. The dashboard capture: a solid frame that says first it is an internal draft. Each tag is badge-sized and
   styled as a small notice, unlike any state label. */
.example { padding: var(--space-6); border: 1px dashed var(--muted); border-radius: var(--radius-md); background: var(--canvas); }
.draft { padding: var(--space-6); border: 1px solid var(--rule); border-radius: var(--radius-md); background: var(--canvas); }
.example > * + *, .draft > * + * { margin-top: var(--space-4); }
.tag { display: inline-block; padding: var(--space-1) var(--space-3); border-left: 3px solid var(--blue); background: var(--notice-bg); color: var(--ink); }
.example blockquote { padding-left: var(--space-4); border-left: 3px solid var(--rule); }
.example-list { display: grid; gap: var(--space-3); }
.example-list dt { color: var(--muted); }

/* Figures. Brand plates are always whole, never cropped: no fixed height, no object-fit, no clipping corners. */
.figure { margin-top: var(--space-8); }
.figure img { display: block; max-width: 100%; height: auto; }
.figure.diagram img { border: 1px solid var(--rule); background: var(--canvas); }
figcaption { max-width: var(--measure); margin-top: var(--space-3); color: var(--muted); }
/* A plate is six illustration widths (768 px) wide at most, so its module labels and its "not status or progress" line stay legible. */
.figure.plate img { width: calc(var(--illustration) * 6); max-width: 100%; height: auto; border: 1px solid var(--rule); }
.figure.illustration img { width: var(--illustration); height: auto; }
.figure.capture img { border: 1px solid var(--rule); }
/* A figure's text link to its image at full size; the image itself is never a link. */
.full-size { margin-top: var(--space-2); }

/* The Status page: its legend and the progress log. */
.legend { display: grid; gap: var(--space-4); max-width: var(--measure); }
.legend dt { display: flex; }
.legend dd { margin-top: var(--space-1); }
.log { max-width: var(--measure); padding: 0; list-style: none; }
.log > li { padding: var(--space-6) 0; border-top: 1px solid var(--rule); }
.log > li > * + * { margin-top: var(--space-2); }
.log-date { color: var(--muted); }
.next { max-width: var(--measure); padding-left: var(--space-6); }
.next li + li { margin-top: var(--space-3); }
.next li p + p { margin-top: var(--space-1); }

/* Footer: the site's pages again, and what the site is. */
.site-footer { padding: var(--space-8) 0; border-top: 1px solid var(--rule); color: var(--muted); }
.site-footer .container > * + * { margin-top: var(--space-4); }
.site-footer p { max-width: var(--measure); }
.footer-nav ul { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); padding: 0; list-style: none; }
.footer-nav a { display: inline-flex; align-items: center; min-height: var(--touch-min); }

/* At 1280 px and below: the tokens' notes, then layout. */
@media (max-width: 1280px) {
  :root { --rail-width: 224px; --inset: 32px; }
  .type-wordmark, .wordmark { font-size: 34px; }

  .wordmark { --mark: var(--mark-md); }
}

/* At 960 px and below: the tokens' notes, then layout. */
@media (max-width: 960px) {
  :root { --inset: 20px; }
  .type-page-title, h1 { font-size: 36px; }
  .type-metric-value { font-size: 36px; }
  .type-wordmark, .wordmark { font-size: 28px; }
  .type-section-heading, h2 { font-size: 22px; }
  .type-subtitle, .subtitle { font-size: 20px; }
  .type-nav-item, .nav-item { font-size: 17px; }
  .type-body, body { font-size: 17px; }

  .wordmark { --mark: var(--mark-sm); }
  .nav-item { padding: 0 var(--space-3); }
  .hero, .band, .stage { padding: var(--space-8) 0; }
  .page-header { padding: var(--space-8) 0 var(--space-6); }
  /* Two columns become one: the words first, then the example or the figure; three cards to a row become as many as fit. */
  .split { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .grid.three, .words { grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr)); }
  .stage-list > li { grid-template-columns: minmax(0, 1fr); }
}

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