/* ─────────────────────────────────────────────────────────────────────────
   THE VEALTH WORKFIELD — the shared object grammar, re-dressed (2026-09-05).

   Sixteen pages inherit these wf-* classes: the board, post, fund, verify,
   the receipt, Me, and the eight deeper pages. The class names, ids and
   data-* hooks are a contract with the scripts that hydrate them
   (vealth-packet.js, vealth-evidence.js, vealth-lens.js) and never change
   here. What this sheet decides is how those objects LOOK.

   THE BAR (operator, 2026-09-05): simple, elegant, premium, something to use,
   for the dumbest agent and the most brilliant person at once, built to last.
   ecowealthsafety.com is the register. So:

   1. PAPER, NOT SCHEMATIC. A packet is a printed record opened and closed by
      an ink hairline, never a gold one (THE WORK PACKET section says why). A
      receipt is a paper document with a ledger's double rule. A port is a
      calm plate. Nothing is an unclosed bracket or a clipped plate,
      no hairline connector joins one object to another, and no dashed or
      dotted border carries a meaning. STATE LIVES IN A CHIP, once, in words.
      (Two edges keep a dashed or dotted line because a truth guard pins them
      outside this lane: a rejected receipt's foot, and the testimony rail on
      Me. They are quiet, and they are labelled.)

   2. TYPE CARRIES THE PAGE. Fraunces for display and names, Inter for prose,
      IBM Plex Mono only for eyebrows, ids and chips, letterspaced and never
      below 12px. Body prose never below 15px. Numbers are one metal: gold.

   3. ONE BUTTON. `.wf-act` is the ONE primary action: solid gold face with
      near-black ink by day, matte green-black face with light-gold ink by
      night, a hairline of the logo's spectrum at the rim. `.wf-act--quiet` is
      the quiet alternative on the same plate. Never a black slab.

   4. THE SPECTRUM IS THE LOGO'S. It lives in thin rules only: the h1
      underline, the rim of a plate, the ring around a scene (`.vscene`, in the
      house sheet). Never a face, never behind text.

   5. MACHINE TEXT STAYS WHERE MACHINES READ IT. `.wf-src` (a projection
      pointer) and `.wf-twin` (the machine call printed on a plate) are not for
      the human surface: agents read thesis.json, /labor/*, llms.txt and MCP.
      They are hidden here so no page can leak them by accident.

   TOKENS: ground, ink, rule, paper, buttons and type come from the house sheet
   (vealth-next.css / vealth-simple.css). This file declares only the six
   semantic role hues plus its own structural metrics, and declares every one
   of them again under [data-theme="dark"] so check:theme-parity holds.

   PASS 2 (2026-09-05, "simple yet amazing"). ONE card grammar: the packet is
   one grid every page inherits (title first, then place / proof / pay, one
   chip, the id small and last, one action). ONE eyebrow, ONE label, ONE chip,
   ONE button, ONE quiet action, one radius (--r-card / --r-ctl), one paper
   shadow (--shadow-paper). The operate register (fund, post, verify, the
   receipt, Me) that five pages carried as identical local blocks lives here
   once, at the foot of this file.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  /* THE LABEL FACE (2026-09-06 refinement). Small caps labels, eyebrows and
     state chips are read by people, so they wear the interface face with
     letterspacing, not the machine face. IBM Plex Mono is now reserved for
     actual machine identity: packet and receipt ids, hashes, code, the paste
     block. Nothing that a visitor simply reads is monospaced any more. */
  --label-face:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* The six semantic roles. Deepened to clear WCAG AA as small text on the
     darkest stop of the page ground (measured in the earlier waves; kept). */
  --wf-value: #654706;      /* deep gold: value, price, the number metal */
  --wf-living: #1f5434;     /* botanical green: live, open, accepted, held */
  --wf-evidence: #22506a;   /* hydrological: evidence, proof, receipt */
  --wf-attention: #7d3348;  /* blush: a human's attention is needed */
  --wf-stop: #832b0e;       /* safety stop, rejection, a stopped rail ONLY */
  --wf-unknown: rgba(40, 29, 24, 0.80); /* "we do not know" is information */

  /* Structure. */
  --wf-line: #7d5f3d;                       /* a rule that structures */
  --wf-line-soft: rgba(120, 80, 45, 0.20); /* a hairline that separates */
  --wf-soft: rgba(40, 29, 24, 0.72);       /* the quietest readable ink */
  --wf-face: rgba(250, 242, 224, 0.55);    /* a quiet lifted surface */
  --wf-face-2: rgba(251, 244, 229, 0.94);  /* paper: a document's face */
  --wf-on-ink: #faf3e2;
  --wf-gold: #c98a2e;                       /* the gold rule on paper (decorative, never small text) */
  --wf-shadow: rgba(90, 58, 30, 0.22);      /* paper lift */

  --wf-axis: 8px;
}

:root[data-theme="dark"] {
  --wf-value: #d9b876;
  --wf-living: #94c69b;
  --wf-evidence: #8badb4;
  --wf-attention: #c9a8a4;
  --wf-stop: #e2795a;
  --wf-unknown: rgba(236, 228, 208, 0.74);
  --wf-line: #8d7a4e;
  --wf-line-soft: rgba(224, 203, 150, 0.16);
  --wf-soft: rgba(236, 228, 208, 0.66);
  --wf-face: rgba(224, 203, 150, 0.05);
  --wf-face-2: rgba(19, 25, 18, 0.94);
  --wf-on-ink: #0d1109;
  --wf-gold: #d9b876;
  --wf-shadow: rgba(4, 8, 5, 0.6);
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE PAGE FRAME
   One measure for every page, and it is the nav's: the wordmark sits on the
   same left edge as the first heading. The ground is painted on <html> too so
   dark-mode overscroll never flashes light.
   ═══════════════════════════════════════════════════════════════════════════ */
html { background: var(--page); }
.wf-page { max-width: 900px; padding-top: 0; }
.wf-page > .wf-head:first-child,
.wf-page > .wf-sec:first-child { padding-top: clamp(44px, 7vh, 88px); }

/* A scene inside the Workfield frame keeps the room's own rhythm: the room
   supplies the air, so the section's own margin and its top rule go. */
.wf-sec.vscene, .wf-head.vscene, .wf-reference.vscene, .vscene > .wf-reference { margin: 0; }
.wf-reference.vscene, .vscene > .wf-reference { padding-top: 0; border-top: 0; }
/* The locator under a hero breathes after the actions. */
.wf-head .wf-lens { margin: 38px 0 0; }

/* ── Type ────────────────────────────────────────────────────────────────── */
.wf-head { margin: 0 0 clamp(36px, 5vw, 64px); }
.wf-head h1 {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.022em;
  font-size: clamp(46px, 6vw, 78px);
  line-height: 1.02;
  margin: 0 0 22px;
  max-width: 17ch;
  padding-left: 0;
  text-wrap: balance;
}
.wf-head h1::before { display: none; }
/* The one place the spectrum touches type: a thin rule under the h1. */
.wf-head h1::after {
  content: "";
  display: block;
  width: 132px;
  height: 4px;
  border-radius: 2px;
  margin-top: 26px;
  background: var(--fx, var(--spectrum));
  background-size: 260% 100%;
  animation: vx-spectrum-drift 9s ease-in-out infinite;
}
@keyframes vx-spectrum-drift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) { .wf-head h1::after { animation: none; } }
.wf-head .wf-lede {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 500;
  font-size: clamp(19px, 2.1vw, 23px);
  line-height: 1.45;
  color: var(--ink);
  max-width: 42ch;
  margin: 0;
}
.wf-head .wf-lede b, .wf-head .wf-lede strong { font-weight: 600; color: var(--wf-value); }
/* A second, quieter paragraph under a lede: the detail a reader may want. */
.wf-sub {
  font-family: "Inter", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 58ch;
  margin: 18px 0 0;
}
/* THE ONE EYEBROW: same metrics and ink as the house `.eyebrow`. */
.wf-eyebrow {
  font: 600 12px/1.4 var(--label-face);
  letter-spacing:.02em;
  text-transform:none;
  color: var(--gold-ink, var(--wf-value));
  margin: 0 0 16px;
}
.wf-eyebrow a { color: inherit; text-decoration: none; }
.wf-eyebrow a:hover { color: var(--ink); }

/* A section: a heading, a lede, then its one object. Never a card. */
.wf-sec { margin: clamp(56px, 8vw, 96px) 0 0; }
.wf-sec > h2 {
  font: 600 clamp(30px, 3.8vw, 46px)/1.08 "Fraunces", Georgia, serif;
  color: var(--ink);
  letter-spacing: -0.015em;
  margin: 0 0 16px;
  padding-left: 0;
  max-width: 22ch;
  text-wrap: balance;
}
.wf-sec > h2::before, .wf-sec > h2::after { display: none; }
.wf-sec > .wf-lede { font-size: 17px; line-height: 1.6; color: var(--muted); max-width: 58ch; margin: 0 0 26px; }
.wf-sec > .wf-lede b { color: var(--ink); }
.wf-boundary {
  margin: 26px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--wf-line-soft);
  font-size: 15px;
  line-height: 1.6;
  color: var(--wf-soft);
  max-width: 66ch;
}
.wf-boundary b { color: var(--ink); font-weight: 600; }

/* Links in prose take the value hue; the filled action carries its own ink. */
.wf-boundary a:not(.wf-act),
.wf-sec a:not(.wf-act):not(.btn),
.wf-ledger a:not(.wf-act):not(.btn),
.wf-defs a:not(.wf-act):not(.btn),
.wf-rails a:not(.wf-act):not(.btn),
.wf-head a:not(.wf-act):not(.btn),
.wf-lens a:not(.wf-act):not(.btn),
.wf-reference a:not(.wf-act):not(.btn),
.wf-invariant a:not(.wf-act):not(.btn),
.wf-standing a:not(.wf-act):not(.btn),
.wf-twin-side a:not(.wf-act) { color: var(--wf-value); }

/* WCAG 2.2 AA 2.5.8: a link inside a sentence keeps its own 24x24 floor. The
   one button and the quiet action size themselves; this floor is for prose. */
.wf-page p a:not(.wf-act),
.wf-page li a:not(.wf-act),
.wf-page dd a:not(.wf-act),
.wf-page dt a:not(.wf-act) { padding: 6px 1px; }

/* A link that is the whole of its row is a standalone control: 44px. */
.wf-rail-v > a:only-child,
.wf-ledger-v > a:only-child,
.wf-checkline > a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 1px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE ONE ACTION
   ═══════════════════════════════════════════════════════════════════════════ */
/* Same shape, face, label and shadow as the house `.btn--gold`: solid gold in
   both themes, spectrum hairline at the rim, 13px uppercase letterspaced. */
.wf-act, .op-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 22px;
  border: 1.5px solid transparent;
  border-radius: var(--r-ctl, 10px);
  background: var(--btn-gold, linear-gradient(180deg, #e6b45a, #c98a2e)) padding-box, var(--fx, var(--spectrum)) border-box;
  color: var(--btn-gold-ink, #1b1207);
  font: 600 13px/1.2 "Inter", system-ui, sans-serif;
  letter-spacing:.02em;
  text-transform:none;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 12px 26px -16px rgba(122, 74, 30, 0.55);
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}
.wf-act:hover, .op-cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
  color: var(--btn-gold-ink, #1b1207);
  box-shadow: 0 16px 30px -16px rgba(122, 74, 30, 0.55);
}
.wf-act:focus-visible, .op-cta:focus-visible { outline: 3px solid var(--wf-living); outline-offset: 2px; }
.wf-act, .op-cta {
  background: var(--btn-gold);
  border-color: var(--fx, var(--gold));
}
.wf-act:hover, .op-cta:hover { background: var(--btn-gold); }
/* THE ONE QUIET ACTION: underlined text, the house `.action-quiet` exactly.
   Never a second pill. Buttons and links alike; the hit area stays 44px. */
.wf-act--quiet, .wf-act--quiet:hover, .wf-act--quiet:focus-visible {
  padding: 0 2px;
  border-color: transparent;
  background: none;
  box-shadow: none;
  transform: none;
  filter: none;
  color: var(--gold-text);
  font: 600 14px/1.3 "Inter", system-ui, sans-serif;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1.5px;
  text-decoration-color: color-mix(in srgb, var(--gold-text) 45%, transparent);
  white-space: normal;
}
.wf-act--quiet:hover { color: var(--ink); text-decoration-color: var(--gold-text); }
.wf-act--quiet:focus-visible { outline: 2px solid var(--wf-living); outline-offset: 3px; border-radius: 4px; }
button.wf-act { font-family: "Inter", system-ui, sans-serif; }
button.wf-act[disabled] { opacity: 0.55; cursor: not-allowed; transform: none; }
.wf-acts { display: flex; flex-wrap: wrap; gap: 12px 14px; margin: 18px 0 0; }
.wf-exits { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 30px 0 0; }
@media (prefers-reduced-motion: reduce) {
  .wf-act, .wf-act:hover { transition: none; transform: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE STATE CHIP — the one place a capsule is right
   A row's state, in a word, once. Ink from the six roles; the face is that
   ink at 12%, so every chip has a dark answer by construction.
   ═══════════════════════════════════════════════════════════════════════════ */
/* THE ONE CHIP: same metrics as the house `.chip`. */
.wf-state,
.wf-ledger-state,
.wf-rail-state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 26px;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  background: color-mix(in srgb, currentColor 10%, transparent);
  font: 600 12px/1 var(--label-face);
  letter-spacing:.02em;
  text-transform:none;
  white-space: nowrap;
  vertical-align: middle;
  color: var(--wf-unknown);
}
.wf-ledger-state { margin-right: 10px; }
.wf-rail-state { margin: 0 0 8px; }
/* The chip's dot. Every shape word resolves to the same dot: the WORD beside
   it carries the state, and the colour is the second signal. */
.wf-shape,
.wf-shape[data-shape="dashed"],
.wf-shape[data-shape="return"],
.wf-shape[data-shape="double"] {
  display: inline-block;
  width: 7px;
  height: 7px;
  border: 0;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.wf-state svg { flex: none; }
/* THE ONE STATE GRAMMAR (#883 constitution). Seven words, one chip shape, the
   hue as the second signal and the fill as the third:
     Open            living green, outline        (a packet nobody has taken)
     Active          living green, light fill     (claimed, being worked)
     Needs judgment  attention blush, outline     (proof is in; a human decides)
     Accepted        living green, light fill     (the evidence passed)
     Rejected        stop red, outline            (returned; the path stays open)
     Receipted       evidence aqua, light fill    (recorded; past tense begins)
     Settled         gold, SOLID fill             (closed; the only filled chip)
     Earned          gold, outline                (closed in work; no money moved)
   A needs-judgment chip can never be mistaken for a receipt: different hue,
   no fill. The old class names stay as aliases so no static page breaks. */
.wf-state--open { color: var(--wf-living); }
.wf-state--active, .wf-state--claimed { color: var(--wf-living); background: color-mix(in srgb, currentColor 18%, transparent); }
.wf-state--judgment, .wf-state--submitted { color: var(--wf-attention); }
.wf-state--accepted, .wf-state--approved { color: var(--wf-living); background: color-mix(in srgb, currentColor 18%, transparent); }
.wf-state--rejected { color: var(--wf-stop); }
.wf-state--receipted, .wf-state--receipt { color: var(--wf-evidence); background: color-mix(in srgb, currentColor 18%, transparent); }
.wf-state--settled { color: var(--btn-gold-ink, #1b1207); background: var(--wf-gold); border-color: var(--wf-gold); }
.wf-state--settled .wf-shape { background: var(--btn-gold-ink, #1b1207); }
.wf-state--earned { color: var(--wf-value); }
.wf-state--expired, .wf-state--unknown { color: var(--wf-unknown); }
.wf-ledger-state--done { color: var(--wf-living); }
.wf-ledger-state--partial { color: var(--wf-value); }
.wf-ledger-state--open { color: var(--wf-stop); }
.wf-rail[data-state="live"] .wf-rail-state { color: var(--wf-living); }
.wf-rail[data-state="stopped"] .wf-rail-state { color: var(--wf-stop); }
.wf-rail[data-state="parked"] .wf-rail-state { color: var(--wf-soft); }
.wf-rail[data-state="dead"] .wf-rail-state { color: var(--wf-unknown); }

/* ═══════════════════════════════════════════════════════════════════════════
   THE FIELD — the stations, laid out as a calm grid
   The <ol> is the truth and the grid is presentation. The 42-track grid from
   the observatory is kept for the system map on About; the spine variant is
   what the board, fund and the buyer door use. No connectors are drawn.
   ═══════════════════════════════════════════════════════════════════════════ */
.wf-field {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: 18px;
  row-gap: 30px;
  align-items: start;
}
.wf-node { position: relative; min-width: 0; }
/* Upstream stations sit three to a row; the packet takes the whole width; the
   two downstream runs sit side by side beneath it. */
.wf-node--up { grid-column: span 2; padding: 0; }
.wf-node--axis { grid-column: 1 / -1; padding: 0; }
.wf-node--channel {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  column-gap: 18px;
  align-items: start;
}
.wf-chan { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 26px; }
.wf-node--down { padding: 0; }

/* NO CONNECTORS. The edges, stubs and stems the earlier waves drew between
   stations were the wiring diagram. Every one of them is switched off here;
   the objects read as objects and the stage word says where you are. */
.wf-node--up[data-line]::before,
.wf-node--down[data-line]::before,
.wf-node--axis::before,
.wf-node--enter::after,
.wf-port::after,
.wf-door::after,
.wf-ports > .wf-port::before { content: none; display: none; }

/* The stage word: a calm letterspaced eyebrow over the object. It is often an
   <h2>, so the house heading tick and its indent are switched off here. */
.wf-stage {
  position: static;
  padding-left: 0;
  font: 600 12px/1.4 var(--label-face);
  letter-spacing:.02em;
  text-transform:none;
  color: var(--wf-soft);
  margin: 0 0 12px;
}
.wf-stage::before, .wf-stage::after { content: none; display: none; }
.wf-stage b { color: var(--wf-value); font-weight: 600; }

/* A live figure beside the object it describes. ONE numeral: the house
   `.numeral` (gold Fraunces, tabular). `.wf-figure` is its display size. */
.wf-count { margin: 12px 0 0; font: 400 15px/1.5 "Inter", system-ui, sans-serif; color: var(--muted); }
.wf-count b {
  font: 600 clamp(22px, 2vw, 28px)/1 "Fraunces", Georgia, serif;
  color: var(--gold-ink, var(--wf-value));
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  margin-right: 6px;
}
.wf-figure { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 8px 0 0; }
.wf-figure b {
  font: 600 clamp(30px, 3.6vw, 44px)/1 "Fraunces", Georgia, serif;
  color: var(--gold-ink, var(--wf-value));
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.wf-figure span { font-size: 15.5px; line-height: 1.5; color: var(--muted); }
.wf-figure span b { font-size: inherit; font-family: inherit; color: var(--ink); font-weight: 600; letter-spacing: 0; }

/* MACHINE TEXT, OFF THE HUMAN SURFACE (rule 5 above). A projection pointer
   is gone; the share slot stays readable to assistive technology and agents
   but is not drawn on the human card, where the id sits small and last. */
.wf-src { display: none; }
.wf-twin { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── PLACE ───────────────────────────────────────────────────────────────── */
.wf-place { padding: 0 0 12px; border-bottom: 1px solid var(--wf-line-soft); }
.wf-place-name { margin: 0; font: 600 clamp(20px, 2vw, 24px)/1.2 "Fraunces", Georgia, serif; color: var(--ink); }
.wf-place-name b { color: var(--wf-value); font-weight: 600; }
.wf-place-coord { margin: 6px 0 0; font: 400 14.5px/1.5 "Inter", system-ui, sans-serif; color: var(--wf-soft); }

/* ── NEED — a note with a gold rule, not a bracket ───────────────────────── */
.wf-need {
  border: 0;
  border-left: 3px solid var(--wf-gold);
  padding: 4px 0 4px 18px;
  background: none;
}
.wf-need p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink); }
.wf-need p + p { margin-top: 8px; }
.wf-need b { color: var(--ink); }

/* ── THE PORTS — VOTE / FUND / POST as calm plates ───────────────────────── */
.wf-port {
  position: relative;
  border: 1px solid var(--paper-edge, var(--wf-line-soft));
  border-radius: var(--r-card, 14px);
  background: var(--paper, var(--wf-face-2));
  padding: 20px 22px 22px;
  box-shadow: var(--shadow-paper, 0 18px 40px -34px var(--wf-shadow));
}
.wf-port-word {
  display: block;
  font: 600 clamp(26px, 2.6vw, 34px)/1 "Fraunces", Georgia, serif;
  letter-spacing: 0.01em;
  margin: 0 0 6px;
  color: var(--ink);
}
.wf-port-role {
  display: block;
  font: 600 12px/1.5 var(--label-face);
  letter-spacing:.02em;
  text-transform:none;
  color: var(--wf-value);
  margin: 0 0 12px;
}
.wf-port p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--muted); }
.wf-port p + p { margin-top: 8px; }
.wf-port .wf-count { margin-top: 14px; }
.wf-port--free .wf-port-role { color: var(--wf-living); }
/* The whole head of a port is its link, 44px tall for a thumb. */
.wf-portlink {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
  min-height: 44px;
  align-content: center;
  text-decoration: none;
  color: inherit;
}
.wf-portlink:hover .wf-port-word { color: var(--wf-value); }

/* ── THE WORK PACKET — ONE card, every page (THE QUIET LEDGER, synthesis of
   two designer passes, 2026-09-09) ────────────────────────────────────────
   The DOM order is the renderer's law (the band: kind, id, state, act; then
   the note, the title, the fields, the no-script fallback, the share slot).
   This grid lays that anatomy out the way a person reads a posting, on every
   width: what it is and its state on one line, the title, its note, the
   facts, then the one action with the id small and last. The title precedes
   the action by construction; no page re-orders it.

   THE ANGLE: a printed civic record, not a card. Every rule below is rooted
   at #packet, the one id every page's packet already carries (never
   .wf-plate alone, though the two select the same element): an id outranks
   any class, so this is the definition that wins wherever the packet is
   drawn, including on a page whose own register (vealth-ledger.css) resets
   .wf-plate at two classes' weight. No border box, no radius, no drop
   shadow, no gradient bar at the head. Two hairlines open and close the
   sheet; a third rules under every field row. Type carries the read:
   Fraunces italic for the kind and the state, a running head rather than a
   shouted label; plain ink for the facts; and ONE metal, gold, kept for the
   single number that is actually money, the pay field. Nothing else on the
   card is gold, the opening and closing rules included: the six-role state
   colour is restated below at #packet's own weight so a page-local reset
   cannot flatten every state to one ink (verified: without this, every
   state but "rejected" rendered in the same plain ink here).

   ONE NAMED EXCEPTION. Me (body.lg-worker) already opens this same
   certificate into two columns, subject at the left and particulars at the
   right under one head band (vealth-ledger.css) — deliberately, sharing that
   shape with the front door's own zoomed single-packet view, which this file
   never reaches. Ink, type and hairlines below reach Me too (nothing here is
   scoped away from it), but the three rules that decide the column split and
   the head band's own internal layout are marked GRID and scoped to
   :not(body.lg-worker), so Me keeps its own opened-out shape untouched. */
#packet {
  position: relative;
  padding: clamp(22px, 3vw, 32px) clamp(20px, 3vw, 32px) clamp(20px, 2.4vw, 28px);
  border: 0;
  border-top: 2px solid var(--wf-line);
  border-bottom: 2px solid var(--wf-line);
  border-radius: 0;
  background: none;
  box-shadow: none;
  clip-path: none;
}
#packet::before { content: none; display: none; }
/* GRID: the named-area layout every page but Me reads. */
body:not(.lg-worker) #packet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "k        state"
    "task     task"
    "sub      sub"
    "guide    guide"
    "fields   fields"
    "note     note"
    "backing  backing"
    "do       id";
  column-gap: 16px;
  row-gap: 0;
  align-items: start;
}
/* LAYOUT STABILITY (2026-09-06, measured). The plate is the page's dominant
   object and it arrives in two beats: the shell paints, then the board answers
   and the title, the note and the fields fill it. Unreserved, that second beat
   grew the card and pushed the whole page down: the largest single shift on
   the board was 0.133, and the page scored 0.159 against a 0.1 line. While the
   plate is still waiting it now holds close to the height it will need, so the
   packet lands in place instead of shoving the page. The absent state is a
   real final state and sizes itself. */
#packet[data-state="pending"] { min-height: clamp(360px, 44vh, 470px); }

/* GRID: on Me, the head band stays vealth-ledger.css's own real box (k, id,
   state, act arranged in its own row); everywhere else it is a pure DOM
   grouping so k/state can sit as direct grid items of #packet itself. */
body:not(.lg-worker) #packet .wf-plate-head { display: contents; }
#packet .wf-plate-k {
  align-self: center;
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--wf-soft);
}
body:not(.lg-worker) #packet .wf-plate-k { grid-area: k; }
/* THE STATE WORD. A word on a line, never a capsule: no fill, no border, no
   pill radius (the dot still carries the shape grammar, unchanged, below).
   The six-role hue is restated one rule per role so it survives here rather
   than flattening to a single ink under a foreign reset. */
#packet .wf-state {
  align-self: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  gap: 7px;
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0;
  text-transform: lowercase;
}
body:not(.lg-worker) #packet .wf-state { grid-area: state; justify-self: end; }
#packet .wf-state--open,
#packet .wf-state--active, #packet .wf-state--claimed,
#packet .wf-state--accepted, #packet .wf-state--approved { color: var(--wf-living); }
#packet .wf-state--judgment, #packet .wf-state--submitted { color: var(--wf-attention); }
#packet .wf-state--rejected { color: var(--wf-stop); }
#packet .wf-state--receipted, #packet .wf-state--receipt { color: var(--wf-evidence); }
#packet .wf-state--earned { color: var(--wf-value); }
#packet .wf-state--expired, #packet .wf-state--unknown { color: var(--wf-unknown); }
/* SETTLED keeps the one filled mark on the sheet: a small sharp-cornered
   stamp, gold, the way a seal is struck once money has actually moved. */
#packet .wf-state--settled {
  padding: 3px 9px;
  border-radius: 2px;
  background: var(--wf-gold);
  color: var(--btn-gold-ink, #1b1207);
}
#packet .wf-state--settled .wf-shape { background: var(--btn-gold-ink, #1b1207); }

#packet .wf-plate-task {
  width: 100%;
  margin: 0;
  padding: 26px 0 0;
  border-top: 1px solid var(--wf-line-soft);
  font: 500 clamp(22px, 2.4vw, 30px)/1.15 "Fraunces", Georgia, serif;
  letter-spacing: -0.014em;
  color: var(--ink);
  /* No max-width here (pass 2 capped this at 30ch): the rule above is this
     element's own border-top, so a capped box left the rule stopping in mid
     air on a wide single-column page — confirmed rendered at 1440 on
     work.html before this line was dropped. width:100% is pinned for the
     same reason against the board's OWN title rule below. text-wrap still
     balances whatever width the title actually gets. */
  text-wrap: balance;
}
body:not(.lg-worker) #packet .wf-plate-task { grid-area: task; }
/* work.html's own register (vealth-ledger-board.css, loaded after this file)
   sizes the title for the two-column "account book" it draws above 901px —
   font-size 42px, max-width 22ch — rooted at #packet too, so id vs id ties
   and its extra body.lg-board class wins the tie. This pass already carries
   the board to one column at every width (the container rule above), which
   that title cap never anticipated: left alone, the divider above the title
   stopped at 22ch and the rest of the line sat bare (confirmed rendered).
   .wf-plate named twice, once on #packet itself, buys the one extra point
   needed to reliably win regardless of load order; every other board-only
   rule (the stamp button, the backing sentence) is untouched. */
body.lg-board #packet.wf-plate .wf-plate-task {
  font: 500 clamp(22px, 2.4vw, 30px)/1.15 "Fraunces", Georgia, serif;
  max-width: none;
  width: 100%;
}
/* The title of a posting is not a section heading: no house tick, no rule. */
#packet .wf-plate-task::before, #packet .wf-plate-task::after { content: none; display: none; }
#packet[data-state="absent"] .wf-plate-task,
#packet[data-state="pending"] .wf-plate-task,
#packet[data-state="unavailable"] .wf-plate-task { color: var(--muted); }
#packet .wf-plate-sub {
  margin: 10px 0 0;
  padding: 0;
  border: 0;
  font-size: 15.5px;
  line-height: 1.55;
  max-width: 62ch;
  color: var(--wf-soft);
}
body:not(.lg-worker) #packet .wf-plate-sub { grid-area: sub; }
/* THE PARTICULARS. Each row a line in the ledger: an italic gloss for the
   label, plain ink for the fact, ruled below. PAY breaks the pattern on
   purpose, because it is the one fact that is actually money: it alone
   takes the serif and the gold. */
#packet .wf-fields { margin: 24px 0 0; padding: 0; border-top: 1px solid var(--wf-line-soft); }
body:not(.lg-worker) #packet .wf-fields { grid-area: fields; }
#packet .wf-fields > div {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 2px 18px;
  padding: 15px 0;
  border-top: 0;
  border-bottom: 1px solid var(--wf-line-soft);
}
#packet .wf-fields > div:last-child { border-bottom: 0; }
#packet .wf-fields dt {
  padding-top: 2px;
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--wf-soft);
}
#packet .wf-fields dd { margin: 0; font-size: 15.5px; line-height: 1.5; color: var(--ink); max-width: 62ch; overflow-wrap: anywhere; }
#packet .wf-fields dd .wf-note { display: block; margin-top: 6px; font-size: 15.5px; line-height: 1.5; color: var(--wf-soft); }
#packet .wf-fields dd[data-packet="pay"] {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.005em;
  font-variant-numeric: tabular-nums;
  color: var(--wf-value);
}
/* font-weight and font-family are inherited: without this line the small
   boundary caption under the price ("Nothing pays before...") reads in the
   same bold serif as the price itself. Caught on the rendered, populated
   card, not assumed. */
#packet .wf-fields dd[data-packet="pay"] .wf-note { font-weight: 400; font-family: "Inter", system-ui, sans-serif; }
/* A second note under the fields, where a page keeps one. */
#packet .wf-fields ~ .wf-plate-sub { margin: 10px 0 0; color: var(--wf-soft); }
body:not(.lg-worker) #packet .wf-fields ~ .wf-plate-sub { grid-area: note; }
/* The step-by-step guide line vealth-packet.js inserts right under the task is a .wf-plate-sub too, so it took the "sub"
   row and printed on top of the state note (2026-10-06 walks). It has its own row on every page that shows the plate. */
body:not(.lg-worker) #packet .wf-plate-sub.wf-work-guide { grid-area: guide; margin-top: 12px; }
/* The board's backing sentence (demand and funding, from the same card). */
#packet .pk-backing { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--wf-line-soft); font-size: 15.5px; line-height: 1.6; color: var(--muted); }
body:not(.lg-worker) #packet .pk-backing { grid-area: backing; }
#packet .pk-backing b { color: var(--ink); font-weight: 600; }
/* The one act, then the id: small, mono, last. The DO word stays in the DOM
   for the anatomy and for a screen reader ("DO, Claim this job"); the eye
   reads the button alone. This pass restyles the sheet around the act,
   never the act itself: the button stays the site's one gold button. */
#packet .wf-doport { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 18px 0 0; }
body:not(.lg-worker) #packet .wf-doport { grid-area: do; }
.wf-doport .wf-port-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.wf-doport .wf-act { flex: none; }
/* The one real control settles under a press and releases into its existing
   hover lift (.wf-act:hover's own -1px translateY, still live under every
   reset that touches this file: confirmed on the rendered page, not
   assumed). Quiet-action pages (fund, post) are excluded: that variant is
   deliberately motionless underlined text, never a pressed button. */
#packet:not([data-act="quiet"]) .wf-doport .wf-act:active {
  transform: translateY(0);
  filter: brightness(0.97);
}
@media (prefers-reduced-motion: reduce) {
  #packet:not([data-act="quiet"]) .wf-doport .wf-act:active { transition: none; transform: none; filter: none; }
}
#packet .wf-plate-id {
  margin: 18px 0 0;
  max-width: 30ch;
  text-align: right;
  /* The id is machine identity, so it keeps the machine face; it is not the
     visitor's business, so it keeps none of the visitor's attention. Demoted
     to the quietest mark on the card (2026-09-06): it no longer shares optical
     weight with the one action beside it. Kept visible, not folded away,
     because Verify's whole job is to look one up. */
  font: 400 11px/1.4 var(--mono, ui-monospace, monospace);
  letter-spacing: 0.01em;
  color: color-mix(in srgb, var(--wf-soft) 62%, transparent);
  word-break: break-all;
}
body:not(.lg-worker) #packet .wf-plate-id { grid-area: id; justify-self: end; align-self: center; }
#packet > noscript { grid-column: 1 / -1; }
#packet > noscript .wf-plate-sub, #packet > noscript p { margin: 12px 0 0; }
/* On a page whose one primary is something else (paying, making the draft),
   the packet's own act wears the quiet action instead of a second gold pill. */
#packet[data-act="quiet"] .wf-doport .wf-act,
#packet[data-act="quiet"] .wf-doport .wf-act:hover {
  padding: 0 2px;
  border-color: transparent;
  background: none;
  box-shadow: none;
  transform: none;
  filter: none;
  color: var(--gold-text);
  font: 600 14px/1.3 "Inter", system-ui, sans-serif;
  letter-spacing: 0;
  text-transform: none;
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1.5px;
  text-decoration-color: color-mix(in srgb, var(--gold-text) 45%, transparent);
  white-space: normal;
}
#packet[data-act="quiet"] .wf-doport .wf-act:hover { color: var(--ink); text-decoration-color: var(--gold-text); }

/* ── PROOF — an evidence manifest ────────────────────────────────────────── */
.wf-evidence { border: 0; border-left: 3px solid var(--wf-evidence); padding: 2px 0 2px 18px; }
.wf-evidence ol { list-style: none; margin: 0; padding: 0; }
.wf-evidence li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; padding: 8px 0; }
.wf-evidence li + li { border-top: 1px solid var(--wf-line-soft); }
.wf-evidence .k {
  font: 600 12px/1.5 var(--label-face);
  letter-spacing:.02em;
  text-transform:none;
  color: var(--wf-evidence);
}
.wf-evidence .v { font-size: 15.5px; line-height: 1.55; color: var(--ink); }

/* ── JUDGMENT — one gate, two branches, both always drawn ────────────────── */
.wf-gate {
  border: 1px solid var(--wf-line-soft);
  border-radius: var(--r-card, 14px);
  background: var(--wf-face);
  padding: 18px 20px;
}
.wf-gate[data-open="yes"] { border-style: solid; }
.wf-gate-rule { margin: 0 0 14px; font: 600 16px/1.5 "Inter", system-ui, sans-serif; color: var(--ink); }
.wf-branches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
@media (max-width: 720px) { .wf-branches { grid-template-columns: minmax(0, 1fr); } }
.wf-branch { padding: 4px 0 6px 14px; border-left: 2px solid var(--wf-line-soft); }
.wf-branch + .wf-branch { margin-top: 12px; border-left-style: solid; }
.wf-branch[data-taken] { border-left: 3px solid var(--wf-line-soft); }
.wf-branch[data-taken="no"] { border-left-style: solid; opacity: 0.66; }
.wf-branch[data-taken="yes"] { border-left-color: var(--wf-living); }
.wf-branch-k {
  margin: 0 0 6px;
  font: 600 12px/1.5 var(--label-face);
  letter-spacing:.02em;
  text-transform:none;
  color: var(--wf-living);
}
.wf-branch + .wf-branch .wf-branch-k { color: var(--wf-evidence); }
.wf-branch[data-taken="yes"] .wf-branch-k { color: var(--ink); }
.wf-branch p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--muted); }
.wf-taken {
  display: block;
  margin-top: 8px;
  font: 600 12px/1.5 var(--label-face);
  letter-spacing:.02em;
  text-transform:none;
  color: var(--wf-soft);
}
.wf-branch[data-taken="yes"] .wf-taken { color: var(--wf-living); }
.wf-gate-result { margin: 14px 0 0; font-size: 16px; line-height: 1.55; color: var(--ink); }
.wf-gate-actor { margin: 6px 0 0; font: 500 12.5px/1.5 var(--label-face); color: var(--wf-soft); }

/* ── THE RECEIPT — the same paper as the packet, the same head rule ──────── */
.wf-receipt {
  position: relative;
  border: 1px solid var(--paper-edge, var(--wf-line-soft));
  border-radius: var(--r-card, 14px);
  background: var(--fx, var(--spectrum)) top / 100% 3px no-repeat, var(--paper, var(--wf-face-2));
  box-shadow: var(--shadow-paper, 0 24px 48px -36px var(--wf-shadow));
}
.wf-doc { margin: 0; }
.wf-receipt-head { padding: 16px 22px 14px; border-bottom: 1px solid var(--wf-line-soft); }
/* The head echoes the card: the kind and the chip lead, the id sits quiet at
   the right, the title takes its own line beneath. DOM order stays the
   anatomy's (kind, id, state, title); the flex order lays it out. */
.wf-receipt .wf-receipt-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 18px 26px 16px;
}
.wf-receipt .wf-receipt-head .wf-receipt-k { order: 1; }
.wf-receipt .wf-receipt-head .wf-state { order: 2; margin-left: 0; }
.wf-receipt .wf-receipt-head .wf-receipt-id { order: 3; margin-left: auto; text-align: right; }
.wf-receipt .wf-receipt-head .wf-receipt-title { order: 4; }
.wf-receipt-k {
  margin: 0;
  font: 600 12px/1.4 var(--label-face);
  letter-spacing:.02em;
  text-transform:none;
  color: var(--gold-ink, var(--wf-value));
}
.wf-receipt-title {
  margin: 0;
  flex-basis: 100%;
  font: 600 clamp(22px, 2.4vw, 30px)/1.18 "Fraunces", Georgia, serif;
  color: var(--ink);
}
.wf-receipt-id { margin: 0; font: 500 11px/1.5 var(--mono, ui-monospace, monospace); letter-spacing: 0.02em; color: var(--wf-soft); word-break: break-all; }
.wf-receipt .wf-receipt-id { margin: 0; }
.wf-receipt-sub {
  margin: 0;
  padding: 14px 26px;
  border-bottom: 1px solid var(--wf-line-soft);
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
}
.wf-receipt-body { padding: 16px 22px 18px; font-size: 15.5px; line-height: 1.55; color: var(--muted); }
.wf-receipt-body p { margin: 0; }
.wf-receipt-body p + p { margin-top: 10px; }
.wf-receipt-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  align-items: baseline;
  border-top: 4px double var(--ink);
  padding: 12px 26px 14px;
  font: 600 12px/1.6 var(--label-face);
  letter-spacing:.02em;
  text-transform:none;
  color: var(--wf-value);
}
.wf-receipt-mark {
  margin-left: auto;
  font: 500 12px/1.5 var(--label-face);
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--wf-soft);
}
.wf-receipt-mark a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1px; color: var(--wf-value); }

/* The four labelled rows of the document. */
.wf-rec { margin: 0; padding: 4px 26px 8px; }
.wf-rec > div {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 4px 20px;
  padding: 12px 0;
  border-top: 1px solid var(--wf-line-soft);
}
.wf-rec > div:first-child { border-top: 0; }
.wf-rec dt {
  font: 600 12px/1.7 var(--label-face);
  letter-spacing:.02em;
  text-transform:none;
  color: var(--wf-soft);
}
.wf-rec dd { margin: 0; font-size: 16px; line-height: 1.55; color: var(--ink); }

/* A part heading inside a document. */
.wf-part { padding: 18px 26px 6px; }
.wf-part > h3 {
  margin: 0 0 12px;
  font: 600 12px/1.5 var(--label-face);
  letter-spacing:.02em;
  text-transform:none;
  color: var(--wf-value);
}
.wf-part > h3::before, .wf-part > h3::after { display: none; }

/* What a receipt does NOT claim: a note with the stop hue at its rule. */
.wf-notclaims {
  margin: 8px 26px 18px;
  padding: 14px 18px;
  border: 1px solid var(--wf-line-soft);
  border-left: 3px solid var(--wf-stop);
  border-radius: 6px;
}
.wf-notclaims > p {
  margin: 0 0 8px;
  font: 600 12px/1.5 var(--label-face);
  letter-spacing:.02em;
  text-transform:none;
  color: var(--wf-stop);
}
.wf-notclaims ul { margin: 0; padding-left: 18px; font-size: 15px; line-height: 1.55; color: var(--muted); }
.wf-notclaims li + li { margin-top: 6px; }

/* The event spine: chronology as a ruled list. */
.wf-spine { list-style: none; margin: 0 0 12px; padding: 0 26px 0 36px; }
.wf-spine li {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 4px 20px;
  padding: 10px 0 10px 16px;
  border-left: 2px solid var(--wf-line-soft);
  position: relative;
}
.wf-spine li::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 17px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--wf-line);
}
.wf-spine li:last-child::before { width: 10px; height: 10px; left: -6px; background: var(--wf-value); }
.wf-spine .k {
  font: 600 12px/1.7 var(--label-face);
  letter-spacing:.02em;
  text-transform:none;
  color: var(--ink);
}
.wf-spine .v { font: 500 13px/1.55 var(--label-face); color: var(--wf-soft); word-break: break-word; }
.wf-spine .v a { color: var(--wf-value); }

/* The disposition rail: settlement, or an earned record. Exactly one lane is
   taken; the one that was not stays drawn and says why. The dashed lane is a
   pinned truth outside this lane; it is quiet and labelled. */
.wf-disposition {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 8px 26px 16px;
}
.wf-lane { padding: 12px 0 12px 16px; border-left: 3px solid var(--wf-line-soft); }
.wf-lane + .wf-lane { margin-left: 18px; }
.wf-lane[data-taken="no"] { border-left-style: dashed; opacity: 0.6; }
.wf-lane[data-taken="yes"] { border-left-color: var(--wf-value); }
.wf-lane-k {
  margin: 0 0 6px;
  font: 600 12px/1.5 var(--label-face);
  letter-spacing:.02em;
  text-transform:none;
  color: var(--wf-soft);
}
.wf-lane[data-taken="yes"] .wf-lane-k { color: var(--ink); }
.wf-lane p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted); }
.wf-lane-mark {
  display: block;
  margin-top: 12px;
  font: 600 12px/1.5 var(--label-face);
  letter-spacing:.02em;
  text-transform:none;
  color: var(--wf-soft);
}
.wf-lane[data-taken="yes"] .wf-lane-mark { color: var(--wf-value); }
@media (max-width: 620px) {
  .wf-disposition { grid-template-columns: minmax(0, 1fr); }
  .wf-lane + .wf-lane { margin: 10px 0 0; }
}

/* THE CLOSURE EDGES. The foot of a receipt differs in KIND by state; a truth
   guard pins these six so an open review can never read as sealed. */
.wf-receipt { border-bottom-width: 1px; }
.wf-receipt[data-close="open"] {
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  padding-bottom: 2px;
  position: relative;
}
.wf-receipt[data-close="open"]::after {
  content: "";
  position: absolute;
  left: 26px;
  bottom: -13px;
  width: 0;
  height: 13px;
  border-left: 2px dotted var(--wf-line);
}
.wf-receipt[data-close="open"] .wf-receipt-foot { border-top: 0; padding-top: 2px; color: var(--wf-attention); }
.wf-receipt[data-close="rejected"] .wf-receipt-foot { border-top: 2px dotted var(--ink); color: var(--wf-stop); }
.wf-receipt[data-close="approved"] .wf-receipt-foot { border-top: 2px solid var(--ink); color: var(--wf-attention); }
.wf-receipt[data-close="receipt"] .wf-receipt-foot { border-top: 2px solid var(--ink); color: var(--wf-evidence); }
.wf-receipt[data-close="settled"] .wf-receipt-foot { border-top: 4px double var(--ink); color: var(--wf-value); }
.wf-receipt[data-close="earned"] .wf-receipt-foot { border-top: 4px double var(--ink); color: var(--wf-living); }

/* ── THE RECORD — receipts at full weight, testimony set back ────────────── */
.wf-record { border-top: 0; padding-top: 0; }
.wf-record-k {
  margin: 0 0 12px;
  font: 600 12px/1.5 var(--label-face);
  letter-spacing:.02em;
  text-transform:none;
  color: var(--wf-soft);
}
.wf-record ul { list-style: none; margin: 0; padding: 0; }
.wf-record li { margin: 0; padding: 8px 0 8px 16px; font-size: 15.5px; line-height: 1.55; color: var(--ink); border-left: 3px solid var(--wf-value); }
.wf-record li + li { margin-top: 8px; }
.wf-record li b { display: block; font-size: 16px; color: var(--ink); }
.wf-record li span { display: block; margin-top: 2px; font: 500 12.5px/1.5 var(--label-face); color: var(--wf-soft); word-break: break-word; }
.wf-record--weak { margin: 12px 0 0 14px; }
.wf-record--weak li { color: var(--wf-soft); border-left: 1px dashed var(--wf-line); }
.wf-record--weak li b { font-size: 15px; color: var(--wf-soft); font-weight: 600; }
.wf-record-group + .wf-record-group { margin-top: 22px; }
.wf-record-group > .wf-record-k { color: var(--wf-soft); }
.wf-record-group[data-strength="strong"] > .wf-record-k { color: var(--ink); }
.wf-record-what { margin: 0 0 10px; font-size: 15px; line-height: 1.55; color: var(--muted); }
.wf-record--weak .wf-record-what { font-size: 14.5px; color: var(--wf-soft); }

/* The return: the record goes back to the place. */
.wf-return { display: flex; align-items: flex-start; gap: 12px; }
.wf-return svg { flex: none; color: var(--wf-value); margin-top: 3px; }
.wf-return p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--muted); }

/* ═══════════════════════════════════════════════════════════════════════════
   THE SPINE LAYOUT — three plates across, the packet full width beneath
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 901px) {
  .wf-field--spine { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 18px; }
  .wf-field--spine > .wf-node--up { grid-column: span 1; }
  .wf-field--spine > .wf-node--axis { grid-column: 1 / -1; padding: 0; }
}

/* ── EDITABLE FIELDS (post) ──────────────────────────────────────────────── */
.wf-edit {
  width: 100%;
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--wf-face-2);
  border: 1px solid var(--wf-line-soft);
  border-radius: 8px;
  padding: 11px 14px;
  min-height: 46px;
}
textarea.wf-edit { min-height: 92px; resize: vertical; }
.wf-edit:focus { outline: 2px solid var(--wf-value); outline-offset: 1px; }

/* ── LEDGER ROWS — a name, then what is true of it, with its state chip ──── */
.wf-ledger { list-style: none; margin: 10px 0 0; padding: 0; border-top: 1px solid var(--wf-line-soft); }
.wf-ledger > li {
  display: grid;
  grid-template-columns: minmax(160px, 230px) minmax(0, 1fr);
  gap: 6px 28px;
  padding: 20px 0 22px;
  border-bottom: 1px solid var(--wf-line-soft);
  align-items: start;
}
.wf-ledger-k {
  margin: 0;
  font: 600 19px/1.3 "Fraunces", Georgia, serif;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--ink);
}
.wf-ledger-v { margin: 0; font-size: 16px; line-height: 1.6; color: var(--muted); }
.wf-ledger-v + .wf-ledger-v { margin-top: 10px; }
.wf-ledger-v b { color: var(--ink); font-weight: 600; }
.wf-ledger-v > .wf-ledger-state { vertical-align: 2px; }
@media (max-width: 620px) {
  .wf-ledger > li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* ── DOORS (fund) — a money door is the same paper, with its live state ──── */
.wf-doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); gap: 18px; margin-top: 18px; }
.wf-door {
  position: relative;
  border: 1px solid var(--paper-edge, var(--wf-line-soft));
  border-radius: var(--r-card, 14px);
  background: var(--fx, var(--spectrum)) top / 100% 3px no-repeat, var(--paper, var(--wf-face-2));
  padding: 22px 24px 24px;
  box-shadow: var(--shadow-paper, 0 18px 40px -34px var(--wf-shadow));
}
.wf-door-k { margin: 0 0 6px; font: 600 clamp(20px, 1.9vw, 24px)/1.2 "Fraunces", Georgia, serif; color: var(--ink); }
.wf-door-role {
  display: block;
  margin: 0 0 12px;
  font: 600 12px/1.5 var(--label-face);
  letter-spacing:.02em;
  text-transform:none;
  color: var(--wf-value);
}
.wf-door p { margin: 0 0 10px; font-size: 15.5px; line-height: 1.55; color: var(--muted); }
.wf-door p:last-child { margin-bottom: 0; }
.wf-door .wf-state-line { font: 600 13px/1.5 var(--mono, ui-monospace, monospace); color: var(--wf-evidence); }
.wf-door pre {
  margin: 12px 0 0;
  padding: 12px 14px;
  border: 1px solid var(--wf-line-soft);
  border-radius: 6px;
  background: var(--pre-bg);
  font: 500 12.5px/1.55 var(--mono, ui-monospace, monospace);
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 17em;
  overflow: auto;
}
.wf-door label { font: 600 14.5px/1.5 "Inter", system-ui, sans-serif; color: var(--ink); }
.wf-door input[type="number"], .wf-door input[type="text"] {
  font: inherit; font-size: 16px; color: var(--ink); background: var(--wf-face-2);
  border: 1px solid var(--wf-line-soft); border-radius: 8px; padding: 10px 12px; min-height: 46px; width: 120px;
}

/* ── THE REFERENCE BAND — true, kept, and quieter than the work ──────────── */
.wf-reference { margin: clamp(64px, 9vw, 112px) 0 0; padding-top: 36px; border-top: 1px solid var(--wf-line-soft); }
.wf-reference > h2 {
  font: 600 clamp(26px, 3.2vw, 38px)/1.1 "Fraunces", Georgia, serif;
  color: var(--ink);
  letter-spacing: -0.012em;
  margin: 0 0 12px;
  padding-left: 0;
  max-width: 24ch;
  text-wrap: balance;
}
.wf-reference > h2::before, .wf-reference > h2::after { display: none; }
.wf-reference > .wf-lede { font-size: 16.5px; line-height: 1.6; color: var(--muted); max-width: 60ch; margin: 0 0 22px; }
.wf-reference > .wf-sec { margin-top: clamp(40px, 6vw, 64px); }
.wf-reference > .wf-sec > h2 { font-size: clamp(24px, 2.8vw, 32px); }

/* ── THE BOARD SLOT (work) ───────────────────────────────────────────────── */
.wf-board-slot { margin-top: 18px; }
.wf-board-slot .work-board { border-top: 0; margin-top: 0; padding-top: 0; }

/* ── THE VERIFIER (receipts) — one input, one act ────────────────────────── */
.wf-verify { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; margin: 18px 0 0; }
.wf-verify input {
  flex: 1 1 22ch;
  min-width: 0;
  min-height: 46px;
  font: 500 15px/1.4 var(--mono, ui-monospace, monospace);
  color: var(--ink);
  background: var(--wf-face-2);
  border: 1px solid var(--wf-line-soft);
  border-radius: 10px;
  padding: 12px 16px;
}
.wf-verify input:focus { outline: 2px solid var(--wf-value); outline-offset: 1px; }

/* ── THE PROOF BUNDLE, AS A JUDGEABLE ITEM (receipts queue) ──────────────── */
.wf-bundle { border-top: 1px solid var(--wf-line-soft); padding: 16px 0 18px; }
.wf-bundle + .wf-bundle { margin-top: 14px; }
.wf-bundle-k { margin: 0 0 8px; font: 600 13.5px/1.5 var(--label-face); color: var(--ink); word-break: break-all; }
.wf-bundle-checks { margin: 12px 0 6px; }
.wf-bundle-checks legend {
  padding: 0;
  font: 600 12px/1.5 var(--label-face);
  letter-spacing:.02em;
  text-transform:none;
  color: var(--wf-soft);
}
.wf-bundle-checks label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink);
}
.wf-bundle-checks input { flex: none; margin: 0; }
.wf-bundle-note { margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: var(--muted); }
.wf-hash { font: 500 12.5px/1.5 var(--mono, ui-monospace, monospace); color: var(--wf-evidence); word-break: break-all; }

/* ═══════════════════════════════════════════════════════════════════════════
   THE DEEPER PAGES
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── THE LOCATOR — where this page sits: six words, the current one gold ── */
.wf-lens { margin: 0 0 clamp(20px, 3vw, 36px); }
.wf-lens-k {
  margin: 0 0 8px;
  font: 600 12px/1.5 var(--label-face);
  letter-spacing:.02em;
  text-transform:none;
  color: var(--wf-soft);
}
.wf-lens ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 22px; }
.wf-lens li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border: 0;
  font: 600 12px/1.5 var(--label-face);
  letter-spacing:.02em;
  text-transform:none;
  color: var(--wf-soft);
  flex: none;
  min-width: 0;
}
.wf-lens li[aria-current] { color: var(--wf-value); border: 0; font-weight: 600; }
.wf-lens li[aria-current]::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--wf-value);
}
.wf-lens p { margin: 10px 0 0; font-size: 15px; line-height: 1.55; color: var(--wf-soft); max-width: 60ch; }
.wf-lens a { color: inherit; }

/* ── THE CONTROL BOARD — one gate in, three controls on what is here ─────── */
.wf-board { margin: 0; }
.wf-intake {
  display: block;
  position: relative;
  border: 1px solid var(--paper-edge, var(--wf-line-soft));
  border-bottom-width: 3px;
  border-bottom-color: var(--wf-gold);
  border-radius: var(--r-card, 14px);
  background: var(--paper, var(--wf-face-2));
  padding: 22px 24px 24px;
  text-decoration: none;
  box-shadow: var(--shadow-paper, 0 18px 40px -34px var(--wf-shadow));
}
/* The gate's stem: the three controls hang from it. */
.wf-intake::after {
  content: "";
  position: absolute;
  left: 32px;
  bottom: -20px;
  height: 20px;
  width: 0;
  border-left: 3px solid var(--wf-gold);
}
.wf-intake-k {
  display: block;
  margin: 0 0 6px;
  font: 600 clamp(24px, 2.4vw, 30px)/1.1 "Fraunces", Georgia, serif;
  color: var(--ink);
}
.wf-intake-role {
  display: block;
  margin: 0 0 12px;
  font: 600 12px/1.5 var(--label-face);
  letter-spacing:.02em;
  text-transform:none;
  color: var(--wf-value);
}
.wf-intake p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--muted); }
.wf-intake:hover .wf-intake-k { color: var(--wf-value); }
.wf-ports {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 34px;
}
.wf-ports > .wf-port { position: relative; margin-top: 0; }
@media (max-width: 720px) {
  .wf-ports { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .wf-intake::after { left: 24px; }
}

/* ── RAILS — infrastructure beneath a node, with its true state ──────────
   The left edge keeps its state line (a live rail runs, a stopped rail is
   drawn with a real gap, a dead one ends); the chip says it in a word. */
.wf-rails { list-style: none; margin: 10px 0 0; padding: 0; border-top: 1px solid var(--wf-line-soft); }
.wf-rail {
  position: relative;
  display: grid;
  grid-template-columns: minmax(170px, 240px) minmax(0, 1fr);
  gap: 8px 28px;
  padding: 20px 0 22px 22px;
  border-bottom: 1px solid var(--wf-line-soft);
  align-items: start;
}
.wf-rail::before {
  content: "";
  position: absolute;
  left: 0;
  top: 20px;
  bottom: 22px;
  width: 3px;
  border-radius: 2px;
  background: var(--wf-line-soft);
}
.wf-rail[data-state="live"]::before { background: var(--wf-living); }
.wf-rail[data-state="parked"]::before {
  background: repeating-linear-gradient(to bottom, var(--wf-unknown) 0 5px, transparent 5px 10px);
}
/* STOPPED: the rail runs, and then it stops. A third of it is absent. */
.wf-rail[data-state="stopped"]::before {
  background: linear-gradient(to bottom, var(--wf-stop) 0 33%, transparent 33% 67%, var(--wf-stop) 67% 100%);
}
/* DEAD: the rail ends and does not resume. */
.wf-rail[data-state="dead"]::before {
  background: linear-gradient(to bottom, var(--wf-unknown) 0 30%, transparent 30% 100%);
}
.wf-rail-k { margin: 0; font: 600 19px/1.3 "Fraunces", Georgia, serif; color: var(--ink); }
.wf-rail-node {
  display: block;
  margin-top: 6px;
  font: 400 14.5px/1.5 "Inter", system-ui, sans-serif;
  letter-spacing: 0;
  text-transform: none;
  color: var(--wf-soft);
}
.wf-rail-v { margin: 0; font-size: 16px; line-height: 1.6; color: var(--muted); }
.wf-rail-v + .wf-rail-v { margin-top: 10px; }
.wf-rail-v b { color: var(--ink); font-weight: 600; }
.wf-rail .wf-figure { margin: 4px 0 8px; }
@media (max-width: 620px) {
  .wf-rail { grid-template-columns: minmax(0, 1fr); gap: 8px; padding-left: 18px; }
}

/* ── THE INVARIANT BAND (safety) — a condition that holds at every stage ── */
.wf-invariant {
  border-top: 3px solid var(--wf-stop);
  border-bottom: 1px solid var(--wf-line-soft);
  padding: 22px 0 26px;
  margin: clamp(24px, 3vw, 40px) 0 0;
}
.wf-invariant-k {
  margin: 0 0 12px;
  font: 600 12px/1.5 var(--label-face);
  letter-spacing:.02em;
  text-transform:none;
  color: var(--wf-stop);
}
.wf-invariant > p { margin: 0; font: 500 clamp(18px, 1.9vw, 21px)/1.45 "Fraunces", Georgia, serif; color: var(--ink); max-width: 44ch; }
.wf-invariant > p + p { margin-top: 10px; }
.wf-span {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px 22px;
}
.wf-span li { padding: 4px 0 4px 14px; border-left: 2px solid var(--wf-line-soft); }
.wf-span b {
  display: block;
  font: 600 12px/1.6 var(--label-face);
  letter-spacing:.02em;
  text-transform:none;
  color: var(--wf-stop);
}
.wf-span span { display: block; margin-top: 6px; font-size: 15.5px; line-height: 1.55; color: var(--muted); }

/* ── THE STANDING LADDER (standard) — rungs, the held one marked ─────────── */
.wf-standing { list-style: none; margin: 22px 0 0; padding: 0; }
.wf-rung {
  position: relative;
  padding: 16px 20px 18px 22px;
  border-left: 3px solid var(--wf-line-soft);
  border-radius: 0 8px 8px 0;
}
.wf-rung + .wf-rung { margin-top: 6px; }
.wf-rung[data-held="no"] { border-left-style: solid; opacity: 0.78; }
.wf-rung[data-held="yes"] {
  opacity: 1;
  border-left-color: var(--wf-living);
  border-left-width: 4px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--wf-living) 9%, transparent), transparent 72%);
}
.wf-rung-k {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  font: 600 clamp(22px, 2.2vw, 26px)/1.2 "Fraunces", Georgia, serif;
  color: var(--ink);
}
.wf-rung-n {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 12px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  background: color-mix(in srgb, currentColor 10%, transparent);
  font: 600 12px/1.4 var(--label-face);
  letter-spacing:.02em;
  text-transform:none;
  color: var(--wf-soft);
}
.wf-rung[data-held="yes"] .wf-rung-n { color: var(--wf-living); }
.wf-rung p { margin: 8px 0 0; font-size: 16px; line-height: 1.55; color: var(--muted); max-width: 70ch; }
.wf-lapse {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 22px 0 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--wf-attention);
}
.wf-lapse p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--muted); max-width: 70ch; }
.wf-lapse b { color: var(--ink); }

/* ── THE HUMAN ↔ MACHINE TWIN (connect) ──────────────────────────────────── */
.wf-twin-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 0;
  align-items: start;
  margin-top: 18px;
}
.wf-twin-side { min-width: 0; }
.wf-twin-side + .wf-twin-side {
  padding-left: clamp(18px, 2.4vw, 32px);
  margin-left: clamp(18px, 2.4vw, 32px);
  border-left: 1px solid var(--wf-line-soft);
}
.wf-twin-k {
  margin: 0 0 12px;
  font: 600 12px/1.5 var(--mono, ui-monospace, monospace);
  letter-spacing:.02em;
  text-transform:none;
  color: var(--wf-soft);
}
.wf-twin-side + .wf-twin-side .wf-twin-k { color: var(--wf-evidence); }
.wf-calls { list-style: none; margin: 0; padding: 0; }
.wf-calls li { padding: 12px 0; border-top: 1px solid var(--wf-line-soft); }
.wf-calls li:first-child { border-top: 0; padding-top: 0; }
.wf-calls b {
  display: block;
  font: 600 12px/1.6 var(--mono, ui-monospace, monospace);
  letter-spacing:.02em;
  text-transform:none;
  color: var(--wf-soft);
}
.wf-calls code {
  display: block;
  margin-top: 4px;
  font: 500 13px/1.55 var(--mono, ui-monospace, monospace);
  color: var(--wf-evidence);
  background: none;
  padding: 0;
  word-break: break-word;
}
.wf-calls span { display: block; margin-top: 6px; font-size: 14.5px; line-height: 1.5; color: var(--muted); }
@media (max-width: 860px) {
  .wf-twin-split { grid-template-columns: minmax(0, 1fr); }
  .wf-twin-side + .wf-twin-side {
    padding: 18px 0 0;
    margin: 20px 0 0;
    border-left: 0;
    border-top: 1px solid var(--wf-line-soft);
  }
}

/* ── DEFINITION ROWS — a term, then what it means ────────────────────────── */
.wf-defs { margin: 10px 0 0; border-top: 1px solid var(--wf-line-soft); }
.wf-defs > div {
  display: grid;
  grid-template-columns: minmax(150px, 230px) minmax(0, 1fr);
  gap: 6px 28px;
  padding: 18px 0 20px;
  border-bottom: 1px solid var(--wf-line-soft);
}
.wf-defs dt {
  font: 600 18px/1.35 "Fraunces", Georgia, serif;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--ink);
}
.wf-defs dt .wf-rail-node { margin-top: 4px; }
.wf-defs dd { margin: 0; font-size: 16px; line-height: 1.6; color: var(--muted); }
.wf-defs dd b { color: var(--ink); font-weight: 600; }
.wf-defs dd + dd { margin-top: 8px; }
.wf-defs dd .wf-serves { display: block; margin-top: 6px; font: 400 13.5px/1.5 "Inter", system-ui, sans-serif; color: var(--wf-soft); }
@media (max-width: 620px) {
  .wf-defs > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHONES — one column, the same type, the same objects
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .wf-field { grid-template-columns: minmax(0, 1fr); grid-auto-flow: row; row-gap: 26px; }
  .wf-node--up,
  .wf-node--axis,
  .wf-node--channel { grid-column: 1; align-self: stretch; }
  .wf-node--channel { display: block; }
  .wf-chan + .wf-chan { margin-top: 26px; }
  /* The card on a phone: one column, the action full width, the id under it.
     Title before action, still. Rooted at #packet (an id, THE WORK PACKET
     section above) rather than .wf-plate: the desktop rules there are also
     #packet-rooted at equal specificity, so without this the phone layout
     would silently keep the desktop template and the id could clip past the
     edge beside a full-width button. Scoped off Me (body.lg-worker) exactly
     like the desktop rule, so its own opened-out columns still stand. */
  body:not(.lg-worker) #packet {
    grid-template-areas:
      "k        state"
      "task     task"
      "sub      sub"
      "guide    guide"
      "fields   fields"
      "note     note"
      "backing  backing"
      "do       do"
      "id       id";
    padding: 18px 18px 16px;
  }
  #packet .wf-plate-task { font-size: clamp(21px, 6vw, 26px); }
  .wf-doport .wf-act { flex: 1 1 auto; }
  #packet .wf-plate-id { justify-self: start; text-align: left; margin-top: 10px; max-width: none; }
  #packet .wf-fields > div { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 10px 0; }
  .wf-rec { padding-left: 18px; padding-right: 18px; }
  .wf-rec > div { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 10px 0; }
  .wf-spine { padding-left: 24px; padding-right: 18px; }
  .wf-spine li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .wf-receipt .wf-receipt-head { padding: 16px 18px 14px; }
  .wf-receipt .wf-receipt-head .wf-receipt-id { margin-left: 0; flex-basis: 100%; text-align: left; }
  .wf-receipt-sub, .wf-receipt-foot { padding-left: 18px; padding-right: 18px; }
  .wf-part { padding-left: 18px; padding-right: 18px; }
  .wf-notclaims, .wf-disposition { margin-left: 18px; margin-right: 18px; }
  .wf-receipt[data-close="open"]::after { left: 18px; }
  .wf-head h1 { font-size: clamp(38px, 11vw, 52px); }
  .wf-sec > h2 { font-size: clamp(28px, 8vw, 36px); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOTION — a dash resolving into a value that arrived. Once, never looping.
   ═══════════════════════════════════════════════════════════════════════════ */
@keyframes wf-resolve {
  from { opacity: 0.4; }
  to { opacity: 1; }
}
.wf-resolved { animation: wf-resolve 200ms ease-out 1; }
@media (prefers-reduced-motion: reduce) {
  .wf-resolved { animation: none; }
}

/* Forced colours: the objects keep their edges when the palette is gone.
   #packet carries its own border tokens now (THE WORK PACKET, above) at an
   id's weight, which would otherwise outrank this rule's .wf-plate on the
   same element; named here explicitly so the system palette still wins. */
@media (forced-colors: active) {
  #packet, .wf-plate, .wf-port, .wf-need, .wf-receipt, .wf-door, .wf-intake, .wf-gate { border-color: CanvasText; }
  .wf-state, .wf-ledger-state, .wf-rail-state, .wf-rung-n { border-color: CanvasText; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ONE EYEBROW, ONE LABEL (pass 2)
   Every small mono head in the Workfield is one of two things. An EYEBROW
   names the kind of thing (a packet, a receipt, a stage, a role): 11.5px,
   letterspaced .24em, in the deep gold or the role's own ink. A LABEL names a
   field or a mark inside an object: 10.5px, .16em, in the quiet ink. Grouped
   here, after every component, so the metrics cannot drift per object; the
   colours above stay with their roles.
   ═══════════════════════════════════════════════════════════════════════════ */
.wf-eyebrow, .wf-plate-k, .wf-receipt-k, .wf-stage, .wf-part > h3, .wf-lens-k, .wf-twin-k, .wf-invariant-k,
.wf-port-role, .wf-door-role, .wf-intake-role, .wf-branch-k, .wf-lane-k, .wf-notclaims > p, .wf-record-k,
.wf-rung-n {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing:.02em;
  text-transform:none;
}
.wf-rung-n { line-height: 1; letter-spacing: 0.14em; }
.wf-fields dt, .wf-rec dt, .wf-spine .k, .wf-evidence .k, .wf-taken, .wf-lane-mark, .wf-calls b, .wf-span b,
.wf-bundle-checks legend, .wf-receipt-foot, .wf-lens li, .op-k {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing:.02em;
  text-transform:none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE OPERATE REGISTER — fund, post, verify, the receipt, Me (pass 2)
   Five pages carried this as identical page-local blocks. It lives here once.
   One scene, one task, one primary action; warm paper, gold and green and
   black, Fraunces for what is said, Inter for how it is explained, mono only
   for eyebrows, labels and ids. Every colour is a house token.
   ═══════════════════════════════════════════════════════════════════════════ */
main.wrap.wf-page.op { max-width: 1180px; padding-top: 0; }
.op-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(28px, 4.5vw, 72px); align-items: start; padding: clamp(44px, 7vh, 84px) 0 clamp(36px, 5vh, 56px); }
.op-hero--one { grid-template-columns: minmax(0, 1fr); }
.op-hero--one > * { max-width: 900px; }
.op-eyebrow { margin: 0 0 16px; font: 600 12px/1.4 var(--label-face); letter-spacing:.02em; text-transform:none; color: var(--gold-ink, var(--wf-value)); }
.op-eyebrow a { color: inherit; text-decoration: none; }
.op-eyebrow a:hover { color: var(--ink); }
.op h1 { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: clamp(38px, 4.9vw, 64px); line-height: 1.0; letter-spacing: -0.022em; color: var(--ink); max-width: 16ch; text-wrap: balance; margin: 0 0 18px; padding: 0; }
.op h1::before { display: none; }
.op h1::after { content: ""; display: block; width: 150px; height: 4px; border-radius: 2px; margin-top: 22px; background: var(--fx, var(--spectrum)); background-size: 260% 100%; }
.op-lede { margin: 0 0 14px; font-family: "Fraunces", Georgia, serif; font-weight: 500; font-size: clamp(18px, 1.8vw, 22px); line-height: 1.42; color: var(--ink); max-width: 46ch; }
.op-sub { margin: 0 0 14px; font-size: 16px; line-height: 1.65; color: var(--muted); max-width: 58ch; }
.op-sub b, .op-p b { color: var(--ink); font-weight: 600; }
.op-p { margin: 0 0 12px; font-size: 16px; line-height: 1.65; color: var(--muted); max-width: 66ch; }
.op-note { margin: 18px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--soft); max-width: 60ch; }
/* A hero note that belongs to BOTH columns: it closes the screen under the
   text and the door alike, rather than delaying one of them. */
.op-hero > .op-hero-foot { grid-column: 1 / -1; margin: clamp(26px, 3.4vh, 40px) 0 0; padding-top: clamp(20px, 2.6vh, 28px); border-top: 1px solid var(--wf-line-soft, var(--rule)); max-width: 76ch; font-size: 15px; }
.op-help { margin: 6px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--soft); max-width: 62ch; }
.op-k { margin: 0 0 10px; color: var(--soft); }
.op-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin: 22px 0 0; }
.op-status { font-size: 13.5px; line-height: 1.5; color: var(--soft); }
.op-scene { padding: clamp(44px, 6vw, 80px) 0 clamp(24px, 3vw, 40px); border-top: 1px solid var(--rule); }
.op h2, .op .op-h2 { margin: 0 0 12px; padding: 0; font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: clamp(26px, 3vw, 38px); line-height: 1.1; letter-spacing: -0.015em; color: var(--ink); max-width: 24ch; text-wrap: balance; }
.op h2::before, .op h2::after { display: none; }
.op h3 { font-family: "Fraunces", Georgia, serif; font-weight: 600; color: var(--ink); }
.op a:not(.wf-act) { color: var(--gold-text); text-decoration-color: color-mix(in srgb, var(--gold-text) 45%, transparent); text-underline-offset: 3px; }
.op a:not(.wf-act):hover { color: var(--ink); }
.op-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); margin-top: 22px; }
.op-list { list-style: none; margin: 0; padding: 0; }
.op-list > li { padding: 12px 0; border-top: 1px solid var(--rule); font-size: 15.5px; line-height: 1.6; color: var(--muted); }
.op-list > li b { color: var(--ink); font-weight: 600; }
.op-taken { display: block; margin-top: 4px; font: 500 12px/1.5 var(--label-face); letter-spacing: 0.06em; color: var(--soft); }
.op [data-branch][data-taken="yes"] > b, .op [data-branch][data-taken="yes"] .op-taken { color: var(--gold-text); }
.op-figures { display: flex; flex-wrap: wrap; gap: 14px 28px; margin: 22px 0 0; }
.op-figures div { min-width: 0; }
.op-figures dt { font: 600 12px/1.4 var(--label-face); letter-spacing:.02em; text-transform:none; color: var(--soft); margin: 0 0 4px; }
.op-figures dd { margin: 0; font-size: 14px; line-height: 1.4; color: var(--muted); }
.op-num, .op-figures dd b { font: 600 clamp(22px, 2vw, 28px)/1.05 "Fraunces", Georgia, serif; letter-spacing: -0.01em; color: var(--gold-ink, var(--wf-value)); font-variant-numeric: tabular-nums; }
.op-figure { margin: 18px 0 0; font-size: 15px; color: var(--muted); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.op-ai { margin: 34px 0 0; font: 500 12.5px/1.7 var(--mono, ui-monospace, monospace); color: var(--soft); max-width: 72ch; }
.op .wf-act:focus-visible, .op input:focus-visible, .op textarea:focus-visible, .op summary:focus-visible, .op button:focus-visible { outline: 2px solid var(--gold-text); outline-offset: 3px; }
.op .wf-act[disabled] { opacity: 0.5; cursor: not-allowed; filter: none; }
.op .wf-acts { gap: 10px 22px; margin-top: 18px; align-items: center; }

/* fields */
.op .wf-edit, .op .wf-verify input, .op .lookup input, .op .field, .op .pub-form input, .op .wf-door input[type="number"] { font: 400 16px/1.5 "Inter", system-ui, sans-serif; color: var(--ink); background: var(--face); border: 1px solid var(--rule); border-radius: var(--r-ctl, 10px); padding: 11px 14px; min-height: 44px; width: 100%; }
.op textarea.wf-edit, .op textarea.field { min-height: 96px; resize: vertical; }
.op .wf-edit:focus, .op .wf-verify input:focus, .op .lookup input:focus, .op .field:focus, .op .pub-form input:focus, .op .wf-door input:focus { outline: 2px solid var(--gold-text); outline-offset: 2px; }
.op-label { display: block; margin: 18px 0 8px; font: 600 14px/1.3 "Inter", system-ui, sans-serif; color: var(--ink); }
.op-label:first-child { margin-top: 0; }

/* a plain paper document (the two ways in on Me, the proof form) */
.op-doc { position: relative; background: var(--fx, var(--spectrum)) top / 100% 3px no-repeat, var(--paper, var(--face-strong)); border: 1px solid var(--paper-edge, var(--rule)); border-radius: var(--r-card, 14px); box-shadow: var(--shadow-paper); }
.op-doc-in { padding: 22px 24px 22px; }

/* the receipt document, in the operate register */
.op .wf-receipt .wf-receipt-head { padding: 18px 24px 14px; gap: 8px 16px; border-bottom: 1px solid var(--rule); }
.op .wf-receipt .wf-state { margin-left: 0; }
.op .wf-receipt-title { padding: 8px 0 0; margin: 0; flex-basis: 100%; max-width: none; font-size: clamp(20px, 2vw, 27px); line-height: 1.16; }
.op .wf-receipt-sub { padding: 12px 24px 14px; margin: 0; border-bottom: 1px solid var(--rule); font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.op .wf-rec { padding: 4px 24px 8px; margin: 0; }
.op .wf-rec > div { grid-template-columns: 128px minmax(0, 1fr); gap: 2px 18px; padding: 11px 0; border-top: 1px solid var(--rule); }
.op .wf-rec > div:first-child { border-top: 0; }
.op .wf-rec dd { font-size: 15px; line-height: 1.55; color: var(--ink); }
.op .wf-part { padding: 14px 24px 4px; }
.op .wf-part > h3 { color: var(--soft); margin: 0 0 8px; }
.op .wf-notclaims { margin: 4px 24px 12px; padding: 8px 0 8px 16px; border: 0; border-left: 3px solid var(--wf-stop); }
.op .wf-notclaims > p { color: var(--wf-stop); margin: 0 0 6px; }
.op .wf-notclaims ul { font-size: 14px; line-height: 1.55; color: var(--muted); }
.op .wf-disposition { margin: 4px 24px 12px; gap: 0 24px; }
.op .wf-lane { border-left: 3px solid var(--gold-text); padding: 8px 0 8px 14px; }
.op .wf-lane + .wf-lane { margin-left: 0; }
.op .wf-lane[data-taken="no"] { border-left-color: var(--rule); opacity: 0.72; }
.op .wf-lane p { font-size: 14px; line-height: 1.5; }
.op .wf-spine { padding: 0 24px 8px 36px; margin: 0; }
.op .wf-spine li { border-left: 1px solid var(--rule); padding: 8px 0 8px 16px; grid-template-columns: 128px minmax(0, 1fr); }
.op .wf-spine li::before { left: -4px; top: 14px; width: 7px; height: 7px; border-radius: 50%; background: var(--gold-text); }
.op .wf-spine li:last-child::before { width: 9px; height: 9px; left: -5px; top: 13px; background: var(--gold-text); }
.op .wf-spine .v { font: 400 13.5px/1.55 "Inter", system-ui, sans-serif; color: var(--muted); }
.op .wf-receipt-foot { padding: 12px 24px 14px; }
.op .wf-receipt-mark { font: 500 12px/1.5 var(--label-face); letter-spacing: 0; text-transform: none; }
.op a.wf-receipt-mark { display: inline-flex; align-items: center; min-height: 44px; margin-left: auto; padding: 0 1px; }
.op .wf-receipt[data-close="open"] .wf-receipt-foot { padding-top: 12px; }

/* ledger rows: a Fraunces name, an Inter answer, one rule between rows */
.op .wf-ledger { margin: 22px 0 0; border-top: 1px solid var(--rule); }
.op .wf-ledger > li { grid-template-columns: minmax(170px, 250px) minmax(0, 1fr); gap: 6px 26px; padding: 16px 0; border-bottom: 1px solid var(--rule); }
.op .wf-ledger-k { font: 600 17px/1.3 "Fraunces", Georgia, serif; letter-spacing: 0; text-transform: none; color: var(--ink); }
.op .wf-ledger-v { font-size: 15px; line-height: 1.6; color: var(--muted); }
.op .wf-ledger-v + .wf-ledger-v { margin-top: 8px; }
.op .wf-ledger-v b { color: var(--ink); }
.op .wf-ledger-state { margin-right: 10px; vertical-align: 2px; }
.op .wf-boundary { margin: 24px 0 0; padding-top: 14px; border-top: 1px solid var(--rule); font-size: 14px; line-height: 1.65; color: var(--soft); max-width: 74ch; }
.op .wf-lede { font-size: 16px; line-height: 1.65; color: var(--muted); max-width: 62ch; margin: 0 0 14px; font-family: "Inter", system-ui, sans-serif; }
.op .wf-reference { margin: 0; padding: clamp(44px, 6vw, 80px) 0 0; border-top: 1px solid var(--rule); }
.op .wf-reference > h2 { font-size: clamp(22px, 2.4vw, 30px); color: var(--ink); }
.op .wf-reference > .wf-lede { font-size: 15px; color: var(--muted); }
/* Every fold in the operate register is the house details.disclosure (pass 3);
   the register's own Fraunces summary flavour is gone. */

/* doors: two paper sheets, each with its own honest state line */
.op .wf-doors { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px; margin-top: 26px; }
.op .wf-door-k { font-size: clamp(20px, 2vw, 26px); margin: 0 0 6px; }
.op .wf-door-role { color: var(--gold-ink, var(--wf-value)); margin: 0 0 12px; }
.op .wf-door p { font-size: 15px; line-height: 1.6; margin: 0 0 10px; }
.op .wf-door .wf-state-line { font: 500 13px/1.55 var(--mono, ui-monospace, monospace); color: var(--ink); }
.op .wf-door pre { border-radius: var(--r-ctl, 10px); border: 1px solid var(--rule); background: var(--pre-bg); font-size: 12px; margin-top: 12px; }
.op .wf-door label { font: 600 14px/1.5 "Inter", system-ui, sans-serif; }
.op .wf-door input[type="number"] { width: 130px; display: inline-block; margin: 0 8px; min-height: 44px; }
.op .wf-checkline a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 1px; }

@media (max-width: 900px) {
  .op-hero { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 28px 0 28px; }
  .op h1 { font-size: clamp(34px, 10vw, 44px); }
  .op-two { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .op-scene { padding: 36px 0 20px; }
  .op .wf-ledger > li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .op .wf-rec > div, .op .wf-spine li { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }
  .op .wf-receipt .wf-receipt-head { padding: 14px 18px 10px; }
  .op .wf-rec, .op .wf-part, .op .wf-receipt-sub, .op .wf-receipt-foot { padding-left: 18px; padding-right: 18px; }
  .op .wf-notclaims, .op .wf-disposition { margin-left: 18px; margin-right: 18px; }
  .op .wf-spine { padding-left: 30px; padding-right: 18px; }
  .op-acts .wf-act { flex: 1 1 auto; }
}
@media (min-width: 1600px) {
  main.wrap.wf-page.op { max-width: 1280px; }
  .op-hero { padding-top: clamp(64px, 9vh, 120px); }
}
@media print { .op-ai { display: none; } }

/* A wallet address or a job link is one unbroken string: at 390 the full operational-wallet address and the plate's
   share link ran past the edge of /institutions (round 6 walk, 2026-10-06). Long links wrap; words still do not. */
.wf-sec a, #packet a { overflow-wrap: anywhere; }