/* ============================================================================
   waitingroom — colour layer
   ----------------------------------------------------------------------------
   Deliberately three-tiered: primitive → semantic → component. Not a proposal
   but a rebuild, so a component here can use the same structure as the target
   environment, and a primitive can be swapped without touching a component.

   The primitives are Radix scales (radix-ui.com/colors). Radix assigns a
   defined role to each step — 1/2 surfaces, 3–5 states, 6–8 borders, 9/10
   saturated solids, 11/12 text. That is why no contrast is computed by hand
   here: steps 11 and 12 on steps 1/2 are text-safe by construction.

   NOTE: the hex values below were written from memory and should be checked
   against the official Radix values before any serious use. For the structure
   this file is demonstrating, that makes no difference.
   ========================================================================= */

:root {
  /* ---------- 1 · PRIMITIVE — raw scale values, no meaning attached ---------- */
  --slate-1:  #fcfcfd;
  --slate-2:  #f9f9fb;
  --slate-3:  #f0f0f3;
  --slate-4:  #e8e8ec;
  --slate-5:  #e0e1e6;
  --slate-6:  #d9d9e0;
  --slate-7:  #cdced6;
  --slate-8:  #b9bbc6;
  --slate-9:  #8b8d98;
  --slate-10: #80838d;
  --slate-11: #60646c;
  --slate-12: #1c2024;

  --blue-1:  #fbfdff;
  --blue-2:  #f4faff;
  --blue-3:  #e6f4fe;
  --blue-4:  #d5efff;
  --blue-5:  #c2e5ff;
  --blue-6:  #acd8fc;
  --blue-7:  #8ec8f6;
  --blue-8:  #5eb1ef;
  --blue-9:  #0090ff;
  --blue-10: #0588f0;
  --blue-11: #0d74ce;
  --blue-12: #113264;

  /* One step darker than blue-11. Radix guarantees step 11 as readable text on
     steps 1–2; the masthead sits on step 6, where 11 measures 3.4:1 against a
     4.5:1 requirement. The light scale has no step between 11 and 12, so this
     is a documented departure from it rather than a value out of it. */
  --blue-11-deep: #0b5cad;
}

:root {
  /* ---------- 2 · SEMANTIC — roles. The connector. ----------
     Only this tier is repointed when the mode changes. Components never
     reach for a primitive — that would defeat the swap the whole structure
     exists to make possible. */
  --ground:        var(--slate-6);   /* what the sheet lies on */
  --bg:            var(--slate-1);   /* the sheet the work sits on */
  --surface-sunk:  var(--slate-3);
  /* One border, step 8. There were two (7 and 8) and the difference read as
     inconsistency, not hierarchy. Where an edge needs more presence than
     this, it gets weight or the text colour — not a third grey. */
  --border:        var(--slate-8);
  --text:          var(--slate-12);
  --text-muted:    var(--slate-11);
  --accent-solid:  var(--blue-9);
  /* The darker of the two text blues; the scale's own step 11 misses 4.5:1
     on the grey ground. One blue for text, one (blue-9) for fills. */
  --accent-text:   var(--blue-11-deep);
  --accent-bg:     var(--blue-3);
  --accent-border: var(--blue-7);
}

:root {
  /* ---------- 3 · COMPONENT — one variable per property ----------
     Looks redundant, and is — that is the point. A component can deviate
     without the semantic tier being touched, and one place shows which role
     it claims. */
  /* One label token, not one per control: both were aliases of the same role
     and had never diverged. A component token earns its slot by deviating or
     by being a real control surface — not by existing. */
  --label-text:         var(--text);

  --radio-dot:          var(--accent-solid);

  --select-bg:          var(--bg);
  --select-border:      var(--border);
  --select-text:        var(--text);

  --fixed-bg:           var(--surface-sunk);
  --fixed-text:         var(--text);
  --fixed-note-text:    var(--text-muted);

  --trace-bg:           var(--accent-bg);
  --trace-border:       var(--accent-border);
  /* Step 12, not 11: the trace sits on blue-3, where 11 lands at 4.25:1. */
  --trace-text:         var(--blue-12);

  --panel-bg:           var(--bg);
  --panel-border:       var(--border);
  --tab-text:           var(--text-muted);
  --tab-text-active:    var(--text);
  --tab-border-active:  var(--accent-solid);

  --code-bg:            var(--slate-12);
  --code-text:          var(--slate-3);
}

/* Dark mode: ONLY the semantic tier repoints.
   No primitive changes, no component variable is touched. */
:root[data-theme='dark'] {
  /* The ground is repointed rather than inherited: in light the sheet is the
     brighter of the two, in dark it is the darker one, and only the semantic
     tier knows that. */
  --ground: var(--slate-3);

  --slate-1:  #111113;  --slate-2:  #18191b;  --slate-3:  #212225;
  --slate-4:  #272a2d;  --slate-5:  #2e3135;  --slate-6:  #363a3f;
  --slate-7:  #43484e;  --slate-8:  #5a6169;  --slate-9:  #696e77;
  --slate-10: #777b84;  --slate-11: #b0b4ba;  --slate-12: #edeef0;

  --blue-1:  #0d1520;  --blue-2:  #111927;  --blue-3:  #0d2847;
  --blue-4:  #003362;  --blue-5:  #004074;  --blue-6:  #104d87;
  --blue-7:  #205d9e;  --blue-8:  #2870bd;  --blue-9:  #0090ff;
  --blue-10: #3b9eff;  --blue-11: #70b8ff;  --blue-12: #c2e6ff;

  /* No departure needed here: on a dark ground step 11 already clears 7:1. */
  --blue-11-deep: var(--blue-11);
}

/* ============================================================================
   Type scale
   ----------------------------------------------------------------------------
   Five steps (plus the 40px wordmark). The file once had nineteen sizes, then
   seven — and 11 next to 13 was still two opinions about "small" for a page
   with three components. Every size below is one of these; a literal px
   font-size anywhere else is a bug, and greppable as one.
   ========================================================================= */

:root {
  --t-small: 12px;   /* everything below body: labels, chips, code, dense tables */
  --t-body:  14px;   /* body and explanatory text — the default */
  --t-read:  16px;   /* reading prose, navigation, the claim */
  --t-sub:   18px;   /* component names, sub-headings */
  --t-head:  21px;   /* page headings */
}

/* ============================================================================
   Workbench
   ========================================================================= */

* { box-sizing: border-box; }

/* One focus ring for everything the keyboard reaches. The browser default is
   drawn in its own colour, which has to work on a grey ground, a white sheet
   and a near-black code block at once — and does not. This one is drawn in the
   link blue, which is repointed per mode and clears 4.5:1 on both grounds. */
:focus-visible {
  outline: 2px solid var(--blue-11-deep);
  outline-offset: 2px;
}

body {
  margin: 0;
  padding: 32px 24px 60px;
  background: var(--ground);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: var(--t-body);
  line-height: 1.5;
}

.wr-page { max-width: 860px; margin: 0 auto; }

/* ============================================================================
   Masthead — built to "Waiting Room Header" (overgabe, node 7:83)
   ----------------------------------------------------------------------------
   Metrics taken from the frame: 40px wordmark, 2px rule, 16px claim over two
   lines, 16px navigation, 1px rule. Rendered by header.js into both pages, so
   the two cannot disagree about it.

   The frame is set in Public Sans; this keeps the system stack the rest of the
   page already uses. Sizes, weights and spacing are the frame's — only the
   face differs, which also means no external font request from a page that
   gets shown to a regulated shop.

   The frame's black and white are read through the token layer instead of
   being written in, which is what lets the same header hold in dark mode.
   The two blues are the frame's own values.
   ========================================================================= */

:root {
}

.wr-head { margin-bottom: 40px; }

/* The frame puts the masthead on the grey ground and the work on a white
   sheet below it. The separation is the point: the header states what this is,
   the sheet is what it does. Same width as the rules above, so the page has
   one left edge rather than two. */
.wr-canvas {
  display: block;
  margin: 0;
  padding: 30px 26px 34px;
  background: var(--bg);
}
@media (max-width: 620px) { .wr-canvas { padding: 22px 16px 26px; } }

/* Links in running text. Left alone they fall back to the browser's fixed
   blue, which measures 2:1 on the dark ground — the one place a default is
   worse than no styling at all. Classed links keep their own colour. */
.wr-canvas a:not([class]) { color: var(--accent-text); }

/* Outside the sheet, on the ground — it signs the work rather than being part
   of it. */
/* On the ground, not on the sheet: --text-muted measures 4.23:1 there. The
   colophon is short enough to carry the full text colour. */
.wr-page > .wr-signature { color: var(--text); margin: 26px 0 0; padding-top: 14px; border-top-color: var(--border); }

/* Not a flex row: wordmark and pills sit in one line box, so the pills can be
   aligned to the wordmark's baseline rather than to the top of its line. */
.wr-head-top { display: block; }

.wr-wordmark {
  display: inline;
  margin: 0;
  font-size: clamp(30px, 4.6vw, 40px);
  line-height: 1.175;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
}
.wr-wordmark:hover { color: var(--accent-text); }

/* The frame's two rules: 2px under the wordmark, 1px under the navigation. */
.wr-rule { height: 1px; background: var(--text); margin: 6px 0 0; }
.wr-rule-heavy { height: 2px; margin: 8px 0 0; }

.wr-subtitle {
  margin: 11px 0 0;
  color: var(--text);
  font-size: var(--t-read);
  font-weight: 700;
  line-height: 1.372;
  text-transform: capitalize;   /* as in the frame: the text is written as a
                                   sentence and cased by the style */
}
.wr-subtitle span { display: block; }

/* ---- Colour mode ----
   Two named states rather than one button labelled with the other mode: the
   old control read "Dark" and it was not answerable, from looking at it,
   whether that was the state or the action.

   The frame draws the current mode as an outlined bold pill and the other one
   filled — so the filled pill is the one you press. */
/* An inline-block with overflow:hidden has its baseline at its bottom margin
   edge. That anchor is what puts the pills' underside exactly on the
   wordmark's baseline — and it keeps holding when the wordmark scales down on
   a narrow viewport, which a fixed offset would not. The zeroed font-size and
   line-height remove the strut that would otherwise sit under the pills. */
.wr-mode-anchor {
  display: inline-block;
  overflow: hidden;
  vertical-align: baseline;
  margin-left: 21px;
  font-size: 0;
  line-height: 0;
}
.wr-mode { display: flex; gap: 11px; }
.wr-mode-btn {
  appearance: none;
  /* 1.5px border on a 15.5px line keeps the pill at the frame's 18.5px while
     carrying the heavier stroke. */
  border: 1.5px solid var(--text);
  border-radius: 10px;
  background: transparent;
  font: inherit;
  font-size: var(--t-small);
  line-height: 15.5px;
  text-transform: uppercase;
  padding: 0 13px;
  cursor: pointer;
}
/* The mode in force: outlined in the text colour, bold. It is a label as much
   as a control — pressing it changes nothing. */
.wr-mode-btn[aria-pressed='true'] {
  border-color: var(--text);
  color: var(--text);
  font-weight: 700;
}
/* The other one: outlined and set in the link blue, because blue is what this
   page uses to mean "you can press this". */
.wr-mode-btn[aria-pressed='false'] {
  border-color: var(--accent-text);
  color: var(--accent-text);
  font-weight: 400;
}
.wr-mode-btn[aria-pressed='false']:hover {
  background: color-mix(in srgb, var(--accent-text) 10%, transparent);
}

/* ---- Page navigation ----
   Under the title rather than in a corner: with two pages the second is
   otherwise found by accident, and the workflow page is half the argument.
   As in the frame, the page being read is bold and black; the other reads as
   the link it is. */
.wr-nav { display: flex; flex-wrap: wrap; gap: 48px; margin: 31px 0 0; }
.wr-nav-link {
  text-decoration: none;
  color: var(--accent-text);
  font-size: var(--t-read);
  font-weight: 400;
  text-transform: capitalize;
}
.wr-nav-link:hover { text-decoration: underline; }
.wr-nav-link[aria-current='page'] { color: var(--text); font-weight: 700; }

/* ---- Level filter ----
   These two used to be inert labels. They now filter, which is the only
   honest form for something that looks like a control. */
.wr-level {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 34px 0 0;
}
/* Same two states as the mode control, so one rule holds across the whole
   page: outlined in the text colour and bold is where you are, blue is where
   you can go. It reads on the navigation too — Components black, Workflow
   blue. A filled chip here would have been a third convention. */
.wr-level-chip {
  border: 1.5px solid var(--accent-text);
  border-radius: 999px;
  background: transparent;
  color: var(--accent-text);
  padding: 5px 13px;
  font: inherit;
  font-size: var(--t-small);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .06em;
  cursor: pointer;
}
.wr-level-chip:hover {
  background: color-mix(in srgb, var(--accent-text) 10%, transparent);
}
.wr-level-chip[aria-pressed='true'] {
  border-color: var(--text);
  color: var(--text);
  font-weight: 700;
  background: transparent;
}
/* Set apart by size and weight, not by fading it: at 10px an opacity step
   drops below the contrast floor, and a count nobody can read is decoration. */
.wr-level-count { margin-left: 7px; font-weight: 600; }
.wr-level-note {
  margin: 12px 0 0;
  max-width: 68ch;
  color: var(--text-muted);
  font-size: var(--t-body);
  line-height: 1.5;
}

.wr-component-name { font-size: var(--t-sub); font-weight: 600; margin: 24px 0 10px; }

/* ---- Tabs ---- */
.wr-tabbar { display: flex; align-items: flex-end; gap: 4px; border-bottom: 1px solid var(--panel-border); }
.wr-tab {
  border: none; background: transparent;
  color: var(--tab-text);
  font-size: var(--t-small); font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  padding: 10px 16px; cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.wr-tab[aria-selected='true'] { color: var(--tab-text-active); border-bottom-color: var(--tab-border-active); }
.wr-links { margin-left: auto; align-self: center; display: flex; gap: 14px; }
.wr-ext-link {
  color: var(--accent-text); font-size: var(--t-small); font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em; text-decoration: none;
}
.wr-ext-link:hover { text-decoration: underline; }
/* Not yet linked: visibly pending rather than silently dead. */
.wr-ext-link-empty { color: var(--text-muted); border-bottom: 1px dotted var(--border); }

.wr-panel {
  border: 1px solid var(--panel-border); border-top: none;
  background: var(--panel-bg);
  border-radius: 0 0 8px 8px;
  padding: 20px;
}
.wr-panel[hidden] { display: none; }

/* ---- Control panel ---- */
.wr-console {
  display: grid;
  gap: 16px;                      /* two controls stacked with no gap read as
                                     one control with a stray second row */
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 15px 16px;
  margin-bottom: 20px;
  background: var(--bg);
}
.wr-console-title {
  font-size: var(--t-small); text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-muted); margin: 0;
}
.wr-control { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* Direct child only: a choice item is itself a label, and the shared minimum
   width was being applied to each option as well. */
.wr-control > label { font-size: var(--t-body); min-width: 108px; }
.wr-control input[type='range'] { flex: 1; accent-color: var(--accent-solid); max-width: 320px; }
.wr-control output {
  font-variant-numeric: tabular-nums; font-size: var(--t-body); min-width: 2.5em;
  color: var(--text-muted);
}

/* ---- The prototype ---- */
.wr-stage { padding: 4px 0; }
.wr-field { max-width: 380px; }
.wr-field-label { font-weight: 600; color: var(--label-text); margin-bottom: 8px; }

.wr-radios { display: grid; gap: 6px; }
.wr-radio { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.wr-radio input { accent-color: var(--radio-dot); width: 16px; height: 16px; }
.wr-radio span { color: var(--label-text); }

.wr-select {
  width: 100%;
  background: var(--select-bg);
  border: 1px solid var(--select-border);
  color: var(--select-text);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: var(--t-body);
  font-family: inherit;
}

.wr-fixed {
  background: var(--fixed-bg);
  border-radius: 6px; padding: 8px 10px;
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
}
.wr-fixed-value { color: var(--fixed-text); }
.wr-fixed-note { color: var(--fixed-note-text); font-size: var(--t-body); }

.wr-empty { color: var(--text-muted); font-style: italic; margin: 0; }

/* The trace: which branch of the rule is active. Not for production. */
.wr-trace {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 16px; padding: 5px 10px;
  background: var(--trace-bg); border: 1px solid var(--trace-border);
  border-radius: 999px; color: var(--trace-text); font-size: var(--t-body);
}
.wr-trace-form { font-weight: 600; }
.wr-trace-arrow { opacity: .6; }

/* ---- RULES ---- */
.wr-rule-head { margin: 0 0 4px; font-size: var(--t-read); }
.wr-rule-statement {
  font-size: var(--t-read); margin: 0 0 18px; padding: 10px 12px;
  background: var(--accent-bg); border-left: 3px solid var(--accent-solid);
  border-radius: 0 6px 6px 0; color: var(--text);
}
.wr-rule-section { margin: 0 0 18px; }
.wr-rule-section > h4 {
  font-size: var(--t-small); text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-muted); margin: 0 0 6px;
}
.wr-rule-section p { margin: 0; max-width: 68ch; }
.wr-edge { border-top: 1px solid var(--border); padding: 8px 0; }
.wr-edge:last-child { border-bottom: 1px solid var(--border); }
.wr-edge dt { font-weight: 600; font-size: var(--t-body); }
.wr-edge dd { margin: 2px 0 0; color: var(--text-muted); max-width: 68ch; }

.wr-open { border-left: 3px solid var(--slate-9); padding-left: 12px; }
.wr-open li { margin-bottom: 6px; max-width: 66ch; }

.wr-prov { font-size: var(--t-body); color: var(--text-muted); }
.wr-prov li { margin-bottom: 4px; }

/* ---- CODE ---- */
.wr-code {
  background: var(--code-bg); color: var(--code-text);
  border-radius: 8px; padding: 16px; overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--t-small); line-height: 1.6; margin: 0;
}
.wr-code-note { color: var(--text-muted); font-size: var(--t-body); margin: 0 0 10px; max-width: 68ch; }

/* ---- Somewhere to start ----
   Below the decision, never above it: the decision is what is being handed
   over and holds across versions, this is one stack's way of calling it. */
.wr-wiring {
  margin: 22px 0 0; padding: 18px 0 0;
  border-top: 1px solid var(--border);
}
.wr-wiring-title {
  margin: 0 0 6px; font-size: var(--t-body); font-weight: 700;
}
.wr-wiring-caveat {
  margin: 0 0 16px; max-width: 70ch;
  color: var(--text-muted); font-size: var(--t-body); line-height: 1.5;
}
.wr-file {
  margin: 14px 0 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--t-small); color: var(--text-muted);
}
.wr-file:first-of-type { margin-top: 0; }

/* ---- The contract ----
   Above the snippet, because it is the part that answers "what do I do with
   this". The code below it is evidence; this is the handover. */
.wr-contract {
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent-solid);
  border-radius: 8px;
  padding: 14px 16px 4px;
  margin: 0 0 16px;
  background: var(--bg);
}
.wr-contract-title {
  margin: 0 0 10px; font-size: var(--t-small); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted);
}
.wr-contract-io { margin: 0 0 12px; display: grid; gap: 5px; }
.wr-contract-io > div { display: grid; grid-template-columns: 68px 1fr; gap: 10px; align-items: baseline; }
.wr-contract-io dt {
  font-size: var(--t-small); font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-muted);
}
.wr-contract-io dd { margin: 0; }
.wr-contract-io code, .wr-contract-wire code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--t-body);
}
.wr-contract-wire { width: 100%; border-collapse: collapse; font-size: var(--t-body); }
.wr-contract-wire th {
  text-align: left; font-size: var(--t-small); text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); font-weight: 700;
  padding: 0 12px 5px 0; border-bottom: 1px solid var(--border);
}
.wr-contract-wire td {
  padding: 7px 12px 7px 0; border-bottom: 1px solid var(--border);
  vertical-align: top; line-height: 1.45;
}
.wr-contract-wire th:first-child, .wr-contract-wire td:first-child { width: 30%; }
.wr-contract-wire tr:last-child td { border-bottom: 0; }
.wr-contract-note {
  margin: 10px 0 12px; color: var(--text-muted); font-size: var(--t-body);
  line-height: 1.5; max-width: 70ch;
}

/* ---- Copy ----
   Inside the block rather than above it, so it stays attached to the thing it
   copies when the snippet scrolls sideways. */
.wr-code-wrap { position: relative; }
.wr-copy {
  position: absolute; top: 10px; right: 10px; z-index: 1;
  display: inline-flex; align-items: center; gap: 6px;
  /* Percentages chosen so the outline clears 3:1 against the block behind it.
     An opacity step used to sit on top of this and quietly undid it — the
     measurement is of the computed colour, the eye sees what opacity leaves. */
  border: 1px solid color-mix(in srgb, var(--code-text) 55%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--code-text) 16%, transparent);
  color: var(--code-text);
  font: inherit; font-size: var(--t-small); font-weight: 600;
  padding: 5px 9px; cursor: pointer;
}
.wr-copy svg { width: 13px; height: 13px; }
.wr-copy:hover { background: color-mix(in srgb, var(--code-text) 26%, transparent); }
/* The code block is inverted relative to the page, so the ring on it is too. */
.wr-copy:focus-visible { outline-color: var(--code-text); }
.wr-copy-done { border-color: var(--accent-solid); }
/* The snippet's first line must not run under the button. */
.wr-code-wrap .wr-code { padding-right: 92px; }

.wr-foot {
  margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--border);
  color: var(--text-muted); font-size: var(--t-body); max-width: 70ch;
}

/* ============================================================================
   Multiple components on one page
   ========================================================================= */

.wr-component { margin-bottom: 56px; }

/* A rule between components rather than more air. Three workbenches stacked
   with only whitespace between them read as one long page: the control panel
   of the second sits close enough to the trace of the first to look like part
   of it. */
.wr-component + .wr-component {
  border-top: 1px solid var(--border);
  padding-top: 10px;
}

.wr-component-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 30px 0 12px; }
.wr-kind, .wr-level-tag {
  font-size: var(--t-small); font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
/* The rule type is the sharper of the two labels, so it carries the outline;
   the level is context and stays quiet. */
.wr-kind {
  color: var(--text);
  border: 1px solid var(--border);
}
.wr-level-tag {
  color: var(--text);
  background: var(--surface-sunk);
}

/* ---- The change-of-address form ---- */
.wr-form { display: grid; gap: 14px; max-width: 460px; }
.wr-form-row { display: grid; gap: 5px; }
.wr-form-label { font-size: var(--t-body); font-weight: 600; }

/* Revealed fields carry a marker, so it is visible at a glance which parts of
   the form are there because of an answer and which are always present. */
.wr-form-row-revealed {
  border-left: 2px solid var(--accent-border);
  padding-left: 12px;
  margin-left: -14px;
}

.wr-input {
  background: var(--select-bg); border: 1px solid var(--select-border);
  color: var(--select-text); border-radius: 6px;
  padding: 8px 10px; font-size: var(--t-body); font-family: inherit; width: 100%;
}
.wr-input::placeholder { color: var(--text-muted); }

.wr-child-stack { display: grid; gap: 8px; }
.wr-child { display: flex; align-items: center; gap: 10px; }
.wr-child-num {
  flex: none; width: 22px; height: 22px; border-radius: 999px;
  background: var(--surface-sunk); color: var(--text-muted);
  font-size: var(--t-small); display: grid; place-items: center;
}

/* ---- Trace block for the conditional rule ---- */
/* Reaches for the component tokens, not the semantic ones underneath them.
   It had been using --accent-text directly, which is how it kept the 4.25:1
   the token layer was already set up to avoid. */
.wr-trace-block {
  margin-top: 20px; padding: 12px 14px;
  background: var(--trace-bg); border: 1px solid var(--trace-border);
  border-radius: 8px; font-size: var(--t-body); color: var(--trace-text);
}
.wr-trace-title { font-weight: 700; margin-bottom: 6px; }
.wr-trace-line { margin-bottom: 3px; }
.wr-trace-line code { font-size: var(--t-small); }
.wr-trace-kept {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid var(--trace-border); font-style: italic;
}

/* ---- Conditions table in the Rules tab ---- */
.wr-cond { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.wr-cond th {
  text-align: left; font-size: var(--t-small); text-transform: uppercase;
  letter-spacing: .06em; color: var(--text-muted);
  padding: 0 10px 6px 0; border-bottom: 1px solid var(--border);
}
.wr-cond td { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--border); vertical-align: top; }
.wr-cond-label { color: var(--text-muted); font-size: var(--t-small); margin-top: 2px; }
.wr-cond-base { margin: 10px 0 0; color: var(--text-muted); font-size: var(--t-body); }

/* ============================================================================
   Where the rules sit in Figma
   ========================================================================= */

.wr-origin {
  margin: 56px 0 0; padding: 24px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg);
}
.wr-origin-title { font-size: var(--t-read); margin: 0 0 8px; }
.wr-origin-lead { margin: 0 0 20px; color: var(--text-muted); max-width: 64ch; }

.wr-origin-split { display: grid; gap: 20px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .wr-origin-split { grid-template-columns: 1fr 1fr; } }

.wr-origin-figure { margin: 0; }
.wr-origin-figure img {
  width: 100%; height: auto; display: block;
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg);
}
.wr-origin-figure figcaption {
  margin-top: 8px; font-size: var(--t-small); color: var(--text-muted);
}
.wr-origin-caption {
  font-size: var(--t-small); text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-muted); margin: 0 0 6px;
}
.wr-origin-quote {
  margin: 0; padding: 12px 14px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--t-small); line-height: 1.6; white-space: pre-wrap;
  color: var(--text); overflow-x: auto;
}
.wr-origin-foot { margin: 20px 0 0; color: var(--text-muted); max-width: 64ch; font-size: var(--t-body); }

/* ---- Waiting list ---- */
.wr-list { font-size: var(--t-body); }
.wr-list-row {
  display: grid;
  grid-template-columns: 52px var(--name-col, 300px) 70px 46px;
  gap: 12px; align-items: start;
  padding: 7px 0; border-bottom: 1px solid var(--border);
}
.wr-list-head {
  font-size: var(--t-small); text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted); border-bottom-color: var(--border);
}
.wr-col-ticket { font-variant-numeric: tabular-nums; color: var(--text-muted); }
.wr-col-name { min-width: 0; }
.wr-col-waited, .wr-col-desk { font-variant-numeric: tabular-nums; color: var(--text-muted); }

.wr-name-line { display: inline; }
.wr-name-line2 { display: block; }
.wr-name-original { color: var(--text-muted); }

/* The last rung: the family name alone is wider than the column. It wraps at
   spaces and hyphens and the row grows taller.
   No scroll and no fade — an earlier version had both, and a faded edge
   looks exactly like the cut-off name the rule forbids. Whatever is on
   screen has to be either the whole name or visibly an abbreviation; there
   is no third state a reader can be expected to tell apart. */
.wr-col-name[data-step='wrap'] {
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}
.wr-col-name[data-step='wrap'] .wr-name-line2 {
  border-bottom: 1px dotted var(--accent-border);
}

.wr-ladder { margin: 0; padding-left: 20px; }
.wr-ladder li { margin-bottom: 5px; max-width: 68ch; }
.wr-trace-line-off { opacity: .45; }

/* Two fields per child: name and date of birth are validated differently and
   corrected independently, so they never share one input. */
.wr-child { align-items: start; }
.wr-child-pair { display: grid; grid-template-columns: 1fr auto; gap: 8px; flex: 1; }
.wr-input-date { width: auto; }
@media (max-width: 520px) {
  .wr-child-pair { grid-template-columns: 1fr; }
  .wr-input-date { width: 100%; }
}

/* ============================================================================
   The flow page
   ========================================================================= */

.wr-flow { list-style: none; margin: 32px 0 48px; padding: 0; }

.wr-step {
  position: relative;
  padding: 0 0 24px 44px;
  border-left: 2px solid var(--border);
  margin-left: 13px;
}
.wr-step:last-child { border-left-color: transparent; padding-bottom: 0; }

.wr-step-num {
  position: absolute; left: -14px; top: 0;
  width: 26px; height: 26px; border-radius: 999px;
  background: var(--bg); border: 2px solid var(--border);
  color: var(--text-muted);
  font-size: var(--t-body); font-weight: 700;
  display: grid; place-items: center;
}

/* The step this page is served from. Marked so the reader can place
   themselves in the process rather than having to work it out. */
/* Filled with the link blue, not the solid one: white on blue-9 measures
   3.26:1, and a 14px numeral is not large text. */
.wr-step-here > .wr-step-head .wr-step-num {
  background: var(--accent-text); border-color: var(--accent-text);
  /* Not #fff: the fill is repointed per mode, so the numeral on it has to be
     too. In dark the link blue is the light one and white on it is 2.1:1. */
  color: var(--bg);
}
.wr-step-here { border-left-color: var(--accent-border); }

.wr-step-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.wr-step-head h2 { font-size: var(--t-read); margin: 0; }
.wr-step p { margin: 0 0 10px; max-width: 62ch; }
.wr-step p.wr-step-note {
  color: var(--text-muted); font-size: var(--t-body);
  border-left: 2px solid var(--border); padding-left: 12px;
  max-width: 60ch;
}

.wr-step p.wr-question {
  font-size: var(--t-read); font-weight: 600;
  background: var(--accent-bg); border: 1px solid var(--accent-border);
  border-radius: 8px; padding: 12px 14px; color: var(--text);
}

/* Status is stated everywhere, because a process diagram that does not
   distinguish what runs from what is intended reads as a promise. */
/* Set in the text colour, not a lighter one. At 10px uppercase, muted grey on
   white was reading as disabled — and these chips carry the one thing the flow
   page has to be unambiguous about: what exists and what does not.
   The states are told apart by border and fill, never by fading the label. */
.wr-status {
  font-size: var(--t-small); font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  border-radius: 999px; padding: 3px 9px; white-space: nowrap;
  border: 1px solid var(--border); color: var(--text);
}
/* Step 12 on blue-3, for the same reason as the trace block: step 11 lands
   at 4.25:1 there, and these chips are 11px. */
.wr-status-built   { border-color: var(--accent-border); color: var(--blue-12); background: var(--accent-bg); }
.wr-status-planned { border-style: dashed; background: var(--surface-sunk); }
.wr-status-manual  { border-style: dashed; background: var(--surface-sunk); }
.wr-status-next    { border-color: var(--text); }
.wr-status-theirs  { background: var(--surface-sunk); }

.wr-payoff { margin: 0; padding-left: 20px; }
.wr-payoff li { margin-bottom: 12px; max-width: 62ch; }


/* ---- Strategy choice in the control panel ---- */
/* Two columns rather than one long line: four options side by side sit too
   close to compare, and the rejected one loses the space its tag needs. */
.wr-choice { display: grid; grid-template-columns: repeat(2, minmax(0, 210px)); gap: 9px 20px; }
@media (max-width: 620px) { .wr-choice { grid-template-columns: 1fr; } }
.wr-choice-item { display: flex; align-items: center; gap: 6px; font-size: var(--t-body); cursor: pointer; }
.wr-choice-item input { accent-color: var(--accent-solid); }
.wr-choice-rejected span:first-of-type { color: var(--text-muted); }
.wr-choice-tag {
  font-size: var(--t-small); text-transform: uppercase; letter-spacing: .06em;
  border: 1px dashed var(--border); border-radius: 999px;
  padding: 1px 6px; color: var(--text-muted);
}
.wr-trace-block-rejected {
  background: var(--surface-sunk);
  border-color: var(--border);
  color: var(--text-muted);
}
.wr-edge-rejected dt { color: var(--text-muted); }
.wr-edge dt .wr-status { margin-left: 6px; vertical-align: middle; }
.wr-origin-figure-second { margin-top: 16px; }
.wr-origin-caption-foot { margin: 8px 0 0; text-transform: none; letter-spacing: 0; font-size: var(--t-small); }


.wr-page-heading { font-size: var(--t-head); margin: 30px 0 8px; }
.wr-page-lead { color: var(--text-muted); margin: 0; max-width: 62ch; }


/* ============================================================================
   Reading size — flow page only
   ----------------------------------------------------------------------------
   The components page is a workbench: prose sits next to a data table and a
   control panel, and 16px body copy beside a 13px table makes the table look
   like small print. The flow page has nothing to compete with and is meant to
   be read end to end, so it gets reading sizes.
   ========================================================================= */

.wr-flow-page .wr-page-lead,
.wr-flow-page .wr-step > p,
.wr-flow-page .wr-origin-lead,
.wr-flow-page .wr-payoff li {
  font-size: var(--t-read);
  line-height: 1.55;
}
.wr-flow-page .wr-step p.wr-step-note { font-size: var(--t-body); line-height: 1.5; }
.wr-flow-page .wr-step p.wr-question  { font-size: var(--t-sub); }
.wr-flow-page .wr-step-head h2        { font-size: var(--t-sub); }
.wr-flow-page .wr-origin-title        { font-size: var(--t-sub); margin-bottom: 10px; }
.wr-flow-page .wr-origin-foot         { font-size: var(--t-read); line-height: 1.55; }
.wr-flow-page .wr-page-heading        { font-size: var(--t-head); }
/* The table was still at workbench size while the prose around it had moved to
   reading size, which made it look like small print appended to the argument.
   It carries the argument. */
.wr-flow-page .wr-cond                { font-size: var(--t-read); }
.wr-flow-page .wr-cond th             { font-size: var(--t-small); padding-bottom: 8px; }
.wr-flow-page .wr-cond td             { padding: 13px 14px 13px 0; line-height: 1.5; }
.wr-flow-page .wr-cond-label          { font-size: var(--t-body); margin-top: 3px; }
.wr-flow-page .wr-cond code           { font-size: var(--t-body); }
.wr-flow-page .wr-status              { font-size: var(--t-small); padding: 4px 10px; }
/* The artefact names are the row's handle and should not wrap to three lines
   while the status column holds a chip and empty space. */
.wr-flow-page .wr-cond th:first-child,
.wr-flow-page .wr-cond td:first-child { width: 27%; }
.wr-flow-page .wr-cond th:last-child,
.wr-flow-page .wr-cond td:last-child  { width: 1%; white-space: nowrap; }

/* ---- The change trail ----
   Class chips are told apart by border and fill, like the status chips — the
   label itself always carries the text colour. */
.wr-class {
  font-size: var(--t-small); font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  border-radius: 999px; padding: 3px 9px; white-space: nowrap;
  border: 1px solid var(--border); color: var(--text);
}
.wr-class-token     { border-style: dashed; }
.wr-class-rule      { border-color: var(--accent-border); background: var(--accent-bg); color: var(--blue-12); }
.wr-class-structure { border-color: var(--text); }
.wr-class-record    { background: var(--surface-sunk); }

.wr-classes { margin-bottom: 34px; }
/* The flow page's column plan is for the artefact table (wide name column,
   one-chip status column). This table is the other way round — chip first,
   prose last — so both inherited widths are overridden. */
.wr-flow-page .wr-classes th:first-child,
.wr-flow-page .wr-classes td:first-child { width: 1%; white-space: nowrap; }
.wr-flow-page .wr-classes th:nth-child(2),
.wr-flow-page .wr-classes td:nth-child(2) { width: 34%; }
.wr-flow-page .wr-classes th:last-child,
.wr-flow-page .wr-classes td:last-child { width: auto; white-space: normal; }

.wr-trail-date {
  font-size: var(--t-small); font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-muted);
  margin: 26px 0 0; padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}
.wr-trail-entry { padding: 14px 0 4px; border-bottom: 1px solid var(--border); }
.wr-trail-entry:last-child { border-bottom: 0; }
.wr-trail-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.wr-trail-head strong { font-size: var(--t-read); }
.wr-trail-change { margin: 8px 0 6px; max-width: 62ch; font-size: var(--t-read); line-height: 1.55; }
.wr-trail-meta { margin: 0 0 10px; max-width: 70ch; color: var(--text-muted); font-size: var(--t-body); line-height: 1.5; }

/* ---- Signature ---- */
.wr-signature {
  margin-top: 40px; padding-top: 16px;
  border-top: 1px solid var(--border);
  color: var(--text-muted); font-size: var(--t-body);
  display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline;
}
.wr-signature strong { color: var(--text); font-weight: 600; }
.wr-signature a { color: var(--blue-11-deep); text-decoration: none; }
.wr-signature a:hover { text-decoration: underline; }

/* ---- Regulatory note ----
   Visually set apart because it makes a different kind of claim than the rest
   of the page: everything else describes what was built, this one raises a
   question about a domain the author does not own. */
.wr-note {
  margin: 48px 0 0;
  padding: 22px 24px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent-solid);
  border-radius: 10px;
  background: var(--bg);
}
.wr-note-title { font-size: var(--t-sub); margin: 0 0 8px; }
.wr-note-lead { color: var(--text-muted); margin: 0 0 16px; max-width: 62ch; font-style: italic; }
.wr-note p { max-width: 64ch; margin: 0 0 14px; }
.wr-note-caution {
  border: 1px dashed var(--border);
  border-radius: 8px;
  padding: 14px 16px;
  margin: 18px 0;
  background: var(--bg);
}
.wr-note-caution h3 {
  font-size: var(--t-small); text-transform: uppercase; letter-spacing: .07em;
  color: var(--text-muted); margin: 0 0 10px;
}
.wr-note-caution ul { margin: 0; padding-left: 18px; }
.wr-note-caution li { margin-bottom: 10px; max-width: 62ch; }
.wr-note-caution li:last-child { margin-bottom: 0; }
.wr-note-foot { color: var(--text-muted); margin: 0; max-width: 64ch; }
.wr-flow-page .wr-note p,
.wr-flow-page .wr-note-caution li { font-size: var(--t-read); line-height: 1.55; }
.wr-flow-page .wr-note-lead { font-size: var(--t-read); line-height: 1.55; }

/* ---- Reveal on hover and focus ----
   Marked with a dotted underline so it is visible that something is hidden;
   an abbreviation nobody knows can be expanded is just an abbreviation. */
.wr-name-reveal { position: relative; cursor: help; }
.wr-name-reveal .wr-name-line { border-bottom: 1px dotted var(--border); }
.wr-name-reveal:focus-visible { outline: 2px solid var(--accent-solid); outline-offset: 2px; border-radius: 3px; }

.wr-name-tip {
  position: absolute; left: 0; top: calc(100% + 6px); z-index: 5;
  display: none; width: max-content; max-width: 280px;
  background: var(--code-bg); color: var(--code-text);
  border-radius: 6px; padding: 6px 9px;
  font-size: var(--t-body); line-height: 1.45;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
/* :focus, not :focus-visible — the ring is only wanted for keyboard users,
   but the tooltip is wanted whenever the cell has focus at all. Anyone who
   clicked into it is asking the same question as anyone who tabbed to it. */
.wr-name-reveal:hover .wr-name-tip,
.wr-name-reveal:focus .wr-name-tip { display: block; }

/* ============================================================================
   Rules tab — reading sizes
   ----------------------------------------------------------------------------
   This panel is the one part of the components page that is genuinely read
   rather than scanned: a rationale is an argument, and an edge case has to be
   understood before it can be built. It gets reading type even though the
   surrounding page does not — the control panel and the prototype next to it
   are interface, this is prose.
   ========================================================================= */

.wr-panel[data-panel='rules'] { padding: 24px 26px 26px; }

.wr-panel[data-panel='rules'] p,
.wr-panel[data-panel='rules'] li,
.wr-panel[data-panel='rules'] dd {
  font-size: var(--t-read);
  line-height: 1.62;
  max-width: 58ch;
}

/* The rule itself, stated once. Large enough to be the thing you read first. */
.wr-panel[data-panel='rules'] .wr-rule-statement {
  font-size: var(--t-sub);
  line-height: 1.5;
  padding: 14px 16px;
  margin-bottom: 26px;
  max-width: 56ch;
}

.wr-rule-head { font-size: var(--t-sub); margin-bottom: 6px; }

/* Section labels get air above them, so the panel reads as parts rather than
   as one column of text. */
.wr-rule-section { margin: 0 0 28px; }
.wr-rule-section > h4 {
  font-size: var(--t-small);
  letter-spacing: .09em;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

/* Rationale often runs to several paragraphs — they need to be separable. */
.wr-rule-section p + p { margin-top: 12px; }

/* Edge cases: the term carries the case, the definition carries the handling.
   Making the term stand out turns the list into something you can scan for
   the one case you are looking for. */
.wr-edge { padding: 12px 0; }
.wr-edge dt { font-size: var(--t-read); font-weight: 650; margin-bottom: 3px; }
.wr-edge dd { color: var(--text-muted); }

.wr-open li, .wr-payoff li { margin-bottom: 10px; }
.wr-open { padding-left: 14px; }

/* Provenance stays small: it is a record, consulted rather than read. */
.wr-panel[data-panel='rules'] .wr-prov li { font-size: var(--t-body); line-height: 1.5; max-width: 74ch; }

/* Tables inside the panel keep their density — a conditions table is data. */
.wr-panel[data-panel='rules'] .wr-cond td,
.wr-panel[data-panel='rules'] .wr-cond th { font-size: var(--t-body); }
.wr-panel[data-panel='rules'] .wr-cond-base { font-size: var(--t-body); max-width: 70ch; }