/* Figures drawn from data by scripts/figkit. Each fragment in src/generated/figures/ is one .fig element, which the
   content generator (inlineFigures) sets inside the figure's <figure>, above its caption. Every page loads this file
   after paper.css, whose tokens give every colour here, so a figure follows Paper and Night.
   - Words are --ink, --ink2 or --muted, each at 4.5:1 or more on its ground. --accent is for shapes (rules, arrows)
     only. On the two category tints only --ink and --ink2 reach 4.5:1 in Paper.
   - No figure text is under 11px (layout-check measures it at 360px wide), and none hyphenates. A line may break where
     the text has a hyphen of its own.
   - A figure too wide for the column scrolls inside its frame, never the page.
   reader.css loads after this file and styles .chapter-body's tables, headings, lists and paragraphs. The rules below
   that meet those name the figure twice (.fig-grid .x), to outweigh them. */

.fig {
  container: fig / inline-size;
  max-width: 100%;
  margin: 0;
  overflow-x: auto;
  overflow-y: hidden;
  color: var(--ink);
  font: 400 14px/1.4 var(--font-sans);
  /* "L0" and "4Q" read as written, in a serif whose default figures are old-style too */
  font-variant-numeric: lining-nums;
  text-align: left;
  hyphens: manual;
  -webkit-hyphens: manual;
  overflow-wrap: normal;
}

/* a drawing scales to the frame; its viewBox keeps its shape */
.fig > svg {
  display: block;
  width: 100%;
  height: auto;
}

.fig a {
  color: var(--ink);
  text-decoration-color: var(--accent);
  text-underline-offset: 0.18em;
}

/* words for a screen reader only (a grid cell's category, which its fill shows): clipped to nothing, not display:
   none, so it is still read */
.fig .fig-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ── The grid (fig-grid): a table on a frame 600px wide or more, one card per state below that ───────────────
   The layout not shown is display: none, so a screen reader never reads both. The cards carry data-fig-alt, which
   marks them for figkit's word test only. */

.fig-grid .fig-grid-cards { display: none; }

@container fig (width < 600px) {
  .fig-grid .fig-grid-table { display: none; }
  .fig-grid .fig-grid-cards { display: block; }
}

.fig-grid .fig-grid-table {
  width: 100%;
  margin: 0;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 5px;
  font-size: 13px;
  line-height: 1.3;
}

.fig-grid .fig-grid-table :is(th, td) {
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  vertical-align: top;
}

/* the corner: both axes' names, each with its arrow */
.fig-grid .fig-grid-table .fig-grid-axis {
  width: 96px;
  padding: 0 6px 9px 0;
  vertical-align: bottom;
  font: 600 11px/1.5 var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.fig-grid .fig-grid-axis-phases::before {
  content: "\A";
  white-space: pre;
}

/* an arrow is its width and height attributes' size: it has no viewBox, so global.css's height: auto keeps it */
.fig-grid-arrow {
  display: inline-block;
  color: var(--accent);
  vertical-align: middle;
}

.fig-grid .fig-grid-axis .fig-grid-arrow { margin-left: 4px; }

/* the phases across the top, on an accent rule that ends in the next phase's arrow */
.fig-grid .fig-grid-table th[scope="col"] {
  padding: 4px 2px 6px;
  border-bottom: 2px solid var(--accent);
  vertical-align: bottom;
  font: 600 13px/1.25 var(--font-sans);
  color: var(--ink);
}

.fig-grid .fig-grid-table th[scope="col"] .fig-grid-arrow {
  display: block;
  margin: 2px 0 -2px auto;
}

.fig-grid .fig-grid-n {
  margin-right: 3px;
  font-weight: 700;
}

.fig-grid .fig-grid-note {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}

/* the states down the side */
.fig-grid .fig-grid-table th[scope="row"] {
  padding: 8px 8px 8px 0;
  border-right: 2px solid var(--ink);
  font: 600 13px/1.25 var(--font-sans);
  color: var(--ink);
}

.fig-grid .fig-grid-state {
  display: block;
  margin-bottom: 2px;
  font-size: 12px;
  font-weight: 400;
  color: var(--muted);
}

/* a cell: its text, its observable and its instrument tags, on its category's tint (the fragment's inline style) */
.fig-grid .fig-grid-table .fig-grid-cell {
  padding: 8px 9px 9px;
  border-radius: 4px;
}

.fig-grid .fig-grid-text {
  font: 400 14px/1.3 var(--serif);
  color: var(--ink);
}

.fig-grid .fig-grid-obs {
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--ink2);
}

.fig-grid .fig-grid-obs b {
  font-weight: 600;
  color: var(--ink);
}

.fig-grid .fig-grid-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 7px;
}

.fig-grid .fig-grid-tag {
  padding: 3px 6px;
  border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
  border-radius: 9px;
  background: var(--bg);
  font: 600 11px/1.1 var(--font-sans);
  letter-spacing: 0.02em;
  color: var(--ink);
  white-space: nowrap;
}

/* the cards: a state, then its three phases in order */
.fig-grid .fig-grid-card {
  margin: 0 0 12px;
  padding: 10px 10px 4px;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
}

.fig-grid .fig-grid-card h5 {
  margin: 0 0 8px;
  font: 600 15px/1.25 var(--font-sans);
  letter-spacing: 0;
  color: var(--ink);
}

.fig-grid .fig-grid-phases {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fig-grid .fig-grid-item {
  margin: 0 0 6px;
  padding: 8px 9px 9px;
  border-radius: 4px;
}

.fig-grid .fig-grid-phase {
  margin-bottom: 3px;
  font: 600 12px/1.25 var(--font-sans);
  letter-spacing: 0.02em;
  color: var(--ink2);
}

/* on a tint, the phase's note is --ink2 too: --muted is under 4.5:1 there in Paper */
.fig-grid .fig-grid-phase .fig-grid-note {
  display: inline;
  font-size: inherit;
  color: inherit;
}

/* the key, the instruments the tags name, and the footer */
.fig-grid .fig-grid-key {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.3;
  color: var(--muted);
}

.fig-grid .fig-grid-key-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.fig-grid .fig-grid-swatch {
  flex: none;
  width: 14px;
  height: 11px;
  border: 1px solid color-mix(in srgb, var(--ink) 30%, transparent);
  border-radius: 2px;
}

.fig-grid .fig-grid-instruments {
  display: grid;
  grid-template-columns: max-content 1fr max-content;
  align-items: baseline;
  gap: 4px 12px;
  margin: 14px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
  font-size: 12.5px;
  line-height: 1.35;
}

.fig-grid .fig-grid-instruments dt {
  font-weight: 600;
  color: var(--ink);
}

.fig-grid .fig-grid-instruments dd { margin: 0; }
.fig-grid .fig-grid-question { color: var(--ink2); }
.fig-grid .fig-grid-clock { color: var(--muted); }

@container fig (width < 600px) {
  .fig-grid .fig-grid-instruments { grid-template-columns: 1fr max-content; }
  .fig-grid .fig-grid-instruments dt { grid-column: 1 / -1; margin-top: 4px; }
}

.fig-grid .fig-grid-footer {
  margin: 10px 0 0;
  font: italic 400 13px/1.4 var(--serif);
  color: var(--muted);
}

.fig-grid .fig-grid-licence {
  display: block;
  font-size: 12px;
  font-style: normal;
}

/* ── The chain (fig-chain-branches): one list of rows, each a question, its "stops here" and its exit, then the
   "yes" to the next question; the goal last. On a frame 520px wide or more each exit sits right of its question, as
   in print. Below that the question takes the row, and its exit comes under it, indented beside the line of yeses.
   The words are the same nodes in both; only the arrows change, and an arrow is an aria-hidden drawing with no words.
   The question and its exit are stretched to the row's height, so each yes runs from the bottom of one question to
   the top of the next. A link's text is the edition's ("Chapter 29: …", or "Complete Edition, …" and a dagger). */

.fig-chain-branches .fig-chain {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fig-chain-branches .fig-chain-row {
  display: grid;
  grid-template-columns: minmax(0, 27fr) auto minmax(0, 35fr);
  grid-template-areas: "q stop exit" "yes . .";
  margin: 0;
}

.fig-chain-branches .fig-chain-row > p { margin: 0; }

.fig-chain-branches .fig-chain-q {
  grid-area: q;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 6px 9px;
  border: 1px solid var(--accent);
  border-radius: 3px;
  background: var(--well);
  color: var(--ink);
  line-height: 1.3;
}

.fig-chain-branches .fig-chain-q b { font-weight: 600; }
.fig-chain-branches .fig-chain-q span { font-size: 13px; color: var(--ink2); }

.fig-chain-branches .fig-chain-goal {
  border-width: 2px;
  background: var(--bg);
}

.fig-chain-branches .fig-chain-exit {
  grid-area: exit;
  padding: 6px 9px;
  border: 1px solid var(--muted);
  border-radius: 3px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink2);
}

.fig-chain-branches .fig-chain-exit b { font-weight: 600; color: var(--ink); }

/* the dagger on a reference to the Complete Edition, in the serif, as the reader's other daggers are; raised less than
   super, which lifts it into the underline of the line above */
.fig-chain-branches sup { font: 400 11px/0 var(--serif); vertical-align: 0.3em; }

/* the arrows' words in the serif's italic, as print sets them */
.fig-chain-branches .fig-chain-tag {
  font: italic 400 13px/1.2 var(--serif);
  color: var(--muted);
}

/* an arrow is its width and height attributes' size (no viewBox) */
.fig-chain-branches svg {
  display: block;
  flex: none;
  max-width: none;
}

.fig-chain-branches .fig-chain-stop {
  grid-area: stop;
  display: flex;
  flex-direction: column;
  align-items: center;
  align-self: center;
  gap: 2px;
  color: var(--muted);
}

.fig-chain-branches .fig-chain-down { display: none; }

/* the yes arrow under the middle of the question, its word to the right */
.fig-chain-branches .fig-chain-yes {
  grid-area: yes;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 4px;
  color: var(--accent);
}

.fig-chain-branches .fig-chain-yes svg { grid-column: 2; }
.fig-chain-branches .fig-chain-yes .fig-chain-tag { grid-column: 3; }

@container fig (width < 520px) {
  .fig-chain-branches .fig-chain-row {
    grid-template-columns: 24px minmax(0, 1fr);
    grid-template-areas: "q q" "spine stop" "spine exit" "yes yes";
  }

  .fig-chain-branches .fig-chain-end { grid-template-areas: "q q"; }

  /* the line of yeses, beside the exit, down to the yes arrow's head */
  .fig-chain-branches .fig-chain-row:not(.fig-chain-end)::before {
    content: "";
    grid-area: spine;
    justify-self: center;
    border-left: 1.5px solid var(--accent);
  }

  .fig-chain-branches .fig-chain-stop {
    flex-direction: row;
    align-self: stretch;
    gap: 6px;
    padding-left: 10px;
  }

  .fig-chain-branches .fig-chain-across { display: none; }
  /* the arrow down from the question first, its words beside it, as with each yes */
  .fig-chain-branches .fig-chain-down { display: block; order: -1; }

  .fig-chain-branches .fig-chain-yes { grid-template-columns: 24px 1fr; }
  .fig-chain-branches .fig-chain-yes svg { grid-column: 1; justify-self: center; }
  .fig-chain-branches .fig-chain-yes .fig-chain-tag { grid-column: 2; }
}

/* ── Two machines (fig-two-machines): a two-by-two table, price across the top, native use down the side. Every size
   is in --u, the frame's width over 316 (the phone column's) and at most 480px over 316, so the table scales as a
   drawing 316 wide would, up to 480px. The cells sit 4u apart; the table's outer spacing is taken back by its margin
   and clipped by its box, so the cells meet the frame's edges. ─────────────────────────────────────────────────── */
/* --u is a token list until a rule below uses it, so its 100cqi is the frame's width wherever it is used */
.fig-two-machines { --u: min(calc(100cqi / 316), calc(480px / 316)); }

.fig-two-machines .fig-tm {
  max-width: 480px;
  overflow: hidden;
}

.fig-two-machines .fig-tm-table {
  width: calc(100% + 8 * var(--u));
  margin: calc(-4 * var(--u));
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: calc(4 * var(--u));
  font-size: calc(11.5 * var(--u));
  line-height: calc(15 * var(--u));
}

.fig-two-machines .fig-tm-heads { width: calc(74 * var(--u)); }

.fig-two-machines .fig-tm-table :is(th, td) {
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  vertical-align: top;
  font-weight: 400;
  color: var(--ink2);
}

/* native use's title in the corner, broken where the data breaks it; its last line reaches down to the rows' top, as
   in the drawing, rather than pushing them down */
.fig-two-machines .fig-tm-table .fig-tm-corner {
  padding-top: calc(2 * var(--u));
  font-weight: 600;
  color: var(--ink);
}

.fig-two-machines .fig-tm-corner span { display: block; }
.fig-two-machines .fig-tm-corner span:last-child { margin-bottom: calc(-6 * var(--u)); }

/* price's title over both columns, and down and up over one each */
.fig-two-machines .fig-tm-table th[scope="colgroup"] {
  padding-top: calc(2 * var(--u));
  text-align: center;
  font-size: calc(12 * var(--u));
  font-weight: 600;
  color: var(--ink);
}

.fig-two-machines .fig-tm-table th[scope="col"] {
  padding-bottom: calc(4 * var(--u));
  vertical-align: bottom;
  text-align: center;
  font-style: italic;
}

.fig-two-machines .fig-tm-table th[scope="row"] {
  vertical-align: middle;
  font-style: italic;
}

/* a cell, empty or with its words; the marked one in the figures' warm colour, its padding less the wider border */
.fig-two-machines .fig-tm-table .fig-tm-cell {
  padding: calc(8 * var(--u));
  border: calc(1 * var(--u)) solid var(--muted);
  border-radius: calc(2 * var(--u));
  background: var(--well);
}

.fig-two-machines .fig-tm-table .fig-tm-marked {
  padding: calc(7 * var(--u));
  border: calc(2 * var(--u)) solid var(--fig-warm);
}

.fig-two-machines .fig-tm-tag {
  margin: calc(11 * var(--u)) 0 calc(4 * var(--u));
  font-size: calc(11 * var(--u));
  line-height: calc(15 * var(--u));
  font-style: italic;
  color: var(--muted);
}

/* ── Hold or convert (fig-hold-or-convert): a nested list, the question an item whose own list is its two branches,
   each a condition (in the serif's italic, as print sets it) and its outcome; the outcome where holding helps framed
   in --accent. A trunk runs down the branches' left side, a short tick to each. On a frame 520px wide or more each
   outcome sits right of its condition, as in print; below that it comes under it. The inset's arms are an ordered
   list, as many to a row as fit. The figure is HTML, so the browser breaks every line. ─────────────────────────── */

.fig-hold-or-convert .fig-hc-tree,
.fig-hold-or-convert .fig-hc-branches,
.fig-hold-or-convert .fig-hc-arms {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fig-hold-or-convert .fig-hc-root { margin: 0; }

.fig-hold-or-convert .fig-hc-q {
  margin: 0;
  padding: 6px 9px;
  border: 1px solid var(--accent);
  border-radius: 3px;
  background: var(--well);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

.fig-hold-or-convert .fig-hc-branches {
  margin-left: 14px;
  padding: 2px 0 0 14px;
  border-left: 1.5px solid var(--accent);
}

.fig-hold-or-convert .fig-hc-branch {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4px 14px;
  margin: 8px 0 0;
}

/* the tick from the trunk to the condition's first line */
.fig-hold-or-convert .fig-hc-branch::before {
  content: "";
  position: absolute;
  top: 0.68em;
  left: -14px;
  width: 10px;
  border-top: 1.5px solid var(--accent);
}

.fig-hold-or-convert .fig-hc-branch > p { margin: 0; }

.fig-hold-or-convert .fig-hc-if {
  font: italic 400 14px/1.35 var(--serif);
  color: var(--ink2);
}

.fig-hold-or-convert .fig-hc-then {
  align-self: start;
  padding: 5px 8px;
  border: 1px solid var(--muted);
  border-radius: 3px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink);
}

.fig-hold-or-convert .fig-hc-branch[data-outcome="held"] .fig-hc-then {
  padding: 4.5px 7.5px;
  border: 1.5px solid var(--accent);
  background: var(--well);
}

.fig-hold-or-convert .fig-hc-inset { margin: 14px 0 0; }

.fig-hold-or-convert .fig-hc-inset > .fig-hc-inset-head {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}

.fig-hold-or-convert .fig-hc-arms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 4px;
}

.fig-hold-or-convert .fig-hc-arms li {
  margin: 0;
  padding: 5px 8px;
  border: 1px solid var(--muted);
  border-radius: 3px;
  font-size: 13px;
  line-height: 1.3;
  color: var(--ink2);
}

.fig-hold-or-convert .fig-hc-note {
  margin: 10px 0 0;
  font: italic 400 14px/1.35 var(--serif);
  color: var(--muted);
}

@container fig (width < 520px) {
  .fig-hold-or-convert .fig-hc-branch { grid-template-columns: minmax(0, 1fr); }
}

/* ── The adoption ladder (fig-adoption-ladder): an ordered list of the four phases, each item its step (the phase's
   name, Phase III's marker) and the entry gate that leads up from it (a list of rows, each a metric and its threshold
   in bold), then the failure gates' head and a list of the three down-arrows. On a frame 600px wide or more the
   phases stand side by side as a staircase, as in print: the steps rise by the up-arrow's height (44px), each gate over
   its step with the arrow on the riser at its right. Below that the phases run down the frame, each gate under its step
   and its arrow pointing on to the next. The advances' arrows are --accent, the regression's --muted and the two that
   falsify --fig-warm, as print sets them apart. ──────────────────────────────────────────────────────────────────── */

.fig-adoption-ladder .fig-al-ladder,
.fig-adoption-ladder .fig-al-rows,
.fig-adoption-ladder .fig-al-down {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fig-adoption-ladder .fig-sc { font-variant: small-caps; }

/* succ's subscript at the 11px floor, set in the line without opening it */
.fig-adoption-ladder sub {
  font-size: 11px;
  line-height: 0;
}

.fig-adoption-ladder .fig-al-ladder {
  display: flex;
  align-items: flex-end;
}

.fig-adoption-ladder .fig-al-phase {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column-reverse;
  margin: 0;
}

.fig-adoption-ladder .fig-al-phase[data-phase="I"] { flex-grow: 1.45; }

.fig-adoption-ladder .fig-al-phase + .fig-al-phase .fig-al-step { margin-left: -1px; }

.fig-adoption-ladder .fig-al-step {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 6px 8px;
  border: 1px solid var(--accent);
  background: var(--well);
}

.fig-adoption-ladder .fig-al-phase[data-phase="I"] .fig-al-step { min-height: 44px; }
.fig-adoption-ladder .fig-al-phase[data-phase="II"] .fig-al-step { min-height: 88px; }
.fig-adoption-ladder .fig-al-phase[data-phase="III"] .fig-al-step { min-height: 132px; }
.fig-adoption-ladder .fig-al-phase[data-phase="IV"] .fig-al-step { min-height: 176px; }

.fig-adoption-ladder .fig-al-name {
  margin: 0;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}

.fig-adoption-ladder .fig-al-mark {
  margin: 8px 0 0;
  font: italic 400 13px/1.35 var(--serif);
  color: var(--ink2);
}

.fig-adoption-ladder .fig-al-gate {
  position: relative;
  padding: 0 20px 8px 8px;
}

.fig-adoption-ladder .fig-al-up {
  position: absolute;
  right: 3px;
  bottom: 0;
  color: var(--accent);
}

.fig-adoption-ladder .fig-al-rows li {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink2);
}

.fig-adoption-ladder .fig-al-threshold {
  display: block;
  font-weight: 600;
  color: var(--ink);
}

.fig-adoption-ladder .fig-al-head {
  margin: 16px 0 6px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}

.fig-adoption-ladder .fig-al-down {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 14px;
}

.fig-adoption-ladder .fig-al-down-item {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 6px;
  margin: 0;
}

.fig-adoption-ladder .fig-al-dn {
  grid-row: 1 / span 2;
  margin-top: 2px;
}

/* a falsification's arrow in the warm colour, a regression's in the neutral grey of a secondary line (print: warm and
   black!60), each apart from the advances' --accent */
.fig-adoption-ladder .fig-al-falsify .fig-al-dn { color: var(--fig-warm); }

.fig-adoption-ladder .fig-al-regress .fig-al-dn { color: var(--muted); }

.fig-adoption-ladder .fig-al-if,
.fig-adoption-ladder .fig-al-then {
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
}

.fig-adoption-ladder .fig-al-if { color: var(--ink2); }

.fig-adoption-ladder .fig-al-then {
  margin-top: 2px;
  font-weight: 600;
  color: var(--ink);
}

@container fig (width < 600px) {
  .fig-adoption-ladder .fig-al-ladder,
  .fig-adoption-ladder .fig-al-phase { display: block; }
  .fig-adoption-ladder .fig-al-phase + .fig-al-phase .fig-al-step { margin-left: 0; }
  .fig-adoption-ladder .fig-al-phase[data-phase] .fig-al-step { min-height: 0; }
  .fig-adoption-ladder .fig-al-gate { padding: 2px 0 10px 26px; }
  .fig-adoption-ladder .fig-al-up {
    right: auto;
    left: 6px;
    transform: scaleY(-1);
  }
  .fig-adoption-ladder .fig-al-down { grid-template-columns: minmax(0, 1fr); }
}

/* ── The two loops (fig-collateral-loop, fig-ai-fiscal-loop): an ordered list of the loop's steps, each item its node
   and, under it, its arrow down to the next (the collateral loop's with its verb and the levers that act on it beside
   it, each lever a sentence edged in --fig-warm, as print marks it on its arrow). A rail on the left runs from the last
   step's arrow back up into the first step, so the list reads as a loop. The AI-fiscal loop's second step is framed in
   --fig-warm and carries its mark in words. Every part is a border or an SVG path in currentColor, so forced-colours
   mode keeps it: the rail is borders, each arrow's shaft a border beside its words and its head an SVG at its foot, and
   the rail's head into the first step an SVG (.fig-loop-in). ──────────────────────────────────────────────────────────────────────────────────────────────────────── */

.fig-collateral-loop .fig-loop,
.fig-ai-fiscal-loop .fig-loop,
.fig-collateral-loop .fig-loop-levers {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fig-collateral-loop .fig-loop,
.fig-ai-fiscal-loop .fig-loop {
  position: relative;
  max-width: 600px;
  padding-left: 22px;
}

/* the rail: down the left from the first step's middle, along the foot to the last step's arrow ... */
.fig-collateral-loop .fig-loop::before,
.fig-ai-fiscal-loop .fig-loop::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 14px;
  bottom: 0;
  width: 29px;
  box-sizing: border-box;
  border-left: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  border-bottom-left-radius: 4px;
}

/* ... and across the top into the first step, where its head is */
.fig-collateral-loop .fig-loop::after,
.fig-ai-fiscal-loop .fig-loop::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 14px;
  width: 10px;
  border-top: 1.5px solid var(--accent);
}

.fig-collateral-loop .fig-loop-step,
.fig-ai-fiscal-loop .fig-loop-step {
  position: relative;
  margin: 0;
}

/* the rail's head: its tip at the first node's left edge, level with the rail's top line */
.fig-collateral-loop .fig-loop-in,
.fig-ai-fiscal-loop .fig-loop-in {
  position: absolute;
  left: -12px;
  top: 10.25px;
  color: var(--accent);
}

.fig-collateral-loop .fig-loop-node,
.fig-ai-fiscal-loop .fig-loop-node {
  margin: 0;
  padding: 5px 9px;
  border: 1px solid var(--accent);
  border-radius: 3px;
  background: var(--well);
  line-height: 1.35;
  color: var(--ink);
}

.fig-collateral-loop .fig-loop-node { font-weight: 600; }

.fig-collateral-loop .fig-loop-link,
.fig-ai-fiscal-loop .fig-loop-link {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-left: 6px;
}

/* the arrow's shaft, from the node down to its SVG foot (as tall as the SVG: 22px, 16px), centred on it */
.fig-collateral-loop .fig-loop-link::before,
.fig-ai-fiscal-loop .fig-loop-link::before {
  content: "";
  position: absolute;
  left: 5.25px;
  top: 0;
  bottom: 22px;
  border-left: 1.5px solid var(--accent);
}

.fig-ai-fiscal-loop .fig-loop-link::before { bottom: 16px; }

.fig-collateral-loop .fig-loop-arrow,
.fig-ai-fiscal-loop .fig-loop-arrow {
  flex: none;
  align-self: flex-end;
  color: var(--accent);
}

/* the last arrow runs on into the rail: no head of its own */
.fig-collateral-loop .fig-loop-step:last-child .fig-loop-arrow path + path,
.fig-ai-fiscal-loop .fig-loop-step:last-child .fig-loop-arrow path + path { display: none; }

.fig-collateral-loop .fig-loop-on {
  min-width: 0;
  padding: 3px 0 8px;
}

.fig-collateral-loop .fig-loop-edge {
  margin: 0;
  font: italic 400 14px/1.35 var(--serif);
  color: var(--ink2);
}

.fig-collateral-loop .fig-loop-lever {
  margin: 5px 0 0;
  padding: 1px 0 1px 8px;
  border-left: 2.5px solid var(--fig-warm);
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink2);
}

.fig-collateral-loop .fig-loop-lever b { color: var(--ink); }

.fig-ai-fiscal-loop .fig-loop-node {
  display: flex;
  gap: 8px;
}

.fig-ai-fiscal-loop .fig-loop-n {
  flex: none;
  min-width: 0.9em;
  font-weight: 600;
}

.fig-ai-fiscal-loop .fig-loop-body { min-width: 0; }

.fig-ai-fiscal-loop .fig-loop-body > p { margin: 0; }

.fig-ai-fiscal-loop .fig-loop-marked .fig-loop-node {
  padding: 3.5px 7.5px;
  border: 2.5px solid var(--fig-warm);
}

.fig-ai-fiscal-loop .fig-loop-body > .fig-loop-mark {
  margin-top: 4px;
  font: italic 400 14px/1.35 var(--serif);
  color: var(--ink2);
}

.fig-collateral-loop .fig-loop-tag,
.fig-ai-fiscal-loop .fig-loop-tag {
  margin: 10px 0 0;
  font: italic 400 13px/1.35 var(--serif);
  color: var(--muted);
}

/* ── The red-line clocks (fig-redline-clocks): an ordered list of the nineteen rows, each its head, its severity in
   words, a list of its clauses and the gate it reads after. A clause is its track (one bar, its window's share of the
   24-month axis, from the gate's mark at its left; hidden from a screen reader, which hears the clause's words) or
   "no fixed window", then its words (after any basis they read against, on a line of their own), its note and its own
   gate. On a frame 600px wide or more the head and the severity stand in two columns at the left, as in print; below
   that they share a line over the clauses. The track's width and the gap after it are two custom properties, set once
   per layout on the list (the frame is the container, so a query styles what is inside it); the clause columns and the
   line gate's indent are both derived from them. The bars do not change with severity; the candidate's alone are
   hollow. Every bar and mark is a border, so forced-colours mode keeps it. A font shorthand resets the figures, so
   each italic rule sets lining figures again. ── */

.fig-redline-clocks .fig-rl-lines {
  --fig-rl-track: 148.5px;
  --fig-rl-gap: 12px;
}

.fig-redline-clocks .fig-rl-lines,
.fig-redline-clocks .fig-rl-clauses {
  margin: 0;
  padding: 0;
  list-style: none;
}

.fig-redline-clocks .fig-rl-line {
  display: grid;
  grid-template-columns: 6em 5.8em minmax(0, 1fr);
  column-gap: 10px;
  margin: 0;
  padding: 7px 0;
}

.fig-redline-clocks .fig-rl-line + .fig-rl-line { border-top: 1px solid var(--rule); }

.fig-redline-clocks .fig-rl-head,
.fig-redline-clocks .fig-rl-says {
  grid-row: 1 / span 3;
  margin: 0;
}

.fig-redline-clocks .fig-rl-head {
  grid-column: 1;
  font-weight: 600;
  color: var(--ink);
}

.fig-redline-clocks .fig-rl-says { grid-column: 2; }

.fig-redline-clocks .fig-rl-sev {
  display: block;
  font: italic 400 14px/1.4 var(--serif);
  font-variant-numeric: lining-nums;
  color: var(--ink2);
}

.fig-redline-clocks .fig-rl-clauses,
.fig-redline-clocks .fig-rl-line > .fig-rl-gate { grid-column: 3; }

.fig-redline-clocks .fig-rl-clause {
  display: grid;
  grid-template-columns: var(--fig-rl-track) minmax(0, 1fr);
  column-gap: var(--fig-rl-gap);
  margin: 0;
}

.fig-redline-clocks .fig-rl-clause + .fig-rl-clause { margin-top: 3px; }

/* every track starts its bar 4.5px in, where a gated clause's mark stands, so all bars start on one axis */
.fig-redline-clocks .fig-rl-track,
.fig-redline-clocks .fig-rl-none {
  grid-column: 1;
  grid-row: 1 / span 3;
  box-sizing: border-box;
  align-self: start;
  padding-left: 4.5px;
}

/* the axis: a hairline the whole 24 months long, under the bar */
.fig-redline-clocks .fig-rl-track {
  display: block;
  margin-top: 6px;
  border-bottom: 1px solid var(--rule);
}

.fig-redline-clocks .fig-rl-bar {
  display: block;
  box-sizing: border-box;
  min-width: 3px;
  height: 0;
  border-top: 7px solid var(--accent);
}

.fig-redline-clocks .fig-rl-hollow .fig-rl-bar {
  height: 7px;
  border: 1.5px solid var(--accent);
}

.fig-redline-clocks .fig-rl-none {
  display: block;
  font: italic 400 13px/1.5 var(--serif);
  font-variant-numeric: lining-nums;
  color: var(--muted);
}

/* the gate's mark: where a gated clause's clock starts */
.fig-redline-clocks .fig-rl-armed > .fig-rl-track,
.fig-redline-clocks .fig-rl-armed > .fig-rl-none {
  padding-left: 2px;
  border-left: 2.5px solid var(--fig-warm);
}

.fig-redline-clocks .fig-rl-label,
.fig-redline-clocks .fig-rl-note,
.fig-redline-clocks .fig-rl-clause > .fig-rl-gate {
  display: block;
  grid-column: 2;
}

.fig-redline-clocks .fig-rl-label { color: var(--ink); }

.fig-redline-clocks .fig-rl-lead {
  font-weight: 600;
  color: var(--ink);
}

/* a clause read against a basis (Red Line 18 B's own floor) starts its words on the line under it, as in print */
.fig-redline-clocks .fig-rl-then { display: block; }

.fig-redline-clocks .fig-rl-note,
.fig-redline-clocks .fig-rl-gate {
  font: italic 400 13px/1.4 var(--serif);
  font-variant-numeric: lining-nums;
  color: var(--ink2);
}

.fig-redline-clocks .fig-rl-gate {
  margin: 3px 0 0;
  padding-left: 7px;
  border-left: 2.5px solid var(--fig-warm);
}

/* the line's gate in the clauses' words column, past the tracks */
.fig-redline-clocks .fig-rl-line > .fig-rl-gate { margin-left: calc(var(--fig-rl-track) + var(--fig-rl-gap)); }

@container fig (width < 600px) {
  .fig-redline-clocks .fig-rl-line { grid-template-columns: auto minmax(0, 1fr); }
  .fig-redline-clocks .fig-rl-head,
  .fig-redline-clocks .fig-rl-says { grid-row: auto; }
  .fig-redline-clocks .fig-rl-says { grid-column: 2; }
  .fig-redline-clocks .fig-rl-sev { display: inline; }
  .fig-redline-clocks .fig-rl-sev + .fig-rl-sev { margin-left: 0.5em; }
  .fig-redline-clocks .fig-rl-clauses,
  .fig-redline-clocks .fig-rl-line > .fig-rl-gate {
    grid-column: 1 / -1;
  }
  .fig-redline-clocks .fig-rl-clauses { margin-top: 3px; }
  .fig-redline-clocks .fig-rl-lines {
    --fig-rl-track: max(84px, 30%);
    --fig-rl-gap: 10px;
  }
}

@media (forced-colors: active) {
  .fig-redline-clocks .fig-rl-bar,
  .fig-redline-clocks .fig-rl-armed > .fig-rl-track,
  .fig-redline-clocks .fig-rl-armed > .fig-rl-none,
  .fig-redline-clocks .fig-rl-gate { border-color: CanvasText; }
}

/* ── The history charts (fig-bill-peg, fig-real-rates; scripts/figkit/bill_peg.py, real_rates.py): an SVG drawn to
   scale, which scales to the frame as every drawing does (.fig > svg); its source line; and, in a <details>, the drawn
   values as tables, each in a region a keyboard reaches and scrolls, since a table of months is wider than a phone.
   Their shapes are the SVG's own paths and rects, painted with tokens. The rules name the chart twice (.fig-chart .x)
   to outweigh reader.css's table rules. ─────────────────────────────────────────────────────────────────────────── */
.fig-chart .fig-chart-source {
  margin: 0.45em 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}

.fig-chart .fig-chart-data {
  margin: 0.5em 0 0;
  font-size: 12px;
  color: var(--ink2);
}

.fig-chart .fig-chart-data > summary {
  cursor: pointer;
  color: var(--ink);
}

.fig-chart .fig-chart-table {
  max-width: 100%;
  margin: 0.5em 0 0;
  overflow-x: auto;
}

.fig-chart .fig-chart-table table {
  margin: 0;
  border-collapse: collapse;
  font-size: 12px;
  font-variant-numeric: lining-nums tabular-nums;
}

.fig-chart .fig-chart-table caption {
  padding: 0 0 0.3em;
  caption-side: top;
  text-align: left;
  color: var(--ink2);
}

.fig-chart .fig-chart-table :is(th, td) {
  padding: 0.15em 0.55em;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: none;
  text-align: right;
  white-space: nowrap;
  color: var(--ink2);
}

.fig-chart .fig-chart-table th { font-weight: 600; color: var(--ink); }
.fig-chart .fig-chart-table th[scope="row"],
.fig-chart .fig-chart-table th[scope="col"]:first-child { text-align: left; }