/* ==========================================================================
   AMI Toolkit — shared design system
   PQMD | Aligned Metrics Initiative
   --------------------------------------------------------------------------
   Load order: tokens -> base -> typography -> layout -> components -> print.
   Components are single-class prefixed. Vertical rhythm is handled by the
   .flow utility and the --flow-space custom property, never by competing
   element margins — this keeps section spacing predictable.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* ---- PQMD brand, sampled from assets/pqmd-logo.png -----------------------
     The logo is four interlocking figures around a slate wordmark. Measured
     coverage: slate 71.7%, yellow 3.9%, lime 3.4%, orange 2.9%.
     --slate IS the PQMD wordmark colour and is the primary throughout.       */
  --slate:  #3c5a6a;
  --orange: #f47421;
  --lime:   #bed73c;
  --yellow: #fed003;   /* PQMD Style Guide RGB 254 208 3 (was #ffd002, sampled) */

  /* Slate scale — same hue (201deg), stepped lightness. Contrast on --bg:
     900 14.5:1 · 800 11.4:1 · 700 9.1:1 · slate 6.8:1 · 500 4.7:1           */
  --slate-900: #16262f;   /* dark panels, headings */
  --slate-800: #233843;
  --slate-700: #2e4755;
  --slate-500: #536d7b;
  --slate-400: #8fa3ae;   /* decorative only, 2.4:1 — never body text */

  --ink:       #16262f;
  --muted:     #536d7b;
  --line:      #d9dfe3;
  --line-soft: #eaeef0;
  --bg:        #f5f7f8;
  /* Dark panels (15 Oct, PQMD Style Guide; Juliemarie, 13 Oct: the near-black is
     "a risk" - "the dark color blue" instead). The panel is the logo's own slate;
     its corner glow runs from the slate into a slightly deeper slate, never
     lighter, so every colour set on a panel keeps the contrast it measures on the
     slate itself: white 7.3:1, --spec-ink 6.6, --spec-muted 5.4, lime 4.5,
     yellow 5.0, --orange-on-panel 4.8. The raw orange is 2.6:1 there - marks only. */
  --panel:      var(--slate);
  --panel-lo:   #35525f;
  --panel-deep: var(--slate-700);   /* hover on a slate button */
  --orange-on-panel: #ffc49c;       /* orange TYPE on a panel */
  --spec-bg:    var(--panel);

  /* Derived — text and surfaces on the dark panel only. */
  --spec-ink:     #eef3f5;
  --spec-muted:   #d3dfe5;   /* 5.4:1 on the slate panel (was #a6bcc7 on near-black) */
  --spec-surface: rgba(255, 255, 255, 0.05);
  --spec-edge:    rgba(255, 255, 255, 0.15);
  --dash:         #c2ced5;   /* decorative borders only, never text */

  /* The three logo accents are bright by design: as text on --bg they measure
     orange 2.65:1, lime 1.51:1, yellow 1.37:1 — all far below AA. On the dark
     panel the same colours are 5.5:1, 9.6:1 and 10.6:1. So the accents live on
     --spec-bg (and as marks and rules); these darkened inks carry any accent
     that has to be TYPE on a light ground. Each clears 4.5:1 on --bg. */
  --orange-ink: #b44c09;   /* 4.9:1 on --bg, 4.5:1 on --line-soft */
  --lime-ink:   #697819;
  --yellow-ink: #876e00;

  /* The Style Guide's secondary teal-green (RGB 32 138 112), not an impact
     area's colour, and an ink of it for small type: #208a70 is 3.96:1 on the
     desk, the ink 5.14:1 (19 Oct, the rail's group labels). */
  --teal:     #208a70;
  --teal-ink: #1a7660;

  /* One accent per impact area. Hue only — every card keeps identical size,
     weight and type colour, so this reads as categorical, never as ranking. */
  --area-availability: var(--orange);
  --area-continuity:   var(--lime);
  --area-capacity:     var(--yellow);

  /* Type families */
  --display: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --brand:   "Gill Sans", "Gill Sans MT", "Gill Sans Nova", "Cabin", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Labels, eyebrows, figures and metadata. Inter since 9 Oct - PQMD found the
     mono labels hard to read; Muhammad: "change all the IBM fonts into something
     clearer". --mono is the old name, kept as an alias for the docs pages. */
  --label:   "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:    var(--label);

  /* Type scale — fluid, ~1.2 ratio at the top end. Tightened 19 Oct (PQMD:
     "the font is still too large for the amount of info"; the map's 13px and
     the rail's 14px read well): body 17px -> 15px, headings in proportion.
     Labels and captions keep their size - they were already the small, clear
     sizes she pointed to. */
  --step--2: max(0.75rem, 11px);     /* 12px labels (11px until 9 Oct); never under 11px */
  --step--1: max(0.8125rem, 11.5px); /* 13px captions, rail */
  --step-0:  0.9375rem;   /* 15px  body (17px until 19 Oct) */
  --step-1:  clamp(1.02rem, 0.3vw + 0.96rem, 1.125rem);
  --step-2:  clamp(1.15rem, 0.55vw + 1rem,  1.35rem);
  --step-3:  clamp(1.4rem,  0.9vw + 1.15rem, 1.75rem);
  --step-4:  clamp(1.75rem, 1.5vw + 1.3rem, 2.35rem);

  /* Spacing (the larger steps tightened 19 Oct, with the type) */
  --s-1: 0.5rem;
  --s-2: 0.875rem;
  --s-3: 1.125rem;
  --s-4: 1.625rem;
  --s-5: 2.375rem;
  --s-6: 3.25rem;
  --s-7: 4.5rem;

  /* Measure and layout */
  --measure: 120ch;  /* 66ch until 19 Oct, then 82ch; PQMD: text should run "all the way across" */
  --wrap:    76rem;   /* the entry page's width before it had a rail; no longer used for layout */
  --rail-w:  15.5rem; /* 13rem until 10 Oct, 16rem until 19 Oct ("this bar is so big"): 217px drawn at 7/8 */
  --shell-w: 96rem;   /* rail + sheet; 84rem until 19 Oct - the interface is drawn at 7/8 on a laptop, so the
                         shell grows to keep its width on screen and the sheet gains room */

  --radius: 3px;
  /* The AMI mark - ring, three brackets, core - as a faint white line
     drawing, for watermarks on the slate stage. Inline: no request. */
  --ami-mark-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320' fill='none' stroke='%23fff' stroke-opacity='.09' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='160' cy='160' r='130'/%3E%3Cg%3E%3Cpath d='M106 98V70q0-16 16-16h76q16 0 16 16v28'/%3E%3Ccircle cx='160' cy='30' r='7'/%3E%3C/g%3E%3Cg transform='rotate(120 160 160)'%3E%3Cpath d='M106 98V70q0-16 16-16h76q16 0 16 16v28'/%3E%3Ccircle cx='160' cy='30' r='7'/%3E%3C/g%3E%3Cg transform='rotate(240 160 160)'%3E%3Cpath d='M106 98V70q0-16 16-16h76q16 0 16 16v28'/%3E%3Ccircle cx='160' cy='30' r='7'/%3E%3C/g%3E%3Ccircle cx='160' cy='160' r='20'/%3E%3C/svg%3E");
  --ease:   cubic-bezier(0.2, 0.6, 0.25, 1);

  /* Motion. One curve and three durations for the whole toolkit, so the
     position bar, the dock, the dialog and the list reveals read as one
     system rather than four separate effects. */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-1: 160ms;   /* a control changing state      */
  --dur-2: 260ms;   /* something entering or leaving */
  --dur-3: 420ms;   /* content revealing on scroll   */
  --dur-4: 620ms;   /* the list reveal, deliberately long enough to read */

  /* Other organisations' marks, on the share buttons only. Graphic, never
     type: each sits beside its name in --slate-900. */
  --brand-facebook: #1877f2;
  --brand-x:        #000000;
  --brand-linkedin: #0a66c2;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

/* The hidden attribute always hides. Without !important, any component that
   sets its own display — grid, flex — silently overrides it. */
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
/* 19 Oct, second round (PQMD's call: at 75% zoom "that would be fantastic";
   "you have to design for a laptop"): on a laptop or desktop screen the whole
   interface - type, spacing, the menu, the bars - is drawn at 7/8 of its size,
   so body text reads at about 13px. The smallest steps keep a floor (labels
   11px). Phones and tablets keep the full size; print is unchanged. */
@media screen and (min-width: 62rem) {
  html { font-size: 87.5%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--step-0);
  line-height: 1.55;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Zero specificity, like the section rhythm rules below: a plain element reset
   must never outrank them, or a list or statement set straight after a
   paragraph loses its space. */
:where(h1, h2, h3, h4, p, ul, ol, figure, blockquote) { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { max-width: 100%; }

a {
  color: var(--slate);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color 0.15s var(--ease);
}
a:hover { color: var(--slate-900); }

/* --orange-ink, not --orange: a focus indicator needs 3:1 against what
   surrounds it, and the logo orange is only 2.65:1 on --bg. */
:focus-visible {
  outline: 2px solid var(--orange-ink);
  outline-offset: 3px;
  border-radius: 2px;
}
.band :focus-visible { outline-color: var(--orange); }

.u-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.u-skip {
  position: absolute;
  left: var(--s-3); top: -4rem;
  z-index: 50;
  padding: var(--s-2) var(--s-3);
  background: var(--panel);
  color: #fff;
  font-family: var(--label);
  font-size: var(--step--1);
  text-decoration: none;
  transition: top 0.18s var(--ease);
}
.u-skip:focus { top: var(--s-3); color: #fff; }

/* Vertical rhythm — the only source of block spacing in prose. */
.flow > * + * { margin-block-start: var(--flow-space, 1.15em); }

/* --------------------------------------------------------------------------
   3. Typography
   -------------------------------------------------------------------------- */

/* Eyebrow — uppercase, tracked. Every label in the system. Set in Inter
   since 9 Oct (it was IBM Plex Mono), one weight heavier so it holds up at
   label size. */
.eyebrow {
  display: block;
  font-family: var(--label);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow--accent { color: var(--orange-ink); }
/* On the dark panel the logo orange is 5.5:1 and is the right colour. */
.band .eyebrow--accent { color: var(--orange-on-panel); }
.eyebrow--resource  { color: var(--lime-ink); }

.t-module {
  font-family: var(--display);
  font-size: var(--step-4);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.018em;
  color: var(--slate-900);
  max-width: 56ch;
  text-wrap: pretty;
}

/* The declarative line every module opens on. */
.t-opening {
  font-family: var(--display);
  font-size: var(--step-3);
  font-weight: 400;
  font-style: italic;
  line-height: 1.22;
  letter-spacing: -0.012em;
  color: var(--slate-700);
  max-width: 90ch;
  text-wrap: pretty;
}

/* Section heading + the 30x3 accent rule from the brief. The rule is the
   heading's bottom edge, so the space below it belongs to the heading. */
.t-section {
  margin-block-end: var(--s-4);
  font-family: var(--display);
  font-size: var(--step-3);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.014em;
  color: var(--slate-900);
  max-width: 74ch;
  text-wrap: pretty;
}
/* A heading below .t-section. The approved modules nest one level — Module 2
   puts a table under "What decision should the evidence support?" inside a
   larger section — so the scale needs a third step. No accent rule: that mark
   belongs to .t-section and would flatten the hierarchy if it repeated here. */
.t-subsection {
  margin-block: var(--s-5) var(--s-3);
  font-family: var(--display);
  font-size: var(--step-2);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--slate-900);
  max-width: 96ch;
  text-wrap: pretty;
}
.t-subsection:first-child { margin-block-start: 0; }

.t-section::after {
  content: "";
  display: block;
  width: 30px;
  height: 3px;
  margin-block-start: var(--s-3);
  background: var(--orange);
}

/* Standalone affirmations lifted out of the running text. */
.statement {
  font-family: var(--brand);
  font-size: var(--step-2);
  font-weight: 400;
  line-height: 1.32;
  color: var(--slate-900);
  max-width: 84ch;
  text-wrap: pretty;
  padding-inline-start: var(--s-3);
  border-inline-start: 2px solid var(--orange);
}

/* Recurring refrains. These carry the emotional architecture — give them air.
   The measure is set on the quote's own type, not the body's: 30ch of body
   text held only a dozen characters of the large italic, so every refrain
   broke into three or four short lines (10 Oct). 42ch of its own size keeps
   a short refrain on one line and a long one on two or three, balanced. */
.pullquote {
  --flow-space: var(--s-5);
  max-width: 100%;
  margin-inline: auto;
  padding-block: var(--s-4);
  text-align: center;
}
.pullquote::before {
  content: "";
  display: block;
  width: 30px;
  height: 3px;
  margin: 0 auto var(--s-4);
  background: var(--orange);
}
.pullquote p {
  font-family: var(--brand);
  font-size: var(--step-3);
  font-style: normal;
  line-height: 1.28;
  letter-spacing: 0;
  color: var(--slate-700);
  text-wrap: balance;
  max-width: 70ch;
  margin-inline: auto;
}

.prose { max-width: var(--measure); }
.prose p { text-wrap: pretty; }

/* --------------------------------------------------------------------------
   4. Layout — module shell
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  /* The masthead, the band, the position bar and the colophon line up with
     the shell (rail + sheet) beneath them. */
  max-width: var(--shell-w);
  margin-inline: auto;
  padding-inline: var(--s-3);
}

.masthead {
  border-block-end: 1px solid var(--line);
  background: var(--bg);
}
.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 3.75rem;
}
.masthead__mark {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  color: var(--slate-900);
  text-decoration: none;
}
.masthead__logo {
  display: block;
  width: auto;
  height: 30px;   /* the logo is 900x257; height drives the lockup */
}
.masthead__rule {
  width: 1px;
  height: 24px;
  background: var(--line);
}
.masthead__title {
  font-family: var(--label);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 32rem) {
  .masthead__rule, .masthead__title { display: none; }
}

/* Revealed by JS. The page is fully usable and printable without it. */
.masthead__print {
  display: none;
  padding: 0.45rem var(--s-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  color: var(--muted);
  font-family: var(--label);
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
}
.masthead__print:hover { border-color: var(--orange); color: var(--slate-900); }
.js .masthead__print { display: inline-block; }

/* Two-column shell: position rail + module body. */
.shell {
  display: grid;
  /* minmax(0, 1fr), not 1fr: the rail's nowrap links have a min-content width
     wider than a phone, and a bare 1fr track refuses to shrink below it. */
  grid-template-columns: minmax(0, 1fr);
  padding-inline: var(--s-3);
}
@media (min-width: 62rem) {
  .shell {
    max-width: var(--shell-w);
    margin-inline: auto;
    grid-template-columns: var(--rail-w) minmax(0, 1fr);
    column-gap: var(--s-5);
  }
}

.module { min-width: 0; }

/* The module sheet. The module is the document; the rail is navigation that
   sits beside it. A white sheet on the grey desk makes that distinction
   visible, gives long reading a clean ground, and lets every component inside
   the sheet be defined against white rather than floating on grey.

   Only from 46rem. Below that the sheet's padding would steal width a phone
   cannot spare, so the content keeps running edge to edge.

   Metric card pages do not use it — the card is already its own surface, and
   a sheet around it would be a card inside a card. */
@media (min-width: 46rem) {
  .module--sheet,
  .entry--sheet {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: calc(var(--radius) * 2);
    box-shadow: 0 1px 2px rgba(22, 38, 47, 0.03), 0 18px 40px -30px rgba(22, 38, 47, 0.18);
  }
  .module--sheet {
    align-self: start;
    padding: var(--s-5) clamp(var(--s-4), 4vw, var(--s-6)) var(--s-4);
  }
  /* The entry page has no shell around it, so the sheet brings its own
     margin from the window edge, and grows by its own padding so the content
     keeps the width it had before the sheet. */
  /* .entry.entry--sheet: .entry sets its own width and padding later in the
     file, and this has to win over it. */
  .entry.entry--sheet {
    width: calc(100% - 2 * var(--s-3));
    /* 76rem since 9 Oct: the front door's two columns need the room, and a
       narrower sheet made its headings wrap (PQMD: "it's wrapping a lot"). */
    max-width: calc(76rem + 2 * clamp(var(--s-4), 4vw, var(--s-6)));
    margin-block: var(--s-4) var(--s-5);
    padding-inline: clamp(var(--s-4), 4vw, var(--s-6));
  }
  /* Inside the shell (since 10 Oct, with the rail beside it) the sheet is
     the shell's second column, like a module's: the shell sets its width. */
  .shell > .entry.entry--sheet {
    width: auto;
    max-width: none;
    /* .entry's auto side margins would make the grid item shrink to its
       content and centre it: since the front page lost its wider sections
       (20 Oct) that left a 576px sheet. With none, it fills the column. */
    margin-inline: 0;
    margin-block: 0 var(--s-5);
    align-self: start;
  }
  /* White panels that relied on contrast with the desk would vanish on the
     sheet, so inside it they become inset panels in the desk colour. */
  .module--sheet .refrain,
  .module--sheet .resource,
  .entry--sheet .refrain,
  .entry--sheet .entry-module {
    background: var(--bg);
  }
  /* The knockout disc on the shift's hairline takes the sheet's white. */
  .entry--sheet .shift__turn i { background: #fff; }
}

.section { padding-block: var(--s-5); }
.section + .section { padding-block-start: 0; }

/* Block rhythm inside a section. Modules 2 onward place their blocks —
   prose, statements, tables, panels — as plain siblings, and a table set
   straight after a paragraph had no space above it at all.
   Every rule here has zero specificity on purpose: a component that sets its
   own margin keeps it, and so does any inline --flow-space in Module 1. */
:where(.section) > :where(* + *) { margin-block-start: var(--s-4); }
/* Bordered tables and panels take a larger step on both sides, the same step
   Module 1 gives its ledger, so a heavy block never crowds the text. */
:where(.section) > :where(.reftable, .resource) { margin-block: var(--s-5); }
/* A heading keeps its own, closer spacing to what it introduces, and the
   section's padding does the work at either end. */
:where(.section) > :where(.t-section, .t-subsection) + * { margin-block-start: 0; }
/* A pull-quote brings its own air inside its padding, on both sides alike. */
:where(.section) > :where(.pullquote) + * { margin-block-start: 0; }
:where(.section) > :where(* + .pullquote) { margin-block-start: 0; }
:where(.section) > :where(:first-child) { margin-block-start: 0; }
:where(.section) > :where(:last-child) { margin-block-end: 0; }

/* The band is a contained panel: its edges line up exactly with the content
   column, the same width the ledger and the section rules use. No bleed, no
   viewport math, nothing wider than the column it belongs to. */
.band {
  margin-block: var(--s-6);
  padding-block: var(--s-5);
  padding-inline: var(--s-3);
  border-radius: var(--radius);
  /* A slow off-centre wash so the panel has depth rather than reading flat.
     The solid colour is set separately so it survives anywhere the gradient
     does not paint. */
  background-color: var(--panel);
  background-image:
    radial-gradient(110% 90% at 12% 0%, var(--panel) 0%, var(--panel-lo) 62%);
  color: var(--spec-ink);
}
@media (min-width: 62rem) {
  .band { padding: var(--s-6) var(--s-4); }
}

/* --------------------------------------------------------------------------
   5. Component — module-rail
   Position indicator. NOT progress: no fill-to-here, no counts, no completion.

   Refined 10 Oct. Every item has a marker in one column - a disc, as on the
   orientation map's route: the module's number, an icon for the orientation
   and resource links, the area colour for a card - so the eye runs down a
   single line and the labels start at one edge. Groups are set apart by
   space and a quiet label, not by rules. The page you are on is a white pill
   with its disc filled in slate: the same white as the sheet beside it, so
   "this one is open" reads at a glance. Only that one item is filled, so it
   reads as a position, never as a count of what is done.
   -------------------------------------------------------------------------- */

.rail {
  --rail-mark: 1.75rem;            /* the marker column */
  --rail-gap: 0.625rem;            /* marker to label */
  --rail-pad: 0.5rem;              /* inside each item */
  border-block-end: 1px solid var(--line);
  padding-block: var(--s-3);
  margin-block-end: var(--s-4);
}
@media (min-width: 62rem) {
  .rail {
    position: sticky;
    /* Clears the sticky position bar (2.75rem tall) plus a gap, so the rail
       parks below it instead of sliding underneath. */
    top: calc(2.75rem + var(--s-3));
    align-self: start;
    border-block-end: 0;
    padding-block: var(--s-5) var(--s-4);
    padding-inline-end: var(--s-1);
    margin-block-end: 0;
    /* With the cards group the rail is taller than a laptop screen, and a
       sticky element never scrolls on its own — its foot would stay out of
       reach. It scrolls within itself instead. */
    max-height: calc(100vh - 2.75rem - var(--s-3));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--dash) transparent;
    scrollbar-gutter: stable;
  }
}

/* Group labels (19 Oct, with the boxed groups): in PQMD's teal, each led by the
   logo's three accents as one short stripe - the same on every group, so it
   reads as PQMD's mark, never as a code or a ranking of the groups. */
.rail__title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-block-end: var(--s-1);
  color: var(--teal-ink);
}
.rail__title::before {
  content: "";
  flex: none;
  width: 15px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--orange) 0 33.3%, var(--lime) 33.3% 66.6%, var(--yellow) 66.6% 100%);
}
@media (min-width: 62rem) {
  .rail__title { padding-inline-start: var(--rail-pad); }
}

.rail__list {
  display: flex;
  gap: var(--s-1);
  overflow-x: auto;
  scrollbar-width: thin;
  padding-block-end: var(--s-1);
  /* Paint containment keeps this strip's scrollable overflow out of the
     document's, so the seven nowrap items cannot make the page itself scroll
     sideways on a phone. Fixes the cause rather than clipping the symptom. */
  contain: paint;
}
@media (min-width: 62rem) {
  .rail__list { display: grid; gap: 2px; overflow: visible; contain: none; padding-block-end: 0; }
}

.rail__item { flex: 0 0 auto; }

.rail__link {
  display: flex;
  align-items: center;
  gap: var(--rail-gap);
  min-height: 2.5rem;
  padding: 0.3rem 0.75rem 0.3rem var(--rail-pad);
  border-radius: 10px;
  color: var(--slate-700);
  font-size: 0.875rem;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease),
              box-shadow var(--dur-1) var(--ease);
}
/* On a phone each item is a chip in a sideways strip. */
@media (max-width: 61.99rem) {
  .rail__link { background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
}
@media (min-width: 62rem) {
  .rail__link { white-space: normal; }
}
.rail__link:hover { background: rgba(255, 255, 255, 0.85); color: var(--slate-900); }
.rail__link:focus-visible {
  outline: 2px solid var(--slate);
  outline-offset: 1px;
}

/* The marker: a disc holding the module's number or the link's icon. */
.rail__n {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: var(--rail-mark);
  height: var(--rail-mark);
  border-radius: 50%;
  border: 1px solid var(--line);
  background: #fff;
  font-family: var(--label);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--slate-700);
  font-variant-numeric: tabular-nums;
  transition: background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease),
              color var(--dur-1) var(--ease);
}
.rail__n i { font-size: 0.75rem; }
.rail__link:hover .rail__n { border-color: var(--slate-400); color: var(--slate-900); }
.rail__link--map .rail__n,
.rail__link--resource .rail__n { color: var(--slate); }

/* You are here. A position, not an achievement. */
.rail__link[aria-current="page"] {
  background: #fff;
  color: var(--slate-900);
  font-weight: 600;
  box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgba(22, 38, 47, 0.06), 0 8px 18px -14px rgba(22, 38, 47, 0.35);
}
.rail__link[aria-current="page"] .rail__n {
  background: var(--panel);
  border-color: var(--panel);
  color: #fff;
}

/* Each group in a light box on the desk (19 Oct, agreed on the call), so the
   sections read apart now that the menu is long: a 1px line, 6px corners and
   8px inside. The page you are on keeps its filled disc and sits on the desk's
   tint inside the white. Phones keep the strip of chips. */
@media (min-width: 62rem) {
  .rail__list {
    padding: 6px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
  }
  .rail { --rail-mark: 1.6rem; --rail-gap: 0.55rem; }
  .rail__link { padding-inline-end: 0.35rem; }
  /* Each group label is the head of its box (19 Oct): a band in PQMD's teal -
     the Style Guide's secondary green as an ink, white type 5.52:1 - with the
     logo's three accents along its foot, joined to the white box below. */
  .rail__title {
    position: relative;
    margin-block-end: 0;
    padding: 0.5rem 0.65rem 0.6rem;
    border-radius: 6px 6px 0 0;
    background: #bed73c;
    color: #35525f;
  }
  .rail__title::before { display: none; }
  .rail__title::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    height: 2px;
    background: var(--orange);
  }
  .rail__title + .rail__list { border-block-start: 0; border-start-start-radius: 0; border-start-end-radius: 0; }
  .rail__link:hover { background: var(--bg); }
  .rail__link[aria-current="page"] { background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
  .rail__note { padding-inline-start: 0.35rem; }
}

/* Groups are set apart by space, not rules. */
.rail__title--cards,
.rail__title--modules,
.rail__title--resources,
.rail__title--tools { margin-block-start: var(--s-3); }
@media (min-width: 62rem) {
  .rail__title--modules,
  .rail__title--resources,
  .rail__title--tools,
  .rail__title--cards { margin-block-start: var(--s-4); }
}

/* The priority metric cards, reachable from every page. Each opens in the
   card viewer. Marked by their area colour, never numbered: the three are
   parallel, not a sequence. The colour sits in the marker column, as a
   small square: hue only, the same size for all three. */
.rail__link--availability { --area: var(--area-availability); }
.rail__link--continuity   { --area: var(--area-continuity); }
.rail__link--capacity     { --area: var(--area-capacity); }
.rail__swatch {
  flex: none;
  align-self: center;
  width: 0.7rem;
  height: 0.7rem;
  margin-inline: calc((var(--rail-mark) - 0.7rem) / 2);
  border-radius: 3px;
  background: var(--area, var(--slate));
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--line);
}
@media (min-width: 62rem) {
  .rail__link--card { white-space: normal; }
}

/* A resource PQMD is still writing: where it will sit, not a link. A dashed
   disc, as the map's reserved chips. Not in the phone strip, where every chip
   is a way somewhere. */
.rail__link--soon { color: var(--muted); cursor: default; }
.rail__link--soon:hover { background: transparent; color: var(--muted); }
.rail__link--soon .rail__n,
.rail__link--soon:hover .rail__n { border-style: dashed; border-color: var(--slate-400); color: var(--muted); }
.rail__soon { display: block; font-size: var(--step--2); line-height: 1.3; color: var(--muted); }
@media (max-width: 61.99rem) {
  .rail__item--soon { display: none; }
}

/* Modules still in build. Describes the toolkit's state, never the reader's. */
.rail__link.is-unbuilt { color: var(--muted); cursor: default; }
.rail__link.is-unbuilt:hover { background: transparent; color: var(--muted); }

/* The way back from a card to the module that sent you. The cards sit outside
   the seven-module spine, so the rail cannot mark position the way it does in
   a module — it offers the return instead. */
.rail__back {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  color: var(--slate);
  text-decoration: none;
  border-block-end: 1px solid var(--dash);
  padding-block-end: 1px;
  transition: color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.rail__back:hover,
.rail__back:focus-visible { color: var(--orange-ink); border-block-end-color: var(--orange); }

/* "The modules can be used in any order." Lined up with the labels. */
.rail__note {
  display: none;
  margin-block-start: var(--s-1);
  padding-inline-start: calc(var(--rail-pad) + var(--rail-mark) + var(--rail-gap));
  font-family: var(--label);
  font-size: var(--step--2);
  line-height: 1.5;
  color: var(--muted);
}
@media (min-width: 62rem) { .rail__note { display: block; } }

/* With the glossary or the annex kept beside the page, the rail folds to its
   markers, so the page between the two keeps a readable width. Every link
   stays where it was; its name stays in the page for screen readers and
   shows as a tooltip on hover (js/ami.js sets it while folded). */
@media (min-width: 62rem) {
  html.has-resource-dock .shell { grid-template-columns: calc(var(--rail-mark-w, 1.75rem) + 1.5rem) minmax(0, 1fr); column-gap: var(--s-3); }
  html.has-resource-dock .rail { padding-inline-end: 0; scrollbar-gutter: auto; scrollbar-width: none; }
  html.has-resource-dock .rail__title,
  html.has-resource-dock .rail__note,
  html.has-resource-dock .rail__package { display: none; }
  html.has-resource-dock .rail__list ~ .rail__list { margin-block-start: var(--s-3); }
  html.has-resource-dock .rail__link { justify-content: center; padding: 0.3rem; }
  html.has-resource-dock .rail__link > span:last-child {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* From page to page (10 Oct). The browser carries one page over to the next:
   the rail holds still - only the marker of the page you are on moves - and
   the page itself fades across. Same-site pages only, so a hosted copy; a
   copy opened from a folder loads each page as before. Off for anyone who
   asks for less motion. js/ami.js keeps the rail's scroll position. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}
@media (min-width: 62rem) {
  .rail { view-transition-name: ami-rail; }
}
::view-transition-group(root),
::view-transition-group(ami-rail) { animation-duration: 220ms; animation-timing-function: var(--ease-out); }

/* The sheet's loader (12 Oct), matched to Aidlink's main-content preloader in
   size, timing and arcs: a 240px ring of three arcs (100%, 90%, 80%; 4px) turning
   in 1s, 2.5s the other way and 2s, the logo at 55%, the label 25px below at
   15px, a 0.5s fade. The arcs take the PQMD logo's own colours - slate, orange,
   yellow, in Aidlink's dark, middle and yellow places. While a page loads, its
   sheet - only the sheet: the header, the rail and the footer stay as they are -
   shows it. Every page's head marks <html> .is-loading from the first paint, in
   the top window only, so never inside the card viewer, the resource viewer or
   a print frame, and for 8 s at most, so a script that fails can never hide a
   page. js/ami.js lifts it once the page, its fonts and its images have loaded,
   and the loader fades into the sheet. Without script nothing is covered. The
   markup sits after the end mark, where the builders leave a page alone, and
   the label is CSS text, so the page's own words stay PQMD's. It never prints. */
main:has(> .page-loader) { position: relative; }
.page-loader {
  --pl-size: 240px;
  --pl-arc: 4px;
  position: absolute;
  inset: 0;
  z-index: 6;
  display: none;
  flex-direction: column;
  align-items: center;
  border-radius: inherit;
  background: var(--bg);
  opacity: 0;
  transition: opacity 0.5s ease, display 0.5s allow-discrete;
}
@media (min-width: 46rem) {
  :is(.module--sheet, .entry--sheet) > .page-loader { background: #fff; }
}
html.is-loading .page-loader {
  display: flex;
  opacity: 1;
  transition: none;
}
/* Sticky, so the logo sits in the middle of the window however long the sheet. */
.page-loader__ring {
  position: sticky;
  top: calc(50vh - var(--pl-size) / 2);
  flex: none;
  width: var(--pl-size);
  height: var(--pl-size);
  /* On a phone the rail's chips come first and the sheet starts low, so the
     logo stays near the sheet's top there. */
  margin-block: var(--s-4) calc(var(--s-5) + 2.5rem);
  border-radius: 50%;
  background: url("../assets/pqmd-logo.png") center / 55% auto no-repeat;
}
@media (min-width: 46rem) {
  .page-loader__ring { margin-block: var(--s-6) calc(var(--s-6) + 2.5rem); }
}
.page-loader__ring i {
  position: absolute;
  border: 0 solid transparent;
  border-radius: 50%;
}
.page-loader__ring i:nth-child(1) { inset: 0;   border-top-width: var(--pl-arc);    border-top-color: var(--slate);   animation: page-loader-turn 1s linear infinite; }
.page-loader__ring i:nth-child(2) { inset: 5%;  border-bottom-width: var(--pl-arc); border-bottom-color: var(--orange); animation: page-loader-turn 2.5s reverse infinite; }
.page-loader__ring i:nth-child(3) { inset: 10%; border-left-width: var(--pl-arc);   border-left-color: var(--yellow);  animation: page-loader-turn 2s linear infinite; }
/* Slate ink pulsing no lower than 0.65 (Aidlink's goes to 0.5), which keeps AA. */
.page-loader__ring::after {
  content: "Loading\2026";
  position: absolute;
  top: calc(100% + 25px);
  left: 50%;
  translate: -50% 0;
  white-space: nowrap;
  font-family: var(--body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 1px;
  color: var(--slate-900);
  animation: page-loader-pulse 1.5s ease-in-out infinite;
}
@keyframes page-loader-turn { to { transform: rotate(360deg); } }
@keyframes page-loader-pulse { 50% { opacity: 0.65; } }
@media (prefers-reduced-motion: reduce) {
  /* Still, with the arcs spread round the logo. */
  .page-loader__ring i,
  .page-loader__ring::after { animation: none; }
  .page-loader__ring i:nth-child(2) { transform: rotate(35deg); }
  .page-loader__ring i:nth-child(3) { transform: rotate(-30deg); }
}
@media print { .page-loader { display: none !important; } }

/* --------------------------------------------------------------------------
   6. Component — module head
   -------------------------------------------------------------------------- */

.module-head { padding-block: var(--s-4) var(--s-4); }
@media (min-width: 62rem) {
  .module-head { padding-block: var(--s-5) var(--s-4); }   /* s-7 s-5 until 19 Oct */
}
.module-head__eyebrow { margin-block-end: var(--s-3); }
.module-head__title { margin-block-end: var(--s-4); }
.module-head__opening {
  padding-block-start: var(--s-4);
  border-block-start: 1px solid var(--line);
}

/* --------------------------------------------------------------------------
   7. Component — impact-area cards  (the centrepiece)
   Three places to look. Parallel and equal: no numbering, no ordering, no
   size difference. A fourth column is deliberately not supported — Health &
   Quality Outcomes is an overlay, never a fourth area.
   -------------------------------------------------------------------------- */

.impact__head { max-width: var(--measure); margin-block-end: var(--s-5); }
.impact__eyebrow { margin-block-end: var(--s-3); }

.impact__title {
  font-family: var(--display);
  font-size: var(--step-3);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.014em;
  color: var(--spec-ink);
}
.impact__lede {
  margin-block-start: var(--s-3);
  max-width: 54ch;
  color: var(--spec-muted);
}

.impact__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-3);
}
@media (min-width: 46rem) {
  .impact__grid { grid-template-columns: repeat(3, 1fr); }
}

/* Each card carries its area's accent on the top rule and the icon only.
   Size, weight and type colour are identical across all three, so the colour
   reads as a label, never as a rank. --area is set by the modifier class. */
.impact-card {
  --area: var(--orange);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-3);
  background: var(--spec-surface);
  border: 1px solid var(--spec-edge);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
}
/* A whole-card link. The card is already a bordered surface with its own
   accent rule, so the link is a transparent overlay rather than another box:
   the entire card is the target, the visible name is the accessible name, and
   the focus ring lands on the card's own edge. */
.impact-card__link {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.impact-card:has(.impact-card__link) {
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.impact-card:has(.impact-card__link:hover),
.impact-card:has(.impact-card__link:focus-visible) {
  border-color: var(--area);
  background: rgba(255, 255, 255, 0.09);
}
.impact-card:has(.impact-card__link:focus-visible) {
  outline: 2px solid var(--area);
  outline-offset: 2px;
}
.impact-card__link:focus-visible { outline: none; }

.impact-card::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  background: var(--area);
}
.impact-card:hover {
  background: rgba(255, 255, 255, 0.075);
  border-color: rgba(255, 255, 255, 0.24);
}

.impact-card--availability { --area: var(--area-availability); }
.impact-card--continuity   { --area: var(--area-continuity); }
.impact-card--capacity     { --area: var(--area-capacity); }

.impact-card__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--spec-edge);
  border-radius: 50%;
  color: var(--area);
  font-size: 1.05rem;
}

/* Two lines reserved so the questions share a baseline across the row — the
   areas are parallel and the typography should not suggest otherwise. Colour
   lives only on the icon and the top rule, so the labels stay neutral. */
.impact-card__name {
  font-family: var(--label);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--spec-muted);
}
@media (min-width: 46rem) {
  .impact-card__name { min-height: 3em; }
}

/* The question is the headline. This inversion is the toolkit's voice.
   Sized against the card column, not the page: three-across leaves roughly
   270px, so the display face is set a step below the section headings. */
.impact-card__q {
  font-family: var(--display);
  font-size: clamp(1.15rem, 0.85vw + 0.95rem, 1.35rem);
  font-style: italic;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: -0.006em;
  color: var(--spec-ink);
  text-wrap: pretty;
}

.impact__foot {
  max-width: var(--measure);
  margin-block-start: var(--s-5);
  padding-block-start: var(--s-4);
  border-block-start: 1px solid var(--spec-edge);
  color: var(--spec-muted);
}
.impact__foot p + p { margin-block-start: 1.1em; }

/* --------------------------------------------------------------------------
   7b. Component — the triad
   Module 3's opening asks the reader to hold two things at once: the three
   impact areas are connected, and they are not a chain. Prose can only assert
   that. Written left to right, three areas read as a pipeline, and then
   Capacity reads as the advanced one — the exact misreading hard rule 2
   exists to prevent.

   So they are set rotationally: three nodes 120 degrees apart, threaded by
   one unbroken ring, around a labelled centre. No first, no last, no arrow
   between any two, no number on any of them.

   The centre is labelled, and that is what makes the diagram legible: three
   places to look at ONE program. An unlabelled dot left the reader to guess.

   It is the annotated sibling of the .emblem mark — same geometry, same core,
   same accent per area — so a reader who met the mark on the entry page finds
   out here what it meant.

   Geometry is solved, not eyeballed. The centre label needs a clear gap
   between the two lower nodes: inner edge = 50 + R·cos30 − W/2. At R=38% and
   W=40% that gap is 116px against a label of about 85px. Tighter radii put
   the lower cards straight over the label — 30% covered it completely.

   aria-hidden: the reference table immediately below carries the same three
   names with their questions and indicators, properly structured. This is a
   second view of that table, not new information.

   Not animated. A staggered entrance would arrive in an order, and order is
   the one thing this component exists to deny.
   -------------------------------------------------------------------------- */

/* Keyed to the container, not the viewport. The stage shrinks with whatever
   holds it while the centre label does not, so a wide viewport with a narrow
   column — the design-system specimen, for one — would put the lower cards
   over the label. Below 30rem of container the stacked form is correct, and
   it is also the fallback anywhere container queries are unavailable. */
.triad {
  container-type: inline-size;
  margin: var(--s-5) 0 0;
}

/* Stacked first. The spine is what stops the three reading as loose cards:
   they hang off one line, which is the same claim the ring makes above 46rem. */
.triad__stage {
  display: grid;
  gap: var(--s-2);
  padding-inline-start: var(--s-3);
  border-inline-start: 1px solid var(--line);
}

.triad__ring { display: none; }

.triad__core {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-block-end: var(--s-1);
}
.triad__core::before {
  content: "";
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--slate);
}
.triad__core-label {
  font-family: var(--label);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-700);
}

.triad__node {
  --area: var(--orange);
  --area-ink: var(--orange-ink);
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: #fff;
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--area);
  border-radius: var(--radius);
}
.triad__node--availability { --area: var(--area-availability); --area-ink: var(--orange-ink); }
.triad__node--continuity   { --area: var(--area-continuity);   --area-ink: var(--lime-ink); }
.triad__node--capacity     { --area: var(--area-capacity);     --area-ink: var(--yellow-ink); }

.triad__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 2px;
  /* 14% keeps every glyph at or above 4.5:1 against its own tab. */
  background: color-mix(in srgb, var(--area) 14%, #fff);
  color: var(--area-ink);
  font-size: 0.8rem;
}

.triad__name {
  font-size: var(--step--1);
  font-weight: 500;
  line-height: 1.3;
  color: var(--slate-900);
  text-wrap: balance;
}

/* ---- the ring, once there is room for it ---- */
@container (min-width: 30rem) {
  .triad__stage {
    position: relative;
    display: block;
    width: 100%;
    max-width: 28rem;
    margin-inline: auto;
    aspect-ratio: 1;
    padding-inline-start: 0;
    border-inline-start: 0;
  }

  .triad__ring {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }

  /* One program, at the centre of all three. */
  .triad__core {
    position: absolute;
    inset-inline-start: 50%;
    inset-block-start: 50%;
    translate: -50% -50%;
    flex-direction: column;
    gap: var(--s-1);
    margin: 0;
    text-align: center;
  }

  /* Top, then lower left, then lower right — the way an eye scans a triangle,
     and the order the source lists the three areas in. Still rotational: no
     arrows, no numbers, equal weight. */
  .triad__node {
    position: absolute;
    width: 40%;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-1);
    padding: var(--s-3);
    border-inline-start: 1px solid var(--line);
    border-block-start: 3px solid var(--area);
    box-shadow: 0 1px 2px rgba(22, 38, 47, 0.05), 0 12px 26px -18px rgba(22, 38, 47, 0.28);
  }
  .triad__node--availability { inset-inline-start: 50%;   inset-block-start: 12%; translate: -50% -50%; }
  .triad__node--continuity   { inset-inline-start: 17.1%; inset-block-start: 69%; translate: -50% -50%; }
  .triad__node--capacity     { inset-inline-start: 82.9%; inset-block-start: 69%; translate: -50% -50%; }
}

/* --------------------------------------------------------------------------
   7c. Component — the impact grid
   Module 3's second infographic, below the triad: the three areas as equal
   colour blocks, each with its question, and Health & Quality as a dashed
   band beneath all three. Where the triad says "one program, three places to
   look", this says "three equals, and an overlay that is not a fourth".

   Set on the slate stage — the metric-card head's surface, where the logo's
   accents are at full strength — with the AMI mark as a faint watermark off
   the top corner. The three cells are white cards, identical in every
   dimension; hue is the only difference. Each block carries its icon twice:
   once in a disc, once large and tone-on-tone, cropped by the block's edge.
   No numbers, no arrows between cells.

   The band is translucent, dashed, with no icon and no fill colour of its
   own, so beside three solid cards it can never read as a fourth. Short
   dashed ties run down from each cell: it may extend any of the three.

   Arrives as one piece: every part settles at once, never in an order — the
   triad's reason. aria-hidden, also the triad's reason: every sentence in it
   is in the text of the page.
   -------------------------------------------------------------------------- */

.impact-grid {
  container-type: inline-size;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: var(--s-5) 0 0;
  padding: clamp(var(--s-3), 4vw, var(--s-4));
  background:
    radial-gradient(110% 70% at 100% 0%, rgba(255, 255, 255, 0.06), transparent 62%),
    var(--spec-bg);
  border-radius: calc(var(--radius) * 3);
  color: var(--spec-ink);
}
/* The AMI mark - ring, three brackets, core - as a watermark. Inline, so it
   costs no request. */
.impact-grid::before {
  content: "";
  position: absolute;
  z-index: -1;
  /* Centred on the corner, so the core sits in it and the brackets frame it. */
  inset-block-start: -13rem;
  inset-inline-end: -13rem;
  width: 30rem;
  aspect-ratio: 1;
  background: var(--ami-mark-line) center / contain no-repeat;
  pointer-events: none;
}
.impact-grid__lede {
  max-width: 52ch;
  margin-block-end: var(--s-4);
  font-family: var(--display);
  font-size: var(--step-2);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--spec-ink);
  text-wrap: balance;
}

/* Stacked first: the colour block becomes a tab down the left edge. */
.impact-grid__areas { display: grid; gap: var(--s-2); }
.impact-grid__area {
  --area: var(--orange);
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  background: #fff;
  border-radius: calc(var(--radius) * 3);
  overflow: hidden;
  box-shadow: 0 22px 44px -22px rgba(0, 0, 0, 0.65);
}
.impact-grid__area--availability { --area: var(--area-availability); }
.impact-grid__area--continuity   { --area: var(--area-continuity); }
.impact-grid__area--capacity     { --area: var(--area-capacity); }

.impact-grid__block {
  position: relative;
  grid-row: 1 / -1;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 55%),
    var(--area);
}
.impact-grid__icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: #fff;
  color: var(--slate-900);
  font-size: 1rem;
  box-shadow: 0 6px 14px -6px rgba(22, 38, 47, 0.45);
}
/* The same glyph, large and a shade darker than its block, cropped by the
   block's edge. Only where the block is wide enough to show it. */
.impact-grid__glyph { display: none; }
.impact-grid__name {
  padding: var(--s-2) var(--s-3) 0;
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.25;
  color: var(--slate-900);
  text-wrap: balance;
}
.impact-grid__q {
  padding: var(--s-1) var(--s-3) var(--s-2);
  font-size: var(--step-0);
  line-height: 1.5;
  color: var(--slate-700);
}

.impact-grid__overlay {
  position: relative;
  margin-block-start: var(--s-3);
  padding: var(--s-2) var(--s-3);
  background: rgba(255, 255, 255, 0.05);
  border: 2px dashed rgba(255, 255, 255, 0.5);
  border-radius: calc(var(--radius) * 3);
}
.impact-grid__overlay-name { font-size: var(--step-0); font-weight: 600; color: var(--spec-ink); }
.impact-grid__overlay-text { margin-block-start: 0.25rem; font-size: var(--step-0); color: var(--spec-muted); }
.impact-grid__ties { display: none; }

/* Three across, once each cell has room for its name. */
@container (min-width: 36rem) {
  .impact-grid__areas {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto 1fr;
    gap: 0 var(--s-3);
  }
  .impact-grid__area {
    grid-row: span 3;
    grid-template-columns: none;
    grid-template-rows: auto auto 1fr;
  }
  /* Subgrid lines the three names up on one row, so the questions start
     together however each name wraps. Without it they simply don't align. */
  @supports (grid-template-rows: subgrid) {
    .impact-grid__area { grid-template-rows: subgrid; }
  }
  .impact-grid__block {
    grid-row: auto;
    place-items: center start;
    height: 5.5rem;
    padding-inline: var(--s-3);
  }
  .impact-grid__glyph {
    display: block;
    position: absolute;
    inset-inline-end: -0.18em;
    inset-block-end: -0.22em;
    font-size: 6.5rem;
    line-height: 1;
    color: color-mix(in srgb, var(--area), #000 13%);
  }
  .impact-grid__name { padding-block-start: var(--s-3); }
  .impact-grid__q { padding-block-end: var(--s-3); }

  .impact-grid__overlay {
    margin-block-start: var(--s-4);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem var(--s-3);
  }
  .impact-grid__overlay-text { flex: 1 1 24rem; margin: 0; }
  .impact-grid__ties {
    position: absolute;
    inset-inline: -2px;
    inset-block-end: 100%;
    height: calc(var(--s-4) + 2px);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-3);
  }
  .impact-grid__ties span { justify-self: center; border-inline-start: 2px dashed rgba(255, 255, 255, 0.4); }
}

/* One piece: the shared reveal staggers children, which here would put the
   parts in an order. Every part settles at once instead. */
.js .impact-grid.reveal.is-in > *:nth-child(n) { transition-delay: 0ms; }

/* --------------------------------------------------------------------------
   7d. Component — the route  (How AMI Fits Together)
   The orientation page's map. Juliemarie, 30 Sep: one picture of how the
   toolkit fits together, where "each one of those areas could link".

   Redrawn 8 Oct on her 7 Oct notes. The first map followed the Reference
   Document's chain, so one stop bundled two modules and another was a whole
   tool; she wanted no concept lost by bundling. So the stops are the seven
   modules, in order, each with its number on the disc, its title as the link
   and its key question beneath - then Resources, where the route ends. It
   winds like a transit map: three across, a turn, three back, a turn, two
   more. The key sits in the corner the route leaves empty.

   Tools sit inside the module that holds them. On 2 Oct she asked for tools
   and resources to read apart; on 7 Oct the white cards gave tools "a little
   bit too much prominence". So both are chips of one size and weight, told
   apart by surface only: a tool is a quiet filled chip with its number, a
   resource an outlined one. Hue is not used: orange, lime and yellow each mean
   one impact area, and appear only on the three metric cards.

   Every link is a real link, so the map is also the page's navigation; only
   the drawing is aria-hidden. Stacked below 42rem of container: one line down
   the left.
   -------------------------------------------------------------------------- */

.route {
  --pad: clamp(var(--s-3), 4vw, var(--s-5));
  --line: rgba(255, 255, 255, 0.42);
  --line-w: 3px;
  --disc: 2.75rem;
  --chev: 1rem;
  --col-gap: var(--s-4);
  --row-gap: var(--s-5);
  --chev-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%2316262f'/%3E%3Cpath d='M6.5 4.5L10 8l-3.5 3.5' fill='none' stroke='%23fff' stroke-opacity='.85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --chev-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%2316262f'/%3E%3Cpath d='M9.5 4.5L6 8l3.5 3.5' fill='none' stroke='%23fff' stroke-opacity='.85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --chev-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8' fill='%2316262f'/%3E%3Cpath d='M4.5 6.5L8 10l3.5-3.5' fill='none' stroke='%23fff' stroke-opacity='.85' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  container-type: inline-size;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: var(--s-4) 0 0;
  padding: var(--pad);
  background:
    radial-gradient(110% 70% at 100% 0%, rgba(255, 255, 255, 0.06), transparent 62%),
    var(--spec-bg);
  border-radius: calc(var(--radius) * 3);
  color: var(--spec-ink);
}
/* The AMI mark, in the corner beside the end of the route. */
.route::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block-end: -13rem;
  inset-inline-end: -11rem;
  width: 32rem;
  aspect-ratio: 1;
  background: var(--ami-mark-line) center / contain no-repeat;
  pointer-events: none;
}

.route__stations {
  display: grid;
  row-gap: var(--row-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Stacked first: one line down the left, each stop's words beside its disc. */
.route__station {
  position: relative;
  min-width: 0;
  min-height: var(--disc);
  padding-inline-start: calc(var(--disc) + var(--s-3));
}
/* A module's disc carries its number - the same 01-07 as the rail. */
.route__disc {
  position: absolute;
  z-index: 2;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: grid;
  place-items: center;
  width: var(--disc);
  height: var(--disc);
  border: var(--line-w) solid #fff;
  border-radius: 50%;
  background: var(--spec-bg);
  font-family: var(--label);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
/* Where the route ends: a terminus, ringed twice, holding the resources. */
.route__station--end .route__disc {
  font-size: 0.95rem;
  box-shadow: 0 0 0 3px var(--spec-bg), 0 0 0 5px rgba(255, 255, 255, 0.6);
}

/* The line on to the next stop - downward while stacked. Drawing only: at a
   turn its box spans the whole stop, so it must never take the pointer (PQMD,
   20 Oct: Module 3's link only worked in one spot). */
.route__to {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  inset-block-start: calc(var(--disc) / 2);
  inset-inline-start: calc(var(--disc) / 2 - var(--chev) / 2);
  width: var(--chev);
  height: calc(100% + var(--row-gap));
  background:
    var(--chev-down) center / var(--chev) no-repeat,
    linear-gradient(var(--line), var(--line)) center / var(--line-w) 100% no-repeat;
}

.route__name {
  padding-block-start: 0.5rem;
  font-family: var(--display);
  font-size: var(--step-1);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--spec-ink);
  text-wrap: balance;
}
/* A module's title is its link. The global a:hover would turn it the colour
   of this panel, so it sets its own. */
.route__module { color: inherit; text-decoration: none; }
.route__module i {
  margin-inline-start: 0.4em;
  font-size: 0.6em;
  vertical-align: 0.15em;
  color: var(--spec-muted);
  transition: transform var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.route__module:hover {
  color: #fff;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.route__module:hover i { color: #fff; transform: translateX(3px); }

/* The module's key question. */
.route__q {
  margin-block-start: 0.4rem;
  font-size: var(--step--1);
  line-height: 1.45;
  color: var(--spec-muted);
}

.route__links {
  display: grid;
  justify-items: start;
  gap: 0.35rem;
  margin: var(--s-2) 0 0;
  padding: 0;
  list-style: none;
}
.route__link {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  padding: 0.35rem 0.7rem;
  border: 1px solid transparent;
  border-radius: calc(var(--radius) * 2);
  font-size: var(--step--1);
  line-height: 1.35;
  color: var(--spec-ink);
  text-decoration: none;
}
a.route__link:hover { color: #fff; text-decoration: none; }
/* A resource: an outlined chip. */
.route__link--resource { border-color: rgba(255, 255, 255, 0.3); }
a.route__link--resource:hover { border-color: rgba(255, 255, 255, 0.65); background: rgba(255, 255, 255, 0.06); }
/* A tool: a quiet filled chip, the same size as a resource - present, not
   louder than the module that holds it. */
.route__link--tool { background: rgba(255, 255, 255, 0.11); }
/* On the slate panel the chip's fill lifts the ground, so its label takes the
   panel's ink, not the muted tone (4.1:1 there; 6:1 with ink). */
.route__link--tool .route__n { color: var(--spec-ink); }
a.route__link--tool:hover { background: rgba(255, 255, 255, 0.2); }
.route__module:focus-visible,
.route__link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  border-radius: 2px;
}
.route__n {
  flex: none;
  font-family: var(--label);
  font-size: var(--step--2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--spec-muted);
  font-variant-numeric: tabular-nums;
}
.route__icon { flex: none; font-size: 0.75rem; color: var(--spec-muted); }
.route__swatch {
  flex: none;
  align-self: center;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 2px;
  background: var(--area);
}
.route__link--availability { --area: var(--area-availability); }
.route__link--continuity   { --area: var(--area-continuity); }
.route__link--capacity     { --area: var(--area-capacity); }

/* A resource not built yet: the same chip, dashed. */
.route__link--pending {
  flex-wrap: wrap;
  gap: 0.1rem 0.6rem;
  border-style: dashed;
  color: var(--spec-muted);
}
.route__soon {
  font-family: var(--label);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* The key: what each mark means. */
.route__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  margin: var(--s-4) 0 0;
  padding: var(--s-3) 0 0;
  border-block-start: 1px solid rgba(255, 255, 255, 0.12);
  list-style: none;
  font-size: var(--step--1);
  color: var(--spec-muted);
}
.route__legend li { display: flex; align-items: center; gap: 0.55rem; }
.route__key-mark { display: inline-grid; place-items: center; width: 2.4rem; }
.route__key-n {
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 1.55rem;
  border: 2px solid #fff;
  border-radius: 50%;
  font-family: var(--label);
  font-size: 0.55rem;
  color: #fff;
}
.route__key-tool {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 1.1rem;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.16);
  color: var(--spec-ink);
  font-size: 0.55rem;
}
.route__key-chip { width: 2.1rem; height: 1.1rem; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 4px; }

/* The winding route: three across, a turn, three back, a turn, two more. */
@container (min-width: 42rem) {
  .route__stations {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--col-gap);
  }
  .route__station:nth-child(1) { grid-area: 1 / 1; }
  .route__station:nth-child(2) { grid-area: 1 / 2; }
  .route__station:nth-child(3) { grid-area: 1 / 3; }
  .route__station:nth-child(4) { grid-area: 2 / 3; }
  .route__station:nth-child(5) { grid-area: 2 / 2; }
  .route__station:nth-child(6) { grid-area: 2 / 1; }
  .route__station:nth-child(7) { grid-area: 3 / 1; }
  .route__station:nth-child(8) { grid-area: 3 / 2; }

  .route__station {
    padding-inline-start: 0;
    padding-block-start: calc(var(--disc) + var(--s-3));
  }
  .route__name { padding-block-start: 0; }

  /* Along a row: rightward on the first and third, leftward on the second. */
  .route__to {
    inset-block-start: calc(var(--disc) / 2 - var(--chev) / 2);
    inset-inline-start: calc(var(--disc) / 2);
    width: calc(100% + var(--col-gap));
    height: var(--chev);
    background:
      var(--chev-right) center / var(--chev) no-repeat,
      linear-gradient(var(--line), var(--line)) center / 100% var(--line-w) no-repeat;
  }
  .route__station:nth-child(4) .route__to,
  .route__station:nth-child(5) .route__to {
    inset-inline-start: auto;
    inset-inline-end: calc(100% - var(--disc) / 2);
    background-image: var(--chev-left), linear-gradient(var(--line), var(--line));
  }

  /* The two turns: out past the column's edge and back, one row down. */
  .route__station:nth-child(3) .route__to,
  .route__station:nth-child(6) .route__to {
    inset-block-start: calc(var(--disc) / 2 - var(--line-w) / 2);
    width: auto;
    height: calc(100% + var(--row-gap) + var(--line-w));
    border: var(--line-w) solid var(--line);
    background: none;
  }
  .route__station:nth-child(3) .route__to {
    inset-inline-end: calc(-1 * var(--s-3));
    border-inline-start: 0;
    border-radius: 0 var(--s-5) var(--s-5) 0;
  }
  .route__station:nth-child(6) .route__to {
    inset-inline-start: calc(-1 * var(--s-3));
    inset-inline-end: calc(100% - var(--disc) / 2);
    border-inline-end: 0;
    border-radius: var(--s-5) 0 0 var(--s-5);
  }

  /* The key sits in the cell the route leaves empty: the last column of the
     last row, at the foot of the stage. */
  .route__legend {
    position: absolute;
    inset-inline: calc(var(--pad) + 2 * (100% - 2 * var(--pad) + var(--col-gap)) / 3) var(--pad);
    inset-block-end: var(--pad);
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 0;
    padding: 0 0 0 var(--s-3);
    border: 0;
    border-inline-start: 1px solid rgba(255, 255, 255, 0.14);
  }
}

/* --------------------------------------------------------------------------
   7e. Component — the glossary  (glossary.html)
   PQMD's "AMI Key Terms Defined", term by term, generated by
   _build/build_glossary.py. One list to scroll through and see all of - the
   reading Juliemarie asked for on the annex, and kept separate from it, as
   agreed on 30 Sep. A letter index at the top jumps to each group; a term a
   reader jumps to (from the index or a "(see ...)" reference) is marked, so
   the eye lands on it. Notes become a short list and the product-hierarchy
   lines a quiet reference line; the words are the source's own.
   -------------------------------------------------------------------------- */

.glossary-index__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.glossary-index a {
  display: grid;
  place-items: center;
  min-width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-family: var(--label);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--slate-700);
  text-decoration: none;
}
.glossary-index a:hover { border-color: var(--slate-400); background: var(--bg); color: var(--slate-900); }
.glossary-index a:focus-visible { outline: 2px solid var(--orange-ink); outline-offset: 2px; }

.glossary__group { margin-block-start: var(--s-5); scroll-margin-top: 5rem; }
.glossary__letter {
  font-family: var(--display);
  font-size: var(--step-3);
  font-weight: 400;
  line-height: 1;
  color: var(--slate);
  scroll-margin-top: 5rem;
}
/* Pulled out by the terms' own side padding, so a marked term has room around
   its text while every rule still lines up with the letter above. */
.glossary__list {
  margin: var(--s-2) calc(-1 * var(--s-2)) 0;
  border-block-start: 1px solid var(--line);
}

.term {
  display: grid;
  gap: 0.35rem;
  padding: var(--s-3) var(--s-2);
  border-block-end: 1px solid var(--line-soft);
  border-radius: var(--radius);
  scroll-margin-top: 5rem;
}
.term__name { font-weight: 600; color: var(--slate-900); }
.term__def { margin: 0; color: var(--ink); max-width: var(--measure); }
.term__def > * + * { margin-block-start: 0.6rem; }
.term__note-label { font-size: var(--step--1); font-weight: 600; color: var(--slate-700); }
.term__notes { display: grid; gap: 0.35rem; margin-block-start: 0.35rem; padding: 0; list-style: none; font-size: var(--step--1); color: var(--slate-700); }
.term__notes li { position: relative; padding-inline-start: 1.1rem; }
.term__notes li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.72em;
  width: 0.5rem;
  height: 2px;
  background: var(--slate-400);
}
.term__hierarchy {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  font-size: var(--step--1);
  color: var(--slate-700);
}
.term__hierarchy-label { font-weight: 600; }
.term__chain { font-family: var(--label); font-size: var(--step--2); letter-spacing: 0.02em; }
.term__hierarchy--eg { margin-block-start: 0.15rem !important; }
.term__ref { color: var(--slate-900); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

/* The term a reader jumped to. */
.term:target { background: var(--bg); box-shadow: inset 3px 0 0 var(--slate); }
@media (prefers-reduced-motion: no-preference) {
  .term { transition: background var(--dur-2, 0.3s) var(--ease-out), box-shadow var(--dur-2, 0.3s) var(--ease-out); }
}

@media (min-width: 46rem) {
  .term { grid-template-columns: 13rem minmax(0, 1fr); gap: var(--s-3); }
}

/* --------------------------------------------------------------------------
   8. Component — scope ledger
   "AMI provides" / "AMI keeps the focus away from". Paired rows. The right
   column is out of scope, not wrong — set quietly, never struck through.
   -------------------------------------------------------------------------- */

.ledger { border-block-start: 1px solid var(--line); }

.ledger__head { display: none; }
@media (min-width: 46rem) {
  .ledger__head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-4);
    padding-block: var(--s-2);
    border-block-end: 1px solid var(--line);
  }
}
.ledger__label { display: flex; align-items: center; gap: var(--s-1); }
.ledger__label--in  { color: var(--lime-ink); }
.ledger__label--out { color: var(--muted); }
.ledger__icon { font-size: 0.7em; opacity: 0.9; }

.ledger__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-2);
  padding-block: var(--s-3);
  border-block-end: 1px solid var(--line-soft);
  font-size: var(--step--1);
  line-height: 1.5;
}
@media (min-width: 46rem) {
  .ledger__row { grid-template-columns: 1fr 1fr; gap: var(--s-4); align-items: start; }
}

.ledger__in  { color: var(--ink); }
.ledger__out { color: var(--muted); }

/* Stacked view repeats the approved column wording per row so the pairing
   stays legible. Real markup, not generated content, so screen readers get
   the labels at every width — the visual header above is aria-hidden. */
.ledger__rowlabel {
  display: block;
  margin-block-end: 0.35rem;
  font-family: var(--label);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ledger__in  .ledger__rowlabel { color: var(--lime-ink); }
.ledger__out .ledger__rowlabel { color: var(--muted); }

@media (min-width: 46rem) {
  .ledger__rowlabel {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* --------------------------------------------------------------------------
   8b. Component — reference table
   The approved modules are full of two- and three-column reference tables:
   "You may want to understand / Because you need to" in Module 2, "Impact area
   / Primary question / Priority indicator" in Module 3, more in 4 and 6.

   Built as a document table rather than a list of hairlines:
     · a slate-900 header band — the same identity surface as the metric-card
       head, so a table and the card it leads to read as one family;
     · the leading column on the desk colour, so each row's subject separates
       from its description at a glance;
     · rows about an impact area carry that area's accent edge and icon, the
       same pairing the impact cards use. Colour is never the only signal — the
       area name is always written out.

   .ledger cannot do this job: it colours its second column as the lesser of
   an opposed pair. Here every column carries equal weight.

   Column widths come from --cols, so a three-column table is a token change.
   Below 46rem it stacks and each cell repeats its column wording as real
   markup, so a screen reader gets the pairing at every width; the visual
   header band is aria-hidden.
   -------------------------------------------------------------------------- */

.reftable {
  --cols: 1fr 1fr;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.9375rem;
  line-height: 1.55;
}

/* ---- header band ---- */
.reftable__head { display: none; }
@media (min-width: 46rem) {
  .reftable__head {
    display: grid;
    grid-template-columns: var(--cols);
    background-color: var(--panel);
    background-image: linear-gradient(90deg, var(--panel), var(--panel-lo) 70%);
  }
}
.reftable__label {
  padding: 0.8rem var(--s-3);
  font-family: var(--label);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.085em;
  text-transform: uppercase;
  color: var(--spec-muted);
}
/* The leading label names the column that holds each row's subject, so it is
   set a step brighter than the rest of the band. */
.reftable__label:first-child { color: var(--spec-ink); }

/* ---- rows ---- */
.reftable__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.reftable__row + .reftable__row { border-block-start: 1px solid var(--line); }
@media (min-width: 46rem) {
  .reftable__row {
    grid-template-columns: var(--cols);
    align-items: stretch;
  }
}

.reftable__cell {
  padding: var(--s-2) var(--s-3);
  color: var(--ink);
}
@media (min-width: 46rem) {
  .reftable__cell { padding: var(--s-3); }
  .reftable__cell + .reftable__cell { border-inline-start: 1px solid var(--line-soft); }
}

.reftable__cell--lead {
  font-weight: 600;
  line-height: 1.35;
  color: var(--slate-900);
  background: var(--bg);
}
@media (min-width: 46rem) {
  .reftable__cell--lead { padding-block: calc(var(--s-3) + 0.1rem); }
}

/* ---- impact-area rows ---- */
.reftable__row--availability { --area: var(--area-availability); --area-ink: var(--orange-ink); }
.reftable__row--continuity   { --area: var(--area-continuity);   --area-ink: var(--lime-ink); }
.reftable__row--capacity     { --area: var(--area-capacity);     --area-ink: var(--yellow-ink); }

.reftable__row[class*="reftable__row--"] .reftable__cell--lead {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.35rem var(--s-2);
  /* An inset edge rather than a border, so the accent never shifts the column. */
  box-shadow: inset 3px 0 0 var(--area);
}

.reftable__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  margin-block-start: -0.05rem;
  border-radius: 2px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--area-ink);
  font-size: 0.75rem;
}
.reftable__lead-text { flex: 1 1 10rem; min-width: 0; }

/* A lead cell the source writes as "Name - description" (Tool 1, step 2): the
   name keeps the lead weight, the description reads as ordinary text below it. */
/* Tool 1 ends by pointing at Tool 2 in Module 4 - the source's own sentence, linked. */
.tool__next { font-weight: 500; }

.reftable__lead-name { display: block; }
.reftable__lead-desc {
  display: block;
  margin-block-start: 0.35rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
}

/* A line the source sets below the main one inside the same cell, using a
   real line break. Module 3 uses it once, to gloss "available supply". */
.reftable__aside {
  margin-block-start: 0.45rem;
  color: var(--muted);
}

/* ---- column wording, repeated per cell when stacked ---- */
.reftable__rowlabel {
  display: block;
  flex-basis: 100%;
  margin-block-end: 0.3rem;
  font-family: var(--label);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.reftable__cell--lead .reftable__rowlabel { color: var(--slate-700); }
@media (min-width: 46rem) {
  .reftable__rowlabel {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ---- reveal ----
   The generic reveal fades each child through a blur on its own schedule.
   On a table that is exactly what reads as unclear: for most of half a
   second the rows are soft and half-transparent. Here the table arrives as
   one piece — a short rise, no blur, rows sharp from the first frame. */
.js .reftable.reveal > * {
  opacity: 1;
  transform: none;
  filter: none;
  transition: none;
}
.js .reftable.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
}
.js .reftable.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .reftable.reveal { opacity: 1; transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
   9. Component — journey  (six questions, genuinely ordered)
   -------------------------------------------------------------------------- */

.journey {
  position: relative;
  max-width: 46ch;
  padding-inline-start: var(--s-4);
}
/* The spine runs between the first and last node, not past them. */
.journey::before {
  content: "";
  position: absolute;
  inset-block: 0.95em 0.95em;
  inset-inline-start: 5px;
  width: 1px;
  background: var(--slate-400);
}
.journey__step {
  position: relative;
  padding-block: 0.42rem;
  font-family: var(--display);
  font-size: var(--step-1);
  font-style: italic;
  line-height: 1.3;
  color: var(--slate-700);
}
.journey__step::before {
  content: "";
  position: absolute;
  inset-inline-start: calc(-1 * var(--s-4) + 1px);
  inset-block-start: 0.85em;
  width: 9px;
  height: 9px;
  border: 2px solid var(--orange);
  border-radius: 50%;
  background: var(--bg);
}

/* --------------------------------------------------------------------------
   10. Component — resource-inline
   Surfaces a resource where it is needed, without leaving the page.
   -------------------------------------------------------------------------- */

.resource {
  --flow-space: var(--s-5);
  padding: var(--s-4) var(--s-3);
  background: #fff;
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--lime-ink);
  border-radius: var(--radius);
}
@media (min-width: 46rem) { .resource { padding: var(--s-4); } }

.resource__eyebrow { margin-block-end: var(--s-2); }

/* A resource whose contents are impact cards. Those cards are built for the
   slate panel — pale type on a translucent surface — and on a light resource
   they measured 1.97:1 and 1.12:1. So this variant gives them the band's dark
   ground back. It also previews the dark identity head of the metric card
   each one opens into. */
.resource--dark,
.module--sheet .resource--dark {
  background-color: var(--panel);
  background-image: radial-gradient(110% 90% at 12% 0%, var(--panel) 0%, var(--panel-lo) 62%);
  border-color: var(--panel);
  border-inline-start-color: var(--lime);
  color: var(--spec-ink);
}
.resource--dark .resource__title { color: var(--spec-ink); }
.resource--dark .eyebrow--resource { color: var(--lime); }
.resource__title {
  font-family: var(--display);
  font-size: var(--step-2);
  font-weight: 400;
  line-height: 1.2;
  color: var(--slate-900);
}
.resource__lede {
  margin-block-start: var(--s-2);
  font-size: var(--step--1);
  color: var(--muted);
}

/* Numbered because this content genuinely is a sequence. Nothing else is. */
.steps {
  margin-block-start: var(--s-4);
  border-block-start: 1px solid var(--line-soft);
  counter-reset: step;
}
.steps__item {
  position: relative;
  display: grid;
  grid-template-columns: 1.9rem minmax(0, 1fr);
  gap: var(--s-3);
  padding-block: var(--s-3);
  border-block-end: 1px solid var(--line-soft);
}
/* Numerals are circled and threaded onto a spine: this is a map of an
   ordered route, which is the one place in the module where order is real. */
.steps__item::before {
  counter-increment: step;
  content: counter(step);
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border: 1px solid var(--lime-ink);
  border-radius: 50%;
  background: #fff;
  font-family: var(--label);
  font-size: var(--step--2);
  font-variant-numeric: tabular-nums;
  color: var(--lime-ink);
}
.steps__item:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-inline-start: calc(0.95rem - 0.5px);
  inset-block-start: calc(var(--s-3) + 1.9rem);
  inset-block-end: -1px;
  width: 1px;
  background: var(--slate-400);
}
/* Both sit in column 2 and stack; without this the description auto-places
   back into the narrow number column. */
.steps__name {
  grid-column: 2;
  font-weight: 600;
  font-size: var(--step--1);
  letter-spacing: -0.003em;
  color: var(--slate-900);
}
.steps__desc {
  grid-column: 2;
  margin-block-start: 0.15rem;
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   11. Component — pending-slot
   An honest reserved space for content that is not finished. Never filler.
   Not used in Module 1 — no unfinished resource is referenced here.
   -------------------------------------------------------------------------- */

.pending {
  --flow-space: var(--s-5);
  padding: var(--s-4) var(--s-3);
  border: 1px dashed var(--dash);
  border-radius: var(--radius);
  background: transparent;
}
.pending__title {
  margin-block-start: var(--s-2);
  font-family: var(--display);
  font-size: var(--step-1);
  font-weight: 400;
  color: var(--slate-700);
}
.pending__note {
  margin-block-start: var(--s-1);
  font-size: var(--step--1);
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   12. Component — before you move on
   Reflection prompts. Invitations to think — never checkboxes, never a
   completion state, never a count.
   -------------------------------------------------------------------------- */

.reflect {
  border-block-start: 1px solid var(--line);
  padding-block-start: var(--s-4);
}
.reflect__lede { margin-block-end: var(--s-3); color: var(--muted); }

.reflect__list { max-width: var(--measure); }
.reflect__item {
  padding: var(--s-2) 0 var(--s-2) var(--s-3);
  border-inline-start: 1px solid var(--line);
  font-family: var(--display);
  font-size: var(--step-1);
  line-height: 1.35;
  color: var(--slate-900);
}
.reflect__item + .reflect__item { margin-block-start: var(--s-1); }

.reflect__close {
  margin-block-start: var(--s-4);
  max-width: var(--measure);
  color: var(--muted);
}
.reflect__close p + p { margin-block-start: 0.4em; }


/* --------------------------------------------------------------------------
   12b. Component — refrain
   The flagship recurring line. It is three complete sentences in the source,
   so setting it as three parallel statements is a change of presentation, not
   of language. Deliberately NOT numbered and NOT ticked: these are stances to
   hold, not steps to complete.
   -------------------------------------------------------------------------- */

.refrain {
  --flow-space: var(--s-5);
  position: relative;
  margin-block: var(--s-5);
  padding: var(--s-5) var(--s-3) var(--s-4);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
@media (min-width: 46rem) {
  .refrain { padding: var(--s-5) var(--s-4) var(--s-4); }
}
.refrain::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  background: var(--orange);
}

.refrain__list {
  display: grid;
  gap: var(--s-3);
}
@media (min-width: 52rem) {
  .refrain__list { grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
}

.refrain__item {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  align-items: center;
  gap: var(--s-3);
}
@media (min-width: 52rem) {
  /* Stacked on wide screens so the three read as one balanced statement. */
  .refrain__item { grid-template-columns: 1fr; align-items: start; gap: var(--s-3); }
}

.refrain__icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--bg);
  color: var(--orange-ink);
  font-size: 0.95rem;
}

.refrain__line {
  font-family: var(--brand);
  font-size: var(--step-2);
  font-style: normal;
  line-height: 1.28;
  letter-spacing: -0.008em;
  color: var(--slate-900);
  text-wrap: pretty;
}


/* --------------------------------------------------------------------------
   12c. Component — metric-card
   The technical heart of the toolkit. Thirteen fixed sections, identical in
   name and order across all three approved cards. The identity block sits on
   --spec-bg (the brief reserves dark panels for metric cards); the reference
   body stays on light, because thirteen dense sections are not readable
   reversed out. The area accent appears on the rule and icon only.
   -------------------------------------------------------------------------- */

.metric-card {
  --area: var(--orange);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
}
.metric-card--availability { --area: var(--area-availability); }
.metric-card--continuity   { --area: var(--area-continuity); }
.metric-card--capacity     { --area: var(--area-capacity); }

.metric-card__head {
  position: relative;
  padding: var(--s-4) var(--s-3) var(--s-3);
  background-color: var(--panel);
  background-image:
    radial-gradient(110% 90% at 12% 0%, var(--panel) 0%, var(--panel-lo) 62%);
  color: var(--spec-ink);
}
@media (min-width: 46rem) {
  .metric-card__head { padding: var(--s-4) var(--s-4) var(--s-3); }
}
.metric-card__head::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  background: var(--area);
}

.metric-card__area {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-block-end: var(--s-3);
  font-family: var(--label);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--spec-muted);
}
.metric-card__areaicon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--spec-edge);
  border-radius: 50%;
  color: var(--area);
  font-size: 0.8rem;
}

/* The indicator name is the card's title — set in the display face. */
/* The source labels this field differently on each of the three cards —
   "Priority Outcome Metric", "Priority Outcomes Metric", "Priority Outcome
   Indicator". Rendered verbatim rather than normalised, because PQMD's rule
   is to flag a discrepancy, not resolve it quietly. Listed in Content notes
   on the design system page. */
.metric-card__kind {
  margin-block-end: var(--s-1);
  color: var(--spec-muted);
}

.metric-card__name {
  font-family: var(--display);
  font-size: var(--step-2);
  font-weight: 400;
  line-height: 1.26;
  letter-spacing: -0.008em;
  color: var(--spec-ink);
  text-wrap: pretty;
}

.metric-card__body { padding: var(--s-3); }
@media (min-width: 46rem) {
  .metric-card__body { padding: var(--s-3) var(--s-4); }
}
/* 19 Oct (PQMD: "so much white space on the metrics cards that you cannot get
   the picture quickly... if the font was the same size as the sidebar"): the
   card reads at the rail's 14px, on a wider line, with tighter lists. */
.metric-card__body { font-size: 0.875rem; }
.metric-card .metric-section__body,
.metric-card .metric-list,
.metric-card .roles { max-width: var(--measure); }
.metric-card .metric-list li { padding-block: 0.15rem; }
.metric-card .roles { gap: var(--s-2); }

.metric-section { padding-block: var(--s-3); }
.metric-section + .metric-section { border-block-start: 1px solid var(--line-soft); }
.metric-section:first-child { padding-block-start: var(--s-2); }
.metric-section:last-child  { padding-block-end: var(--s-2); }

.metric-section__title {
  margin-block-end: var(--s-2);
  font-family: var(--label);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--orange-ink);
}

.metric-section__body { max-width: var(--measure); }
.metric-section__body p + p { margin-block-start: 1em; }

/* Bulleted content inside a card. A disc marker, never a checkbox or tick. */
.metric-list { max-width: var(--measure); }
.metric-list li {
  position: relative;
  padding-inline-start: var(--s-3);
  padding-block: 0.28rem;
  line-height: 1.55;
}
.metric-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  inset-block-start: 0.85em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--slate-400);
}

/* Role-based section. Four perspectives recur across the toolkit; this is the
   hook the proposed role lens would filter on, so it is marked up per role. */
.roles { display: grid; gap: var(--s-3); max-width: var(--measure); }
.role { display: grid; gap: 0.2rem; }
.role__name {
  font-family: var(--label);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--slate);
}
.role__text { line-height: 1.55; }

/* Element / Guidance reference table. */
.spec-table { border-block-start: 1px solid var(--line); }
.spec-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.2rem;
  padding-block: var(--s-3);
  border-block-end: 1px solid var(--line-soft);
  font-size: var(--step--1);
  line-height: 1.55;
}
@media (min-width: 46rem) {
  .spec-row { grid-template-columns: 13rem minmax(0, 1fr); gap: var(--s-4); align-items: start; }
}
.spec-row__k {
  font-family: var(--label);
  font-size: var(--step--2);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--slate);
}
.spec-row__v { color: var(--ink); }

/* A table inside a card section (15 Oct: Card 3's data sources, calculation
   examples, service status and service dimensions). Same voice as the
   Element / Guidance table: label-style column heads, hairline rows, the first
   cell as the row's heading. Wide ones scroll inside their own frame. */
.metric-table-wrap { overflow-x: auto; margin-block: var(--s-3) var(--s-4); }
.metric-table-wrap:focus-visible { outline: 2px solid var(--slate); outline-offset: 2px; }
.metric-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--step--1);
  line-height: 1.5;
}
.metric-table caption {
  caption-side: top;
  text-align: start;
  padding-block-end: var(--s-2);
  font-weight: 600;
  color: var(--ink);
}
.metric-table th,
.metric-table td {
  padding: var(--s-2) var(--s-3) var(--s-2) 0;
  border-block-end: 1px solid var(--line-soft);
  text-align: start;
  vertical-align: top;
}
.metric-table thead th {
  border-block: 1px solid var(--line);
  font-family: var(--label);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--slate);
}
.metric-table tbody th { font-weight: 600; color: var(--ink); min-width: 9rem; }
.metric-table td { color: var(--ink); min-width: 9rem; }
@media print {
  .metric-table-wrap { overflow: visible; }
  .metric-table tr { break-inside: avoid; }
}


/* --------------------------------------------------------------------------
   12c-ii. Component — card viewer
   The three priority metric cards, opened over the page that links to them.
   Juliemarie, 14 Sep 2026: the cards are "the core of the entire project" and
   must "feel more main than pop-up" — while people can still go in and come
   back without getting lost. So not a box in the middle of the page but a
   place to read, nearly the full window:

     · a slate bar carrying the PQMD mark, the way back ("Back to Module 3"),
       Print and Share — the same brand head as the share and print dialog;
     · the logo's three accents as one static rule under it;
     · the three cards as a switcher — down the side on wide screens, across
       the top on narrow ones. Each tab carries its area's colour and icon,
       and nothing is numbered: the three are parallel, not steps;
     · the card itself on the desk, as a white sheet, like a module page.

   The card pages in metrics/ stay the single source: each is shown in its own
   frame (section 12c-iii has what the card page does inside one), so there is
   one copy of the approved text and a direct link to a card still works.

   Motion: the viewer grows out of the link that opened it on --ease-pop and
   shrinks back into it when it closes. Switching cards is a quiet cross-fade
   with a short rise — never a slide sideways, which would give the cards a
   direction and an order. A full-screen sheet from the bottom on phones.
   -------------------------------------------------------------------------- */

:root { --ease-pop: cubic-bezier(0.2, 1.12, 0.32, 1); }

/* The gutter is reserved permanently, so locking the page scroll while the
   viewer is open does not shift the layout sideways. */
html { scrollbar-gutter: stable; }
html.has-card-viewer { overflow: hidden; }

.card-viewer {
  --cv-gap: 0px;
  position: fixed;
  inset: var(--cv-gap);
  width: auto;
  height: auto;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
}
@media (min-width: 46rem) {
  .card-viewer {
    --cv-gap: clamp(0.5rem, 1.2vw, 1rem);
    border-radius: calc(var(--radius) * 3);
    box-shadow:
      0 0 0 1px rgba(22, 38, 47, 0.08),
      0 40px 110px -30px rgba(8, 16, 22, 0.65);
  }
}
.card-viewer::backdrop {
  background: rgba(14, 26, 33, 0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.card-viewer__shell {
  display: grid;
  /* One column that never grows past the viewer: without it the column took
     the bar's widest content, and a long page name ("Supporting outputs and
     outcomes") pushed the bar and the page inside the panel past its right
     edge, under the scrollbar (10 Oct). */
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 3px minmax(0, 1fr);
  height: 100%;
}

/* ---- the bar ---- */
.card-viewer__bar {
  /* Above the body, so the share panel that hangs from it is never covered
     by the cards or the switcher. */
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--s-1);
  min-height: 3.75rem;
  padding: 0.5rem var(--s-2);
  background-color: var(--panel);
  background-image: radial-gradient(120% 260% at 0% 0%, var(--panel) 0%, var(--panel-lo) 58%);
  color: var(--spec-ink);
}
@media (min-width: 46rem) {
  .card-viewer__bar { gap: var(--s-2); padding-inline: var(--s-3); }
}

.card-viewer__back,
.card-viewer__action,
.card-viewer__close {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font: 500 var(--step--1)/1 var(--body);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.card-viewer__back i { color: var(--orange-on-panel); }
.card-viewer__back:hover,
.card-viewer__action:hover,
.card-viewer__close:hover,
.card-viewer__action[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.34);
}
.card-viewer__back:focus-visible,
.card-viewer__action:focus-visible,
.card-viewer__close:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.card-viewer__close { width: 2.75rem; padding: 0; font-size: 1rem; }

.card-viewer__title {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-width: 0;
  margin: 0 auto 0 var(--s-1);
  font-family: var(--label);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.09em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--spec-muted);
}
.card-viewer__tile {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: calc(var(--radius) * 2);
  background: #fff;
}
.card-viewer__tile img { width: 1.6rem; height: 1.6rem; }

.card-viewer__actions { display: flex; align-items: center; gap: 0.4rem; }

@media (max-width: 45.99rem) {
  /* Phones keep the way back in words; everything else becomes its icon,
     with the name still there for screen readers. */
  .card-viewer__title-text,
  .card-viewer__action span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .card-viewer__action { padding: 0; }
  .card-viewer__back { padding-inline: 0.7rem; }
  .card-viewer__title { margin-inline-start: 0; }
}

.card-viewer__stripe { display: grid; grid-template-columns: repeat(3, 1fr); }
.card-viewer__stripe span:nth-child(1) { background: var(--orange); }
.card-viewer__stripe span:nth-child(2) { background: var(--lime); }
.card-viewer__stripe span:nth-child(3) { background: var(--yellow); }

/* ---- share panel ---- */
.card-viewer__share-wrap { position: relative; }
.card-viewer__share {
  position: absolute;
  z-index: 5;
  top: calc(100% + 0.6rem);
  right: 0;
  width: 20rem;
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 2);
  background: #fff;
  color: var(--ink);
  box-shadow: 0 24px 60px -20px rgba(8, 16, 22, 0.45);
}
@media (max-width: 45.99rem) {
  .card-viewer__share {
    position: fixed;
    top: 4.6rem;
    right: var(--s-2);
    left: var(--s-2);
    width: auto;
  }
}
.card-viewer__share-label {
  margin-block-end: var(--s-2);
  font-family: var(--label);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.085em;
  text-transform: uppercase;
  color: var(--muted);
}
.card-viewer__share-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-1);
}
.card-viewer__share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--slate-900);
  font: 500 var(--step--1)/1.2 var(--body);
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.card-viewer__share-btn i { color: var(--orange-ink); font-size: 0.85rem; }
.card-viewer__share-btn:hover { border-color: var(--slate-400); background: var(--bg); }
.card-viewer__share-btn:focus-visible { outline: 2px solid var(--orange-ink); outline-offset: 2px; }
.card-viewer__nets { display: flex; gap: var(--s-1); margin-block-start: var(--s-1); }
.card-viewer__share-note {
  margin-block-start: var(--s-2);
  font-size: var(--step--1);
  line-height: 1.45;
  color: var(--slate-700);
}
.card-viewer__share-status { display: block; margin-block-start: var(--s-2); }
.card-viewer__share-status:empty { display: none; }

/* ---- body: the switcher and the card ---- */
.card-viewer__body {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
}
@media (min-width: 62rem) {
  .card-viewer__body {
    grid-template-rows: minmax(0, 1fr);
    grid-template-columns: 18.5rem minmax(0, 1fr);
  }
}

.card-viewer__nav {
  min-width: 0;
  padding: 0.5rem;
  border-block-end: 1px solid var(--line);
  background: #fff;
}
@media (min-width: 62rem) {
  .card-viewer__nav {
    display: flex;
    flex-direction: column;
    padding: var(--s-4) var(--s-3) var(--s-3);
    border-block-end: 0;
    border-inline-end: 1px solid var(--line);
    overflow: auto;
  }
}

.card-viewer__nav-title,
.card-viewer__nav-note,
.card-viewer__standalone { display: none; }

.card-viewer__tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.35rem;
}

.card-viewer__tab {
  --tab-area: var(--slate);
  --tab-ink: var(--slate-700);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  min-height: 3.6rem;
  padding: 0.5rem 0.3rem;
  border: 1px solid transparent;
  border-radius: calc(var(--radius) * 2);
  background: transparent;
  color: var(--slate-700);
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.card-viewer__tab--availability { --tab-area: var(--area-availability); --tab-ink: var(--orange-ink); }
.card-viewer__tab--continuity   { --tab-area: var(--area-continuity);   --tab-ink: var(--lime-ink); }
.card-viewer__tab--capacity     { --tab-area: var(--area-capacity);     --tab-ink: var(--yellow-ink); }

.card-viewer__tab:hover { background: var(--bg); }
.card-viewer__tab:focus-visible { outline: 2px solid var(--orange-ink); outline-offset: 2px; }
.card-viewer__tab[aria-selected="true"] {
  border-color: var(--line);
  background: var(--bg);
  box-shadow: inset 0 -3px 0 var(--tab-area);
  color: var(--slate-900);
}

.card-viewer__tab-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--tab-ink);
  font-size: 0.8rem;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.card-viewer__tab[aria-selected="true"] .card-viewer__tab-icon {
  background: var(--panel);
  color: var(--tab-area);
}

.card-viewer__tab-text { display: flex; flex-direction: column; min-width: 0; }
/* Narrow: the full area name is kept for screen readers; the short name shows. */
.card-viewer__tab-area {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.card-viewer__tab-short {
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.2;
}
.card-viewer__tab-name { display: none; }

@media (min-width: 62rem) {
  .card-viewer__nav-title { display: block; margin-block-end: var(--s-3); padding-inline-start: 0.25rem; }
  .card-viewer__tabs { grid-template-columns: minmax(0, 1fr); gap: var(--s-1); }
  .card-viewer__tab {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--s-2);
    min-height: 0;
    padding: 0.75rem 0.75rem 0.8rem;
    text-align: left;
  }
  .card-viewer__tab[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--tab-area); }
  .card-viewer__tab-icon { width: 2.25rem; height: 2.25rem; }
  .card-viewer__tab-area {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip-path: none;
    white-space: normal;
    font-size: var(--step--1);
    font-weight: 600;
    line-height: 1.3;
    color: var(--slate-900);
  }
  .card-viewer__tab-short { display: none; }
  .card-viewer__tab-name:not(:empty) {
    display: -webkit-box;
    margin-block-start: 0.3rem;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    font-size: var(--step--1);
    line-height: 1.4;
    color: var(--muted);
  }
  .card-viewer__nav-note {
    display: block;
    margin-block-start: var(--s-3);
    padding-inline-start: 0.25rem;
    font-family: var(--label);
    font-size: var(--step--2);
    line-height: 1.5;
    color: var(--muted);
  }
  .card-viewer__standalone {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-block-start: auto;
    padding: var(--s-3) 0.25rem 0;
    border-block-start: 1px solid var(--line-soft);
    color: var(--slate);
    font-size: var(--step--1);
    text-decoration: none;
  }
  .card-viewer__standalone i { font-size: 0.75rem; color: var(--orange-ink); }
  .card-viewer__standalone:hover { color: var(--orange-ink); }
  .card-viewer__standalone:focus-visible { outline: 2px solid var(--orange-ink); outline-offset: 2px; }
}

.card-viewer__stage {
  position: relative;
  isolation: isolate;               /* the frames' stacking stays inside the stage */
  min-height: 0;
  background: var(--bg);
}
.card-viewer__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--bg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.card-viewer__frame.is-active {
  z-index: 2;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.card-viewer__frame.is-leaving { z-index: 1; visibility: visible; }

/* ---- motion ---- */
@media (prefers-reduced-motion: no-preference) {
  .card-viewer[open]           { animation: ami-pop-in 620ms var(--ease-pop) both; }
  .card-viewer[open]::backdrop { animation: ami-fade-in 380ms var(--ease-out) both; }

  /* The viewer lands, then its parts settle a beat later. */
  .card-viewer[open] .card-viewer__bar > * { animation: ami-settle-in 420ms var(--ease-out) 200ms both; }
  .card-viewer[open] .card-viewer__nav     { animation: ami-settle-in 460ms var(--ease-out) 260ms both; }

  /* Exits are shorter than entrances and ease in, so the viewer leaves briskly. */
  .card-viewer.is-closing           { animation: ami-pop-out 300ms cubic-bezier(0.5, 0, 0.75, 0.2) both; }
  .card-viewer.is-closing::backdrop { animation: ami-fade-out 300ms ease both; }

  /* Switching cards: the new one rises into place as the old one fades. */
  .card-viewer__frame.is-entering { animation: ami-settle-in 380ms var(--ease-out) both; }
  .card-viewer__frame.is-leaving  { animation: ami-fade-out 200ms ease both; }

  .card-viewer__share:not([hidden]) { animation: ami-settle-in 220ms var(--ease-out) both; }

  @media (max-width: 45.99rem) {
    .card-viewer[open]      { animation: ami-sheet-in 480ms var(--ease-out) both; }
    .card-viewer.is-closing { animation: ami-sheet-out 280ms cubic-bezier(0.5, 0, 0.75, 0.2) both; }
  }
}

/* Shared by the viewer and the share and print dialog. */
@keyframes ami-pop-in {
  0%   { opacity: 0; transform: translate(var(--from-x, 0px), var(--from-y, 0px)) scale(0.26); }
  45%  { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes ami-pop-out {
  0%   { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translate(var(--from-x, 0px), var(--from-y, 0px)) scale(0.26); }
}
@keyframes ami-sheet-in {
  0%   { opacity: 0.4; transform: translateY(100%); }
  100% { opacity: 1; transform: none; }
}
@keyframes ami-sheet-out {
  0%   { opacity: 1; transform: none; }
  100% { opacity: 0.4; transform: translateY(100%); }
}
@keyframes ami-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes ami-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes ami-settle-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   12c-iii. A card page shown inside the viewer
   js/ami.js sets .is-in-card-viewer on a card page only when it is one of the
   viewer's frames, never when someone opens the page directly. The page then
   shows the card and nothing else — the viewer carries the way back, print,
   share and the other cards — set on the desk as a white sheet, the way a
   module page is. Media queries here answer to the frame's width.
   -------------------------------------------------------------------------- */

html.is-in-card-viewer,
html.is-in-card-viewer body { background: var(--bg); }

html.is-in-card-viewer .u-skip,
html.is-in-card-viewer .masthead,
html.is-in-card-viewer .posbar,
html.is-in-card-viewer .rail,
html.is-in-card-viewer .colophon,
html.is-in-card-viewer .sidedock,
html.is-in-card-viewer .endmark { display: none !important; }

html.is-in-card-viewer .shell {
  display: block;
  max-width: none;
  margin: 0;
  padding: 0;
}
html.is-in-card-viewer main { max-width: 60rem; margin-inline: auto; }
html.is-in-card-viewer .metric-card { border: 0; border-radius: 0; }
html.is-in-card-viewer .metric-card:focus { outline: none; }
@media (min-width: 46rem) {
  html.is-in-card-viewer .shell { padding: var(--s-4) var(--s-4) var(--s-6); }
  html.is-in-card-viewer .metric-card {
    border: 1px solid var(--line);
    border-radius: calc(var(--radius) * 2);
    box-shadow: 0 1px 2px rgba(22, 38, 47, 0.03), 0 18px 40px -30px rgba(22, 38, 47, 0.18);
  }
  html.is-in-card-viewer .metric-card__head { padding-inline: var(--s-5); }
  html.is-in-card-viewer .metric-card__body { padding: var(--s-2) var(--s-5) var(--s-4); }
}

/* The card lands, then its contents settle a beat later. The viewer asks for
   this each time it opens, so it replays on every open. */
@media (prefers-reduced-motion: no-preference) {
  html.is-in-card-viewer.is-entering .metric-card__head > * { animation: ami-settle-in 460ms var(--ease-out) 220ms both; }
  html.is-in-card-viewer.is-entering .metric-card__body     { animation: ami-settle-in 520ms var(--ease-out) 300ms both; }
}

/* --------------------------------------------------------------------------
   12c-iii-b. The resource viewer — the annex and the glossary over the page
   One of the two ways in built for PQMD's 7 Oct choice (the other is the
   rail's Resources group). The card viewer's sheet, bar and motion, without
   its switcher: one page in one frame. js/ami.js marks the page inside with
   .is-in-resource-viewer only when it is that frame; it then shows its own
   content and nothing else, on the desk, as the card pages do.
   -------------------------------------------------------------------------- */

/* "Open as a page" is a link on the dark bar: it sets its own hover colour,
   or the global a:hover would turn it the colour of the bar. */
.resource-viewer__standalone { text-decoration: none; }
.resource-viewer__standalone:hover { color: #fff; }
.resource-viewer__stage { min-height: 0; }

/* Kept beside the page (9 Oct: "you might want to have that open as you're
   bringing the other stuff"). The same viewer as a full-height panel on the
   right; the page makes room for it and stays readable and usable. Offered
   only where there is room for both. */
:root { --rv-dock-w: min(34rem, 40vw); }
@media (max-width: 63.99rem) { .resource-viewer__dock { display: none; } }
.resource-viewer.is-docked {
  z-index: 1000;
  inset: 0 0 0 auto;
  width: var(--rv-dock-w);
  border-radius: 0;
  border-inline-start: 1px solid var(--line);
  box-shadow: -24px 0 60px -30px rgba(8, 16, 22, 0.55);
}
html.has-resource-dock body { padding-inline-end: var(--rv-dock-w); }
html.has-resource-dock .sidedock { display: none; }
/* In the narrower panel the bar keeps its buttons as icons; each keeps its
   name for screen readers. The way back is not needed: the page is beside it.
   "Full view" keeps its words: beside the page is how these open (10 Oct), so
   the other way of seeing it has to be easy to find. */
.resource-viewer.is-docked .card-viewer__back { display: none; }
.resource-viewer.is-docked .card-viewer__action { width: 2.75rem; padding: 0; }
.resource-viewer.is-docked .resource-viewer__dock { width: auto; padding-inline: 0.75rem; }
.resource-viewer.is-docked .resource-viewer__dock > span { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
/* Below ~1200px the panel is too narrow for the words as well as the page's
   name, so the switch keeps its icon (and its name as a tooltip, set by
   js/ami.js, and for screen readers). */
@media (max-width: 74.99rem) {
  .resource-viewer.is-docked .resource-viewer__dock { width: 2.75rem; padding: 0; }
  .resource-viewer.is-docked .resource-viewer__dock > span {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
}
.resource-viewer.is-docked .card-viewer__action:not(.resource-viewer__dock) > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* The page's scrollbar runs just beyond the panel's edge, and the frame's
   own just inside it: the bar's last button keeps clear of both (10 Oct). */
.resource-viewer .card-viewer__bar { padding-inline-end: calc(var(--s-3) + 0.75rem); }
.resource-viewer.is-docked .card-viewer__title-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
  .resource-viewer.is-docked[open]      { animation: rv-dock-in 360ms var(--ease-out) both; }
  .resource-viewer.is-docked.is-closing { animation: rv-dock-out 260ms cubic-bezier(0.5, 0, 0.75, 0.2) both; }
}
@keyframes rv-dock-in  { from { opacity: 0.6; transform: translateX(100%); } to { opacity: 1; transform: none; } }
@keyframes rv-dock-out { from { opacity: 1; transform: none; } to { opacity: 0.6; transform: translateX(100%); } }
@media print {
  .resource-viewer.is-docked { display: none !important; }
  html.has-resource-dock body { padding-inline-end: 0 !important; }
}

html.is-in-resource-viewer,
html.is-in-resource-viewer body { background: var(--bg); }

html.is-in-resource-viewer .u-skip,
html.is-in-resource-viewer .masthead,
html.is-in-resource-viewer .draft-note,
html.is-in-resource-viewer .posbar,
html.is-in-resource-viewer .rail,
html.is-in-resource-viewer .colophon,
html.is-in-resource-viewer .sidedock,
html.is-in-resource-viewer .endmark { display: none !important; }

/* Unlike a metric card, these pages have no padding of their own on a phone -
   the shell's gutter normally gives it - so the frame keeps a gutter too. */
html.is-in-resource-viewer .shell {
  display: block;
  max-width: none;
  margin: 0;
  padding: var(--s-3) var(--s-3) var(--s-5);
}
/* Every resource now opens full page (19 Oct), and PQMD wants them to use the
   room ("they could all be the landscape"): the page takes the viewer's width,
   up to a wide limit. A tool shown alone (?solo) does the same. */
html.is-in-resource-viewer main { max-width: 100rem; margin-inline: auto; }
@media (min-width: 46rem) {
  html.is-in-resource-viewer .shell { padding: var(--s-4) var(--s-4) var(--s-6); }
}

/* --------------------------------------------------------------------------
   12c-iv. Components — draft note, tools, worksheets, prompts, card links
   Added with Modules 4–7 (22 Sep 2026).
   -------------------------------------------------------------------------- */

/* ---- draft note ----
   PQMD is still finalising the text (see CLAUDE.md §4), so every page built
   from the draft files says so, plainly and without alarm. To launch, delete
   the element from each page — or hide it everywhere with one rule. */
.draft-note {
  border-block-end: 1px solid color-mix(in srgb, var(--yellow) 45%, var(--line));
  background-color: color-mix(in srgb, var(--yellow) 12%, #fff);
}
.draft-note__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  padding-block: 0.6rem;
  font-size: var(--step--1);
  line-height: 1.45;
  color: var(--slate-900);
}
.draft-note__inner i { padding-block-start: 0.15em; color: var(--yellow-ink); }
.draft-note__inner b { font-weight: 600; }
html.is-in-card-viewer .draft-note { display: none; }

/* ---- the module head's key question label ---- */
.module-head__key { margin-block-end: var(--s-1); }
/* A heading carried up into the opening line (Module 5, PQMD 19 Oct: "put it
   right after the question mark"); the section keeps it, visually hidden. */
.t-opening__trail { font-style: italic; }

/* ---- bulleted lists outside a card ----
   Same disc as the metric card list; never a checkbox or a tick. */
.bullet-list { max-width: var(--measure); }
.bullet-list li {
  position: relative;
  padding-inline-start: var(--s-3);
  padding-block: 0.28rem;
  line-height: 1.55;
}
.bullet-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  inset-block-start: 0.85em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--slate-400);
}

/* ---- prompts ----
   The modules ask their readers a lot of questions. Set as a list of
   invitations to think — a short orange stroke, never a box to tick
   (hard rule 2). */
.prompt-list {
  max-width: var(--measure);
  border-block-start: 1px solid var(--line-soft);
}
.prompt-list li {
  position: relative;
  padding: 0.65rem 0 0.65rem var(--s-4);
  border-block-end: 1px solid var(--line-soft);
  font-family: var(--display);
  font-size: var(--step-1);
  line-height: 1.4;
  color: var(--slate-900);
}
.prompt-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  inset-block-start: 1.2em;
  width: 0.7rem;
  height: 2px;
  background: var(--orange);
}

/* ---- questions by impact area ----
   Module 6 (20 Oct): a few starting questions for each impact area. Three
   cards of one size, side by side where there is room - the area's colour as a
   top edge and an icon, as in the reference tables, so colour labels the area
   and never ranks it. The questions keep the prompt list's quiet stroke. */
.area-prompts { container-type: inline-size; }
.area-prompts__grid { display: grid; gap: var(--s-2); }
@container (min-width: 46rem) {
  .area-prompts__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.area-prompts__area {
  --area: var(--slate);
  --area-ink: var(--slate-700);
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 2);
  background: #fff;
  box-shadow: inset 0 3px 0 var(--area);
}
.area-prompts__area--availability { --area: var(--area-availability); --area-ink: var(--orange-ink); }
.area-prompts__area--continuity   { --area: var(--area-continuity);   --area-ink: var(--lime-ink); }
.area-prompts__area--capacity     { --area: var(--area-capacity);     --area-ink: var(--yellow-ink); }
.area-prompts__name {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  margin-block-end: var(--s-2);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.3;
  color: var(--slate-900);
}
.area-prompts__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 2px;
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--area-ink);
  font-size: 0.75rem;
}
.area-prompts__list li {
  position: relative;
  padding: 0.55rem 0 0.55rem var(--s-3);
  border-block-start: 1px solid var(--line-soft);
  font-family: var(--display);
  font-size: var(--step-0);
  line-height: 1.4;
  color: var(--slate-900);
}
.area-prompts__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 1.15em;
  width: 0.6rem;
  height: 2px;
  background: var(--area);
}
/* Module 6's made-up examples (3 Nov): the same cards, a paragraph each. */
.area-prompts__text { font-size: var(--step-0); line-height: 1.55; color: var(--slate-800); }
@media print {
  .area-prompts__area { break-inside: avoid; box-shadow: inset 0 2pt 0 var(--area); }
  html:not([data-print="fidelity"]) .area-prompts__area { box-shadow: none; border-color: #000; }
  html:not([data-print="fidelity"]) .area-prompts__list li::before { background: #000; }
}

/* Module 6's worked example, set like a tool's callout. About the Toolkit's
   opening paragraph is long for the opening's size, so it reads a step smaller. */
.module-example { margin-block: var(--s-3); }

/* ---- the primer on measurement terminology (Module 3, 3 Nov) ----
   After her picture from an earlier AMI PDF: five steps from input to impact,
   each a tab with a rounded corner, stepping from a light slate tint to the
   logo's slate, the definition beneath. The steps run one way because the
   chain does (input before impact) - it describes a program's logic, never a
   reader's standing. Below 46rem of room each step is a row, the tab on the left. */
.primer-wrap { container-type: inline-size; }
.primer {
  display: grid;
  gap: var(--s-1);
  list-style: none;
  padding: 0;
}
.primer__step {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: var(--s-2);
  align-items: start;
}
.primer__term {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.5rem 0.9rem;
  border-radius: 2px 1.1rem 2px 2px;
  background: var(--step-bg);
  color: var(--step-ink);
  font-family: var(--brand);
  font-size: var(--step-0);
  font-weight: 600;
}
.primer__def { padding-block: 0.5rem; font-size: var(--step-0); line-height: 1.5; color: var(--slate-800); }
.primer__step--1 { --step-bg: #dce3e7; --step-ink: var(--slate-900); }
.primer__step--2 { --step-bg: #bccad1; --step-ink: var(--slate-900); }
.primer__step--3 { --step-bg: #9bb0bb; --step-ink: var(--slate-900); }
.primer__step--4 { --step-bg: #5c7787; --step-ink: #fff; }
.primer__step--5 { --step-bg: var(--slate); --step-ink: #fff; }
@container (min-width: 46rem) {
  .primer { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s-1); }
  .primer__step { grid-template-columns: none; grid-template-rows: auto 1fr; gap: var(--s-2); }
  .primer__term { min-height: 3rem; padding-inline: 1rem; }
  .primer__def { padding: 0 0.25rem 0 1rem; font-size: var(--step--1); }
}
@media print {
  .section:has(> .primer-wrap) { break-inside: avoid; }
  .primer { grid-template-columns: repeat(5, minmax(0, 1fr)); break-inside: avoid; }
  .primer__step { grid-template-columns: none; }
  .primer__term { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  html:not([data-print="fidelity"]) .primer__term { background: none; color: #000; border: 1px solid #000; }
}

/* The Storytelling Reference Guide (3 Nov): its reporting examples as samples,
   and its resources grouped under her labels, each opening in a new tab. */
.guide__sample { max-width: var(--measure); }
.guide-links { display: grid; gap: var(--s-3); }
@media (min-width: 46rem) { .guide-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.guide-links__group {
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 2);
  background: #fff;
}
.guide-links__label { margin-block-end: var(--s-1); }
.guide-links__list li + li { border-block-start: 1px solid var(--line-soft); }
.guide-links__list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  min-height: 2.75rem;
  font-weight: 600;
  color: var(--slate-800);
  text-decoration: none;
}
.guide-links__list a:hover { color: var(--orange-ink); }
.guide-links__list a i { font-size: 0.75rem; color: var(--orange-ink); }
@media print {
  .guide-links__group { break-inside: avoid; }
  .guide-links__list a::after { content: " (" attr(href) ")"; font-weight: 400; font-size: 0.8em; }
  .guide-links__list a i { display: none; }
}
.about .t-opening { font-size: var(--step-1); }

/* ---- links to the three metric cards ----
   Each opens in the card viewer. Area colour and icon, never a number. Since
   16 Oct on the slate stage of Module 3's impact grid, so the way into the
   cards stands out from the page ("make this a blue box"): white tiles of one
   size, the area's colour as a top rule, and a plain "Open the metric card". */
.card-links {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(var(--s-3), 3vw, var(--s-4));
  border-radius: calc(var(--radius) * 3);
  background:
    radial-gradient(110% 80% at 100% 0%, rgba(255, 255, 255, 0.07), transparent 62%),
    var(--spec-bg);
  color: var(--spec-ink);
}
.card-links::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block-start: -9rem;
  inset-inline-end: -9rem;
  width: 22rem;
  aspect-ratio: 1;
  background: var(--ami-mark-line) center / contain no-repeat;
  pointer-events: none;
}
.card-links .card-links__title {
  max-width: 40ch;
  margin-block-end: var(--s-3);
  font-family: var(--display);
  font-size: var(--step-1);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.25;
  text-transform: none;
  color: #fff;
  text-wrap: balance;
}
.card-links__list { display: grid; gap: var(--s-2); }
@media (min-width: 46rem) {
  .card-links__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.card-links__link {
  --area: var(--slate);
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--s-1);
  height: 100%;
  min-height: 2.75rem;
  padding: calc(var(--s-3) + 4px) var(--s-3) var(--s-3);
  border-radius: calc(var(--radius) * 2);
  background: #fff;
  box-shadow: 0 18px 36px -22px rgba(0, 0, 0, 0.7);
  color: var(--ink);
  text-decoration: none;
  overflow: hidden;
  transition: transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.card-links__link::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--area);
}
.card-links__link--availability { --area: var(--area-availability); }
.card-links__link--continuity   { --area: var(--area-continuity); }
.card-links__link--capacity     { --area: var(--area-capacity); }
.card-links__icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--area);
  color: var(--ink);
  font-size: 0.9rem;
}
.card-links__name { font-size: var(--step-0); font-weight: 600; line-height: 1.3; text-wrap: balance; }
/* Module 5 (3 Nov): each card's question under its name. */
.card-links__q { font-size: var(--step--1); line-height: 1.45; color: var(--slate-700); }
.card-links__go {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding-block-start: var(--s-1);
  font-family: var(--label);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate-700);
}
.card-links__go i { font-size: 0.7rem; }
.card-links__link:hover,
.card-links__link:focus-visible { color: var(--ink); transform: translateY(-2px); box-shadow: 0 24px 40px -22px rgba(0, 0, 0, 0.8); }
.card-links__link:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
  .card-links__link { transition: none; }
  .card-links__link:hover, .card-links__link:focus-visible { transform: none; }
}
@media print {
  .card-links__link { box-shadow: none; border: 1px solid var(--line); break-inside: avoid; }
  .card-links__go { display: none; }
  html:not([data-print="fidelity"]) .card-links { background: #fff; color: #000; border: 1px solid #000; }
  html:not([data-print="fidelity"]) .card-links::before { display: none; }
  html:not([data-print="fidelity"]) .card-links .card-links__title { color: #000; }
}

/* ---- a link to a resource elsewhere in the toolkit ----
   Slate since 19 Oct (PQMD: "make all the resources and tools buttons blue"):
   the surface of the tool heads and the Start here link, with an orange arrow,
   so a way to a resource reads as a button, not a note. */
.resource-link {
  position: relative;
  display: grid;
  gap: 0.2rem;
  max-width: 32rem;
  padding: var(--s-3) calc(var(--s-3) + 2rem) var(--s-3) var(--s-3);
  border-radius: calc(var(--radius) * 2);
  background: var(--panel);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 14px 28px -22px rgba(22, 38, 47, 0.8);
  transition: background var(--dur-1) var(--ease-out);
}
.resource-link .eyebrow { color: var(--orange-on-panel); }
.resource-link__title { font-family: var(--display); font-size: var(--step-1); line-height: 1.25; color: #fff; }
.resource-link__note { font-size: var(--step--1); color: var(--spec-muted); }
.resource-link::after {
  content: "";
  position: absolute;
  inset-inline-end: calc(var(--s-3) + 0.2rem);
  inset-block-start: 50%;
  width: 0.55rem;
  height: 0.55rem;
  margin-block-start: -0.3rem;
  border-block-start: 2px solid var(--orange);
  border-inline-end: 2px solid var(--orange);
  transform: rotate(45deg);
  transition: translate var(--dur-1) var(--ease-out);
}
.resource-link:hover { background: var(--panel-deep); color: #fff; }
.resource-link:hover::after { translate: 3px 0; }
/* A page outside the toolkit (Module 7's Interest Group form, 20 Oct): the
   arrow points up and out, as it does for a new tab. */
.resource-link--external::after { display: none; }
.resource-link__out {
  position: absolute;
  inset-inline-end: calc(var(--s-3) + 0.05rem);
  inset-block-start: 50%;
  margin-block-start: -0.45rem;
  font-size: 0.85rem;
  color: var(--orange);
  transition: translate var(--dur-1) var(--ease-out);
}
.resource-link--external:hover .resource-link__out { translate: 2px -2px; }
.resource-link:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

/* Several resource links together (3 Nov: Module 3's Theory of Change and
   Additional Outcomes Explorer, Module 7's five): side by side where there is
   room, each the same size. */
.resource-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  gap: var(--s-2);
}
.resource-group .resource-link { max-width: none; height: 100%; }

/* ---- downloads ----
   Working files a reader takes away (the data collection templates first).
   Each names what it is, its format and size, and whether it is a draft. */
/* Slate since 19 Oct, like the resource buttons ("AMI data collection
   templates ... turn blue"): white file tiles on the slate. */
.downloads {
  padding: var(--s-3);
  border-radius: calc(var(--radius) * 3);
  background: var(--panel);
  color: var(--spec-ink);
}
.downloads__title { margin-block-end: var(--s-2); color: #fff; }
.downloads__list { display: grid; gap: var(--s-1); }
@media (min-width: 46rem) {
  .downloads__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.downloads__note { margin-block-start: var(--s-2); font-size: var(--step--1); color: var(--spec-muted); max-width: var(--measure); }
.downloads__link {
  --area: var(--slate);
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  height: 100%;
  padding: 0.8rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: inset 3px 0 0 var(--area);
  color: var(--slate-900);
  text-decoration: none;
  transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.downloads__link--availability { --area: var(--area-availability); }
.downloads__link--continuity   { --area: var(--area-continuity); }
.downloads__link--capacity     { --area: var(--area-capacity); }
.downloads__link i { padding-block-start: 0.15em; font-size: 1.05rem; color: var(--slate-700); }
.downloads__text { display: grid; gap: 0.2rem; min-width: 0; }
.downloads__name { font-size: var(--step--1); font-weight: 600; line-height: 1.35; }
.downloads__meta {
  font-family: var(--label);
  font-size: var(--step--2);
  letter-spacing: 0.06em;
  color: var(--muted);
}
.downloads__link:hover { border-color: var(--area); background: var(--bg); }
.downloads__link:focus-visible { outline: 2px solid var(--orange-ink); outline-offset: 2px; }
/* A card page offers just its own template, under the card. */
.downloads--single { margin-block-start: var(--s-3); }
.downloads--single .downloads__list { grid-template-columns: minmax(0, 24rem); }
@media print { .downloads { display: none !important; } }

/* ---- samples ----
   The sample before/after impact report and slides in Module 6 (3 Nov): a page
   of each on the slate panel, each opening its PDF. The two report pages side by
   side so they read as a pair; the slides beside them, as wide as both. */
.samples {
  container-type: inline-size;
  padding: var(--s-3);
  border-radius: calc(var(--radius) * 3);
  background-color: var(--panel);
  background-image: radial-gradient(120% 140% at 0% 0%, var(--panel) 0%, var(--panel-lo) 62%);
  color: var(--spec-ink);
}
.samples__eyebrow { color: #fff; }
.samples__note { margin-block-start: var(--s-1); max-width: var(--measure); font-size: var(--step--1); color: var(--spec-muted); }
.samples__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-2);
  margin-block-start: var(--s-3);
  align-items: start;
}
.samples__item--wide { grid-column: 1 / -1; }
@container (min-width: 46rem) {
  .samples__grid { grid-template-columns: 1fr 1fr 2.2fr; }
  .samples__item--wide { grid-column: auto; }
}
.samples__link {
  display: grid;
  gap: 0.6rem;
  padding: 0.6rem;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  text-decoration: none;
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.samples__link:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.4); color: #fff; }
.samples__link:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.samples__thumb {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--radius) * 0.6);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
  transition: transform var(--dur-2) var(--ease-out);
}
.samples__link:hover .samples__thumb { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .samples__link:hover .samples__thumb { transform: none; } }
.samples__text { display: grid; gap: 0.15rem; }
.samples__kind { font-family: var(--label); font-size: var(--step--2); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--lime); }
.samples__name { font-weight: 600; line-height: 1.3; }
.samples__meta { font-family: var(--label); font-size: var(--step--2); letter-spacing: 0.06em; color: var(--spec-muted); }
@media print { .samples { display: none !important; } }

/* One part of a page shown alone in the full-page viewer (?solo=<id>; a tool,
   19 Oct): everything beside it steps aside, and its own "View full page"
   button, which would open what is already open, goes too. */
[data-solo-hidden] { display: none !important; }
html.is-solo [data-tool-view] { display: none; }

/* The Additional Outcomes Explorer's introduction, in PQMD's words (19 Oct). */
.mc__intro { margin: var(--s-3) 0 0; max-width: var(--measure); color: var(--slate-700); }

/* ---- the toolkit package ----
   One download with every working file: the data collection templates and the
   metric cards now, the tool files when PQMD's final versions are in. Offered
   at the foot of every rail and on the entry page (Juliemarie, 18 Sep: "at the
   end of the menu on the left … download all the tools or the package"). */
.package-link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--panel);
  border-radius: var(--radius);
  background: var(--panel);
  color: #fff;
  text-decoration: none;
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.package-link i { font-size: 1rem; color: var(--yellow); }
.package-link__text { display: grid; gap: 0.15rem; min-width: 0; }
.package-link__label { font-size: var(--step--1); font-weight: 600; line-height: 1.3; }
.package-link__meta {
  font-family: var(--label);
  font-size: var(--step--2);
  letter-spacing: 0.06em;
  color: var(--spec-muted);
}
/* Hold the white: the global a:hover sets slate-900, which is this button's own
   background, so the label would disappear into it. */
.package-link:hover { background: var(--panel-deep); border-color: var(--panel-deep); color: #fff; }
.package-link:focus-visible { outline: 2px solid var(--orange-ink); outline-offset: 2px; }

.rail__package { margin-block-start: var(--s-3); }
@media (min-width: 62rem) {
  .rail__package {
    margin-block-start: var(--s-4);
    padding-block-start: var(--s-3);
    border-block-start: 1px solid var(--line);
  }
}
.rail__package .package-link { max-width: 20rem; }
/* The acknowledgements, under the package (16 Oct). */
.rail__list--after { margin-block-start: var(--s-2); }

.package {
  display: grid;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--yellow);
  border-radius: calc(var(--radius) * 2);
  background: var(--bg);
}
@media (min-width: 46rem) {
  .package { grid-template-columns: minmax(0, 1fr) auto; padding: var(--s-3) var(--s-4); }
}
.package__eyebrow { margin-block-end: var(--s-1); }
.package__list li {
  position: relative;
  padding-inline-start: var(--s-3);
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--slate-900);
}
.package__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 2px;
  inset-block-start: 0.7em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--slate-400);
}
.package__list .is-coming { color: var(--muted); }
.package .package-link { padding: 0.85rem 1.1rem; }
@media print { .rail__package, .package { display: none !important; } }

/* ---- the tool ----
   A tool inside its module, shown as guidance: what it is for and a preview
   of its structure that is plainly not a form (decided 14 Sep 2026). Its
   actions — the working file, a blank copy to print, a link — sit in the
   slate head, the same identity surface as the metric card head. */
.tool {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 2);
  background: #fff;
}
.tool__head {
  padding: var(--s-4) var(--s-3);
  background-color: var(--panel);
  background-image: radial-gradient(120% 140% at 0% 0%, var(--panel) 0%, var(--panel-lo) 62%);
  color: var(--spec-ink);
}
@media (min-width: 46rem) { .tool__head { padding: var(--s-4); } }
.tool__eyebrow { display: flex; align-items: center; gap: 0.55rem; color: var(--lime); }
.tool__eyebrow i { font-size: 0.8rem; }
.tool__title {
  margin-block-start: var(--s-1);
  max-width: 26ch;
  font-family: var(--display);
  font-size: var(--step-3);
  font-weight: 400;
  line-height: 1.15;
  color: #fff;
}
.tool__lede { margin-block-start: var(--s-2); max-width: var(--measure); color: var(--spec-ink); }
.tool__actions { display: flex; flex-wrap: wrap; gap: var(--s-1); margin-block-start: var(--s-3); }
.tool__action {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.75rem;
  padding: 0 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font: 500 var(--step--1)/1.2 var(--body);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
.tool__action i { font-size: 0.8rem; color: var(--yellow); }
.tool__action:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.36); }
/* "View full page" is a link among buttons: no underline, and it keeps its
   white on hover (the global a:hover is the panel's own slate). */
a.tool__action, a.tool__action:hover, a.tool__action:visited { color: #fff; text-decoration: none; }
.tool__action:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
/* The working file is not ready yet: said plainly, not faked (hard rule 4). */
.tool__action--pending {
  border-style: dashed;
  background: transparent;
  color: var(--spec-muted);
  cursor: default;
}
.tool__action--pending i { color: var(--spec-muted); }
.tool__action--pending:hover { background: transparent; border-color: rgba(255, 255, 255, 0.22); }
/* The working file, in the reader's choice of format (16 Oct): one button, white
   so it reads as the tool's main action, opening the Word file and the fillable
   PDF with their sizes and what each is for. A <details>, so it works without
   script; js/ami.js closes it on Escape, outside it, and once a file is chosen. */
.tool__download { position: relative; }
.tool__download > summary { list-style: none; }
.tool__download > summary::-webkit-details-marker { display: none; }
.tool__action--file { border-color: #fff; background: #fff; color: var(--ink); font-weight: 600; }
.tool__action--file i { color: var(--slate); }
.tool__action--file:hover { border-color: var(--bg); background: var(--bg); }
.tool__chev { font-size: 0.7rem; transition: transform var(--dur-1) var(--ease); }
.tool__download[open] .tool__chev { transform: rotate(180deg); }
.tool__menu {
  position: absolute;
  z-index: 30;
  inset-block-start: calc(100% + 0.4rem);
  inset-inline-start: 0;
  width: min(25rem, calc(100vw - 3rem));
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 2);
  background: #fff;
  box-shadow: 0 20px 44px -20px rgba(22, 38, 47, 0.6);
}
/* A phone: the button takes the row and the choices open in place beneath it,
   inside the tool, rather than floating past its edge. */
@media (max-width: 40rem) {
  .tool__download { flex: 1 1 100%; }
  .tool__download > summary { width: 100%; justify-content: center; }
  .tool__menu { position: static; width: auto; margin-block-start: 0.4rem; box-shadow: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .tool__download[open] .tool__menu { animation: tool-menu-in 160ms var(--ease-out, ease-out); }
}
@keyframes tool-menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.tool__file {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  min-height: 2.75rem;
  padding: 0.7rem 0.8rem;
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
}
.tool__file:hover, .tool__file:focus-visible { background: var(--bg); color: var(--ink); }
.tool__file:focus-visible { outline: 2px solid var(--slate); outline-offset: -2px; }
.tool__file i { flex: none; width: 1.4rem; margin-block-start: 0.1rem; font-size: 1.25rem; text-align: center; }
.tool__file .fa-file-word { color: #2b579a; }
.tool__file .fa-file-pdf { color: #b30b00; }
.tool__file-text { display: grid; gap: 0.1rem; }
.tool__file-name { font-weight: 600; }
.tool__file-meta { font-size: var(--step--1); color: var(--muted); }
.tool__file-note-line { font-size: var(--step--1); line-height: 1.4; color: var(--slate-700); }

/* Why there is no file to download yet - a status line, never a control. */
.tool__file-note {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: var(--s-2) 0 0;
  font-size: var(--step--1);
  line-height: 1.45;
  color: var(--spec-muted);
}
.tool__file-note i { font-size: 0.8rem; color: var(--yellow); }
@media print { .tool__file-note { display: none !important; } }
.tool__head .tool__status { display: block; margin-block-start: var(--s-2); color: var(--lime); }
.tool__head .tool__status:empty { display: none; }
.tool__head .tool__status.is-note { color: var(--spec-ink); }

.tool__body { padding: var(--s-4) var(--s-3); }
@media (min-width: 46rem) { .tool__body { padding: var(--s-4) var(--s-4) var(--s-5); } }

/* A tool shown as its head alone, its steps on a page of its own (Tools 3 and 4
   in Module 6, 3 Nov). Nothing below the head, so the working-file menu must be
   free to drop past the card's edge. */
.tool--card { overflow: visible; }
.tool--card .tool__head { border-radius: inherit; }

/* On a tool's own page: the way back to the module that holds it. */
.tool-page__from { margin-block-end: var(--s-3); font-size: var(--step--1); }
.tool-page__from a { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--slate-700); font-weight: 600; text-decoration: none; }
.tool-page__from a:hover { color: var(--slate-900); text-decoration: underline; }
.tool-page__from i { color: var(--orange-ink); font-size: 0.85em; }
html.is-solo .tool-page__from { display: none; }
@media print { .tool-page__from { display: none; } }
.tool__step > * + * { margin-block-start: var(--s-3); }
.tool__step + .tool__step {
  margin-block-start: var(--s-5);
  padding-block-start: var(--s-4);
  border-block-start: 1px solid var(--line-soft);
}
.tool__step-title {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-family: var(--display);
  font-size: var(--step-2);
  font-weight: 400;
  line-height: 1.2;
  color: var(--slate-900);
}
.tool__step-n {
  font-family: var(--label);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--orange-ink);
}
.tool__q {
  max-width: var(--measure);
  font-family: var(--display);
  font-size: var(--step-1);
  line-height: 1.35;
  color: var(--slate-900);
}
.tool__callout {
  max-width: var(--measure);
  padding: var(--s-2) var(--s-3);
  border-inline-start: 3px solid var(--orange);
  border-radius: var(--radius);
  background: var(--bg);
}
.tool__callout b {
  display: block;
  margin-block-end: 0.2rem;
  font-family: var(--label);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-700);
}

/* ---- working pages (Tools 3 and 4, 3 Nov) ----
   Her tools are now pages of fields: a short heading, a prompt, and lines to
   write on. The lines are ruled space, never inputs - the Word and PDF working
   files are where people type. They print as plain rules, so a blank copy
   works in a meeting. */
.tool__field { max-width: var(--measure); }
.tool__step > .tool__field + .tool__field {
  margin-block-start: var(--s-4);
}
.tool__field > * + * { margin-block-start: var(--s-2); }
.tool__field-title {
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.3;
  color: var(--slate-900);
}
.tool__field p { color: var(--slate-800); }
.write-lines {
  --line-gap: 2.1rem;
  height: calc(var(--lines, 2) * var(--line-gap));
  background: repeating-linear-gradient(to bottom,
    transparent 0, transparent calc(var(--line-gap) - 1px),
    var(--slate-400) calc(var(--line-gap) - 1px), var(--slate-400) var(--line-gap));
  opacity: 0.7;
}
/* Her made-up report language, set apart as a sample, not as guidance. */
.tool__sample {
  padding: var(--s-2) var(--s-3);
  border-inline-start: 3px solid var(--slate);
  border-radius: var(--radius);
  background: var(--bg);
  font-family: var(--display);
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--slate-900);
}
/* The three impact areas named in a tool: one look for all three. */
.area-chips { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.area-chips__item {
  --area: var(--slate);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.75rem 0.4rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--slate-900);
}
.area-chips__item i {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--area);
  color: var(--ink);
  font-size: 0.65rem;
}
.area-chips__item--availability { --area: var(--area-availability); }
.area-chips__item--continuity   { --area: var(--area-continuity); }
.area-chips__item--capacity     { --area: var(--area-capacity); }
@media print {
  .write-lines {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    background: repeating-linear-gradient(to bottom,
      transparent 0, transparent calc(var(--line-gap) - 1px),
      #777 calc(var(--line-gap) - 1px), #777 var(--line-gap));
    opacity: 1;
  }
  .tool__field { break-inside: avoid; }
  html:not([data-print="fidelity"]) .tool__sample { background: none; border-color: #000; }
  html:not([data-print="fidelity"]) .area-chips__item i { background: none; border: 1px solid #000; }
}

/* ---- worksheet previews ----
   The tool's own tables, shown as they are: blank cells are left blank. A
   real table (row and column headers mean something here), never inputs.
   Wide ones scroll inside their own frame, not the page. */
.worksheet-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  scrollbar-width: thin;
}
.worksheet-wrap:focus-visible { outline: 2px solid var(--orange-ink); outline-offset: 2px; }
.worksheet {
  width: 100%;
  min-width: 18rem;
  border-collapse: collapse;
  border-style: hidden;          /* the frame draws the outer edge */
  font-size: var(--step--1);
  line-height: 1.45;
}
.worksheet--wide { min-width: 38rem; }
.worksheet--wide tbody th { width: 30%; }
.worksheet th,
.worksheet td {
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.worksheet thead th {
  background: var(--panel);
  border-color: var(--panel-lo);
  color: var(--spec-ink);
  font-family: var(--label);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.worksheet tbody th {
  width: 38%;
  background: var(--bg);
  font-weight: 600;
  color: var(--slate-900);
}
.worksheet td { height: 3rem; background: #fff; }

/* Tool 2's "plot where you are" sheet. The source draws each scale as
   ○────○────○────○────○; here it is drawn rather than typed, so it prints as
   real circles a pen can mark. Five identical hollow points on one even line:
   no gradient, no filled end, nothing that reads as one pole being further
   along than the other. Her own Module 4 says plainly this is not a maturity
   assessment, and the scale must not quietly turn it into one. Static by
   design - tools are not filled in on the website. */
.worksheet--spectrum { min-width: 40rem; }
/* The two pole columns have no heading in the source; their header cells are
   empty but must still carry the band, or the header reads as broken. */
.worksheet--spectrum thead td { background: var(--panel); border-color: var(--panel-lo); }
.worksheet--spectrum tbody th { width: 24%; vertical-align: middle; }
.worksheet--spectrum td { height: auto; vertical-align: middle; }
.worksheet--spectrum .spectrum__pole { width: 22%; color: var(--muted); font-size: var(--step--2); }
.worksheet--spectrum .spectrum__pole--start { text-align: right; }
.worksheet--spectrum .spectrum__cell { width: 32%; }
.spectrum {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 9rem;
  height: 14px;
}
.spectrum::before {
  content: "";
  position: absolute;
  inset-inline: 6px;
  top: 50%;
  height: 1px;
  background: var(--slate-400);
}
.spectrum i {
  position: relative;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1.5px solid var(--slate-500);
  background: #fff;
}

@media print {
  .spectrum::before { background: #000; }
  .spectrum i { border-color: #000; width: 11pt; height: 11pt; }
  .worksheet--spectrum { min-width: 0; }
  html:not([data-print="fidelity"]) .worksheet--spectrum thead td { background: none !important; border-color: #000; }
}

@media print {
  .tool__actions, .tool__head .tool__status, .card-links__go { display: none !important; }
  .tool, .tool__step, .worksheet tr, .prompt-list li { break-inside: avoid; }
  .worksheet-wrap { overflow: visible; }
  .worksheet { min-width: 0; }
  .worksheet td { height: 26pt; }
  .draft-note { background: none !important; border: 0.75pt solid #000; }
  html:not([data-print="fidelity"]) .tool__head {
    background: #fff !important;
    color: #000 !important;
    border-block-end: 1pt solid #000;
  }
  html:not([data-print="fidelity"]) .tool__title,
  html:not([data-print="fidelity"]) .tool__lede,
  html:not([data-print="fidelity"]) .tool__eyebrow { color: #000 !important; }
  html:not([data-print="fidelity"]) .worksheet thead th { background: none !important; color: #000 !important; border-color: #000; }
  html:not([data-print="fidelity"]) .prompt-list li::before { background: #000; }
}

/* --------------------------------------------------------------------------
   12d. Component — entry page
   The front door. It carries no rail: you are not inside a module yet, and a
   position indicator with no position to report would be noise. Everything on
   it is approved language already public in Module 1 and the metric cards —
   the entry page introduces the toolkit, it does not add to it.
   -------------------------------------------------------------------------- */

.entry {
  width: 100%;
  max-width: 76rem;
  margin-inline: auto;
  padding-inline: var(--s-3);
}

.entry-head { padding-block: var(--s-6) var(--s-4); }
@media (min-width: 62rem) { .entry-head { padding-block: var(--s-7) var(--s-5); } }

.entry-head__title {
  font-family: var(--display);
  font-size: var(--step-4);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.018em;
  color: var(--slate-900);
  max-width: 16ch;
}
.entry-head__opening {
  margin-block-start: var(--s-4);
  padding-block-start: var(--s-4);
  border-block-start: 1px solid var(--line);
}

/* --- the seven modules, as a directory -----------------------------------
   Numbered because the modules do build on one another, but every card is the
   same size and weight and nothing is filled in behind you. This reports what
   exists, never how far through it anyone is. */

.entry-modules {
  display: grid;
  gap: var(--s-2);
  margin-block-start: var(--s-4);
}
@media (min-width: 40rem) { .entry-modules { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .entry-modules { grid-template-columns: repeat(3, 1fr); } }

.entry-module {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: var(--s-2);
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  text-decoration: none;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}
a.entry-module:hover { border-color: var(--slate-400); background: var(--line-soft); }

.entry-module__n {
  font-family: var(--label);
  font-size: var(--step--2);
  font-variant-numeric: tabular-nums;
  color: var(--orange-ink);
  padding-block-start: 0.15em;
}
.entry-module__title {
  font-family: var(--display);
  font-size: var(--step-1);
  line-height: 1.25;
  color: var(--slate-900);
}
.entry-module__state {
  display: block;
  margin-block-start: 0.3rem;
  font-family: var(--label);
  font-size: var(--step--2);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Modules still being built. Describes the toolkit's state, never the reader's. */
.entry-module.is-unbuilt { background: transparent; border-style: dashed; }
.entry-module.is-unbuilt .entry-module__n,
.entry-module.is-unbuilt .entry-module__title { color: var(--muted); }


/* --------------------------------------------------------------------------
   12e. Component — position bar
   Where you are on this page. NOT progress: one tick per section, the current
   one marked and named, and nothing ever fills in behind you. Hard rule 2 —
   a bar that fills is the exact visual language the content works to avoid.
   Built by js/ami.js from the page's own headings; hidden without JS.
   -------------------------------------------------------------------------- */

.posbar {
  display: none;
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(8px);
  border-block-end: 1px solid var(--line);
}
.js .posbar { display: block; }

.posbar__inner {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 2.75rem;
}

.posbar__ticks {
  display: flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
}
.posbar__tick {
  width: 14px;
  height: 3px;
  border-radius: 2px;
  background: var(--line);
  transition: width var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
/* The one moment of motion here: the current tick extends to 30px — the same
   width as the accent rule under every section heading — and takes the accent. */
.posbar__tick[aria-current="true"] {
  width: 30px;
  background: var(--orange);
}

.posbar__label {
  min-width: 0;
  font-family: var(--label);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity var(--dur-1) var(--ease-out);
}
.posbar__label.is-swapping { opacity: 0; }

/* --------------------------------------------------------------------------
   12f. Component — side dock
   Share and Print, parked at the right edge. Icon at rest, label on hover or
   focus — but the accessible name is always present, never hover-only.
   -------------------------------------------------------------------------- */

.sidedock {
  display: none;
  position: fixed;
  right: var(--s-3);
  top: 50%;
  z-index: 40;
  flex-direction: column;
  gap: var(--s-1);
  opacity: 0;
  translate: 12px -50%;
  pointer-events: none;
  transition: opacity var(--dur-2) var(--ease-out), translate var(--dur-2) var(--ease-out);
}
.js .sidedock { display: flex; }
.sidedock.is-in { opacity: 1; translate: 0 -50%; pointer-events: auto; }

.sidedock__btn {
  display: flex;
  align-items: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--slate-700);
  font-family: var(--label);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(22, 38, 47, 0.06);
  transition: border-color var(--dur-1) var(--ease-out),
              color var(--dur-1) var(--ease-out),
              box-shadow var(--dur-1) var(--ease-out);
}
.sidedock__btn i {
  width: 2.75rem;
  flex: 0 0 auto;
  text-align: center;
  font-size: 0.95rem;
  transition: color var(--dur-1) var(--ease-out);
}
.sidedock__btn span {
  max-width: 0;
  padding-inline-end: 0;
  opacity: 0;
  white-space: nowrap;
  transition: max-width var(--dur-2) var(--ease-out),
              padding-inline-end var(--dur-2) var(--ease-out),
              opacity var(--dur-1) var(--ease-out);
}
.sidedock__btn:hover,
.sidedock__btn:focus-visible {
  border-color: var(--orange);
  color: var(--slate-900);
  box-shadow: 0 2px 8px rgba(22, 38, 47, 0.1);
}
.sidedock__btn:hover span,
.sidedock__btn:focus-visible span {
  max-width: 8rem;
  padding-inline-end: var(--s-3);
  opacity: 1;
}
.sidedock__btn:hover i,
.sidedock__btn:focus-visible i { color: var(--orange-ink); }

@media (max-width: 46rem) {
  /* On a phone the right edge belongs to the thumb, not to page chrome. */
  .sidedock {
    top: auto;
    bottom: var(--s-3);
    flex-direction: row;
    translate: 0 12px;
  }
  .sidedock.is-in { translate: 0 0; }
}

/* --------------------------------------------------------------------------
   12g. Component — scope dialog
   Share, Email or Print: this page, one module, or the whole toolkit.
   One dialog, three modes; the script shows only the parts a mode uses.

   Built as a PQMD document rather than a system prompt:
     · a slate head carrying the PQMD mark on a white tile — the mark's slate
       quadrant would vanish straight onto the dark ground — with the mark
       again as a faint watermark cropped by the corner;
     · the logo's three accents as one rule under the head. Three equal
       parts arriving together, never drawn across: a line that fills from
       left to right would read as a progress bar (hard rule 2);
     · the choices as tiles with their own icons, the chosen one set on the
       desk tint with the slate edge and the orange mark.

   Motion is the card popup's: it grows out of the dock button that opened
   it on --ease-pop, its contents settle a beat later, and it shrinks back
   into the same button when it closes. A sheet from the bottom on phones.
   Native <dialog>, so Escape, focus trapping and the inert page behind come
   from the platform; the script only runs the exit before closing.
   -------------------------------------------------------------------------- */

.scope {
  --from-x: 0px;
  --from-y: 0px;
  width: min(33rem, calc(100vw - 2 * var(--s-3)));
  max-width: none;
  max-height: calc(100dvh - 2rem);
  padding: 0;
  border: 0;
  border-radius: calc(var(--radius) * 3);
  overflow: hidden;
  background: #fff;
  color: var(--ink);
  box-shadow:
    0 0 0 1px rgba(22, 38, 47, 0.08),
    0 34px 90px -24px rgba(8, 16, 22, 0.6);
}
.scope::backdrop {
  background: rgba(14, 26, 33, 0.58);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.scope__inner {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 2rem);
}

/* ---- head ---- */
.scope__head {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  flex: none;
  padding: var(--s-3) var(--s-3) var(--s-4);
  background-color: var(--panel);
  background-image: radial-gradient(120% 110% at 0% 0%, var(--panel) 0%, var(--panel-lo) 64%);
  color: var(--spec-ink);
}
@media (min-width: 46rem) {
  .scope__head { padding: var(--s-3) var(--s-4) var(--s-4); }
}

.scope__watermark {
  position: absolute;
  z-index: -1;
  right: -2.6rem;
  bottom: -3rem;
  width: 10.5rem;
  height: auto;
  opacity: 0.14;
  pointer-events: none;
}

.scope__brand {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 2.75rem;
  padding-inline-end: 3.5rem;       /* clear of the close button */
}
.scope__tile {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: calc(var(--radius) * 2);
  background: #fff;
}
.scope__tile img { width: 1.8rem; height: 1.8rem; }
.scope__org {
  font-family: var(--label);
  font-size: var(--step--2);
  letter-spacing: 0.09em;
  line-height: 1.45;
  text-transform: uppercase;
  color: var(--spec-muted);
}
.scope__org b {
  margin-inline-end: 0.5em;
  font-weight: 600;
  color: #fff;
}

.scope__close {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  font-size: 1rem;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
}
@media (min-width: 46rem) { .scope__close { right: var(--s-4); } }
.scope__close:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.32); }
.scope__close:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }

.scope__kind {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-block-start: var(--s-4);
  color: var(--lime);
}
.scope__kind i { font-size: 0.8rem; }
.scope__title {
  margin-block-start: var(--s-1);
  max-width: 22ch;
  font-family: var(--display);
  font-size: var(--step-3);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.012em;
  color: #fff;
}
.scope__note {
  margin-block-start: var(--s-1);
  max-width: 44ch;
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--spec-muted);
}

.scope__stripe {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  flex: none;
  height: 3px;
}
.scope__stripe span:nth-child(1) { background: var(--orange); }
.scope__stripe span:nth-child(2) { background: var(--lime); }
.scope__stripe span:nth-child(3) { background: var(--yellow); }

/* ---- body ---- */
.scope__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: var(--s-3);
}
@media (min-width: 46rem) {
  .scope__body { padding: var(--s-4) var(--s-4) var(--s-3); }
}

.scope__legend {
  margin-block-end: var(--s-2);
  padding: 0;
  font-family: var(--label);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.085em;
  text-transform: uppercase;
  color: var(--muted);
}

.scope__options {
  display: grid;
  gap: var(--s-1);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.scope__opt {
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--s-2);
  padding: 0.65rem var(--s-2) 0.65rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 2);
  background: #fff;
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.scope__opt:hover { border-color: var(--slate-400); }
.scope__opt:has(input:checked) {
  border-color: var(--panel);
  background: var(--bg);
  box-shadow: inset 3px 0 0 var(--orange);
}
.scope__opt:has(input:focus-visible) { outline: 2px solid var(--orange-ink); outline-offset: 2px; }

.scope__opt-icon {
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--slate-700);
  font-size: 0.85rem;
  transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
}
.scope__opt:has(input:checked) .scope__opt-icon { background: var(--panel); color: #fff; }

.scope__opt-text b {
  display: block;
  font-size: var(--step--1);
  font-weight: 600;
  line-height: 1.35;
  color: var(--slate-900);
}
.scope__opt-text small {
  display: block;
  font-size: var(--step--1);
  line-height: 1.45;
  color: var(--muted);
}
.scope__opt input {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
  accent-color: var(--slate-900);
}

.scope__pick { margin-block-start: var(--s-2); }
.scope__pick select {
  width: 100%;
  min-height: 2.75rem;
  padding: 0 var(--s-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  font: inherit;
  font-size: var(--step--1);
  color: var(--ink);
}
.scope__pick select:focus-visible { outline: 2px solid var(--orange-ink); outline-offset: 2px; }

/* Share mode only, in the action bar beside Copy link, so the ways to share
   are always in view however long the list above runs. Each network keeps
   its own mark in its own colour; the button around it stays in the
   toolkit's ground. The name is real text for screen readers and a tooltip. */
.scope__share { display: flex; gap: var(--s-1); }
.scope__net {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.scope__net svg {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  fill: var(--net, var(--slate-900));
  transition: transform var(--dur-2) var(--ease-out);
}
.scope__net--facebook { --net: var(--brand-facebook); }
.scope__net--facebook svg { width: 1.3rem; height: 1.3rem; }   /* a lone "f" reads small beside two full marks */
.scope__net--x        { --net: var(--brand-x); }
.scope__net--linkedin { --net: var(--brand-linkedin); }
.scope__net:hover:not(:disabled) {
  border-color: var(--net);
  background: var(--bg);
  box-shadow: inset 0 -2px 0 var(--net);
}
.scope__net:hover:not(:disabled) svg { transform: scale(1.12); }
.scope__net:focus-visible { outline: 2px solid var(--orange-ink); outline-offset: 2px; }
.scope__net:disabled { cursor: not-allowed; opacity: 0.5; }

/* Mail mode only. Real inputs with real validation — the form is complete, and
   the note says plainly where sending actually happens. */
.scope__fields { display: grid; gap: var(--s-2); margin-block-start: var(--s-4); }
@media (min-width: 30rem) { .scope__fields { grid-template-columns: 1fr 1fr; } }
.scope__field { display: grid; gap: 0.3rem; }
.scope__field label {
  font-family: var(--label);
  font-size: var(--step--2);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--slate);
}
.scope__field input {
  min-height: 2.75rem;
  padding: 0 var(--s-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  font: inherit;
  font-size: var(--step--1);
  color: var(--ink);
  transition: border-color var(--dur-1) var(--ease-out);
}
.scope__field input:focus-visible { border-color: var(--orange); outline: 2px solid var(--orange-ink); outline-offset: 1px; }

/* Says where a feature lives. Not an error — a statement about hosting. */
.scope__hosted {
  display: flex;
  gap: 0.6em;
  margin-block-start: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border-inline-start: 2px solid var(--orange);
  border-radius: var(--radius);
  background: var(--bg);
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--slate-700);
}
.scope__hosted i { padding-block-start: 0.2em; color: var(--orange-ink); }

/* ---- actions ---- */
.scope__actions {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3) var(--s-3);
  border-block-start: 1px solid var(--line);
  background: #fff;
}
@media (min-width: 46rem) {
  .scope__actions { padding: var(--s-3) var(--s-4); }
}
.scope__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  padding: 0 var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--slate-700);
  font-family: var(--label);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
}
.scope__btn:hover { border-color: var(--slate-400); }
.scope__btn:focus-visible { outline: 2px solid var(--orange-ink); outline-offset: 2px; }
.scope__btn--go {
  border-color: var(--panel);
  background: var(--panel);
  color: #fff;
}
.scope__btn--go i { color: var(--yellow); font-size: 0.8rem; }
.scope__btn--go:hover { background: var(--panel-deep); border-color: var(--panel-deep); }

.scope__status {
  margin-inline-end: auto;
  font-family: var(--label);
  font-size: var(--step--2);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--lime-ink);
  opacity: 0;
  transition: opacity var(--dur-1) var(--ease-out);
}
.scope__status.is-on { opacity: 1; }
/* When copying is refused, the link itself is shown so it can be copied by hand. */
.scope__status.is-link { flex-basis: 100%; order: -1; overflow-wrap: anywhere; user-select: all; }
/* The hosted-feature message is information, not success — so not green. */
.scope__status.is-note { color: var(--slate-700); text-transform: none; letter-spacing: 0.04em; }

/* In Share the networks take Cancel's place; the close button and Escape
   still dismiss it. */
.scope[data-mode="share"] .scope__actions [data-scope-cancel] { display: none; }

/* ---- phones: a sheet from the bottom edge ---- */
@media (max-width: 45.99rem) {
  .scope {
    width: 100%;
    max-height: 92dvh;
    margin-block: auto 0;
    border-end-start-radius: 0;
    border-end-end-radius: 0;
  }
  .scope__inner { max-height: 92dvh; }
}
/* Short windows — a laptop with the browser's own bars, a phone on its side:
   the head gives up air before the choices have to scroll. */
@media (max-height: 46rem) {
  .scope__head { padding-block-end: var(--s-3); }
  .scope__kind { margin-block-start: var(--s-2); }
  .scope__title { font-size: var(--step-2); }
  .scope__watermark { width: 8.5rem; }
  .scope__body { padding-block: var(--s-3) var(--s-2); }
  .scope__opt { padding-block: 0.5rem; }
}

/* ---- motion ---- */
@media (prefers-reduced-motion: no-preference) {
  .scope[open]           { animation: ami-pop-in 560ms var(--ease-pop) both; }
  .scope[open]::backdrop { animation: ami-fade-in 360ms var(--ease-out) both; }

  /* The dialog lands, then its contents settle a beat later. */
  .scope[open] .scope__head > :not(.scope__watermark) { animation: ami-settle-in 420ms var(--ease-out) 170ms both; }
  .scope[open] .scope__watermark { animation: scope-mark-in 900ms var(--ease-out) 120ms both; }
  .scope[open] .scope__body      { animation: ami-settle-in 460ms var(--ease-out) 240ms both; }
  .scope[open] .scope__actions   { animation: ami-settle-in 460ms var(--ease-out) 300ms both; }

  /* A newly shown part of the body — the module list, say — eases in too. */
  .scope__pick:not([hidden]) { animation: ami-settle-in 280ms var(--ease-out) both; }

  /* Exits are shorter than entrances and ease in, so the dialog leaves briskly. */
  .scope.is-closing           { animation: ami-pop-out 280ms cubic-bezier(0.5, 0, 0.75, 0.2) both; }
  .scope.is-closing::backdrop { animation: ami-fade-out 280ms ease both; }

  @media (max-width: 45.99rem) {
    .scope[open]      { animation: ami-sheet-in 480ms var(--ease-out) both; }
    .scope.is-closing { animation: ami-sheet-out 260ms cubic-bezier(0.5, 0, 0.75, 0.2) both; }
  }
}
@keyframes scope-mark-in {
  from { opacity: 0; transform: rotate(-24deg) scale(0.8); }
  to   { opacity: 0.14; transform: none; }
}

/* --------------------------------------------------------------------------
   12h. Utility — scroll reveal
   Lists arrive a beat after the heading that introduces them. Opt in per
   container with class="reveal". Without JS, or with reduced motion, the
   content is simply visible — the animation is never load-bearing.
   -------------------------------------------------------------------------- */

.js .reveal > * {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(3px);
  transition: opacity var(--dur-4) var(--ease-out),
              transform var(--dur-4) var(--ease-out),
              filter var(--dur-4) var(--ease-out);
}
.js .reveal.is-in > * { opacity: 1; transform: none; filter: none; }
.js .reveal.is-in > *:nth-child(2)     { transition-delay:  80ms; }
.js .reveal.is-in > *:nth-child(3)     { transition-delay: 160ms; }
.js .reveal.is-in > *:nth-child(4)     { transition-delay: 240ms; }
.js .reveal.is-in > *:nth-child(5)     { transition-delay: 320ms; }
.js .reveal.is-in > *:nth-child(6)     { transition-delay: 400ms; }
.js .reveal.is-in > *:nth-child(n + 7) { transition-delay: 460ms; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal > * { opacity: 1; transform: none; filter: none; transition: none; }
}

/* Pages fetched and assembled for a multi-page print. Hidden on screen. */
.print-bundle { display: none; }
.print-bundle__page + .print-bundle__page { break-before: page; }


/* --------------------------------------------------------------------------
   12i. Component — entry hero
   The front door's argument, not a decorated title. The thesis is the largest
   thing on the page; the initiative's name sits above it as a lockup, because
   the masthead already carries the name and the statement is what persuades.
   -------------------------------------------------------------------------- */

.hero {
  display: grid;
  gap: var(--s-5);
  padding-block: var(--s-6) var(--s-5);
}
@media (min-width: 62rem) {
  .hero { gap: var(--s-6); padding-block: var(--s-7) var(--s-6); }
}

/* The mark composition sits under the argument. It is capped so the hero is
   not only a picture: the figure takes the width its three clauses need and
   the panel beside it takes the rest. */
.hero__art {
  display: grid;
  gap: var(--s-4);
  margin-block-start: var(--s-2);
}
@media (min-width: 62rem) {
  .hero__art {
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: var(--s-5);
    /* The picture stretches to the row; the mark stays centred in it. */
    align-items: stretch;
  }
}

.hero__lockup {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-block-end: var(--s-4);
}
.hero__lockup::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--line);
}

.hero__thesis {
  font-family: var(--display);
  font-size: clamp(1.9rem, 4.4vw + 1rem, 4rem);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.022em;
  color: var(--slate-900);
  max-width: 21ch;
  text-wrap: balance;
}

.hero__lead {
  max-width: 54ch;
  margin-block-start: var(--s-4);
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--slate-700);
}

/* One line of orientation: what the toolkit is made of. Counts of what exists,
   never how far through anything anyone is. */
.hero__shape {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-2);
  margin-block-start: var(--s-4);
  padding-block-start: var(--s-3);
  border-block-start: 1px solid var(--line);
  font-family: var(--label);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero__shape b { color: var(--slate-900); font-weight: 500; }
.hero__shape span:not(:last-child)::after { content: " ·"; color: var(--slate-400); }

/* --------------------------------------------------------------------------
   12i-b. Component — the front door (9 Oct, PQMD's notes)
   "Start here" at the top, ways in where the refrains were, and the three
   impact areas in their colours as the main picture, filling the space beside
   the argument. Headings here are never smaller than what follows them.
   -------------------------------------------------------------------------- */

.hero--front {
  align-items: start;
  /* The thesis is sized from the hero's own width, not the window's: with
     the rail beside the sheet (10 Oct) the hero is narrower than the window
     suggests, and a window-sized thesis broke into four lines. */
  container-type: inline-size;
}
.hero--front .hero__thesis { font-size: clamp(1.75rem, 3.7cqi, 2.85rem); max-width: 24ch; }
@media (min-width: 62rem) {
  .hero--front {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    gap: var(--s-5);
  }
}
/* 19 Oct (PQMD: the whole front page visible without scrolling, at least as far
   as the four ways in): a quieter top margin, the lead at body size and wider,
   and tighter steps between the parts. */
.hero.hero--front { padding-block: var(--s-4) var(--s-5); }
.hero--front .hero__lockup { margin-block-end: var(--s-3); }
.hero--front .hero__lead { margin-block-start: var(--s-3); max-width: 64ch; font-size: 1rem; line-height: 1.55; }
.hero--front .hero__shape { margin-block-start: var(--s-3); padding-block-start: var(--s-2); }

/* The way in: one large, unmistakable link into Module 1. */
.start-cta {
  position: relative;
  display: grid;
  gap: 0.25rem;
  max-width: 34rem;
  margin-block-start: var(--s-3);
  padding: var(--s-2) calc(var(--s-3) + 3.25rem) var(--s-2) var(--s-3);
  border-radius: calc(var(--radius) * 3);
  background: var(--panel);
  color: #fff;
  text-decoration: none;
  box-shadow: 0 18px 36px -24px rgba(22, 38, 47, 0.8);
  transition: background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.start-cta:hover { background: var(--panel-deep); color: #fff; transform: translateY(-1px); }
.start-cta:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.start-cta__kicker {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange-on-panel);
}
.start-cta__title {
  font-family: var(--display);
  font-size: var(--step-2);
  line-height: 1.15;
  color: #fff;
}
.start-cta__q { font-size: var(--step-0); line-height: 1.45; color: var(--spec-muted); }
.start-cta__go {
  position: absolute;
  inset-inline-end: var(--s-3);
  inset-block-start: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--orange);
  color: var(--slate-900);
  font-size: 1rem;
  transition: translate var(--dur-1) var(--ease);
}
.start-cta:hover .start-cta__go { translate: 3px -50%; }

/* Ways in: the four places people most often want to go first. */
.ways-in { margin-block-start: var(--s-3); }
.ways-in__title {
  font-family: var(--display);
  font-size: var(--step-1);
  line-height: 1.2;
  color: var(--slate-900);
  margin-block-end: var(--s-2);
}
.ways-in__list {
  display: grid;
  gap: var(--s-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 36rem) { .ways-in__list { grid-template-columns: 1fr 1fr; } }
.ways-in__link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  height: 100%;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 2);
  background: #fff;
  font-size: var(--step-0);
  font-weight: 500;
  line-height: 1.3;
  color: var(--slate-900);
  text-decoration: none;
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.ways-in__link i { flex: none; width: 1.2rem; text-align: center; color: var(--slate); }
.ways-in__link:hover { border-color: var(--slate-400); background: var(--line-soft); color: var(--slate-900); }
.ways-in__link:focus-visible { outline: 2px solid var(--orange-ink); outline-offset: 2px; }

/* The three impact areas as the hero's picture: the band's slate stage and
   cards, one above another, the area name as the headline of each. */
.hero__areas {
  margin: 0;
  padding: var(--s-4) var(--s-3);
}
@media (min-width: 62rem) { .hero__areas { padding: var(--s-4); } }
.hero__areas-title {
  margin-block-end: var(--s-3);
  font-family: var(--display);
  font-size: var(--step-2);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--spec-ink);
  text-wrap: balance;
}
.hero__areas .impact__grid { grid-template-columns: 1fr; gap: var(--s-2); }
.hero__areas .impact-card {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: var(--s-3);
  row-gap: 0.3rem;
  padding: var(--s-3);
}
.hero__areas .impact-card__icon { grid-row: 1 / span 2; align-self: start; }
.hero__areas .impact-card__name {
  min-height: 0;
  font-family: var(--body);
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.3;
  color: var(--spec-ink);
}
.hero__areas .impact-card__q {
  font-family: var(--body);
  font-style: normal;
  font-size: var(--step--1);
  line-height: 1.45;
  color: var(--spec-muted);
}
.hero__areas-foot {
  margin-block-start: var(--s-3);
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--spec-muted);
}

/* The map follows straight on: the first section of the page. */
.entry-map { padding-block-start: var(--s-2); }
.entry-map .route { margin-block-start: var(--s-3); }
/* The route never splits across pages, so in print the whole section starts a
   page: otherwise its heading is left alone at the foot of the first. */
@media print { .entry-map { break-before: page; } }

/* The data collection templates, out in the open. */
.templates__grid { display: grid; gap: var(--s-4); align-items: start; }
@media (min-width: 52rem) {
  .templates__grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--s-5); }
}
.templates .templates__list { grid-template-columns: 1fr; margin-block-start: var(--s-3); }
.templates__preview { margin: 0; }
.templates__preview img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 2);
  background: #fff;
  box-shadow: 0 18px 36px -26px rgba(22, 38, 47, 0.55);
}
.templates__preview figcaption {
  margin-block-start: var(--s-2);
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--muted);
}
.templates .package { margin-block-start: var(--s-5); }
/* In Module 5 (20 Oct): under the section's own heading, so an eyebrow names
   the downloads and a short note sits beneath them. Not printed: on paper the
   files cannot be downloaded. */
.templates__eyebrow { margin-block-end: 0; color: var(--orange-ink); }
.templates--module .templates__list { margin-block-start: var(--s-2); }
.templates__note {
  margin-block-start: var(--s-2);
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--muted);
}
@media print { .templates--module { display: none !important; } }
.entry-package .package { margin-block-start: 0; }
.entry-refrain { margin-block-start: var(--s-5); }
/* The way in again at the foot of the front page (20 Oct), centred under the
   templates so it reads as the page's last word, not another section. A link
   to follow on screen only: on paper it would be a button with nowhere to go. */
.entry-close {
  display: flex;
  justify-content: center;
  margin-block-start: var(--s-6);
}
.entry-close .start-cta { inline-size: min(100%, 34rem); margin-block-start: 0; }
@media print { .entry-close { display: none; } }

/* --------------------------------------------------------------------------
   12j. Component — hero image slot
   A reserved space beside the mark, so the hero is not only a picture of
   itself. Empty it is a designed slot, not a broken frame — hard rule 4.

   To use it, replace the three placeholder lines inside the <figure> with a
   single <img>. Nothing else changes: :has(img) drops the fixed ratio, the
   padding and the dashed edge, so the image sets its own proportions and the
   frame closes around it.
   -------------------------------------------------------------------------- */

.hero__slot {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--s-2);
  margin: 0;
  padding: var(--s-4) var(--s-3);
  aspect-ratio: 4 / 3;
  text-align: center;
  background: #fff;
  border: 1px dashed var(--dash);
  border-radius: var(--radius);
  overflow: hidden;
}

/* Filled, it is a picture frame rather than a slot. The grid centring that
   places the empty state has to go: it leaves the row content-sized, so the
   picture's height: 100% has nothing definite to resolve against and it
   overflows the frame instead of filling it. */
.hero__slot:has(img) {
  display: block;
  aspect-ratio: 4 / 3;
  padding: 0;
  border: 1px solid var(--line);
}
.hero__slot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Beside the mark the picture takes the whole height the row offers. It is
   positioned out of flow so it fills that height exactly without ever being
   the thing that decides it — the mark sets the row, the picture answers it.
   object-fit: cover crops to the frame; swap it for contain if the image is
   ever a diagram rather than a photograph, where cropping would lose meaning. */
@media (min-width: 62rem) {
  .hero__slot:has(img) {
    position: relative;
    aspect-ratio: auto;
  }
  .hero__slot:has(img) img {
    position: absolute;
    inset: 0;
  }
}

.hero__slot-icon {
  font-size: 1.4rem;
  line-height: 1;
  color: var(--muted);
}

.hero__slot-note {
  max-width: 22ch;
  font-size: var(--step--2);
  line-height: 1.5;
  color: var(--muted);
}

.hero__slot-spec {
  font-family: var(--label);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--slate-500);
}

/* --------------------------------------------------------------------------
   12ja. Component — hero notes
   Highlights beside the mark: three of the toolkit's recurring refrains, each
   named with the module it belongs to.

   Every line is verbatim from the approved source and each was checked against
   the .docx it comes from. The flagship refrain is not among them — it is
   already spoken by the mark itself, and repeating it here would waste the
   one place on this page where these lines can do new work.

   Set in display roman rather than the italic the .refrain component uses, so
   the panel reads as its own thing beside the mark rather than a second copy
   of it. No numbering and no ordering: these are stances the toolkit holds,
   not steps anyone is partway through.
   -------------------------------------------------------------------------- */

.hero__notes { align-self: center; }

.hero__notes-list {
  margin: var(--s-3) 0 0;
  padding: 0;
  list-style: none;
}

.hero__notes-list li {
  padding-block: var(--s-3);
  border-block-start: 1px solid var(--line);
}
.hero__notes-list li:last-child { border-block-end: 1px solid var(--line); }

.hero__note-src {
  font-family: var(--label);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--muted);
}

.hero__note-line {
  margin-block-start: var(--s-1);
  font-family: var(--display);
  font-size: var(--step-1);
  line-height: 1.3;
  letter-spacing: -0.008em;
  color: var(--slate-900);
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   12k. Component — the emblem
   The toolkit's identity mark, its lineage, and the refrain.

   .emblem on its own is the static AMI mark: three rounded brackets turned
   about a common axis on an unbroken ring, each carrying a detached circle,
   around a single slate core. It is drawn in the parent brand's grammar —
   separate figures turned about a centre they surround rather than fill, each
   with a detached circle for a head. The PQMD mark does this with four
   figures; AMI does it with three.

   .emblem-figure is the whole composition: the stage in the middle and one
   clause of the refrain beside each of the three circles.

   .emblem-stage is the sequence. The PQMD mark collapses into the slate core,
   the three AMI figures grow out of it and settle onto the ring, each circle
   puts out its clause a second after the last, all three hold together, and
   then every part retracts the way it came. Nine seconds, repeating.

   Two things make the marks read as one object changing rather than two
   pictures swapping. The ring never leaves — it is the one element common to
   both states, so the eye tracks it through every handover. And the slate core
   is the pivot in both directions: each mark collapses into it and the other
   grows out of it.

   The parent mark is the official asset, used unaltered and never redrawn.

   Three brackets, never four. The core is one program, not a fourth area.
   Every bracket is identical in size, weight, radius and length; only hue and
   angle differ, so nothing here reads as a rank or a sequence.
   -------------------------------------------------------------------------- */

.emblem {
  display: block;
  width: 100%;
  max-width: 21rem;
  height: auto;
  margin-inline: auto;
  overflow: visible;
}

/* The line the three figures stand on, and the hinge the sequence turns on.
   Unbroken and hairline-faint: it gives the mark a ground without ever
   reading as something part-filled. */
.emblem__ring {
  fill: none;
  stroke: var(--dash);
  stroke-width: 1.5;
}

.emblem__g {
  transform-box: view-box;
  transform-origin: 160px 160px;
}
.emblem__g--a { transform: rotate(0deg); }
.emblem__g--b { transform: rotate(240deg); }
.emblem__g--c { transform: rotate(120deg); }

.emblem__bracket {
  fill: none;
  stroke-width: 12;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.emblem__dot { fill: none; stroke-width: 8; }

.emblem__g--a :is(.emblem__bracket, .emblem__dot) { stroke: var(--orange); }
.emblem__g--b :is(.emblem__bracket, .emblem__dot) { stroke: var(--lime); }
.emblem__g--c :is(.emblem__bracket, .emblem__dot) { stroke: var(--yellow); }

/* One program, at the centre of all three — and the seed both marks turn on. */
.emblem__core { fill: var(--slate); stroke: none; }

/* ---- the stage: PQMD resolving into the AMI mark, and back -------------- */

.emblem-stage {
  position: relative;
  width: 100%;
  max-width: var(--mark-size, 13rem);
  margin-inline: auto;
  aspect-ratio: 1;
}

.emblem-stage .emblem {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
}

/* The official PQMD mark, used as supplied and never redrawn. Sized to sit
   inside the ring, and centred with the translate property rather than
   transform, so the sequence can rotate and scale it without fighting. */
.emblem__parent {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  width: 52%;
  height: auto;
  translate: -50% -50%;
}

/* The still frame — what reduced motion and print get. A loop has no end
   state, so the still has to be chosen: it is the AMI mark, because this is
   the AMI toolkit and the masthead already carries PQMD. An .emblem outside a
   stage is unaffected and stays exactly as drawn. */
.emblem-stage .emblem__parent { opacity: 0; }

/* ---- the composition ----------------------------------------------------
   Stacked on a phone: the mark, then the three clauses in reading order, each
   led by its own circle. From 62rem the clauses move out to their circles —
   orange above, lime lower right, yellow lower left, matching where the three
   dots actually sit at -90, 30 and 150 degrees. The side pair is dropped below
   the centre line so each one lands level with the circle it belongs to. */
/* --mark-size is the only number here. The ring sits at 130 of a 320 viewBox,
   so the artwork leaves about a tenth of the box empty on every side; the
   clauses are pulled back over that padding (-0.06) so they sit close to the
   circles rather than to the box. The side pair drops by 0.203 of the mark,
   which is where a circle at 30 degrees actually is. Change the size and the
   whole composition follows. */
.emblem-figure {
  --mark-size: 13rem;
  display: grid;
  gap: var(--s-3);
  justify-items: center;
}
@media (min-width: 62rem) {
  .emblem-figure {
    align-self: center;
    --mark-size: 16rem;
    grid-template-columns: minmax(0, 1fr) var(--mark-size) minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    /* Stretched, not centred: the clause boxes have to reach their column's
       inner edge or text-align cannot pull them towards the circles. */
    justify-items: stretch;
    column-gap: var(--s-2);
    row-gap: var(--s-1);
  }
  .emblem-say { max-width: none; }
  .emblem-stage  { grid-area: 2 / 2 / 3 / 3; }
  .emblem-say--a {
    grid-area: 1 / 2 / 2 / 3;
    text-align: center;
    margin-block-end: calc(var(--mark-size) * -0.06);
  }
  .emblem-say--b {
    grid-area: 2 / 1 / 3 / 2;
    text-align: end;
    translate: 0 calc(var(--mark-size) * 0.203);
    margin-inline-end: calc(var(--mark-size) * -0.06);
  }
  .emblem-say--c {
    grid-area: 2 / 3 / 3 / 4;
    text-align: start;
    translate: 0 calc(var(--mark-size) * 0.203);
    margin-inline-start: calc(var(--mark-size) * -0.06);
  }
}

/* ---- the refrain --------------------------------------------------------
   The three clauses of the flagship refrain, verbatim and in order — three
   complete sentences in the source, so putting one beside each circle is a
   change of arrangement, not of language.

   Each clause carries its circle's hue, in the -ink variant. The raw accents
   measure 2.65:1, 1.51:1 and 1.37:1 as text on this ground and are unusable
   for it; the inks are the same hues at 4.9:1, 4.5:1 and 4.6:1. Hue matches
   the circle, contrast clears AA. See the token block, section 1.

   aria-hidden, because a looping reveal is hostile to a screen reader and the
   same three sentences sit in full, in reading order, in the .refrain
   component further down this page. Hidden entirely without motion — a still
   frame of a reveal is a fragment, and the refrain is already below. */
.emblem-say {
  display: none;
  max-width: 22rem;
  font-family: var(--display);
  font-size: var(--step-0);
  font-style: italic;
  line-height: 1.3;
  letter-spacing: -0.008em;
  text-wrap: pretty;
}
.emblem-say--a { color: var(--orange-ink); }
.emblem-say--b { color: var(--lime-ink); }
.emblem-say--c { color: var(--yellow-ink); }

/* Stacked, the clause is away from the mark, so it carries its own circle.
   Beside the mark it does not need one — the real circle is right there. */
.emblem-say::before {
  content: "";
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  margin-inline-end: 0.5em;
  border: 2px solid currentColor;
  border-radius: 50%;
  vertical-align: 0.04em;
}
@media (min-width: 62rem) {
  .emblem-say::before { display: none; }
}

/* ---- motion --------------------------------------------------------------
   A nine-second cycle, repeating: the PQMD mark holds, collapses into the
   core, the three figures unwind out onto the ring, each circle puts out its
   clause about a second after the last, the three hold together, and then
   every clause leaves with the figure it belongs to. The ring stays through
   all of it and breathes once at each handover. Nothing fills, counts or
   completes.

   Each clause enters from its own circle — the top one rising, the side pair
   moving outward — so the text reads as coming out of the mark rather than up
   from the page.

   The figure itself fades in once and never loops, so the arrival is a single
   event and only what is inside it repeats.

   Under prefers-reduced-motion none of this applies: the still frame renders
   immediately and the refrain stays hidden, with nothing to undo. */
@media (prefers-reduced-motion: no-preference) {
  .emblem-figure { animation: emblem-in 520ms var(--ease-out) both; }
  .emblem-say    { display: block; }

  .emblem-stage .emblem__ring   { animation: emblem-ring   9000ms var(--ease-out) 300ms infinite both; }
  .emblem-stage .emblem__parent { animation: emblem-parent 9000ms var(--ease-out) 300ms infinite both; }
  .emblem-stage .emblem__g--a   { animation: emblem-a      9000ms var(--ease-out) 300ms infinite both; }
  .emblem-stage .emblem__g--b   { animation: emblem-b      9000ms var(--ease-out) 300ms infinite both; }
  .emblem-stage .emblem__g--c   { animation: emblem-c      9000ms var(--ease-out) 300ms infinite both; }
  .emblem-stage .emblem__core   { animation: emblem-core   9000ms var(--ease-out) 300ms infinite both; }

  .emblem-say--a { animation: emblem-say-a 9000ms var(--ease-out) 300ms infinite both; }
  .emblem-say--b { animation: emblem-say-b 9000ms var(--ease-out) 300ms infinite both; }
  .emblem-say--c { animation: emblem-say-c 9000ms var(--ease-out) 300ms infinite both; }
}

@keyframes emblem-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* The toolkit runs on one easing curve. The single exception is a mark
   leaving: an ease-out exit departs instantly and then crawls, so the
   keyframe that opens each departing segment hands it an ease-in instead.
   Every set below ends where it began, so the loop has no seam. */
@keyframes emblem-ring {
  0%, 10%   { transform-box: view-box; transform-origin: 160px 160px; transform: scale(1); }
  18%       { transform-box: view-box; transform-origin: 160px 160px; transform: scale(1.045); }
  26%, 72%  { transform-box: view-box; transform-origin: 160px 160px; transform: scale(1); }
  80%       { transform-box: view-box; transform-origin: 160px 160px; transform: scale(1.045); }
  88%, 100% { transform-box: view-box; transform-origin: 160px 160px; transform: scale(1); }
}

/* The parent mark opens the cycle, collapses into the core, and returns. */
@keyframes emblem-parent {
  0%, 8%    { opacity: 1; transform: rotate(0deg) scale(1); animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0.2); }
  17%, 78%  { opacity: 0; transform: rotate(-20deg) scale(0.5); }
  88%, 100% { opacity: 1; transform: rotate(0deg) scale(1); }
}

/* The three figures unwind out of the core onto the ring, staggered, hold
   through the refrain, then retract the way they came so the loop closes. */
@keyframes emblem-a {
  0%, 13%   { opacity: 0; transform: rotate(-40deg) scale(0.55); }
  21%, 71%  { opacity: 1; transform: rotate(0deg) scale(1); animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0.2); }
  82%, 100% { opacity: 0; transform: rotate(-40deg) scale(0.55); }
}
@keyframes emblem-b {
  0%, 15%   { opacity: 0; transform: rotate(200deg) scale(0.55); }
  23%, 73%  { opacity: 1; transform: rotate(240deg) scale(1); animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0.2); }
  84%, 100% { opacity: 0; transform: rotate(200deg) scale(0.55); }
}
@keyframes emblem-c {
  0%, 17%   { opacity: 0; transform: rotate(80deg) scale(0.55); }
  25%, 75%  { opacity: 1; transform: rotate(120deg) scale(1); animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0.2); }
  86%, 100% { opacity: 0; transform: rotate(80deg) scale(0.55); }
}

/* The core is the pivot: it appears as the parent mark lands on it and leaves
   as the parent mark grows back out of it. */
@keyframes emblem-core {
  0%, 17%   { opacity: 0; transform-box: view-box; transform-origin: 160px 160px; transform: scale(0.3); }
  23%, 70%  { opacity: 1; transform-box: view-box; transform-origin: 160px 160px; transform: scale(1); animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0.2); }
  77%, 100% { opacity: 0; transform-box: view-box; transform-origin: 160px 160px; transform: scale(0.3); }
}

/* Each clause comes out of its own circle, a second after the one before, and
   every one of them stays until its figure starts to retract. */
@keyframes emblem-say-a {
  0%, 20%   { opacity: 0; transform: translateY(14px); }
  24%, 71%  { opacity: 1; transform: translateY(0); }
  78%, 100% { opacity: 0; transform: translateY(14px); }
}
@keyframes emblem-say-b {
  0%, 31%   { opacity: 0; transform: translateX(18px); }
  35%, 73%  { opacity: 1; transform: translateX(0); }
  80%, 100% { opacity: 0; transform: translateX(18px); }
}
@keyframes emblem-say-c {
  0%, 42%   { opacity: 0; transform: translateX(-18px); }
  46%, 75%  { opacity: 1; transform: translateX(0); }
  82%, 100% { opacity: 0; transform: translateX(-18px); }
}

/* --------------------------------------------------------------------------
   12l. Component — the shift
   The toolkit's whole argument in one spread: what organizations already
   record, and what AMI adds on top of it. The two registers are the design —
   a mono manifest on the left, display prose on the right — so the contrast
   is legible before a word is read. Every sentence is approved language.
   -------------------------------------------------------------------------- */

.shift {
  display: grid;
  gap: var(--s-4);
  margin-block-start: var(--s-5);
  padding-block: var(--s-5);
  border-block: 1px solid var(--line);
}
@media (min-width: 52rem) {
  .shift {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: var(--s-5);
    align-items: start;
  }
}

/* Both sides open with a real heading, a step larger than "Those outputs
   matter." - PQMD, 9 Oct: a header should never be smaller than what it leads. */
.shift__label {
  margin-block-end: var(--s-3);
  font-family: var(--display);
  font-size: var(--step-3);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.014em;
  color: var(--slate-900);
}
.shift__label--add { color: var(--orange-ink); }

.shift__intro {
  max-width: 44ch;
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--muted);
}

/* The manifest. Set like a record because that is what it is — the things a
   programme already counts. Tabular figures, hairline ticks, no bullets. */
.shift__record {
  margin-block: var(--s-3);
  border-block-start: 1px solid var(--line-soft);
}
.shift__record li {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr);
  gap: var(--s-2);
  padding-block: 0.55rem;
  border-block-end: 1px solid var(--line-soft);
  font-family: var(--label);
  font-size: var(--step--1);
  line-height: 1.4;
  color: var(--slate-700);
}
.shift__record li::before {
  content: "";
  align-self: center;
  width: 10px;
  height: 1px;
  background: var(--slate-400);
}

.shift__close {
  font-family: var(--display);
  font-size: var(--step-2);
  line-height: 1.3;
  color: var(--slate-900);
}

/* The turn. A hairline the full height of the spread with one accent mark on
   it — the only decorative element in the block, and it points. */
.shift__turn {
  display: none;
  place-items: center;
  align-self: stretch;
  width: 1px;
  background: var(--line);
}
@media (min-width: 52rem) { .shift__turn { display: grid; } }
.shift__turn i {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--bg);
  color: var(--orange-ink);
  font-size: 0.8rem;
}
/* Below the breakpoint the turn lies down and sits between the stacked halves. */
.shift__turn--stack {
  display: grid;
  width: auto;
  height: 1px;
  background: var(--line);
}
@media (min-width: 52rem) { .shift__turn--stack { display: none; } }

.shift__body {
  max-width: 46ch;
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
}

.shift__emphasis {
  margin-block-start: var(--s-3);
  padding-inline-start: var(--s-3);
  border-inline-start: 2px solid var(--orange);
  font-family: var(--display);
  font-size: var(--step-2);
  line-height: 1.32;
  color: var(--slate-900);
  max-width: 34ch;
}


/* --------------------------------------------------------------------------
   12m. Component — the measures
   Answers the question the impact band asks. The band poses three questions;
   this says what is actually measured against each one.

   Deliberately a reference sheet, not another card grid: the page already has
   two of those, and an M&E reader trusts a spec more than a card. The area
   accent appears only as the rule on the leading edge — the area name is text,
   so colour is never the only signal.
   -------------------------------------------------------------------------- */

.measures { margin-block-start: var(--s-5); }

.measures__intro {
  max-width: var(--measure);
  margin-block-end: var(--s-4);
  color: var(--muted);
}

.measures__sheet { border-block-start: 1px solid var(--line); }

.measures__row {
  --area: var(--orange);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-2);
  padding-block: var(--s-4);
  padding-inline-start: var(--s-3);
  border-block-end: 1px solid var(--line-soft);
  border-inline-start: 3px solid var(--area);
}
@media (min-width: 52rem) {
  .measures__row {
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: var(--s-4);
    align-items: start;
    padding-inline-start: var(--s-4);
  }
}
.measures__row--availability { --area: var(--area-availability); }
.measures__row--continuity   { --area: var(--area-continuity); }
.measures__row--capacity     { --area: var(--area-capacity); }

.measures__area {
  font-family: var(--label);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--slate);
}

/* The indicator name is the payload, so it gets the display face. These are
   long technical strings — they are allowed to wrap and must never truncate. */
.measures__indicator {
  font-family: var(--display);
  font-size: var(--step-2);
  font-weight: 400;
  line-height: 1.28;
  letter-spacing: -0.006em;
  color: var(--slate-900);
  text-wrap: pretty;
}

.measures__unit {
  display: grid;
  /* auto, so the label column fits whatever the approved cards call the
     field — it is "Unit of measure" in the September cards. */
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-2);
  margin-block-start: var(--s-3);
  padding-block-start: var(--s-2);
  border-block-start: 1px solid var(--line-soft);
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--muted);
}
.measures__unit dt {
  font-family: var(--label);
  font-size: var(--step--2);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
.measures__unit dd { margin: 0; }

/* Opens the row's metric card in the popup. A real button-sized target in
   the row's own accent, set after the unit so it reads as the way further in. */
.measures__row--availability { --area-ink: var(--orange-ink); }
.measures__row--continuity   { --area-ink: var(--lime-ink); }
.measures__row--capacity     { --area-ink: var(--yellow-ink); }

.measures__open {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 2.75rem;
  margin-block-start: var(--s-3);
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--slate-900);
  font-size: var(--step--1);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.measures__open i {
  color: var(--area-ink, var(--orange-ink));
  font-size: 0.8rem;
  transition: transform var(--dur-2) var(--ease-out);
}
.measures__open:hover {
  border-color: var(--area);
  box-shadow: inset 3px 0 0 var(--area);
}
.measures__open:hover i { transform: scale(1.15); }
.measures__open:focus-visible { outline: 2px solid var(--orange-ink); outline-offset: 2px; }
.measures__open[aria-busy="true"] { cursor: progress; }
@media (prefers-reduced-motion: reduce) {
  .measures__open i { transition: none; }
  .measures__open:hover i { transform: none; }
}

.measures__note {
  max-width: var(--measure);
  margin-block-start: var(--s-4);
  font-size: var(--step--1);
  line-height: 1.6;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   13. Component — next
   -------------------------------------------------------------------------- */

.next {
  margin-block-start: var(--s-5);
  padding: var(--s-4) 0 var(--s-6);
  border-block-start: 3px solid var(--orange);
}
.next__eyebrow { margin-block-end: var(--s-2); }
.next__title {
  font-family: var(--display);
  font-size: var(--step-3);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.014em;
  color: var(--slate-900);
  max-width: 22ch;
  text-wrap: balance;
}
.next__q {
  margin-block-start: var(--s-3);
  max-width: 42ch;
  font-family: var(--display);
  font-size: var(--step-2);
  font-style: italic;
  line-height: 1.32;
  color: var(--slate-700);
}
.next__q + p { margin-block-start: var(--s-3); }
.next__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  margin-block-start: var(--s-4);
  font-family: var(--label);
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--slate);
}
.next__link:hover { text-decoration: underline; }
.next__link span[aria-hidden] { color: var(--orange-ink); }

/* The next module exists in the content but not yet as a page. The approved
   "Next:" line still shows — a reader should know what comes next — but the
   control is honestly inert rather than a link to nothing. Same treatment the
   rail gives an unbuilt module. */
.next__link.is-unbuilt {
  color: var(--muted);
  cursor: default;
}
.next__link.is-unbuilt:hover { text-decoration: none; }
.next__link.is-unbuilt span[aria-hidden] { color: var(--slate-400); }

/* --------------------------------------------------------------------------
   14. Component — module footer
   -------------------------------------------------------------------------- */

.colophon {
  border-block-start: 1px solid var(--line);
  background: var(--bg);
}
.colophon__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-2);
  padding-block: var(--s-4);
  font-family: var(--label);
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.colophon__sep { color: var(--dash); }
/* Pages about the toolkit itself (Acknowledgements, 15 Oct; PQMD's slide
   comment pairs it with About and Contact, still to come). Set at the far end
   of the line, after the page's own name. */
.colophon__link {
  order: 1;
  margin-inline-start: auto;
  color: var(--slate-700);
  text-decoration: none;
  border-block-end: 1px solid var(--dash);
}
/* About the Toolkit joined it on 20 Oct: the pair sits together at the end. */
.colophon__link + .colophon__link { margin-inline-start: 0; }
.colophon__link:hover,
.colophon__link:focus-visible { color: var(--orange-ink); border-block-end-color: var(--orange); }
.colophon__link[aria-current="page"] { border-block-end-color: transparent; color: var(--muted); }


/* --------------------------------------------------------------------------
   14b. Small touches
   -------------------------------------------------------------------------- */

::selection {
  background: color-mix(in srgb, var(--yellow) 55%, transparent);
  color: var(--slate-900);
}
.band ::selection {
  background: color-mix(in srgb, var(--orange) 55%, transparent);
  color: #fff;
}

/* Anchored headings land below the sticky position bar, not under it. */
[id] { scroll-margin-block-start: calc(2.75rem + var(--s-3)); }

/* Font Awesome glyphs are decorative here — the text beside them always says
   the same thing, so they are hidden from assistive tech at the markup level. */
.fa-solid, .fa-regular { line-height: 1; }

/* The mark from the PQMD logo, used as a quiet closing device. */
.endmark {
  display: block;
  width: 26px;
  height: 26px;
  margin-block: 0 var(--s-5);
  opacity: 0.45;
}

/* --------------------------------------------------------------------------
   14b. The annex of metrics
   Three parts: the outcome metrics by impact area, the outputs everyone
   already collects, and health and quality outcomes kept apart. The outputs
   are one list and not grouped by area — measures like "number of countries"
   serve all three, so the area is a tag, never a heading.
   -------------------------------------------------------------------------- */

/* Each area keeps its accent as an edge, the same grammar as a reftable row:
   colour labels the area and never ranks it. */
.area-block { border-inline-start: 3px solid var(--line); padding-inline-start: var(--s-3); }
.area-block--availability { border-inline-start-color: var(--area-availability); }
.area-block--continuity   { border-inline-start-color: var(--area-continuity); }
.area-block--capacity     { border-inline-start-color: var(--area-capacity); }

/* The priority outcome sits on the identity surface the metric cards use, so
   the two read as the same object. It opens that card. */
.priority {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-3);
  border-radius: var(--radius);
  background: var(--spec-bg);
  color: #fff;
  text-decoration: none;
  border-inline-start: 3px solid var(--slate-400);
  transition: transform var(--dur-2, 180ms) var(--ease-out);
}
.priority--availability { border-inline-start-color: var(--area-availability); }
.priority--continuity   { border-inline-start-color: var(--area-continuity); }
.priority--capacity     { border-inline-start-color: var(--area-capacity); }
.priority__level { color: var(--spec-muted); }
.priority__measure { font-family: var(--display); font-size: 1.15rem; line-height: 1.35; }
.priority__go {
  font-family: var(--label);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  color: var(--spec-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
/* The global a:hover turns links slate-900 — which is exactly this panel's own
   background, so the text would vanish into it. Hold the light colours. */
.priority:hover,
.priority:focus-visible { color: #fff; transform: translateY(-1px); }
.priority:hover .priority__level { color: var(--spec-ink); }
.priority:hover .priority__go { color: #fff; }

.annex-note { color: var(--muted); font-size: 0.9rem; }

/* Outcome metrics PQMD has catalogued but not yet given a card. Listed with the
   ID from their spreadsheet so the two can be read side by side. */
.annex .metric-list { display: grid; gap: var(--s-2); }
.metric-list__item { display: flex; align-items: baseline; gap: var(--s-2); }
.tag--id {
  font-variant-numeric: tabular-nums;
  color: var(--slate-700);
  background: #fff;
  flex: none;
  min-width: 3.1em;
  text-align: center;
}

/* The outputs. Open by default and readable with no script at all, because
   that is the way round Juliemarie asked for. */
.outputs { display: grid; gap: 2px; }
.output { border: 1px solid var(--line-soft); border-radius: var(--radius); background: #fff; }
.output + .output { margin-block-start: 0; }
.output__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-1) var(--s-2);
  padding: var(--s-2) var(--s-3);
  cursor: pointer;
  list-style: none;
}
.output__head::-webkit-details-marker { display: none; }
.output__head:hover { background: var(--bg); }
.output__head:focus-visible { outline: 2px solid var(--slate-700); outline-offset: -2px; }
.output__name { flex: 1 1 22rem; font-weight: 500; }
.output__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.output__body {
  padding: 0 var(--s-3) var(--s-2);
  border-block-start: 1px solid var(--line-soft);
  padding-block-start: var(--s-2);
}
.output__area { font-size: 0.85rem; color: var(--muted); display: flex; align-items: center; gap: 0.5em; }
.output__dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.output__dot--availability { background: var(--area-availability); }
.output__dot--continuity   { background: var(--area-continuity); }
.output__dot--capacity     { background: var(--area-capacity); }

.tag {
  font-family: var(--label);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.18em 0.5em;
  border-radius: 2px;
  background: var(--bg);
  color: var(--muted);
  border: 1px solid var(--line);
  white-space: nowrap;
}
/* The -ink variants: the raw accents are 1.4–2.7:1 as type on a light ground. */
.tag--new { color: var(--orange-ink); border-color: var(--orange); background: #fff6ef; }
.tag--consolidated { color: var(--lime-ink); border-color: var(--lime); background: #f7faea; }

/* ---- the AMI Metrics Catalogue (annex.html, rebuilt 16 Oct) ----
   Her spreadsheet as one table to scan: her column headings, her order, one
   row per metric, each description folded under its metric's name ("a very long
   list instead of being able to just... scan it"). A search and two filters on
   screen, a workbook to sort and print. Written open, so with no script, and on
   paper, everything shows; js/ami.js folds it to names on screen. */
.cat { container-type: inline-size; }
.cat-tools { display: grid; gap: var(--s-3); margin-block-end: var(--s-3); }
.cat-download {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  justify-self: start;
  min-height: 2.75rem;
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--lime);
  border-radius: calc(var(--radius) * 2);
  background: #fff;
  color: var(--ink);
  text-decoration: none;
  transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.cat-download i { font-size: 1.15rem; color: var(--lime-ink); }
.cat-download__text { display: grid; gap: 0.1rem; }
.cat-download__name { font-weight: 600; }
.cat-download__meta { font-size: var(--step--1); color: var(--muted); }
.cat-download:hover { color: var(--ink); border-color: var(--slate-400); border-inline-start-color: var(--lime); box-shadow: 0 10px 22px -18px rgba(22, 38, 47, 0.5); }
.cat-download:focus-visible { outline: 2px solid var(--slate); outline-offset: 2px; }

.cat-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--s-2) var(--s-3);
  padding: var(--s-3);
  border-radius: calc(var(--radius) * 3);
  background: var(--bg);
}
.cat-filters[hidden] { display: none; }
.cat-search { display: grid; gap: 0.35rem; flex: 1 1 15rem; }
.cat-search .eyebrow { color: var(--slate-700); }
.cat-search__input {
  min-height: 2.75rem;
  padding: 0 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  font: 400 var(--step-0)/1.2 var(--body);
}
.cat-search__input:focus-visible { outline: 2px solid var(--slate); outline-offset: 1px; border-color: var(--slate); }
.cat-group { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.cat-chip {
  min-height: 2.75rem;
  padding: 0 0.95rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--slate-700);
  font: 600 var(--step--1)/1.2 var(--body);
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease);
}
.cat-chip:hover { border-color: var(--slate-400); color: var(--ink); }
.cat-chip[aria-pressed="true"] { border-color: var(--panel); background: var(--panel); color: #fff; }
.cat-chip:focus-visible { outline: 2px solid var(--slate); outline-offset: 2px; }
.cat-count { flex-basis: 100%; margin: 0; font-size: var(--step--1); color: var(--muted); }
.cat-empty { margin: 0; padding: var(--s-3); border: 1px dashed var(--slate-400); border-radius: calc(var(--radius) * 2); color: var(--muted); }

.cat__table { width: 100%; border-collapse: separate; border-spacing: 0; }
.cat__table thead th {
  padding: 0.75rem 0.9rem;
  background: var(--panel);
  color: #fff;
  font: 600 var(--step--2)/1.2 var(--label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: start;
  vertical-align: bottom;
}
.cat__table thead th:first-child { border-start-start-radius: calc(var(--radius) * 2); }
.cat__table thead th:last-child  { border-start-end-radius: calc(var(--radius) * 2); }
.cat__table td { padding: 0.8rem 0.9rem; border-block-end: 1px solid var(--line); vertical-align: top; }
.cat__row { --area: var(--slate-400); }
.cat__row[data-area="availability"] { --area: var(--area-availability); }
.cat__row[data-area="continuity"]   { --area: var(--area-continuity); }
.cat__row[data-area="capacity"]     { --area: var(--area-capacity); }
.cat__row[hidden] { display: none; }
.cat__id { width: 5rem; }
.cat__id .tag--id { font-size: var(--step--2); }
.cat__kind { width: 8rem; color: var(--slate-700); }
.cat__area { width: 13rem; color: var(--slate-700); }
.cat__dot { display: inline-block; width: 0.6rem; height: 0.6rem; margin-inline-end: 0.5rem; border-radius: 2px; background: var(--area); vertical-align: 0.05em; }
/* Her sheet marks the three priority metrics in bold; here they also carry the
   area's colour down their edge and the way into their card. */
.cat__row--priority td { background: #fbfcfd; }
.cat__row--priority .cat__id { box-shadow: inset 4px 0 0 var(--area); }
.cat__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.6rem;
  cursor: pointer;
  list-style: none;
}
.cat__summary::-webkit-details-marker { display: none; }
.cat__summary::before {
  content: "";
  flex: none;
  width: 0.45rem;
  height: 0.45rem;
  margin-inline-end: 0.15rem;
  border-inline-end: 2px solid var(--slate-500);
  border-block-end: 2px solid var(--slate-500);
  transform: translateY(-0.12em) rotate(-45deg);
  transition: transform var(--dur-1) var(--ease);
}
.cat__details[open] > .cat__summary::before { transform: translateY(-0.2em) rotate(45deg); }
.cat__summary:focus-visible { outline: 2px solid var(--slate); outline-offset: 3px; border-radius: 2px; }
.cat__name { flex: 1 1 18rem; font-weight: 500; line-height: 1.4; color: var(--ink); }
.cat__row--priority .cat__name { font-weight: 700; }
.cat__summary:hover .cat__name { text-decoration: underline; text-decoration-color: var(--slate-400); text-underline-offset: 3px; }
.cat__badge {
  flex: none;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: var(--panel);
  color: #fff;
  font: 600 var(--step--2)/1.2 var(--label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cat__more { display: grid; gap: 0.2rem; max-width: 110ch; margin-block-start: 0.6rem; padding-inline-start: 1.05rem; }
.cat__label { margin: 0.45rem 0 0; color: var(--muted); }
.cat__text { margin: 0; line-height: 1.55; color: var(--slate-700); }
.cat__text--soon { font-style: italic; color: var(--muted); }
.cat__card {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  margin-block-start: 0.6rem;
  padding: 0 1rem;
  border-radius: 999px;
  background: var(--panel);
  color: #fff;
  font: 600 var(--step--1)/1.2 var(--body);
  text-decoration: none;
}
.cat__card:hover, .cat__card:focus-visible { background: var(--panel-deep); color: #fff; }
.cat__card:focus-visible { outline: 2px solid var(--slate); outline-offset: 2px; }

/* Health and quality: apart, under its rule, on a dashed edge - never a fourth area. */
.cat--hq { padding: var(--s-2); border: 2px dashed var(--slate-400); border-radius: calc(var(--radius) * 3); }
.cat--hq .cat__table thead th { background: var(--bg); color: var(--slate-700); }

/* A narrow container (a phone, the panel beside a page): each metric becomes a
   card - its ID, kind and area on one line, the metric beneath. */
@container (max-width: 44rem) {
  .cat__table thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .cat__table, .cat__table tbody { display: block; }
  .cat__table tr { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.9rem; padding: 0.85rem 0.25rem; border-block-end: 1px solid var(--line); }
  .cat__table tr[hidden] { display: none; }
  .cat__table td { display: block; width: auto; padding: 0; border: 0; }
  .cat__row--priority .cat__id { box-shadow: none; }
  .cat__row--priority { box-shadow: inset 4px 0 0 var(--area); padding-inline-start: 0.75rem; }
  .cat__id { order: 1; } .cat__kind { order: 2; font-size: var(--step--1); } .cat__area { order: 3; font-size: var(--step--1); }
  .cat__metric { order: 4; flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .cat__summary::before, .cat-chip, .cat-download { transition: none; }
}
@media print {
  .cat-tools, .cat-filters, .cat-empty, .cat__card { display: none !important; }
  .cat__row { break-inside: avoid; }
  .cat__summary::before { display: none; }
  .cat__more { padding-inline-start: 0; }
  html:not([data-print="fidelity"]) .cat__table thead th { background: none; color: #000; border-block-end: 1pt solid #000; }
}

/* A prototype control, dressed so nobody mistakes it for part of the toolkit. */
.proto {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: var(--s-2) var(--s-3);
  display: grid;
  gap: var(--s-1);
  background: var(--bg);
}
.proto__label { color: var(--orange-ink); }
.proto__choices { display: flex; gap: 0.5rem; }
.proto__btn {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.35em 0.9em;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}
.proto__btn.is-on { background: var(--panel); color: #fff; border-color: var(--panel); }
.proto__note { font-size: 0.8rem; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .priority { transition: none; }
  .priority:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   14c. Where to go next, under a metric card
   The locked card standard requires each card to link on to the supporting
   measures, the glossary and the sample communication products. Two of those
   do not exist yet, so they are reserved rather than dead.
   -------------------------------------------------------------------------- */

.card-resources { margin-block-start: var(--s-4); }
.card-resources__title { color: var(--muted); margin-block-end: var(--s-2); }
.card-resources__list { list-style: none; padding: 0; display: grid; gap: 2px; }
.card-resources__link {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 0.2rem var(--s-2);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: #fff;
  text-decoration: none;
  color: var(--ink);
}
a.card-resources__link:hover { border-color: var(--slate-400); background: var(--bg); }
.card-resources__name { font-weight: 500; }
.card-resources__note { grid-column: 1 / -1; font-size: 0.85rem; color: var(--muted); }
.card-resources__link .fa-arrow-right { color: var(--slate-400); font-size: 0.8rem; }
.card-resources__link--pending { border-style: dashed; background: var(--bg); }
.card-resources__link--pending .card-resources__name { color: var(--muted); }
.card-resources__soon {
  font-family: var(--label);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange-ink);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   14b. Component — theory of change  (theory-of-change.html, 15 Oct)
   PQMD's own drawing, "How product donations contribute to care", rebuilt in
   code by _build/build_toc.py from her SVG: inputs on the slate band, five
   activities each paired with its outputs, the shared pathways into the three
   areas, each area's outcome, the impact line and the assumptions. Words and
   pathways are hers; the layout answers its container, so the same page works
   on the sheet, beside another page in the resource viewer, and on a phone:
   five columns and the drawn pathways from 48rem of room, cards and, under each
   area, the activities that feed it in words below that. The area colours are
   the toolkit's (her drawing uses a teal-green for Continuity; open question).
   -------------------------------------------------------------------------- */
.toc { container-type: inline-size; }
.toc__label { margin: 0 0 var(--s-2); color: var(--muted); }
.toc__label--section { margin-block: var(--s-5) var(--s-3); }

.toc__band {
  border-radius: calc(var(--radius) * 3);
  padding: var(--s-3) var(--s-4);
  background-color: var(--panel);
  background-image: radial-gradient(120% 160% at 0% 0%, var(--panel) 0%, var(--panel-lo) 64%);
  color: var(--spec-ink);
}
.toc__band .toc__label { color: var(--spec-muted); }
.toc__input-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-2);
  font-family: var(--brand);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #fff;
}
@container (min-width: 44rem) {
  .toc__input-list { grid-template-columns: repeat(3, minmax(0, 1fr)); text-align: center; }
}
/* Each input with its icon (16 Oct): white on a translucent disc - beside the
   words when the inputs stack, above them in three columns, where beside them
   it would push her two-line names onto three. */
.toc__input { display: flex; align-items: center; gap: 0.75rem; line-height: 1.2; text-wrap: balance; }
@container (min-width: 44rem) {
  .toc__input { flex-direction: column; justify-content: flex-start; gap: var(--s-2); }
}
.toc__input-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 1rem;
}

/* B's pathways draw in with this (css below, .tocl__fan). */
@keyframes toc-draw { to { stroke-dashoffset: 0; } }

/* The pathways, in each area's colour. */
.toc__path--availability { color: var(--area-availability); }
.toc__path--continuity   { color: var(--area-continuity); }
.toc__path--capacity     { color: var(--area-capacity); }
/* Dotted lines in the area's colour (16 Oct, in place of arrowheads): round
   dots 12 units apart, and a ringed dot where a line meets its area. */
.toc__line { fill: none; stroke: currentColor; stroke-width: 5.5; stroke-linecap: round; stroke-dasharray: 0 12; }
.toc__land { fill: currentColor; stroke: #fff; stroke-width: 3; }
.toc--stage .toc__land { stroke: var(--panel); }
/* The masks' strokes: whole, so the dots show, unless the motion draws them in. */
.toc__reveal { fill: none; stroke: #fff; stroke-width: 16; stroke-linecap: round; }

.toc__areas { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
@container (min-width: 48rem) {
  .toc__areas { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2%; }
}
.toc__area {
  --area: var(--slate);
  --tint: var(--bg);
  position: relative;
  padding: var(--s-4) var(--s-3) var(--s-3);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 3);
  background: #fff;
}
.toc__area::before {
  content: "";
  position: absolute;
  inset-inline-start: var(--s-3);
  inset-block-start: var(--s-3);
  width: 30px;
  height: 4px;
  border-radius: 2px;
  background: var(--area);
}
.toc__area--availability { --area: var(--area-availability); --tint: #fff1e7; }
.toc__area--continuity   { --area: var(--area-continuity);   --tint: #f4f8e1; }
.toc__area--capacity     { --area: var(--area-capacity);     --tint: #fff8d6; }
.toc__area-name {
  margin: var(--s-2) 0 var(--s-3);
  font-family: var(--brand);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink);
  text-wrap: balance;
}
.toc__outcome {
  margin: 0;
  padding: var(--s-3);
  border-radius: calc(var(--radius) * 2);
  background: var(--tint);
  font-family: var(--brand);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}
/* The pathways in words: always there for a screen reader; shown where the
   drawing is not. */
.toc__fed { margin: var(--s-3) 0 0; display: flex; flex-wrap: wrap; gap: 0.35rem; font-size: var(--step--2); }
.toc__fed-label {
  flex-basis: 100%;
  font-family: var(--label);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
.toc__fed-item { padding: 0.2rem 0.55rem; border: 1px solid var(--line); border-radius: 999px; color: var(--slate-700); }
@container (min-width: 48rem) {
  .toc__fed { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

.toc__impact { margin-block-start: var(--s-4); text-align: center; }
.toc__impact-text {
  margin: 0;
  font-family: var(--brand);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  text-wrap: balance;
}
.toc__assumptions {
  margin-block-start: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: calc(var(--radius) * 3);
  background: var(--bg);
}
.toc__assume-main { margin: 0 0 0.3rem; font-weight: 600; color: var(--ink); }
.toc__assume-more { margin: 0; color: var(--muted); }


/* Her drawing, first on the page (16 Oct: "people to be able to just have it
   the way that I had it"). Inline SVG on a white frame; small on the sheet, so
   js/ami.js gives it a full-size view (.art-viewer) and the frame opens it.
   Her own font stack, with the bundled Cabin where Gill Sans is missing. */
.toc-art { margin: var(--s-4) 0 0; }
.toc-art__frame {
  padding: clamp(var(--s-2), 2vw, var(--s-3));
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 3);
  background: #fff;
  box-shadow: 0 1px 2px rgba(22, 38, 47, 0.05), 0 14px 30px -24px rgba(22, 38, 47, 0.45);
}
.js .toc-art__frame { cursor: zoom-in; }
.toc-art__svg { display: block; width: 100%; height: auto; }
.toc-art__svg g { font-family: "Gill Sans", "Gill Sans MT", "Gill Sans Nova", "Cabin", "Lato", Arial, sans-serif; }
.toc-art__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-block-start: var(--s-2);
}
.toc-art__action {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.75rem;
  padding: 0 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--slate-700);
  font: 600 var(--step--1)/1.2 var(--body);
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.toc-art__action:hover { border-color: var(--slate-400); color: var(--ink); }
.toc-art__action:focus-visible { outline: 2px solid var(--slate); outline-offset: 2px; }
.toc-art__action--open { border-color: var(--panel); background: var(--panel); color: #fff; }
.toc-art__action--open:hover { border-color: var(--panel-deep); background: var(--panel-deep); color: #fff; }
.toc-art__action i { font-size: 0.85rem; }
/* Opened over the page from another, the drawing takes the room it is given. */
html.is-in-resource-viewer main#theory-of-change { max-width: 92rem; }
.toc-art__meta { font-weight: 400; color: var(--muted); }

/* The text version on Module 3's slate stage (16 Oct: the impact grid "pops...
   maybe the theory of change just needs this kind of treatment"): white cards
   on slate, the AMI mark as a watermark, translucent bands. */
.toc--stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin-block-start: var(--s-5);
  padding: clamp(var(--s-3), 4vw, var(--s-4));
  border-radius: calc(var(--radius) * 3);
  background:
    radial-gradient(110% 70% at 100% 0%, rgba(255, 255, 255, 0.06), transparent 62%),
    var(--spec-bg);
  color: var(--spec-ink);
}
.toc--stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block-start: -13rem;
  inset-inline-end: -13rem;
  width: 30rem;
  aspect-ratio: 1;
  background: var(--ami-mark-line) center / contain no-repeat;
  pointer-events: none;
}
.toc--stage .toc__label { color: var(--spec-muted); }
.toc--stage .toc__band {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.toc--stage .toc__area { border-color: transparent; box-shadow: 0 22px 44px -22px rgba(0, 0, 0, 0.65); }
.toc--stage .toc__assumptions { background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.2); }
.toc--stage .toc__assume-main { color: #fff; }
.toc--stage .toc__assume-more { color: var(--spec-muted); }

/* ---- Theory of change: the text version (layout B) -----------------------
   Chosen on 19 Oct (A and D dropped 17 Oct, C on 19 Oct). Same words, read from
   her drawing by _build/build_toc.py. Portrait where room is short: the areas
   first, the shared pathways leaving each one and running down as three lanes
   beside the activity rows, a stop wherever an activity feeds an area.
   Landscape where there is room (below): the rows left, the pathways as curves
   in the middle, the areas as big boxes right. On screen only: the stage never
   prints (her drawing does). */
.toc-option { margin-block-start: var(--s-5); container: tocopt / inline-size; }

/* Hover over an area to see only the activities that feed it (B and C). An
   extra: the same facts are in words under each area. */
.tocl__row, .tocl__lane, .tocl__fan-line, .tocl__stop, .tocl__curve {
  transition: opacity var(--dur-2) var(--ease);
}
/* The pathways rest muted (19 Oct): hovering an area, or ticking Keep in view,
   brings its own up to full strength and sets them flowing; the rest fade
   further. The stops on the rows keep their colour throughout. */
.tocl__lane, .tocl__fan-line, .tocl__curve { opacity: 0.38; }
.toc-option .toc__area { transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
.toc-option .toc__area:hover { transform: translateY(-3px); }
/* With script, the activities that do not feed the area leave and the rest
   slide down to it (initTocOptions() in js/ami.js; the list keeps its height
   meanwhile). Without script they only dim. */
.tocl__rows { position: relative; }
/* The areas sit above the rows (portrait) or level with them (landscape), and
   the rows that feed an area are the first ones: they stay at the top. */
.tocl__rows.is-focused { align-content: start; }
.tocl__row.is-away { z-index: 0; pointer-events: none; }
/* the ones that stay slide over the ones leaving */
.tocl__rows.is-focused > :not(.is-away) { position: relative; z-index: 1; }
html:not(.js) .toc-option:has(.toc__area--availability:hover) .tocl__row:not([data-feeds~="availability"]),
html:not(.js) .toc-option:has(.toc__area--continuity:hover)   .tocl__row:not([data-feeds~="continuity"]),
html:not(.js) .toc-option:has(.toc__area--capacity:hover)     .tocl__row:not([data-feeds~="capacity"]) { opacity: 0.32; }
html:not(.js) .toc-option:has(.toc__area--availability:hover) :is(.tocl__lane, .tocl__fan-line, .tocl__stop):not(.tocl__lane--availability, [data-lane="availability"], .tocl__stop--availability),
html:not(.js) .toc-option:has(.toc__area--continuity:hover)   :is(.tocl__lane, .tocl__fan-line, .tocl__stop):not(.tocl__lane--continuity, [data-lane="continuity"], .tocl__stop--continuity),
html:not(.js) .toc-option:has(.toc__area--capacity:hover)     :is(.tocl__lane, .tocl__fan-line, .tocl__stop):not(.tocl__lane--capacity, [data-lane="capacity"], .tocl__stop--capacity) { opacity: 0.18; }
/* With script: the picked areas' pathways stay, the others dim; a picked
   pathway flows from its area down to its activities. js/ami.js sets
   .is-picking and .is-on-<area> on the layout. */
.toc-option.is-picking :is(.tocl__lane, .tocl__fan-line, .tocl__stop, .tocl__curve) { opacity: 0.18; }
.toc-option.is-on-availability :is(.tocl__lane--availability, .tocl__fan-line[data-lane="availability"], .tocl__stop--availability, .tocl__curve[data-lane="availability"]),
.toc-option.is-on-continuity   :is(.tocl__lane--continuity,   .tocl__fan-line[data-lane="continuity"],   .tocl__stop--continuity,   .tocl__curve[data-lane="continuity"]),
.toc-option.is-on-capacity     :is(.tocl__lane--capacity,     .tocl__fan-line[data-lane="capacity"],     .tocl__stop--capacity,     .tocl__curve[data-lane="capacity"]) { opacity: 1; }
.toc-option.is-on-availability .tocl__curve[data-lane="availability"] .toc__line,
.toc-option.is-on-continuity   .tocl__curve[data-lane="continuity"]   .toc__line,
.toc-option.is-on-capacity     .tocl__curve[data-lane="capacity"]     .toc__line { animation: tocl-curve-flow 620ms linear infinite; }
@keyframes tocl-curve-flow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -8; } }
.toc-option.is-on-availability .tocl__lane--availability,
.toc-option.is-on-continuity   .tocl__lane--continuity,
.toc-option.is-on-capacity     .tocl__lane--capacity { animation: tocl-lane-flow 720ms linear infinite; }
.toc-option.is-on-availability .tocl__fan-line[data-lane="availability"] .toc__line,
.toc-option.is-on-continuity   .tocl__fan-line[data-lane="continuity"]   .toc__line,
.toc-option.is-on-capacity     .tocl__fan-line[data-lane="capacity"]     .toc__line { animation: tocl-path-flow 720ms linear infinite; }
@keyframes tocl-lane-flow { from { background-position: center 0; } to { background-position: center 10px; } }
@keyframes tocl-path-flow { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -12; } }
@media (prefers-reduced-motion: reduce) {
  .toc-option :is(.tocl__lane, .toc__line) { animation: none !important; }
}

/* The box that keeps an area's activities in view: top right of the card,
   shown on hover or focus and while ticked; always shown where there is no
   hover. Hidden until js/ami.js can make it work. A ticked area wears a ring
   of its own colour. */
.toc__pick {
  position: absolute;
  inset-block-start: calc(var(--s-3) - 0.75rem);
  inset-inline-end: calc(var(--s-3) - 0.4rem);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2rem;
  padding: 0 0.7rem 0 0.55rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font: 600 var(--step--2)/1 var(--body);
  color: var(--slate-700);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease), border-color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease);
}
.toc__pick[hidden] { display: none; }
.toc__pick:hover { border-color: var(--slate-400); }
.toc__area:hover .toc__pick,
.toc__pick:focus-within,
.toc__area.is-picked .toc__pick { opacity: 1; }
.toc__area.is-picked .toc__pick { border-color: var(--area); background: var(--tint); color: var(--ink); }
.toc__pick:has(input:focus-visible) { outline: 2px solid var(--slate); outline-offset: 2px; }
.toc__pick-box { width: 1rem; height: 1rem; margin: 0; accent-color: var(--panel); cursor: pointer; }
@media (hover: none) {
  .toc__pick { opacity: 1; min-height: 2.75rem; }
}
.toc-option .toc__area.is-picked { box-shadow: 0 0 0 3px var(--area), 0 22px 44px -22px rgba(0, 0, 0, 0.65); }

/* B: the areas first; the shared pathways leaving each one and turning into
   its lane; the activities as rows with the three lanes beside them. The
   lanes are the last 21% of the width in three equal columns; the pathways
   above them are drawn on the same fractions (fan_svg()). */
.toc-lanes { --lanes: 21%; }
.toc-lanes .toc__areas { margin-block-start: var(--s-5); }
.tocl__bridge { position: relative; }
/* "Shared pathways": a plain label where the pathways are not drawn; beside
   them, under the lowest turn, where they are. */
.tocl__bridge-label { margin: var(--s-5) 0 0; }
@container (min-width: 48rem) {
  .tocl__bridge-label { position: absolute; inset-inline-start: 0; inset-block-end: 0.2rem; margin: 0; }
}
.tocl__head {
  position: relative;
  width: calc(100% - var(--lanes));
  margin: 0;
  padding-block: var(--s-4) var(--s-3);
}

.tocl__track { position: relative; }
.tocl__lanes {
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: var(--lanes);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  pointer-events: none;
}
/* A lane: the pathway's dots, in CSS so it runs the rows' whole height. */
.tocl__lane {
  position: relative;
  justify-self: center;
  align-self: start;
  height: 100%;
  width: 6px;
  background: radial-gradient(circle, currentColor 2.6px, transparent 3.1px) center top / 6px 10px repeat-y;
}
.tocl__lane--availability { color: var(--area-availability); }
.tocl__lane--continuity   { color: var(--area-continuity); }
.tocl__lane--capacity     { color: var(--area-capacity); }
/* Where the pathways above are not drawn (narrow), each lane starts on a
   ringed dot. */
.tocl__lane::after {
  content: "";
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: -8px;
  width: 14px;
  height: 14px;
  margin-inline-start: -7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px var(--panel);
}
@container (min-width: 48rem) { .tocl__lane::after { display: none; } }

.tocl__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.tocl__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--lanes);
}
.tocl__card {
  display: grid;
  border-radius: calc(var(--radius) * 3);
  background: #fff;
  overflow: hidden;
  box-shadow: 0 18px 36px -22px rgba(0, 0, 0, 0.65);
  color: var(--ink);
}
@container (min-width: 44rem) { .tocl__card { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.tocl__do { padding: var(--s-3); background: var(--bg); border-block-end: 1px solid var(--line-soft); }
@container (min-width: 44rem) { .tocl__do { border-block-end: 0; border-inline-end: 1px solid var(--line-soft); } }
.tocl__made { padding: var(--s-3); }
.tocl__kind { margin: 0; color: var(--muted); }
.tocl__title,
.tocl__out-title {
  margin: var(--s-1) 0 0.4rem;
  font-family: var(--brand);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
  text-wrap: balance;
}
.tocl__title { font-size: var(--step-1); }
.tocl__out-title { font-size: var(--step-0); }
.tocl__desc { margin: 0; font-size: var(--step--1); line-height: 1.45; color: var(--muted); }
.tocl__outs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.25rem;
  font-size: var(--step--1);
  line-height: 1.4;
  color: var(--muted);
}
.tocl__outs li { position: relative; padding-inline-start: 0.85rem; }
.tocl__outs li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--slate-400);
}
/* The row's stops: a line from its furthest lane to the card, and a dot on
   each lane it feeds; a lane it passes has no dot. */
.tocl__stops {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
}
.tocl__stops::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 50%;
  width: calc((var(--reach) - 0.5) / 3 * 100%);
  height: 2px;
  margin-block-start: -1px;
  background: rgba(255, 255, 255, 0.5);
  transform-origin: right center;
}
.tocl__stop {
  position: relative;
  grid-row: 1;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px var(--panel);
}
.tocl__stop--availability { grid-column: 1; color: var(--area-availability); }
.tocl__stop--continuity   { grid-column: 2; color: var(--area-continuity); }
.tocl__stop--capacity     { grid-column: 3; color: var(--area-capacity); }

.tocl__fan { display: none; width: 100%; height: auto; overflow: visible; }
@container (min-width: 48rem) { .tocl__fan { display: block; } }

/* B in motion: the areas arrive as they are reached and the pathways draw
   down out of them into the lanes; once the rows are reached the lanes draw
   down past them, and each stop lights as its lane reaches it, its line then
   running across to the card. No script, or reduced motion: all there. */
.js .toc-lanes .toc__areas.reveal > * {
  filter: none;
  transform: none;
  translate: 0 14px;
  transition: opacity var(--dur-4) var(--ease-out), translate var(--dur-4) var(--ease-out),
              transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.js .toc-lanes .toc__areas.reveal.is-in > * { translate: none; }
.js .toc-lanes .toc__areas.reveal.is-in > :nth-child(2) { transition-delay: 90ms, 90ms, 0ms, 0ms; }
.js .toc-lanes .toc__areas.reveal.is-in > :nth-child(3) { transition-delay: 180ms, 180ms, 0ms, 0ms; }
.js .toc-lanes .toc__areas.reveal.is-in > .toc__area:hover { transform: translateY(-3px); }
.js .tocl__fan .toc__reveal { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.js .toc-lanes:has(.toc__areas.is-in) .tocl__fan .toc__reveal { animation: toc-draw 900ms var(--ease-out) 450ms forwards; }
.js .tocl__fan .toc__land {
  opacity: 0;
  transform: scale(0.3);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 200ms ease-out, transform 280ms var(--ease-pop);
}
.js .toc-lanes:has(.toc__areas.is-in) .tocl__fan .toc__land { opacity: 1; transform: none; transition-delay: 350ms; }
.js .tocl__rows.reveal > * { filter: none; transform: translateY(14px); }
.js .tocl__rows.reveal.is-in > * { transform: none; }
.js .tocl__lanes { clip-path: inset(-24px -12px calc(100% + 24px) -12px); transition: clip-path 1500ms var(--ease-out); }
.js .tocl__track:has(.tocl__rows.is-in) .tocl__lanes { clip-path: inset(-24px -12px 0 -12px); transition-delay: 1100ms; }
.js .tocl__stops::before { transform: scaleX(0); transition: transform 360ms var(--ease-out); }
.js .tocl__stop { transform: scale(0); transition: transform 320ms var(--ease-pop), opacity var(--dur-2) var(--ease); }
.js .tocl__rows.is-in .tocl__stop { transform: none; transition-delay: calc(1350ms + var(--i) * 290ms), 0ms; }
.js .tocl__rows.is-in .tocl__stops::before { transform: none; transition-delay: calc(1450ms + var(--i) * 290ms); }
@media (prefers-reduced-motion: reduce) {
  .js .toc-lanes .toc__areas.reveal > * { translate: none; transition: none; }
  .js .tocl__lanes { clip-path: none; transition: none; }
  .js .tocl__stops::before, .js .tocl__stop { transform: none; transition: none; }
  .js .tocl__fan .toc__reveal { stroke-dashoffset: 0; animation: none; }
  .js .tocl__fan .toc__land { opacity: 1; transform: none; transition: none; }
}

/* B, landscape (19 Oct, PQMD: "if this was landscape, you could fit
   everything"): with the room, the activity rows on the left, the shared
   pathways in the middle as curves - one from each activity to each area it
   feeds, in the area's colour, drawn by js/ami.js from the layout - and the
   three areas as big boxes on the right, level with the rows; the impact and the
   assumptions beneath. The whole text version fits one laptop screen. The rows
   drop their per-row ACTIVITY / OUTPUTS labels to the eye (the column label says
   it; screen readers still hear them) and list their outputs inline. Hover and
   Keep in view work as in portrait; without script each area names its
   activities in words. */
.tocl__curves { display: none; }
@container tocopt (min-width: 58rem) {
  .toc-lanes {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(4.5rem, 0.34fr) minmax(0, 0.86fr);
    grid-template-rows: auto auto 1fr auto;
    column-gap: 0;
    row-gap: var(--s-2);
  }
  .toc-lanes > .tocl__track { display: contents; }
  .toc-lanes > .tocl__bridge { display: block; position: relative; grid-column: 2; grid-row: 2 / span 2; min-width: 0; }
  .toc-lanes > .toc__inputs { grid-column: 1 / -1; grid-row: 1; margin-block-end: var(--s-2); }
  .toc-lanes .tocl__head { grid-column: 1; grid-row: 2; width: auto; padding: 0; }
  .toc-lanes .tocl__bridge-label { position: static; margin: 0; text-align: center; }
  .toc-lanes .tocl__rows { grid-column: 1; grid-row: 3; gap: 6px; align-content: start; }
  .toc-lanes .tocl__curves { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
  .toc-lanes > .toc__areas {
    grid-column: 3;
    grid-row: 3;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin: 0;
  }
  /* the impact under the areas, where her drawing puts it; the assumptions under the rows */
  .toc-lanes > .toc__impact { grid-column: 3; grid-row: 4; margin: var(--s-1) 0 0; padding: var(--s-2) var(--s-3); align-self: stretch; display: grid; align-content: center; }
  .toc-lanes > .toc__assumptions { grid-column: 1 / span 2; grid-row: 4; margin: var(--s-1) 0.6rem 0 0; padding: var(--s-2) var(--s-3); }
  .toc-lanes .toc__impact-text { font-size: var(--step-1); }
  .toc-lanes .toc__assume-main,
  .toc-lanes .toc__assume-more { font-size: var(--step--1); line-height: 1.4; }

  /* portrait's lanes, stops and drawn pathways step aside */
  .toc-lanes .tocl__lanes,
  .toc-lanes .tocl__stops,
  .toc-lanes .tocl__fan { display: none !important; }

  /* the inputs on one line each, icon beside */
  .toc-lanes .toc__inputs { padding: var(--s-1) var(--s-3) var(--s-2); }
  .toc-lanes .toc__inputs .toc__label { margin-block-end: 0.25rem; }
  .toc-lanes .toc__input-list { font-size: var(--step--1); }
  .toc-lanes .toc__input { flex-direction: row; justify-content: center; gap: 0.6rem; }
  .toc-lanes .toc__input-icon { width: 2rem; height: 2rem; font-size: 0.85rem; }

  /* the rows: compact, activity beside its outputs */
  .toc-lanes .tocl__row { grid-template-columns: minmax(0, 1fr); }
  .toc-lanes .tocl__card { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); box-shadow: 0 10px 22px -18px rgba(0, 0, 0, 0.7); }
  .toc-lanes .tocl__do,
  .toc-lanes .tocl__made { padding: 0.5rem 0.75rem; border-block-end: 0; }
  .toc-lanes .tocl__do { border-inline-end: 1px solid var(--line-soft); }
  .toc-lanes .tocl__kind {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .toc-lanes .tocl__title { margin: 0 0 0.15rem; font-size: var(--step-0); }
  .toc-lanes .tocl__out-title { margin: 0 0 0.15rem; font-size: var(--step--1); }
  .toc-lanes .tocl__desc,
  .toc-lanes .tocl__outs { font-size: var(--step--1); line-height: 1.38; }
  .toc-lanes .tocl__outs { display: block; }
  .toc-lanes .tocl__outs li { display: inline; padding: 0; }
  .toc-lanes .tocl__outs li::before { content: none; }
  .toc-lanes .tocl__outs li + li::before {
    content: "·";
    position: static;
    display: inline;
    width: auto;
    height: auto;
    margin: 0 0.4em;
    background: none;
    color: var(--slate-400);
  }

  /* the areas: big boxes, the name and the outcome centred in them */
  .toc-lanes .toc__area {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2.4rem var(--s-3) var(--s-2);
  }
  .toc-lanes .toc__area::before { inset-block-start: var(--s-2); }
  .toc-lanes .toc__area-name { margin: 0 0 var(--s-1); font-size: var(--step-1); }
  .toc-lanes .toc__outcome { padding: 0.55rem 0.75rem; font-size: var(--step--1); }
  html:not(.js) .toc-lanes .toc__fed { position: static; width: auto; height: auto; margin: var(--s-2) 0 0; overflow: visible; clip-path: none; white-space: normal; }

  /* the curves: dotted, in each area's colour; a dot where each leaves its
     activity and a ringed one where it reaches its area */
  .tocl__curves .toc__line { stroke-width: 3.2; stroke-dasharray: 0 8; }
  .tocl__curves .tocl__end { fill: currentColor; }
  .tocl__curves .toc__land { stroke-width: 2.5; }
  .js .toc-lanes .tocl__curves { opacity: 0; transition: opacity 600ms var(--ease-out) 350ms; }
  .js .toc-lanes:has(.tocl__rows.is-in) .tocl__curves { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .js .toc-lanes .tocl__curves { opacity: 1; transition: none; }
  .toc-option .tocl__curve .toc__line { animation: none !important; }
}

@media print {
  .toc-option { display: none !important; }
}

/* The full-size view: the whole window, a slate bar with zoom and close, the
   drawing on paper white, scrolled and dragged when zoomed. Built by
   initArtViewer() in js/ami.js; Escape and the close button leave. */
.art-viewer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--bg);
  color: var(--ink);
}
.art-viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.art-viewer::backdrop { background: rgba(22, 38, 47, 0.55); }
.art-viewer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  padding: 0.6rem var(--s-3);
  background: var(--panel);
  color: #fff;
}
.art-viewer__title { margin: 0 auto 0 0; font: 600 var(--step-0)/1.3 var(--body); }
.art-viewer__level { min-width: 3.5rem; text-align: center; font: 600 var(--step--1)/1 var(--label); letter-spacing: 0.04em; color: var(--spec-muted); }
.art-viewer__btn {
  display: inline-grid;
  place-items: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font: 500 var(--step--1)/1 var(--body);
  cursor: pointer;
}
.art-viewer__btn:hover { background: rgba(255, 255, 255, 0.14); }
.art-viewer__btn:focus-visible { outline: 2px solid var(--yellow); outline-offset: 2px; }
.art-viewer__btn:disabled { opacity: 0.45; cursor: default; }
.art-viewer__body { overflow: auto; overscroll-behavior: contain; padding: var(--s-3); }
.art-viewer__body.is-zoomed { cursor: grab; }
.art-viewer__body.is-dragging { cursor: grabbing; user-select: none; }
.art-viewer__paper { margin-inline: auto; padding: var(--s-3); background: #fff; border-radius: calc(var(--radius) * 2); box-shadow: 0 18px 40px -28px rgba(22, 38, 47, 0.55); }
.art-viewer__paper .toc-art__svg { width: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .art-viewer[open] { animation: art-in 220ms var(--ease-out, ease-out); }
}
@keyframes art-in { from { opacity: 0; transform: scale(0.985); } to { opacity: 1; transform: none; } }

/* On paper: her drawing alone, the text version is for the screen. In the
   fidelity PDF it takes the page's whole printable width (1216px), not the
   920px text column - a third larger. Not a landscape page of its own: a
   named page wider than the rest made Chrome shrink every page of the
   toolkit PDF to fit it (16 Oct: body text 12.8pt fell to 9.5pt). Vector text,
   so it zooms sharply in a PDF reader. */
@media print {
  .toc--stage { display: none !important; }
  .toc-art { margin: 0; break-inside: avoid; }
  html[data-print="fidelity"] .toc-art { margin-inline: calc((920px - 1216px) / 2); }
  .toc-art__frame { padding: 0; border: 0; box-shadow: none; }
  .toc-art__bar { display: none !important; }
  .art-viewer { display: none !important; }
  /* her drawing carries its own title: the screen's heading stays off paper */
  .toc-head { display: none !important; }
}
/* Since 3 Nov (her email): on screen the interactive version is the only one,
   under the drawing's own title, and her original is a PDF to download; the
   drawing itself stays in the page for print alone. */
@media screen {
  .toc-art--print { display: none; }
}
.toc-downloads { margin-block-start: var(--s-3); }
.toc-art__action--open .toc-art__meta { color: var(--spec-muted); }
.toc-head + .toc-downloads + .toc-art--print + .toc-option,
.toc-head + .toc-downloads ~ .toc-option { margin-block-start: var(--s-4); }

/* --------------------------------------------------------------------------
   14c. Component — Measuring Companion  (measuring-companion.html, 15 Oct)
   PQMD's "Ways to measure contribution", rebuilt in code by
   _build/build_companion.py from a proofread transcription of her picture:
   the shared outputs feeding all three areas; per area its priority indicator
   (a link to the card), proposed outcome measures and supporting operational
   measures, kept level across the three by subgrid; the impact line; the
   health and quality evidence beneath it, dashed - an overlay, never a fourth
   area. Answers its container like the theory of change: five and three
   columns from 48rem of room, cards below.
   -------------------------------------------------------------------------- */
.mc { container-type: inline-size; }
.mc__label { margin: 0 0 var(--s-2); color: var(--muted); }

.mc__outputs { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
@container (min-width: 34rem) { .mc__outputs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 48rem) { .mc__outputs { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 2%; } }
.mc__output {
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 3);
  background: var(--bg);
}
.mc__output-title {
  margin: 0 0 var(--s-1);
  font-family: var(--brand);
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
  text-wrap: balance;
}
.mc__output-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.2rem;
  font-size: var(--step--1);
  line-height: 1.4;
  color: var(--muted);
}

/* One line from all five outputs, an arrow into each area. */
.mc__paths { display: none; width: 100%; height: auto; overflow: visible; }
@container (min-width: 48rem) { .mc__paths { display: block; } }
.mc__line, .mc__arrow { fill: none; stroke: var(--slate-500); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

.mc__areas { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: var(--s-4); }
@container (min-width: 48rem) {
  .mc__areas { margin-block-start: var(--s-2); grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 2%; }
  .mc__area { grid-row: span 4; display: grid; grid-template-rows: subgrid; }
}
.mc__area { --area: var(--slate); --tint: var(--bg); display: grid; gap: var(--s-3); align-content: start; }
.mc__area--availability { --area: var(--area-availability); --tint: #fff1e7; }
.mc__area--continuity   { --area: var(--area-continuity);   --tint: #f4f8e1; }
.mc__area--capacity     { --area: var(--area-capacity);     --tint: #fff8d6; }
.mc__area-name {
  margin: 0;
  align-self: end;
  font-family: var(--brand);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink);
  text-wrap: balance;
}

/* The priority indicator: the area's tint with its colour as the left edge,
   as in her picture, and the way into its metric card. */
.mc__indicator {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  padding: var(--s-3);
  border-inline-start: 5px solid var(--area);
  border-radius: calc(var(--radius) * 2);
  background: var(--tint);
  color: var(--ink);
  text-decoration: none;
  transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.mc__indicator:hover,
.mc__indicator:focus-visible {
  color: var(--ink);
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px var(--line), 0 10px 22px -16px rgba(22, 38, 47, 0.45);
}
.mc__indicator:focus-visible { outline: 2px solid var(--slate); outline-offset: 2px; }
.mc__kind { margin: 0; color: var(--slate-700); }
.mc__indicator-name {
  font-family: var(--brand);
  font-size: var(--step-1);
  font-weight: 600;
  line-height: 1.3;
  text-wrap: balance;
}
.mc__open {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-block-start: auto;
  padding-block-start: var(--s-1);
  font-family: var(--label);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--slate-700);
}

.mc__box {
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 3);
  background: #fff;
}
.mc__box .mc__kind { margin-block-end: var(--s-2); color: var(--muted); }
.mc__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; line-height: 1.45; color: var(--slate-700); }
.mc__list li { position: relative; padding-inline-start: 1rem; }
.mc__list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0.1rem;
  inset-block-start: 0.6em;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: var(--area, var(--slate-400));
}
.mc__box--hq .mc__list li::before { background: var(--slate-400); }

.mc__band {
  margin-block-start: var(--s-5);
  padding: var(--s-3) var(--s-4);
  border-radius: calc(var(--radius) * 3);
  background-color: var(--panel);
  background-image: radial-gradient(120% 160% at 0% 0%, var(--panel) 0%, var(--panel-lo) 64%);
  text-align: center;
}
.mc__band .mc__label { color: var(--spec-muted); }
.mc__impact {
  margin: 0;
  font-family: var(--brand);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  text-wrap: balance;
}

.mc__hq { margin-block-start: var(--s-5); }
.mc__hq-lede { margin: 0 0 var(--s-3); color: var(--muted); }
.mc__hq-boxes { display: grid; gap: var(--s-3); }
@container (min-width: 40rem) { .mc__hq-boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.mc__box--hq { border-style: dashed; border-color: var(--slate-400); background: transparent; }
/* 19 Oct (PQMD: "everything can be the same size as the outputs"): the area
   names and indicators at the outputs' title size, every list at the outputs'
   item size, the impact line one step up. */
.mc .mc__area-name,
.mc .mc__indicator-name { font-size: var(--step-0); }
.mc .mc__list,
.mc .mc__hq-lede { font-size: var(--step--1); }
.mc .mc__list { gap: 0.3rem; }
.mc .mc__area { gap: 0.5rem; }
.mc .mc__impact { font-size: var(--step-1); }
.mc .mc__output,
.mc .mc__indicator,
.mc .mc__box { padding: var(--s-2) var(--s-3); }

@media (prefers-reduced-motion: reduce) {
  .mc__indicator { transition: none; }
  .mc__indicator:hover, .mc__indicator:focus-visible { transform: none; }
}
@media print {
  .mc__output, .mc__box, .mc__indicator, .mc__band, .mc__hq { break-inside: avoid; }
  .mc__paths { break-after: avoid; }
  .mc__areas { break-before: avoid; }
  .mc__open { display: none; }
}

/* --------------------------------------------------------------------------
   14d. Component — acknowledgements  (acknowledgements.html, 15 Oct)
   PQMD's slide, built by _build/build_ack.py. The six funders' logos on equal
   white tiles, each sized to the same area rather than the same height, so no
   logo outweighs another because of its shape; the thirty organisations in
   reading columns, in her order; the principal contributors as her sentence.
   -------------------------------------------------------------------------- */
/* The one way out to PQMD's own site: its logo and the address, under the
   opening. Opens in a new tab. */
.ack__pqmd {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 2.75rem;
  margin-block-start: var(--s-3);
  padding: 0.55rem 1rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--slate-700);
  font: 600 var(--step--1)/1.2 var(--body);
  text-decoration: none;
  transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.ack__pqmd img { width: auto; height: 1.6rem; }
/* The way to PQMD, and beside it PQMD's own pages (19 Oct): one disc each in the
   logo's accents, in its order - orange, lime, yellow - with the mark in ink
   (5.4 to 10.5:1); on hover the slate, the mark white (7.3:1). */
.ack__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-block-start: var(--s-3); }
.ack__links .ack__pqmd { margin: 0; }
.ack__social { display: flex; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.ack__social-link {
  --disc: var(--orange);
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--disc);
  color: var(--ink);
  box-shadow: 0 6px 14px -10px rgba(22, 38, 47, 0.7);
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.ack__social-link--linkedin { --disc: var(--orange); }
.ack__social-link--x        { --disc: var(--lime); }
.ack__social-link--youtube  { --disc: var(--yellow); }
.ack__social-link svg { width: 1.05rem; height: 1.05rem; fill: currentColor; }
.ack__social-link:hover { background: var(--panel); color: #fff; transform: translateY(-2px); }
.ack__social-link:focus-visible { outline: 2px solid var(--slate); outline-offset: 3px; }
@media print { .ack__social { display: none; } }
.ack__pqmd i { font-size: 0.75rem; color: var(--muted); }
.ack__pqmd:hover { border-color: var(--slate-400); color: var(--ink); }
.ack__pqmd:focus-visible { outline: 2px solid var(--slate); outline-offset: 2px; }
@media print { .ack__pqmd i { display: none; } }

.ack__logos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
  gap: var(--s-3);
}
.ack__logo {
  display: grid;
  place-items: center;
  min-height: 9rem;
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * 3);
  background: #fff;
}
.ack__logo img { display: block; max-width: 100%; height: auto; }
.ack__orgs {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 3 12rem;
  column-gap: var(--s-5);
  color: var(--slate-700);
}
.ack__orgs li {
  break-inside: avoid;
  padding-block: 0.55rem;
  border-block-end: 1px solid var(--line-soft);
  line-height: 1.35;
}
.ack__lede { margin: 0 0 var(--s-3); color: var(--muted); max-width: 60ch; }
/* 19 Oct (PQMD: "decrease font to get more on one page"): the six funders on
   one row, the organisations in four columns at caption size. */
.ack .ack__logos { grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr)); gap: var(--s-2); }
.ack .ack__logo { min-height: 6rem; padding: var(--s-2); }
.ack .ack__orgs { columns: 4 10rem; column-gap: var(--s-4); font-size: var(--step--1); }
.ack .ack__orgs li { padding-block: 0.35rem; }
.ack .ack__people { font-size: var(--step-0); max-width: 100ch; }
.ack__people {
  margin: 0;
  max-width: 58ch;
  font-family: var(--brand);
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--ink);
  text-wrap: pretty;
}
.ack__copy {
  margin: var(--s-5) 0 0;
  font-family: var(--label);
  font-size: var(--step--2);
  letter-spacing: 0.06em;
  color: var(--muted);
}
@media print {
  .ack__logo { break-inside: avoid; min-height: 0; }
  .ack__logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* The contributors and the copyright line travel together: never a page
     holding only "© PQMD 2026". */
  .ack:last-of-type { break-inside: avoid; }
  .ack__copy { margin-block-start: 10pt; }
}

/* --------------------------------------------------------------------------
   15. Print
   Every component prints. The dark band inverts to white with heavy rules so
   it still reads as the centrepiece on paper.
   -------------------------------------------------------------------------- */

@media print {

  /* ======================================================================
     UNIVERSAL — applies in both print modes
     ====================================================================== */

  /* Backgrounds carry meaning here — section rules, list bullets, the area
     accent bars, colour swatches. Chrome suppresses those unless the user
     ticks "Background graphics", so force them. print-color-adjust is
     inherited, so declaring it once on html covers the document. */
  html {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* The annex prints whole: the prototype switch goes, and every output shows
     its detail whether or not the reader had it open on screen. Closed
     <details> withhold their contents from the printer, so js/ami.js opens
     them all on beforeprint; this is the belt to that braces. */
  .proto { display: none !important; }
  .output { break-inside: avoid; border-color: #000; }
  .output__head { cursor: auto; }
  .output__body { display: block !important; }

  .u-skip,
  .masthead__print,
  .posbar,
  .sidedock,
  .scope { display: none !important; }

  /* Reveal animations must never leave content invisible on paper. */
  .js .reveal > * { opacity: 1 !important; transform: none !important; filter: none !important; }

  /* Same for the mark: a page sent to the printer mid-entrance must still
     come out as the finished emblem. */
  .emblem-figure, .emblem-say,
  .emblem__ring, .emblem__core, .emblem__g, .emblem__parent { animation: none !important; }
  .emblem-say { display: none !important; }
  .emblem-stage .emblem__parent { opacity: 0 !important; }
  .emblem-stage .emblem__ring,
  .emblem-stage .emblem__g,
  .emblem-stage .emblem__core { opacity: 1 !important; }

  /* The card viewer. Its Print button and Ctrl+P while it is open print the
     card from inside its own frame, economically. A print started any other
     way prints the page behind, whole: a frame would only print the part of
     the card that happens to be scrolled into view. */
  .card-viewer { display: none !important; }
  html.has-card-viewer { overflow: visible !important; }
  html.is-in-card-viewer .shell { padding: 0 !important; }
  html.is-in-card-viewer main { max-width: none !important; }
  html.is-in-card-viewer .metric-card { box-shadow: none !important; }
  html.is-in-card-viewer .metric-card__head > *,
  html.is-in-card-viewer .metric-card__body { animation: none !important; }

  /* Reference tables: never split a row across pages. Economically printed,
     the slate band becomes a black rule and the lead tint drops out. */
  .reftable__row { break-inside: avoid; }
  .js .reftable.reveal { opacity: 1 !important; transform: none !important; }
  html:not([data-print="fidelity"]) .reftable__head { background: none !important; border-block-end: 1pt solid #000; }
  html:not([data-print="fidelity"]) .reftable__label { color: #000 !important; }
  html:not([data-print="fidelity"]) .reftable__cell--lead { background: none !important; }

  /* The glossary's letter index jumps around the screen; on paper it is noise. */
  .glossary-index { display: none !important; }
  .term:target { background: none; box-shadow: none; }
  .glossary__letter { break-after: avoid; }

  /* The module sheet is screen chrome: no box around a printed page. */
  .module--sheet,
  .entry--sheet { background: none !important; border: 0 !important; box-shadow: none !important; }
  html:not([data-print="fidelity"]) .module--sheet,
  html:not([data-print="fidelity"]) .entry--sheet { padding: 0 !important; margin-block: 0 !important; }
  /* A link that opens a popup means nothing on paper. */
  .measures__open { display: none !important; }

  /* When a multi-page print is assembled, the live page steps aside. */
  html[data-print-scope="bundle"] > body > *:not(.print-bundle) { display: none !important; }
  html[data-print-scope="bundle"] .print-bundle { display: block !important; }

  /* Pagination */
  .entry-module,
  .shift,
  .measures__row,
  .hero__slot, .hero__notes, .emblem-figure, .triad, .impact-grid, .route__station, .term,
  .band, .impact-card, .metric-section, .spec-row, .ledger__row,
  .steps__item, .pullquote, .statement, .reflect,
  .resource, .pending, .refrain { break-inside: avoid; }
  .metric-card { break-inside: auto; }
  .metric-card__head { break-after: avoid; }
  .t-section, .t-module, .impact__title, .next__title,
  .metric-section__title { break-after: avoid; }

  @page { margin: 16mm 14mm; }

  /* ======================================================================
     ECONOMICAL MODE — the default
     ----------------------------------------------------------------------
     Hard rule 6: module pages must print cleanly so people can use them in a
     room with partners. So by default the dark panels invert to white, colour
     drops out, and type tightens to save ink.

     A page opts out with <html data-print="fidelity"> plus a link to
     css/print-fidelity.css, which reproduces the screen design for review
     PDFs. Everything below is gated so fidelity mode simply inherits the
     screen styles rather than having to undo these.
     ====================================================================== */

  html:not([data-print="fidelity"]) { --step-0: 10.5pt; }
  html:not([data-print="fidelity"]),
  html:not([data-print="fidelity"]) body { background: #fff; color: #000; }

  /* Print layout is NOT the narrow-screen layout. Media queries in print
     resolve against the page box: A4 minus the margins above is ~43rem and US
     Letter ~44rem, both under the 46rem breakpoint the two-column layouts use.
     Without these, every two-column block collapses to one column on paper. */
  html:not([data-print="fidelity"]) .ledger__head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14pt;
    padding-block: 4pt;
    border-block-end: 0.5pt solid #000;
  }
  html:not([data-print="fidelity"]) .ledger__row { grid-template-columns: 1fr 1fr; gap: 14pt; align-items: start; }
  html:not([data-print="fidelity"]) .ledger__rowlabel {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  html:not([data-print="fidelity"]) .spec-row { grid-template-columns: 9rem minmax(0, 1fr); gap: 14pt; align-items: start; }
  html:not([data-print="fidelity"]) .steps__item { grid-template-columns: 1.9rem minmax(0, 1fr); gap: 10pt; }
  html:not([data-print="fidelity"]) .refrain__item { grid-template-columns: 2.5rem minmax(0, 1fr); align-items: center; gap: 10pt; }
  html:not([data-print="fidelity"]) .impact-card__name { min-height: 0; }
  html:not([data-print="fidelity"]) .metric-card__body { padding: 12pt; }
  html:not([data-print="fidelity"]) .resource { padding: 12pt; }
  html:not([data-print="fidelity"]) .refrain { padding: 12pt; }

  html:not([data-print="fidelity"]) .rail,
  html:not([data-print="fidelity"]) .next__link { display: none !important; }

  html:not([data-print="fidelity"]) .shell { display: block; max-width: none; padding: 0; }
  html:not([data-print="fidelity"]) .wrap  { max-width: none; padding-inline: 0; }

  html:not([data-print="fidelity"]) .masthead { border-block-end: 1.5pt solid #000; }
  html:not([data-print="fidelity"]) .masthead__inner { min-height: 0; padding-block: 6pt; }
  html:not([data-print="fidelity"]) .masthead__logo { height: 26pt; }

  html:not([data-print="fidelity"]) .module-head { padding-block: 14pt 10pt; }
  html:not([data-print="fidelity"]) .section { padding-block: 12pt; }

  /* Dark band -> paper. The area accents survive as the card top rules, which
     is the one place colour is doing work the text cannot do. */
  html:not([data-print="fidelity"]) .band {
    padding: 14pt 12pt;
    border-radius: 0;
    background: #fff !important;
    color: #000 !important;
    border-block: 1.5pt solid #000;
  }
  html:not([data-print="fidelity"]) .impact-card::before { height: 2.5pt; }
  html:not([data-print="fidelity"]) .impact-card__icon {
    width: 26pt; height: 26pt;
    border-color: #000 !important;
    color: #000 !important;
    font-size: 11pt;
  }
  html:not([data-print="fidelity"]) .impact-card:hover { background: #fff !important; }
  html:not([data-print="fidelity"]) .endmark { display: none; }
  html:not([data-print="fidelity"]) .journey__step::before { background: #fff; border-color: #000; }
  html:not([data-print="fidelity"]) .journey::before { background: #999; }
  html:not([data-print="fidelity"]) .steps__item::before { border-color: #000; color: #000; }
  html:not([data-print="fidelity"]) .steps__item:not(:last-child)::after { background: #999; }
  html:not([data-print="fidelity"]) .ledger__icon { color: #000; }
  html:not([data-print="fidelity"]) .impact__grid { grid-template-columns: repeat(3, 1fr); gap: 8pt; }
  html:not([data-print="fidelity"]) .impact-card {
    padding: 10pt;
    background: #fff !important;
    border: 0.75pt solid #000 !important;
  }
  html:not([data-print="fidelity"]) .impact__title,
  html:not([data-print="fidelity"]) .impact-card__q { color: #000 !important; }
  html:not([data-print="fidelity"]) .impact-card__name,
  html:not([data-print="fidelity"]) .impact-card__mark,
  html:not([data-print="fidelity"]) .band .eyebrow--accent { color: #000 !important; }
  html:not([data-print="fidelity"]) .impact__lede,
  html:not([data-print="fidelity"]) .impact__foot { color: #222 !important; }
  html:not([data-print="fidelity"]) .impact__foot { border-block-start: 0.5pt solid #999; }

  /* The impact grid: the slate stage becomes paper, the watermark goes, the
     colour blocks shrink to the same 2.5pt rule as the impact cards, the icons
     go, and the band keeps its dashed edge in black. The container query still
     sees ~43rem of page, so it stays three across. */
  html:not([data-print="fidelity"]) .impact-grid {
    margin-block-start: 12pt;
    padding: 0;
    background: #fff !important;
    border-radius: 0;
    color: #000;
  }
  html:not([data-print="fidelity"]) .impact-grid::before { display: none; }
  html:not([data-print="fidelity"]) .impact-grid__lede { margin-block-end: 8pt; font-size: 12pt; color: #000 !important; }
  html:not([data-print="fidelity"]) .impact-grid__area { border: 0.75pt solid #000; border-radius: 0; box-shadow: none; }
  html:not([data-print="fidelity"]) .impact-grid__block { height: 2.5pt; padding: 0; background: var(--area); }
  html:not([data-print="fidelity"]) .impact-grid__icon,
  html:not([data-print="fidelity"]) .impact-grid__glyph { display: none; }
  html:not([data-print="fidelity"]) .impact-grid__name { padding: 8pt 10pt 0; color: #000; }
  html:not([data-print="fidelity"]) .impact-grid__q { padding: 4pt 10pt 8pt; color: #000; }
  html:not([data-print="fidelity"]) .impact-grid__overlay {
    margin-block-start: 14pt;
    padding: 6pt 10pt;
    background: #fff;
    border: 1pt dashed #000;
    border-radius: 0;
  }
  html:not([data-print="fidelity"]) .impact-grid__overlay-name,
  html:not([data-print="fidelity"]) .impact-grid__overlay-text { color: #000; }
  html:not([data-print="fidelity"]) .impact-grid__ties { height: calc(14pt + 1pt); inset-inline: -1pt; }
  html:not([data-print="fidelity"]) .impact-grid__ties span { border-inline-start: 1pt dashed #999; }

  /* The route: paper instead of slate, the line in grey, discs in black. */
  html:not([data-print="fidelity"]) .route {
    --line: #999;
    --chev-right: none; --chev-left: none; --chev-down: none;
    padding: 0;
    background: #fff !important;
    border-radius: 0;
    color: #000;
  }
  html:not([data-print="fidelity"]) .route::before { display: none; }
  html:not([data-print="fidelity"]) .route__disc { background: #fff; border-color: #000; color: #000; box-shadow: none; }
  html:not([data-print="fidelity"]) .route__name,
  html:not([data-print="fidelity"]) .route__module,
  html:not([data-print="fidelity"]) .route__module i,
  html:not([data-print="fidelity"]) .route__q,
  html:not([data-print="fidelity"]) .route__link,
  html:not([data-print="fidelity"]) .route__n,
  html:not([data-print="fidelity"]) .route__icon,
  html:not([data-print="fidelity"]) .route__legend { color: #000 !important; }
  /* A tool keeps its fill as a light grey; a resource its outline. */
  html:not([data-print="fidelity"]) .route__link--tool { background: #e6e6e6; }
  html:not([data-print="fidelity"]) .route__link--resource { border-color: #999; background: none; }
  html:not([data-print="fidelity"]) .route__link--pending { border-color: #999; }
  html:not([data-print="fidelity"]) .route__key-n { border-color: #000; color: #000; }
  html:not([data-print="fidelity"]) .route__key-tool { background: #e6e6e6; color: #000; }
  html:not([data-print="fidelity"]) .route__key-chip { border-color: #000; }

  html:not([data-print="fidelity"]) .t-module, html:not([data-print="fidelity"]) .t-section, html:not([data-print="fidelity"]) .t-opening,
  html:not([data-print="fidelity"]) .statement, html:not([data-print="fidelity"]) .pullquote p,
  html:not([data-print="fidelity"]) .reflect__item, html:not([data-print="fidelity"]) .next__title, html:not([data-print="fidelity"]) .next__q { color: #000; }

  html:not([data-print="fidelity"]) .t-section::after, html:not([data-print="fidelity"]) .pullquote::before { background: #000; }
  html:not([data-print="fidelity"]) .statement { border-inline-start-color: #000; }
  html:not([data-print="fidelity"]) .next { border-block-start-color: #000; }

  html:not([data-print="fidelity"]) .metric-card { border: 0.75pt solid #000; }
  html:not([data-print="fidelity"]) .metric-card__head {
    padding: 12pt;
    background: #fff !important;
    color: #000 !important;
    border-block-end: 1pt solid #000;
  }
  html:not([data-print="fidelity"]) .metric-card__head::before { height: 2.5pt; }
  html:not([data-print="fidelity"]) .metric-card__area, html:not([data-print="fidelity"]) .metric-card__name { color: #000 !important; }
  html:not([data-print="fidelity"]) .metric-card__areaicon { border-color: #000 !important; color: #000 !important; width: 20pt; height: 20pt; }
  html:not([data-print="fidelity"]) .metric-section { padding-block: 9pt; }
  html:not([data-print="fidelity"]) .metric-list li::before { background: #000; }

  html:not([data-print="fidelity"]) .resource, html:not([data-print="fidelity"]) .pending, html:not([data-print="fidelity"]) .refrain {
    background: #fff;
    border: 0.75pt solid #000;
  }
  html:not([data-print="fidelity"]) .refrain::before { height: 2pt; }
  html:not([data-print="fidelity"]) .refrain__icon { border-color: #000; color: #000; width: 22pt; height: 22pt; }
  html:not([data-print="fidelity"]) .refrain__line { color: #000; }

  html:not([data-print="fidelity"]) .entry { max-width: none; padding-inline: 0; }
  html:not([data-print="fidelity"]) .entry-head { padding-block: 14pt 10pt; }
  html:not([data-print="fidelity"]) .entry-modules { grid-template-columns: repeat(3, 1fr); gap: 8pt; }
  html:not([data-print="fidelity"]) .shift { grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 14pt; }
  html:not([data-print="fidelity"]) .measures__row { grid-template-columns: 13rem minmax(0,1fr); gap: 14pt; }
  html:not([data-print="fidelity"]) .shift__turn { display: grid; }
  html:not([data-print="fidelity"]) .shift__turn--stack { display: none; }
  html:not([data-print="fidelity"]) .entry-module { border: 0.5pt solid #000; padding: 8pt; break-inside: avoid; }
  html:not([data-print="fidelity"]) .entry-module__n, html:not([data-print="fidelity"]) .entry-module__title { color: #000; }

  html:not([data-print="fidelity"]) a { color: #000; text-decoration: underline; }

  html:not([data-print="fidelity"]) .colophon { border-block-start: 0.75pt solid #000; }
  html:not([data-print="fidelity"]) .colophon__inner { padding-block: 8pt; color: #000; }
}

/* The entry page's rail (10 Oct). On a phone the front door comes first: its
   own "Start here" and ways in do the rail's job there, so the rail's strip,
   which sits above the content on small screens, is left out on this page. */
@media (max-width: 61.99rem) {
  .shell--entry > .rail { display: none; }
}
@media (max-width: 45.99rem) {
  .shell > .entry { padding-inline: 0; }
}

/* release:start ---------------------------------------------------------------
   The showcase switch (19 Oct; split in two on 24 Oct). Do not edit the media
   lines by hand: run python _build/set_release.py showcase|committee|review,
   which sets them with _build/common.py's RELEASE and rebuilds the downloads.
   This first block is the pre-publication band; the next, the reserved slots.
     showcase   band hidden, slots hidden  - for showing the toolkit
     committee  band hidden, slots shown   - the committee's review (24 Oct)
     review     band shown,  slots shown   - PQMD's review copy
   Nothing is removed from the pages, so switching back shows it all again, in
   print and in the package PDF too. */
@media all {
  .draft-note { display: none !important; }
}
/* release:end */
/* slots:start - the reserved slots for resources still to come (set_release.py) */
@media all {
  .pending,
  .rail__item--soon,
  li:has(> .route__link--pending),
  li:has(> .card-resources__link--pending),
  .cat__label:has(+ .cat__text--soon),
  .cat__text--soon { display: none !important; }
  /* a Catalogue metric with neither description written yet opens onto nothing */
  .cat__more:not(:has(.cat__text:not(.cat__text--soon))) { display: none !important; }
  .cat__details:not(:has(.cat__text:not(.cat__text--soon))) > .cat__summary { cursor: default; }
  .cat__details:not(:has(.cat__text:not(.cat__text--soon))) > .cat__summary::before { visibility: hidden; }
}
/* slots:end */

/* ---- search (3 Nov) ----
   PQMD: "can we add a 'search' button to pull up content or go to pages?" The
   button sits at the masthead's far end (added by initSearch() in js/ami.js, so
   it is never there without script); the dialog drops from the top of the
   window, PQMD's three accents as one static rule under the field. */
.search-open {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.5rem;
  padding: 0 0.6rem 0 0.8rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: var(--slate-700);
  font: 500 var(--step--1)/1 var(--body);
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.search-open i { color: var(--orange-ink); }
.search-open:hover { border-color: var(--slate-400); box-shadow: 0 2px 10px -4px rgba(22, 38, 47, 0.3); }
.search-open:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.search-open__key {
  padding: 0.2rem 0.45rem;
  border-radius: 999px;
  background: var(--bg);
  font: 600 var(--step--2)/1 var(--label);
  letter-spacing: 0.04em;
  color: var(--muted);
}
@media (max-width: 40rem) {
  .search-open { padding: 0; width: 2.75rem; height: 2.75rem; justify-content: center; }
  .search-open__label, .search-open__key { display: none; }
}

.search {
  position: fixed;
  inset: 8vh 0 auto;
  margin: 0 auto;
  width: min(46rem, calc(100% - 2rem));
  max-width: none;
  max-height: 80vh;
  padding: 0;
  border: 0;
  border-radius: calc(var(--radius) * 3);
  background: #fff;
  color: var(--ink);
  box-shadow: 0 0 0 1px rgba(22, 38, 47, 0.08), 0 34px 90px -24px rgba(8, 16, 22, 0.6);
  overflow: hidden;
}
.search[open] { display: flex; flex-direction: column; }
.search::backdrop {
  background: rgba(14, 26, 33, 0.5);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
@media (prefers-reduced-motion: no-preference) {
  .search[open] { animation: ami-search-in 260ms var(--ease-out) both; }
  .search[open]::backdrop { animation: ami-fade-in 260ms var(--ease-out) both; }
}
@keyframes ami-search-in { from { opacity: 0; transform: translateY(-10px) scale(0.985); } }
.search__head { display: flex; align-items: center; gap: 0.75rem; padding: 0.4rem 0.5rem 0.4rem 1.1rem; flex: none; }
.search__icon { color: var(--orange-ink); font-size: 1.05rem; }
.search__q {
  flex: 1;
  min-width: 0;
  min-height: 3.25rem;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 400 var(--step-1)/1.3 var(--body);
}
.search__q:focus { outline: none; }
.search__q::placeholder { color: var(--muted); }
.search__q::-webkit-search-cancel-button { display: none; }
.search__close {
  width: 2.75rem; height: 2.75rem; flex: none;
  border: 0; border-radius: 999px; background: transparent; color: var(--muted); cursor: pointer;
}
.search__close:hover { background: var(--bg); color: var(--ink); }
.search__close:focus-visible { outline: 3px solid var(--orange); outline-offset: -3px; }
.search__stripe { display: grid; grid-template-columns: repeat(3, 1fr); height: 3px; flex: none; }
.search__stripe span:nth-child(1) { background: var(--orange); }
.search__stripe span:nth-child(2) { background: var(--lime); }
.search__stripe span:nth-child(3) { background: var(--yellow); }
.search__status {
  flex: none;
  padding: 0.7rem 1.1rem 0.3rem;
  font-size: var(--step--1);
  color: var(--muted);
}
.search__results {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: 0.2rem 0.6rem 0.6rem;
  list-style: none;
}
.search__item {
  display: grid;
  gap: 0.15rem;
  padding: 0.65rem 0.75rem 0.7rem;
  border-radius: var(--radius);
  box-shadow: inset 3px 0 0 transparent;
  cursor: pointer;
}
.search__item[aria-selected="true"] { background: var(--bg); box-shadow: inset 3px 0 0 var(--slate); }
.search__where {
  font: 600 var(--step--2)/1.3 var(--label);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--teal-ink, var(--slate-700));
}
.search__title { font-family: var(--display); font-size: var(--step-1); line-height: 1.25; color: var(--slate-900); }
.search__snip { font-size: var(--step--1); line-height: 1.5; color: var(--slate-700); }
.search__item--page .search__title { font-size: var(--step-0); font-family: var(--body); font-weight: 600; }
.search mark { padding: 0 0.1em; border-radius: 2px; background: rgba(254, 208, 3, 0.45); color: inherit; }
.search__foot {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  padding: 0.6rem 1.1rem;
  border-block-start: 1px solid var(--line-soft);
  font-size: var(--step--2);
  color: var(--muted);
}
.search__foot kbd {
  display: inline-block;
  min-width: 1.5em;
  margin-inline-end: 0.2rem;
  padding: 0.1rem 0.35rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg);
  font: 600 0.85em/1.3 var(--label);
  text-align: center;
}
@media (max-width: 40rem) {
  .search { inset: 0; width: 100%; max-width: none; max-height: none; height: 100%; border-radius: 0; }
  .search__foot { display: none; }
}
@media print { .search-open, .search { display: none !important; } }

/* ---- the Storytelling Reference Guide's pictures (3 Nov) ----
   Muhammad, 3 Nov call: "a lot of text within the same page... convert some of
   the text into an infographic". Two kinds, both from her own words and numbers:
   the four checks of "Test the explanation" as tiles on the impact grid's slate
   stage, and each fictional example's result drawn beside its paragraph. */
.guide-checks {
  container-type: inline-size;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(var(--s-3), 3vw, var(--s-4));
  border-radius: calc(var(--radius) * 3);
  background:
    radial-gradient(110% 70% at 100% 0%, rgba(255, 255, 255, 0.06), transparent 62%),
    var(--spec-bg);
}
.guide-checks::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block-start: -11rem;
  inset-inline-end: -11rem;
  width: 26rem;
  aspect-ratio: 1;
  background: var(--ami-mark-line) center / contain no-repeat;
  pointer-events: none;
}
.guide-checks__grid { display: grid; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
@container (min-width: 40rem) { .guide-checks__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.guide-checks__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.85rem;
  row-gap: 0.3rem;
  align-content: start;
  padding: var(--s-3);
  border-radius: calc(var(--radius) * 2);
  background: #fff;
  color: var(--ink);
}
.guide-checks__icon {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--panel);
  color: var(--yellow);
  font-size: 1rem;
}
.guide-checks__name { font-family: var(--display); font-size: var(--step-1); font-weight: 400; line-height: 1.2; color: var(--slate-900); }
.guide-checks__text { font-size: var(--step--1); line-height: 1.55; color: var(--slate-700); }
.js .guide-checks.reveal > * { transition-delay: 0ms; }

.guide-fig {
  --area: var(--slate);
  --area-soft: var(--line-soft);
  max-width: 34rem;
  margin: 0;
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-top: 4px solid var(--area);
  border-radius: calc(var(--radius) * 2);
  background: #fff;
}
.guide-fig--availability { --area: var(--area-availability); --area-ink: var(--orange-ink); }
.guide-fig--continuity   { --area: var(--area-continuity);   --area-ink: var(--lime-ink); }
.guide-fig--capacity     { --area: var(--area-capacity);     --area-ink: var(--yellow-ink); }
.guide-fig__title {
  margin-block-end: var(--s-2);
  font: 600 var(--step--2)/1.3 var(--label);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--area-ink, var(--muted));
}
.guide-fig__rows { display: grid; gap: 0.7rem; }
.guide-fig__row {
  display: grid;
  grid-template-columns: 3.6rem minmax(0, 1fr);
  grid-template-areas: "year draw" ". val";
  column-gap: 0.75rem;
  row-gap: 0.25rem;
  align-items: center;
}
.guide-fig__year { grid-area: year; font-size: var(--step--1); font-weight: 600; color: var(--slate-700); }
.guide-fig__row > :nth-child(2) { grid-area: draw; }
.guide-fig__val { grid-area: val; font-family: var(--label); font-size: var(--step--1); font-weight: 600; color: var(--slate-900); }
.guide-fig__months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; max-width: 22rem; }
.guide-fig__months i { aspect-ratio: 1; border-radius: 3px; background: var(--line-soft); box-shadow: inset 0 0 0 1px var(--line); }
.guide-fig__months i.is-on { background: var(--area); box-shadow: none; }
.guide-fig__bar { position: relative; display: block; height: 1.1rem; }
.guide-fig__demand, .guide-fig__got { position: absolute; inset-block: 0; inset-inline-start: 0; border-radius: 3px; }
.guide-fig__demand { width: var(--d); background: var(--line-soft); box-shadow: inset 0 0 0 1px var(--line); }
.guide-fig__got { width: var(--r); background: var(--area); }
.guide-fig__foot { margin-block-start: var(--s-2); font-size: var(--step--2); color: var(--muted); display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.guide-fig__key { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 2px; }
.guide-fig__key--got { background: var(--area); }
.guide-fig__key--demand { background: var(--line-soft); box-shadow: inset 0 0 0 1px var(--line); margin-inline-start: 0.6rem; }
@media print {
  .guide-fig, .guide-checks__item { break-inside: avoid; }
  .guide-fig, .guide-checks { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}