/* ═══════════════════════════════════════════════════════════════════
   NOVARAIL WAITLIST — page styles.

   Layered on design system v3 ("Hallmark", /theme-v3.css). Everything
   structural (type scale, buttons, records, chips, fields, ledger,
   tape, forms) comes from there; this sheet adds the waitlist's own
   layouts and its art direction, namespaced `wl-`.

   ARCHITECTURE: one route, four staged views. ENTRY (the access
   credential), DEMO (the desk workspace), JOIN (the registration
   card over a three-step process rail), MEMBER (the standing plate,
   with an admitted clearance state). Exactly one is visible at a
   time; waitlist.js drives the swap and the URL.

   ART DIRECTION: a premium digital access bureau. Black is a material
   scored with faint ledger rules; documents are raised paper with
   registration corners and a printed-stack edge; every actionable
   control sits on a surface with a real border; the seal color is
   reserved for level-1 actions and the rail itself.

   Both themes use the --an-* semantic palette from theme-v3.css. The one
   explicit primary-button fill is a contrast-corrected form of the seal
   colour, shared by dark and light.
   ═══════════════════════════════════════════════════════════════════ */

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

/* theme-v3.css sets `body { overflow-x: hidden }`, which makes the body a
   scroll container and silently disables position:sticky for everything
   inside it (the sticky mode tabs and the pinned passport both need it).
   `clip` gives the identical overflow protection WITHOUT creating that
   container. Scoped to this page: waitlist.css loads only here, after
   the theme. Where `clip` is unsupported, sticky simply does not stick,
   which costs nothing but the polish. */
html[data-design="v3"] body { overflow-x: clip; }

/* ...and the ROOT gets the same protection. Without it, any element that
   overflows the frame makes the root element itself horizontally
   scrollable; a trackpad side-swipe then shifts the page left and STAYS
   there, cropping the workspace off the left edge with no visible
   scrollbar (the founder-review Build screenshot). clip forbids that
   scroll entirely and, unlike hidden, creates no scroll container, so
   sticky keeps working. */
html[data-design="v3"] { overflow-x: clip; }

/* THE PAGE SHELL: the page always fills the visible viewport. Short
   states (member standing, the join card) end with the footer resting on
   the bottom edge instead of a dead band of canvas; tall states push the
   footer below the content as normal flow. No fixed footer, no overlay:
   the main region simply absorbs the slack. */
html[data-design="v3"] body {
  display: flex; flex-direction: column;
  min-height: 100vh; min-height: 100svh;
}
html[data-design="v3"] body > main { flex: 1 0 auto; width: 100%; }

/* WIDTH STRATEGY: a working surface, not an article. The v3 frame token
   is widened page-scoped so the nav, banner, workspace and footer share
   ONE aligned frame. 1520px fills a 1440 desktop edge to edge (minus
   gutters) and caps sanely on larger displays. */
html[data-design="v3"] { --an-max: 1520px; }

/* The workspace column. */
.wl-shell { max-width: var(--an-max); margin: 0 auto; padding: 24px 24px 0; }
.wl-shell > * { min-width: 0; }

/* Skip link: first tab stop, invisible until focused. */
.wl-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--an-surface-2); color: var(--an-ink);
  border: 1px solid var(--an-hairline-2); border-radius: 2px;
  padding: 10px 16px; font-family: var(--an-mono); font-size: .75rem;
  letter-spacing: .12em; text-transform: uppercase;
}
.wl-skip:focus { left: 12px; top: 12px; }

/* ── Nav: an application bar, not a marketing header ─────────────── */
.wl-nav-ctx {
  font-size: .6875rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--an-ink-3); margin-left: -14px; white-space: nowrap;
}
.wl-theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; cursor: pointer;
  background: var(--an-surface-2); border: 1px solid var(--an-hairline-2);
  border-radius: 2px; color: var(--an-ink-2);
  transition: border-color .12s var(--an-ease), color .12s var(--an-ease),
              background .12s var(--an-ease);
}
.wl-theme-toggle:hover { color: var(--an-ink); border-color: var(--an-ink-3); background: var(--an-surface-3); }
.wl-theme-toggle svg { width: 16px; height: 16px; display: block; }
/* One button, two glyphs: show the mode you would switch TO. */
.wl-theme-toggle .wl-ico-light { display: none; }
[data-theme="light"] .wl-theme-toggle .wl-ico-light { display: block; }
[data-theme="light"] .wl-theme-toggle .wl-ico-dark { display: none; }

/* The one persistent claim action. theme-v3 hides nav buttons on small
   screens; this page keeps its single CTA, shortened to fit. */
.wl-nav-join .brief { display: none; }
/* What the claim IS, in four words, riding beside the button. Truthful
   context, not a second CTA: no border, no surface, never clickable. */
.wl-nav-waves {
  font-size: .625rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--an-ink-3); white-space: nowrap; margin-right: 6px;
}
@media (max-width: 900px) { .wl-nav-waves { display: none !important; } }
@media (max-width: 760px) {
  /* min-height 40 inside the 54px bar: a real thumb target. */
  .an-nav-right .wl-nav-join { display: inline-flex; min-height: 40px; }
}
/* The full "Claim your place" label overflows the 54px bar well before
   480px once the back control is present; swap to the brief label while
   the bar still fits, so the nav can never be the page's widest element. */
@media (max-width: 620px) {
  .wl-nav-ctx { display: none; }
  .wl-nav-join .full { display: none; }
  .wl-nav-join .brief { display: inline; }
}

/* The contextual back control. A real control, not passive metadata: it
   sits on a surface with a border, and its label adapts by stage
   (Waitlist / Back to preview / Preview NovaRail). */
.wl-nav-back {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 36px; padding: 0 14px; margin-left: 2px; cursor: pointer;
  background: var(--an-surface-2); border: 1px solid var(--an-hairline-2);
  border-radius: 2px; white-space: nowrap;
  font-family: var(--an-mono); font-size: .6875rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--an-ink-2);
  transition: color .12s var(--an-ease), border-color .12s var(--an-ease),
              background .12s var(--an-ease);
}
.wl-nav-back:hover { color: var(--an-ink); border-color: var(--an-ink-3); background: var(--an-surface-3); }
/* The narrowest phones cannot seat wordmark + back verb + claim CTA on one
   54px rail: the brand folds to its orb, the mark everyone recognises. */
@media (max-width: 400px) {
  .an-nav .an-brand > span { display: none; }
  .wl-nav-back { padding: 0 10px; margin-left: 0; letter-spacing: .08em; }
}

/* ── ACTION HIERARCHY ────────────────────────────────────────────── */
/* LEVEL 1: the seal. Reserved for the one action a screen is about.
   LEVEL 2: raised paper with a real border. Important alternatives.
   LEVEL 3: quiet utility (.wl-linkish) that still reads as a control.
   Passive metadata never gets a surface, a border, or a hover. */
.wl-shell .an-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 0 24px; cursor: pointer; border-radius: 2px;
  background: var(--an-surface-2); border: 1px solid var(--an-hairline-3);
  color: var(--an-ink);
  transition: background .12s var(--an-ease), border-color .12s var(--an-ease),
              color .12s var(--an-ease), transform .06s var(--an-ease);
}
.wl-shell .an-btn:hover { background: var(--an-surface-3); border-color: var(--an-ink-3); color: var(--an-ink); }
.wl-shell .an-btn.small { min-height: 36px; padding: 0 16px; }
.wl-shell .an-btn.primary { background: #CC5A3C; border-color: #CC5A3C; color: #16100D; }
.wl-shell .an-btn.primary:hover { background: #ED5D36; border-color: #ED5D36; }
html[data-design="v3"] .wl-nav-join { background: #CC5A3C; border-color: #CC5A3C; color: #16100D; }
html[data-design="v3"] .wl-nav-join:hover { background: #ED5D36; border-color: #ED5D36; color: #16100D; }
/* Level-1 signature: the two-line rail mark, the brand's own glyph. */
.wl-shell .an-btn.primary::before {
  content: ""; width: 14px; height: 8px; flex: 0 0 auto;
  border-top: 2px solid currentColor; border-bottom: 2px solid currentColor;
}
/* The theme's seal-colored focus ring vanishes on a seal-colored button. */
html[data-design="v3"] .an-btn.primary:focus-visible { outline-color: var(--an-ink); }
/* Size ranks. */
.wl-cta-xl { min-height: 52px; padding: 0 30px; font-size: .8125rem; letter-spacing: .14em; }
.wl-run-btn { min-width: 260px; }

.wl-linkish {
  background: none; border: 0; cursor: pointer; padding: 6px 2px; color: var(--an-ink-2);
  font-family: var(--an-mono); font-size: .6875rem; letter-spacing: .13em;
  text-transform: uppercase; border-bottom: 1px solid var(--an-hairline-3);
  transition: color .12s var(--an-ease), border-color .12s var(--an-ease);
}
.wl-linkish:hover:not([disabled]) { color: var(--an-ink); border-color: var(--an-ink); }
.wl-linkish[disabled] { opacity: .45; cursor: not-allowed; }

/* Inputs are active paper: a shade above the canvas, firmer when focused. */
.wl-shell .an-input, .wl-shell .an-textarea { background: var(--an-surface-2); }
.wl-shell .an-input:focus, .wl-shell .an-textarea:focus {
  background: var(--an-surface-3); border-color: var(--an-ink-3);
}

/* ── Banner (verified / invalid link / returning) ────────────────── */
.wl-banner { border-bottom: 1px solid var(--an-hairline); background: var(--an-surface); }
.wl-banner-in {
  max-width: var(--an-max); margin: 0 auto; padding: 12px 24px;
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
}
.wl-banner .msg { font-size: .875rem; color: var(--an-ink); }
.wl-banner[data-tone="veto"] .an-chip { color: var(--an-veto); border-color: rgba(255,107,94,.4); }

/* ── Stages: one route, four focused views ───────────────────────── */
html[data-design="v3"] .wl-stage:focus { outline: none; }
html[data-design="v3"] .wl-stage:focus-visible { outline: 1px solid var(--an-hairline-3); outline-offset: 6px; }
.wl-stage { min-width: 0; position: relative; }
@media (prefers-reduced-motion: no-preference) {
  .wl-stage:not([hidden]) { animation: wl-stage-in .22s var(--an-ease); }
}
@keyframes wl-stage-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* THE CANVAS AS MATERIAL: faint ledger rules score the document stages
   so the viewport reads as constructed paper, not a void. The desk
   stage stays unruled; the workspace is busy enough. */
.wl-entry::before, .wl-join::before, #stageMember::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(to bottom,
    var(--an-hairline) 0 1px, transparent 1px 132px);
  opacity: .34;
}

/* Type sits ABOVE the material. Copy zones carry an invisible canvas
   backing (extended by a solid shadow ring), so the ledger rules stop at
   a clean rectangular clear-zone around the type instead of striking
   through a word. Centered blocks leave symmetric flanking rules (a
   print device); the rules keep scoring the rest of the canvas. */
.wl-entry-copy, .wl-join-head, .wl-member-head,
.wl-process, .wl-join-refnote, .wl-member-preview {
  position: relative;
  background: var(--an-bg);
  box-shadow: 0 0 0 18px var(--an-bg);
}
/* Side-by-side entry: the clear zone runs to the credential's edge, so no
   orphaned rule fragment floats in the gutter between copy and document. */
@media (min-width: 1081px) {
  /* Generous on purpose: any overshoot disappears under the credential,
     which paints later on its own solid surface. */
  .wl-entry-copy { padding-right: 220px; margin-right: -220px; }
}

/* Registration corners: the printed tick marks a bureau puts on a form. */
.wl-corner {
  position: absolute; width: 10px; height: 10px; pointer-events: none;
  border: 0 solid var(--an-ink-3); opacity: .55;
}
.wl-corner.tl { top: 6px; left: 6px; border-top-width: 1px; border-left-width: 1px; }
.wl-corner.tr { top: 6px; right: 6px; border-top-width: 1px; border-right-width: 1px; }
.wl-corner.bl { bottom: 6px; left: 6px; border-bottom-width: 1px; border-left-width: 1px; }
.wl-corner.br { bottom: 6px; right: 6px; border-bottom-width: 1px; border-right-width: 1px; }

/* ── STAGE · ENTRY ───────────────────────────────────────────────── */
.wl-entry { padding: 8px 0 32px; }
/* The minimum leaves room for the integration rail to surface at
   1440x900 without squashing the composition: the hero ends where its
   content ends, and the rail reads as its natural conclusion — never a
   dead band of canvas between them. */
.wl-entry-grid {
  min-height: clamp(440px, calc(100svh - 330px), 760px);
  display: grid; grid-template-columns: minmax(380px, 520px) minmax(430px, 640px);
  justify-content: space-between; align-items: center; gap: 48px 80px;
}
.wl-entry-grid > * { min-width: 0; }

.wl-kicker { display: inline-flex; align-items: center; gap: 9px; }
.wl-kicker::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--an-seal); flex: 0 0 auto;
}
.wl-entry-copy h1 {
  margin-top: 20px; font-weight: 600;
  font-size: clamp(2.7rem, 5vw, 4.4rem);
  line-height: .99; letter-spacing: -.03em; color: var(--an-ink);
}
.wl-entry-sub {
  margin-top: 22px; font-size: 1.0625rem; line-height: 1.6;
  color: var(--an-ink-2); max-width: 42ch;
}
.wl-entry-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 34px; }
.wl-entry-meta {
  display: inline-block; margin-top: 28px; padding-top: 13px;
  border-top: 1px dotted var(--an-hairline-2);
  font-size: .625rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--an-ink-3);
}

/* THE ACCESS CREDENTIAL: a printed NovaRail document. Raised paper, a
   registration frame, the seal, an access ledger, the rail with its
   three checks, and an MRZ strip. Marked Specimen because it is one. */
.wl-entry-visual { min-width: 0; }
.wl-credential {
  position: relative;
  background: var(--an-surface); border: 1px solid var(--an-hairline-2);
  border-radius: 2px; box-shadow: 5px 5px 0 var(--an-hairline);
}
.wl-cred-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; padding: 18px 24px 16px; border-bottom: 1px solid var(--an-hairline);
}
.wl-cred-doc {
  display: block; margin-top: 6px; font-weight: 600; font-size: 1.0625rem;
  letter-spacing: -.01em; color: var(--an-ink);
}
.wl-cred-serial {
  text-align: right; font-size: .625rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--an-ink-3); line-height: 1.8;
}
.wl-cred-serial b {
  display: block; font-weight: 400; color: var(--an-pending);
  border: 1px dashed var(--an-pending); border-radius: 2px;
  padding: 1px 6px; margin-top: 3px;
}
.wl-cred-body {
  display: grid; grid-template-columns: 150px 1fr; gap: 28px;
  align-items: center; padding: 24px;
}
.wl-cred-body > * { min-width: 0; }
.wl-cred-seal { width: 150px; height: 150px; }
.wl-cred-seal svg { width: 100%; height: 100%; display: block; }
.wl-cred-fields .an-field { padding: 7px 0; }
/* Credential values are short prose ("Pre-launch", "In waves"), not DIDs:
   the theme's break-all splits them letter-by-letter in the narrow column
   at phone widths. break-word (not `anywhere`) so min-content stays the
   longest word and the dotted leader is what gives ground. */
.wl-cred-fields .an-field .v { color: var(--an-ink); word-break: normal; overflow-wrap: break-word; }
.wl-cred-status { color: var(--an-cleared) !important; }

.wl-cred-rail { position: relative; padding: 33px 24px 24px; border-top: 1px solid var(--an-hairline); }
.wl-cred-line {
  position: absolute; left: 0; right: 0; top: 44px; height: 8px;
  border-top: 2px solid var(--an-seal); border-bottom: 2px solid var(--an-seal);
  opacity: .9; transform-origin: left center;
}
.wl-cred-stations {
  list-style: none; position: relative;
  display: flex; justify-content: space-between; gap: 10px;
}
.wl-cred-stations li {
  display: flex; flex-direction: column; gap: 12px; align-items: center;
  flex: 0 1 auto; min-width: 0;
}
.wl-cred-stations .tick {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--an-bg); border: 1px solid var(--an-hairline-3);
  display: flex; align-items: center; justify-content: center;
}
.wl-cred-stations .tick::after {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--an-seal);
}
.wl-cred-stations .lbl {
  font-size: .5625rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--an-ink-3); text-align: center;
}
.wl-cred-mrz {
  border-top: 1px dotted var(--an-hairline-2); padding: 13px 24px;
  overflow: hidden; white-space: nowrap;
}

/* ── THE INTEGRATION RAIL ────────────────────────────────────────── */
/* One quiet horizontal conveyor beneath the hero, one config
   (waitlist.js INTEGRATION_SHOWCASE). The GROUP moves — one track at
   constant speed, right to left, seamlessly looped by a duplicated
   aria-hidden copy. The quieter agent-source line sits statically
   below it. Marks are official monochrome SVGs rendered via CSS mask
   in the theme's ink — legible in both themes, cohesive with the
   bureau language, recognizable by shape. Never a link, never
   focusable, never a card or a pill. */

/* THE MARK: one masked glyph. --mark is set per element from config. */
.wl-mark {
  display: block; width: 30px; height: 30px;
  background: var(--an-ink-2); opacity: .62;
  -webkit-mask: var(--mark) no-repeat center / contain;
  mask: var(--mark) no-repeat center / contain;
}
.wl-mark-sm { width: 17px; height: 17px; opacity: .6; }
/* FAILURE fallback only (asset missing): the name in the footprint. */
.wl-mark-fallback {
  display: inline-flex; align-items: center; min-height: 30px;
  font-size: .625rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--an-ink-2);
}

/* THE RAIL BOARD: the hero's quiet foundation, not footer content. */
.wl-reelboard { position: relative; margin-top: clamp(18px, 3.5vh, 40px); }
.wl-board-title { display: block; margin-bottom: 12px; }
.wl-board-verb {
  flex: 0 0 auto; align-self: center; margin-right: 8px;
  font-size: .5625rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--an-ink-3); white-space: nowrap;
}
.wl-board-rail {
  position: relative; display: flex; gap: 20px; align-items: center;
  padding: 15px 2px;
}
/* The content remains aligned to the controlled frame, while the physical
   rail itself meets both viewport edges. This is infrastructure spanning the
   screen, not a card stretched to 100vw. */
.wl-board-rail::before {
  content: ""; position: absolute; pointer-events: none;
  top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);
  border-top: 1px solid var(--an-hairline);
  border-bottom: 1px solid var(--an-hairline);
}
/* The conveyor window clips; a fade at both edges so marks enter and
   leave like traffic on a rail, not a hard crop. */
.wl-marquee-window {
  flex: 1 1 auto; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}
/* The track carries TWO copies of the list; translating it by exactly
   one copy's width (-50% of the track) makes the loop seamless — the
   second copy is already continuing the line when the first exits. */
.wl-marquee-track { display: flex; width: max-content; }
.wl-marquee-copy {
  list-style: none; display: flex; align-items: center; margin: 0; padding: 0;
}
/* Optical spacing between logo footprints. */
.wl-board-item { display: flex; padding: 4px 30px; }
.wl-board-item .wl-mark { transition: opacity .15s var(--an-ease); }
.wl-board-item:hover .wl-mark { opacity: .95; }
@media (prefers-reduced-motion: no-preference) {
  .wl-marquee-track {
    animation-name: wl-marquee-drift; animation-timing-function: linear;
    animation-iteration-count: infinite;
  }
  /* Reading beats motion: hover or a background tab freezes the rail. */
  .wl-board-rail:hover .wl-marquee-track,
  .wl-reelboard.is-paused .wl-marquee-track { animation-play-state: paused; }
}
/* Horizontal only, constant speed, no vertical component — ever. */
@keyframes wl-marquee-drift { to { transform: translateX(-50%); } }
/* Reduced motion: a stationary rail. The duplicate copy is motion
   plumbing only — hidden — and the one true list wraps cleanly. */
@media (prefers-reduced-motion: reduce) {
  .wl-marquee-track { animation: none; width: auto; }
  .wl-marquee-copy { flex-wrap: wrap; }
  .wl-marquee-copy[aria-hidden="true"] { display: none; }
  .wl-marquee-window { -webkit-mask-image: none; mask-image: none; }
}
/* The agent-source line: deliberately quieter, half the rail's scale,
   STATIC — one moving surface is the budget. */
.wl-board-src {
  display: flex; gap: 8px 18px; align-items: center; flex-wrap: wrap;
  padding: 11px 2px 0;
}
.wl-board-srclist {
  list-style: none; display: flex; flex-wrap: wrap;
  gap: 8px 20px; align-items: center;
}
.wl-board-srcitem { display: inline-flex; align-items: center; gap: 7px; }
.wl-board-srcname {
  font-size: .625rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--an-ink-3);
}
/* MCP is a protocol, not a company: a printed protocol chip. */
.wl-mcp-chip {
  display: inline-flex; align-items: center; padding: 2px 7px;
  border: 1px dashed var(--an-hairline-3); border-radius: 2px;
  font-size: .625rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--an-ink-3);
}
@media (max-width: 900px) {
  .wl-board-rail { flex-direction: column; align-items: stretch; gap: 8px; padding-bottom: 12px; }
  .wl-board-verb { align-self: flex-start; }
  .wl-board-item { padding: 4px 22px 4px 0; margin-right: 14px; }
}

/* The credential assembles once: head, ledger, rail, strip, then the
   seal strikes (hallmark.js). Reduced motion gets the settled document. */
@media (prefers-reduced-motion: no-preference) {
  .wl-cred-head { animation: wl-cred-in .3s var(--an-ease) .05s both; }
  .wl-cred-body { animation: wl-cred-in .3s var(--an-ease) .14s both; }
  .wl-cred-rail { animation: wl-cred-in .3s var(--an-ease) .22s both; }
  .wl-cred-mrz { animation: wl-cred-in .3s var(--an-ease) .3s both; }
  .wl-cred-line { animation: wl-rail-draw .45s var(--an-ease) .3s both; }
  .wl-cred-stations li { opacity: 0; animation: wl-station-in .28s var(--an-ease) forwards; }
  .wl-cred-stations li:nth-child(1) { animation-delay: .42s; }
  .wl-cred-stations li:nth-child(2) { animation-delay: .54s; }
  .wl-cred-stations li:nth-child(3) { animation-delay: .66s; }
}
@keyframes wl-cred-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes wl-rail-draw { from { transform: scaleX(0); } }
@keyframes wl-station-in { to { opacity: 1; } }

/* ── STAGE · DEMO ────────────────────────────────────────────────── */

/* PATH SELECTION: one question, three substantial doors. This is the
   demo's opening screen, so it earns entrance-scale type. Question,
   doors, and claim cue read as ONE composed decision stack: a fixed
   optical gap between headline and doors (not a stretched band), the
   whole stack centered in the viewport-sized column. The section still
   claims the viewport height, so the footer stays anchored below. */
.wl-pathsel {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center;
  text-align: center;
  min-height: min(calc(100svh - 200px), 820px);
  padding: clamp(24px, 4vh, 48px) 0 clamp(28px, 5vh, 56px);
}
.wl-pathsel-q {
  margin: 16px auto 0; max-width: 24ch; font-weight: 600;
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  line-height: 1.06; letter-spacing: -.025em; color: var(--an-ink);
}
.wl-paths {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px; width: 100%; max-width: 940px;
  margin: clamp(48px, 7vh, 68px) auto 0;
}
/* The quiet second door: for the visitor who already wants in. */
.wl-pathsel-claim {
  margin-top: clamp(28px, 3.5vh, 36px);
  font-size: .6875rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--an-ink-3);
}
.wl-pathsel-claim-link {
  display: inline-flex; align-items: center; min-height: 44px;
  background: none; border: 0; cursor: pointer; padding: 0 2px; margin-left: 4px;
  font: inherit; letter-spacing: inherit; text-transform: inherit;
  color: var(--an-ink); border-bottom: 1px solid var(--an-seal);
  transition: color .12s var(--an-ease);
}
.wl-pathsel-claim-link:hover { color: var(--an-ink); border-bottom-color: var(--an-ink); }
.wl-path {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 26px 20px 24px; cursor: pointer; min-height: 44px;
  background: var(--an-surface); border: 1px solid var(--an-hairline-2);
  border-radius: 2px; color: inherit; font: inherit; text-align: center;
  box-shadow: 4px 4px 0 var(--an-hairline);
  transition: border-color .12s var(--an-ease), background .12s var(--an-ease),
              transform .1s var(--an-ease), box-shadow .1s var(--an-ease);
}
.wl-path:hover {
  background: var(--an-surface-2); border-color: var(--an-ink-3);
  transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--an-hairline);
}
.wl-path:active { transform: none; box-shadow: 3px 3px 0 var(--an-hairline); }
.wl-path-txt {
  display: flex; flex-direction: column; gap: 8px; align-items: center;
  min-width: 0;
}
.wl-path .nm {
  margin-top: 6px; font-size: .9375rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--an-ink);
  display: flex; align-items: center; gap: 10px;
}
.wl-path .nm::before {
  content: ""; width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%;
  border: 1px solid var(--an-hairline-3);
  transition: background .12s var(--an-ease), border-color .12s var(--an-ease);
}
.wl-path:hover .nm::before { background: var(--an-seal); border-color: var(--an-seal); }
.wl-path .d { font-size: .875rem; line-height: 1.4; color: var(--an-ink-2); }
.wl-path-visual {
  display: flex; align-items: center; justify-content: center;
  width: 84px; height: 72px; color: var(--an-ink-2);
}
.wl-path-visual svg { width: 72px; height: 60px; display: block; }
.wl-path-visual .cbg { fill: var(--an-surface); }
.wl-path:hover .wl-path-visual .cbg { fill: var(--an-surface-2); }
.wl-path-seal { display: block; width: 64px; height: 64px; }
.wl-path-seal svg { width: 100%; height: 100%; display: block; }
/* The doors arrive into position from just below their resting place:
   one short movement, a whisper of stagger, then still. */
@keyframes wl-path-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .wl-paths .wl-path { opacity: 0; animation: wl-path-in .22s var(--an-ease) forwards; }
  .wl-paths .wl-path:nth-child(1) { animation-delay: .05s; }
  .wl-paths .wl-path:nth-child(2) { animation-delay: .1s; }
  .wl-paths .wl-path:nth-child(3) { animation-delay: .15s; }
  .wl-pathsel-claim { opacity: 0; animation: wl-cred-in .22s var(--an-ease) .28s forwards; }
}

/* THE DESK: one bordered workspace object. Before a run it holds only the
   pathbar and the composer, so the composer centers itself in the desk's
   height (margin:auto in the flex column) instead of clinging to the top
   of an oversized box. Once the console prints, content exceeds the
   minimum and everything flows normally. */
.wl-desk {
  border: 1px solid var(--an-hairline); border-radius: 2px;
  background: var(--an-surface);
  display: flex; flex-direction: column;
  min-height: min(620px, calc(100svh - 240px));
}
.wl-desk > .wl-composer { margin-top: auto; margin-bottom: auto; }
html[data-design="v3"] .wl-desk:focus { outline: none; }
html[data-design="v3"] .wl-desk:focus-visible { outline: 1px solid var(--an-hairline-3); outline-offset: 4px; }

/* The chosen path, stated once. Sticky under the nav so switching stays
   one click even deep in a finished run, but quiet: the question was
   already answered. */
.wl-pathbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  position: sticky; top: 60px; z-index: 20; padding: 9px 16px 9px 20px;
  background: var(--an-surface); border-bottom: 1px solid var(--an-hairline);
  border-radius: 2px 2px 0 0;
}
.wl-pathbar-crumb {
  font-size: .6875rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--an-ink-3); display: inline-flex; align-items: center; gap: 7px;
}
.wl-pathbar-crumb::before {
  content: ""; width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%;
  background: var(--an-seal);
}
.wl-pathbar-crumb b { font-weight: 400; color: var(--an-ink); }
.wl-pathbar-change {
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px;
  cursor: pointer; background: var(--an-surface-2);
  border: 1px solid var(--an-hairline-2); border-radius: 2px;
  font-family: var(--an-mono); font-size: .625rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--an-ink-2);
  transition: color .12s var(--an-ease), border-color .12s var(--an-ease),
              background .12s var(--an-ease);
}
.wl-pathbar-change:hover { color: var(--an-ink); border-color: var(--an-ink-3); background: var(--an-surface-3); }

/* ── Composer: the active mode's input owns the desk. Centered head,
   centered controls, one primary action, disclosure as microcopy. ── */
.wl-composer { padding: 30px 24px 34px; animation: wl-mode-in .18s var(--an-ease); }
@keyframes wl-mode-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.wl-composer-head { text-align: center; max-width: 640px; margin: 0 auto 20px; }
.wl-mode-title { font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; color: var(--an-ink); }
.wl-composer-main { max-width: 780px; margin: 0 auto; min-width: 0; }
.wl-brief-input { min-height: 92px; font-family: var(--an-sans); font-size: 1.0625rem; }
.wl-composer-run {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  margin-top: 20px;
}
.wl-runnote {
  display: block; text-align: center; margin-top: 16px;
  font-size: .625rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--an-ink-3);
}

/* The transparent matcher: which family, on which of the visitor's words. */
.wl-matchline {
  font-family: var(--an-mono); font-size: .6875rem; letter-spacing: .08em;
  color: var(--an-ink-3); text-align: center;
}
.wl-matchline:empty { display: none; }
.wl-matched {
  margin-top: 6px; font-family: var(--an-mono); font-size: .6875rem;
  letter-spacing: .06em; color: var(--an-ink-3);
}

/* Example-brief chips: visibly insertable. The plus is the affordance. */
.wl-chiprow { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 12px; }
.wl-chip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 34px;
  background: var(--an-surface-2); cursor: pointer;
  border: 1px dashed var(--an-hairline-3); border-radius: 2px; padding: 0 12px;
  font-family: var(--an-mono); font-size: .6875rem; letter-spacing: .08em;
  color: var(--an-ink-2);
  transition: color .12s var(--an-ease), border-color .12s var(--an-ease),
              background .12s var(--an-ease);
}
.wl-chip::before { content: "+"; font-size: .8125rem; color: var(--an-ink-3); }
.wl-chip:hover { color: var(--an-ink); border-color: var(--an-ink-3); background: var(--an-surface-3); }
.wl-chip:hover::before { color: var(--an-seal); }

/* Build: source radiogroup + the two optional fields. Selected tiles
   carry a seal edge, not just a dot. */
.wl-srcgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.wl-src {
  display: flex; align-items: center; gap: 9px; padding: 12px 14px; cursor: pointer;
  min-height: 46px;
  background: var(--an-surface-2); border: 1px solid var(--an-hairline-2); border-radius: 2px;
  color: var(--an-ink-2); font-family: var(--an-mono); font-size: .6875rem;
  letter-spacing: .08em; text-transform: uppercase; text-align: left;
  transition: color .12s var(--an-ease), border-color .12s var(--an-ease), background .12s var(--an-ease);
}
.wl-src::before {
  content: ""; width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%;
  border: 1px solid var(--an-hairline-3);
}
.wl-src:hover { color: var(--an-ink); border-color: var(--an-ink-3); background: var(--an-surface-3); }
.wl-src[aria-checked="true"] {
  color: var(--an-ink); background: var(--an-surface-3); border-color: var(--an-ink-3);
  box-shadow: inset 2px 0 0 var(--an-seal);
}
.wl-src[aria-checked="true"]::before { background: var(--an-seal); border-color: var(--an-seal); }
.wl-buildfields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }

/* Explore: four equal questions, a balanced 2x2. */
.wl-explore-qs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.wl-question {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  padding: 14px 16px; cursor: pointer; text-align: left; min-height: 48px;
  background: var(--an-surface-2); border: 1px solid var(--an-hairline-2); border-radius: 2px;
  color: inherit; font: inherit;
  transition: border-color .12s var(--an-ease), background .12s var(--an-ease);
}
.wl-question .nm {
  font-family: var(--an-mono); font-size: .6875rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--an-ink-3);
  display: flex; align-items: center; gap: 8px;
}
.wl-question .nm::before {
  content: ""; width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%;
  border: 1px solid var(--an-hairline-3);
}
.wl-question .d { font-size: .9375rem; line-height: 1.35; color: var(--an-ink-2); }
.wl-question:hover { border-color: var(--an-ink-3); background: var(--an-surface-3); }
.wl-question[aria-checked="true"] {
  background: var(--an-surface-3); border-color: var(--an-ink-3);
  box-shadow: inset 2px 0 0 var(--an-seal);
}
.wl-question[aria-checked="true"] .nm { color: var(--an-ink); }
.wl-question[aria-checked="true"] .nm::before { background: var(--an-seal); border-color: var(--an-seal); }
.wl-question[aria-checked="true"] .d { color: var(--an-ink); }

/* ── Run status line ─────────────────────────────────────────────── */
.wl-runstatus {
  padding: 0 24px 12px; font-family: var(--an-mono); font-size: .6875rem;
  letter-spacing: .08em; color: var(--an-ink-3);
}
.wl-runstatus:empty { display: none; }

/* Keep the run clear of the sticky nav + path bar when scrolled to. */
.wl-runstatus, .wl-console { scroll-margin-top: 116px; }

/* ── THE RAIL CONSOLE ────────────────────────────────────────────── */
.wl-console {
  border-top: 1px solid var(--an-hairline); background: var(--an-bg);
  padding: 18px 24px 24px;
  display: flex; flex-direction: column; gap: 14px;
  animation: wl-mode-in .18s var(--an-ease);
}
.wl-console > * { min-width: 0; }

/* The run region receives focus programmatically on run start (so keyboard
   and screen-reader users land where the change happened). A quiet hairline,
   not the seal: red frames read as failure, and this is orientation. */
html[data-design="v3"] .wl-console:focus { outline: none; }
html[data-design="v3"] .wl-console:focus-visible { outline: 1px solid var(--an-hairline-3); outline-offset: 4px; }

/* The job strip: the visitor's own words carry the run. */
.wl-brief {
  border: 1px solid var(--an-hairline); border-left: 2px solid var(--an-seal);
  border-radius: 2px; background: var(--an-surface); padding: 10px 14px;
  display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap;
}
.wl-brief .an-microlabel { flex: 0 0 auto; }
.wl-brief p { font-size: .9375rem; line-height: 1.5; color: var(--an-ink); }

/* The state tracker: THE BIG STATES on one strip. The lifecycle must read
   at a glance, so labels are the strip's loudest type; detail lives in the
   run record. Pending stations are drawn but not asserted. */
.wl-rail {
  list-style: none; display: flex; align-items: stretch;
  border: 1px solid var(--an-hairline); border-radius: 2px;
  background: var(--an-surface); overflow-x: auto;
}
.wl-station {
  flex: 1 1 0; min-width: 122px; display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-left: 1px solid var(--an-hairline);
  border-bottom: 2px solid transparent;
}
.wl-station:first-child { border-left: 0; }
.wl-station-mark {
  width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; margin-top: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--an-bg); border: 1px solid var(--an-hairline-2);
  font-size: .625rem; color: var(--an-ink-3);
}
.wl-station-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wl-station-txt .lbl {
  font-family: var(--an-mono); font-size: .6875rem; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase;
  line-height: 1.35; color: var(--an-ink);
}
.wl-station-txt .st {
  font-family: var(--an-mono); font-size: .5625rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--an-ink-3);
}
.wl-station .st.cleared { color: var(--an-cleared); }
.wl-station .st.pending { color: var(--an-pending); }
.wl-station .st.veto { color: var(--an-veto); }
.wl-station[data-done="0"] { opacity: .34; }
.wl-station[data-done="0"] .st { visibility: hidden; }
.wl-station[data-done="1"] { opacity: 1; transition: opacity .25s var(--an-ease); }
.wl-station[data-done="1"] .wl-station-mark {
  border-color: #CC5A3C; color: #16100D; background: #CC5A3C;
}
/* The station the run is AT: a seal baseline, like a lit board row. */
.wl-station.is-now { background: var(--an-surface-2); border-bottom-color: var(--an-seal); }
/* Stations a failure replay never reaches. */
.wl-station.is-replay-off { opacity: .34; }
.wl-station.is-replay-off .st { visibility: visible; }

/* THE BIG STATE: the outcome stamped in one glance. Prints (steps) when
   the run completes; re-stamps when a verdict replay changes it. */
.wl-bigstate {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px 24px; flex-wrap: wrap; padding: 14px 18px;
  border: 1px solid var(--an-hairline-2); border-left: 3px solid var(--an-cleared);
  border-radius: 2px; background: var(--an-surface);
}
.wl-bigstate .word {
  font-size: clamp(1.05rem, 2vw, 1.4rem); letter-spacing: .18em;
  text-transform: uppercase; color: var(--an-cleared);
}
.wl-bigstate .amt {
  font-size: clamp(.8125rem, 1.4vw, 1rem); letter-spacing: .06em;
  color: var(--an-ink); font-variant-numeric: tabular-nums;
}
.wl-bigstate[data-tone="pending"] { border-left-color: var(--an-pending); }
.wl-bigstate[data-tone="pending"] .word { color: var(--an-pending); }
.wl-bigstate[data-tone="veto"] { border-left-color: var(--an-veto); }
.wl-bigstate[data-tone="veto"] .word { color: var(--an-veto); }
@media (prefers-reduced-motion: no-preference) {
  .wl-bigstate.is-stamped { clip-path: inset(0 100% 0 0); animation: wl-art-print 260ms steps(26) forwards; }
}

/* Passport + run record beside the stage. The document column earns real
   width so passport values and the MRZ sit comfortably. */
.wl-console-grid { display: grid; grid-template-columns: minmax(320px, 400px) minmax(0, 1fr); gap: 20px; align-items: start; }
.wl-console-grid > * { min-width: 0; }
.wl-console-stage { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* The document column is shorter than the stage column; pinning it keeps the
   passport beside the work it certifies instead of leaving a hole. Guarded on
   height: if the card cannot fit above the fold, pinning would put its lower
   half out of reach. */
@media (min-width: 981px) and (min-height: 700px) {
  .wl-console-doc { position: sticky; top: 126px; }
}

/* Passport values are short prose, not hashes: the theme's word-break:
   break-all (right for DIDs) splits words like "observed run" mid-word. */
.wl-console-doc .an-field .v { word-break: normal; overflow-wrap: anywhere; }

/* "sample" marker on the passport head. The record numbers are the most
   claim-like thing on the page, so the label sits ON them, not only in the
   disclosure line further down. */
.wl-sample {
  display: inline-block; margin-left: 6px; padding: 1px 5px;
  border: 1px dashed var(--an-hairline-2); border-radius: 2px;
  /* .625rem, not the footer's .5625rem: this label is the difference between
     a sample record and a claim, so it has to be readable at 320px. */
  font-family: var(--an-mono); font-size: .625rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--an-ink-3);
}

/* Why this agent holds this tier. A badge without its reason is decoration. */
.wl-tier-why {
  margin-top: 12px; padding-top: 10px; border-top: 1px dotted var(--an-hairline);
  font-size: .75rem; line-height: 1.5; color: var(--an-ink-3);
}

/* Passport facts are ledger rows; capabilities are the one true tag group.
   The explicit heading makes the squared visas read as metadata, never doors. */
.wl-pass-capabilities {
  margin-top: 12px; padding-top: 10px; border-top: 1px dotted var(--an-hairline);
  display: grid; gap: 8px;
}
.wl-pass-capabilities .an-visa { cursor: default; }

/* The full run record: every station's detail, on demand. */
.wl-runrecord {
  margin-top: 12px; border: 1px solid var(--an-hairline); border-radius: 2px;
  background: var(--an-surface);
}
.wl-runrecord summary {
  list-style: none; cursor: pointer; padding: 11px 14px;
  display: flex; align-items: center; gap: 10px;
}
.wl-runrecord summary::-webkit-details-marker { display: none; }
.wl-runrecord summary::after {
  content: "+"; margin-left: auto; font-family: var(--an-mono);
  font-size: .8125rem; color: var(--an-ink-3);
}
.wl-runrecord[open] summary::after { content: "–"; }
.wl-runrecord summary:hover { background: var(--an-surface-2); }
.wl-runrecord summary:hover .an-microlabel { color: var(--an-ink-2); }
.wl-runrecord[open] summary { border-bottom: 1px solid var(--an-hairline); }
.wl-runrecord .wl-steps { padding: 2px 14px 6px; }

/* Steps (inside the run record): a drawn line with stations. */
.wl-steps { list-style: none; }
.wl-step {
  display: grid; grid-template-columns: 26px 1fr auto; gap: 14px;
  padding: 12px 0; position: relative; align-items: start;
  border-bottom: 1px solid var(--an-hairline);
}
.wl-step:last-child { border-bottom: 0; }
.wl-step::before {
  content: ""; position: absolute; left: 12px; top: 0; bottom: 0;
  width: 1px; background: var(--an-hairline-2);
}
.wl-step:first-child::before { top: 20px; }
.wl-step:last-child::before { bottom: auto; height: 20px; }
.wl-step-mark {
  position: relative; z-index: 1; width: 25px; height: 25px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--an-bg); border: 1px solid var(--an-hairline-2);
  font-family: var(--an-mono); font-size: .625rem; color: var(--an-ink-3);
}
.wl-step h4 { font-size: .875rem; font-weight: 600; color: var(--an-ink); margin-bottom: 3px; }
.wl-step p { font-size: .8125rem; line-height: 1.5; color: var(--an-ink-2); }
.wl-step .an-chip { align-self: center; }
.wl-step[data-done="0"] { opacity: .38; }
.wl-step[data-done="1"] { opacity: 1; transition: opacity .25s var(--an-ease); }
.wl-step[data-done="0"] .an-chip { visibility: hidden; }
.wl-step[data-done="1"] .wl-step-mark { border-color: var(--an-hairline-3); color: var(--an-ink-2); }

/* Settlement + the verdict selector share a row where there is room, so the
   outcome replay is discovered beside the money it explains. [hidden] keeps
   auto-fit honest: settlement spans the row until the replay is revealed. */
/* min(320px, 100%): the 320px track floor must never exceed the container,
   or the desk overflows the narrowest phones. */
.wl-verdict-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 14px; }
/* The settlement prints only when the run reaches it: work, then checks,
   then money. Same held-back idiom as the assay strip. */
.wl-console .wl-settle { opacity: .35; transition: opacity .25s var(--an-ease); }
.wl-console .wl-settle.is-settled { opacity: 1; }
.wl-settle-body { padding-bottom: 0; }
/* The bill is the consequence: the total row reads as the document's
   stamped foot, not another list line. */
.wl-settle-total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 14px 16px; border-top: 1px solid var(--an-hairline-2);
  background: var(--an-surface-2);
}
.wl-settle-total .v {
  font-family: var(--an-mono); font-variant-numeric: tabular-nums;
  font-size: 1.45rem; color: var(--an-ink);
}

/* Obligations shown beside the upside, not buried under it. */
.wl-caveats { border-left-color: var(--an-pending); }
.wl-caveats .an-microlabel { display: block; margin-bottom: 8px; color: var(--an-pending); }
.wl-caveat-list { list-style: none; display: flex; flex-direction: column; gap: 7px; }
.wl-caveat-list li { display: flex; gap: 9px; align-items: baseline; }
.wl-caveat-list li::before { content: "·"; color: var(--an-ink-3); flex: 0 0 auto; }

.wl-disclosure {
  display: flex; gap: 9px; align-items: baseline;
  font-family: var(--an-mono); font-size: .6875rem; letter-spacing: .06em;
  color: var(--an-ink-3);
}

.wl-preview-empty { padding: 16px 24px; font-size: .9375rem; color: var(--an-ink-2); border-top: 1px solid var(--an-hairline); }
.wl-retry { margin-left: 8px; }

/* ── The verdict selector: unmistakably interactive ──────────────── */
.wl-outcome-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.wl-outcome-tab {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 8px; cursor: pointer; white-space: normal; min-height: 44px;
  background: var(--an-surface-2); border: 1px solid var(--an-hairline-2); border-radius: 2px;
  font-family: var(--an-mono); font-size: .625rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--an-ink-2);
  transition: color .12s var(--an-ease), border-color .12s var(--an-ease), background .12s var(--an-ease);
}
.wl-outcome-tab .cdot { width: 6px; height: 6px; border-radius: 50%; background: var(--an-ink-3); flex: 0 0 auto; }
.wl-outcome-tab[data-chip="cleared"] .cdot { background: var(--an-cleared); }
.wl-outcome-tab[data-chip="pending"] .cdot { background: var(--an-pending); }
.wl-outcome-tab[data-chip="veto"] .cdot { background: var(--an-veto); }
.wl-outcome-tab:hover { color: var(--an-ink); border-color: var(--an-ink-3); background: var(--an-surface-3); }
.wl-outcome-tab[aria-checked="true"] {
  color: var(--an-ink); background: var(--an-surface-3); border-color: var(--an-ink-3);
}
/* The selected verdict underlines itself in its own consequence color. */
.wl-outcome-tab[aria-checked="true"][data-chip="cleared"] { box-shadow: inset 0 -2px 0 var(--an-cleared); }
.wl-outcome-tab[aria-checked="true"][data-chip="pending"] { box-shadow: inset 0 -2px 0 var(--an-pending); }
.wl-outcome-tab[aria-checked="true"][data-chip="veto"] { box-shadow: inset 0 -2px 0 var(--an-veto); }
/* Two-per-row inside the shared verdict row: the labels stay honest
   44px touch targets without going single-file. */
.wl-outcomes .wl-outcome-tabs, .wl-replay .wl-outcome-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wl-outcome-detail { margin-top: 12px; }
.wl-outcome-detail .an-field { padding: 6px 0; }
.wl-outcome-reason { margin-top: 10px; font-size: .8125rem; line-height: 1.55; color: var(--an-ink-2); }

/* ── THE EARNED CTA: prints beside the settled outcome once a run has
   completed. A door to the join stage, never a form. ── */
.wl-earned {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 7px; padding: 24px 20px 26px;
  background: var(--an-surface-2); border: 1px solid var(--an-hairline-2);
  border-top: 2px solid var(--an-seal); border-radius: 2px;
}
.wl-earned-line { font-size: .625rem; letter-spacing: .12em; text-transform: uppercase; color: var(--an-ink-3); }
.wl-earned-cta { font-size: 1.125rem; font-weight: 600; color: var(--an-ink); }
.wl-earned .an-btn { margin-top: 12px; }
/* The early-access truth, printed UNDER the action the way a note is printed
   under a stamp: small, quiet, and impossible to read as a second CTA. It is
   what lets the button say "Use this agent" over a sample record without
   over-promising — the records here are samples and access opens in waves. */
.wl-earned-truth {
  margin-top: 10px; max-width: 34em;
  font-size: .75rem; line-height: 1.5; color: var(--an-ink-3);
}
.wl-earned-truth:empty { display: none; }

/* ── STAGE · JOIN: the registration card over the process rail ───── */
.wl-join { padding-top: 30px; }
.wl-join-head { text-align: center; max-width: 680px; margin: 0 auto; }
.wl-join-head h1 {
  margin-top: 16px; font-weight: 600; font-size: clamp(2.1rem, 3.6vw, 3.1rem);
  line-height: 1.04; letter-spacing: -.02em; color: var(--an-ink);
}
.wl-join-head p { margin-top: 14px; font-size: 1.0625rem; line-height: 1.6; color: var(--an-ink-2); }

/* The card: signing up is creating an arrival record, and the form is
   printed as one. Focus firms the document's edges, no glow. */
.wl-regcard {
  position: relative; max-width: 620px; margin: 32px auto 0;
  background: var(--an-surface); border: 1px solid var(--an-hairline-2);
  border-radius: 2px; box-shadow: 5px 5px 0 var(--an-hairline);
  transition: border-color .15s var(--an-ease);
}
.wl-regcard:focus-within { border-color: var(--an-ink-3); }
.wl-regcard-head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 15px 24px; border-bottom: 1px solid var(--an-hairline);
}
.wl-regcard-body { padding: 22px 24px 20px; }
.wl-regcard-foot { border-top: 1px solid var(--an-hairline); padding: 13px 24px 15px; background: var(--an-surface-2); }
.wl-regcard-foot .wl-fineprint { margin-top: 0; }

.wl-form .an-input {
  width: 100%; height: 56px; font-size: 1.0625rem; margin-top: 6px;
}
.wl-join-submit { width: 100%; margin-top: 14px; }

/* Successful email submission is the conversion. This recorded state remains
   visible above the optional questionnaire until the address is reset or a
   verified member session takes over. Rust marks the record; amber remains
   reserved for the still-pending ownership step. */
.wl-recorded {
  border-left: 3px solid var(--an-seal); padding: 2px 0 2px 18px;
  display: grid; gap: 7px;
}
.wl-recorded > .an-microlabel { color: var(--an-ink-2); }
.wl-recorded-title {
  font-weight: 600; font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  line-height: 1.2; letter-spacing: -.015em; color: var(--an-ink);
}
.wl-recorded-line { font-size: .9375rem; line-height: 1.55; color: var(--an-ink-2); max-width: 52ch; }
.wl-delivery-state {
  font-size: .625rem; line-height: 1.5; letter-spacing: .1em;
  text-transform: uppercase; color: var(--an-pending);
}
.wl-recorded ~ .wl-profile, .wl-recorded ~ .wl-sent {
  margin-top: 22px; padding-top: 20px; border-top: 1px dotted var(--an-hairline-2);
}

/* The record ledger: unknown values stay honestly unassigned. */
.wl-regledger { margin-top: 20px; border-top: 1px dotted var(--an-hairline-2); padding-top: 8px; }
.wl-regledger .an-field { padding: 8px 0; }
.wl-regledger .v.is-pending { color: var(--an-pending); }
.wl-join[data-phase="form"] .wl-lg-sent { display: none; }
.wl-join[data-phase="sent"] .wl-lg-form { display: none; }

.wl-error {
  margin-top: 12px; font-size: .8125rem; line-height: 1.5;
  color: var(--an-veto); display: flex; gap: 8px; align-items: baseline;
}
.wl-error:empty { display: none; }

/* Field-level validation: the invalid field is marked at the field, the
   message prints directly beneath it, and both clear on input. */
.wl-field-error { margin-top: 7px; font-size: .75rem; }
.an-input.is-invalid { border-color: var(--an-veto); }
html[data-design="v3"] .an-input.is-invalid:focus-visible { outline-color: var(--an-veto); }

.wl-fineprint { margin-top: 12px; font-size: .75rem; line-height: 1.6; color: var(--an-ink-3); max-width: 72ch; }
/* Padded so the touch target clears ~32px without changing how the line looks;
   inline-block is what lets the vertical padding actually count. */
.wl-fineprint a {
  color: var(--an-ink-2); border-bottom: 1px solid var(--an-hairline-2);
  display: inline-block; padding: 7px 2px; margin: -7px 0;
}
.wl-fineprint a:hover { color: var(--an-ink); }

/* SENT: the record's state visibly changes. Amber: pending, not done. */
.wl-sent { border-left: 2px solid var(--an-pending); padding-left: 18px; }
/* The block receives focus programmatically on submit; the amber edge and
   chip already announce the state, so focus stays a quiet hairline. */
html[data-design="v3"] .wl-sent:focus { outline: none; }
html[data-design="v3"] .wl-sent:focus-visible { outline: 1px solid var(--an-hairline-3); outline-offset: 6px; }
.wl-sent > .an-microlabel { color: var(--an-pending); }
.wl-sent-title {
  margin-top: 8px; font-weight: 600; font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  letter-spacing: -.015em; color: var(--an-ink);
}
.wl-sent-line { margin-top: 10px; font-size: .9375rem; line-height: 1.6; color: var(--an-ink-2); max-width: 52ch; }
/* The address we echo back is user-supplied and unbounded. A long corporate
   address on a 320px screen pushed the whole document sideways; `anywhere`
   is required because the address is one unbroken token. */
.wl-sent-email { overflow-wrap: anywhere; word-break: break-word; }
.wl-sent-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 14px; }

/* The development-only confirmation link. Loud on purpose: it must be
   impossible to mistake for production behaviour. Served only when the
   server explicitly opts in (never in production). */
.wl-devlink {
  margin-top: 16px; border: 1px dashed var(--an-pending); border-radius: 2px;
  padding: 12px 14px; background: var(--an-surface-2);
}
.wl-devlink .an-microlabel { color: var(--an-pending); display: block; margin-bottom: 6px; }
.wl-devlink a { color: var(--an-ink); font-family: var(--an-mono); font-size: .75rem; word-break: break-all; border-bottom: 1px solid var(--an-hairline-2); }

/* Turnstile host (only ever visible when the provider is active). */
.wl-captcha { margin-top: 12px; min-height: 0; }

/* THE PROCESS RAIL: how joining works, as three stations on the same
   double line the credential carries. The active station follows the
   phase; nothing lights green before it is true. */
.wl-process {
  list-style: none; position: relative;
  max-width: 720px; margin: 30px auto 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
}
.wl-process::before {
  content: ""; position: absolute; top: 15px; left: 13%; right: 13%; height: 6px;
  border-top: 1px solid var(--an-hairline-2); border-bottom: 1px solid var(--an-hairline-2);
}
.wl-process-step {
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: 7px; text-align: center; padding: 0 8px;
}
.wl-process-step .num {
  width: 31px; height: 31px; border-radius: 50%;
  background: var(--an-bg); border: 1px solid var(--an-hairline-3);
  display: flex; align-items: center; justify-content: center;
  font-size: .625rem; color: var(--an-ink-3);
}
.wl-process-step .ttl {
  font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--an-ink-2);
}
.wl-process-step .d { font-size: .75rem; line-height: 1.5; color: var(--an-ink-3); max-width: 22ch; }
.wl-join[data-phase="form"] .wl-process-step[data-k="record"] .num {
  border-color: var(--an-seal); color: var(--an-ink); background: var(--an-surface-2);
}
.wl-join[data-phase="form"] .wl-process-step[data-k="record"] .ttl { color: var(--an-ink); }
.wl-join[data-phase="sent"] .wl-process-step[data-k="confirm"] .num {
  border-color: var(--an-pending); color: var(--an-pending); background: var(--an-surface-2);
}
.wl-join[data-phase="sent"] .wl-process-step[data-k="confirm"] .ttl { color: var(--an-pending); }
.wl-join[data-phase="sent"] .wl-process-step[data-k="record"] .num {
  border-color: var(--an-ink-3); color: var(--an-ink); background: var(--an-surface-3);
}
.wl-join[data-phase="sent"] .wl-process-step[data-k="record"] .ttl { color: var(--an-ink); }

.wl-join-refnote {
  text-align: center; margin: 22px auto 0;
  font-size: .625rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--an-ink-3);
}

/* ── STAGE · MEMBER: the standing plate ──────────────────────────── */
.wl-member-head { text-align: center; max-width: 700px; margin: 6px auto 22px; }
.wl-member-head h1 {
  margin-top: 10px; font-weight: 600; font-size: clamp(1.8rem, 3vw, 2.5rem);
  letter-spacing: -.02em; color: var(--an-ink);
}
.wl-member-head p { margin-top: 12px; font-size: 1rem; line-height: 1.6; color: var(--an-ink-2); }

.wl-member { margin-bottom: 18px; box-shadow: 5px 5px 0 var(--an-hairline); }
.wl-member-grid {
  display: grid; grid-template-columns: minmax(260px, 360px) 1fr;
  gap: 24px; padding: 20px 24px 22px; align-items: start;
}
.wl-member-grid > * { min-width: 0; }
/* The plate: the position as a printed object of its own. */
.wl-member-standing {
  position: relative; background: var(--an-surface-2);
  border: 1px solid var(--an-hairline-2); border-radius: 2px;
  padding: 20px 22px 18px;
}
.wl-standing-seq {
  font-family: var(--an-mono); font-variant-numeric: tabular-nums;
  font-size: 4rem; line-height: 1; color: var(--an-ink); letter-spacing: -.02em;
  margin-top: 8px;
}
.wl-standing-seq.is-wave { font-size: 1.6rem; }
.wl-standing-sub { margin-top: 12px; font-size: .8125rem; line-height: 1.55; color: var(--an-ink-2); }
.wl-member-standing .wl-linkish { margin-top: 14px; }

/* ADMITTED: the culmination reads as a clearance stamp, not a number. */
#stageMember[data-state="admitted"] .wl-standing-seq.is-wave {
  display: inline-block; margin-top: 14px; padding: 9px 16px;
  border: 2px solid var(--an-cleared); border-radius: 2px;
  color: var(--an-cleared); font-size: 1.65rem; letter-spacing: .14em;
  transform: rotate(-2deg);
}
#stageMember[data-state="admitted"] .wl-member-standing { border-color: var(--an-cleared); }

/* The record rows flow in two columns: leaders stay readable instead of
   spanning a thousand pixels of dots. */
.wl-member-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 44px; }
.wl-member-fields > * { min-width: 0; }

/* Referral: present, subordinate. One quiet action; the link and its
   policy print only when asked for. */
.wl-refblock { margin-top: 16px; border-top: 1px dotted var(--an-hairline-2); padding-top: 12px; }
.wl-refpanel { margin-top: 4px; }
.wl-refbox { display: flex; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.wl-refbox .an-input {
  flex: 1 1 220px; font-family: var(--an-mono); font-size: .8125rem; height: 40px;
}
.wl-copied {
  font-family: var(--an-mono); font-size: .6875rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--an-cleared); margin-top: 10px;
}
.wl-copied:empty { display: none; }

/* THE STATUS SCREEN ENTRANCE: on a fresh confirmation the plate prints,
   the chip resolves, the rows follow. State, not confetti. */
@media (prefers-reduced-motion: no-preference) {
  #stageMember.is-fresh .wl-member-standing { clip-path: inset(0 100% 0 0); animation: wl-art-print 300ms steps(30) .1s forwards; }
  #stageMember.is-fresh .wl-member-fields .an-field { opacity: 0; animation: wl-cred-in .26s var(--an-ease) forwards; }
  #stageMember.is-fresh .wl-member-fields .an-field:nth-child(1) { animation-delay: .34s; }
  #stageMember.is-fresh .wl-member-fields .an-field:nth-child(2) { animation-delay: .42s; }
  #stageMember.is-fresh .wl-member-fields .an-field:nth-child(3) { animation-delay: .5s; }
  #stageMember.is-fresh .wl-member-fields .an-field:nth-child(4) { animation-delay: .58s; }
  #stageMember.is-fresh .wl-member-fields .an-field:nth-child(n+5) { animation-delay: .66s; }
  #stageMember.is-fresh #wlMemChip { opacity: 0; animation: wl-cred-in .26s var(--an-ease) .5s forwards; }
}

.wl-member-preview {
  display: flex; gap: 16px; align-items: center; justify-content: center;
  flex-wrap: wrap; margin-top: 22px;
}

/* ── "How this works": the footer's quiet disclosure ─────────────── */
/* The facts live directly above the footer, hidden until the footer link
   opens them: a utility drawer for the curious, never a bar inside the
   product journey. Same surface language as the footer itself. */
.wl-howto-panel {
  border-top: 1px solid var(--an-hairline); background: var(--an-surface);
}
.wl-howto-in { max-width: var(--an-max); margin: 0 auto; padding: 16px 24px 6px; }
.wl-howto-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding-bottom: 4px;
}
.wl-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wl-fact { padding: 14px 24px 18px; border-left: 1px solid var(--an-hairline); }
.wl-fact:first-child { border-left: 0; padding-left: 0; }
.wl-fact:last-child { padding-right: 0; }
.wl-fact h3 { font-size: .9375rem; font-weight: 600; color: var(--an-ink); margin-bottom: 6px; }
.wl-fact p { font-size: .8125rem; line-height: 1.6; color: var(--an-ink-2); }

/* ── Footer: one legal line on a real surface, aligned to the frame ─ */
/* The site theme caps .site-footer at 1200px; this footer is a full-bleed
   surface strip whose CONTENT aligns to the page frame. */
footer.site-footer.wl-foot {
  border-top: 1px solid var(--an-hairline); background: var(--an-surface);
  max-width: none; width: 100%; margin: 56px 0 0; padding: 0;
}
.wl-foot-in {
  max-width: var(--an-max); margin: 0 auto; padding: 15px 24px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 10px 24px; flex-wrap: wrap;
  font-size: .75rem; color: var(--an-ink-3);
}
.wl-foot-brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase;
}
.wl-foot-brand svg { display: block; color: var(--an-ink-2); }
.wl-foot-links a {
  color: var(--an-ink-2); border-bottom: 1px solid var(--an-hairline-2);
  display: inline-block; padding: 7px 2px; margin: -7px 0;
}
.wl-foot-links a:hover { color: var(--an-ink); }
/* The How-it-works trigger is a footer utility exactly like its siblings. */
.wl-foot-howto {
  background: none; border: 0; cursor: pointer; font: inherit;
  color: var(--an-ink-2); border-bottom: 1px solid var(--an-hairline-2);
  display: inline-block; padding: 7px 2px; margin: -7px 0;
  transition: color .12s var(--an-ease), border-color .12s var(--an-ease);
}
.wl-foot-howto:hover { color: var(--an-ink); }
.wl-foot-howto[aria-expanded="true"] { color: var(--an-ink); border-bottom-color: var(--an-ink-3); }

/* ── Utility ─────────────────────────────────────────────────────── */
[hidden] { display: none !important; }
.wl-visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  /* The entrance narrows before it stacks: the credential gives ground first. */
  .wl-entry-grid { grid-template-columns: minmax(340px, 460px) minmax(400px, 560px); gap: 40px 56px; }
  .wl-cred-seal { width: 128px; height: 128px; }
  .wl-cred-body { grid-template-columns: 128px 1fr; gap: 22px; }
}

@media (max-width: 1080px) {
  /* At 1024 the credential and copy no longer negotiate a cramped two-column
     minimum. They become one substantial, centered system instead. */
  .wl-entry-grid { grid-template-columns: 1fr; gap: 36px; min-height: 0; padding-top: 16px; align-items: start; }
  .wl-entry-sub { max-width: 56ch; }
  .wl-entry-visual { max-width: 680px; margin: 0 auto; width: 100%; }
}

@media (max-width: 980px) {
  .wl-console-grid { grid-template-columns: 1fr; gap: 14px; }
  .wl-member-grid { grid-template-columns: 1fr; gap: 18px; }
}

@media (max-width: 900px) {
  .wl-srcgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wl-buildfields { grid-template-columns: 1fr; }
  .wl-facts { grid-template-columns: 1fr; }
  .wl-fact { border-left: 0; border-top: 1px solid var(--an-hairline); padding-left: 0; padding-right: 0; }
  .wl-fact:first-child { border-top: 0; }
}

@media (max-width: 760px) {
  /* the nav shrinks to 54px, so everything pinned under it rises too */
  .wl-pathbar { top: 54px; }
  .wl-runstatus, .wl-console { scroll-margin-top: 104px; }
  .wl-member-fields { grid-template-columns: 1fr; }
  /* The one question stacks: three full-width doors, cue beside the words
     so the screen holds all three without scrolling sideways. Mobile drops
     the center-bottom dock for natural flow: question, then choices,
     no manufactured blank zone between them. */
  .wl-pathsel { min-height: 0; padding: 24px 0 28px; }
  .wl-paths { grid-template-columns: 1fr; gap: 10px; max-width: 460px; margin-top: 26px; padding-top: 0; }
  .wl-pathsel-claim { margin-top: 22px; }
  /* Mobile skips the desk's centering minimum too: content flows. */
  .wl-desk { min-height: 0; }
  .wl-path {
    flex-direction: row; text-align: left; gap: 16px;
    padding: 14px 16px; align-items: center;
  }
  .wl-path-visual { width: 64px; height: 56px; flex: 0 0 auto; }
  .wl-path-visual svg { width: 58px; height: 48px; }
  .wl-path-seal { width: 50px; height: 50px; }
  .wl-path .nm { margin-top: 0; }
  .wl-path-txt { align-items: flex-start; gap: 5px; }
  .wl-path .d { text-align: left; }
}

@media (max-width: 640px) {
  .wl-explore-qs { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .wl-shell { padding-left: 14px; padding-right: 14px; }
  .wl-banner-in { padding-left: 16px; padding-right: 16px; }
  .wl-composer { padding: 20px 14px 24px; }
  .wl-console { padding: 14px; }
  .wl-runstatus { padding: 0 14px 12px; }
  .wl-preview-empty { padding: 14px; }
  .wl-srcgrid { grid-template-columns: 1fr; }
  .wl-composer-run { align-items: stretch; }
  .wl-composer-run .an-btn { width: 100%; min-width: 0; }
  .wl-standing-seq { font-size: 3rem; }
  /* the tracker scrolls inside its own strip; the page never scrolls sideways */
  .wl-station { min-width: 132px; }
  .wl-step { grid-template-columns: 26px 1fr; }
  .wl-step .an-chip { grid-column: 2; justify-self: start; margin-top: 6px; }

  /* The entrance keeps its shape at phone widths: full-width actions, a
     compact credential, the visual never outweighing the copy. */
  .wl-entry-actions { flex-direction: column; align-items: stretch; }
  .wl-entry-actions .an-btn { width: 100%; }
  .wl-cred-head { padding: 14px 16px 13px; }
  .wl-cred-body { grid-template-columns: 96px 1fr; gap: 16px; padding: 16px; }
  .wl-cred-seal { width: 96px; height: 96px; }
  .wl-cred-rail { padding: 27px 16px 18px; }
  .wl-cred-line { top: 37px; }
  .wl-cred-stations { gap: 8px; }
  .wl-cred-stations .tick { width: 26px; height: 26px; }
  .wl-cred-stations .lbl { font-size: .5rem; letter-spacing: .1em; }
  .wl-cred-mrz { padding: 11px 16px; }

  /* The registration card owns the phone screen. */
  .wl-regcard-head { padding: 13px 16px; }
  .wl-regcard-body { padding: 18px 16px 16px; }
  .wl-regcard-foot { padding: 12px 16px 14px; }
  .wl-form .an-input { height: 52px; }
  .wl-sent { padding-left: 14px; }
  .wl-recorded { padding-left: 14px; }
  /* Every utility is a real thumb target even when its visual treatment stays
     link-like. The 54px nav can seat 44px controls without growing. */
  .wl-theme-toggle { width: 44px; height: 44px; }
  .wl-nav-back, .an-nav-right .wl-nav-join, .wl-pathbar-change,
  .wl-linkish, .wl-chip, .wl-runrecord summary,
  .wl-fineprint a, .wl-foot-links a, .wl-foot-howto {
    min-height: 44px;
  }
  .wl-linkish, .wl-fineprint a, .wl-foot-links a, .wl-foot-howto {
    display: inline-flex; align-items: center;
  }
  /* The process rail stacks into a ledger: number left, title over
     detail on the right. */
  .wl-process { grid-template-columns: 1fr; gap: 16px; max-width: none; }
  .wl-process::before { display: none; }
  .wl-process-step {
    display: grid; grid-template-columns: 31px 1fr;
    column-gap: 14px; row-gap: 3px; text-align: left; padding: 0;
  }
  .wl-process-step .num { grid-row: 1 / 3; }
  .wl-process-step .ttl { align-self: center; }
  .wl-process-step .d { max-width: none; }
  .wl-earned .an-btn { width: 100%; }
}


/* ═══════════════════════════════════════════════════════════════════
   EXPLAIN — artifact first, explanation on demand
   A tiny outlined proof-node beside a section heading. It borrows the
   rail station's circular geometry and the interface's own hairline /
   mono vocabulary, so it reads as something to INSPECT rather than as
   a generic help bubble bolted onto an industrial document.
   ═══════════════════════════════════════════════════════════════════ */
.wl-explain {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; padding: 0; margin-left: 7px;
  vertical-align: middle; flex: 0 0 auto; cursor: pointer;
  background: transparent; border: 1px solid var(--an-hairline-3);
  border-radius: 50%; color: var(--an-ink-3);
  transition: color .18s var(--an-ease), border-color .18s var(--an-ease),
              background-color .18s var(--an-ease);
}
/* The node is deliberately 15px so it never shouts over the heading it sits
   beside — but 15px is under the 24px minimum target size, which on a phone
   means a control nobody can reliably hit. The pseudo-element grows the HIT
   AREA to 26px without changing a pixel of layout or of what is drawn. */
.wl-explain::after {
  content: ''; position: absolute;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 26px; height: 26px;
}
.wl-explain { position: relative; }
.wl-explain-glyph {
  font-family: var(--an-mono); font-size: .5625rem; line-height: 1;
  /* The glyph sits a hair high in the mono face at this size. */
  transform: translateY(.5px);
}
.wl-explain:hover,
.wl-explain[aria-expanded="true"] {
  color: var(--an-seal-text); border-color: var(--an-seal);
  background: color-mix(in srgb, var(--an-seal) 12%, transparent);
}
/* The node must never out-shout the status pills beside it. */
.an-passport-head .wl-explain, .an-record-head .wl-explain { margin-left: 6px; }

/* The label row inside the artifact's assay strip: the trigger rides beside
   the label instead of inside it, because setAssayLabel() rewrites the
   label's text on every verdict replay. */
.wl-art-assay-head { display: flex; align-items: center; margin-bottom: 4px; }
.wl-art-assay-head .an-microlabel { display: inline; margin-bottom: 0; }

/* The one shared card. Fixed positioning + JS clamping is what keeps it
   inside the viewport, out from under the two sticky rows, and incapable of
   widening the page. */
.wl-explain-card {
  position: fixed; z-index: 95; max-width: calc(100vw - 20px);
  padding: 12px 14px 13px;
  background: var(--an-surface-2); border: 1px solid var(--an-hairline-2);
  border-top: 2px solid var(--an-seal); border-radius: 2px;
  box-shadow: 5px 5px 0 var(--an-hairline);
}
.wl-explain-card .an-microlabel { display: block; margin-bottom: 6px; }
.wl-explain-card p {
  font-size: .8125rem; line-height: 1.55; color: var(--an-ink-2);
  overflow-wrap: anywhere;
}
/* Mobile: an anchored full-width card. Floating placement against a 390px
   viewport buys nothing and breaks in more ways. */
.wl-explain-card.is-anchored { box-shadow: none; }

@media (prefers-reduced-motion: no-preference) {
  .wl-explain-card { animation: wlExplainIn .16s var(--an-ease) both; }
  @keyframes wlExplainIn {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: none; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .wl-explain-card { animation: none; }
  .wl-explain { transition: none; }
}

/* Motion is opt-out everywhere; theme-v3.css already neutralises its own
   animations, this covers the reveals this sheet adds. The no-preference
   guards above already gate the stage, credential and rail keyframes. */
@media (prefers-reduced-motion: reduce) {
  .wl-step[data-done="1"], .wl-station[data-done="1"] { transition: none; }
  .wl-composer, .wl-console { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   THE PROOF ARTIFACT
   A printed work document: warm surface, hairline structure, mono
   metadata, one strong title. It prints when the run reaches
   "work produced"; the assay strip prints when the gate reaches the
   work; the verdict visibly reaches the document. The printed-stack
   edge ranks it first among the console's objects.
   ═══════════════════════════════════════════════════════════════════ */

.wl-artifact {
  border: 1px solid var(--an-hairline-3); border-radius: 2px;
  background: var(--an-surface);
  box-shadow: 4px 4px 0 var(--an-hairline);
  position: relative;
}
/* Unprinted: the stage holds no work yet. The document enters the layout at
   the moment the run produces it, like the receipt printer it is, and the
   row stagger below carries the print feel. */
.wl-artifact:not(.is-printed) { display: none; }

.wl-art-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--an-hairline);
  background: var(--an-surface-2);
}
/* THE RESULT LEADS: the document type is the eyebrow; the countable claim
   ("3 clauses flagged") is the headline. The agent DID something, and the
   number of somethings is the first thing the eye lands on. */
.wl-art-title {
  font-family: var(--an-mono); font-size: .625rem; font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase; color: var(--an-ink-3);
}
.wl-art-sub {
  display: block; margin-top: 5px; font-size: clamp(1rem, 1.8vw, 1.3rem);
  letter-spacing: .12em; text-transform: uppercase; color: var(--an-ink);
}

/* Verdict banner: words first, tone second. Hidden while cleared. */
.wl-art-banner {
  display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap;
  padding: 9px 18px; border-bottom: 1px solid var(--an-hairline);
}
.wl-art-banner-word { font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; }
.wl-art-banner-note { font-size: .75rem; color: var(--an-ink-2); }
.wl-art-banner.tone-pending .wl-art-banner-word { color: var(--an-pending); }
.wl-art-banner.tone-veto .wl-art-banner-word { color: var(--an-veto); }

.wl-art-body { padding: 14px 18px 16px; }

/* Stats band (data family) */
.wl-art-stats { display: flex; gap: 0; border: 1px solid var(--an-hairline); border-radius: 2px; margin-bottom: 14px; }
.wl-art-stat { flex: 1 1 0; padding: 10px 14px; border-left: 1px solid var(--an-hairline); min-width: 0; }
.wl-art-stat:first-child { border-left: 0; }
.wl-art-stat .v { display: block; font-size: 1.05rem; color: var(--an-ink); font-variant-numeric: tabular-nums; }
.wl-art-stat .k { display: block; margin-top: 3px; }

/* The document table: the theme ledger, tuned down to document scale.
   A wide ledger scrolls INSIDE its own wrap; the page never scrolls sideways. */
.wl-art-tablewrap { min-width: 0; overflow-x: auto; }
.wl-art-table thead th { padding: 8px 10px; }
.wl-art-table tbody td { padding: 10px; font-size: .8125rem; }
.wl-tone-pending { color: var(--an-pending) !important; }
.wl-tone-veto { color: var(--an-veto) !important; }
.wl-tone-cleared { color: var(--an-cleared) !important; }

/* Tiny inline meter (data family): a hairline track with a filled span */
.wl-art-bar {
  display: inline-block; vertical-align: middle; margin-left: 8px;
  width: 42px; height: 4px; background: var(--an-hairline);
  border-radius: 1px; overflow: hidden;
}
.wl-art-bar-fill { display: block; height: 100%; background: var(--an-pending); }

/* Findings (code family): a printed review sheet, not an IDE */
.wl-art-findings { list-style: none; display: flex; flex-direction: column; }
.wl-art-finding { padding: 11px 0; border-bottom: 1px solid var(--an-hairline); }
.wl-art-finding:last-child { border-bottom: 0; }
.wl-art-finding .fh { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wl-art-finding .ref { font-size: .75rem; color: var(--an-ink); }
.wl-art-tag { font-size: .5625rem; }
.wl-art-finding .ft { margin-top: 5px; font-size: .8125rem; line-height: 1.5; color: var(--an-ink-2); }

/* Labelled blocks (follow-ups, tests-to-add, memo sections) */
.wl-art-sections { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.wl-art-section { border-left: 2px solid var(--an-hairline-2); padding-left: 12px; }
.wl-art-section .an-microlabel { display: block; margin-bottom: 4px; }
.wl-art-section p { font-size: .8125rem; line-height: 1.55; color: var(--an-ink-2); }

.wl-art-footer {
  margin-top: 14px; padding-top: 10px; border-top: 1px dotted var(--an-hairline);
  font-family: var(--an-mono); font-size: .625rem; letter-spacing: .08em;
  color: var(--an-ink-3);
}

/* The assay strip: the checks that ran AGAINST this work. Prints later. */
.wl-art-assay {
  border-top: 1px solid var(--an-hairline); background: var(--an-surface-2);
  padding: 12px 18px 14px;
  opacity: .35; transition: opacity .25s var(--an-ease);
}
.wl-art-assay .an-microlabel { display: block; margin-bottom: 4px; }
.wl-artifact.is-assayed .wl-art-assay { opacity: 1; }
.wl-assay-row { padding: 5px 0; }
.wl-assay-row .v { font-size: .75rem; }
.wl-assay-row.tone-cleared .v { color: var(--an-cleared); }
.wl-assay-row.tone-pending .v { color: var(--an-pending); }
.wl-assay-row.tone-veto .v { color: var(--an-veto); }

/* Row materialization: content prints in sequence once the shell exists.
   Under prefers-reduced-motion the theme collapses all animation to .001ms,
   so the finished document simply appears. */
.wl-artifact .wl-art-row, .wl-artifact .wl-art-stats { clip-path: inset(0 100% 0 0); }
.wl-artifact.is-printed .wl-art-row, .wl-artifact.is-printed .wl-art-stats {
  animation: wl-art-print 240ms steps(24) forwards;
}
.wl-artifact.is-printed .wl-art-row:nth-child(1) { animation-delay: 60ms; }
.wl-artifact.is-printed .wl-art-row:nth-child(2) { animation-delay: 180ms; }
.wl-artifact.is-printed .wl-art-row:nth-child(3) { animation-delay: 300ms; }
.wl-artifact.is-printed .wl-art-row:nth-child(4) { animation-delay: 420ms; }
.wl-artifact.is-printed .wl-art-row:nth-child(n+5) { animation-delay: 540ms; }
@keyframes wl-art-print { to { clip-path: inset(0 0 0 0); } }

/* The PARTIAL mark: one item visibly unresolved */
.wl-art-mark {
  display: inline-block; margin-left: 8px; padding: 1px 6px;
  border: 1px dashed var(--an-pending); border-radius: 2px;
  font-family: var(--an-mono); font-size: .5625rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--an-pending); white-space: nowrap;
}
.wl-art-row.is-partial { opacity: .75; }

/* WITHHELD: hatched overlay + a stamped word. The word carries the meaning;
   the hatch and tone reinforce it. The artifact stays legible beneath;
   the simulator is explaining, not deleting. */
.wl-artifact[data-verdict="total"] .wl-art-body { position: relative; }
.wl-artifact[data-verdict="total"] .wl-art-body::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(45deg, transparent 0 7px, var(--an-hairline) 7px 8px);
  opacity: .5;
}
.wl-artifact[data-verdict="total"] .wl-art-body { opacity: .6; }
.wl-artifact[data-verdict="total"]::after {
  content: "WITHHELD"; position: absolute; top: 44%; left: 50%;
  transform: translate(-50%, -50%) rotate(-6deg);
  border: 2px solid var(--an-veto); border-radius: 2px; padding: 6px 18px;
  font-family: var(--an-mono); font-size: 1rem; letter-spacing: .3em;
  color: var(--an-veto); background: var(--an-bg); opacity: .92;
  pointer-events: none;
}
.wl-artifact[data-verdict="unverified"] .wl-art-head { border-bottom-style: dashed; }

/* Build failure replay reaches the document: the recorded (cleared) check
   rows mute under their relabelled strip while the summary Quality row and
   the banner carry the replayed state. Removed exactly on switch-back. */
.wl-artifact[data-replay="failed"] .wl-art-assay .wl-assay-row:not(:last-child) { opacity: .45; }

@media (max-width: 560px) {
  .wl-art-head, .wl-art-body, .wl-art-assay { padding-left: 14px; padding-right: 14px; }
  .wl-art-stats { flex-direction: column; }
  .wl-art-stat { border-left: 0; border-top: 1px solid var(--an-hairline); }
  .wl-art-stat:first-child { border-top: 0; }
  .wl-artifact[data-verdict="total"]::after { font-size: .8125rem; letter-spacing: .2em; }
}

/* ═══ ACCESS PROFILE (V4) ═══════════════════════════════════════════
   Progressive profiling, in the same credential/ledger language as the
   registration document it follows. Deliberately NOT a marketing form:
   hard dividers, mono microtype, one column, no card shadows. */

/* ── V4.2 · the step transition ─────────────────────────────────────
   theme-v3.css draws every `:focus-visible` as a 2px seal outline. That is
   right for a control the reader is operating and WRONG for a container the
   script just moved focus into: Chrome applies it to a programmatically
   focused `tabindex="-1"` element after a keyboard submit, and it painted an
   orange rectangle around the whole Access Profile region — the form read as
   selected, or errored.

   Two answers, both kept:
     · focus lands on `.wl-step-anchor` (the step's own heading), never on the
       section wrapping the form, so the ring is one line tall;
     · the anchor's ring is the page's quiet hairline, the same treatment
       `.wl-stage` / `.wl-desk` / `.wl-console` / `.wl-sent` already use.

   This cannot weaken keyboard focus anywhere: a `tabindex="-1"` anchor is not
   in the tab order, so nothing but the transition can ever focus it. Real
   controls — radios, inputs, buttons — keep the full seal ring below. */
html[data-design="v3"] .wl-step-anchor:focus { outline: none; }
html[data-design="v3"] .wl-step-anchor:focus-visible {
  outline: 1px solid var(--an-hairline-3); outline-offset: 4px;
}
/* Shrink-to-fit so the ring hugs the words. A full-bleed hairline box around
   a single-line heading reads as a text field, which is the same misreading
   in a quieter colour. `fit-content` still wraps at the available width, so
   nothing about the heading's layout changes. */
.wl-step-anchor { width: -moz-fit-content; width: fit-content; max-width: 100%; }
/* Belt and braces: if anything ever focuses the section itself again, it must
   still not draw the full-height seal rectangle. */
html[data-design="v3"] .wl-profile:focus { outline: none; }
html[data-design="v3"] .wl-profile:focus-visible {
  outline: 1px solid var(--an-hairline-3); outline-offset: 6px;
}
/* The nav is `position: sticky; top: 0`, so scrolling anything to y=0 hides it
   under the header. JS scrolls by a measured offset; this is the belt for any
   scroll the browser still performs (fragment links, form validation). */
.wl-profile, .wl-step-anchor { scroll-margin-top: 84px; }

/* ── V4.2 · rhythm ──────────────────────────────────────────────────
   The step sits INSIDE the access-registration record, under a 3rem page
   heading. Sized as the record's next line, not as a second headline: the
   old `.wl-sent-title` (up to 1.8rem, correct when CHECK YOUR EMAIL is the
   whole screen) made the card read as two competing documents. */
.wl-profile { display: grid; gap: 8px; }
.wl-profile-title {
  font-weight: 600; font-size: clamp(1.125rem, 1.5vw, 1.3125rem);
  line-height: 1.25; letter-spacing: -.01em; color: var(--an-ink);
}
.wl-profile-line { font-size: .875rem; line-height: 1.55; color: var(--an-ink-3); max-width: 52ch; }
.wl-profile-form { display: grid; gap: 16px; margin-top: 10px; }
.wl-profile-qs { display: grid; gap: 16px; }

/* One question = one fieldset. Legend carries the question so screen
   readers announce it before the options, and the border-left rule gives
   the same printed-record feel as the rest of the page. */
.wl-q { border: 0; padding: 0 0 0 12px; margin: 0; border-left: 2px solid var(--an-hairline-2, #2a2723); }
/* .6875rem, not .625rem: at .13em tracking the smaller size was the least
   readable type on the page, and these legends ARE the questions. */
.wl-q > legend { padding: 0 0 7px; font-family: var(--an-mono); font-size: .6875rem;
  letter-spacing: .11em; text-transform: uppercase; color: var(--an-ink-2); }
.wl-q-opts { display: flex; flex-wrap: wrap; gap: 8px; }

/* The option itself is a real radio, visually replaced. Keyboard and
   screen-reader behaviour therefore comes free and correct. */
.wl-choice { position: relative; display: inline-flex; }
.wl-choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.wl-choice span { display: inline-block; padding: 7px 12px; border: 1px solid var(--an-hairline-2, #2a2723);
  border-radius: 2px; font-size: .8125rem; color: var(--an-ink-2); cursor: pointer;
  transition: border-color .12s ease, color .12s ease; }
.wl-choice:hover span { color: var(--an-ink); border-color: var(--an-hairline-3); }
/* A chosen answer has to survive a glance across nine options. Border, weight
   and a seal-tinted ground together — the underline alone disappeared once
   the options wrapped onto three rows. The flat fallback comes first for
   engines without color-mix(). */
.wl-choice input:checked + span { color: var(--an-ink); font-weight: 500;
  border-color: var(--an-seal, #C9573A);
  background: var(--an-surface-2, #201C15);
  background: color-mix(in srgb, var(--an-seal, #C9573A) 14%, transparent);
  box-shadow: inset 0 -2px 0 var(--an-seal, #C9573A); }
/* Focus must be visible on the replacement, not the hidden input. */
.wl-choice input:focus-visible + span { outline: 2px solid var(--an-seal, #C9573A); outline-offset: 2px; }

.wl-field-optional { font-family: var(--an-mono); font-size: .5625rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--an-ink-3); margin-left: 6px; }
/* Optional, and it should look it: a labelled field, not a full-bleed control
   with more visual weight than the three answers above it. */
.wl-profile-form > .an-input { max-width: 380px; }
.wl-profile-form > .an-label { margin-top: 2px; }
.wl-profile-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 2px; }
/* Hierarchy: `wl-cta-xl` is the page's conversion CTA size and belongs to
   CLAIM MY PLACE. Saving a profile is the record's next line, so it is an
   ordinary primary button beside a quiet skip. */
.wl-profile-actions .an-btn { height: 44px; }
.wl-profile-form > .wl-fineprint { margin-top: 4px; }
.wl-sent-profile { margin-top: 14px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wl-sent-profile-note { font-size: .8125rem; color: var(--an-ink-3); }

/* Member-page panel */
.wl-member-profile { margin-top: 18px; padding: 18px 20px; }
.wl-memprofile-prompt { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
.wl-memprofile-line { font-size: .8125rem; color: var(--an-ink-3); flex: 1 1 260px; }
.wl-memprofile-summary { margin-top: 10px; display: grid; gap: 10px; justify-items: start; }
.wl-memprofile-summary .wl-member-fields { width: 100%; }

/* §35 — mobile: tap targets stay large and nothing clips.
   V4.2: options WRAP rather than taking one full row each. Stacking nine
   role options, six sizes and five stages put roughly 900px of chrome
   between the question and the save button on a 390px screen; wrapping keeps
   short answers (JUST ME, 2-10, 11-50) side by side and lets long ones take
   their own line naturally. `min-height` — not vertical padding — is what
   guarantees the 44px target, so it holds however the label wraps. */
@media (max-width: 560px) {
  .wl-q-opts { gap: 8px; }
  .wl-choice span { min-height: 44px; display: inline-flex; align-items: center;
    padding: 10px 14px; text-align: left; }
  .wl-profile-form > .an-input { max-width: none; }
  .wl-profile-actions { align-items: stretch; flex-direction: column; gap: 12px; }
  .wl-profile-actions .an-btn { width: 100%; }
  .wl-memprofile-prompt .an-btn { width: 100%; }
}

/* Clear profile — a secondary, non-destructive-to-membership action with an
   inline confirmation. No modal, no browser confirm(). */
.wl-clear-link { margin-left: auto; color: var(--an-ink-3); }
.wl-clear-link:hover { color: var(--an-veto, #FF6B5E); }
.wl-clear-confirm { margin-top: 14px; padding: 12px 14px; border: 1px solid var(--an-hairline-2, #2a2723);
  border-left: 2px solid var(--an-veto, #FF6B5E); border-radius: 2px; display: grid; gap: 6px; }
.wl-clear-title { font-family: var(--an-mono); font-size: .75rem; letter-spacing: .04em; color: var(--an-ink); }
.wl-clear-line { font-size: .8125rem; color: var(--an-ink-3); }
@media (max-width: 560px) {
  .wl-clear-link { margin-left: 0; }
}