/* M3: the JobWatch working model (CT-011) on concept B's system. Every colour, size, space, duration and easing comes
   from ../../m2/tokens.css, the one tokens file, linked before this sheet; nothing here copies a token. CT-011's private
   layout values (list, panel, score, field, status and similarity columns; two measures; a serif and a mono face) have no
   token, so they map onto the nearest existing ones (fr ratios, --step-col, --label-col, --figure-col, --measure-text,
   --measure-lede; Inter only). States follow craft/CRAFT.md §2; the layer marker is CT-014 component 1, the mast name
   and footer are CT-015's deep template. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/assets/fonts/inter-normal-400-latin-c9407645.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@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%; }
*, *::before, *::after { box-sizing: border-box; border-radius: var(--radius); }
html { background: var(--paper); color: var(--ink); font-family: var(--font-sans); -webkit-text-size-adjust: none; text-size-adjust: none; }
body { margin: 0; background: var(--paper); font-size: var(--size-4); line-height: var(--leading-body); font-weight: var(--weight-body); }
a { color: inherit; text-decoration-color: var(--ink-3); text-underline-offset: var(--underline-offset); transition: text-decoration-color var(--dur-ui) var(--ease), color var(--dur-ui) var(--ease); }
:focus-visible { outline: var(--focus); outline-offset: var(--focus-offset); }
.skip { position: absolute; left: var(--space-3); top: var(--skip-hide); display: inline-flex; align-items: center; min-height: var(--control-h); background: var(--ink); color: var(--paper); padding: var(--space-2) var(--space-3); font-size: var(--size-5); text-decoration: none; }
.skip:focus { top: var(--space-3); z-index: 11; }
.sr { position: absolute; width: var(--line); height: var(--line); overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.page { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--gutter); }
.caps { font-size: var(--size-6); font-weight: var(--weight-strong); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); margin: 0; }
.note { color: var(--ink-3); }
h1 { font-weight: var(--weight-strong); font-size: var(--size-1); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-3); max-width: var(--measure-lede); text-wrap: balance; }
h2 { font-weight: var(--weight-strong); font-size: var(--size-2); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-3); max-width: var(--measure-text); text-wrap: balance; }
h3 { font-size: var(--size-3); font-weight: var(--weight-strong); margin: 0 0 var(--space-2); line-height: var(--leading-snug); }
h4 { font-size: var(--size-4); font-weight: var(--weight-strong); color: var(--ink); margin: var(--space-4) 0 var(--space-2); line-height: var(--leading-snug); }
p { max-width: var(--measure-text); text-wrap: pretty; }

.sample-note { padding: var(--space-3) 0 0; }
.sample-note .sample { color: var(--ink-2); margin: 0 0 var(--space-1); }

/* the six blocks around the model */
.about { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-6); padding: var(--space-5) 0; border-bottom: var(--line) solid var(--rule); }
.about section p { margin: 0 0 var(--space-2); }
.about .placeholder { color: var(--ink-3); font-style: italic; }
.about .wide { grid-column: 1 / -1; }
.about .outcome ul { color: var(--ink-2); padding-left: var(--space-4); margin: var(--space-2) 0 0; max-width: var(--measure-text); }

/* explanatory graphic: a wide drawing at 1024 px and up, a tall one below, so labels stay readable (CRAFT §9) */
figure.explainer { margin: 0; }
.explainer svg { display: block; width: 100%; height: auto; font-family: var(--font-sans); }
.explainer .ex-tall { display: none; max-width: var(--measure-lede); }
.explainer .box { fill: var(--paper); stroke: var(--ink); stroke-width: var(--line); }
.explainer .box.on { stroke: var(--accent); stroke-width: var(--line-strong); }
.explainer .lbl { fill: var(--ink); font-size: var(--size-4); font-weight: var(--weight-strong); }
.explainer .sub { fill: var(--ink-3); font-size: var(--size-5); }
/* R7.6: the outcome node (selective, best-fit applications) is the lead, in --accent */
.explainer .box.end { fill: var(--accent); stroke: var(--accent); stroke-width: var(--line-strong); }
.explainer .lbl.end { fill: var(--accent-ink); }
.explainer .ex-tall .sub { font-size: var(--size-graphic); }
.explainer .wire { stroke: var(--ink-3); stroke-width: var(--line); fill: none; }
.explainer .wire.on { stroke: var(--accent); stroke-width: var(--line-strong); }
.explainer .wire.dash { stroke-dasharray: var(--space-1) var(--space-1); }
.explainer .dot { fill: var(--process); }
/* QA-014e round 2 (m6/qa-batch2): the whole drawing is laid out from the start, so it is never an empty band. A step not reached
   yet is a ghost (outline in --rule, words in --ink-3, no fill); a reached step is drawn in full. Only fill and stroke change,
   so nothing moves (CLS). Reduced motion and no script never set data-explain: the finished diagram. */
/* the move into a reached step is animated; the move back to a ghost (start, replay) is instant, so the finished drawing never fades out */
html[data-explain] .explainer [data-step].shown > * { transition: fill var(--dur-step) var(--ease), stroke var(--dur-step) var(--ease); }
html[data-explain] .explainer [data-step]:not(.shown) .box { fill: var(--paper); stroke: var(--rule); stroke-width: var(--line); }
html[data-explain] .explainer [data-step]:not(.shown) .wire { stroke: var(--rule); stroke-width: var(--line); }
html[data-explain] .explainer [data-step]:not(.shown) .dot { fill: var(--rule); }
html[data-explain] .explainer [data-step]:not(.shown) :is(.lbl, .sub) { fill: var(--ink-3); }
.explainer figcaption { color: var(--ink-3); margin-top: var(--space-2); max-width: var(--measure-text); }
.explainer .controls { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.explainer .live { min-height: calc(var(--leading-body) * 2em); margin: var(--space-2) 0 0; }
/* QA-014e round 2: app.js measures the longest step sentence in this copy (out of flow, hidden) and reserves its height on the
   live line, so a long sentence never pushes the controls and the next section down (CLS) */
.explainer .live-sizer { position: absolute; visibility: hidden; pointer-events: none; }
.explainer .steps { color: var(--ink-2); padding-left: var(--space-4); margin: var(--space-2) 0 0; max-width: var(--measure-text); }
html[data-explain] .explainer .steps { display: none; }
@media (max-width: 1023px) {
  .explainer .ex-wide { display: none; }
  .explainer .ex-tall { display: block; }
}

/* controls: CRAFT §2 (hover only where hover exists, press within --dur-press, focus never removed) */
button, select, textarea, input { font: inherit; color: inherit; }
.btn { background: var(--paper); color: var(--ink); border: var(--line) solid var(--ink-3); padding: 0 var(--control-pad); min-height: var(--control-h); min-width: var(--control-h); cursor: pointer; font-size: var(--size-5); font-weight: var(--weight-strong); transition: border-color var(--dur-ui) var(--ease), background-color var(--dur-ui) var(--ease), transform var(--dur-press) var(--ease); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn[aria-pressed="true"] { background: var(--paper-2); border-color: var(--rule-strong); }
.btn:active { background: var(--paper-2); transform: translateY(var(--line)); transition-duration: var(--dur-press); }
.btn.primary:active { background: var(--accent); }
select { background: var(--paper); border: var(--line) solid var(--ink-3); min-height: var(--control-h); padding: 0 var(--space-2); font-size: var(--size-4); color: var(--ink); transition: border-color var(--dur-ui) var(--ease); }
textarea { width: 100%; background: var(--paper); border: var(--line) solid var(--ink-3); padding: var(--space-2); font-size: var(--size-4); color: var(--ink); min-height: calc(var(--control-h) * 2); }
label { font-size: var(--size-5); color: var(--ink-2); display: inline-flex; flex-direction: column; gap: var(--space-1); }
.toolbar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: end; padding: var(--space-3) 0; border-bottom: var(--line) solid var(--rule); }
.toolbar .count { margin-left: auto; font-size: var(--size-5); color: var(--ink-3); align-self: center; font-variant-numeric: tabular-nums; }
.js-only { display: none; }
html[data-js] .js-only { display: inherit; }
html[data-js] .toolbar.js-only { display: flex; }
html[data-js] .controls.js-only { display: flex; }
[hidden] { display: none !important; }

/* the model */
.model { padding: var(--space-5) 0; border-bottom: var(--line) solid var(--rule); }
.model .head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: var(--space-3); }
.work { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); column-gap: var(--space-5); align-items: start; }
.roles { list-style: none; margin: 0; padding: 0; }
.roles .role { display: grid; grid-template-columns: var(--step-col) minmax(0, 1fr) var(--label-col) var(--figure-col); column-gap: var(--space-2); align-items: baseline; align-content: center; min-height: var(--control-h); padding: var(--space-2) 0; border: 0; border-bottom: var(--line) solid var(--rule); font-size: var(--size-4); width: 100%; text-align: left; background: none; color: var(--ink); cursor: default; transition: background-color var(--dur-ui) var(--ease), transform var(--dur-press) var(--ease); }
html[data-js] .roles .role { cursor: pointer; }
.roles .role[aria-current="true"] { background: var(--paper-2); }
.roles .role[aria-current="true"] b { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: var(--line-strong); text-underline-offset: var(--underline-offset); }
.roles button.role:active { background: var(--paper-2); transform: translateY(var(--line)); transition-duration: var(--dur-press); }
.roles .score { font-weight: var(--weight-strong); font-variant-numeric: tabular-nums; }
.roles .who b { font-weight: var(--weight-strong); }
.roles .field, .roles .status { color: var(--ink-3); font-size: var(--size-5); }
.roles .status { text-align: right; }
.empty { padding: var(--space-3) 0; border-bottom: var(--line) solid var(--rule); }
.empty p { margin: 0 0 var(--space-2); }
.panel { border-top: var(--line-strong) solid var(--rule-strong); padding-top: var(--space-3); position: sticky; top: var(--space-3); }
.panel .score.big { font-size: var(--size-2); font-weight: var(--weight-strong); margin-right: var(--space-2); font-variant-numeric: tabular-nums; }
.panel .meta { color: var(--ink-3); margin: 0 0 var(--space-3); }
.reasons, .notfit, .passages, .findings { padding-left: var(--space-4); margin: 0; }
.reasons li, .notfit li, .passages li, .findings li { margin-bottom: var(--space-1); }
.passages li { display: grid; grid-template-columns: var(--step-col) minmax(0, 1fr); column-gap: var(--space-2); list-style: none; margin-left: calc(var(--space-4) * -1); }
.passages .sim { font-size: var(--size-5); font-variant-numeric: tabular-nums; color: var(--accent); }
.passages em { color: var(--ink-3); }
.track { margin-top: var(--space-4); padding-top: var(--space-3); border-top: var(--line) solid var(--rule); }
.track fieldset { border: 0; padding: 0; margin: 0 0 var(--space-3); }
.track legend { font-size: var(--size-6); font-weight: var(--weight-strong); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--ink-3); padding: 0; margin-bottom: var(--space-2); }
.track .statuses { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.track .statuses label { flex-direction: row; align-items: center; gap: var(--space-1); min-height: var(--control-h); border: var(--line) solid var(--ink-3); padding: 0 var(--space-2); cursor: pointer; transition: border-color var(--dur-ui) var(--ease), background-color var(--dur-ui) var(--ease); }
.track .statuses input { margin: 0; }
.track .statuses input:checked + span { font-weight: var(--weight-strong); color: var(--accent); text-decoration: underline; text-decoration-thickness: var(--line-strong); text-underline-offset: var(--underline-offset); }
.track .saved { color: var(--ink-3); margin: var(--space-2) 0 0; }

/* learning view */
.learn { padding: var(--space-5) 0; }
.funnel { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-3); }
.funnel li { border-top: var(--line-strong) solid var(--rule-strong); padding-top: var(--space-2); font-size: var(--size-5); color: var(--ink-3); }
.funnel b { display: block; font-size: var(--size-2); color: var(--ink); line-height: var(--leading-one); margin-bottom: var(--space-1); font-variant-numeric: tabular-nums; }
.history { border-collapse: collapse; width: 100%; margin-top: var(--space-3); font-variant-numeric: tabular-nums; }
.history th, .history td { text-align: left; padding: var(--space-1) var(--space-2) var(--space-1) 0; border-bottom: var(--line) solid var(--rule); vertical-align: top; }
.history th { color: var(--ink-3); font-weight: var(--weight-strong); font-size: var(--size-5); }
/* the learning view's headings sit under its h2 (axe heading-order); they keep the h4 look */
.learn h3 { font-size: var(--size-4); color: var(--ink); margin: var(--space-4) 0 var(--space-2); }

@media (hover: hover) {
  a:hover { text-decoration-color: var(--accent); }
  .btn:hover { border-color: var(--rule-strong); background: var(--paper-2); }
  .btn.primary:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
  html[data-js] .roles .role:hover { background: var(--paper-2); }
  select:hover, .track .statuses label:hover { border-color: var(--rule-strong); }
  .track .statuses label:hover { background: var(--paper-2); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .btn:active, .roles button.role:active { transform: none; }
}

@media (max-width: 1023px) {
  .work { grid-template-columns: minmax(0, 1fr); }
  .panel { position: static; margin-top: var(--space-4); }
}
@media (max-width: 767px) {
  .about { grid-template-columns: minmax(0, 1fr); }
  .roles .role { grid-template-columns: var(--step-col) minmax(0, 1fr); }
  .roles .field { grid-column: 2; }
  .roles .status { grid-column: 2; text-align: left; font-size: var(--size-4); } /* CRAFT §5.1: at most 15% of characters under 14 px at 375 */
  .funnel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .history, .history thead, .history tbody, .history tr, .history th, .history td { display: block; }
  .history thead { position: absolute; width: var(--line); height: var(--line); overflow: hidden; clip-path: inset(50%); }
  .history tr { border-bottom: var(--line-strong) solid var(--rule); padding: var(--space-2) 0; }
  .history td { border: 0; padding: var(--space-1) 0; }
  .history td::before { content: attr(data-th) ": "; color: var(--ink-3); font-weight: var(--weight-strong); }
}

/* 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 */