/* Ch 07 page layer. The course's page components are reimplemented from Ch 06's assets/page.css (the
   reference implementation, itself from Ch 05, Ch 04 and Ch 03): base, hero, page column, prose, asides
   with their breaks line, quotes, recap, sources, cast strip, disclosures (.cp-more), term cards (.cp-term
   and its payoff variant), figure plates, status words, the record and loop grammar, the manifest plate,
   the loop lens table and its NEW IN CH N tag, the widget caption line (.cp-wcap), the scrollytelling
   scaffold (.cs-*), the check card (TRY AGAIN on its own line), Jordan and Ari's exchange (.cp-dialog),
   the static Pod chip, the collapsing gated block (.cp-gate) and the two-panel figure plate (.fp, Ch 06's
   f-03) look and behave as in Ch 06.
   Control Plane treatments (design/control-plane/components/bundle.css) fitted to the kit skeleton
   (pool/components.css). Every value is a token; no raw colours.
   New in Ch 07 (plan ## Visual grammar), at the end of this file: addresses, the static Service block,
   f-01 (addresses through one Thursday), f-02 (written vs. added), f-03 (one call, static SVG), f-04's
   panel slots and f-05 (one order, from a phone to a Pod). */

/* ---------- base ---------- */
body.d-body { -webkit-font-smoothing: antialiased; }
:where(body) :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

.cp-label {
  font: 700 var(--fs-caption)/var(--lh-caption) var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.cp-blueprint {
  background-color: var(--surface);
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: var(--sp-4) var(--sp-4);
  background-position: -1px -1px;
}

/* ---------- hero ---------- */
.cp-hero { padding: var(--sp-11) var(--sp-3) var(--sp-6); border-bottom: 3px solid var(--ink); }
.cp-hero__inner { max-width: 960px; margin: 0 auto; }
.cp-hero__kicker { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); align-items: center; margin: 0 0 var(--sp-3); }
.cp-hero__idx {
  background: var(--accent); color: var(--accent-ink);
  padding: 0 var(--sp-1); border-radius: var(--radius-1);
  font: 700 var(--fs-caption)/var(--lh-caption) var(--font-mono); letter-spacing: .08em;
}
.cp-hero__title {
  margin: 0 0 var(--sp-3); max-width: 18ch;
  font: 800 var(--fs-h1)/var(--lh-h1) var(--font-sans);
  font-stretch: 112%; letter-spacing: -0.02em; color: var(--ink); text-wrap: balance;
}
.cp-hero__standfirst { margin: 0 0 var(--sp-5); max-width: var(--measure); font: italic 400 22px/32px var(--font-serif); color: var(--ink-2); }
.cp-meta { display: flex; flex-wrap: wrap; margin: 0; padding: 0; border-top: var(--stroke) solid var(--ink); }
.cp-meta > div { display: flex; flex-direction: column; gap: 2px; padding: var(--sp-1) var(--sp-3) 0 0; margin-right: var(--sp-3); }
.cp-meta dt { font: 400 var(--fs-caption)/var(--lh-caption) var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-3); }
.cp-meta dd { margin: 0; font: 700 var(--fs-caption)/var(--lh-caption) var(--font-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
  .cp-hero { padding: var(--sp-8) var(--sp-2) var(--sp-5); }
  .cp-hero__standfirst { font-size: 19px; line-height: 28px; }
}

/* ---------- page column ---------- */
.d-page { padding-top: var(--sp-4); }
.d-rail { padding-top: var(--sp-6); }
/* Sections hold the prose measure (66ch in body type); wide blocks break out symmetrically,
   bounded by the main column (container query units), so the left edge of all prose lines up. */
.d-main { container-type: inline-size; }
.d-main > * { margin-inline: auto; }
.d-main section > .d-wide {
  width: min(960px, 100cqw); max-width: none;
  margin-left: calc((100% - min(960px, 100cqw)) / 2);
}
.d-main section > .cp-check {
  width: min(720px, 100cqw); max-width: none;
  margin-left: calc((100% - min(720px, 100cqw)) / 2);
}

/* ---------- prose ---------- */
.d-main p { hanging-punctuation: first; }
.d-main h2 {
  margin: var(--sp-9) auto var(--sp-3);
  padding-top: var(--sp-2);
  border-top: var(--stroke) solid var(--ink);
  font: 700 var(--fs-h2)/var(--lh-h2) var(--font-sans);
  font-stretch: 106%; letter-spacing: -0.01em; text-wrap: balance;
}
.d-main section:first-of-type h2 { margin-top: var(--sp-4); }
.cp-sec {
  display: block; margin-bottom: var(--sp-1);
  font: 700 var(--fs-caption)/var(--lh-caption) var(--font-mono);
  letter-spacing: .08em; color: var(--accent);
}
.d-main a {
  color: var(--accent);
  text-decoration: underline; text-decoration-thickness: var(--stroke); text-underline-offset: 3px;
  transition: color var(--dur-1) var(--ease-out);
}
.d-main a:hover { color: var(--ink); }
.d-main dfn { font-style: normal; font-weight: 600; box-shadow: inset 0 -0.35em 0 var(--c1-soft); }
.d-main ul { padding-left: var(--sp-3); }
.d-main li { margin-bottom: var(--sp-1); }
.cp-aside {
  margin-top: var(--sp-4); margin-bottom: var(--sp-4);
  padding: var(--sp-2) 0 var(--sp-2) var(--sp-3);
  border-top: var(--stroke) solid var(--line); border-bottom: var(--stroke) solid var(--line);
  font: var(--fs-small)/var(--lh-small) var(--font-sans); color: var(--ink-2);
}
.cp-aside p { margin: 0 0 var(--sp-1); }
.cp-aside p:last-child { margin-bottom: 0; }
.cp-aside b { font: 700 var(--fs-caption)/var(--lh-caption) var(--font-mono); letter-spacing: .08em; color: var(--ink); margin-right: var(--sp-1); }
.cp-aside .cp-breaks b { color: var(--ink-3); }
.cp-quote {
  margin: var(--sp-3) 0;
  padding: var(--sp-1) 0 var(--sp-1) var(--sp-3);
  border-left: 3px solid var(--ink);
  font: italic 400 22px/32px var(--font-serif); color: var(--ink);
}
.cp-quote p { margin: 0; }
.cp-quote cite { display: block; margin-top: var(--sp-half); font: 400 var(--fs-caption)/var(--lh-caption) var(--font-mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.cp-recap { margin-top: var(--sp-6); padding-top: var(--sp-2); border-top: var(--stroke) solid var(--ink); }
.cp-recap ul { margin: var(--sp-1) 0 var(--sp-3); padding-left: var(--sp-3); }
.cp-recap li { margin-bottom: var(--sp-1); }
.cp-sources { margin-top: var(--sp-9); padding-top: var(--sp-2); border-top: var(--stroke) solid var(--line); font: var(--fs-small)/var(--lh-small) var(--font-sans); color: var(--ink-2); }
.cp-sources ol { margin: var(--sp-1) 0 var(--sp-2); padding-left: var(--sp-3); }
.cp-sources li { margin-bottom: var(--sp-half); }
.cp-sources p { margin: 0 0 var(--sp-1); }

/* ---------- cast strip (course convention from Ch 03, CURRICULUM §2.11) ---------- */
.cp-cast {
  margin-top: 0; margin-bottom: var(--sp-2); padding: var(--sp-2) 0;
  border-top: var(--stroke) solid var(--line); border-bottom: var(--stroke) solid var(--line);
  font: var(--fs-small)/var(--lh-small) var(--font-sans); color: var(--ink-2);
}
.d-main .cp-cast > .cp-label { margin: 0 0 var(--sp-1); }
.cp-cast dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sp-half) var(--sp-2); margin: 0; }
.cp-cast dt { font: 700 var(--fs-caption)/var(--lh-small) var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.cp-cast dd { margin: 0; }

/* ---------- disclosures: optional notes, collapsed by default (ink ▸ / ▾ markers, as Ch 02's "why" lists) ---------- */
.d-more.cp-more { margin: var(--sp-2) auto var(--sp-3); padding-left: var(--sp-2); border-left: var(--stroke) solid var(--ink); }
.cp-more > summary {
  display: flex; align-items: center; min-height: var(--tap); cursor: pointer; list-style: none;
  font: 600 var(--fs-small)/var(--lh-small) var(--font-sans); color: var(--ink);
}
.cp-more > summary::-webkit-details-marker { display: none; }
.cp-more > summary::before { content: "▸"; flex: none; margin-right: var(--sp-1); font-family: var(--font-mono); color: var(--ink); }
.cp-more[open] > summary::before { content: "▾"; }
.cp-more__body { padding-bottom: var(--sp-1); font: var(--fs-small)/var(--lh-small) var(--font-serif); color: var(--ink-2); }
.cp-more__body p, .cp-more__body ul { margin: 0 0 var(--sp-1); }
.cp-more__body p:last-child, .cp-more__body ul:last-child { margin-bottom: 0; }
.cp-more__body ul { padding-left: var(--sp-3); }
.cp-more__body li { margin-bottom: var(--sp-half); }

/* ---------- term cards (course convention from Ch 03, CURRICULUM §8 step 4; plan ## Figures) ----------
   Outlined plate, no shadow (not interactive). One accent mark: the kicker. The payoff variant
   (blueprint ground, larger term, job strip) appears at most once per chapter. Static: no animation. */
.cp-term {
  margin-top: var(--sp-6); margin-bottom: var(--sp-6);
  padding: var(--sp-3);
  background-color: var(--surface); border: var(--stroke) solid var(--ink); border-radius: var(--radius-1);
}
.cp-term > p { margin: 0; }
.cp-term__kicker { font: 700 var(--fs-caption)/var(--lh-caption) var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.cp-term .cp-term__term {
  margin: var(--sp-1) 0 var(--sp-2);
  font: 800 32px/36px var(--font-sans); font-stretch: 112%; letter-spacing: -0.02em; color: var(--ink);
  text-wrap: balance; overflow-wrap: anywhere;
}
.cp-term__sep { font-family: var(--font-mono); font-weight: 400; color: var(--ink-3); }
.cp-term .cp-term__def { margin-bottom: var(--sp-2); font: 400 var(--fs-body)/var(--lh-body) var(--font-serif); color: var(--ink); }
.cp-term__back { font: 400 var(--fs-caption)/var(--lh-caption) var(--font-mono); letter-spacing: .04em; color: var(--ink-3); }
.cp-term--payoff { padding: var(--sp-4) var(--sp-3); }
.cp-term--payoff .cp-term__term { font-size: 40px; line-height: 44px; }
.cp-term__jobs {
  padding-top: var(--sp-1); border-top: var(--stroke) solid var(--ink);
  font: 700 var(--fs-caption)/var(--lh-caption) var(--font-mono); letter-spacing: .04em; color: var(--ink);
}
@media (max-width: 640px) {
  .cp-term { padding: var(--sp-2); }
  .cp-term .cp-term__term { font-size: 28px; line-height: 32px; }
  .cp-term--payoff { padding: var(--sp-3) var(--sp-2); }
  .cp-term--payoff .cp-term__term { font-size: 32px; line-height: 36px; }
}

/* ---------- figure plate ---------- */
.cp-fig { margin: var(--sp-8) 0; }
.cp-fig__plate { border: var(--stroke) solid var(--ink); border-radius: var(--radius-1); overflow: hidden; }
.cp-fig__bar {
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0 var(--sp-2);
  padding: var(--sp-1) var(--sp-2);
  border-bottom: var(--stroke) solid var(--ink);
  background: var(--surface);
}
.cp-fig__bar .cp-label:first-child { color: var(--ink); }
.cp-fig svg { display: block; width: 100%; height: auto; }
.cp-fig figcaption {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2);
  max-width: var(--measure); margin-top: var(--sp-1);
  font: 400 var(--fs-caption)/var(--lh-caption) var(--font-sans); color: var(--ink-2);
}
.cp-fig figcaption .cp-label { color: var(--ink); }

/* ---------- status words and lamps (word + colour, never colour alone) ---------- */
.st { font: 700 var(--fs-caption)/var(--lh-caption) var(--font-mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.st--good { color: var(--good); }
.st--bad { color: var(--bad); }
.st--warn { color: var(--warn); }
.lamp { display: inline-block; width: var(--sp-1); height: var(--sp-1); margin-right: var(--sp-half); vertical-align: 1px; }
.st--good .lamp { background: var(--good); }
.st--bad .lamp { background: var(--bad); }
.st--warn .lamp { background: var(--warn); }
.cp-rec {
  min-width: 0;
  background: var(--c4-soft); border: var(--stroke) solid var(--c4); border-radius: var(--radius-1);
  color: var(--ink);
}
.cp-loop {
  display: inline-flex; align-items: center; gap: var(--sp-half);
  padding: 2px var(--sp-1); border-radius: var(--radius-3);
  background: var(--c3-soft); border: var(--stroke) solid var(--c3);
  font: 700 var(--fs-caption)/var(--lh-caption) var(--font-mono); color: var(--ink);
  white-space: nowrap;
}
.cp-loop__mark { font-weight: 700; }
.cp-loop--later { background: none; border-style: dashed; border-color: var(--ink-3); color: var(--ink-3); }
/* ---------- f-02: manifest plates (Ch 04's f-02 treatment) ----------
   One row per line: the code line (record ground) and, beside it on wide plates, its annotation;
   under 600px the annotation drops under its line, so the block never scrolls sideways. */
.mf { padding: var(--sp-3); }
.mf__code { padding: var(--sp-1) 0; }
.mf__row { display: grid; grid-template-columns: minmax(0, 1fr); padding: 0 var(--sp-2); }
.cp-fig .mf__line {
  display: block; margin: 0; white-space: pre;
  font: 400 var(--fs-caption)/var(--lh-small) var(--font-mono); color: var(--ink);
  background: none; padding: 0;
}
.mf__line .mf__k { font-weight: 700; }
.mf__line .mf__c { color: var(--ink-2); font-style: italic; }
.cp-fig .mf__ann {
  margin: 0 0 var(--sp-half); padding-left: var(--sp-2);
  font: italic 400 var(--fs-caption)/var(--lh-caption) var(--font-sans); color: var(--ink-2);
}
.cp-fig .mf__ann::before { content: "↑ "; font-style: normal; font-family: var(--font-mono); color: var(--ink-3); }
.cp-fig .mf__ann--key { font: 700 var(--fs-caption)/var(--lh-caption) var(--font-sans); font-style: normal; color: var(--accent); }
.mf__row--key .mf__line { font-weight: 700; }
@media (min-width: 600px) {
  .mf__row { grid-template-columns: minmax(0, 30ch) minmax(0, 1fr); column-gap: var(--sp-2); align-items: baseline; }
  .cp-fig .mf__ann { margin: 0; padding-left: 0; }
  .cp-fig .mf__ann::before { content: "← "; }
}
@media (max-width: 599px) { .mf { padding: var(--sp-2) var(--sp-1); } .mf__row { padding: 0 var(--sp-1); } }
/* ---------- f-06: the loop lens table (built from CH07_LOOPS in assets/page.js; Ch 04's f-04, Ch 05's f-06) ----------
   A table on the blueprint plate; under 600px each row becomes a card (the loop as its header, then
   three labelled lines). Rows for loops met later (Ch 08) are dashed and muted. */
.lens { padding: var(--sp-3); }
.lens table { width: 100%; border-collapse: collapse; background: var(--surface); border: var(--stroke) solid var(--ink); }
.lens th, .lens td { padding: var(--sp-1) var(--sp-2); text-align: left; vertical-align: top; border-bottom: var(--stroke) solid var(--line); }
.lens thead th { font: 700 var(--fs-caption)/var(--lh-caption) var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); border-bottom: var(--stroke) solid var(--ink); }
.lens tbody th { width: 1%; white-space: nowrap; font-weight: 400; }
.lens td { font: 400 var(--fs-small)/var(--lh-small) var(--font-serif); color: var(--ink); }
.lens td.lens__job { font-style: italic; }
.lens__per { display: block; margin-top: var(--sp-half); font: 400 var(--fs-caption)/var(--lh-caption) var(--font-sans); color: var(--ink-2); white-space: normal; }
.lens tr.is-later td, .lens tr.is-later .lens__per { color: var(--ink-3); }
.lens tr.is-later th, .lens tr.is-later td { border-top: var(--stroke) dashed var(--ink-4); }
.lens tfoot td { border-top: var(--stroke) solid var(--ink); border-bottom: 0; font: 400 var(--fs-caption)/var(--lh-caption) var(--font-sans); color: var(--ink-2); }
.lens td[data-label]::before { display: none; }
@media (max-width: 599px) {
  /* phone: one card per loop. Header row = the loop pill (left) and Sam's job (right); then WANTS, SEES
     and DOES with their labels inline. */
  .lens { padding: var(--sp-2) var(--sp-1); }
  .lens table, .lens tbody, .lens tfoot, .lens td { display: block; width: auto; }
  .lens table { background: none; border: 0; }
  .lens thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lens tbody tr {
    display: grid; grid-template-columns: minmax(0, 1fr) max-content; grid-template-areas: "loop job" "w w" "s s" "d d";
    margin-bottom: var(--sp-1); background: var(--surface); border: var(--stroke) solid var(--ink); border-radius: var(--radius-1);
  }
  .lens tbody tr.is-later { border-style: dashed; border-color: var(--ink-3); }
  .lens tbody th { grid-area: loop; width: auto; white-space: normal; padding: var(--sp-half) var(--sp-1); border-bottom: var(--stroke) solid var(--line); }
  /* Sam's job keeps its width (the column is max-content), so a long loop name wraps inside its pill
     instead of pushing "SAM'S JOB" against the card's edge */
  .lens tbody th .cp-loop { white-space: normal; max-width: 100%; }
  .lens tbody td:nth-of-type(1) { grid-area: w; }
  .lens tbody td:nth-of-type(2) { grid-area: s; }
  .lens tbody td:nth-of-type(3) { grid-area: d; }
  .lens tbody td.lens__job { grid-area: job; padding: var(--sp-half) var(--sp-1); border-bottom: var(--stroke) solid var(--line); text-align: right; }
  .lens tr.is-later th, .lens tr.is-later td { border-top: 0; }
  .lens td { padding: var(--sp-half) var(--sp-1); border-bottom: 0; }
  .lens tbody td:nth-of-type(3) { padding-bottom: var(--sp-1); }
  .lens td[data-label]::before {
    content: attr(data-label); display: inline; margin-right: var(--sp-1);
    font: 700 var(--fs-caption)/var(--lh-caption) var(--font-mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
  }
  .lens td.lens__job::before { display: block; margin-right: 0; white-space: nowrap; }
  .lens tfoot tr { display: block; margin-top: var(--sp-2); }
  .lens tfoot td { border-top: 0; padding: 0 var(--sp-1); }
}
/* ---------- term card additions (Ch 04's mono line under the definition) ---------- */
.cp-term__jobs + .cp-term__back { margin-top: var(--sp-1); }
.cp-term__line {
  margin-bottom: var(--sp-2) !important;
  font: 700 var(--fs-caption)/var(--lh-caption) var(--font-mono); letter-spacing: .04em; color: var(--ink-2);
}
/* ---------- comprehension checks (copied from Ch 03, itself from Ch 02) ---------- */
.cp-check {
  margin-top: var(--sp-6); margin-bottom: var(--sp-6);
  background: var(--surface);
  border: var(--stroke) solid var(--ink); border-radius: var(--radius-1);
  box-shadow: var(--shadow-1);
  padding: var(--sp-3);
}
@media (max-width: 599px) { .cp-check { padding: var(--sp-2); } }
@media (min-width: 560px) { .cp-check { padding: var(--sp-4); } }
.cp-check__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-1) var(--sp-2); margin-bottom: var(--sp-2); }
.cp-chip {
  display: inline-block; padding: var(--sp-half) var(--sp-1);
  background: var(--accent); color: var(--accent-ink); border-radius: var(--radius-1);
  font: 700 var(--fs-caption)/var(--lh-caption) var(--font-mono); letter-spacing: .1em;
}
.cp-chip--explain { background: var(--ink); color: var(--bg); }
.cp-chip--apply { background: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 var(--stroke) var(--ink); }
.cp-check__q { margin: 0 0 var(--sp-3) !important; font: 600 20px/28px var(--font-serif); color: var(--ink); }
.cp-check__q code, .cp-option code { font: 700 0.9em var(--font-mono); background: var(--surface-2); padding: 0.1em 0.3em; border-radius: var(--radius-1); }
.cp-chores { margin: 0 0 var(--sp-3); padding-left: var(--sp-4); font: 400 var(--fs-small)/var(--lh-small) var(--font-serif); color: var(--ink); }
.d-main .cp-chores li { margin-bottom: var(--sp-half); padding-left: var(--sp-half); }
.cp-chores li::marker { font: 700 var(--fs-caption)/1 var(--font-mono); color: var(--ink-3); }
.cp-options { display: grid; gap: var(--sp-1); margin: 0; padding: 0; list-style: none; }
.d-main .cp-options { padding: 0; }
.d-main .cp-options li { margin: 0; }
.cp-option {
  display: grid; grid-template-columns: var(--sp-4) minmax(0, 1fr) auto; align-items: center; gap: var(--sp-2);
  width: 100%; min-height: calc(var(--tap) + var(--sp-1));
  padding: var(--sp-1) var(--sp-2);
  background: var(--surface); color: var(--ink);
  border: var(--stroke) solid var(--ink); border-radius: var(--radius-1);
  font: 500 var(--fs-small)/var(--lh-small) var(--font-sans); text-align: left;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
@media (min-width: 560px) { .cp-option { font-size: 17px; line-height: 24px; } }
@media (max-width: 599px) { .cp-option { gap: var(--sp-1); padding-inline: var(--sp-1); } }
.cp-option__key {
  display: grid; place-items: center; width: var(--sp-4); height: var(--sp-4);
  border: var(--stroke) solid var(--ink); border-radius: var(--radius-1);
  font: 700 var(--fs-caption)/1 var(--font-mono);
}
.cp-option__tag { font: 700 var(--fs-caption)/1 var(--font-mono); letter-spacing: .08em; }
.cp-option:hover:not(:disabled) { background: var(--surface-2); transform: translate(-2px, -2px); box-shadow: 2px 2px 0 0 var(--ink); }
.cp-option:active:not(:disabled) { transform: none; box-shadow: none; }
.cp-option:disabled { cursor: default; color: var(--ink-3); border-color: var(--ink-4); }
.cp-option:disabled .cp-option__key { border-color: var(--ink-4); }
.cp-option.is-right { color: var(--ink); border: 3px solid var(--good); padding-inline: calc(var(--sp-2) - 1.5px); }
.cp-option.is-right .cp-option__key { background: var(--good); border-color: var(--good); color: var(--surface); }
.cp-option.is-right .cp-option__tag { color: var(--good); }
.cp-option.is-wrong { color: var(--ink); border: 3px solid var(--bad); padding-inline: calc(var(--sp-2) - 1.5px); }
.cp-option.is-wrong .cp-option__key { background: var(--bad); border-color: var(--bad); color: var(--surface); }
.cp-option.is-wrong .cp-option__tag { color: var(--bad); }
@media (max-width: 599px) { .cp-option.is-right, .cp-option.is-wrong { padding-inline: calc(var(--sp-1) - 1.5px); } }
.cp-feedback {
  margin-top: var(--sp-2); padding-top: var(--sp-2);
  border-top: var(--stroke) dashed var(--ink-4);
  font: var(--fs-small)/var(--lh-small) var(--font-serif); color: var(--ink-2);
  animation: cp-in var(--dur-2) var(--ease-out);
}
.cp-feedback[hidden] { display: none; }
.cp-feedback p { margin: 0 0 var(--sp-1); }
.cp-feedback p:last-child { margin-bottom: 0; }
.cp-feedback > p > b, .cp-why li > b { font: 700 var(--fs-caption)/var(--lh-caption) var(--font-mono); letter-spacing: .08em; margin-right: var(--sp-1); color: var(--ink); }
.cp-feedback.is-right .cp-feedback__lead { color: var(--good); }
.cp-feedback.is-wrong .cp-feedback__lead { color: var(--bad); }
/* on its own line under the feedback sentence, so its 44px target doesn't open a gap inside the line */
.cp-retry {
  display: block; margin: var(--sp-half) 0 0; min-height: var(--tap); min-width: var(--tap); padding: 0;
  background: none; border: 0; color: var(--accent); cursor: pointer;
  font: 700 var(--fs-caption)/1 var(--font-mono); letter-spacing: .08em; text-decoration: underline; text-underline-offset: 3px;
}
.cp-why { margin-top: var(--sp-2); }
.cp-why summary {
  display: flex; align-items: center; min-height: var(--tap); cursor: pointer;
  font: 700 var(--fs-caption)/var(--lh-caption) var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
}
.cp-why summary { list-style: none; }
.cp-why summary::-webkit-details-marker { display: none; }
.cp-why summary::before { content: "▸"; margin-right: var(--sp-1); color: var(--ink); }
.cp-why[open] > summary::before { content: "▾"; }
.cp-why ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sp-1); }
.d-main .cp-why li { margin: 0; }
/* think-then-reveal (k-07), as Ch 01 */
.cp-reveal {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  min-height: calc(var(--tap) + var(--sp-1)); padding: 0 var(--sp-3);
  background: var(--surface); color: var(--ink);
  border: var(--stroke) solid var(--ink); border-radius: var(--radius-1);
  font: 700 var(--fs-caption)/1 var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.cp-reveal:hover:not(:disabled) { background: var(--surface-2); transform: translate(-2px, -2px); box-shadow: 2px 2px 0 0 var(--ink); }
.cp-reveal:disabled { cursor: default; color: var(--ink-3); border-color: var(--ink-4); }
.cp-think { margin: 0 0 var(--sp-2) !important; font: italic var(--fs-small)/var(--lh-small) var(--font-serif); color: var(--ink-2); }
.cp-answer { margin: var(--sp-1) 0; padding-left: var(--sp-3); }
.d-main .cp-answer li { margin-bottom: var(--sp-half); }
.cp-answer li > b:first-child { font: 700 15px/var(--lh-small) var(--font-mono); letter-spacing: 0; margin-right: 0; color: var(--ink); }
.cp-feedback > .cp-more { margin: var(--sp-2) 0 0; }
@keyframes cp-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .cp-feedback, .cs-step.is-unlocked > * { animation: none; }
  .cp-option, .cp-reveal, .cs-step { transition: none; }
}
/* ---------- prose additions ---------- */
/* the questions a symptom raises: a short list of quoted questions (§03) */
.cp-qs { margin: 0 0 var(--sp-3); padding-left: var(--sp-3); }
.d-main .cp-qs li { margin-bottom: var(--sp-1); font-style: italic; }
/* the line under a widget: what it shows and where it simplifies (page-owned, outside the mount) */
.cp-wcap {
  display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2);
  margin-top: calc(-1 * var(--sp-5)) !important; margin-bottom: var(--sp-6) !important;
  font: 400 var(--fs-caption)/var(--lh-caption) var(--font-sans); color: var(--ink-2);
}
.cp-wcap .cp-label { color: var(--ink); }
/* ---------- f-06: the NEW IN CH 7 tag ---------- */
.lens__new {
  display: inline-block; margin: 0 0 var(--sp-half); padding: 0 var(--sp-half);
  border: var(--stroke) solid var(--accent); border-radius: var(--radius-1);
  font: 700 11px/16px var(--font-mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--accent);
  white-space: nowrap;
}
.lens td .lens__new { display: table; }
.lens td .lens__new.lens__new--inline { display: inline-block; margin: 0 var(--sp-half) 0 0; vertical-align: 1px; }
.lens tbody th .lens__new { display: block; width: max-content; margin-top: var(--sp-half); }
@media (max-width: 599px) {
  .lens td .lens__new { display: inline-block; margin: 0 var(--sp-1) 0 0; vertical-align: 1px; }
}

/* ---------- §04 scrollytelling scaffold: w-services-scrolly, lane S (course convention, CURRICULUM §8 step 7) ----------
   Ch 04's .cs-* scaffold (as Ch 05 and Ch 06 used it), unchanged except for the reserved heights. The page
   owns this layout; the widget (widgets/w-services-scrolly/, data over pool/cluster/) renders into the
   [data-canvas], [data-step-text] and [data-step-snap] slots and runs activation and gates. Mount contract:
   see the comment above the mount in index.html §04.
   Reserved canvas heights (plan w-services-scrolly size:, about 500px on desktop with the Service block in
   the record panel and two node columns; about 440px at 360px): 520px from 900px wide; min(456px, 50vh
   + 16px) under 900px. The widget's index.css may raise these to its measured heights. */
.cs { margin-top: var(--sp-5); margin-bottom: var(--sp-8); }
.cs-lane__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
.cs-canvas {
  position: sticky; top: 0; z-index: 2; align-self: start;
  min-height: min(456px, calc(50vh + 16px)); padding: var(--sp-1) 0;
  background: var(--bg);
}
.cs-steps { position: relative; z-index: 1; display: grid; gap: var(--sp-3); margin: 0; padding: 0; list-style: none; }
.d-main .cs-steps > li { margin: 0; }
.cs-step {
  position: relative; min-height: 40vh;
  padding: var(--sp-3);
  background: var(--surface); border: var(--stroke) solid var(--line); border-radius: var(--radius-1);
  transition: border-color var(--dur-2) var(--ease-out);
}
.cs-step.is-active { border-color: var(--ink); }
.cs-step__text { font: 400 var(--fs-body)/var(--lh-body) var(--font-serif); color: var(--ink); }
.cs-step__text p { margin: 0 0 var(--sp-2); }
.cs-step__text p:last-child { margin-bottom: 0; }
.cs-step__snap { display: none; }
.cs-step > .cp-check { margin: var(--sp-3) 0 0; padding: var(--sp-3) var(--sp-2); }
.cs-step__lock { display: none; }
.cs-step.is-locked { border-style: dashed; border-color: var(--ink-4); }
.cs-step.is-locked > :not(.cs-step__lock) { visibility: hidden; }
.cs-step.is-locked > .cs-step__lock {
  display: block; position: absolute; top: var(--sp-3); left: var(--sp-3); right: var(--sp-3); margin: 0;
  font: 700 var(--fs-caption)/var(--lh-caption) var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
.cs-step.is-unlocked > * { animation: cp-in var(--dur-2) var(--ease-out); }
@media (max-width: 599px) {
  .cs-step { padding: var(--sp-2); }
  .cs-step.is-locked > .cs-step__lock { top: var(--sp-2); left: var(--sp-2); right: var(--sp-2); }
  .cs-step > .cp-check { padding: var(--sp-2) var(--sp-1); }
}
@media (min-width: 900px) {
  .cs-lane__grid { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); column-gap: var(--sp-4); align-items: start; }
  .cs-canvas { top: var(--sp-4); z-index: auto; min-height: 520px; padding: 0; background: none; }
}
@media (max-height: 559px) {
  .cs-lane__grid { grid-template-columns: minmax(0, 1fr); }
  .cs-canvas { display: none; }
  .cs-step { min-height: 0; }
  .cs-step__snap { display: block; margin-bottom: var(--sp-2); }
}
.cs-noscript { padding: var(--sp-2); border: var(--stroke) dashed var(--ink-4); font: var(--fs-small)/var(--lh-small) var(--font-sans); color: var(--ink-2); }
@media (prefers-reduced-motion: reduce) { .cs-step.is-unlocked > * { animation: none; } .cs-step { transition: none; } }

/* ======================================================================================================
   Carried from Ch 06: the exchange, the static Pod chip, gated blocks, the two-panel figure plate
   ====================================================================================================== */
/* ---------- §01: Jordan and Ari, a short exchange (.cp-quote with a speaker per line) ---------- */
.cp-dialog { margin: var(--sp-3) 0; padding: var(--sp-1) 0 var(--sp-1) var(--sp-3); border-left: 3px solid var(--ink); }
.cp-dialog p {
  display: grid; grid-template-columns: 8ch minmax(0, 1fr); column-gap: var(--sp-2); align-items: baseline;
  margin: 0 0 var(--sp-1) !important;
  font: italic 400 22px/32px var(--font-serif); color: var(--ink);
}
.cp-dialog p:last-child { margin-bottom: 0 !important; }
.cp-dialog b { font: 400 var(--fs-caption)/var(--lh-caption) var(--font-mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 599px) {
  .cp-dialog p { grid-template-columns: minmax(0, 1fr); font-size: 19px; line-height: 28px; }
  .cp-dialog b { display: block; }
}
/* ---------- a static Pod chip (the canvas's Pod grammar: a version-coloured chip inside an inset ink ring) ---------- */
.pod { display: inline-flex; padding: 2px; background: var(--surface); border: var(--stroke) solid var(--ink); border-radius: var(--radius-1); }
.pod__chip {
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sp-1);
  padding: 2px var(--sp-1);
  background: var(--v-soft, var(--c1-soft)); border: var(--stroke) solid var(--v, var(--c1)); border-radius: 1px;
  font: 700 var(--fs-caption)/var(--lh-caption) var(--font-mono); color: var(--ink);
}
/* ---------- gated blocks (k-02 → f-01 and the rest of §02; k-04 → f-03 and the rest of §05; k-05 → f-04 and
   the rest of §06; k-06 → f-05 and the rest of §07) ----------
   While locked, the block collapses to its dashed mono lock plate (its content is display: none, so no
   blank height is reserved and nothing after the check can be read before the commit). It opens on the
   page's 'didactician:check-commit' for its check, below the card the reader just answered, with the
   cp-in fade. Never re-locks. Without JS nothing is locked. (The lane's own locked steps keep the Ch 4–5
   lane convention.) */
.cp-gate { position: relative; }
.d-main section > .cp-gate > .d-wide {
  width: min(960px, 100cqw); max-width: none;
  margin-left: calc((100% - min(960px, 100cqw)) / 2);
}
.cp-gate__lock { display: none; }
.cp-gate.is-locked > :not(.cp-gate__lock) { display: none; }
.cp-gate.is-locked > .cp-gate__lock {
  display: block; margin: var(--sp-3) 0;
  padding: var(--sp-3) var(--sp-2);
  border: var(--stroke) dashed var(--ink-4); border-radius: var(--radius-1);
  font: 700 var(--fs-caption)/var(--lh-caption) var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
  text-align: center;
}
.cp-gate.is-unlocked > * { animation: cp-in var(--dur-2) var(--ease-out); }
@media (prefers-reduced-motion: reduce) { .cp-gate.is-unlocked > * { animation: none; } }

/* ---------- f-04: Tuesday, 12:40, two moments (Ch 06's two-panel plate) ----------
   Two snapshots drawn by the pooled renderCluster (pool/cluster/) from the lane's data file, side by side
   from 900px with matching heads, stacked under 900px (the restarting moment first). Each drawing slot
   reserves its height so the figure doesn't jump when it is drawn. */
.fp { padding: var(--sp-3); }
.fp__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
@media (min-width: 900px) { .fp__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); } }
.fp__panel { min-width: 0; }
.cp-fig .fp__head { margin: 0 0 var(--sp-1); font: 700 var(--fs-caption)/var(--lh-caption) var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.fp__draw { min-height: 300px; }
@media (min-width: 900px) { .fp__draw { min-height: 330px; } }
@media (max-width: 599px) { .fp { padding: var(--sp-2) var(--sp-1); } }
/* a version string inside an uppercase label keeps its own case: "v63", never "V63" */
.nocaps { text-transform: none; }

/* ======================================================================================================
   New in Ch 07 (plan ## Figures, ## Visual grammar): things different in kind look different.
   - a Pod's address: plain mono ink-2 (.addr); the Service's address: mono bold ink (.addr--svc);
   - the Service as written (header, c4 on c4-soft) vs. the list a loop keeps (surface-2, dashed c3 rule);
   - f-01's hand-copied list (a c4 band: written by a person) with struck entries;
   - f-03's forwarding rules on each node (surface-2 band with a kube-proxy pill), no Service on the path;
   - f-05's INTERNET band, the provider's load balancer on the CLUSTER frame's edge, the gateway's rules.
   ====================================================================================================== */

.addr { font: 400 var(--fs-caption)/var(--lh-caption) var(--font-mono); color: var(--ink-2); white-space: nowrap; }
.addr--svc { font-weight: 700; color: var(--ink); }

/* ---------- the Service block, static copy (pool-04's look: f-02, f-05) ---------- */
.svc { min-width: 0; border-radius: var(--radius-1); overflow: hidden; border: var(--stroke) solid var(--c4); }
.svc__head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sp-1);
  padding: var(--sp-half) var(--sp-1);
  background: var(--c4-soft); color: var(--ink);
  font: 700 var(--fs-caption)/var(--lh-caption) var(--font-mono);
}
.svc__kind { letter-spacing: .08em; text-transform: uppercase; }
.svc__sep { color: var(--ink-3); font-weight: 400; }
.svc__list {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--sp-1);
  padding: var(--sp-half) var(--sp-1);
  background: var(--surface-2); border-top: var(--stroke) solid var(--c4);
  box-shadow: inset 0 0 0 0 transparent;
  border-left: var(--stroke) dashed var(--c3);
  font: 400 var(--fs-caption)/var(--lh-caption) var(--font-mono); color: var(--ink-2);
}
.svc__lab { font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.svc__entry { display: inline-flex; align-items: baseline; gap: var(--sp-half); white-space: nowrap; }
.svc__entry::before { content: ""; display: inline-block; width: 8px; height: 8px; background: var(--c1); }

/* ---------- §02 · f-01: catalog's addresses, one Thursday ----------
   Four time blocks of three address chips (outlined ink, no fill, no version colour), and under them the
   hand-copied list (c4 on c4-soft) with its state in each block. Desktop: four columns, the band's cells
   under their blocks. Under 600px: a vertical list, each block followed by its band cell. */
.ad { padding: var(--sp-3); }
.ad__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
.ad__block { min-width: 0; padding: var(--sp-1); background: var(--surface); border: var(--stroke) solid var(--ink); border-radius: var(--radius-1); }
.cp-fig .ad__time { margin: 0 0 var(--sp-1); font: 700 var(--fs-caption)/var(--lh-caption) var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); font-variant-numeric: tabular-nums; }
.ad__chips { display: grid; gap: var(--sp-half); margin: 0; padding: 0; list-style: none; }
.d-main .ad__chips li { margin: 0; }
.ad__chip {
  display: flex; justify-content: space-between; gap: var(--sp-1);
  padding: 2px var(--sp-1); border: var(--stroke) solid var(--ink); border-radius: var(--radius-1);
  font: 700 var(--fs-caption)/var(--lh-caption) var(--font-mono); color: var(--ink);
}
.ad__chip small { font: 400 var(--fs-caption)/var(--lh-caption) var(--font-mono); color: var(--ink-3); }
.ad__band-head { display: none; }
.ad__cell {
  min-width: 0; margin-bottom: var(--sp-2); padding: var(--sp-half) var(--sp-1);
  background: var(--c4-soft); border: var(--stroke) solid var(--c4); border-radius: var(--radius-1);
  font: 400 var(--fs-caption)/var(--lh-caption) var(--font-mono); color: var(--ink);
}
.cp-fig .ad__cell p { margin: 0; }
.ad__celllab { display: block; font: 700 11px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.ad__copied { display: flex; flex-wrap: wrap; gap: 0 var(--sp-1); }
.ad__cell.is-dead .ad__copied span { text-decoration: line-through; text-decoration-thickness: var(--stroke); color: var(--ink-3); }
.ad__cell .st { display: block; margin-top: 2px; white-space: normal; }
.ad__cell--before { background: none; border-style: dashed; border-color: var(--ink-4); color: var(--ink-3); }
.ad__block.is-hl, .ad__cell.is-hl { outline: 3px solid var(--ink); outline-offset: 2px; }
@media (min-width: 600px) {
  .ad__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto auto; column-gap: var(--sp-2); row-gap: 0; }
  .ad__block { grid-row: 1; grid-column: var(--col); }
  .ad__band-head {
    display: block; grid-row: 2; grid-column: 1 / -1; margin: var(--sp-2) 0 var(--sp-half);
    padding: var(--sp-half) var(--sp-1); background: var(--c4-soft); border: var(--stroke) solid var(--c4); border-radius: var(--radius-1);
    font: 700 var(--fs-caption)/var(--lh-caption) var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink);
  }
  .ad__cell { grid-row: 3; grid-column: var(--col); margin-bottom: 0; }
  .ad__celllab { display: none; }
}
@media (max-width: 599px) { .ad { padding: var(--sp-2) var(--sp-1); } }

/* ---------- §03 · f-02: the orders Service, written vs. added ----------
   Left: what Ari wrote (Ch 04's manifest plate), and the Pod label from the Deployment. Right: the three
   things Kubernetes adds, each a different look: the address (ink outline, mono bold), the DNS name (a
   lookup line on a dotted ink-3 frame), the ready list (surface-2, dashed c3 rule: kept by a loop). The
   right column drops under the left below 600px. */
.sv2 { padding: var(--sp-3); }
.sv2__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); align-items: start; }
@media (min-width: 600px) { .sv2__grid { grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); } }
.cp-fig .sv2__head { margin: 0 0 var(--sp-1); font: 700 var(--fs-caption)/var(--lh-caption) var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.sv2__col { min-width: 0; }
.sv2 .mf__row { grid-template-columns: minmax(0, 1fr); }
.sv2 .cp-fig .mf__ann, .sv2 .mf__ann { margin: 0 0 var(--sp-half); padding-left: var(--sp-2); }
.cp-fig .sv2 .mf__ann::before { content: "↑ "; }
@media (min-width: 900px) {
  .sv2 .mf__row { grid-template-columns: minmax(0, 18ch) minmax(0, 1fr); column-gap: var(--sp-2); align-items: baseline; }
  .cp-fig .sv2 .mf__ann { margin: 0; padding-left: 0; }
  .cp-fig .sv2 .mf__ann::before { content: "← "; }
}
.sv2 .mf__code + .sv2__head { margin-top: var(--sp-2); }
.sv2__adds { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.d-main .sv2__adds li { margin: 0; }
.sv2__lab { display: block; margin-bottom: 2px; font: 700 11px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.sv2__val { display: block; padding: var(--sp-half) var(--sp-1); border-radius: var(--radius-1); font: 400 var(--fs-caption)/var(--lh-caption) var(--font-mono); color: var(--ink); overflow-wrap: anywhere; }
.sv2__val--addr { background: var(--surface); border: var(--stroke) solid var(--ink); font-weight: 700; font-size: 15px; }
.sv2__val--dns { background: var(--surface); border: var(--stroke) dotted var(--ink-3); }
.sv2__val--list { background: var(--surface-2); border-left: var(--stroke) dashed var(--c3); color: var(--ink-2); border-radius: 0; }
.sv2__val--list::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: var(--sp-half); background: var(--c1); }
.cp-fig .sv2__sub { margin: 2px 0 0; font: italic 400 var(--fs-caption)/var(--lh-caption) var(--font-sans); color: var(--ink-2); }
@media (max-width: 599px) { .sv2 { padding: var(--sp-2) var(--sp-1); } }

/* ---------- §05 · f-03: one call, storefront to orders (static SVG, two layouts) ----------
   A wide drawing from 760px of figure width (two node frames side by side) and a narrow one below it
   (a vertical path), chosen by container width so the 13px labels never shrink below about 11px. */
.f3c { padding: var(--sp-3); container-type: inline-size; }
.cp-fig .f3c .f3c__svg { display: block; width: 100%; height: auto; margin: 0 auto; }
.cp-fig .f3c .f3c__svg--narrow { max-width: 400px; }
.cp-fig .f3c .f3c__svg--wide { display: none; }
@container (min-width: 760px) {
  .cp-fig .f3c .f3c__svg--wide { display: block; }
  .cp-fig .f3c .f3c__svg--narrow { display: none; }
}
@media (max-width: 599px) { .f3c { padding: var(--sp-2) var(--sp-1); } }
.f3c svg text { dominant-baseline: alphabetic; }
.f3c .t-lab { font: 700 11px var(--font-mono); letter-spacing: .08em; fill: var(--ink-3); }
.f3c .t-lab--ink { fill: var(--ink); }
.f3c .t-lab--mid { fill: var(--ink-2); }
.f3c .t-mono { font: 700 13px var(--font-mono); fill: var(--ink); }
.f3c .t-addr { font: 400 13px var(--font-mono); fill: var(--ink-2); }
.f3c .t-svc { font: 700 13px var(--font-mono); fill: var(--ink); }
.f3c .t-path { font: 400 13px var(--font-sans); fill: var(--ink); }
.f3c .t-path tspan.m { font: 700 12px var(--font-mono); }
.f3c .t-ready { font: 700 11px var(--font-mono); letter-spacing: .08em; fill: var(--good); }
.f3c .t-pill { font: 700 12px var(--font-mono); fill: var(--ink); }
.f3c .t-dim { font: italic 400 13px var(--font-sans); fill: var(--ink-3); }

/* ---------- §06 · f-04: panel heads (the panels are .fp, carried from Ch 06) ---------- */
.fp__draw[data-cluster-figure]:not([data-drawn]) { border: var(--stroke) dashed var(--ink-4); border-radius: var(--radius-1); }

/* ---------- §07 · f-05: one order, from a phone to a Pod ----------
   A vertical path, each hop a different look and labelled with who runs it: the phone in an INTERNET band
   (dashed, blueprint ground); the provider's load balancer as a solid ink box straddling the 3px CLUSTER
   frame's edge; the gateway's rules in the manifest treatment with its controller pill; the Service block;
   the Pod. From 760px the internal call branches to the right of the storefront Pod; below, it drops under it. */
.rt { padding: var(--sp-3); container-type: inline-size; }
.rt__inet { padding: var(--sp-1) var(--sp-2) var(--sp-2); border: var(--stroke) dashed var(--ink-3); border-radius: var(--radius-1); }
.cp-fig .rt__zone { margin: 0 0 var(--sp-1); font: 700 var(--fs-caption)/var(--lh-caption) var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.rt__box { width: fit-content; max-width: 100%; min-width: 0; }
.rt__phone { padding: var(--sp-half) var(--sp-1); background: var(--surface); border: var(--stroke) solid var(--ink-3); border-radius: var(--radius-2); font: 700 var(--fs-caption)/var(--lh-caption) var(--font-mono); color: var(--ink); }
.rt__phone .svc__kind { color: var(--ink-3); }
.rt__arr { position: relative; height: var(--sp-5); margin-left: var(--sp-4); }
.rt__arr::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 11px; border-left: var(--stroke) solid var(--ink); }
.rt__arr::after {
  content: ""; position: absolute; left: -5px; bottom: 4px; width: 0; height: 0;
  border-left: 5.75px solid transparent; border-right: 5.75px solid transparent; border-top: 8px solid var(--ink);
}
.rt__arr span {
  position: absolute; left: var(--sp-2); top: 50%; transform: translateY(-50%); white-space: nowrap;
  font: 400 var(--fs-caption)/var(--lh-caption) var(--font-sans); color: var(--ink-2);
}
.rt__cluster { position: relative; margin-top: var(--sp-3); padding: 0 var(--sp-2) var(--sp-2); border: 3px solid var(--ink); border-radius: var(--radius-1); }
.cp-fig .rt__clab { position: absolute; right: var(--sp-1); top: var(--sp-half); margin: 0; font: 700 var(--fs-caption)/var(--lh-caption) var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.rt__lb {
  position: relative; margin-top: calc(-1 * var(--sp-3) - 2px);
  padding: var(--sp-half) var(--sp-1); background: var(--surface); border: 3px solid var(--ink); border-radius: var(--radius-1);
  font: 700 var(--fs-caption)/var(--lh-caption) var(--font-mono); color: var(--ink);
}
.rt__name { display: block; letter-spacing: .08em; text-transform: uppercase; }
.rt__tag {
  display: inline-block; margin: 2px var(--sp-1) 0 0; padding: 0 var(--sp-half);
  border: var(--stroke) solid currentColor; border-radius: var(--radius-1);
  font: 700 11px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase;
}
.rt__tag--mute { color: var(--ink-2); }
.rt__gw { padding: var(--sp-half) var(--sp-1) var(--sp-1); background: var(--surface); border: var(--stroke) solid var(--ink); border-radius: var(--radius-1); font: 700 var(--fs-caption)/var(--lh-caption) var(--font-mono); color: var(--ink); }
.rt__rules { margin: var(--sp-half) 0 var(--sp-1); padding: var(--sp-half) var(--sp-1); background: var(--c4-soft); border: var(--stroke) solid var(--c4); border-radius: var(--radius-1); }
.cp-fig .rt__rule { margin: 0; font: 400 var(--fs-caption)/var(--lh-caption) var(--font-mono); color: var(--ink); white-space: nowrap; }
.cp-fig .rt__rule.is-hl { display: inline-block; font-weight: 700; outline: 3px solid var(--ink); outline-offset: 1px; border-radius: var(--radius-1); }
.cp-fig .rt__rule--more { margin-top: var(--sp-half); padding: 0 var(--sp-half); border: var(--stroke) dashed var(--ink-4); color: var(--ink-3); width: fit-content; }
.rt__ctl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-half) var(--sp-1); }
.rt__ctl .rt__who { font: 700 11px/16px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.rt__pod .pod__chip .st { margin-left: var(--sp-half); }
/* A Service block is never a hop (review P-02; m-10). The arrows run gateway → Pod and Pod → Pod; each Service
   block sits beside its arrow on a short dashed c3 leader (c3: kept by a loop), with a line saying what the
   caller looks up there. No arrow enters or leaves a Service block. */
.rt__hop { display: flex; align-items: stretch; margin-left: var(--sp-4); }
.rt__hop > .rt__arr { flex: none; width: 0; height: auto; min-height: var(--sp-5); margin-left: 0; }
.rt__look {
  display: grid; grid-template-columns: var(--sp-3) minmax(0, max-content); align-items: center;
  min-width: 0; padding: var(--sp-1) 0 var(--sp-2);
}
.rt__leader { grid-column: 1; grid-row: 2; align-self: center; border-top: var(--stroke) dashed var(--c3); }
.cp-fig .rt__looklab { grid-column: 2; grid-row: 1; margin: 0 0 2px; font: 400 var(--fs-caption)/var(--lh-caption) var(--font-sans); color: var(--ink-2); }
.rt__look > .svc { grid-column: 2; grid-row: 2; }

/* the internal call. Narrow (default): it drops under the storefront Pod, a vertical arrow with the label,
   "calls orders" and the orders Service beside it. */
.rt__bottom {
  display: grid; grid-template-columns: var(--sp-4) 0 minmax(0, 1fr);
  grid-template-areas: "from from from" ". call blab" ". call clab" ". call look" "to to to";
}
.rt__stem { display: none; }
.rt__from { grid-area: from; }
.rt__to { grid-area: to; }
.cp-fig .rt__blab { grid-area: blab; margin: 0; padding: var(--sp-1) 0 0 var(--sp-2); font: 700 var(--fs-caption)/var(--lh-caption) var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.cp-fig .rt__calllab { grid-area: clab; margin: 0; padding: var(--sp-half) 0 0 var(--sp-2); font: 400 var(--fs-caption)/var(--lh-caption) var(--font-sans); color: var(--ink-2); }
.rt__look--branch { grid-area: look; }
.rt__call { grid-area: call; position: relative; }
.rt__call::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 11px; border-left: var(--stroke) solid var(--ink); }
.rt__call::after {
  content: ""; position: absolute; left: -5px; bottom: 4px; width: 0; height: 0;
  border-left: 5.75px solid transparent; border-right: 5.75px solid transparent; border-top: 8px solid var(--ink);
}
@container (min-width: 760px) {
  /* wide: the call runs to the right of the storefront Pod; the label heads the branch; the orders Service
     hangs under the arrow on a vertical leader. The last hop's arrow continues through .rt__stem (row 1) so
     its head still lands on the storefront Pod. */
  .rt__bottom {
    grid-template-columns: max-content 168px max-content minmax(0, 1fr);
    grid-template-areas: "stem blab blab ." "from call to ." ". look look .";
    align-items: center;
  }
  .rt__hop--join > .rt__arr::after { display: none; }
  .rt__hop--join > .rt__arr::before { bottom: 0; }
  .rt__hop--join .rt__look { padding-bottom: var(--sp-1); }
  .rt__stem { display: block; grid-area: stem; align-self: stretch; position: relative; margin-left: var(--sp-4); }
  .rt__stem::before { content: ""; position: absolute; left: 0; top: 0; bottom: 11px; border-left: var(--stroke) solid var(--ink); }
  .rt__stem::after {
    content: ""; position: absolute; left: -5px; bottom: 4px; width: 0; height: 0;
    border-left: 5.75px solid transparent; border-right: 5.75px solid transparent; border-top: 8px solid var(--ink);
  }
  .cp-fig .rt__blab { align-self: end; padding: 0 0 var(--sp-2) var(--sp-1); }
  .rt__call { align-self: stretch; }
  .rt__call::before { left: 4px; right: 11px; top: 50%; bottom: auto; border-left: 0; border-top: var(--stroke) solid var(--ink); }
  .rt__call::after {
    left: auto; right: 4px; bottom: auto; top: calc(50% - 5.25px);
    border-top: 5.75px solid transparent; border-bottom: 5.75px solid transparent; border-left: 8px solid var(--ink); border-right: 0;
  }
  .cp-fig .rt__calllab { grid-area: call; align-self: start; padding: 0; margin: -10px 0 0 var(--sp-2); }
  .rt__look--branch {
    grid-template-columns: var(--sp-6) minmax(0, max-content); align-items: stretch; padding: 0 0 var(--sp-1);
  }
  .rt__look--branch .rt__leader {
    grid-column: 1; grid-row: 1; justify-self: end; align-self: stretch;
    margin: calc(-1 * var(--sp-2)) 0 0; border-top: 0; border-left: var(--stroke) dashed var(--c3);
  }
  .rt__look--branch .rt__looklab { padding: var(--sp-1) 0 var(--sp-half) var(--sp-1); }
  .rt__look--branch > .svc { grid-column: 1 / -1; grid-row: 2; justify-self: start; margin-left: var(--sp-3); }
}
@media (max-width: 599px) { .rt { padding: var(--sp-2) var(--sp-1); } .rt__cluster { padding: 0 var(--sp-1) var(--sp-1); } }
/* lists inside figures carry no prose indent */
.d-main .ad__chips, .d-main .sv2__adds { padding: 0; }