/* after-send.css -- the After Send write-up's own rules: the demo's rail
   and controls around the window, and the figures drawn in code (the flow
   and the two wireframes; the decisions are decisions.css, The Shortlist's
   ledger). One page loads this file, lab/after-send.html, after style.css,
   decisions.css, and wren.css. Until the second pass of 2026-11-06 it also
   drew a six-lane service map, the states, a design-to-build check table,
   and three research columns; those figures left with that pass, which cut
   the page to what a reader scans.

   WHY CODE AND NOT PICTURES. An architecture diagram, an annotated
   wireframe, and a service map are mostly labels, and a label in a bitmap
   is a label the checks cannot read: resting.mjs cannot measure its
   contrast, typescale.mjs cannot see its size, and a screen reader gets
   alt text in place of the words. So every figure here is HTML in the
   scale's sizes on the palette's grounds, as The Shortlist's map is
   (inspiration-to-aisle.css), and every word of them is the page's own.
   The wireframes' gray bars are the one exception: they are the drawing
   of a screen that has no words, and they are aria-hidden; the notes
   beside them are the text.

   EVERY SIZE IS A STEP, every space a --space-*, every color a token. A
   figure's title is the serif at 400, as a figure's name is everywhere
   here (TYPOGRAPHY.md): 20px under 640, 24 from it. Its kicker is the
   service map's (case-study/service-map.css, .svc-kicker). Moment and
   lane names are the sans at 14, semibold, sentence case.

   RATIOS, from COLOR.md section 2: charcoal on white 15.33, on warm
   14.02, on tea 12.90; muted-gray on white 6.47, on warm 5.91, on tea
   5.44; accent-text on white 5.82, on warm 5.32, on tea 4.90;
   caution-text on white 6.45, on warm 5.90, on tea 5.43. The figure card
   is --figure-card: warm on a white chapter, white on a tea one, with
   --rule-card for its edge (1.48 on white). */

/* ---------- The hero ---------- */
.as-facts dd a { color: var(--color-accent-text); text-decoration: underline; text-underline-offset: 3px; }
.as-facts dd a:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; border-radius: 2px; }
@media (hover: hover) and (pointer: fine) { .as-facts dd a:hover { color: var(--color-accent-hover); } }
/* The buttons and the one-line note share a row; read-aloud.js puts Listen
   straight after the first, and the note stays last. */
.as-hero-act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md) var(--space-lg); }
.as-hero-act .build-hero-act { margin: 0; }
.case-hero .as-standing {
  order: 1;
  flex: 1 1 18rem;
  margin: 0;
  max-width: var(--measure);
  font-size: var(--text-sm);
  line-height: var(--leading-ui);
  color: var(--color-muted-gray);
}

/* ---------- The payment flow, before the prototype ----------
   One rail, and the handoff is the line itself: the supplier's steps stand
   above it on tea-light, the buyer's below it on the card, so the steps read
   across in order and the eye still sees two companies taking turns. The
   discs are the architecture figure's, filled for the two events the page is
   about, processing and matching. The bar under the buyer's side starts at
   step 2 and runs to the end, which is the whole argument: one word covering
   three steps.

   Stacked under 64rem, with the rail down the left and each step on its
   company's ground. From 64rem the steps are four columns on one subgrid: 1
   the supplier's side, 2 the rail, 3 the buyer's side. Each step spans all
   three, with its text in its own company's row. The call is a child of step
   2 because that is when it happens; from 64rem it stands in the empty cell
   above step 2, and its tick lands on the rail just short of step 3. */
.as-how { padding: var(--space-block) 0 0; }
.as-how .as-how-figure { --as-how-disc: 40px; margin: 0; width: auto; }
.as-how-steps { list-style: none; margin: 0; padding: 0; }
.as-how-step {
  position: relative;
  display: grid;
  grid-template-columns: var(--as-how-disc) minmax(0, 1fr);
  column-gap: var(--space-md);
  margin-inline: calc(-1 * var(--as-pad-x));
  padding: var(--space-lg) var(--as-pad-x);
}
.as-how-step::before { content: none; }
.as-how-step--supplier { background: var(--color-tea-light); }
/* The rail, stacked: through this step, from its disc to the next one's. */
.as-how-step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: calc(var(--as-pad-x) + var(--as-how-disc) / 2 - 1px);
  top: var(--space-lg);
  bottom: calc(-1 * var(--space-lg));
  width: 2px;
  background: var(--color-accent-text);
  z-index: 1;
}
.as-how-disc {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: var(--as-how-disc);
  height: var(--as-how-disc);
  border: 2px solid var(--color-accent-text);
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-accent-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.as-how-step--event .as-how-disc { background: var(--color-accent-text); color: var(--color-white); }
.as-how-text { min-width: 0; }
.as-how-step p { margin: 0; font-family: var(--font-sans); text-wrap: pretty; }
.as-how-step .as-how-who {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-ui);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-muted-gray);
}
.as-how-step .as-how-name {
  margin-top: var(--space-2xs);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  color: var(--color-charcoal);
}
.as-how-step .as-how-what {
  margin-top: var(--space-2xs);
  font-size: var(--text-sm);
  line-height: var(--leading-ui);
  color: var(--color-charcoal);
}
.as-how-step .as-how-call {
  grid-column: 2;
  margin-top: var(--space-sm);
  font-size: var(--text-sm);
  line-height: var(--leading-ui);
  color: var(--color-accent-text);
}
.as-how-call strong { font-weight: var(--weight-semibold); }
/* A reference breaks at its hyphen otherwise, and it is one word. */
.as-how-ref { white-space: nowrap; }
.case-section .as-how-paid,
.as-how-paid {
  margin: var(--space-md) 0 0;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-charcoal);
  border-radius: var(--radius-xl);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-ui);
  color: var(--ink-on-dark);
}
@media (min-width: 64rem) {
  .as-how-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto var(--as-how-disc) auto;
  }
  /* The supplier's ground, from the card's edges to the rail's center. */
  .as-how-steps::before {
    content: '';
    grid-area: 1 / 1 / 3 / -1;
    margin-inline: calc(-1 * var(--as-pad-x));
    margin-bottom: calc(var(--as-how-disc) / 2);
    background: var(--color-tea-light);
  }
  .as-how-step {
    grid-row: 1 / -1;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: subgrid;
    column-gap: 0;
    margin: 0;
    padding: 0;
    background: none;
  }
  .as-how-step:nth-child(1) { grid-column: 1; }
  .as-how-step:nth-child(2) { grid-column: 2; }
  .as-how-step:nth-child(3) { grid-column: 3; }
  .as-how-step:nth-child(4) { grid-column: 4; }
  .as-how-disc { grid-row: 2; grid-column: 1; }
  .as-how-text { padding-right: var(--space-xl); }
  .as-how-step--supplier .as-how-text { grid-row: 1; padding-block: var(--space-xl) var(--space-md); }
  .as-how-step--buyer .as-how-text { grid-row: 3; padding-block: var(--space-md) var(--space-sm); }
  /* The rail, across: this disc to the next. */
  .as-how-step:not(:last-child)::before {
    position: relative;
    left: auto;
    top: auto;
    bottom: auto;
    width: auto;
    height: 2px;
    grid-row: 2;
    grid-column: 1;
    align-self: center;
  }
  .as-how-step .as-how-call {
    position: relative;
    grid-row: 1;
    grid-column: 1;
    align-self: end;
    margin: 0 var(--space-xl) 0 0;
    padding: var(--space-xl) var(--space-md) var(--space-md) 0;
    text-align: right;
  }
  .as-how-call strong { display: block; }
  /* The tick, from under the note down to the rail. */
  .as-how-call::after {
    content: '';
    position: absolute;
    right: 0;
    top: var(--space-xl);
    bottom: calc(-1 * var(--as-how-disc) / 2);
    width: 2px;
    background: var(--color-accent-text);
  }
  .case-section .as-how-paid,
  .as-how-paid { margin: var(--space-sm) 0 0 25%; border-radius: var(--radius-pill); }
}

/* ---------- The demo, around the window ----------
   The section stands the same distance from the hero above it as from the
   next chapter below it: --space-block on top here, and none at the foot,
   because that chapter's own top padding is --space-block. The window
   takes the container. The rail and the controls are the demo's
   own and sit outside the device chrome, so what is inside the bezel is
   the product and nothing else. Since the third pass (2026-11-06)
   everything over the window starts at the left: the kicker, then one
   panel holding the demo's chrome. The panel's top row is three cells with
   a rule between them, Scenario, Role, and Start over; its second row, on
   tea-light, is the steps. The second pass had
   the controls pushed to the right of the kicker and the steps loose under
   them, so nothing said where one control ended and the next began. The
   controls stay text, not chips: a name in the muted gray, the options in
   the sans at 14, the pressed one in charcoal over a sage rule (The
   Shortlist's .ai-progress), and Start over quiet in sage with its arrow.
   Under 48rem the cells stack, each under a rule, because a vertical rule
   has nothing to divide once the row wraps. The hint is not in the panel:
   it is the guide, below, and stays in view while the window scrolls. */
.as-demo { padding: var(--space-block) 0 0; scroll-margin-top: var(--nav-height); }
.as-demo p.try-live { margin: 0 0 var(--space-sm); }
/* Phosphor's cursor is a filled outline; the shared rule draws a stroke. */
.as-demo p.try-live svg { fill: currentColor; stroke: none; }
.as-panel {
  background: var(--figure-card);
  border: 1px solid var(--rule-card);
  border-radius: var(--radius-xl);
  /* The steps' ground takes the panel's corners, and its one hairline. */
  overflow: clip;
}
.as-controls { display: flex; flex-direction: column; }
.as-cell {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--space-lg);
  padding: var(--space-xs) var(--space-md);
}
.as-cell + .as-cell { border-top: 1px solid var(--color-rule); }
.as-control-name { flex: 0 0 100%; padding-top: var(--space-2xs); }
@media (min-width: 48rem) {
  .as-controls { flex-direction: row; }
  .as-cell { flex-wrap: nowrap; padding: var(--space-xs) var(--space-xl); }
  .as-cell + .as-cell { border-top: 0; border-left: 1px solid var(--color-rule); }
  .as-control-name { flex: none; padding-top: 0; }
}
.as-control-name {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-ui);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-muted-gray);
}
.as-toggle,
.as-reset {
  position: relative;
  min-height: 2.25rem;
  white-space: nowrap;
  /* The inline padding is room for the walkthrough's mark and the focus ring
     around the word; the margin takes it back, so the words keep their places. */
  padding: var(--space-2xs) var(--space-xs);
  margin-inline: calc(-1 * var(--space-xs));
  background: transparent;
  border: 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-ui);
  color: var(--color-muted-gray);
  cursor: pointer;
  transition: color var(--motion-state) var(--ease), background-color var(--motion-state) var(--ease);
}
/* The pressed option's rule, the tab mark the Shortlist's progress uses. */
.as-toggle::after {
  content: "";
  position: absolute;
  left: var(--space-xs); right: var(--space-xs); bottom: 0;
  height: 2px;
  background: transparent;
  transition: background-color var(--motion-state) var(--ease);
}
.as-toggle[aria-pressed="true"] { color: var(--color-charcoal); }
.as-toggle[aria-pressed="true"]::after { background: var(--color-accent-text); }
.as-reset { display: inline-flex; align-items: center; gap: var(--space-2xs); color: var(--color-accent-text); }
@media (pointer: coarse) { .as-toggle, .as-reset { min-height: 2.75rem; } }
.as-reset svg { flex: none; width: var(--text-base); height: 1lh; }
.as-toggle:focus-visible,
.as-reset:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; border-radius: 2px; }
@media (hover: hover) and (pointer: fine) {
  .as-toggle[aria-pressed="false"]:hover { color: var(--color-charcoal); }
  .as-reset:hover { color: var(--color-accent-hover); }
}

/* The steps: five numbered names in a row, the one the reader is on in
   full ink. */
.as-walk {
  padding: var(--space-md);
  background: var(--color-tea-light);
}
@media (min-width: 48rem) { .as-walk { padding: var(--space-lg) var(--space-xl); } }
.as-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-xl);
}
.as-steps li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-ui);
  color: var(--color-muted-gray);
}
/* The steps sit on tea-light, so the panel's two jobs read apart and it stays
   one thing: the controls set the demo up, the steps say where you are in
   it. The step is one of hue as much as of value, warm to a green tint. They
   were on charcoal from #1063 until 2026-11-06, which split the panel into
   two objects. On tea-light: muted-gray 5.44, accent-text 4.90, charcoal
   12.90; warm on the sage disc 5.32. The number
   is a ring at the control boundary; a step walked rings in sage with a
   check; the one the reader is on fills in sage with warm on it. */
.as-step-n {
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--color-muted-gray);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--color-muted-gray);
  transition: background-color var(--motion-state) var(--ease), color var(--motion-state) var(--ease);
}
/* A step already walked: a check in place of its number. */
.as-step-n svg { width: 0.875rem; height: 0.875rem; }
.as-steps li[data-done] .as-step-n { border-color: var(--color-accent-text); color: var(--color-accent-text); }
.as-steps li[aria-current="step"] { color: var(--color-charcoal); }
.as-steps li[aria-current="step"] .as-step-n { background: var(--color-accent-text); border-color: var(--color-accent-text); color: var(--color-warm); }
/* The guide: what to do now, and always the button that does it, which
   presses the real control (marked in the window with data-target). Sticky under the nav, because on a phone the panel's controls
   sit a whole screen above the button that sends a reader back to them. It
   holds a button's height with or without one, so at a laptop's width the
   window keeps its place from step to step (the reason the hint runs wide,
   since #1057). White, because the demo's ground is, and the window passes
   under it. */
.as-panel { margin-bottom: var(--space-2xs); }
.as-guide {
  position: sticky;
  top: var(--nav-height);
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-lg);
  min-height: calc(2.75rem + 2 * var(--space-xs));
  padding-block: var(--space-xs);
  margin-bottom: var(--space-2xs);
  background: var(--color-white);
}
.case-section .as-hint,
.as-hint {
  margin: 0;
  flex: 1 1 20rem;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-ui);
  color: var(--color-charcoal);
}
@media (min-width: 48rem) {
  .case-section .as-hint,
  .as-hint { font-size: var(--text-base); }
}
.as-guide-next:empty { display: none; }
.as-next { gap: var(--space-xs); white-space: nowrap; }
.case-section .as-demo-note,
.as-demo-note {
  margin: var(--space-md) 0 0;
  max-width: var(--measure);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-ui);
  color: var(--color-muted-gray);
}
.as-demo-note a { color: var(--color-accent-text); text-decoration: underline; text-underline-offset: 3px; }
.as-demo-note a:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; border-radius: 2px; }
@media (hover: hover) and (pointer: fine) { .as-demo-note a:hover { color: var(--color-accent-hover); } }

/* ---------- A figure, and its caption ----------
   The Shortlist's figure card: --figure-card, --rule-card, the site's
   card shadow and the xl corner, taking the reading column's full width
   from 64rem (style.css, --col-full). */
.as-figure {
  --as-pad-y: var(--space-lg);
  --as-pad-x: var(--space-md);
  margin: var(--space-2xl) 0 0;
  overflow: clip;
  padding: var(--as-pad-y) var(--as-pad-x);
  background: var(--figure-card);
  border: 1px solid var(--rule-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}
@media (min-width: 640px) { .as-figure { --as-pad-y: var(--space-xl); --as-pad-x: var(--space-xl); padding: var(--space-xl); } }
@media (min-width: 64rem) {
  .as-figure {
    width: var(--col-full);
    max-width: none;
    --as-pad-y: var(--space-2xl);
    --as-pad-x: var(--space-3xl);
    padding: var(--space-2xl) var(--space-3xl);
  }
}
.as-figure > figcaption { margin: 0 0 var(--space-lg); max-width: var(--measure); }
.as-figure > figcaption .as-kicker,
.case-section .as-figure > figcaption .as-kicker {
  margin: 0 0 var(--space-xs);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: var(--leading-ui);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-accent-text);
}
.as-figure > figcaption .as-title,
.case-section .as-figure > figcaption .as-title {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-heading);
  color: var(--color-charcoal);
}
@media (min-width: 640px) { .as-figure > figcaption .as-title, .case-section .as-figure > figcaption .as-title { font-size: var(--text-2xl); } }
.as-figure > figcaption .as-standing-note {
  display: block;
  margin-top: var(--space-xs);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-ui);
  color: var(--color-muted-gray);
}

/* ---------- The flow ----------
   One figure, not four cards: a rail through numbered stops, with the same
   rows under each stop, so the eye can read a screen down or a row across.
   The rail is the claim. The reference is named once over it rather than
   boxed on every screen, and the two events sit on the rail at the stops
   where they happen, in the filled disc. Where a screen can fail belongs to
   that screen, so it is the last row of its stop.

   Stacked under 64rem, with the rail running down the left. From 64rem the
   stops are four columns on one subgrid, which is what holds each row level
   however the words wrap: 1 rail, 2 who, 3 name, 4 what, 5 the fail label
   and its hairline, 6 the fail text. */
.as-flow-figure { --as-stop-disc: 40px; --as-stop-gap: var(--space-2xl); }
.case-section .as-flow-thread,
.as-flow-thread {
  margin: 0 0 var(--space-lg);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-ui);
  color: var(--color-charcoal);
}
.as-carry {
  font-family: var(--font-mono);
  font-size: inherit;
  color: var(--color-accent-text);
}
.as-flow {
  list-style: none;
  margin: 0;
  padding: 0;
}
.as-stop {
  position: relative;
  padding: 0 0 var(--space-2xl) calc(var(--as-stop-disc) + var(--space-md));
}
.as-stop:last-child { padding-bottom: 0; }
/* The rail, stacked: from under this disc to the next. */
.as-stop:not(:last-child)::before {
  content: '';
  position: absolute;
  left: calc(var(--as-stop-disc) / 2 - 1px);
  top: var(--as-stop-disc);
  bottom: 0;
  width: 2px;
  background: var(--color-accent-text);
}
.as-stop-rail { display: contents; }
/* An empty disc for a screen, the filled one for a screen where an event
   happens. White on accent-text is 4.51:1, as on the decisions' discs. */
.as-stop-num {
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: var(--as-stop-disc);
  height: var(--as-stop-disc);
  border: 2px solid var(--color-accent-text);
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-accent-text);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
}
.as-stop--event .as-stop-num {
  background: var(--color-accent-text);
  color: var(--color-white);
}
.as-stop p { margin: 0; font-family: var(--font-sans); text-wrap: pretty; }
/* Stacked, the first line beside a disc centres on it. Padding, because a
   margin here collapses through the stop and opens a gap in the rail. */
@media (max-width: 63.99rem) {
  .as-stop .as-stop-event,
  .as-stop:not(.as-stop--event) .as-stop-who { padding-top: calc((var(--as-stop-disc) - 1lh) / 2); }
}
.as-stop .as-stop-event {
  margin-bottom: var(--space-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-ui);
  color: var(--color-accent-text);
}
.as-stop .as-stop-who {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-ui);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-muted-gray);
}
.as-stop .as-stop-name {
  margin-top: var(--space-2xs);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-heading);
  color: var(--color-charcoal);
}
.as-stop .as-stop-what {
  margin-top: var(--space-sm);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-charcoal);
}
.as-stop .as-stop-fail-label {
  margin-top: var(--space-lg);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-ui);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-accent-text);
}
.as-stop .as-stop-fail {
  margin-top: var(--space-2xs);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-muted-gray);
}
@media (min-width: 64rem) {
  .as-flow-figure > figcaption { max-width: none; margin-bottom: var(--space-2xl); }
  .as-flow-figure > figcaption .as-standing-note { max-width: var(--measure); }
  .as-flow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(6, auto);
    column-gap: var(--as-stop-gap);
  }
  .as-stop,
  .as-stop:last-child {
    display: grid;
    grid-row: 1 / span 6;
    grid-template-rows: subgrid;
    padding: 0;
  }
  .as-stop:not(:last-child)::before { content: none; }
  /* The rail, across: a line from each disc, past the gap, to the next. */
  .as-stop-rail {
    grid-row: 1;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    min-height: var(--as-stop-disc);
  }
  .as-stop:not(:last-child) .as-stop-rail::after {
    content: '';
    flex: 1 1 0;
    min-width: var(--space-md);
    height: 2px;
    margin-right: calc(-1 * var(--as-stop-gap));
    background: var(--color-accent-text);
  }
  .as-stop-num { position: static; flex: none; }
  .as-stop .as-stop-event { margin: 0; flex: 0 1 auto; }
  /* grid-column on every row: in a one-column subgrid, two items on a row
     with no column named would push the second into a column of its own. */
  .as-stop > * { grid-column: 1; }
  .as-stop .as-stop-who { grid-row: 2; margin-top: var(--space-lg); }
  .as-stop .as-stop-name { grid-row: 3; }
  .as-stop .as-stop-what { grid-row: 4; }
  /* One hairline across the four, bridging the gaps, at the top of row 5. */
  .as-stop::after {
    content: '';
    grid-column: 1;
    grid-row: 5;
    align-self: start;
    height: 1px;
    margin-top: var(--space-xl);
    margin-right: calc(-1 * var(--as-stop-gap));
    background: var(--rule-hairline);
  }
  .as-stop:last-child::after { margin-right: 0; }
  .as-stop .as-stop-fail-label {
    grid-row: 5;
    margin-top: calc(var(--space-xl) + var(--space-lg));
  }
  /* Across the row one label says it for all four. The other three stay in
     the page for a screen reader, which reads each stop on its own. */
  .as-stop:not(:first-child) .as-stop-fail-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .as-stop .as-stop-fail { grid-row: 6; margin-top: var(--space-xs); }
}

/* ---------- The two records ----------
   Side by side from 64rem: the same payment on the same afternoon, in real
   words, then the specialist's two questions asked of each. Until the
   review of 2026-11-06 these were wordless wireframes with numbered notes,
   which told the reader the difference; this lets them read it. */
.as-wires { display: grid; gap: var(--space-xl); }
@media (min-width: 64rem) {
  .as-wires { grid-template-columns: repeat(2, minmax(0, 1fr)); width: var(--col-full); max-width: none; }
  .as-wires .as-figure { width: auto; margin-top: var(--space-2xl); }
}
.as-wire .as-wire-screen {
  display: grid;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--color-white);
  border: 1px solid var(--rule-card);
  border-radius: 12px;
}
.as-wire-bar {
  display: flex;
  align-items: center;
  min-height: 2rem;
  padding: 0 var(--space-sm);
  border-bottom: 1px solid var(--rule-strong);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-muted-gray);
}
.as-wire-block {
  display: grid;
  gap: var(--space-2xs);
  padding: var(--space-sm);
  border: 1px solid var(--rule-card);
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-ui);
  color: var(--color-charcoal);
}
.as-wire-block--next { background: var(--color-tea-light); }
.as-wire-who { font-weight: var(--weight-semibold); }
.as-wire-label {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-ui);
  color: var(--color-muted-gray);
}
.as-wire-events { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xs); }
.as-wire-events li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--space-xs); }
.as-wire-events time { color: var(--color-muted-gray); font-variant-numeric: tabular-nums; }
.as-wire-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr)); gap: var(--space-xs); }
.as-wire-row--facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.as-wire-cell {
  display: grid;
  align-content: start;
  gap: var(--space-2xs);
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--rule-card);
  border-radius: 8px;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-ui);
  color: var(--color-charcoal);
}
.as-wire-cell--fact { background: var(--color-warm); font-weight: var(--weight-semibold); }
.as-wire-cell--fact .as-wire-label { font-weight: var(--weight-semibold); }

/* The specialist's three questions, asked of each record in the same words,
   so the pair reads across: one column makes the reader go and look, the
   other says. */
.as-answers { margin: var(--space-lg) 0 0; display: grid; gap: var(--space-sm); }
.as-answers dt {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-ui);
  color: var(--color-muted-gray);
}
.as-answers dd {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-ui);
  color: var(--color-charcoal);
}

/* ---------- Two columns in a chapter, since 2026-11-06 ----------
   The chapters' text keeps the measure, and from 64rem what it describes takes
   the column beside it, inside the frame's full width. */
.as-split { display: grid; gap: var(--space-2xl); }
.as-split > figure { margin: 0; }
.as-split > .writing-measure > :last-child { margin-bottom: 0; }
@media (min-width: 64rem) {
  .as-split {
    width: var(--col-full);
    max-width: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-4xl);
    align-items: start;
  }
  .as-split > .writing-measure { width: auto; max-width: var(--measure); margin: 0; }
}

/* "Paid", coming apart. The line is one pen, 1.25 like the Agent Review rail's,
   and it draws once when armed below the fold; nothing else waits on it. */
.as-paid { display: grid; gap: var(--space-md); }
.as-paid-who { display: grid; justify-items: center; gap: var(--space-xs); align-self: center; }
/* The painted specialist, the account manager's hand on Agent Review. Its paper
   is near white, so it multiplies into the chapter's white. */
.as-paid-art { display: block; width: 100%; max-width: 14rem; height: auto; mix-blend-mode: multiply; }
.case-section .as-paid-word {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--text-4xl);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--color-charcoal);
}
.as-paid-lines { display: none; }
.as-paid-lines path { fill: none; stroke: var(--color-accent-text); stroke-width: 1.25; vector-effect: non-scaling-stroke; }
/* A reveal rather than a dash: the drawing stretches to its row, and a dash
   pattern on a stretched path breaks into pieces. */
.as-paid.is-armed .as-paid-lines { clip-path: inset(0 100% 0 0); }
.as-paid.is-drawn .as-paid-lines { animation: as-reveal var(--motion-draw) var(--ease) forwards; }
@keyframes as-reveal { to { clip-path: inset(0); } }
@media (prefers-reduced-motion: reduce) {
  .as-paid.is-armed .as-paid-lines { clip-path: none; animation: none; }
}
.as-paid-facts { display: grid; grid-auto-rows: 1fr; gap: var(--space-md); margin: 0; padding: 0; list-style: none; }
.as-paid-facts li {
  display: grid;
  grid-template-columns: 1lh minmax(0, 1fr);
  align-items: center;
  column-gap: var(--space-sm);
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-charcoal);
}
.as-paid-facts li::before { content: none; }
.as-paid-facts strong { font-weight: var(--weight-semibold); }
.as-paid-mark { width: 1lh; height: 1lh; color: var(--color-accent-text); }
@media (min-width: 64rem) {
  .as-paid { grid-template-columns: minmax(0, 2fr) var(--space-block) minmax(0, 4fr); column-gap: 0; align-items: stretch; }
  .as-paid-lines { display: block; width: 100%; height: 100%; }
  .as-paid-facts { padding-left: var(--space-sm); }
}

/* The two records' answers wait for a press, live only, in a slot that holds
   their height, so nothing moves when they arrive. Still or without script they
   are simply there. */
.as-answers-slot { display: grid; margin-top: var(--space-lg); }
.as-answers-slot > * { grid-area: 1 / 1; }
.as-answers-slot .as-answers { margin: 0; }
.as-show { display: none; justify-self: start; align-self: start; }
.as-live .as-show { display: inline-flex; }
.as-live .as-answers-slot .as-answers { visibility: hidden; }
.as-live .as-answers-slot[data-shown] .as-answers { visibility: visible; }
.as-live .as-answers-slot[data-shown] .as-show { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .as-live .as-answers-slot[data-shown] .as-answers { animation: as-in var(--motion-enter) var(--ease-enter) both; }
  @keyframes as-in { from { opacity: 0; translate: 0 var(--motion-rise); } }
}

.as-why { margin-top: var(--space-2xl); }
.as-test {
  padding: var(--space-lg) var(--space-md);
  background: var(--figure-card);
  border: 1px solid var(--rule-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
}
@media (min-width: 640px) { .as-test { padding: var(--space-xl); } }
.as-test-people { display: grid; gap: var(--space-md); margin: 0; }
.as-test-people > div { display: grid; gap: var(--space-2xs); align-content: start; }
@media (min-width: 40rem) { .as-test-people { grid-template-columns: repeat(3, minmax(0, 1fr)); } .as-test-ends { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-md); } }
.as-test-people dt { font-family: var(--font-serif); font-size: var(--text-4xl); line-height: var(--leading-tight); color: var(--color-charcoal); }
.as-test-people dd { margin: 0; font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-ui); color: var(--color-charcoal); }
.as-test figcaption {
  margin: var(--space-lg) 0 var(--space-sm);
  padding-top: var(--space-md);
  border-top: 1px solid var(--rule-hairline);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-ui);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--color-accent-text);
}
.as-test-ends { display: grid; gap: var(--space-sm); margin: 0; padding: 0; list-style: none; }
.as-test-ends li { display: grid; gap: var(--space-2xs); margin: 0; padding: 0; font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-ui); color: var(--color-muted-gray); }
.as-test-ends li::before { content: none; }
.as-test-ends strong { font-weight: var(--weight-semibold); color: var(--color-charcoal); }

/* ---------- The sources ---------- */
.as-sources {
  margin: var(--space-xl) 0 0;
  max-width: var(--measure);
  display: grid;
  gap: var(--space-lg);
}
@media (min-width: 64rem) {
  .as-sources { width: var(--col-full); max-width: none; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-2xl); }
}
.as-sources > div { padding-top: var(--space-lg); border-top: 1px solid var(--rule-hairline); }
.as-sources dt {
  margin: 0 0 var(--space-xs);
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  color: var(--color-charcoal);
}
.as-sources dd a { color: var(--color-charcoal); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--color-accent-text); }
.as-sources dd a:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; border-radius: 2px; }
@media (hover: hover) and (pointer: fine) { .as-sources dd a:hover { color: var(--color-accent-text); } }
.as-sources dd { margin: 0; }
.case-section .as-sources dd p { margin: 0; font-size: var(--text-base); line-height: var(--leading-body); color: var(--color-charcoal); }
.case-section .as-sources dd p + p { margin-top: var(--space-xs); }
/* The question is what the source was for, so it is the entry's emphasis. */
.case-section .as-sources .as-source-q {
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  line-height: var(--leading-tight);
  color: var(--color-charcoal);
}
.case-section .as-sources dd p + .as-source-q { margin-top: var(--space-md); }
.case-section .as-assume { margin: 0; max-width: var(--measure); font-size: var(--text-base); line-height: var(--leading-body); color: var(--color-muted-gray); }
@media (min-width: 64rem) { .as-sources-head { align-items: end; } }

/* The close's last line, beside the rest. A pull between two rules, the
   articles' .writing-pull on the dark band: at --text-4xl with no edge it sat
   level with the h2 across from it and read as a second heading. */
.case-section .as-pull {
  margin: 0;
  padding: var(--space-lg) 0;
  border-top: 1px solid var(--rule-on-dark);
  border-bottom: 1px solid var(--rule-on-dark);
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  color: var(--ink-on-dark);
  text-wrap: balance;
}
@media (min-width: 64rem) { .as-close { align-items: center; } }

/* THE HIGHLIGHTS, since 2026-11-06 (Adam: highlight the keywords and phrases
   so the page's gist comes through on a scan). The site's <mark> is tea-light,
   which is an essay's one or two lines on white: on this page it is nearly
   gone on warm and is the ground itself in the tea chapter, and here the marks
   are the reading path, so they have to show on all five grounds. A half-tint
   of the dark band's sage does; charcoal on it clears 10:1. A hex rather than
   a color-mix(), because the browser hands a mix back as color(srgb ...) and
   resting.mjs reads that wrong: 1.36:1 for a pair that measures 10. Everything
   else about the mark, its padding and how it wraps, is style.css's. On the
   charcoal band a comma or period goes inside the mark: the bleed would cover
   it in light ink. */
main { --as-mark: #c9dbc5; }
main mark { background: var(--as-mark); }