/* CT-015 templates: layout only. Every component comes from ../../CT-014/components/components.css; every value from tokens.css. */
.page { max-width: var(--page-max, 78rem); margin: 0 auto; padding: 0 var(--gutter, 1rem); }
.mast { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-2) var(--space-3); padding: var(--space-4) 0 0; }
.mast__name { font-weight: var(--weight-strong, 600); font-size: var(--size-4); text-decoration: none; letter-spacing: var(--tracking-tight, -0.02em); display: inline-block; min-height: var(--control-h, 2.75rem); line-height: var(--control-h, 2.75rem); }
.mast .layer-marker { border-bottom: 0; flex: 1 1 auto; justify-content: flex-end; }
.layer-rail { margin-bottom: var(--space-5); }
.head { padding: var(--space-4) 0 var(--space-5); max-width: var(--measure-text, 62ch); }
.head h1 { font-size: var(--size-1); line-height: var(--leading-tight, 1.1); letter-spacing: var(--tracking-tight, -0.02em); font-weight: var(--weight-strong, 600); margin: 0 0 var(--space-3); text-wrap: balance; }
.head .lead { font-size: var(--size-3); line-height: var(--leading-snug, 1.3); color: var(--ink-2); margin: 0; text-wrap: pretty; }
.caps { font-size: var(--size-6); font-weight: var(--weight-strong, 600); letter-spacing: var(--tracking-caps, 0.06em); text-transform: uppercase; color: var(--ink-3); margin: 0 0 var(--space-2); }
.sr { position: absolute; width: var(--line, 1px); height: var(--line, 1px); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.onward { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; padding: var(--space-5) 0 var(--space-4); }
.onward .back { display: inline-block; min-height: var(--control-h, 2.75rem); line-height: var(--control-h, 2.75rem); color: var(--ink-2); text-decoration-color: var(--accent); }
.foot { border-top: var(--line, 1px) solid var(--rule); padding: var(--space-3) 0 var(--space-6); font-size: var(--size-5); color: var(--ink-3); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.foot a { text-decoration: none; display: inline-block; min-height: var(--control-h, 2.75rem); line-height: var(--control-h, 2.75rem); }
.foot a[aria-current="page"] { color: var(--ink); font-weight: var(--weight-strong, 600); }
.foot a:hover { color: var(--accent); }
/* the deep dive: a sticky section list beside the body from 1024 up; one column below */
.deep { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.deep .toc ol { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.deep .toc li { counter-increment: s; border-top: var(--line, 1px) solid var(--rule); }
.deep .toc a { text-decoration: none; display: block; padding: var(--space-2) 0; min-height: var(--control-h, 2.75rem); color: var(--ink-2); font-size: var(--size-5); }
.deep .toc a::before { content: counter(s, decimal-leading-zero) "  "; font-weight: var(--weight-strong, 600); color: var(--accent); }
.deep .toc a:hover { color: var(--accent); }
.deep section { padding: var(--space-4) 0; border-top: var(--line, 1px) solid var(--rule); }
.deep .num { font-size: var(--size-5); font-weight: var(--weight-strong, 600); color: var(--accent); margin: 0 0 var(--space-2); }
.deep h2 { font-size: var(--size-2); line-height: var(--leading-tight, 1.1); letter-spacing: var(--tracking-tight, -0.02em); font-weight: var(--weight-strong, 600); margin: 0 0 var(--space-3); max-width: var(--measure-text, 62ch); text-wrap: balance; }
.deep h3 { font-size: var(--size-4); margin: var(--space-4) 0 var(--space-2); }
.prose { max-width: var(--measure-text, 62ch); text-wrap: pretty; }
.prose p { margin: 0 0 var(--space-3); }
.related { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
@media (min-width: 1024px) {
  .deep { grid-template-columns: 14rem minmax(0, 1fr); gap: var(--space-6); }
  .deep .toc { position: sticky; top: var(--space-3); align-self: start; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
@media (max-width: 767px) { .mast .layer-marker { flex-basis: 100%; justify-content: flex-start; } }

/* ---- M4/M5 fixes (source: P/m4/m4-fixes.css; gen.cjs appends this to the templates.css copy, the handoff CSS stays untouched).
   Tokens only; no colour, type or wording change. */
/* CRAFT 44 px target: the skip link was 124x36 when focused; centred like .go-deeper */
.skip { display: inline-flex; align-items: center; min-height: var(--control-h, 2.75rem); }
/* h3 and h4 outside .deep had browser sizes and margins (18.72 px, off the 4 px grid): the .deep h3 rule, applied everywhere */
h3 { font-size: var(--size-4); margin: var(--space-4) 0 var(--space-2); }
h4 { margin: var(--space-4) 0 var(--space-2); }
/* CRAFT states rule 4 (current mark as text-decoration, never box-shadow) is a swap inside the components.css copy: gen.cjs CURRENT_MARK */
/* CRAFT type rule 5: tabular numerals on every figure, year and count */
/* QA-016 (84): `html body` so a host page `font:` shorthand landing after this file cannot reset it */
html body { font-variant-numeric: tabular-nums; }

/* ---- Craft fixes (LOCAL, pre-review): states, chrome text size, solo-link targets. Tokens only; no word change. */
/* CRAFT §7 pressed: CRAFT gives no pressed look for a plain link, so the underline takes the accent at the strong line */
a:active { text-decoration-color: var(--accent); text-decoration-thickness: var(--line-strong); }
/* CRAFT §7 hover: where the underline already rests in the accent (or there is none) the text takes the accent */
@media (hover: hover) {
  .back:hover, .contact a:hover, .evidence__file:hover { color: var(--accent); }
}
/* CRAFT type: at most 15% of characters under 14 px at 375. The site chrome moves from --size-5 (13 px) to the 14 px token;
   --size-5 and --size-6 stay for short labels (caps, brief labels, go-deeper) */
.skip, .deep .toc a { font-size: var(--size-graphic); }
/* CRAFT 44 px target: a link that is the whole content of its block (gen.cjs marks it .solo) gets a 44 px box */
.solo { display: inline-flex; align-items: center; min-height: var(--control-h, 2.75rem); min-width: var(--control-h, 2.75rem); }
/* ---- Markup fixes for the M6 axe check (LOCAL): brief headings moved up one level (h3->h2 ... h6->h5); these keep the old look with tokens. */
/* old brief h3: 16 px, 24/8 margins */
.brief h2 { font-size: var(--size-4); margin: var(--space-4) 0 var(--space-2); }
/* h5 and h6 had browser sizes and margins (13.28 and 10.72 px, 22.18 and 24.98 px: off the scale and the 4 px grid; 10.72 px is under 12 px).
   Many are sentence-length, so they take the 14 px token (CRAFT type: at most 15% under 14 px), paired the way h3 and h4 already
   share 16 px. The moved-up brief h4 and h5 (the old h5 and h6) get the same */
h5, h6 { font-size: var(--size-graphic); margin: var(--space-4) 0 var(--space-2); }
.brief h4, .brief h5 { font-size: var(--size-graphic); }
/* ---- Last two craft items (LOCAL, pre-review). Tables: 13 px to the 14 px token (CRAFT type, at most 15% under 14 px).
   Under 768 px .compare already stacks into blocks, so it cannot scroll the page sideways. */
.compare { font-size: var(--size-graphic); }
/* Link underlines: the default --rule underline is 1.33:1 (light) and 1.49:1 (dark) against the paper, so links in running
   text were told apart by colour only. --ink-3 is above 3:1 in both schemes. Same specificity as the default, so links with
   their own underline keep it, and :hover still turns it to the accent. Solo links stand alone and keep the quiet rule. */
a:where(:not(.solo)) { text-decoration-color: var(--ink-3); }
/* ---- IN-082 résumé employer logos (owner, 2026-10-03: as on the live résumé). gen.cjs groups each job: the employer identity
   (logo tile + name) beside the role (dates, title, bullets); one column under 768 px. The tile is solid and light in both
   schemes (--logo-tile), the mark is never recoloured, and the tile box is fixed, so nothing moves when a mark loads. */
.resume-job { display: grid; grid-template-columns: var(--logo-tile-w) minmax(0, 1fr); gap: var(--space-4); padding: var(--space-4) 0; }
.resume-job + .resume-job { border-top: var(--line) solid var(--rule); }
.employer-identity { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.employer-logo { box-sizing: border-box; flex: none; display: flex; align-items: center; justify-content: center; width: var(--logo-tile-w); height: var(--logo-tile-h); padding: var(--space-3); background: var(--logo-tile); border: var(--line) solid var(--rule); border-radius: var(--radius); }
.employer-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.resume-job .employer-name { margin: 0; font-size: var(--size-graphic); font-weight: var(--weight-mid); line-height: var(--leading-snug); color: var(--ink); }
.resume-role > :first-child { margin-top: 0; }
.resume-role > :last-child { margin-bottom: 0; }
@media (max-width: 767px) {
  .resume-job { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
}
/* ---- QA-013 round 2 (m6/qa-batch2): the recomposed phone figure (gen.cjs PHONE_ART, <picture class="evidence__phone">) is
   chosen below 768 px. It is drawn for a phone column, so it keeps the tall-drawing measure the JobWatch explainer uses
   (--measure-lede) and sits centred in its frame: from 480 to 767 px it no longer scales up to three screens tall. */
.evidence__phone { display: block; }
@media (max-width: 767px) {
  .evidence__phone img { max-width: var(--measure-lede); margin-inline: auto; }
}

/* hiring lens P0-1 (m6/draft2/hiring-lens/FINDINGS.md): the résumé's print button and "Discuss a role" link under the lead.
   Printed, the page is the résumé alone: the mast, the rail, the actions, the onward links and the footer stay on screen. */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-top: var(--space-3); }
.actions button { font: inherit; font-size: var(--size-5); font-weight: var(--weight-strong); min-height: var(--control-h); padding: 0 var(--control-pad); border: var(--line) solid var(--ink); background: var(--paper); color: var(--ink); cursor: pointer; }
.actions a { display: inline-flex; align-items: center; min-height: var(--control-h); }
.actions button:active { background: var(--paper-2); transform: translateY(1px); }
@media (hover: hover) { .actions button:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); } }
@media print {
  .skip, .mast, .site-head, nav, .actions, .foot { display: none !important; }
  .resume-job { break-inside: avoid; }
}
/* ---- QA-007 cold-load CLS (77-cls-fonts). tokens.css names "Inter fallback" in --font-sans; these are its faces, Arial sized to
   Inter (m2/home/check/tools/fallback.cjs), copied from home.css. Inner pages paint in them until Inter is there, and the
   components.css Inter faces load with font-display: optional (gen.cjs), so Inter never swaps in after first paint. */
@font-face { font-family: "Inter fallback"; font-style: normal; font-weight: 400 500; font-display: swap; src: local("Arial"), local("ArialMT"), local("Liberation Sans"); size-adjust: 106.46%; ascent-override: 91.02%; descent-override: 22.64%; line-gap-override: 0.00%; }
@font-face { font-family: "Inter fallback"; font-style: normal; font-weight: 600; font-display: swap; src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"); size-adjust: 101.77%; ascent-override: 95.21%; descent-override: 23.68%; line-gap-override: 0.00%; }
/* nav:start */
/* Site navigation (m6/nav/NAV.md section 3). Source of truth: m4/nav.css. The same block, byte for byte, sits between the
   nav:start and nav:end markers in m2/home/home.css and m3/model/site.css; m4/check.cjs fails on any drift.
   Tokens only. --accent marks links and the current item; --contrast and --process are never used for navigation.
   Glassy header, solid tiles. No comment in this file may contain the view-transition at-rule name (build.py gate k). */

:root { --head-h: 3.375rem; scroll-padding-top: calc(var(--head-h) + var(--space-3)); }
@media (max-width: 767px) { :root { --head-h: 3.25rem; } }
body { background: var(--paper); }
/* QA-016 (84): body colour hardening. A host page style such as `:root{color-scheme:light} body{background:...;color:...;font:...}`
   can land after this file (the claude.ai preview does). These two rules out-rank it on specificity whatever the order, and
   repeat the values the page already computes, so nothing changes when no such style is present. */
html:root { color-scheme: light dark; }
html body { background: var(--paper); color: var(--ink); font-family: var(--font-sans); font-size: var(--size-4); line-height: var(--leading-body); }

/* 1. Header: one row, glassy, sticky */
header.site-head {
  position: sticky; top: 0; z-index: 10; padding-top: 0;
  background: color-mix(in srgb, var(--paper) 58%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
  border-bottom: var(--line) solid transparent;
  transition: border-color var(--dur-ui) var(--ease);
  view-transition-name: site-head;
}
header.site-head[data-scrolled] { border-bottom-color: var(--rule); }
.site-head__in {
  max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter); box-sizing: border-box;
  min-height: var(--head-h); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); position: relative;
}
.site-head__brand {
  display: inline-flex; align-items: center; min-height: var(--control-h); white-space: nowrap;
  font-size: var(--size-4); font-weight: var(--weight-strong); color: var(--ink); text-decoration: none;
}
.site-nav { display: flex; align-items: center; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--space-1); }
.site-nav a {
  display: inline-flex; align-items: center; min-height: var(--control-h); padding: 0 var(--space-2); box-sizing: border-box;
  font-size: var(--size-graphic); font-weight: var(--weight-mid); color: var(--ink-2); text-decoration: none; white-space: nowrap;
  border-bottom: var(--line-strong) solid transparent;
  transition: color var(--dur-ui) var(--ease), background-color var(--dur-ui) var(--ease);
}
.site-nav__key { margin-left: var(--space-2); padding-left: var(--space-2); border-left: var(--line) solid var(--rule); }
.site-nav a[aria-current] { color: var(--ink); font-weight: var(--weight-strong); border-bottom-color: var(--accent); }
.site-nav a:active, .site-head__brand:active, .site-head__menu:active {
  background: var(--paper-2); transform: translateY(1px); transition-duration: var(--dur-press);
}
@media (hover: hover) { .site-nav a:hover, .site-head__brand:hover { color: var(--accent); } }
header.site-head :focus-visible { outline: var(--focus); outline-offset: calc(var(--focus-offset) * -1); }
/* the focused skip link opens above the header; main takes focus from it without a ring */
a.skip:focus { z-index: 11; }
main:focus { outline: none; }

/* Menu button: phones with JS only. Its label never changes. */
.site-head__menu {
  display: none; align-items: center; justify-content: center;
  min-height: var(--control-h); min-width: var(--control-h); margin-left: var(--space-1); padding: 0 var(--space-2);
  font: inherit; font-size: var(--size-graphic); font-weight: var(--weight-mid); color: var(--ink);
  background: transparent; border: var(--line) solid var(--rule); border-radius: var(--radius); cursor: pointer;
}
.site-head__menu[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
@media (hover: hover) { .site-head__menu:hover { border-color: var(--rule-strong); background: var(--paper-2); } }

@media (max-width: 767px) {
  /* phone row: brand, the two key links, Menu */
  .site-head__in { gap: 0; }
  .site-head__brand { font-size: var(--size-graphic); }
  .site-nav { gap: var(--space-1); min-width: 0; }
  .site-nav__key { margin-left: 0; padding-left: 0; border-left: 0; gap: 0; }
  .site-nav__key a { padding: 0 var(--space-1); }
  html.js .site-head__menu { display: inline-flex; }
  html.js .site-nav .site-nav__main { display: none; }
  html.js .site-nav .site-nav__main.is-open {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; left: 0; right: 0; top: var(--head-h);
    background: var(--paper); border-bottom: var(--line) solid var(--rule); box-shadow: var(--shadow-1);
    padding: var(--space-2) var(--gutter) var(--space-3);
  }
  html.js .site-nav__main.is-open a { display: flex; font-size: var(--size-4); padding: 0; border-bottom: var(--line) solid var(--rule); }
  html.js .site-nav__main.is-open a[aria-current] { border-bottom: var(--line-strong) solid var(--accent); }
  /* without JS the bar wraps so Work, Library and About stay on screen */
  html:not(.js) .site-head__in { flex-wrap: wrap; padding-block: var(--space-1); }
  html:not(.js) .site-nav { flex-wrap: wrap; }
  /* the wrapped bar is taller than --head-h, so without JS it scrolls away instead of covering focused links */
  html:not(.js) header.site-head { position: relative; }
}

/* 2. Breadcrumb: depth 2 and below. One line on desktop, "← Parent" on phones */
.crumbs { margin: var(--space-3) 0 0; font-size: var(--size-graphic); color: var(--ink-3); }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; align-items: center; overflow: hidden; }
.crumbs li { display: inline-flex; align-items: center; min-width: 0; white-space: nowrap; }
.crumbs li + li::before { content: "›"; padding: 0 var(--space-2); color: var(--ink-3); }
.crumbs a {
  display: inline-flex; align-items: center; justify-content: center; min-height: var(--control-h); min-width: var(--control-h); color: var(--ink-2);
  text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: var(--underline-offset);
}
.crumbs [aria-current="page"] { color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.crumbs a:active { background: var(--paper-2); transform: translateY(1px); transition-duration: var(--dur-press); }
@media (hover: hover) { .crumbs a:hover { color: var(--accent); text-decoration-color: var(--accent); } }
.crumbs .crumbs__up { display: none; }
@media (max-width: 767px) {
  .crumbs ol { display: none; }
  .crumbs .crumbs__up { display: inline-flex; align-items: center; min-height: var(--control-h); color: var(--ink-2); text-decoration: none; }
}
/* r5 (quality M4, journeys R5-M2, NAV.md 11.4): on a page other pages link into at a section, gen.cjs makes the breadcrumb
   main's first child (nav.crumbs--pin). It sticks right under the header with the same glass, so after a section jump
   the page name and the way up stay in view; the jumped-to heading lands below the row (scroll-padding-top) */
.crumbs--pin {
  position: sticky; top: calc(var(--head-h) + var(--line)); z-index: 9; min-height: var(--control-h);
  background: color-mix(in srgb, var(--paper) 58%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
  border-bottom: var(--line) solid transparent; transition: border-color var(--dur-ui) var(--ease);
}
header.site-head[data-scrolled] ~ .page .crumbs--pin { border-bottom-color: var(--rule); }
:root:has(.crumbs--pin) { --pin-h: calc(var(--control-h) + var(--line)); scroll-padding-top: calc(var(--head-h) + var(--line) + var(--pin-h) + var(--space-3)); }
@media (max-width: 767px) {
  /* phones: "← Parent › Page name" on one line; the name gives way (ellipsis) before the up-link does */
  .crumbs--pin { display: flex; align-items: center; gap: var(--space-2); }
  .crumbs--pin .crumbs__up { order: -1; flex: none; }
  .crumbs--pin ol { display: flex; min-width: 0; }
  .crumbs--pin li:not([aria-current]) { display: none; }
  .crumbs--pin li[aria-current] { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .crumbs--pin li[aria-current]::before { padding: 0 var(--space-2) 0 0; }
  /* without JS the phone header scrolls away (section 1), so the row sticks to the top */
  html:not(.js) .crumbs--pin { top: 0; }
  html:not(.js):has(.crumbs--pin) { scroll-padding-top: calc(var(--pin-h) + var(--space-3)); }
}
/* r6 (wayfinding P1): on narrow phones a long page name takes two lines inside the 44 px row before it is cut */
@media (max-width: 400px) {
  .crumbs--pin li[aria-current] { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; white-space: normal; line-height: 1.25; }
}

/* 3. Context line: plain text, never a link or a Tab stop; a segment never breaks inside.
   A book page names the next chapter on its own line under it (p.context-next, one link). */
.context { margin: var(--space-2) 0 var(--space-2); font-size: var(--size-graphic); color: var(--ink-3); }
.context > span { white-space: nowrap; }
.context b { color: var(--ink-2); font-weight: var(--weight-strong); }
.context-next { margin: 0 0 var(--space-2); font-size: var(--size-graphic); }
.context-next a { display: inline-flex; align-items: center; min-height: var(--control-h); color: var(--accent); }

/* 4. Layer marker at the top of an in-page Deep dive or Evidence section */
.num[data-wayfind="layer"] { font-size: var(--size-graphic); color: var(--ink-3); letter-spacing: var(--tracking-caps); text-transform: uppercase; }

/* 5. On this page, In this section, Chapters, Related */
.toc .toc__cap, .children .caps, .chapters .caps { font-size: var(--size-graphic); color: var(--ink-3); }
.children ul, .chapters ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2) var(--space-4); grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.children a, .chapters a { display: inline-flex; align-items: center; min-height: var(--control-h); }
/* links that wrap to two lines keep a visible gap from their neighbours */
.children a, .related a { padding-block: var(--space-1); box-sizing: border-box; }
.chapters [aria-current="page"] { display: inline-flex; align-items: center; min-height: var(--control-h); color: var(--ink); font-weight: var(--weight-strong); }
.children { margin-bottom: var(--space-5); }
@media (min-width: 1024px) { .deep .toc { top: calc(var(--head-h) + var(--space-3)); } }
@media (min-width: 1024px) { main:has(> .crumbs--pin) .deep .toc { top: calc(var(--head-h) + var(--line) + var(--pin-h) + var(--space-3)); } }
/* a deep block whose contents list was left out (fewer than two entries) is one column */
.deep.deep--solo { grid-template-columns: minmax(0, 1fr); }
/* the contents link of the section in view (nav.js) carries the current mark: a 2 px accent rule left of its item
   (one rule however many lines the item wraps to), with the link text in full ink */
/* r3 (quality M-2): 4 px above and below each item keeps two wrapped contents links at least 8 px apart */
.toc li { border-left: var(--line-strong) solid transparent; padding: var(--space-1) 0 var(--space-1) var(--space-2); }
.toc li:has(> a[aria-current="location"]) { border-left-color: var(--accent); }
.toc a[aria-current="location"] { color: var(--ink); }
/* r6 (wayfinding P6, B10): every template keeps its contents list on the same side, the right, as the deep-dive cases do */
@media (min-width: 1024px) {
  .deep { grid-template-columns: minmax(0, 1fr) 14rem; }
  .deep > .toc { grid-column: 2; grid-row: 1; }
  .deep > .body { grid-column: 1; grid-row: 1; }
}
/* deep-dive cases (main[data-toc="side"], written by gen.cjs on /case/ pages only): the contents sit beside the head
   from 1024 up, their caption level with the breadcrumb row; below 768 a collapsed copy sits under the context line */
.toc--head { display: none; }
@media (min-width: 1024px) {
  main[data-toc="side"] { display: grid; grid-template-columns: minmax(0, 1fr) 16rem; column-gap: var(--space-6); align-items: start; }
  main[data-toc="side"] > .head { grid-column: 1; grid-row: 1; }
  main[data-toc="side"] > .deep { display: contents; }
  main[data-toc="side"] .deep > .toc { grid-column: 2; grid-row: 1 / span 2; margin-top: calc(var(--space-4) + var(--space-3)); }
  main[data-toc="side"] .deep > .toc > .caps:first-child { display: flex; align-items: center; min-height: var(--control-h); margin: 0; }
  main[data-toc="side"] .deep > .body { grid-column: 1; grid-row: 2; }
  main[data-toc="side"] > .end { grid-column: 1 / -1; grid-row: 3; }
}
@media (max-width: 767px) {
  main[data-toc="side"] .deep > .toc { display: none; }
  .toc--head { display: block; margin: 0 0 var(--space-3); border-top: var(--line) solid var(--rule); border-bottom: var(--line) solid var(--rule); }
  /* the summary is a control: a chevron that turns when open, hover and pressed states */
  .toc--head summary {
    display: flex; align-items: center; gap: var(--space-2); min-height: var(--control-h); cursor: pointer; list-style: none;
    font-size: var(--size-graphic); color: var(--ink-2); transition: color var(--dur-ui) var(--ease), background-color var(--dur-ui) var(--ease);
  }
  .toc--head summary::-webkit-details-marker { display: none; }
  .toc--head summary::after {
    content: ""; flex: none; margin-left: auto; margin-right: var(--space-2); width: 0.5em; height: 0.5em;
    border-right: var(--line-strong) solid currentColor; border-bottom: var(--line-strong) solid currentColor;
    transform: translateY(-25%) rotate(45deg); transition: transform var(--dur-ui) var(--ease);
  }
  .toc--head[open] summary::after { transform: translateY(25%) rotate(-135deg); }
  .toc--head summary:active { background: var(--paper-2); transition-duration: var(--dur-press); }
  /* numbered like the desktop list (templates.css .deep .toc) */
  .toc--head ol { list-style: none; margin: 0; padding: 0 0 var(--space-2); counter-reset: s; }
  .toc--head li { counter-increment: s; }
  .toc--head a { display: flex; align-items: center; min-height: var(--control-h); font-size: var(--size-graphic); color: var(--ink-2); text-decoration: none; }
  .toc--head a::before { content: counter(s, decimal-leading-zero); flex: none; margin-right: var(--space-2); font-weight: var(--weight-strong); color: var(--accent); }
}
@media (hover: hover) { .toc--head summary:hover, .toc--head a:hover { color: var(--accent); } }
.related { margin: 0 0 var(--space-4); padding: var(--space-3); background: var(--paper-2); border-left: var(--line-strong) solid var(--accent); }
.related .caps { margin: 0; font-size: var(--size-graphic); color: var(--ink-2); }
.related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.related a { display: inline-flex; align-items: center; min-height: var(--control-h); color: var(--ink); font-weight: var(--weight-strong); text-underline-offset: var(--underline-offset); }
@media (hover: hover) { .related a:hover { color: var(--accent); } }
/* r3 (critic 4): a body link whose own words do not say where it goes shows the destination's name on a line of its own
   (gen.cjs linkHtml, span.dest); in running text the name follows on the same line after a middle dot */
a .dest { display: block; margin-top: var(--space-1); font-size: var(--size-graphic); font-weight: var(--weight-body); line-height: var(--leading-snug); color: var(--ink-2); }
a.solo:has(> .dest) { flex-direction: column; align-items: flex-start; justify-content: center; padding-block: var(--space-1); box-sizing: border-box; }
a:not(.solo) > .dest { display: inline; margin: 0; }
a:not(.solo) > .dest::before { content: "· "; }
@media (hover: hover) { a:hover .dest { color: var(--accent); } }
/* r4 (quality M1): a name inside a caps label keeps sentence case at chrome size (gen.cjs adds none there today) */
.caps .dest { text-transform: none; letter-spacing: normal; font-size: var(--size-graphic); }
/* r4 (quality P4, CRAFT 7.2): a link that is the whole block rests with the same --ink-3 underline as running-text links.
   r5 (quality M2): :where() keeps this at element weight, so the hover and pressed colours still win */
a:where(.solo) { text-decoration-color: var(--ink-3); }
/* r4 (quality M4, NAV.md 10.4): the /library/ card groups are solid tiles (kicker, title, one line), never bulleted; the
   chapter lists number their entries */
ul.tiles { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
ul.tiles > li { display: grid; margin: 0; }
/* r5 (quality M3, P2): a /library/ list whose every entry is one whole link (the stage lists, the chapter list) is an
   unbulleted grid like nav.chapters, one 44 px row per entry */
ul.link-grid { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: var(--space-2) var(--space-4); grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
ul.link-grid > li { margin: 0; }
ul.link-grid a { display: inline-flex; align-items: center; min-height: var(--control-h); }
ul.link-grid a.solo:has(> .dest) { display: inline-flex; flex-direction: column; align-items: flex-start; }
.next-card__d { font-size: var(--size-graphic); line-height: var(--leading-snug); color: var(--ink-2); }
.next-card .dest { margin-top: 0; }
.chapter-n { font-variant-numeric: tabular-nums; color: var(--ink-3); margin-right: var(--space-1); }
/* r3 (critic 5): /book/ lists its chapters in the head, under the lead; /documents/ heads its list with the page's own h2 */
.head > .chapters { margin: var(--space-4) 0 var(--space-5); }
.children > h2 { margin: 0 0 var(--space-3); }
/* r3 (journeys N2): the related cases of a healthcare case are next cards inside its last section */
.prose .next-step--related { margin: var(--space-3) 0 0; }
.prose .next-card { text-decoration: none; }

/* 6. End of page (div.end): next-step cards, pager, Back to <parent>. Solid tiles, never glassy.
   Home has no div.end: its nav.next-step sits between </main> and the footer and gets the same rule. */
body > .next-step, .page > .next-step { max-width: var(--page-max); margin: var(--space-5) auto 0; padding: 0 var(--gutter); box-sizing: border-box; }
.end { display: grid; gap: var(--space-3); margin: var(--space-5) 0 var(--space-3); padding-top: var(--space-4); border-top: var(--line) solid var(--rule); }
.end__back { margin: 0; }
/* r5 (quality P6): links in the end block rest with the --ink-3 underline too; :where() leaves hover and pressed in charge */
:where(.end) a { text-decoration-color: var(--ink-3); }
.next-step__cards { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(16rem, 24rem)); }
.next-card, .pager a {
  display: grid; gap: var(--space-1); align-content: start; min-height: var(--control-h); padding: var(--space-3) var(--space-4);
  background: var(--paper-2); border-left: var(--line-strong) solid var(--accent); color: var(--ink); text-decoration: none;
  transition: background-color var(--dur-ui) var(--ease);
}
.pager__sep { display: none; }
.next-card__k, .pager__k { font-size: var(--size-graphic); color: var(--ink-3); }
.next-card__t, .pager__t { font-size: var(--size-4); font-weight: var(--weight-strong); line-height: var(--leading-snug); color: var(--accent); }
.next-card:active, .pager a:active { transform: translateY(1px); transition-duration: var(--dur-press); }
@media (hover: hover) { .next-card:hover, .pager a:hover { background: color-mix(in srgb, var(--accent) 8%, var(--paper-2)); } }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.pager a[rel="next"] { grid-column: 2; text-align: right; }
a.back { display: inline-flex; align-items: center; min-height: var(--control-h); font-size: var(--size-graphic); color: var(--ink-2); }
a.back:active { background: var(--paper-2); transform: translateY(1px); transition-duration: var(--dur-press); }
@media (max-width: 767px) { .pager { grid-template-columns: 1fr; } .pager a[rel="next"] { grid-column: 1; text-align: left; } }

/* 7. Footer: secondary links and the legal line, no layer list */
.site-foot { max-width: var(--page-max); margin: var(--space-5) auto 0; padding: var(--space-3) var(--gutter) var(--space-6); box-sizing: border-box; border-top: var(--line) solid var(--rule); font-size: var(--size-graphic); color: var(--ink-3); }
.site-foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--space-4); }
.site-foot a { display: inline-flex; align-items: center; min-height: var(--control-h); color: var(--ink-2); }
.site-foot .legal { margin: var(--space-2) 0 0; line-height: var(--control-h); }
.page > .site-foot { padding-inline: 0; }

/* 8. The header never cross-fades between pages */
::view-transition-group(site-head) { animation: none; }
::view-transition-old(site-head), ::view-transition-new(site-head) { animation: none; }

/* 9. Fallbacks */
@media (prefers-reduced-transparency: reduce) {
  header.site-head { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: var(--rule); }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { header.site-head { background: var(--paper); } }
@media (prefers-reduced-transparency: reduce) { .crumbs--pin { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: var(--rule); } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .crumbs--pin { background: var(--paper); } }
@media (forced-colors: active) {
  header.site-head { background: Canvas; backdrop-filter: none; border-bottom: 1px solid CanvasText; }
  .crumbs--pin { background: Canvas; backdrop-filter: none; border-bottom: 1px solid CanvasText; }
  .site-nav a[aria-current] { forced-color-adjust: none; color: Highlight; border-bottom-color: Highlight; text-decoration: underline; }
  .site-nav a:not([aria-current]) { border-bottom-color: Canvas; }
  .site-head__menu { border-color: ButtonText; }
  .next-card, .pager a, .related { border: 1px solid CanvasText; }
  /* r4 (quality M2, W20): the contents mark stays visible: Highlight rule left of the current item, underlined link */
  .toc li { border-left-color: Canvas; }
  .toc li:has(> a[aria-current="location"]) { border-left-color: Highlight; }
  .toc a[aria-current="location"] { text-decoration: underline; text-decoration-thickness: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  header.site-head, .crumbs--pin, .site-nav a, .next-card, .pager a, .toc--head summary, .toc--head summary::after { transition: none; }
  .site-nav a:active, .site-head__menu:active, .crumbs a:active, .next-card:active, .pager a:active, a.back:active { transform: none; }
}
@media print { header.site-head, .crumbs, .end, .next-step, .site-foot nav { display: none; } }
/* nav:end */

/* 76-flow-panels: m4/flowpanel.css */
/* 76-flow-panels (QA-014, round 3): the flows v3 component for the FLOW panels (m4/flowpanel.cjs). Six hues with one meaning
   each (flows/v3/STANDARD.md §3.1): gold noticing, violet testing, --contrast the leak or problem, --accent the decision,
   the fix and the result, --process the mechanism built, cyan rolled out and owned. The three site tokens come from
   m2/tokens.css; gold, violet and cyan start from the STANDARD §3.2 values and are moved the least needed so that every
   pair of the six hues keeps CIE76 ΔE 20 or more under protan, deutan and tritan simulation in light and dark (§3.4, which
   binds: the site's --contrast, --accent and --process stay as they are). Phone first: one rail, lanes as a bracketed
   pair, no reserved canvas; lanes and exception chips move beside their stage when the panel is wide enough. Static: nothing
   moves, so reduced motion already shows the finished diagram. Every label is 14px or more; wires are borders, so forced
   colours keep them. */
:root {
  --fp-gold: #b38200; --fp-gold-on: #14171c; --fp-gold-ink: #7f5600;
  --fp-violet: #894be2; --fp-violet-on: #ffffff; --fp-violet-ink: #7b34c4;
  --fp-cyan: #1395aa; --fp-cyan-on: #14171c; --fp-cyan-ink: #0b6577;
  --fp-process-ink: color-mix(in srgb, var(--process) 55%, var(--ink)); /* --process is marks only; this is its text form */
}
@media (prefers-color-scheme: dark) {
  :root {
    --fp-gold: #a68503; --fp-gold-on: #111318; --fp-gold-ink: #e2b955;
    --fp-violet: #8250b8; --fp-violet-on: #ffffff; --fp-violet-ink: #c3a6f2;
    --fp-cyan: #63d5d8; --fp-cyan-on: #111318; --fp-cyan-ink: #7fd3df;
  }
}
ol.fp [data-hue="gold"], ol.fp[data-hue="gold"] > li { --h: var(--fp-gold); --h-on: var(--fp-gold-on); --h-ink: var(--fp-gold-ink); }
ol.fp [data-hue="violet"], ol.fp[data-hue="violet"] > li { --h: var(--fp-violet); --h-on: var(--fp-violet-on); --h-ink: var(--fp-violet-ink); }
ol.fp [data-hue="cyan"], ol.fp[data-hue="cyan"] > li { --h: var(--fp-cyan); --h-on: var(--fp-cyan-on); --h-ink: var(--fp-cyan-ink); }
ol.fp [data-hue="accent"], ol.fp[data-hue="accent"] > li { --h: var(--accent); --h-on: var(--accent-ink); --h-ink: var(--accent); }
ol.fp [data-hue="contrast"], ol.fp[data-hue="contrast"] > li { --h: var(--contrast); --h-on: var(--contrast-ink); --h-ink: var(--contrast); }
ol.fp [data-hue="process"], ol.fp[data-hue="process"] > li { --h: var(--process); --h-on: var(--process-ink); --h-ink: var(--fp-process-ink); }
ol.fp > li[data-hp="gold"] { --hp: var(--fp-gold); } ol.fp > li[data-hp="violet"] { --hp: var(--fp-violet); }
ol.fp > li[data-hp="cyan"] { --hp: var(--fp-cyan); } ol.fp > li[data-hp="accent"] { --hp: var(--accent); }
ol.fp > li[data-hp="contrast"] { --hp: var(--contrast); } ol.fp > li[data-hp="process"] { --hp: var(--process); }
/* the heading above a panel: 1 to 3 of its own words in the hue that carries them (STANDARD §11: keywords double as the legend) */
.fp-kw[data-hue="accent"] { color: var(--accent); } .fp-kw[data-hue="contrast"] { color: var(--contrast); }
.fp-kw[data-hue="violet"] { color: var(--fp-violet-ink); } .fp-kw[data-hue="process"] { color: var(--fp-process-ink); }
.fp-kw[data-hue="gold"] { color: var(--fp-gold-ink); } .fp-kw[data-hue="cyan"] { color: var(--fp-cyan-ink); }
/* relation words for screen readers only (what the wires show): visually hidden, still read in order */
ol.fp .fp-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

ol.fp {
  --d: 2.75rem; --rail: 1.375rem; --gx: 0.75rem; --cg: var(--space-3); --rg: 1.75rem; --r: 0.75rem; --w: var(--line-strong, 2px);
  container: fp / inline-size; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--cg); row-gap: var(--rg);
  list-style: none; margin: var(--space-4) 0; padding: 0; counter-reset: fp; color: var(--ink);
}
ol.fp > li {
  grid-column: 1 / -1; position: relative; display: grid; grid-template-columns: var(--d) minmax(0, 1fr); column-gap: var(--gx);
  align-content: start; margin: 0; padding: 0; min-width: 0;
}
ol.fp .fp-g { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* the stage disc: the role's icon on the stage hue; a target is the open ring of a goal not yet reached */
ol.fp .fp-i {
  grid-column: 1; grid-row: 1; position: relative; z-index: 1; box-sizing: border-box; width: var(--d); height: var(--d);
  display: grid; place-items: center; border-radius: var(--radius-pin, 50%); border: var(--w) solid var(--h); background: var(--h); color: var(--h-on);
}
ol.fp .fp-i .fp-g { width: 1.375rem; height: 1.375rem; }
ol.fp > li[data-role="target"] .fp-i { background: var(--paper); color: var(--h-ink); }

/* the stage card: a solid band in the stage hue, then the item's own words on the hue's tint */
ol.fp .fp-c { grid-column: 2; grid-row: 1; min-width: 0; box-sizing: border-box; border-radius: var(--r); overflow: hidden; background: color-mix(in srgb, var(--h) 10%, var(--paper)); }
ol.fp > li[data-role="target"] .fp-c { border: var(--w) dashed var(--h); background: var(--paper); }
ol.fp:not([data-hue]) > li[data-role="result"] .fp-c { border: var(--w) solid var(--h); } /* a one-hue panel frames all its cards alike */
ol.fp .fp-b {
  display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-2); padding: var(--space-2) var(--space-3);
  background: var(--h); color: var(--h-on); font-size: var(--size-graphic, 0.875rem); font-weight: 700; line-height: 1.4;
  letter-spacing: var(--tracking-caps, 0.06em); text-transform: uppercase; overflow-wrap: anywhere; font-variant-numeric: normal;
}
ol.fp--steps:not([data-num="none"]) > li:not([data-col="x"]), ol.fp--one:not([data-num="none"]) > li:not([data-col="x"]) { counter-increment: fp; }
ol.fp--steps:not([data-num="none"]) > li > .fp-c > .fp-b::before { content: counter(fp, decimal-leading-zero); font-variant-numeric: tabular-nums; }
ol.fp .fp-d, ol.fp .fp-t {
  padding: var(--space-2) var(--space-3) calc(var(--space-2) + var(--space-1)); font-size: var(--size-4, 1rem); line-height: 1.5; color: var(--ink);
  overflow-wrap: anywhere; font-variant-numeric: normal; text-wrap: balance;
}
ol.fp--one .fp-c { display: flex; align-items: center; min-height: var(--d); }
ol.fp--one .fp-t { padding-top: var(--space-2); }
ol.fp--one:not([data-num="none"]) .fp-t::before { content: counter(fp); margin-right: var(--space-2); font-weight: 700; color: var(--h-ink); font-variant-numeric: tabular-nums; }

/* a figure already in the words, set as the hero of its stage (STANDARD §4.1: figures only are tabular). A figure never
   breaks across lines: it keeps one line and scales with the panel width so the longest one fits at 320 */
ol.fp .fp-fig { font-size: clamp(1.125rem, 6.4cqi, 1.5rem); font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; color: var(--h-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
ol.fp .fp-fig[data-hero] { font-size: clamp(1.375rem, 8.4cqi, 2rem); letter-spacing: -0.02em; }
ol.fp .fp-fig[data-lead] { display: block; }
.fp-nb { white-space: nowrap; } /* a hyphenated word (in a stage, or a heading keyword) never splits at its hyphen */
ol.fp .fp-x .fp-fig { color: var(--contrast); font-size: clamp(1.125rem, 6.4cqi, 1.3125rem); }
/* punctuation right after a figure: inside the figure, in the running text's weight and colour */
ol.fp .fp-pn { font-weight: 400; color: var(--ink-2); letter-spacing: 0; }
/* short statements wrap balanced so no line ends on one word (STANDARD §4.1) */
ol.fp .fp-b, ol.fp--flow .fp-u, ol.fp .fp-xq > div, ol.fp .fp-xa > div, ol.fp .fp-xd { text-wrap: balance; }

/* clause bars inside a stage: each "~N% words" clause keeps its words and gets a bar of its own figure */
ol.fp .fp-rows { display: grid; row-gap: var(--space-2); }
ol.fp .fp-r .fp-bar { display: block; margin-top: var(--space-1); height: var(--space-2); background: var(--paper); }
ol.fp .fp-r .fp-bar::before { content: ""; display: block; height: 100%; width: max(var(--fp-v), var(--space-1)); background: var(--h); }

/* wires (STANDARD §6): 2px borders in the hue of the stage they leave, with a chevron into the next disc.
   in: w causal, dot an outcome, fork a lane from the stage above, pair a lane that opens the panel.
   out: w / dot down this stage's rail, and = to the lane beside it on the phone only, merge = back to the main rail. */
ol.fp > li::before, ol.fp > li::after { position: absolute; box-sizing: border-box; pointer-events: none; }
ol.fp > li:is([data-in="w"], [data-in="dot"], [data-in="fork"], [data-in="pair"])::before {
  content: ""; left: calc(var(--rail) - var(--w) / 2); top: calc(0px - var(--rg)); height: calc(var(--rg) - var(--space-1));
  border-left: var(--w) solid var(--hp, var(--h));
}
ol.fp > li:is([data-out="w"], [data-out="dot"], [data-out="and"], [data-out="merge"])::after {
  content: ""; left: calc(var(--rail) - var(--w) / 2); top: calc(var(--d) + var(--space-1)); bottom: 0; border-left: var(--w) solid var(--h);
}
ol.fp > li[data-in="dot"]::before, ol.fp > li[data-out="dot"]::after { border-left-style: dotted; }
ol.fp > li:is([data-in="w"], [data-in="dot"]) .fp-i::before {
  content: ""; position: absolute; left: 50%; top: -0.75rem; width: 0.5rem; height: 0.5rem; box-sizing: border-box;
  border: 0 solid var(--hp, var(--h)); border-width: 0 var(--w) var(--w) 0; transform: translateX(-50%) rotate(45deg);
}

/* exception chips: dashed --contrast, with a warning (or eye-off) icon and, in the flow kind, the recovery under it */
ol.fp .fp-x {
  position: relative; box-sizing: border-box; min-width: 0; padding: var(--space-2) var(--space-3) calc(var(--space-2) + var(--space-1));
  border: var(--w) dashed var(--contrast); border-radius: var(--r); background: color-mix(in srgb, var(--contrast) 7.0%, var(--paper));
}
ol.fp .fp-xq, ol.fp .fp-xa { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); column-gap: var(--space-2); align-items: start;
  font-size: var(--size-4, 1rem); line-height: 1.45; overflow-wrap: anywhere; font-variant-numeric: normal; }
ol.fp .fp-xq { color: var(--ink); font-weight: var(--weight-strong, 600); }
ol.fp .fp-xa { margin-top: var(--space-1); color: var(--ink-2); }
ol.fp .fp-xq .fp-g { color: var(--contrast); margin-top: 0.0625rem; }
ol.fp .fp-xa .fp-g { color: var(--accent); margin-top: 0.0625rem; }
ol.fp .fp-xd { margin-top: var(--space-1); padding-left: calc(1.25rem + var(--space-2)); font-size: var(--size-4, 1rem); line-height: 1.5; color: var(--ink); overflow-wrap: anywhere; font-variant-numeric: normal; }
ol.fp--flow .fp-xq, ol.fp--flow .fp-xa { font-size: var(--size-graphic, 0.875rem); }
/* a chip item of its own sits under its stage on the phone, with a dashed drop; the main wire passes behind it */
ol.fp > li[data-col="x"] { display: block; margin-left: calc(var(--d) + var(--gx)); }
ol.fp > li[data-col="x"]::before { content: ""; left: var(--space-4); top: calc(0px - var(--rg)); height: var(--rg); border-left: var(--w) dashed var(--contrast); }
ol.fp > li[data-pass]::after { content: ""; left: calc(var(--rail) - var(--d) - var(--gx) - var(--w) / 2); top: calc(0px - var(--rg)); bottom: 0; border-left: var(--w) solid var(--hp, var(--process)); }
ol.fp > li[data-pass="dot"]::after { border-left-style: dotted; }
/* a chip inside its stage (flow kind, or the end of a stage's words): under the card on the phone */
ol.fp > li > .fp-x { grid-column: 2; grid-row: 2; margin-top: var(--space-3); }
ol.fp > li > .fp-x::before { content: ""; position: absolute; left: var(--space-4); top: calc(0px - var(--space-3) - var(--w)); height: var(--space-3); border-left: var(--w) dashed var(--contrast); }

/* flow kind: the item's number and title in the band, the tools line, the words, then its exception and recovery */
ol.fp--flow .fp-b { font-size: var(--size-4, 1rem); font-weight: var(--weight-strong, 600); letter-spacing: 0; text-transform: none; }
ol.fp--flow .fp-n { font-weight: 700; font-variant-numeric: tabular-nums; }
ol.fp--flow .fp-u { padding: var(--space-2) var(--space-3); font-size: var(--size-graphic, 0.875rem); font-weight: var(--weight-strong, 600); line-height: 1.4; color: var(--ink-2); overflow-wrap: anywhere; font-variant-numeric: normal; }

/* phone: a smaller disc and tighter rhythm so long panels stay short; the words keep their 16px size, and every card part
   keeps 8px above and below and 12px at the sides (CRAFT floor 8px) */
@media (max-width: 30rem) {
  ol.fp { --d: 2.25rem; --rail: 1.125rem; --gx: 0.5rem; --rg: 1.25rem; }
  ol.fp .fp-i .fp-g { width: 1.125rem; height: 1.125rem; }
  ol.fp .fp-b { padding: var(--space-2) 0.75rem; }
  ol.fp .fp-d, ol.fp .fp-t { padding: var(--space-2) 0.75rem 0.75rem; }
  ol.fp--flow .fp-u { padding: var(--space-2) 0.75rem; }
  ol.fp > li > .fp-x { margin-top: var(--space-2); }
  ol.fp > li > .fp-x::before { top: calc(0px - var(--space-2) - var(--w)); height: var(--space-2); }
  ol.fp .fp-x { padding: var(--space-2) 0.75rem; }
  ol.fp .fp-xa { margin-top: var(--space-1); }
  ol.fp.fp--loop { --loop: 1.25rem; } /* the label column keeps its two-word lines */
}

/* narrow (every phone): two lanes stay a pair. They step in by one disc, and one bracket rail comes down from the stage
   above, sends a tick with a chevron into each lane's disc (the fork), and carries on from the last lane into the next
   stage (the merge). A pair that opens the panel is a plain bracket with no chevrons. */
@container fp (max-width: 33.999rem) {
  ol.fp > li:is([data-col="a"], [data-col="b"]) { --ind: var(--d); --tick: calc(var(--ind) - var(--rail) + var(--w) / 2 - var(--space-1)); padding-left: var(--ind); }
  ol.fp > li[data-col="a"][data-in]::before { height: calc(var(--rg) + var(--d) / 2); }
  ol.fp > li[data-col="a"]::after {
    content: ""; left: calc(var(--rail) - var(--w) / 2); top: calc(var(--d) / 2 - var(--w) / 2); bottom: calc(0px - var(--rg)); width: var(--tick);
    border: 0 solid var(--hp, var(--h)); border-width: var(--w) 0 0 var(--w);
  }
  ol.fp > li[data-col="b"]::before {
    content: ""; left: calc(var(--rail) - var(--w) / 2); top: 0; height: calc(var(--d) / 2 + var(--w) / 2); width: var(--tick);
    border: 0 solid var(--hp, var(--h)); border-width: 0 0 var(--w) var(--w);
  }
  ol.fp > li[data-col="b"][data-out="merge"]::after {
    left: calc(var(--rail) - var(--w) / 2); top: calc(var(--d) / 2 - var(--w) / 2); bottom: 0; width: var(--tick);
    border: 0 solid var(--h); border-width: var(--w) 0 0 var(--w);
  }
  ol.fp > li:is([data-col="a"][data-in], [data-col="b"][data-in="fork"]) .fp-i::before {
    content: ""; position: absolute; left: -0.6875rem; top: calc(50% - 0.25rem); width: 0.5rem; height: 0.5rem; box-sizing: border-box;
    border: 0 solid var(--hp, var(--h)); border-width: var(--w) var(--w) 0 0; transform: rotate(45deg);
  }
}

/* wide: lanes side by side with a fork and a merge, chips beside their stage with a dashed side wire */
@container fp (min-width: 34rem) {
  ol.fp > li[data-col="a"] { grid-column: 1 / 7; }
  ol.fp > li[data-col="b"] { grid-column: 7 / 13; }
  ol.fp > li[data-col="s"] { grid-column: 1 / 8; }
  ol.fp > li[data-col="x"] { grid-column: 8 / 13; margin-left: 0; align-self: start; }
  ol.fp > li[data-col="x"]::before { left: calc(0px - var(--cg) - var(--w)); top: var(--space-4); width: calc(var(--cg) + var(--w)); height: 0; border-left: 0; border-top: var(--w) dashed var(--contrast); }
  ol.fp > li[data-pass]::after, ol.fp > li[data-in="pair"]::before, ol.fp > li[data-out="and"]::after { content: none; }
  ol.fp > li[data-in="fork"]::before {
    left: calc(var(--rail) - 100% - var(--cg) - var(--w) / 2); width: calc(100% + var(--cg) + var(--w)); top: calc(0px - var(--rg) / 2);
    height: calc(var(--rg) / 2 - var(--space-1)); border-left: 0; border-top: var(--w) solid var(--hp); border-right: var(--w) solid var(--hp);
  }
  ol.fp > li[data-in="fork"] .fp-i::before {
    content: ""; position: absolute; left: 50%; top: -0.75rem; width: 0.5rem; height: 0.5rem; box-sizing: border-box;
    border: 0 solid var(--hp); border-width: 0 var(--w) var(--w) 0; transform: translateX(-50%) rotate(45deg);
  }
  ol.fp > li[data-out="merge"]::after {
    left: calc(var(--rail) - 100% - var(--cg) - var(--w) / 2); width: calc(100% + var(--cg) + var(--w)); bottom: calc(0px - var(--rg) / 2 - var(--w) / 2);
    border-left: 0; border-right: var(--w) solid var(--h); border-bottom: var(--w) solid var(--h);
  }
  ol.fp--flow > li, ol.fp > li[data-x] { grid-template-columns: var(--d) minmax(0, 1fr) minmax(0, 1fr); } /* chip titles keep one line */
  ol.fp > li > .fp-x { grid-column: 3; grid-row: 1; align-self: start; margin: var(--space-3) 0 0 var(--space-3); }
  ol.fp > li > .fp-x::before { left: calc(0px - var(--space-3) - var(--gx) - var(--w)); top: var(--space-3); width: calc(var(--space-3) + var(--gx)); height: 0; border-left: 0; border-top: var(--w) dashed var(--contrast); }
}

/* loop kind: an --accent return rail from the last stage back into the first disc */
ol.fp--loop { --loop: 1.75rem; padding-left: var(--loop); }
ol.fp--loop > li .fp-c::before { content: ""; position: absolute; box-sizing: border-box; left: calc(0px - var(--loop) + var(--space-2)); top: calc(0px - var(--rg)); bottom: 0; border-left: var(--w) solid var(--accent); }
ol.fp--loop > li:first-child .fp-c::before { top: calc(var(--d) / 2 - var(--w) / 2); width: calc(var(--loop) - var(--space-2)); border-top: var(--w) solid var(--accent); }
ol.fp--loop > li:last-child .fp-c::before { bottom: auto; height: calc(var(--rg) + var(--d) / 2 + var(--w) / 2); width: calc(var(--loop) - var(--space-2)); border-bottom: var(--w) solid var(--accent); }
ol.fp--loop > li:first-child .fp-c::after { content: ""; position: absolute; left: -0.6875rem; top: calc(var(--d) / 2 - 0.25rem); width: 0.5rem; height: 0.5rem; box-sizing: border-box;
  border: 0 solid var(--accent); border-width: var(--w) var(--w) 0 0; transform: rotate(45deg); }

/* both kind (layers): intent goes down a solid wire, evidence comes back up a dashed one beside it */
ol.fp--both { --rg: 2.25rem; }
ol.fp--both > li[data-in]::before { content: none; }
ol.fp--both > li[data-out]::after { left: calc(var(--rail) - 0.5rem - var(--w) / 2); bottom: calc(var(--space-1) - var(--rg)); border-left: var(--w) solid var(--process); }
ol.fp--both > li[data-in] .fp-i::before { left: calc(50% - 0.5rem); border-color: var(--process); }
ol.fp--both > li[data-out] .fp-c::before { content: ""; position: absolute; box-sizing: border-box; left: calc(var(--rail) + 0.5rem - var(--w) / 2); top: calc(var(--d) + var(--space-2)); bottom: calc(0px - var(--rg)); border-left: var(--w) dashed var(--process); }
ol.fp--both > li[data-out] .fp-c::after { content: ""; position: absolute; left: calc(var(--rail) + 0.5rem - 0.25rem); top: calc(var(--d) + var(--space-1)); width: 0.5rem; height: 0.5rem; box-sizing: border-box;
  border: 0 solid var(--process); border-width: var(--w) 0 0 var(--w); transform: rotate(45deg); }

/* bars kind: label and figure on one line, the bar of the item's own figure, then its words; one hue per panel */
ol.fp--bars { row-gap: var(--space-3); }
ol.fp--bars > li { display: block; }
/* the bars are the funnel's shape: no rail wires between rows */
ol.fp.fp--bars > li:is([data-src], [data-in], [data-out])::before, ol.fp.fp--bars > li:is([data-src], [data-in], [data-out])::after { content: none; }
ol.fp--bars > li[data-hero] { --tint: color-mix(in srgb, var(--h) 10%, var(--paper)); margin: var(--space-2) 0; border-radius: var(--r); background: var(--tint); box-shadow: 0 0 0 var(--space-2) var(--tint); }
ol.fp--bars .fp-bh { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr) auto; column-gap: var(--space-2); align-items: center; }
ol.fp--bars .fp-bh .fp-g { color: var(--h-ink); }
ol.fp--bars .fp-b { padding: 0; background: none; color: var(--ink); }
ol.fp--bars .fp-v { font-size: 1.375rem; font-weight: 800; line-height: 1.2; color: var(--h-ink); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
ol.fp--bars > li[data-hero] .fp-v { font-size: 2rem; }
ol.fp--bars .fp-bar { margin: var(--space-1) 0 0 calc(1.25rem + var(--space-2)); height: var(--space-3); background: var(--paper-2); }
ol.fp--bars .fp-bar::before { content: ""; display: block; box-sizing: border-box; height: 100%; width: max(var(--fp-v), var(--space-1)); background: var(--h); }
ol.fp--bars .fp-bar[data-under]::before { width: max(var(--fp-v), var(--space-3)); background: none; border: var(--w) dashed var(--h); }
ol.fp--bars .fp-d { padding: var(--space-1) 0 0 calc(1.25rem + var(--space-2)); font-size: var(--size-graphic, 0.875rem); line-height: 1.45; color: var(--ink-2); }
/* two bars panels side by side under their own headings when there is room */
.fp-duo { container: fpd / inline-size; margin: var(--space-4) 0; }
.fp-dg { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--space-4); }
.fp-side > :first-child { margin-top: 0; }
.fp-side > ol.fp { margin-bottom: 0; }
@container fpd (min-width: 36rem) { .fp-dg { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-5); } }

@media (forced-colors: active) {
  ol.fp .fp-i, ol.fp .fp-c { border: var(--w) solid CanvasText; }
  ol.fp .fp-b { border-bottom: 1px solid CanvasText; }
  ol.fp > li::before, ol.fp > li::after, ol.fp .fp-i::before, ol.fp .fp-c::before, ol.fp .fp-c::after, ol.fp .fp-x, ol.fp .fp-x::before { border-color: CanvasText; }
  ol.fp--bars .fp-bar { border: 1px solid CanvasText; }
  ol.fp .fp-bar::before { forced-color-adjust: none; background: CanvasText; }
  ol.fp--bars .fp-bar[data-under]::before { background: none; border-color: CanvasText; }
}
@media print { ol.fp .fp-b { background: none; color: inherit; } ol.fp > li { break-inside: avoid; } }

/* 91-docfig: m4/docfig.css */
/* 91-docfig (jarvis-033 item 8): figures drawn from a /documents/ section's own words (m4/docfig.cjs). Same six hues and
   discs as the flow panels (flowpanel.css above: --fp-gold/-violet/-cyan and the site --accent/--contrast/--process),
   so the two families read as one. Phone first: steps and flows are one rail; tiles are one column, then two or three
   when the figure is wide enough; the flow's second branch (the control built) sits under the chain with a return
   bracket. Static; every label 14px or more; wires are borders, so forced colours keep them. */
.docfig { margin: var(--space-4, 1.5rem) 0 var(--space-5, 2rem); container-type: inline-size; }
.docfig ol.df { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2, 0.5rem); counter-reset: df; }
.docfig ol.df > li { position: relative; margin: 0; padding: 0; min-width: 0; }
.docfig .df-g { width: 1.375rem; height: 1.375rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.docfig [data-hue="gold"] { --h: var(--fp-gold); --h-on: var(--fp-gold-on); --h-ink: var(--fp-gold-ink); }
.docfig [data-hue="violet"] { --h: var(--fp-violet); --h-on: var(--fp-violet-on); --h-ink: var(--fp-violet-ink); }
.docfig [data-hue="cyan"] { --h: var(--fp-cyan); --h-on: var(--fp-cyan-on); --h-ink: var(--fp-cyan-ink); }
.docfig [data-hue="accent"] { --h: var(--accent); --h-on: var(--accent-ink); --h-ink: var(--accent); }
.docfig [data-hue="contrast"] { --h: var(--contrast); --h-on: var(--contrast-ink); --h-ink: var(--contrast); }
.docfig [data-hue="process"] { --h: var(--process); --h-on: var(--process-ink); --h-ink: var(--fp-process-ink); }

/* steps and flow: a disc on a rail, the words beside it; the rail wire runs from one disc to the next */
.docfig ol.df--steps > li, .docfig ol.df--flow > li { --d: 2.75rem; display: grid; grid-template-columns: var(--d) minmax(0, 1fr); column-gap: var(--space-3, 1rem); align-items: start; }
.docfig ol.df--steps > li:not(:last-child), .docfig ol.df--flow > li:not(:last-child) { padding-bottom: var(--space-2, 0.5rem); } /* pilot: a stage with no sub-line keeps a visible wire */
.docfig .df-i {
  grid-column: 1; position: relative; z-index: 1; box-sizing: border-box; width: var(--d); height: var(--d); display: grid; place-items: center;
  border-radius: var(--radius-pin, 50%); border: var(--line-strong, 2px) solid var(--h); background: var(--h); color: var(--h-on);
}
.docfig ol.df > li[data-role="target"] .df-i { background: var(--paper); color: var(--h-ink); }
.docfig ol.df--steps > li:not(:last-child)::before, .docfig ol.df--flow > li:not(:last-child)::before {
  content: ""; position: absolute; left: calc(var(--d) / 2 - var(--line-strong, 2px) / 2); top: var(--d); bottom: calc(-1 * var(--space-2, 0.5rem));
  border-left: var(--line-strong, 2px) solid var(--h);
}
.docfig .df-c { grid-column: 2; min-width: 0; display: grid; gap: 0.125rem; padding: calc(var(--d) / 2 - 0.7em) 0 var(--space-1, 0.25rem); }
.docfig .df-t { font-size: var(--size-4, 1rem); font-weight: var(--weight-strong, 600); line-height: 1.4; color: var(--ink); text-wrap: balance; overflow-wrap: anywhere; }
.docfig .df-s { font-size: var(--size-graphic, 0.875rem); line-height: 1.45; color: var(--ink-2); overflow-wrap: anywhere; }
.docfig ol.df--steps > li { counter-increment: df; }
.docfig ol.df--steps .df-t::before { content: counter(df, decimal-leading-zero) " "; font-weight: 700; color: var(--h-ink); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.docfig .df-fig { font-weight: 800; color: var(--h-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.docfig ol.df > li[data-hero] .df-t { font-size: clamp(1.0625rem, 1rem + 1cqi, 1.25rem); }
.docfig ol.df > li[data-hero] .df-fig { font-size: 1.25em; letter-spacing: -0.01em; }

/* the flow's branch: the control built, bracketed under the chain and joined to it with a dotted return */
.docfig ol.df--branch { margin-top: var(--space-3, 1rem); padding-left: calc(2.75rem + var(--space-3, 1rem)); position: relative; }
.docfig ol.df--branch::before { content: ""; position: absolute; left: calc(1.375rem - 1px); top: calc(-1 * var(--space-3, 1rem)); height: var(--space-3, 1rem); border-left: var(--line-strong, 2px) dotted var(--process); }
.docfig ol.df--branch > li { --d: 2.25rem; }
.docfig ol.df--branch > li::after { content: ""; position: absolute; box-sizing: border-box; left: calc(-1 * var(--space-3, 1rem) - 1.375rem - 1px); top: 0; height: calc(var(--d) / 2 + var(--line-strong, 2px) / 2); width: calc(var(--space-3, 1rem) + 1.375rem + 1px); border-left: var(--line-strong, 2px) dotted var(--process); border-bottom: var(--line-strong, 2px) dotted var(--process); }
.docfig ol.df--branch > li:not(:last-child) .df-c::after { content: ""; position: absolute; left: calc(-1 * var(--space-3, 1rem) - 1.375rem - 1px); top: calc(var(--d) / 2); bottom: calc(-1 * var(--space-2, 0.5rem)); border-left: var(--line-strong, 2px) dotted var(--process); }
.docfig ol.df--branch > li:not(:last-child)::before { border-left-style: dotted; }
.docfig ol.df--branch .df-g { width: 1.125rem; height: 1.125rem; }
.docfig ol.df--branch .df-t { font-weight: var(--weight-strong, 600); font-size: var(--size-graphic, 0.875rem); }
.docfig ol.df--branch .df-c { padding-top: calc(var(--d) / 2 - 0.65em); }

/* tiles: a figure's own words in a card, the figure large, the role icon in the corner */
.docfig ol.df--tiles { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); gap: var(--space-3, 1rem); }
.docfig ol.df--tiles > li {
  container-type: inline-size; display: grid; grid-template-rows: auto 1fr; gap: var(--space-2, 0.5rem); box-sizing: border-box; padding: var(--space-3, 1rem);
  border-top: 0.25rem solid var(--h); background: color-mix(in srgb, var(--h) 8%, var(--paper)); color: var(--h-ink);
}
.docfig ol.df--tiles .df-t { font-size: var(--size-4, 1rem); font-weight: var(--weight-strong, 600); color: var(--ink); align-self: start; } /* pilot: figures align across tiles whatever the label length */
.docfig ol.df--tiles .df-fig, .docfig ol.df--tiles > li[data-hero] .df-fig { display: block; font-size: clamp(1.75rem, 1.25rem + 5cqi, 2.5rem); line-height: 1.1; letter-spacing: -0.02em; margin-bottom: var(--space-1, 0.25rem); white-space: normal; } /* a qualified figure ("more than 400,000", reviewer-126 V01) may break before the number at 320 px; the number itself has no break opportunity */
.docfig ol.df--tiles > li[data-hero] { border-top-width: 0.375rem; }
.docfig ol.df--tiles > li[data-hero] .df-t { font-size: var(--size-4, 1rem); } /* pilot: the tile's words stay in step with the other tiles; the figure carries the hero */
.docfig ol.df--tiles > li[data-hero] .df-fig { font-size: clamp(2rem, 1.5rem + 5cqi, 3rem); }

/* wide: steps and flow stages side by side when all of them fit; the branch keeps its own row */
@container (min-width: 44rem) {
  .docfig--steps ol.df--steps, .docfig--flow ol.df--flow:not(.df--branch) { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-3, 1rem); }
  .docfig--steps ol.df--steps > li, .docfig--flow ol.df--flow:not(.df--branch) > li { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-2, 0.5rem); }
  .docfig--steps ol.df--steps > li .df-i, .docfig--flow ol.df--flow:not(.df--branch) > li .df-i { grid-column: 1; }
  .docfig--steps ol.df--steps > li .df-c, .docfig--flow ol.df--flow:not(.df--branch) > li .df-c { grid-column: 1; padding-top: 0; }
  .docfig--steps ol.df--steps > li:not(:last-child)::before, .docfig--flow ol.df--flow:not(.df--branch) > li:not(:last-child)::before {
    left: var(--d); top: calc(var(--d) / 2 - var(--line-strong, 2px) / 2); bottom: auto; right: calc(-1 * var(--space-3, 1rem)); border-left: 0; border-top: var(--line-strong, 2px) solid var(--h);
  }
  .docfig ol.df--branch { padding-left: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-4, 1.5rem); }
  .docfig ol.df--branch::before { left: calc(1.375rem - 1px); bottom: auto; height: var(--space-3, 1rem); }
  .docfig ol.df--branch > li::after, .docfig ol.df--branch > li .df-c::after { content: none; }
  .docfig--steps ol.df--steps > li:not(:last-child), .docfig--flow ol.df--flow:not(.df--branch) > li:not(:last-child) { padding-bottom: 0; }
  .docfig ol.df--branch > li:not(:last-child)::before { content: none; }
}
@media (forced-colors: active) {
  .docfig .df-i { border-color: CanvasText; background: Canvas; color: CanvasText; }
  .docfig ol.df--tiles > li, .docfig ol.df--tiles > li[data-hero] { border: 1px solid CanvasText; border-top-width: 0.25rem; }
}
/* the aside (reviewer-125 V02): one sentence the section keeps apart from the sequence, under the rail and outside the
   numbering, marked by a dotted rule on the rail's axis so it reads as "beside", not "next" */
.docfig .df-aside { position: relative; margin: var(--space-2, 0.5rem) 0 0; padding: 0 0 0 calc(2.75rem + var(--space-3, 1rem)); font-size: var(--size-graphic, 0.875rem); line-height: 1.45; color: var(--ink-2); overflow-wrap: anywhere; }
.docfig .df-aside::before { content: ""; position: absolute; left: calc(1.375rem - 1px); top: 0.15em; bottom: 0.15em; border-left: var(--line-strong, 2px) dotted var(--process); opacity: 0.7; }