/* Tesselex shared page styles — served at /shared.css.

   THE TAB PAGES WEAR THE TERMINAL'S FRAME (2026-09-05). The founder's brief was
   "only trade is good — make the framing in line with the trade tab". Measured
   at 1440x900 before this pass, navigating /terminal -> /vault moved the brand
   9px right, moved the "Trade" tab label 60px right, dropped 29px of chrome
   (the ticker), dropped the status bar and the ONLY theme control on the venue,
   and left <html> with no data-theme at all — so a reader in light mode was
   thrown into the dark palette by clicking a tab. Eleven custom properties the
   page rules referenced (--r-lg, --shadow-card, --focus-line, --track-caps-sm,
   --mono, ...) resolved to the empty string.

   So the chrome is now ONE frame, byte-for-byte the terminal's: 56px nav ->
   44px tab strip -> 28px live ticker, a fixed 26px status bar, both themes, and
   the same 22px left gutter for chrome AND content at every width. What differs
   between /terminal and a tab is only what is INSIDE the frame — which is what
   a tab is for.

   The tab pages render as the terminal renders BELOW its 1181px workstation
   frame: cards as flat slabs on the page ground, document scrolling. Same
   grammar, one breakpoint apart — not a second design system. */

:root {
  color-scheme: dark;
  /* flatter, deeper terminal surfaces — panels are near-black slabs separated
     by 1px rules, not floating cards (Bloomberg/Hyperliquid data density) */
  --bg:#040507; --bg1:#070810; --surface:#090b12; --surface2:#0d0f18; --raise:#141826;
  --line:rgba(255,255,255,.05); --line2:rgba(255,255,255,.085); --line3:rgba(255,255,255,.15);
  /* --mute #7c8698 measures ~5.2:1 on --bg and ~5.0:1 on the raised panels,
     clearing WCAG AA (4.5:1) for all secondary/label copy on EVERY surface
     (2026-07-20 a11y review: the prior #6b7488 was ~4.35:1, marginally short).
     --faint #4b5468 (~2.6:1) is DECORATIVE ONLY — borders, disabled, stale
     dots; never prose (rules that mistakenly used it for text were moved to
     --mute). */
  --ink:#eceff5; --ink2:#a3abbd; --mute:#7c8698; --faint:#4b5468;
  /* --fg was referenced 4x and DEFINED NOWHERE, so every rule using it fell
     back to inherit: the ⓘ buttons had no hover state at all, and an ARMED
     SL/TP lost its colour and kept only a border — on the one control whose
     redesign existed because users could not tell whether it was armed. */
  --fg:#ffffff;
  /* banner text was hardcoded to these dark-theme values, measuring 1.17:1
     and 1.31:1 once the light theme swapped the surface underneath */
  --banner-ok-ink:#b8ecce; --banner-bad-ink:#ffc4cf;
  --acc1:#eceff5; --acc2:#c9cedd;
  --accent:var(--acc1); --accent-ink:#dfe3ec; --accent-dim:#3a4152;
  --grad-acc:#eceff5;
  /* Tinted-accent tier, adapted from Kraken's "Purple Subtle" (accent at ~16%).
     GPUPP already hand-wrote this tint five times as a one-off STATE literal but
     had no button tier for it, so mandatory funnel steps (#gateBtn, #claimBtn)
     rendered in the same neutral grey as a convenience "Max" button. Verified:
     acc1@16% over --bg1 composites to #141330 — distinct from --surface2 #0d0f18
     and --raise #141826, so it reads as intent, not as another surface.
     --accent-ink on it measures 8.69:1. Kraken's own literal rgba(133,91,251,.16)
     is a FOURTH purple its own DONT rule bans — take the mechanic, not the value. */
  --acc-subtle:rgba(236,239,245,.07);
  --acc-subtle-hi:rgba(236,239,245,.11);
  --acc-subtle-line:rgba(236,239,245,.22);
  /* Badge text must differ from badge FILL (Kraken uses #149e61 fill / #026b3f text).
     Dark was already fine; light was not — see the light block. */
  --gold-ink:var(--amber-ink);
  /* green/red RESERVED for price/PnL only; amber is the terminal signature,
     reserved for status/brand — never a data color */
  --up:#33b880; --up-ink:#5ecb97; --up-bg:rgba(51,184,128,.08); --up-line:rgba(51,184,128,.20);
  --down:#e06276; --down-ink:#ec8a99; --down-bg:rgba(224,98,118,.08); --down-line:rgba(224,98,118,.20);
  --amber:#e0a44a; --amber-ink:#f0bd6e; --amber-bg:rgba(224,164,74,.07); --amber-line:rgba(224,164,74,.20);
  /* status/warning ink. Defined because rules keep reaching for it: an
     undefined --warn silently fell through to a hardcoded amber that could
     not flip themes. Aliased to the amber pair, which is exactly its meaning. */
  --warn:var(--amber-ink);
  /* STRIP kind badge — a data category, so it needs its own themed pair like
     up/down/amber. Measured 9.89:1 here. */
  --strip-ink:#63c9b6; --strip-bg:rgba(80,190,170,.10); --strip-line:rgba(80,190,170,.28);
  --gold:var(--amber); --gold-bg:var(--amber-bg); --gold-line:var(--amber-line);
  /* radii match landing.html so the two surfaces read as one product */
  --r-lg:0px; --r-md:0px; --r-sm:0px;
  /* Softening tokens (2026-07-29). The terminal shares the landing's palette
     exactly — what made it read harsher was structure, not colour: 53 hard
     1px boxes on a flat slab. These two add the landing's depth cues without
     touching any data colour. Tokenised (not literal rgba) so the
     [data-theme="light"] block re-themes them in one place. */
  --shadow-card:0 1px 0 rgba(255,255,255,.025) inset;
  --glow-acc:none;
  /* ---- type scale ----
     The census found 24 distinct font sizes and 23 letter-spacings in one
     file - half-pixel neighbours (12/12.5, 13/13.5, 14/14.5) that cannot
     carry different jobs. Drift, not hierarchy: the same disease the
     landing page cured with its six-step scale. Seven steps for the UI
     band; each collapse is <=1px so the approved look holds. Display
     sizes (21.5/23/26/29/32) stay literal - they are single-role. */
  /* 2026-09-02: every step trimmed ~0.5-1px (founder: the terminal read as
     too roomy). The jobs and the order are unchanged; the mark (21.5px) and
     the display band keep their literal sizes. */
  --t-micro:10px;    /* badges, sublines */
  --t-lab:11px;      /* caps labels, table headers */
  --t-ui:12px;       /* buttons, chips, ticker */
  --t-body:12.5px;   /* prose, cells, notes */
  --t-data:13.5px;   /* mono numerals in tables/stats */
  --t-md:14.5px;     /* emphasized values, brand */
  --t-input:16.5px;  /* money inputs */
  --sans:"Archivo",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --monos:"Azeret Mono",ui-monospace,"SF Mono",Menlo,monospace;
  /* THE NUMERAL FACE — mirrors landing.html (founder, 2026-08-26). A number a
     PERSON READS is set in the serif; a string you would COPY — a wallet
     address, a verification code — and every numeric ENTRY FIELD stay mono,
     where fixed advance genuinely helps typing and reading hex. Newsreader's
     figures are tabular natively, so every column here still aligns. */
  --num:"Newsreader",Georgia,"Times New Roman",serif;
  /* theme-swap tokens (dark defaults) — white-alpha overlays & chrome that
     must FLIP to dark-alpha in light mode. Referenced instead of literal
     rgba() so the [data-theme="light"] block below re-themes them in one place. */
  --hover:rgba(255,255,255,.02); --track:rgba(255,255,255,.05); --shimmer:rgba(255,255,255,.06);
  --dotgrid:rgba(255,255,255,.014); --sb-bg:rgba(0,0,0,.25);
  --nav-bg:linear-gradient(180deg, rgba(5,6,9,.92), rgba(5,6,9,.78));
  --scrollthumb:#232a3d;
  /* hero price = gradient-clipped text; the dark default (white→grey) is
     invisible on a light bg, so it flips with the theme */
  --hero-grad:#ffffff;
  /* tooltip surface + focus ring, themed. Added by the literal sweep: both
     were hardcoded to the dark palette and vanished on white. */
  --tip-bg:rgba(17,20,31,.92); --focus-line:rgba(255,255,255,.5);
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg:#f3f4f8; --bg1:#eaecf2; --surface:#ffffff; --surface2:#f6f7fb; --raise:#ffffff;
  --line:rgba(17,22,38,.10); --line2:rgba(17,22,38,.14); --line3:rgba(17,22,38,.22);
  --ink:#171b26; --ink2:#3d4557; --mute:#5b6474; --faint:#9298a8;
  --fg:#000000;
  /* 7.22:1 and 7.72:1 on the light banner surfaces */
  --banner-ok-ink:#0f5b3a; --banner-bad-ink:#8e1f33;
  --acc1:#171b26; --acc2:#3d4557;
  --accent:var(--acc1); --accent-ink:#171b26; --accent-dim:#3d4557;
  --grad-acc:#171b26;
  /* .14 not .16: a mid-tone purple tints faster against white than against #040507 */
  --acc-subtle:rgba(17,22,38,.05);
  --acc-subtle-hi:rgba(17,22,38,.08);
  --acc-subtle-line:rgba(17,22,38,.20);
  /* WCAG FIX: --amber #b0741b on --gold-bg measured 3.49:1 on 9-11px type — an
     outright AA failure. Four rules used the FILL token as the TEXT colour.
     #7a4e0b on the same fill measures 6.40:1. */
  --gold-ink:#7a4e0b;
  /* up-ink was #0f7d4c = 4.38:1 on --bg1, just under AA for the most-read
     number on the page (a price change). Darkened to 5.42:1. */
  --up:#17925c; --up-ink:#0c6d42; --up-bg:rgba(23,146,92,.10); --up-line:rgba(23,146,92,.30);
  --down:#d23c56; --down-ink:#bb3149; --down-bg:rgba(210,60,86,.09); --down-line:rgba(210,60,86,.28);
  /* the light half of the STRIP pair — 5.35:1 on its own tint (was 1.85:1) */
  --strip-ink:#0c7364; --strip-bg:rgba(12,115,100,.10); --strip-line:rgba(12,115,100,.30);
  --amber:#b0741b; --amber-ink:#9a6414; --amber-bg:rgba(176,116,27,.10); --amber-line:rgba(176,116,27,.30);
  --warn:var(--amber-ink);
  --gold:var(--amber); --gold-bg:var(--amber-bg); --gold-line:var(--amber-line);
  --shadow-card:0 1px 4px rgba(16,24,40,.04), 0 4px 24px rgba(0,0,0,.03);
  --hover:rgba(17,22,38,.035); --track:rgba(17,22,38,.07); --shimmer:rgba(17,22,38,.05);
  --dotgrid:rgba(17,22,38,.028); --sb-bg:rgba(17,22,38,.03);
  --nav-bg:linear-gradient(180deg, rgba(247,248,252,.92), rgba(247,248,252,.80));
  --scrollthumb:#c3c9d6;
  --hero-grad:#171b26;
  --tip-bg:rgba(255,255,255,.97); --focus-line:rgba(17,22,38,.45);
}

/* ————— base ————— */
*{box-sizing:border-box}
html,body{margin:0}
html{scrollbar-color:var(--scrollthumb) var(--bg)}
::selection{background:rgba(236,239,245,.25)}
:root[data-theme="light"] ::selection{background:rgba(17,22,38,.14)}
body{background:radial-gradient(var(--dotgrid) 1px,transparent 1.3px) 0 0/24px 24px,var(--bg);
  color:var(--ink);font:13px/1.5 var(--sans);font-optical-sizing:auto;letter-spacing:.004em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;min-height:100vh;
  /* clears the fixed status bar, exactly as app.html reserves it */
  padding-bottom:27px}
@media(max-width:1180px){body{padding-bottom:calc(27px + env(safe-area-inset-bottom))}}
a{color:var(--accent-ink);text-decoration:none}
a:hover{text-decoration:underline}
/* one ring for every focusable thing, from the themed token — the pages had
   none of their own and inherited the UA's, which is invisible on --bg */
:focus-visible{outline:2px solid var(--focus-line);outline-offset:2px}
.page{position:relative}
/* Content shares the chrome's 22px gutter at EVERY width: the left edge of a
   table and the left edge of the "Trade" tab are the same line. That alignment
   is the point — it is what makes a tab read as the same instrument as
   /terminal — so the column is LEFT-aligned, never centred (centring is what
   moved the brand 9px and the tab strip 60px on every navigation before this
   pass).
   The cap is not a reading measure, it is a spreading limit: at 1920 an
   uncapped 7-column board scattered RANK and SCORE 1876px apart, which the
   terminal never does because its blotter lives in a bounded pane. Below
   ~1600 the cap does nothing at all, so every laptop is unaffected. */
.wrap{max-width:1560px;margin:0;padding:0 22px}
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.addr{font-family:var(--monos);font-size:.9em;letter-spacing:0}

/* ————— top nav — app.html's rule text ————— */
.nav{position:sticky;top:0;z-index:40;background:var(--nav-bg);
  backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);
  border-bottom:1px solid var(--line)}
.nav::after{content:"";position:absolute;inset:auto 0 -1px 0;height:1px;
  background:linear-gradient(90deg,transparent 5%,rgba(255,255,255,.22) 50%,transparent 95%)}
:root[data-theme="light"] .nav::after{background:linear-gradient(90deg,transparent 5%,rgba(17,22,38,.14) 50%,transparent 95%)}
.nav-in{max-width:none;margin:0;padding:0 22px;height:56px;display:flex;align-items:center;gap:15px}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink)}
.brand:hover{text-decoration:none}
.brand img{display:block;width:36px;height:40px}
.brand b{font-size:var(--t-md);font-weight:700;letter-spacing:-.015em;white-space:nowrap}
/* nowrap is load-bearing: the descriptor broke across THREE lines at 820px and
   took the 56px nav row with it. DESIGN.md's nav rule already says the
   descriptor is decorative and must not survive a crowded bar — it goes at
   1060, where brand + chip + status + wallet stop fitting comfortably. */
.brand small{display:block;font-size:var(--t-lab);font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--mute);white-space:nowrap}
@media(max-width:1060px){.brand small{display:none}}
.brand .brand-name{display:flex;flex-direction:column}
.spacer{flex:1}
/* the testnet chip travelled with the frame: the claim that the money is not
   real cannot be true on one tab and absent on the next */
.net-chip{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-body);font-weight:600;
  color:var(--gold-ink);background:var(--gold-bg);border:1px solid var(--gold-line);
  border-radius:3px;padding:4.5px 12px;white-space:nowrap;letter-spacing:.01em}
.stat{display:inline-flex;align-items:center;gap:8px;font-size:var(--t-data);font-weight:500;
  color:var(--ink2);white-space:nowrap}
.stat .dot{width:7px;height:7px;background:var(--up);border-radius:50%;animation:pulse 2.6s infinite}
.stat.bad .dot{background:var(--down);animation:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(55,181,125,.35)}
  70%{box-shadow:0 0 0 7px rgba(55,181,125,0)}
  100%{box-shadow:0 0 0 0 rgba(55,181,125,0)}}
@media(prefers-reduced-motion:reduce){.stat .dot{animation:none}}

/* ————— wallet chip + account menu —————
   The chip used to BE the sign-out button: one click on the only affordance an
   address had signed you out. The terminal retired that on 2026-08-24; the tab
   pages kept it. Same fix here — the address opens a menu, sign-out is one item
   inside it. */
.wallet-wrap{position:relative;display:flex}
.wchip{display:inline-flex;align-items:center;gap:8px;font-size:var(--t-data);font-weight:500;
  color:var(--ink2);border:1px solid var(--line2);background:var(--surface2);padding:7px 14px;
  border-radius:var(--r-sm);cursor:pointer;font-family:var(--sans);white-space:nowrap}
.wchip:hover{color:var(--ink);border-color:var(--line3)}
.wchip .dot{width:6px;height:6px;border-radius:50%;background:var(--up);flex:none}
.wc-caret{font-size:9px;color:var(--mute);transition:transform .14s}
.wchip[aria-expanded="true"] .wc-caret{transform:rotate(180deg)}
.acct-menu{position:absolute;top:calc(100% + 8px);right:0;width:min(320px,92vw);z-index:50;
  background:var(--surface2);border:1px solid var(--line3);border-radius:var(--r-lg);
  box-shadow:0 24px 64px -24px rgba(0,0,0,.9);padding:12px 14px 10px}
.acct-menu[hidden]{display:none}
.am-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding-bottom:10px;border-bottom:1px solid var(--line)}
.am-k{font-size:var(--t-lab);font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--mute)}
.am-addr{font-family:var(--monos);font-size:var(--t-body);color:var(--ink);flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis}
.am-icon{font-size:var(--t-lab);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--mute);background:none;border:0;padding:4px 2px;cursor:pointer;font-family:var(--sans)}
.am-icon:hover{color:var(--ink);text-decoration:none}
.am-foot{display:flex;gap:8px;margin-top:10px}
.am-btn{flex:1;padding:9px 0;font-size:var(--t-ui);font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink2);background:var(--bg1);border:1px solid var(--line2);
  border-radius:var(--r-sm);cursor:pointer;font-family:var(--sans)}
.am-btn:hover{color:var(--ink);border-color:var(--line3)}

/* ————— the tab strip — app.html's rule text, full-bleed like its own ————— */
.vtabs{display:flex;align-items:stretch;height:44px;padding:0 22px;
  border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;
  max-width:none;margin:0}
.vtabs::-webkit-scrollbar{display:none}
.vtabs a{display:inline-flex;align-items:center;padding:0 18px;font-size:var(--t-ui);font-weight:500;
  color:var(--mute);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;
  transition:color .14s}
.vtabs a:hover{text-decoration:none;color:var(--ink2)}
.vtabs a.on{color:var(--ink);border-bottom-color:var(--ink)}
/* the bar clips on both axes, so the global ring at +2 loses its top and bottom
   edges — draw it inside (the fix app.html carries verbatim) */
.vtabs a:focus-visible{outline:2px solid var(--focus-line);outline-offset:-3px}

/* ————— the live ticker — app.html's rule text ————— */
.ticker{border-bottom:1px solid var(--line);background:var(--dotgrid)}
.ticker-in{max-width:none;margin:0;padding:0 22px;display:flex;gap:22px;overflow:hidden;
  scrollbar-width:none;height:28px;align-items:center}
.ticker-in::-webkit-scrollbar{display:none}
.ticker-scroll{display:inline-flex;align-items:center;flex:none;will-change:transform;
  animation:tickerScroll 55s linear infinite}
.ticker-in:hover .ticker-scroll{animation-play-state:paused}
.ticker-half{display:inline-flex;gap:22px;align-items:center;padding-right:22px}
@keyframes tickerScroll{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ticker-scroll{animation:none}}
.tk{display:inline-flex;align-items:center;gap:7px;font-size:var(--t-body);white-space:nowrap;
  color:var(--ink2);cursor:pointer;transition:color .14s}
.tk:hover{color:var(--ink);text-decoration:none}
.tk .s{font-family:var(--num);font-weight:500;font-size:var(--t-ui);color:var(--mute);letter-spacing:.02em}
.tk .p{font-family:var(--num);font-weight:540}
.tk .c{font-family:var(--num);font-size:var(--t-ui);font-weight:500}
.tk .c.up{color:var(--up-ink)}.tk .c.down{color:var(--down-ink)}.tk .c.flat{color:var(--mute)}
.tk.stale{opacity:.45;cursor:default}

/* ————— status bar — app.html's rule text ————— */
/* OPAQUE AT EVERY WIDTH, unlike the terminal's. app.html can afford the 25%
   black wash because above 1181px its document cannot scroll — nothing ever
   passes under the bar. A tab page scrolls at every width, so the wash let
   table rows read straight through the venue's connection-truth strip
   (measured on /vault at 1440: the composition rows showed through "CONNECTING").
   Safe-area keeps it clear of the home indicator; body reserves the height. */
.statusbar{position:fixed;left:0;right:0;bottom:0;z-index:25;
  border-top:1px solid var(--line2);background:var(--bg);
  padding-bottom:env(safe-area-inset-bottom)}
.statusbar-in{max-width:none;margin:0;padding:0 22px;height:26px;display:flex;align-items:center;
  gap:9px;font-family:var(--num);font-size:var(--t-ui);font-weight:500;letter-spacing:.04em;
  color:var(--ink2);text-transform:uppercase;overflow-x:auto;scrollbar-width:none;white-space:nowrap}
.statusbar-in::-webkit-scrollbar{display:none}
.sb-item{display:inline-flex;align-items:center;gap:6px}
.sb-sep{color:var(--faint)}
.sb-dim{color:var(--mute)}
.sb-theme{display:inline-flex;align-items:center;gap:5px;font:inherit;color:var(--mute);
  background:transparent;border:none;cursor:pointer;letter-spacing:inherit;padding:0}
.sb-theme:hover{color:var(--ink2)}
.sb-grow{flex:1}
.sb-dot{width:6px;height:6px;border-radius:50%;background:var(--up)}
.sb-dot.bad{background:var(--down)}

/* ————— type — the terminal's voices ————— */
.lab{font-size:var(--t-ui);font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--mute);display:inline-flex;align-items:center;gap:7px}
.micro{font-size:var(--t-lab);font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.mono{font-family:var(--monos);font-variant-numeric:tabular-nums}
/* the pane header, identical in voice to the terminal's .sec — this is what a
   page title is on this venue now. The 3px tick carries the brand, never amber
   (amber means "needs attention" and is spent by diluting it). */
.sec{font-size:var(--t-ui);font-weight:700;text-transform:uppercase;letter-spacing:.15em;
  color:var(--mute);display:inline-flex;align-items:center;gap:7px;margin:0}
.sec:not(.dim)::before{content:"";width:3px;height:10px;border-radius:1px;
  background:var(--grad-acc);opacity:.9;flex:none}
.sec-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px 12px;
  flex-wrap:wrap;margin-bottom:12px}
.dim{color:var(--mute)}
/* the page's own header band: pane title left, live meta right, one quiet line
   of explanation under it. Replaces the serif headline + kicker the tabs used
   to open with — that voice belongs to the landing page, not to a workstation. */
.pagehead{display:flex;align-items:baseline;justify-content:space-between;gap:6px 16px;
  flex-wrap:wrap;padding:16px 0 0}
.pagesub{font-size:var(--t-body);color:var(--mute);line-height:1.6;max-width:78ch;
  margin:7px 0 0;text-wrap:pretty}
.pagesub b{color:var(--ink2);font-weight:600}
.lede{font-size:var(--t-body);color:var(--ink2);max-width:72ch;text-wrap:pretty;margin:10px 0 0}
.up{color:var(--up-ink)}.down{color:var(--down-ink)}.amber{color:var(--amber-ink)}
.mute{color:var(--mute)}.ink2{color:var(--ink2)}
.tlink{font-size:var(--t-lab);font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink2)}
.tlink::after{content:" \2192"}
.tlink:hover{color:var(--ink);text-decoration:none}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:40px;padding:0 22px;
  border:1px solid var(--line2);color:var(--ink);background:var(--surface2);font-size:var(--t-ui);
  font-weight:600;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;cursor:pointer;
  font-family:var(--sans);border-radius:var(--r-sm)}
.btn:hover{background:var(--raise);border-color:var(--line3);text-decoration:none}
.btn[disabled],.btn.off{opacity:.35;cursor:not-allowed}

/* ————— panes — the terminal's card grammar ————— */
.card{position:relative;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);box-shadow:var(--shadow-card)}
.card-pad{padding:14px 16px}
.card + .card{margin-top:12px}

/* ————— stat strip — the dock's stat cards, fused into one row ————— */
.strip{display:grid;gap:0;border:1px solid var(--line);background:var(--surface)}
.strip>div{padding:12px 16px 11px;border-left:1px solid var(--line)}
.strip>div:first-child{border-left:0}
.strip .v{font-family:var(--num);font-size:26px;font-weight:540;letter-spacing:-.02em;margin-top:5px;
  line-height:1.05;white-space:nowrap;font-variant-numeric:tabular-nums}
.strip .v.sm{font-size:21.5px}
.strip .src,.strip .sub{font-family:var(--monos);font-size:var(--t-micro);color:var(--mute);margin-top:5px}

/* ————— tables — the terminal's blotter ————— */
/* every wide table scrolls INSIDE its own box: a 7-column board was 640px wide
   at a 375px viewport and pushed the whole document sideways, taking the nav
   and the ticker with it */
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
/* and it SAYS it scrolls. A seven-column board clipped at "REFE…" with no cue
   reads as a broken table, not a scrollable one — the fade is the same
   continuation signal app.html gives .ms-stats and the dock. Applied only
   where the content actually overflows, so a table that fits keeps a clean
   right edge. */
@supports (animation-timeline:scroll()){
  .tblwrap{scroll-timeline:--tbl x;
    mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 26px),transparent);
    animation:tblFade linear both;animation-timeline:--tbl;animation-range:contain}
  @keyframes tblFade{
    to{mask-image:linear-gradient(90deg,transparent 0,#000 26px);
       -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26px)}}
}
table.tape{width:100%;border-collapse:collapse;font-size:var(--t-body)}
.tape th{color:var(--mute);font-weight:600;font-size:var(--t-lab);text-transform:uppercase;
  letter-spacing:.12em;text-align:right;padding:5px 10px 8px;border-bottom:1px solid var(--line2);
  white-space:nowrap}
.tape th:first-child,.tape td:first-child{text-align:left;padding-left:0}
.tape td{font-family:var(--num);font-variant-numeric:tabular-nums;font-size:var(--t-data);
  font-weight:500;letter-spacing:-.01em;color:var(--ink);padding:9px 10px;text-align:right;
  border-bottom:1px solid var(--line);white-space:nowrap}
.tape td.name{font-family:var(--sans);font-weight:600;font-size:var(--t-ui);letter-spacing:.06em}
.tape tbody tr{transition:background .12s}
.tape tbody tr:hover td{background:var(--hover)}
.tape tr.me td{border-bottom:1px solid var(--line3);border-top:1px solid var(--line3);background:var(--acc-subtle)}
.tape tbody tr:last-child td{border-bottom:none}
/* house rows: the venue's own bots, shown so a young board is not blank and
   labelled so nobody reads them as traders */
.tape tr.house td{color:var(--mute)}
.tape tr.house td.name .micro{color:var(--faint)}
.spec{width:100%;border-collapse:collapse}
.spec td{padding:9px 10px 9px 0;border-bottom:1px solid var(--line);font-size:var(--t-body);
  color:var(--ink2);vertical-align:baseline}
.spec td:first-child{width:210px;font-weight:600;font-size:var(--t-lab);letter-spacing:.12em;
  text-transform:uppercase;color:var(--mute)}
.spec td.v{font-family:var(--num);font-size:var(--t-data);font-weight:500;color:var(--ink);text-align:right}
.spec tr:last-child td{border-bottom:none}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 0;
  border-bottom:1px solid var(--line);font-size:var(--t-body);color:var(--ink2)}
.row b{font-family:var(--num);font-weight:540;color:var(--ink);font-variant-numeric:tabular-nums;text-align:right}
.row:last-child{border-bottom:none}

/* ————— in-page view tabs — the dock's tab bar ————— */
.ttabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.ttabs::-webkit-scrollbar{display:none}
.ttab{font-size:var(--t-ui);font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--mute);padding:8px 12px 7px;border:0;border-bottom:2px solid transparent;
  background:none;cursor:pointer;font-family:var(--sans);white-space:nowrap;flex:none}
.ttab:hover{color:var(--ink2)}
.ttab.on{color:var(--ink);border-bottom-color:var(--accent)}
.sq{display:inline-block;width:7px;height:7px;background:var(--ink);vertical-align:middle;margin-right:10px}
.sq.o{background:transparent;border:1px solid var(--ink2)}
.seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));background:var(--bg1);
  border:1px solid var(--line2);padding:3px;gap:3px}
.seg button{padding:9px 0;text-align:center;font-size:var(--t-ui);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--mute);background:transparent;border:0;cursor:pointer;font-family:var(--sans)}
.seg button.on{color:var(--ink);background:var(--surface2);border-bottom:1px solid var(--ink)}
.field{border:1px solid var(--line2);background:var(--bg1);padding:9px 12px;font-family:var(--num);
  font-size:var(--t-input);font-weight:560;color:var(--ink);display:flex;justify-content:space-between;
  align-items:baseline}
.field input{background:none;border:0;color:var(--ink);font:inherit;width:100%;outline:none}
.rail{border:1px solid var(--line);background:var(--surface);padding:16px;box-shadow:var(--shadow-card)}
.chip{display:flex;align-items:center;gap:14px;border:1px solid var(--line2);background:var(--surface);
  padding:9px 12px;font-family:var(--monos);font-size:var(--t-data);color:var(--ink)}
.chip.used{color:var(--faint);border-color:var(--line)}
.note{font-size:var(--t-body);color:var(--mute);line-height:1.6;margin-top:12px;max-width:72ch}
.empty{color:var(--faint);font-size:var(--t-body);padding:12px 0}
/* the page's closing strip, in the terminal's disclaimer grammar: the claim
   that must never be missed on its own line, then a row of links. app.html's
   .fnlinks rule verbatim — inline links in a sentence ran together into one
   unreadable string once the "·" separators came out. */
.foot{color:var(--mute);font-size:var(--t-ui);font-weight:500;line-height:1.6;margin:22px 0 0;max-width:86ch}
.foot b{color:var(--ink2);font-weight:600}
.fnlinks{margin-top:9px;display:flex;flex-wrap:wrap;gap:6px 16px}
.fnlinks a{color:var(--ink2);text-decoration:none;border-bottom:1px solid var(--line3);
  padding-block:4px;font-size:var(--t-lab)}
.fnlinks a:hover{color:var(--ink);border-bottom-color:var(--ink);text-decoration:none}
.grid-2{display:grid;grid-template-columns:minmax(0,1fr) 316px;gap:14px 24px;align-items:start}
/* min-width:0 all the way down to the scroll box, or the table never scrolls.
   A grid/flex item's automatic minimum size is its MIN-CONTENT width, so a
   7-column nowrap board propagated 526px up through .tblwrap, the card and the
   track, and pushed the whole 375px document to 569px — taking the nav and the
   ticker sideways with it. The overflow-x:auto box can only do its job if its
   ancestors are allowed to be narrower than their content. */
.grid-2>*,.card,.tblwrap{min-width:0}

/* ————— cross-document transitions —————
   The chrome is IDENTICAL on every tab, so name it and the browser carries the
   same pixels across the navigation instead of repainting them: the nav, the
   tab strip, the ticker and the status bar hold still and only the page body
   cross-fades. Chrome/Edge honour this; everywhere else the navigation is what
   it always was. */
@view-transition{navigation:auto}
/* Naming the chrome lifts it OUT of the root snapshot, so the browser carries
   those two elements across the navigation as themselves — they hold still —
   and the root cross-fade is left with the page content alone. `main` is
   deliberately NOT named: it is a 700px scrolling column on one tab and a
   fixed-viewport instrument frame on /terminal, and morphing between two
   sizes that different reads as a stretch, not a transition. app.html carries
   these same three rules so the terminal is inside the effect, not outside it. */
.nav{view-transition-name:tx-nav}
.statusbar{view-transition-name:tx-statusbar}
::view-transition-old(root){animation:txOut .12s linear both}
::view-transition-new(root){animation:txIn .2s cubic-bezier(.22,1,.36,1) both}
@keyframes txOut{to{opacity:0}}
@keyframes txIn{from{opacity:0}}
@media(prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}

/* ————— responsive ————— */
@media(max-width:900px){
  /* minmax(0,1fr), never 1fr — see the min-width:0 note above */
  .grid-2{grid-template-columns:minmax(0,1fr)}
  .strip{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .strip>div:nth-child(odd){border-left:0}
  .strip>div{border-top:1px solid var(--line)}
}
@media(max-width:640px){
  .nav-in{padding:0 14px;gap:10px}
  .brand small{display:none}
  .brand img{width:32px;height:36px}
  .net-chip{font-size:0;padding:4px 8px}
  .net-chip::before{content:"TESTNET";font-size:var(--t-ui)}
  .stat span:last-child{display:none}
  .vtabs{padding:0 14px}
  .vtabs a{padding:0 12px}
  .ticker-in,.statusbar-in{padding:0 14px}
  .wrap{padding:0 14px}
  .card-pad{padding:12px 14px}
  .strip>div{padding:10px 14px 10px}
  /* 23 and 21.5 are both members of the terminal's literal display band
     (21.5 / 23 / 26 / 29 / 32); 19px was a fresh size with no job no existing
     step does, which is exactly the drift the seven-token scale exists to stop */
  .strip .v{font-size:23px}
  .strip .v.sm{font-size:21.5px}
  /* the status strip was an unsignaled h-scroller on a phone with the ONLY
     theme control hidden off-right — drop the cells a phone reader never
     needs (chain id, market count, surface name) and the essentials fit.
     Selector list mirrors app.html's so the two bars shed the same cells;
     the nth-child(10) separator goes with the name it preceded, or a
     dangling "·" is left hanging before the theme toggle. */
  .statusbar-in{gap:7px;font-size:var(--t-lab)}
  #sbVersion,
  .statusbar-in>.sb-item:nth-child(3),.statusbar-in>.sb-sep:nth-child(4),
  .statusbar-in>.sb-item:nth-child(5),.statusbar-in>.sb-sep:nth-child(6),
  .statusbar-in>.sb-sep:nth-child(10){display:none}
  /* touch floor: these are the controls a thumb hunts */
  .ttab{min-height:40px}
  .sb-theme{min-height:40px}
  .vtabs a{min-height:44px}
  /* THE SPEC LIST STACKS rather than squeezing. Its label column is a fixed
     210px, which of a 317px box left ~60px for the note and the value — every
     note broke one word per line ("collateral > 0 / at block / 0x2c451b6 · /
     11 house / dropped"). A label/note/value row is a list on a phone, not a
     table, so it stops pretending to be one. */
  .spec,.spec tbody,.spec tr,.spec td{display:block;width:auto}
  .spec tr{padding:10px 0;border-bottom:1px solid var(--line)}
  .spec tr:last-child{border-bottom:0}
  .spec td{border-bottom:0;padding:0}
  .spec td:first-child{width:auto;margin-bottom:4px}
  .spec td.v{text-align:left;margin-top:5px;font-size:var(--t-md)}
}