/* ==========================================================================
   RAZOR AGENT: SITE STYLES
   Direction: DESIGN.md plus the decision AA addendum (design v2, applied
   from the approved mockup in design/mockup-v2/). Semi-futuristic retro
   console, pixel flavor as seasoning. Palette is locked to the approved
   family (DESIGN Section 2): charcoal ink, deep ink, cream paper, faded
   safety orange, and only their own tints and shades, declared once as
   variables below. No other hue appears anywhere in this file.
   ========================================================================== */

@font-face {
  font-family: "Handjet";
  src: url("fonts/handjet-var.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-var.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("fonts/space-mono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("fonts/space-mono-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

:root {
  --ink: #1F1F1F;
  --ink-deep: #1A1916;
  --paper: #FBEFCC;
  --accent: #D39052;
  /* Approved tints and shades of the four base values (decision AA,
     taken from the approved v2 mockup). These are the only other hex
     values in this file; the palette scan in BUILD_NOTES lists them. */
  --ink-2: #2A2A28;
  --ink-3: #3A3A37;
  --ink-seg: #45453F;
  --paper-2: #F5E5B8;
  --paper-3: #EFDBA0;
  --paper-hi: #FFFDF4;
  --paper-dim: #E9DCAE;
  --accent-l: #E5AC74;
  --accent-d: #A96A33;
  --accent-dd: #8A5426;
  --mute: #7A735C;
  /* Display face (decision U: Handjet): swap this one variable to change
     the display face everywhere. Its role is restricted by the hierarchy
     below: wordmark, short section titles, state plates, and tiny labels
     only. Never body copy, instructions, errors, addresses, or long
     headings; those are --font-body and --font-data. */
  --font-display: "Handjet", monospace;
  --font-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  /* Data face: swap this one variable to change the monospace everywhere. */
  --font-data: "Space Mono", "Courier New", monospace;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  /* Faint square-grid field (DESIGN 4.2 construction texture, as in the
     v2 mockup): hairlines in the ink at low alpha over the paper. It is
     a construction seam texture, never a color wash, and never sits
     behind a panel: panels carry their own solid backgrounds. */
  background:
    repeating-linear-gradient(0deg, rgba(31, 31, 31, 0.045) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(31, 31, 31, 0.045) 0 1px, transparent 1px 28px),
    var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.5;
}
img { max-width: 100%; }
a { color: var(--ink); text-decoration: underline; text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 0.14em; }
.on-dark a { color: var(--paper); }

:focus { outline: none; }
:focus-visible {
  outline: 0.1875rem solid var(--ink);
  outline-offset: 0.125rem;
  box-shadow: 0 0 0 0.375rem var(--accent);
}
.on-dark :focus-visible, .meter :focus-visible, .site-head :focus-visible {
  outline-color: var(--paper);
}

::selection { background: var(--accent); color: var(--ink); }

.wrap { max-width: 76rem; margin: 0 auto; padding: 0 1rem; }
.mono { font-family: var(--font-data); }
.small { font-size: 0.875rem; }
[hidden] { display: none !important; }
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 30;
  background: var(--ink); color: var(--paper); padding: 0.75rem 1rem;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

/* Stepped corners: a short staircase cut on the two outer corners (DESIGN 4.1) */
.stepped {
  clip-path: polygon(
    0.5rem 0, 100% 0, 100% calc(100% - 0.5rem),
    calc(100% - 0.5rem) 100%, 0 100%, 0 0.5rem
  );
}
.stepped-sm {
  clip-path: polygon(
    0.25rem 0, 100% 0, 100% calc(100% - 0.25rem),
    calc(100% - 0.25rem) 100%, 0 100%, 0 0.25rem
  );
}

/* ---- header strip -------------------------------------------------------- */
.site-head { background: var(--ink); color: var(--paper); border-bottom: 0.25rem solid var(--accent); }
.site-head .wrap {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem;
  padding-top: 0.75rem; padding-bottom: 0.75rem;
}
.brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; }
.brand img {
  width: 2.75rem; height: 2.75rem; display: block;
  box-shadow: 0.25rem 0.25rem 0 0 var(--accent);
}
.brand .name {
  font-family: var(--font-display); font-weight: 700; font-size: 1.25rem;
  color: var(--paper); line-height: 1.1; display: block;
}
.brand .ticker { font-family: var(--font-data); color: var(--accent); font-size: 0.875rem; display: block; }
.chain-label {
  font-family: var(--font-data); font-size: 0.8125rem; border: 0.125rem solid var(--paper);
  padding: 0.25rem 0.5rem;
}
.site-nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.site-nav a {
  /* Nav entries are chunky keys like every other control (decision AA):
     display face, ink border, hard offset shadow on hover. They wrap as
     whole keys on narrow screens; a key is never half-cut. */
  color: var(--paper); font-family: var(--font-display); font-weight: 700;
  font-size: 1.0625rem; letter-spacing: 0.05em; text-decoration: none;
  padding: 0.5625rem 0.875rem; border: 0.125rem solid transparent;
  min-height: 2.75rem; display: inline-flex; align-items: center;
  transition: background-color 160ms ease-out, color 160ms ease-out,
    box-shadow 160ms ease-out, border-color 160ms ease-out;
}
.site-nav a:hover {
  background: var(--accent); color: var(--ink); border-color: var(--ink);
  box-shadow: 0.1875rem 0.1875rem 0 0 var(--paper);
}
.site-nav a.agent-link {
  background: var(--accent); color: var(--ink); border-color: var(--ink);
  box-shadow: 0.1875rem 0.1875rem 0 0 var(--paper);
}
.site-nav a.agent-link:hover { background: var(--paper); }

/* Dither band: ordered checker steps in the two ink tones (DESIGN 4.2).
   Purpose: a construction seam between the header field and the page field.
   It never sits behind text. */
.dither {
  height: 1rem;
  background-image: repeating-conic-gradient(var(--ink-deep) 0% 25%, var(--ink) 0% 50%);
  background-size: 1rem 1rem;
}

/* ---- headline and mechanics summary -------------------------------------- */
.lede { padding: 1.5rem 0 0.5rem; }
.lede h1 {
  /* A headline sentence is informational: grotesque, never the display
     face (owner readability hierarchy). */
  font-family: var(--font-body); font-weight: 700;
  font-size: clamp(1.5rem, 4.5vw, 2.5rem); line-height: 1.15; margin: 0 0 0.75rem;
  max-width: 24em;
}
.lede p { max-width: 44rem; margin: 0 0 0.5rem; }
.lede h1 .hl {
  background: var(--accent); padding: 0 0.18em;
  box-shadow: 0.3125rem 0.3125rem 0 0 var(--ink);
}
/* Factual kicker plate: what this is, never a state claim (state lives
   on the meter plate, read from the contract). */
.lede .kicker {
  display: inline-flex; align-items: center; gap: 0.625rem;
  background: var(--ink); color: var(--paper);
  font-family: var(--font-data); font-size: 0.78125rem; letter-spacing: 0.14em;
  padding: 0.5rem 0.875rem; box-shadow: 0.25rem 0.25rem 0 0 var(--ink);
  margin: 0 0 1.25rem; max-width: none;
}
.kicker .dot { width: 0.625rem; height: 0.625rem; background: var(--accent); flex: none; }

/* Hero stat chips (decision AA): locked figures as physical plates. */
.chips { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.chip {
  display: flex; align-items: baseline; gap: 0.5625rem;
  border: 0.1875rem solid var(--ink); padding: 0.625rem 1rem;
  background: var(--paper); box-shadow: 0.25rem 0.25rem 0 0 var(--ink);
}
.chip .v { font-family: var(--font-data); font-weight: 700; font-size: 1.3125rem; }
.chip .k {
  font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.chip.hot { background: var(--accent); }
.chip.dark { background: var(--ink); color: var(--paper); }
.chip.dark .v { color: var(--accent); }

/* ---- agent strip (decision AA + llms.txt) ---------------------------------- */
.agent-strip {
  margin: 2rem 0 0.5rem; background: var(--ink); color: var(--paper);
  border: 0.1875rem solid var(--ink); box-shadow: 0.375rem 0.375rem 0 0 var(--ink);
  display: grid; grid-template-columns: 15rem 1fr auto; gap: 0;
}
.agent-strip .as-lab { padding: 1.25rem 1.375rem; border-right: 0.1875rem solid var(--accent); }
.agent-strip .as-lab h2 {
  font-family: var(--font-display); font-weight: 700; font-size: 1.375rem;
  letter-spacing: 0.05em; color: var(--accent); margin: 0; text-transform: uppercase;
}
.agent-strip .as-lab p { font-size: 0.84375rem; line-height: 1.5; margin: 0.375rem 0 0; color: var(--paper-dim); }
.agent-strip .as-prompt {
  padding: 1.25rem 1.375rem; font-size: 0.84375rem; line-height: 1.65; margin: 0;
}
.agent-strip .as-acts {
  display: flex; flex-direction: column; gap: 0.625rem;
  padding: 1.25rem; justify-content: center;
}
.agent-strip .as-acts .small { margin: 0; min-height: 1.2em; }

/* ---- plates --------------------------------------------------------------- */
.plate {
  display: inline-block; font-family: var(--font-display); font-size: 0.875rem;
  padding: 0.375rem 0.625rem; border: 0.125rem solid currentColor; line-height: 1.2;
  text-transform: uppercase;
  /* Decision V: plate state changes ease over 180 ms. */
  transition: background-color 180ms ease-out, color 180ms ease-out, border-color 180ms ease-out;
}
.plate.solid { background: var(--accent); color: var(--ink); border-color: var(--accent); }
/* Orange-led state (decision AA): the live, open, current, and claimed
   plates fill orange. app.js toggles .hot with the state itself; the
   plate text always carries the state in words as well. */
.plate.hot { background: var(--accent); color: var(--ink); border-color: var(--ink); }

/* ---- meter (charcoal console plate) --------------------------------------- */
.meter {
  background: var(--ink); color: var(--paper);
  border: 0.25rem solid var(--ink-deep);
  padding: 1rem; margin: 1rem 0;
  box-shadow: 0.375rem 0.375rem 0 0 var(--ink-deep);
}
.meter .meter-top {
  display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center;
  justify-content: space-between; border-bottom: 0.125rem solid var(--paper);
  padding-bottom: 0.75rem; margin-bottom: 0.75rem;
}
.meter h2 { font-family: var(--font-display); font-size: 1.125rem; margin: 0; font-weight: 700; }
.reading-main {
  font-family: var(--font-data); font-size: clamp(1.75rem, 6vw, 2.75rem);
  font-weight: 700; line-height: 1.1; margin: 0.25rem 0;
}
.reading-main .of { color: var(--accent); font-size: 0.55em; }
.segments { display: flex; gap: 0.1875rem; margin: 0.75rem 0 0.25rem; flex-wrap: nowrap; }
.segments .seg {
  /* Filled-proportion blocks (decision AA): an unfilled segment is a
     solid step of the panel's own tint scale, not an empty outline, so
     the filled proportion reads at a glance. */
  flex: 1 1 0; height: 1.375rem; min-width: 0.25rem;
  border: 0.125rem solid var(--ink-seg); background: var(--ink-seg);
  /* Decision V: the fill steps when a refreshed reading changes it. */
  transition: background-color 200ms ease-out, border-color 200ms ease-out;
}
.segments .seg.on { background: var(--accent); border-color: var(--accent); }
.segments .seg.head { background: var(--accent-l); border-color: var(--accent-l); }

/* Tier ladder strip (decision AA): nine band cells under the meter.
   The current band lifts on an orange fill with a hard shadow; bands
   behind it sit dark, the next band is tinted. Name and price stay
   legible at phone width: the strip wraps three cells per row. */
.ladder-block { margin-top: 1rem; }
.ladder-cap {
  font-family: var(--font-data); font-size: 0.75rem; letter-spacing: 0.12em;
  margin: 0 0 0.5rem;
}
.ladder-cap span { color: var(--accent); font-weight: 700; }
.tiers { display: flex; gap: 0.25rem; flex-wrap: wrap; }
.tier {
  flex: 1 1 0; min-width: 0; text-align: center;
  padding: 0.5625rem 0 0.4375rem;
  border: 0.15625rem solid var(--paper); background: var(--paper); color: var(--ink);
}
.tier .n { font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem; line-height: 1.1; white-space: nowrap; }
.tier .p { font-family: var(--font-data); font-size: 0.75rem; margin-top: 0.125rem; white-space: nowrap; }
/* In the two-column focal layout the meter column is at its narrowest;
   the strip prices step down a size so all nine cells stay on one row. */
@media (min-width: 64rem) and (max-width: 72rem) {
  .tier .p { font-size: 0.625rem; }
}
.tier.done { background: var(--ink-2); color: var(--paper); border-color: var(--ink-2); }
.tier.next { background: var(--paper-3); }
.tier.now {
  background: var(--accent); border-color: var(--ink);
  box-shadow: 0.1875rem 0.1875rem 0 0 var(--paper);
  transform: translateY(-0.3125rem);
}
.tier.now .p { font-weight: 700; }
#ladderPrice { margin: 0.5rem 0 0; }
.meter .sub { display: grid; gap: 0; margin-top: 0.75rem; grid-template-columns: 1fr; }
.meter .sub .row {
  display: flex; justify-content: space-between; gap: 1rem;
  border-top: 0.0625rem solid var(--paper); padding: 0.4375rem 0;
}
.meter .sub .k { font-size: 0.875rem; }
.meter .sub .v { font-family: var(--font-data); text-align: right; }
.countdown { font-family: var(--font-data); font-size: 1.25rem; font-weight: 700; }
/* Decision V: no ambient or looping motion. When the STALE state engages,
   the stale note settles in once (opacity plus 2 px, 200 ms, ease-out),
   exactly like the other state-change settles, and then stays static.
   The animation runs when app.js unhides the note; nothing loops. */
@keyframes stale-engage {
  from { opacity: 0.25; transform: translateY(0.125rem); }
  to { opacity: 1; transform: translateY(0); }
}
.stale-note { color: var(--accent); font-weight: 600; animation: stale-engage 200ms ease-out 1; }

/* ---- panels ---------------------------------------------------------------- */
.panel {
  border: 0.1875rem solid var(--ink); background: var(--paper);
  padding: 1rem; margin: 1rem 0;
  box-shadow: 0.375rem 0.375rem 0 0 var(--ink);
}
.panel h2 {
  font-family: var(--font-display); font-size: 1.125rem; margin: 0 0 0.75rem;
  font-weight: 700; text-transform: uppercase;
}
.panel h3 {
  font-family: var(--font-display); font-size: 1rem; margin: 1rem 0 0.5rem;
  font-weight: 700; text-transform: uppercase;
}
.panel .rule { border: 0; border-top: 0.25rem solid var(--ink); margin: 1rem 0; }

.focal { display: grid; gap: 0 1.5rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 64rem) {
  .focal { grid-template-columns: 1fr 1.15fr; }
}

/* ---- forms ------------------------------------------------------------------ */
label { display: block; font-weight: 600; margin: 0.75rem 0 0.25rem; }
label .hint { display: block; font-weight: 400; font-size: 0.875rem; margin-top: 0.125rem; }
input[type="text"], input[type="number"], input[type="url"], select {
  width: 100%; min-height: 2.75rem; padding: 0.5rem 0.625rem;
  border: 0.125rem solid var(--ink); background: var(--paper); color: var(--ink);
  font-family: var(--font-data); font-size: 1rem;
}
.stepper { display: flex; gap: 0.5rem; align-items: stretch; }
.stepper input { text-align: center; }
.stepper button { min-width: 2.75rem; }

.btn {
  /* The physical key system (decision AA): every clickable control is a
     chunky key with a thick ink border and a hard offset shadow, so
     nothing clickable looks flat and nothing flat looks clickable.
     Display face, letterspaced, per the mockup. */
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 2.75rem; padding: 0.625rem 1.125rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem;
  letter-spacing: 0.06em;
  border: 0.1875rem solid var(--ink); background: var(--paper); color: var(--ink);
  box-shadow: 0.25rem 0.25rem 0 0 var(--ink);
  cursor: pointer; text-decoration: none;
  /* Decision V: interaction feedback only, 160 ms ease-out. */
  transition: transform 160ms ease-out, box-shadow 160ms ease-out,
    background-color 160ms ease-out, color 160ms ease-out, opacity 160ms ease-out;
}
.btn:hover:not([disabled]) { transform: translate(-0.0625rem, -0.0625rem); box-shadow: 0.3125rem 0.3125rem 0 0 var(--ink); }
.btn:active:not([disabled]) { transform: translate(0.1875rem, 0.1875rem); box-shadow: 0.0625rem 0.0625rem 0 0 var(--ink); }
.btn.primary { background: var(--accent); color: var(--ink); }
.btn.dark {
  background: var(--ink); color: var(--paper);
  box-shadow: 0.25rem 0.25rem 0 0 var(--accent);
}
.btn.dark:hover:not([disabled]) { box-shadow: 0.3125rem 0.3125rem 0 0 var(--accent); }
.btn.dark:active:not([disabled]) { box-shadow: 0.0625rem 0.0625rem 0 0 var(--accent); }
.btn[disabled] {
  /* Non-actionable keys read as struck stock: hatched, shadowless,
     muted (decision AA). Never just a faded live key. */
  background: repeating-linear-gradient(45deg, var(--paper-2) 0 0.5rem, var(--paper-3) 0.5rem 1rem);
  color: var(--mute); border-color: var(--mute);
  box-shadow: none; cursor: not-allowed; transform: none;
}
/* Transaction progress and success feedback (decision V): shade steps only,
   no loaders. Applied by app.js while a wallet action is in flight. */
.btn.is-busy { opacity: 0.6; pointer-events: none; }
.btn.is-done { background: var(--ink); color: var(--paper); }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }

.method-picker { display: flex; gap: 0.75rem; flex-wrap: wrap; margin: 0.5rem 0; }
.method-picker .method {
  flex: 1 1 10rem; border: 0.1875rem solid var(--ink); padding: 0.625rem;
  display: flex; gap: 0.5rem; align-items: flex-start; cursor: pointer; min-height: 2.75rem;
  font-weight: 400; margin: 0; box-shadow: 0.1875rem 0.1875rem 0 0 var(--ink);
  transition: background-color 160ms ease-out;
}
/* The chosen payment method fills orange (decision AA: the selected
   option is unmistakable). :has is progressive enhancement; the radio
   itself stays visible and checked either way. */
.method-picker .method:has(input:checked) { background: var(--accent); }
.method-picker .method input { margin-top: 0.25rem; width: 1.25rem; height: 1.25rem; accent-color: var(--ink); flex: none; }
.method-picker .method .t { font-weight: 700; display: block; }
.method-picker .method .d { font-size: 0.875rem; display: block; }

/* ---- quote block -------------------------------------------------------------- */
.quote {
  font-family: var(--font-data); border: 0.15625rem dashed var(--ink);
  background: var(--paper-2);
  margin: 1rem 0; padding: 0.25rem 0.75rem;
}
.quote .row {
  display: flex; justify-content: space-between; gap: 1rem;
  padding: 0.4375rem 0; border-top: 0.0625rem solid var(--ink);
}
.quote .row:first-child { border-top: 0; }
.quote .row.total { border-top: 0.1875rem solid var(--ink); font-weight: 700; }
.quote .row.total .v { color: var(--accent-dd); }
.quote .row .v { text-align: right; }

.disclosure {
  border: 0.125rem solid var(--ink); border-left: 0.5rem solid var(--accent);
  padding: 0.625rem 0.75rem; margin: 1rem 0; font-size: 0.9375rem;
}
.disclosure p { margin: 0.25rem 0; }

.status-line { margin-top: 1rem; border-top: 0.125rem solid var(--ink); padding-top: 0.75rem; min-height: 2.75rem; }
.status-line .raw {
  font-family: var(--font-data); font-size: 0.8125rem; display: block;
  margin-top: 0.375rem; word-break: break-all;
}
.msg-bad { border-left: 0.5rem solid var(--accent); padding-left: 0.75rem; }

/* ---- numbered section heads (decision AA) -------------------------------------- */
.sec-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.75rem; }
.sec-head .no {
  font-family: var(--font-display); font-weight: 700; font-size: 1.25rem;
  background: var(--ink); color: var(--accent); padding: 0.4375rem 0.8125rem;
  box-shadow: 0.25rem 0.25rem 0 0 var(--accent); flex: none;
}
.sec-head h2 { margin: 0; }

/* ---- quota composition bar (decision AA) ---------------------------------------- */
.qbar { display: flex; gap: 0.25rem; margin: 1rem 0 0.375rem; }
.qbar i { height: 1.25rem; display: block; border: 0.125rem solid var(--ink); flex-basis: 0; }
/* Initial proportions are the no-wallet composition (base plus all
   slots open); app.js overrides them inline from the wallet read. */
.qbar .b { background: var(--ink); flex-grow: 10; }
.qbar .i2 { background: var(--accent); flex-grow: 0; display: none; }
.qbar .s { background: var(--accent-l); flex-grow: 0; display: none; }
.qbar .e { background: var(--paper); flex-grow: 23; }
.qlegend {
  font-family: var(--font-data); font-size: 0.78125rem; letter-spacing: 0.04em;
  margin: 0.25rem 0 0.5rem;
}

/* ---- quota + tasks -------------------------------------------------------------- */
.kv { display: grid; grid-template-columns: 1fr; gap: 0; }
.kv .row {
  display: flex; justify-content: space-between; gap: 1rem;
  border-top: 0.0625rem solid var(--ink); padding: 0.4375rem 0;
}
.kv .row:first-child { border-top: 0; }
.kv .v { font-family: var(--font-data); text-align: right; }
.task {
  border: 0.1875rem solid var(--ink); padding: 0.75rem; margin: 0.75rem 0;
  display: grid; gap: 0.5rem; box-shadow: 0.25rem 0.25rem 0 0 var(--ink);
  background: var(--paper);
}
.task .task-head {
  display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; align-items: center;
  border-bottom: 0.1875rem solid var(--ink); padding-bottom: 0.625rem;
}
.task .task-num {
  width: 2.25rem; height: 2.25rem; display: grid; place-items: center; flex: none;
  background: var(--ink); color: var(--paper);
  font-family: var(--font-display); font-weight: 700; font-size: 1.1875rem;
}
.task .task-name { font-weight: 700; margin-right: auto; }
.task p { margin: 0; font-size: 0.9375rem; }
.task .fallback { display: grid; gap: 0.375rem; }

/* ---- leaderboard ------------------------------------------------------------------ */
table.data { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
table.data caption { text-align: left; font-weight: 600; padding: 0.5rem 0; }
table.data th {
  text-align: left; font-size: 0.8125rem; text-transform: uppercase;
  border-bottom: 0.1875rem solid var(--ink); padding: 0.5rem 0.5rem 0.5rem 0;
}
table.data td {
  border-bottom: 0.0625rem solid var(--ink); padding: 0.5rem 0.5rem 0.5rem 0;
  font-family: var(--font-data); vertical-align: top;
}
table.data td.lbl { font-family: var(--font-body); }
.rank-block {
  display: inline-block; min-width: 2.25rem; text-align: center;
  background: var(--paper-3); color: var(--ink); font-family: var(--font-data);
  border: 0.125rem solid var(--ink);
  padding: 0.25rem 0.375rem; font-weight: 700;
}
/* Leaderboard treatment (decision AA): ink header bar, orange-tinted
   striping, and the rank 1 chip filled orange on a hard shadow. */
#lbTable th {
  background: var(--ink); color: var(--paper);
  font-family: var(--font-display); letter-spacing: 0.07em;
  border-bottom: 0; padding: 0.6875rem 0.875rem;
}
#lbTable td { padding: 0.6875rem 0.875rem; border-bottom: 0; border-top: 0.125rem solid var(--ink-3); }
#lbTable tbody tr:nth-child(even) td { background: rgba(211, 144, 82, 0.13); }
#lbTable tr.top1 .rank-block {
  background: var(--accent); box-shadow: 0.125rem 0.125rem 0 0 var(--ink);
}
.lb-meta { font-family: var(--font-data); font-size: 0.875rem; margin: 0.5rem 0; }

/* ---- rules --------------------------------------------------------------------------- */
.rules { counter-reset: rule; margin: 0; padding: 0; list-style: none; }
.rules li {
  border-top: 0.125rem dotted var(--mute); padding: 0.75rem 0 0.75rem 3.5rem;
  position: relative; margin: 0;
}
.rules li::before {
  /* Orange number blocks (decision AA). */
  counter-increment: rule; content: counter(rule, decimal-leading-zero);
  position: absolute; left: 0; top: 0.75rem;
  width: 2.375rem; height: 2.375rem; display: grid; place-items: center;
  background: var(--accent); border: 0.15625rem solid var(--ink);
  box-shadow: 0.1875rem 0.1875rem 0 0 var(--ink);
  font-family: var(--font-display); font-weight: 700; font-size: 1.1875rem; color: var(--ink);
}
.rules li:last-child { border-bottom: 0.125rem dotted var(--mute); }
/* The rules read as a two-column grid on wide screens (decision AA);
   the Agent Pack guardrail list reuses .rules and keeps one column,
   since it does not sit inside #rules. */
@media (min-width: 64rem) {
  #rules .rules { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.875rem; }
}

/* ---- footer ----------------------------------------------------------------------------- */
.site-foot { background: var(--ink); color: var(--paper); margin-top: 2rem; padding: 1.5rem 0 2rem; }
.site-foot h2 { font-family: var(--font-display); font-size: 1rem; margin: 0 0 0.75rem; text-transform: uppercase; }
.site-foot a { color: var(--paper); }
.site-foot .addr-row {
  display: grid; gap: 0.125rem; padding: 0.5rem 0; border-top: 0.0625rem solid var(--paper);
  font-size: 0.9375rem;
}
.site-foot .addr-row .a { font-family: var(--font-data); word-break: break-all; }
.site-foot nav { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; }
.site-foot nav a { min-height: 2.75rem; display: inline-flex; align-items: center; }
.site-foot h3 {
  font-family: var(--font-display); font-size: 1rem; margin: 0 0 0.25rem;
  text-transform: uppercase; color: var(--accent); letter-spacing: 0.08em;
}
.foot-groups {
  display: grid; grid-template-columns: 1fr; gap: 1rem 2rem; margin-top: 1.25rem;
}
@media (min-width: 48rem) {
  .foot-groups { grid-template-columns: 1fr 1fr; }
}
/* Footer link chips (decision AA): bordered Handjet keys on the ink
   field; hover fills orange, the AA state change for links here. */
.flink {
  border: 0.125rem solid var(--paper); padding: 0.4375rem 0.75rem;
  font-family: var(--font-display); font-weight: 700; font-size: 0.9375rem;
  letter-spacing: 0.05em; text-decoration: none;
  transition: background-color 160ms ease-out, color 160ms ease-out, border-color 160ms ease-out;
}
.flink:hover { background: var(--accent); color: var(--ink); border-color: var(--ink); text-decoration: none; }

/* ---- params page --------------------------------------------------------------------------- */
.spec-layout { display: grid; grid-template-columns: 1fr; gap: 0 2rem; }
@media (min-width: 70rem) {
  .spec-layout { grid-template-columns: 14rem 1fr; }
  .spec-index { position: sticky; top: 1rem; align-self: start; }
}
.spec-index ol { margin: 0; padding-left: 1.5rem; }
.spec-index li { margin: 0.25rem 0; }
.spec-index a { display: inline-flex; align-items: center; min-height: 2rem; }
.spec-section { border-top: 0.25rem solid var(--ink); padding: 1rem 0 1.5rem; }
.spec-section h2 {
  font-family: var(--font-display); font-size: 1.125rem; margin: 0 0 0.75rem; text-transform: uppercase;
}
.spec-section h2 .no {
  background: var(--ink); color: var(--accent); padding: 0.25rem 0.5625rem;
  margin-right: 0.625rem; box-shadow: 0.1875rem 0.1875rem 0 0 var(--accent);
}
tr.current-band td { font-weight: 700; background: var(--paper-2); }
.band-plate {
  display: inline-block; background: var(--accent); color: var(--ink);
  font-family: var(--font-display); font-size: 0.75rem; padding: 0.1875rem 0.4375rem;
  margin-left: 0.5rem; vertical-align: middle;
}

/* ---- responsive table reflow (SPEC 9): stacked row groups, labels repeated ------------------ */
@media (max-width: 40rem) {
  table.data thead { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  table.data tr { display: block; border-bottom: 0.1875rem solid var(--ink); padding: 0.5rem 0; }
  table.data td {
    display: flex; justify-content: space-between; gap: 1rem;
    border-bottom: 0; padding: 0.25rem 0;
  }
  table.data td::before {
    content: attr(data-label); font-family: var(--font-body); font-weight: 600;
    font-size: 0.8125rem; text-transform: uppercase;
  }
  /* The leaderboard is the one table that never reflows (owner review,
     job 2.3): it stays a real table and fits the phone viewport in
     full, rank, Agent ID, wallet, invites, and shares all visible with
     no horizontal scrolling, at a compact data size. The params tables
     keep the stacked reflow above. */
  table.data#lbTable { font-size: 0.75rem; }
  table.data#lbTable thead { position: static; left: auto; width: auto; height: auto; overflow: visible; }
  table.data#lbTable tr { display: table-row; border-bottom: 0; padding: 0; }
  table.data#lbTable th { padding: 0.4375rem 0.3125rem; font-size: 0.6875rem; }
  table.data#lbTable td {
    display: table-cell; padding: 0.4375rem 0.3125rem;
    border-top: 0.125rem solid var(--ink-3); border-bottom: 0;
  }
  table.data#lbTable td::before { content: none; }
  #lbTable .rank-block { min-width: 1.625rem; padding: 0.125rem 0.25rem; }
  /* The short wallet address never wraps; the truncated Agent ID may
     wrap at its ellipsis, which is the omission point by design. */
  #lbTable td a { white-space: nowrap; }
}

/* ---- state swap transition: the one permitted motion (DESIGN 8) ------------------------------ */
.swap { transition: opacity 180ms ease-in-out; }

/* ---- decision V: state-change settle ----------------------------------------------------------
   Panel state notes and leaderboard rows settle over 200 ms when, and only
   when, the underlying state or file actually changes. Applied by app.js. */
@keyframes settle-in {
  from { opacity: 0.25; transform: translateY(0.125rem); }
  to { opacity: 1; transform: translateY(0); }
}
.settle-in { animation: settle-in 200ms ease-out; }
.lb-row-in { animation: settle-in 200ms ease-out both; }

@media (prefers-reduced-motion: reduce) {
  .swap { transition: none; }
  /* Decision V: every non-essential motion off; state changes are instant. */
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- narrow screens --------------------------------------------------------------------------- */
@media (max-width: 48rem) {
  /* Agent strip stacks: label, prompt, actions (mockup mobile). */
  .agent-strip { grid-template-columns: 1fr; }
  .agent-strip .as-lab { border-right: 0; border-bottom: 0.1875rem solid var(--accent); }
  .agent-strip .as-acts { flex-direction: row; flex-wrap: wrap; align-items: center; }
}
@media (max-width: 40rem) {
  .panel { box-shadow: 0.25rem 0.25rem 0 0 var(--ink); padding: 0.875rem; }
  /* Header nav (owner review, job 2.2): the nav takes its own full row
     and its keys wrap whole. No key is ever half-cut at the edge. */
  .site-nav { margin-left: 0; width: 100%; }
  .site-nav a { font-size: 0.9375rem; padding: 0.4375rem 0.625rem; }
  .chain-label { font-size: 0.75rem; }
  .segments .seg { height: 1.125rem; }
  /* Tier ladder (owner review, job 2.1): three cells per row at phone
     width, names and prices at full weight. */
  .tier { flex: 1 1 30%; }
  .tier .n { font-size: 1rem; }
  .tier .p { font-size: 0.8125rem; }
  .chip .v { font-size: 1.125rem; }
}

/* ---- whitepaper page (decision AB) ------------------------------------------------
   Long-form rendering of whitepaper/WHITEPAPER.md, generated by
   whitepaper/build-site.mjs. Sections reuse .spec-section and its
   numbered h2 treatment; only the prose internals are new here. The
   reading column is capped so Archivo body text keeps a book measure
   inside the wide spec layout. */
.paper-tag {
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.625rem; line-height: 1.15; margin: 0.25rem 0 0.5rem;
}
.paper-sec p, .paper-sec li { max-width: 46rem; }
.paper-sec p { margin: 0.625rem 0; }
.paper-sec h3 { font-size: 1.0625rem; margin: 1.375rem 0 0.5rem; }
.paper-sec ul, .paper-sec ol { margin: 0.625rem 0; padding-left: 1.5rem; }
.paper-sec li { margin: 0.375rem 0; }
.paper-sec code {
  font-family: var(--font-data); font-size: 0.9em;
  background: var(--paper-2); padding: 0.05em 0.3em;
}
.paper-sec table.data { margin: 1rem 0; }
.paper-rule { border: 0; border-top: 0.25rem solid var(--ink); margin: 1.5rem 0; max-width: 46rem; }

/* ---- print (the whitepaper PDF is printed from whitepaper.html) -------------------- */
@media print {
  body { background: var(--paper-hi); }
  .site-head, .site-foot, .dither, .skip-link, .paper-dl { display: none; }
  .spec-layout { display: block; }
  .spec-index { position: static; margin-bottom: 1.5rem; }
  .spec-section { break-inside: auto; }
  .paper-sec h2, .paper-sec h3 { break-after: avoid; }
  .paper-sec tr { break-inside: avoid; }
  .paper-sec p, .paper-sec li { max-width: none; }
  .sec-head .no, .spec-section h2 .no, .flink {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  a { color: var(--ink); text-decoration: none; }
}
@media (max-width: 40rem) {
  /* Paper tables carry long mono values (addresses, signatures) that
     the params tables never do; in the stacked reflow their cells must
     be allowed to break anywhere or the row forces the page wide. */
  .paper-sec table.data td { overflow-wrap: anywhere; }
  .paper-sec code { overflow-wrap: anywhere; }
}