/* ══════════════════════════════════════════════════════════════
   STAKE — the fund-touching instrument.

   Tokens, buttons, nav, terminal chrome and the constellation all
   come from style.css / v3.css / terminal.css. This file adds only
   what the staking surface needs, and the first thing it defines is
   how a value that is NOT KNOWN looks — because on 2026-08-25 an
   unknown read rendered as 0 and cost 75,397 SIBYL.

   Rule of this stylesheet: `.val` is the only element type allowed
   to carry a number, and it has three visual states —
     .val            a real reading
     .val.is-unavail an em dash, dimmed, never a digit
     .val.is-stale   the last good reading, marked as old
   ══════════════════════════════════════════════════════════════ */

:root {
  --jade:       #2ea9a1;
  --jade-dim:   rgba(46,169,161,.16);
  --jade-a30:   rgba(46,169,161,.30);
  --alarm:      #e0605a;
  --alarm-a12:  rgba(224,96,90,.12);
  --stale:      #b5944a;
}

/* ─────────── page frame ─────────── */
.stake-main { padding-top: 5.5rem; }

.phead { padding: 2.5rem 0 1.25rem; }
.phead .h2 { font-size: clamp(1.9rem, 4.4vw, 3rem); line-height: 1.06; letter-spacing: -.02em; }
.phead .h2 em { font-style: normal; color: var(--gold); }
.phead__sub {
  margin-top: .9rem; max-width: 58ch;
  color: var(--text-secondary); font-size: 1rem; line-height: 1.7;
}
.phead__sub strong { color: var(--gold); font-weight: 500; }
.phead__note {
  margin-top: .7rem; max-width: 62ch;
  font-family: var(--font-mono); font-size: .75rem; line-height: 1.7; color: var(--text-faint);
}

.slab {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  padding: clamp(1.1rem, 2.4vw, 1.75rem);
  margin-bottom: 1.25rem;
}
/* bezel corner marks — the instrument vocabulary from the homepage cells */
.slab::before, .slab::after {
  content: ''; position: absolute; width: 9px; height: 9px;
  border: 1px solid var(--gold-a30); pointer-events: none;
}
.slab::before { top: 7px; left: 7px; border-right: 0; border-bottom: 0; }
.slab::after  { bottom: 7px; right: 7px; border-left: 0; border-top: 0; }

.slab__head {
  display: flex; align-items: baseline; gap: .75rem;
  flex-wrap: wrap; margin-bottom: 1.1rem;
}
.slab__name {
  font-family: var(--font-mono); font-size: .6875rem; font-weight: 500;
  letter-spacing: .3em; text-transform: uppercase; color: var(--text-muted);
}
.slab__note { font-family: var(--font-mono); font-size: .6875rem; color: var(--text-faint); }
.slab__note--push { margin-left: auto; }

.grid2 { display: grid; grid-template-columns: minmax(0,380px) minmax(0,1fr); gap: 1.25rem; align-items: start; }
@media (max-width: 1000px) { .grid2 { grid-template-columns: 1fr; } }

/* ─────────── THE TRI-STATE VALUE ─────────── */
.val {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  color: var(--text-primary); font-weight: 400;
}
.val.is-unavail { color: var(--text-faint); font-weight: 300; letter-spacing: .08em; }
.val.is-stale   { color: var(--stale); }
.val__tag {
  display: block; margin-top: .15rem;
  font-family: var(--font-mono); font-size: .625rem; letter-spacing: .1em;
  text-transform: lowercase;
}
.is-unavail .val__tag { color: var(--text-faint); }
.is-stale   .val__tag { color: var(--stale); }

.kv { display: grid; gap: .7rem; }
.kv__row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  border-bottom: 1px dashed var(--border); padding-bottom: .55rem;
}
.kv__row:last-child { border-bottom: 0; padding-bottom: 0; }
.kv__k { font-family: var(--font-mono); font-size: .75rem; color: var(--text-muted); }
.kv__v { text-align: right; font-size: .875rem; }
.kv__v .val__tag { text-align: right; }

.cells { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.cellv { background: var(--surface); padding: 1rem .95rem; min-width: 0; }
.cellv__k {
  font-family: var(--font-mono); font-size: .625rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: .45rem;
}
.cellv__v { font-size: 1.25rem; line-height: 1.2; overflow-wrap: anywhere; }
.cellv__s { font-family: var(--font-mono); font-size: .6875rem; color: var(--text-faint); margin-top: .3rem; }
.cellv--gold .cellv__v .val { color: var(--gold); }
.cellv--jade .cellv__v .val { color: var(--jade); }

/* ─────────── read-state bar (staleness is legible) ─────────── */
.readbar {
  position: sticky; top: 3.6rem; z-index: 40;
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .5rem .8rem; margin-bottom: 1rem;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: rgba(11,14,20,.92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-family: var(--font-mono); font-size: .6875rem; color: var(--text-muted);
}
.readbar__dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--jade); flex: none;
  box-shadow: 0 0 0 3px var(--jade-dim);
}
.readbar.is-degraded { border-color: rgba(224,96,90,.45); }
.readbar.is-degraded .readbar__dot { background: var(--alarm); box-shadow: 0 0 0 3px var(--alarm-a12); }
.readbar__sep { color: var(--text-faint); }
.readbar__msg { color: var(--alarm); }
.readbar__retry {
  margin-left: auto; flex: none;
  border: 1px solid var(--border-strong); border-radius: 5px;
  padding: .25rem .6rem; font-family: var(--font-mono); font-size: .6875rem;
  color: var(--text-secondary); background: var(--elevated);
}
.readbar__retry:hover { border-color: var(--gold); color: var(--gold); }
.readbar__retry[hidden] { display: none; }

/* ─────────── wrong network / alarm banner ─────────── */
.alarm {
  display: flex; gap: .85rem; align-items: flex-start;
  border: 1px solid var(--alarm); border-left-width: 3px;
  background: var(--alarm-a12); border-radius: var(--radius-sm);
  padding: .95rem 1rem; margin-bottom: 1.25rem;
}
.alarm[hidden] { display: none; }
.alarm__glyph { font-family: var(--font-mono); color: var(--alarm); font-size: 1rem; line-height: 1.2; flex: none; }
.alarm__t { color: var(--alarm); font-family: var(--font-mono); font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; }
.alarm__d { color: var(--text-secondary); font-size: .8125rem; margin-top: .3rem; line-height: 1.6; }
.alarm__btn {
  margin-top: .7rem; border: 1px solid var(--alarm); border-radius: 6px;
  padding: .45rem .9rem; font-family: var(--font-mono); font-size: .75rem; color: var(--alarm);
}
.alarm__btn:hover { background: rgba(224,96,90,.18); }

/* ─────────── APR headline ─────────── */
.apr { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); gap: clamp(1rem,3vw,2.5rem); align-items: center; }
@media (max-width: 820px) { .apr { grid-template-columns: 1fr; } }
.apr__k {
  font-family: var(--font-mono); font-size: .625rem; letter-spacing: .28em;
  text-transform: uppercase; color: var(--text-muted);
}
.apr__big {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: clamp(2.6rem, 8vw, 4.25rem); line-height: 1; color: var(--gold);
  margin: .35rem 0 .1rem; overflow-wrap: anywhere;
}
.apr__big.is-unavail { color: var(--text-faint); font-size: clamp(1.6rem, 5vw, 2.5rem); }
.apr__scope { font-family: var(--font-mono); font-size: .75rem; color: var(--text-dim); }
.apr__parts { display: grid; gap: .55rem; }
.apr__part {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  font-family: var(--font-mono); font-size: .8125rem;
  padding-bottom: .5rem; border-bottom: 1px dashed var(--border);
}
.apr__part span:first-child { color: var(--text-muted); font-size: .75rem; }
.apr__tiers { margin-top: 1.1rem; }

/* tooltip / popover — click and keyboard, never hover-only */
.tip { position: relative; display: inline-block; }
.tip__btn {
  display: inline-flex; align-items: center; gap: .35rem;
  border: 1px solid var(--border-strong); border-radius: 999px;
  padding: .25rem .7rem; font-family: var(--font-mono); font-size: .6875rem;
  color: var(--text-dim); background: var(--elevated);
}
.tip__btn:hover, .tip__btn[aria-expanded="true"] { border-color: var(--gold); color: var(--gold); }
.tip__pop {
  position: absolute; z-index: 45; left: 0; top: calc(100% + .5rem);
  width: min(30rem, calc(100vw - 2.5rem));
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--elevated); padding: 1rem 1.05rem;
  box-shadow: 0 18px 48px rgba(0,0,0,.55);
}
.tip__pop[hidden] { display: none; }
.tip__pop h4 {
  margin: 0 0 .5rem; font-family: var(--font-mono); font-size: .6875rem;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold); font-weight: 500;
}
.tip__pop p { font-size: .8125rem; line-height: 1.65; color: var(--text-secondary); margin-bottom: .6rem; }
.tip__pop p:last-child { margin-bottom: 0; }
.tip__pop code {
  font-family: var(--font-mono); font-size: .75rem; color: var(--jade);
  background: rgba(46,169,161,.08); padding: .1rem .3rem; border-radius: 3px;
  overflow-wrap: anywhere;
}
.tip__x {
  position: absolute; top: .5rem; right: .6rem;
  font-family: var(--font-mono); font-size: .6875rem; color: var(--text-faint);
}
.tip__x:hover { color: var(--text-primary); }

/* ══════════════════════════════════════════════════════════════
   THE STAKE HUD

   One horizontal instrument, read left to right the way you would
   read a console: what you are sending, how much of your stack it
   is, how long you are locking it, and the key that commits it.
   Jade is the machine (chrome, slider, chips). Gold is the
   commitment (the STAKE key, and the numbers you are agreeing to).
   ══════════════════════════════════════════════════════════════ */

.hud {
  position: relative;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background:
    radial-gradient(120% 160% at 12% 0%, rgba(46,169,161,.07), transparent 55%),
    linear-gradient(180deg, #0c1017, #090c12);
  margin-bottom: 1.25rem;
  overflow: hidden;
}
/* scanlines: the surface reads as a screen, not a card */
.hud::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px);
}
.hud__corners i {
  position: absolute; width: 12px; height: 12px; border: 1px solid var(--jade-a30);
}
.hud__corners i:nth-child(1) { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.hud__corners i:nth-child(2) { top: 8px; right: 8px; border-left: 0; border-bottom: 0; }
.hud__corners i:nth-child(3) { bottom: 8px; left: 8px; border-right: 0; border-top: 0; }
.hud__corners i:nth-child(4) { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }
/* a single pass of light along the top rail, only when the key is armed */
.hud__sweep {
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--jade), transparent);
  opacity: 0; transform: translateX(-100%);
}
.hud.is-armed .hud__sweep { opacity: .9; }
@media (prefers-reduced-motion: no-preference) {
  .hud.is-armed .hud__sweep { animation: hudsweep 2.6s linear infinite; }
  @keyframes hudsweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
}

/* ── top rail ─────────────────────────────────────────────── */
.hud__top {
  position: relative;
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .7rem clamp(.9rem, 2vw, 1.4rem);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono); font-size: .6875rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint);
}
.hud__id { color: var(--jade); letter-spacing: .34em; font-weight: 500; }
.hud__blink { font-style: normal; margin-right: .35rem; }
@media (prefers-reduced-motion: no-preference) {
  .hud__blink { animation: hudblink 1.15s steps(1) infinite; }
  @keyframes hudblink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: .15; } }
}
.hud__chip {
  border: 1px solid var(--border); border-radius: 4px;
  padding: .2rem .5rem; background: rgba(255,255,255,.014);
  white-space: nowrap;
}
.hud__chip b { color: var(--text-primary); font-weight: 500; letter-spacing: .04em; }
.hud__chip--push { margin-left: auto; }
.hud__chip.is-ok   { border-color: var(--jade-a30); color: var(--jade); }
.hud__chip.is-bad  { border-color: rgba(224,96,90,.5); color: var(--alarm); }

/* ── the deck ─────────────────────────────────────────────── */
.hud__deck {
  position: relative;
  display: grid;
  grid-template-columns: minmax(200px, 1.05fr) minmax(230px, 1.15fr) minmax(210px, .95fr) auto;
  align-items: stretch;
}
.hud__cell {
  padding: 1.05rem clamp(.9rem, 2vw, 1.4rem);
  border-left: 1px solid var(--border);
  min-width: 0;
}
.hud__cell:first-child { border-left: 0; }
.hud__k {
  font-family: var(--font-mono); font-size: .625rem; letter-spacing: .24em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: .55rem;
}
.hud__k b { color: var(--jade); letter-spacing: .1em; }
.hud__sub {
  font-family: var(--font-mono); font-size: .6875rem; color: var(--text-faint);
  margin-top: .5rem; overflow-wrap: anywhere;
}
.hud__err { font-family: var(--font-mono); font-size: .6875rem; color: var(--alarm); margin-top: .35rem; min-height: 1rem; }
.hud__hidden { position: absolute; left: -9999px; }

/* amount */
.hud__amt { display: flex; align-items: baseline; gap: .5rem; border-bottom: 1px solid var(--border-strong); padding-bottom: .35rem; }
.hud__amt input {
  flex: 1; min-width: 0; background: none; border: 0; outline: none;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem); color: var(--text-primary);
  caret-color: var(--jade); padding: 0;
}
.hud__amt input::placeholder { color: var(--text-faint); }
/* MAX and HALF write the balance to the wei, which can be 20+ characters.
   The field steps its own type down rather than clipping the number: on a
   fund page the exact figure has to stay readable and intact. */
.hud__amt input.is-long  { font-size: clamp(1rem, 1.7vw, 1.1875rem); }
.hud__amt input.is-xlong { font-size: clamp(.8125rem, 1.3vw, .9375rem); letter-spacing: -.01em; }
.hud__amt:focus-within { border-bottom-color: var(--jade); }
.hud__unit { font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .18em; color: var(--text-muted); }

/* allocation: slider + presets */
.hud__slide { display: grid; gap: .4rem; }
.slider {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 10px; background: none; outline: none; cursor: pointer;
}
.slider::-webkit-slider-runnable-track {
  height: 10px; border-radius: 2px;
  border: 1px solid var(--border-strong);
  background:
    linear-gradient(90deg, var(--jade) 0 var(--fill, 0%), transparent var(--fill, 0%) 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 1px, transparent 1px 7px),
    var(--elevated);
}
.slider::-moz-range-track {
  height: 10px; border-radius: 2px;
  border: 1px solid var(--border-strong);
  background:
    linear-gradient(90deg, var(--jade) 0 var(--fill, 0%), transparent var(--fill, 0%) 100%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 1px, transparent 1px 7px),
    var(--elevated);
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 8px; height: 20px; margin-top: -6px; border-radius: 1px;
  background: var(--jade); border: 1px solid #061012;
  box-shadow: 0 0 10px rgba(46,169,161,.55);
}
.slider::-moz-range-thumb {
  width: 8px; height: 20px; border-radius: 1px;
  background: var(--jade); border: 1px solid #061012;
  box-shadow: 0 0 10px rgba(46,169,161,.55);
}
.slider:focus-visible { outline: 2px solid var(--jade); outline-offset: 4px; }
.slider[aria-disabled="true"], .slider:disabled { opacity: .35; cursor: not-allowed; }
.hud__ticks { display: flex; justify-content: space-between; }
.hud__tick {
  font-family: var(--font-mono); font-size: .625rem; color: var(--text-faint);
  padding: .1rem .3rem; border-radius: 3px;
}
.hud__tick:hover { color: var(--jade); background: rgba(46,169,161,.08); }
.hud__quick { display: flex; gap: .4rem; margin-top: .6rem; }
.hud__pill {
  flex: 1;
  border: 1px solid var(--jade-a30); border-radius: 5px; background: rgba(46,169,161,.06);
  padding: .4rem .5rem; font-family: var(--font-mono); font-size: .6875rem;
  letter-spacing: .18em; color: var(--jade);
}
.hud__pill:hover:not([disabled]) { background: rgba(46,169,161,.15); border-color: var(--jade); }
.hud__pill--hot { border-color: var(--gold-a30); background: var(--gold-a08); color: var(--gold); }
.hud__pill--hot:hover:not([disabled]) { background: var(--gold-a15); border-color: var(--gold); }
.hud__pill[disabled] { opacity: .35; cursor: not-allowed; }

/* tiers */
.tiers { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .3rem; }
.tier {
  display: flex; flex-direction: column; align-items: center; gap: .1rem;
  padding: .5rem .2rem; background: var(--elevated);
  border: 1px solid var(--border-strong); border-radius: 5px;
  font-family: var(--font-mono);
}
.tier b { font-size: .6875rem; font-weight: 500; letter-spacing: .06em; color: var(--text-secondary); }
.tier i { font-style: normal; font-size: .5625rem; color: var(--text-faint); }
.tier:hover { border-color: var(--text-muted); }
.tier[aria-pressed="true"] { border-color: var(--gold); background: var(--gold-a08); box-shadow: inset 0 0 12px rgba(196,168,98,.08); }
.tier[aria-pressed="true"] b { color: var(--gold); }
.tier[aria-pressed="true"] i { color: var(--gold-deep); }

/* the commit key */
.hud__cell--go { display: flex; flex-direction: column; justify-content: center; gap: .5rem; min-width: 190px; }
.hud__go {
  position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  padding: 1.15rem 1.6rem;
  border: 1px solid var(--gold); border-radius: 8px;
  background: linear-gradient(135deg, rgba(196,168,98,.10), rgba(196,168,98,.20));
  font-family: var(--font-mono); font-size: .9375rem; font-weight: 500;
  letter-spacing: .3em; text-transform: uppercase; color: var(--gold-hover);
}
.hud__go i { font-style: normal; font-size: .75rem; transform: translateX(0); transition: transform var(--fast) var(--ease); }
.hud__go:hover:not([disabled]) i { transform: translateX(4px); }
.hud__go:not([disabled]) {
  box-shadow: 0 0 26px rgba(196,168,98,.18), inset 0 1px 0 rgba(255,255,255,.05);
  color: #0a0b0d;
  background: linear-gradient(135deg, #c4a862, #e6d091);
}
@media (prefers-reduced-motion: no-preference) {
  .hud__go:not([disabled])::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%);
    background-size: 260% 100%;
    animation: hudkey 3.4s linear infinite;
  }
  @keyframes hudkey { from { background-position: 200% 0; } to { background-position: -60% 0; } }
}
.hud__go[disabled] { opacity: .4; cursor: not-allowed; border-color: var(--gold-deep); color: var(--gold-deep); }
.hud__alt {
  border: 1px solid rgba(224,96,90,.28); border-radius: 6px; background: rgba(224,96,90,.05);
  padding: .5rem .6rem; font-family: var(--font-mono); font-size: .6875rem;
  letter-spacing: .08em; color: var(--text-muted);
}
.hud__alt:hover { border-color: var(--alarm); color: var(--alarm); }
.hud__alt[hidden] { display: none; }

/* ── readout rail ─────────────────────────────────────────── */
.hud__readout {
  position: relative;
  display: flex; flex-wrap: wrap; gap: .35rem 1.15rem;
  padding: .7rem clamp(.9rem, 2vw, 1.4rem);
  border-top: 1px solid var(--border);
  background: rgba(255,255,255,.012);
  font-family: var(--font-mono); font-size: .6875rem;
}
.hud__ro { display: flex; align-items: baseline; gap: .45rem; min-width: 0; }
.hud__ro em {
  font-style: normal; letter-spacing: .18em; text-transform: uppercase; color: var(--text-faint);
}
.hud__ro b { font-weight: 400; color: var(--text-secondary); }
.hud__ro--hot b .val, .hud__ro--hot b { color: var(--jade); }
.hud .tx { margin: 0 clamp(.9rem, 2vw, 1.4rem) 1rem; position: relative; }

/* ── narrower decks ───────────────────────────────────────── */
@media (max-width: 1080px) {
  .hud__deck { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .hud__cell:nth-child(3) { border-left: 0; }
  .hud__cell:nth-child(n+3) { border-top: 1px solid var(--border); }
  .hud__cell--go { min-width: 0; }
}
@media (max-width: 680px) {
  .hud__deck { grid-template-columns: 1fr; }
  .hud__cell { border-left: 0; border-top: 1px solid var(--border); }
  .hud__cell:first-child { border-top: 0; }
  .hud__chip--push { margin-left: 0; }
  .hud__go { padding: 1rem; }
}

/* ─────────── positions table ─────────── */
.ptab { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: .75rem; }
.ptab th {
  text-align: left; padding: .5rem .6rem; color: var(--text-muted);
  font-weight: 500; font-size: .625rem; letter-spacing: .14em; text-transform: uppercase;
  border-bottom: 1px solid var(--border-strong);
}
.ptab td { padding: .65rem .6rem; border-bottom: 1px solid var(--border); color: var(--text-secondary); vertical-align: top; }
.ptab tr:last-child td { border-bottom: 0; }
.ptab__wrap { overflow-x: auto; }
.badge {
  display: inline-block; padding: .1rem .45rem; border-radius: 3px;
  font-size: .5625rem; letter-spacing: .08em; text-transform: uppercase;
}
.badge--flex { background: rgba(107,139,165,.12); color: var(--accent); }
.badge--lock { background: var(--gold-a08); color: var(--gold); }
.bar { height: 3px; border-radius: 2px; background: var(--highest); margin-top: .35rem; }
.bar i { display: block; height: 100%; border-radius: 2px; background: var(--gold); }
.mini {
  border: 1px solid var(--border-strong); border-radius: 5px; background: var(--elevated);
  padding: .3rem .6rem; font-family: var(--font-mono); font-size: .625rem; color: var(--text-secondary);
  white-space: nowrap;
}
.mini:hover { border-color: var(--gold); color: var(--gold); }
.mini--warn { border-color: rgba(181,148,74,.4); color: var(--stale); }
.mini--warn:hover { border-color: var(--stale); color: var(--stale); }

.gate {
  border: 1px dashed var(--border-strong); border-radius: var(--radius-sm);
  padding: 1.5rem 1.1rem; text-align: center;
}
.gate[hidden], .empty[hidden] { display: none; }
.gate__t { font-family: var(--font-mono); font-size: .8125rem; color: var(--text-secondary); }
.gate__d { font-size: .8125rem; color: var(--text-muted); margin-top: .4rem; max-width: 40ch; margin-inline: auto; line-height: 1.6; }
.gate--alarm { border-color: rgba(224,96,90,.45); }
.gate--alarm .gate__t { color: var(--alarm); }
.empty {
  font-family: var(--font-mono); font-size: .75rem; color: var(--text-faint);
  text-align: center; padding: 1.1rem 0;
}

/* ─────────── DIEM panel ─────────── */
.diem__pending {
  display: flex; gap: .9rem; align-items: flex-start;
  border: 1px solid var(--jade-a30); border-radius: var(--radius-sm);
  background: rgba(46,169,161,.05); padding: 1rem;
}
.diem__pending[hidden] { display: none; }
.diem__pulse {
  width: 8px; height: 8px; border-radius: 50%; background: var(--jade); flex: none; margin-top: .4rem;
  box-shadow: 0 0 0 4px var(--jade-dim);
}
@media (prefers-reduced-motion: no-preference) {
  .diem__pulse { animation: diempulse 2.4s ease-in-out infinite; }
  @keyframes diempulse { 0%,100% { box-shadow: 0 0 0 3px var(--jade-dim); } 50% { box-shadow: 0 0 0 7px rgba(46,169,161,.06); } }
}
.diem__t { font-family: var(--font-mono); font-size: .8125rem; color: var(--jade); letter-spacing: .04em; }
.diem__d { font-size: .8125rem; color: var(--text-muted); margin-top: .35rem; line-height: 1.65; max-width: 56ch; }
.diem__scan { font-family: var(--font-mono); font-size: .6875rem; color: var(--stale); margin-top: .7rem; }
.diem__scan[hidden] { display: none; }

/* ─────────── links ─────────── */
.links { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: .9rem; }
.linkcard {
  display: block; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); padding: 1rem;
}
.linkcard:hover { border-color: var(--jade-a30); background: var(--surface-2); }
.linkcard__k { font-family: var(--font-mono); font-size: .625rem; letter-spacing: .2em; text-transform: uppercase; color: var(--jade); }
.linkcard__n { font-size: 1rem; color: var(--text-primary); margin: .35rem 0 .3rem; }
.linkcard__d { font-size: .8125rem; color: var(--text-muted); line-height: 1.6; }
.linkcard__u { font-family: var(--font-mono); font-size: .6875rem; color: var(--text-faint); margin-top: .5rem; overflow-wrap: anywhere; }
.linkcard--todo { border-style: dashed; cursor: default; }
.linkcard--todo:hover { border-color: var(--border); background: var(--surface); }

/* ─────────── modal (unstake / early unstake) ─────────── */
.modal { position: fixed; inset: 0; z-index: 62; display: grid; place-items: center; padding: 1rem; }
.modal[hidden] { display: none; }
.modal__back { position: absolute; inset: 0; background: rgba(3,4,6,.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.modal__win {
  position: relative; width: min(30rem, 100%);
  border: 1px solid var(--border-strong); border-radius: var(--radius);
  background: var(--surface-2); padding: 1.4rem;
}
.modal__t { font-family: var(--font-mono); font-size: .875rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.modal__t--warn { color: var(--stale); }
.modal__d { font-size: .8125rem; color: var(--text-muted); margin: .4rem 0 1rem; line-height: 1.6; }
.modal__cancel { display: block; width: 100%; margin-top: .5rem; padding: .6rem; font-family: var(--font-mono); font-size: .75rem; color: var(--text-muted); }
.modal__cancel:hover { color: var(--text-primary); }

/* ─────────── terminal: staking additions ─────────── */
.term__res .ok   { color: var(--jade); }
.term__res .warn { color: var(--stale); }
.term__res .bad  { color: var(--alarm); }
.term__res .k    { color: var(--gold); }
.term__res .v    { color: var(--text-primary); }
.term__res table { border-collapse: collapse; width: 100%; }
.term__res td { padding: .15rem .5rem .15rem 0; vertical-align: top; }
.term__preview {
  border: 1px solid var(--gold-a30); border-radius: 6px;
  background: var(--gold-a08); padding: .6rem .7rem; margin: .4rem 0;
}

/* ─────────── responsive ─────────── */
@media (max-width: 640px) {
  .stake-main { padding-top: 4.75rem; }
  .readbar { top: 3.3rem; }
  .cellv__v { font-size: 1.0625rem; }
  .nav__links { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   THE DASHBOARD (appended — nothing above this line is changed)

   One instrument panel at the top of the page: value + sparkline on
   the left, the action stack on the right, positions full width
   below. It borrows the existing vocabulary only — .slab bezel,
   .cells, .ptab, .btn, the gold/jade/cream palette and the mono
   face. No new colour and no new font is introduced here.

   Every control in this panel clears the 44px tap floor, including
   the per-row unstake buttons in the positions table.
   ══════════════════════════════════════════════════════════════ */

.dash__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: clamp(1rem, 2.5vw, 1.75rem);
  align-items: start;
  margin-bottom: 1.1rem;
}

/* ─────────── value + chart ─────────── */
.dash__k {
  font-family: var(--font-mono); font-size: .625rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-muted);
}
.dash__big {
  margin-top: .35rem;
  font-family: var(--font-mono); font-size: clamp(2rem, 6vw, 3.25rem);
  line-height: 1.02; letter-spacing: -.01em; overflow-wrap: anywhere;
}
.dash__big .val { color: var(--gold); }
.dash__mid { margin-top: .3rem; font-size: 1.5rem; line-height: 1.15; overflow-wrap: anywhere; }
.dash__mid .val { color: var(--gold); }
.dash__sub {
  margin-top: .45rem;
  font-family: var(--font-mono); font-size: .6875rem; color: var(--text-faint);
  overflow-wrap: anywhere;
}
.dash__sub .val { font-size: .75rem; color: var(--text-secondary); }
.dash__hint {
  margin-top: .5rem;
  font-family: var(--font-mono); font-size: .6875rem; line-height: 1.6; color: var(--text-faint);
}

.dash__chart { margin: 1rem 0 0; }
.dash__spark { display: block; width: 100%; height: auto; max-width: 100%; max-height: 170px; overflow: visible; }
.dash__line { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.dash__line--actual { stroke: var(--jade); stroke-width: 1.6; }
.dash__line--proj   { stroke: var(--gold); stroke-width: 1.2; stroke-dasharray: 4 3; opacity: .75; }
.dash__dot  { fill: var(--jade); }
.dash__axis { stroke: var(--border); stroke-width: 1; }
.dash__now  { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 2 3; }

.dash__legend { display: flex; flex-wrap: wrap; gap: .25rem 1rem; margin-top: .5rem; }
.dash__key {
  display: inline-flex; align-items: center; gap: .4rem;
  font-family: var(--font-mono); font-size: .625rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-faint);
}
.dash__key i { display: block; width: 16px; height: 0; flex: none; }
.dash__key--actual i { border-top: 2px solid var(--jade); }
.dash__key--proj i   { border-top: 2px dashed var(--gold); }
.dash__key--proj { color: var(--stale); }
.dash__note {
  display: block; margin-top: .45rem;
  font-family: var(--font-mono); font-size: .6875rem; line-height: 1.65; color: var(--text-faint);
}

/* ─────────── the action stack ─────────── */
.dash__acts { display: grid; gap: .85rem; min-width: 0; }
.dash__stack {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); padding: .9rem .85rem; min-width: 0;
}
.dash__stack--claim .dash__hint { margin-bottom: .7rem; }
.dash__btn { width: 100%; min-height: 46px; }
.dash__btn + .dash__btn { margin-top: .5rem; }
.dash__presets { margin-top: .6rem; }
.dash__presets[hidden] { display: none; }
.dash__btn[disabled], .dash__btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.dash__btn[disabled]:hover, .dash__btn[aria-disabled="true"]:hover {
  background: var(--btn-cream-a06); border-color: var(--btn-cream-a28); color: var(--btn-cream);
}

/* ─────────── the relocated positions table ─────────── */
.dash .cells { margin-top: .25rem; }
/* the per-row actions come from renderPositions() untouched; they are given
   the tap-target floor here rather than by rewriting that function */
.dash .mini {
  min-height: 44px; display: inline-flex; align-items: center;
  padding: .5rem .75rem;
}
.dash__alt { width: 100%; min-height: 46px; margin-top: .9rem; }
.dash__alt[hidden] { display: none; }

/* ─────────── responsive: no sideways scroll at any width ─────────── */
@media (max-width: 900px) {
  .dash__top { grid-template-columns: 1fr; }
  .dash__acts { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}
@media (max-width: 560px) {
  .dash__acts { grid-template-columns: 1fr; }
  .dash__big { font-size: clamp(1.75rem, 11vw, 2.5rem); }
}

/* ─────────── dashboard: gate + value share one column ───────────
   The ACTION stack must stay visible when no wallet is connected — a first
   time visitor should see that this page can stake, claim and convert. Only
   the VALUE block is gated, because that is the part that would otherwise
   have to invent numbers about a wallet it cannot read. */
.dash__valwrap { min-width: 0; }
.dash__valwrap .gate { margin: 0; }

/* ─────────── total earnings ─────────── */
.dash__earn {
  margin-top: 1.15rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.dash__big--sm { font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
.dash__earnrows {
  list-style: none; margin: .7rem 0 0; padding: 0;
  display: grid; gap: .4rem;
}
.dash__earnrows li {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem;
  font-family: var(--font-mono); font-size: .75rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--border);
}
.dash__earnrows li:last-child { border-bottom: 0; }
.dash__earnk { color: var(--text-muted); letter-spacing: .08em; text-transform: uppercase; font-size: .625rem; }

/* ─────────── protocol strip (dashboard) ───────────
   What survives of the "combined APR" and "the pool" cards after the page was
   simplified. Protocol-wide numbers, so it sits OUTSIDE the wallet gate and
   shows with or without a connection. */
.dash__proto {
  display: grid;
  /* it lives inside the left column now, so it stacks rather than splitting */
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1rem, 2.5vw, 2rem);
  align-items: start;
  margin-top: 1.15rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--border);
}
.dash__proto-lead { min-width: 0; }
.dash__proto-rows { min-width: 0; display: grid; gap: .1rem; align-content: start; }
.dash__proto-rows .apr__part {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin: 0;
  padding: .5rem 0;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono); font-size: .75rem;
}
.dash__proto-rows .apr__part:last-child { border-bottom: 0; }
.dash__proto-rows .apr__part > span:first-child {
  color: var(--text-muted); font-size: .6875rem;
  letter-spacing: .06em;
}
@media (max-width: 820px) {
  .dash__proto { grid-template-columns: minmax(0, 1fr); }
}

/* ─────────── readbar: reserve its height ───────────
   The bar sits directly above the stake form and its text changes from
   placeholder to real values once the chain answers. Because it is a wrapping
   flex row, the line count changed with the text (measured 103px -> 65px at
   360, 47px -> 37px at 768), and the whole form below it jumped. That was
   /stake's entire CLS: 0.076 on mobile, above Google's 0.1 "poor" line once
   compounded. Reserve the settled height and make the wrap deterministic so
   the row cannot resize under the content it sits on. */
.readbar { min-height: 65px; align-content: center; }
.readbar > span { white-space: nowrap; }
@media (min-width: 700px) { .readbar { min-height: 47px; } }

/* ─────────── narrow header: icons, not words ───────────
   At 320-430px the bar carried logo + START + terminal + $SIBYL chip +
   "connect wallet". The connect button alone was 152px and the chip
   overlapped the terminal by 20px. Below 560px the wordy control drops to a
   44px icon; its accessible name is kept on the button itself, so nothing is
   lost to a screen reader. */
.btn__ico { width: 16px; height: 16px; flex: none; }
@media (min-width: 561px) { #btn-connect .btn__ico { display: none; } }
@media (max-width: 560px) {
  #btn-connect {
    width: 44px; min-width: 44px; padding: 0;
    display: inline-grid; place-items: center;
  }
  #btn-connect .btn__label { display: none; }
}

/* The nowrap above is for the SHORT status spans (label, block, source) so the
   bar's line count stays predictable. #read-msg is a full sentence that only
   appears when a read fails — holding it on one line pushed it to 344px in a
   320px viewport and scrolled the whole page sideways. It wraps. */
.readbar > #read-msg {
  white-space: normal;
  overflow-wrap: anywhere;
  min-width: 0;
  flex: 1 1 100%;
}

/* ─────────── APR methodology trigger ───────────
   Was "? how this number is made, and why it moves" — a question mark bolted
   to a fragment. It now poses the question and names the action, which also
   gives it a real accessible name: "read the method" says what happens,
   where "click here" would say nothing to anyone navigating by links. */
.tip__btn {
  min-height: 44px;                 /* was 29px, under the tap-target floor */
  border-radius: 10px;
  gap: .5rem;
  padding: .4rem .85rem;
}
.tip__ask { color: var(--text-muted); }
.tip__go {
  color: var(--gold-bright, #d4b872);
  border-bottom: 1px solid rgba(196, 168, 98, .45);
  padding-bottom: 1px;
}
.tip__btn:hover .tip__go,
.tip__btn[aria-expanded="true"] .tip__go { border-bottom-color: var(--gold); }
.tip__btn[aria-expanded="true"] .tip__ask { color: var(--gold-bright, #d4b872); }

/* The methodology trigger sat flush against the line above it (gap 0, where
   the rest of the block runs 5-7px) because the wrapper that carried its
   margin was dropped when this moved out of the old APR card. It is a
   separate action, not a continuation of the sentence, so it gets real air
   above and sits clear of the block's bottom edge. */
.dash__proto-lead .tip {
  display: block;
  margin-top: 1.15rem;
}
.dash__proto-lead { padding-bottom: .25rem; }


/* ══════ contract addresses (bottom of page) ══════
   Ported verbatim from pages.css rather than linking pages.css here:
   that file carries a global `main .wrap > * + *` vertical-rhythm rule
   that would re-space the whole staking column. */
.addr {
  display: flex; align-items: stretch; gap: .35rem;
  margin-top: 1rem;
}
.addr__v {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center;
  font-family: var(--font-mono);
  /* the full address is 42 characters; at this size it holds one line inside
     a half-width card, which is the whole point of showing it in full */
  font-size: .625rem;
  letter-spacing: .01em;
  line-height: 1.3;
  color: var(--text-secondary);
  background: rgba(255, 255, 255, .022);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: .45rem .6rem;
  overflow-wrap: anywhere;
}
.addr__btn {
  flex: none;
  display: inline-grid; place-items: center;
  width: 44px; min-height: 44px;   /* kit floor: all controls >= 44px. With the
                                      address on its own row these had only a
                                      width and collapsed to 18px. */
  border: 1px solid var(--border);
  border-radius: 4px;
  background: rgba(255, 255, 255, .022);
  color: var(--text-muted);
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background .16s ease;
}
.addr__btn svg { width: 14px; height: 14px; }
.addr__btn:hover,
.addr__btn:focus-visible {
  color: var(--gold-bright, #d4b872);
  border-color: rgba(196, 168, 98, .45);
  background: rgba(196, 168, 98, .10);
}
.addr__btn.is-copied {
  color: var(--btn-teal, #36d8ca);
  border-color: rgba(54, 216, 202, .5);
  background: rgba(54, 216, 202, .12);
}

.addrs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: .6rem 1.4rem;
  max-width: 62rem;
  margin: 0 auto;
  text-align: left;
}
.addrs .addr { margin-top: .3rem; }
.addr__k {
  display: block;
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-muted);
}


/* ══════════════════════════════════════════════════════════════
   WALLET PICKER — the instrument panel

   Not a list of logos. A panel: chamfer-cut window in the machined
   language of the button kit, a bracket title, and rows that read as
   status readouts — the wallet's name in display type on the left,
   its state in mono on the right.

   Every wallet in the roster appears whether or not it is installed,
   because "there is no extension in this browser" is the ordinary case
   on a phone and the panel needs an answer for it, not an empty list.

   Idle, nothing here moves. The only animation in the block is the
   CONNECTING caret, which exists solely while a connection is in
   flight. A wallet chooser is not a place for decoration.
   ══════════════════════════════════════════════════════════════ */

#wallet-pick {
  position: fixed; inset: 0; z-index: 80;
  display: grid; place-items: center;
  padding: 1rem .75rem;
  /* the inner chamfer for the 16px window cut — the kit ships --chamfer-in
     for the 12px control, not for --chamfer-lg, so the pair is completed here */
  --wpick-chamfer-in: polygon(15px 0, 100% 0, 100% calc(100% - 15px),
                              calc(100% - 15px) 100%, 0 100%, 0 15px);
}
.wpick__back {
  position: absolute; inset: 0;
  /* NO backdrop-filter. Measured at 4x throttle with the picker open: blur(6px)
     cost p50 44.2ms and 21 frames over 50ms during scroll, against 16.7ms and 1
     frame with it removed — the page's wheel/velocity loop keeps invalidating
     the blurred region even after body scroll is locked. Over a page this dark
     the blur was barely perceptible; a denser flat scrim reads the same and is
     free. (operator: "clunky on scroll", 2026-09-14) */
  background: rgba(4, 5, 8, .88);
}

/* the .btn--alarm technique: the element itself IS the gold rule, and a
   ::before inset by 1px carries the interior. one cut, two layers. */
.wpick__win {
  position: relative;
  isolation: isolate;
  display: flex; flex-direction: column;
  width: min(26rem, calc(100vw - 1.5rem));
  max-height: min(82vh, 82dvh);
  background: var(--gold-a30);
  clip-path: var(--chamfer-lg);
  border-radius: 0;
  padding: calc(1.05rem + 1px) calc(1.05rem + 1px) calc(.85rem + 1px);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .85);
}
.wpick__win::before {
  content: ''; position: absolute; inset: 1px; z-index: -1;
  background: var(--surface);
  clip-path: var(--wpick-chamfer-in);
}
.wpick__win > * { position: relative; z-index: 1; }

.wpick__t {
  margin: 0 0 .85rem;
  flex: none;
  font-family: var(--font-mono); font-size: .625rem;
  letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-bright);
}

/* the list scrolls, the window does not. the negative-margin / padding pair
   gives a focus ring room to sit outside a row without being clipped by the
   scroll box or by the chamfer. */
.wpick__list {
  display: grid; gap: .3rem; align-content: start;
  min-height: 0; flex: 1 1 auto;
  overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  margin: 0 -4px; padding: 4px 4px 6px;
}

.wpick__sec {
  margin: .55rem 0 .15rem;
  font-family: var(--font-mono); font-size: .5625rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-muted);
}
.wpick__sec:first-child { margin-top: 0; }

.wpick__note {
  margin: 0 0 .3rem;
  font-family: var(--font-mono); font-size: .6875rem; line-height: 1.6;
  color: var(--text-secondary);
}

/* ── the row ─────────────────────────────────────────────────── */
.wpick__opt {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  align-items: center; gap: .7rem;
  width: 100%; min-height: 48px;
  padding: .55rem .7rem;
  background: rgba(255, 255, 255, .02);
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-secondary);
  text-align: left; cursor: pointer;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.wpick__opt.is-detected { border-color: var(--gold-a15); }

.wpick__opt:hover, .wpick__opt:focus-visible {
  border-color: var(--gold-a30);
  background: var(--gold-a08);
  color: #fff;
}
.wpick__opt:focus-visible {
  outline: 2px solid var(--gold-bright);
  outline-offset: 2px;
}

.wpick__mark {
  width: 24px; height: 24px; flex: none;
  display: grid; place-items: center;
}
.wpick__mark svg, .wpick__mark img {
  width: 24px; height: 24px; display: block; border-radius: 5px;
}
.wpick__dot {
  width: 22px; height: 22px; border-radius: 5px;
  background: linear-gradient(135deg, var(--gold), transparent);
}

.wpick__name {
  font-family: var(--font-display); font-size: .875rem;
  letter-spacing: -.005em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.wpick__tag {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--font-mono); font-size: .5625rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.wpick__tag--det  { color: var(--gold-bright); }
.wpick__tag--pass { color: var(--btn-teal); }

/* a lamp, not a pulse. it reports a fact that is not changing. */
.wpick__lamp {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--gold-bright);
  flex: none;
}

/* ── loading ─────────────────────────────────────────────────── */
.wpick__opt.is-loading {
  border-color: var(--gold-a30);
  background: var(--gold-a08);
  color: #fff;
  cursor: progress;
}
.wpick__opt.is-loading .wpick__tag { color: var(--gold-bright); }
.wpick__caret {
  font-style: normal;
  animation: sbBlink 1.05s steps(1) infinite;
}
/* every other row washes out and stops answering while one is in flight */
.wpick__opt[aria-disabled="true"] {
  opacity: .35;
  cursor: default;
  pointer-events: none;
}

/* ── the escape hatch ────────────────────────────────────────── */
.wpick__hatch {
  grid-template-columns: minmax(0, 1fr) auto;
  margin-top: .45rem;
  border-style: dashed;
  border-color: var(--border-strong);
  background: none;
}
.wpick__hatch .wpick__name {
  font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .12em;
}

/* ── the inline failure ──────────────────────────────────────── */
.wpick__err {
  margin: .1rem 0 .15rem;
  padding: .5rem .7rem;
  border-left: 2px solid var(--alarm);
  background: var(--alarm-a12);
  font-family: var(--font-mono); font-size: .6875rem; line-height: 1.55;
  color: #f09a95;
}

.wpick__x {
  flex: none;
  margin-top: .75rem; width: 100%; min-height: 44px;
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-mono); font-size: .625rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--text-muted);
}
.wpick__x:hover { color: var(--text-primary); }
.wpick__x:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 2px; color: var(--text-primary); }

@media (prefers-reduced-motion: reduce) {
  .wpick__caret { animation: none; }
  .wpick__opt { transition: none; }
}