/* Whale Tail shared shell (v2 test pages, 2026-10-25).
   Loaded AFTER each page's own <style>: it redefines the colour tokens every page already uses (so each page's
   own components take the new palette without touching its code), sets the type, and styles the shared rail,
   live tape, footer and phone tabs that wt-shell.js adds.
   One job per colour: orange = act/scream (CTAs, breach, bounty, fills), cyan = verified only, mint = money
   (solid = banked, dashed = not yet), coral = loss. */
/* fonts served from our own server: the site's CSP allows fonts from 'self' only, so the Google and Fontshare
   imports never loaded (2026-10-26). Big Shoulders Display and JetBrains Mono are OFL variable fonts cut to Latin;
   Satoshi is self-hosted under the Fontshare licence (fonts/Satoshi-LICENSE.txt). */
@font-face{font-family:"Big Shoulders Display";src:url("fonts/BigShouldersDisplay.woff") format("woff");font-weight:100 900;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("fonts/JetBrainsMono.woff") format("woff");font-weight:100 800;font-display:swap}
@font-face{font-family:"Satoshi";src:url("fonts/Satoshi-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Satoshi";src:url("fonts/Satoshi-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Satoshi";src:url("fonts/Satoshi-Bold.woff2") format("woff2");font-weight:600 700;font-display:swap}
@font-face{font-family:"Satoshi";src:url("fonts/Satoshi-Black.woff2") format("woff2");font-weight:800 900;font-display:swap}

:root{
  --bg:#060E1A; --panel:#0C1828; --panel-2:#0A1422; --line:#1A2A40; --line-2:#26405C;
  --ink:#E8F6FF; --ink-2:#9DB1C6; --ink-3:#62788F;
  --scream:#FF5A1F; --scream-2:#FF7A45; --scream-deep:#A8340C;
  --verify:#4FD8F0; --money:#2BE38B; --loss:#FF4D6A;
  --c-sol-a:#9945FF; --c-sol-b:#14F195; --c-bnb:#F3BA2F; --c-hood:#C6F432;
  --f-display:"Big Shoulders Display",Impact,"Arial Narrow",sans-serif;
  --f-body:"Satoshi",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
  --rail-w:224px;

  /* the tokens every existing page already uses, remapped */
  --surface:#0A1422; --shelf:#0A1422; --deep:#08111E; --abyss:var(--bg);
  --card:var(--panel); --card-solid:var(--panel); --card-2:var(--panel-2); --card-2-solid:var(--panel-2);
  --reef:var(--line); --edge:var(--line-2); --hair:var(--line);
  --foam:var(--ink); --krill:var(--ink-2); --faint:var(--ink-3);
  --tail:var(--scream); --tail-2:var(--scream-2); --sonar:var(--verify);
  --ember:var(--scream); --ember-2:var(--scream-2); --ember-hot:var(--scream);
  --up:var(--money); --down:var(--loss); --rh:var(--c-hood);
  --glow:rgba(255,90,31,.14); --halo:rgba(255,90,31,.30); --contour:transparent;
  --ember-glow:rgba(255,90,31,.14); --ember-halo:rgba(255,90,31,.30);
  --mono:var(--f-mono); --sans:var(--f-body); --display:var(--f-display); --text:var(--f-body); --serif:var(--f-body);
  color-scheme:dark;
}

html,body{background:var(--bg)!important;color:var(--ink);font-family:var(--f-body)!important;font-size:16px}
body{background-image:none!important}
a{color:var(--ink)}
a:hover{color:var(--scream-2)}
::selection{background:rgba(255,90,31,.35)}

/* type: display for headlines and giant numbers, mono for data */
h1,h2,.hero h1,.wt-display{font-family:var(--f-display)!important;font-weight:900;text-transform:uppercase;letter-spacing:.4px;line-height:.98}
h1{font-size:clamp(34px,5.2vw,64px)}
h3{font-family:var(--f-body);font-weight:700}
.mono,code,.wt-mono{font-family:var(--f-mono)!important}
.hero h1 .glow,.glow{background:none!important;-webkit-text-fill-color:var(--ink)!important;color:var(--ink)!important}
.hero h1 .rh{color:var(--ink)!important}
.brand b{background:none!important;-webkit-text-fill-color:var(--ink)!important;color:var(--ink)!important}

/* buttons: one loud action, everything else quiet. Never a cyan CTA. */
.btn{border-radius:10px!important;border:1px solid var(--line-2)!important;background:var(--panel)!important;color:var(--ink)!important;box-shadow:none!important;font-weight:700}
.btn:hover{border-color:var(--ink-2)!important}
.btn.primary,.btn.ember,.btn-primary,.wt-cta{background:var(--scream)!important;color:#1A0700!important;border:0!important;box-shadow:0 3px 0 var(--scream-deep)!important;font-weight:900}
.btn.primary:hover,.btn.ember:hover,.btn-primary:hover,.wt-cta:hover{background:var(--scream-2)!important;color:#1A0700!important;text-decoration:none}
.btn.ghost{background:transparent!important}
.btn.outline,.wt-outline{background:transparent!important;border:2px solid var(--ink)!important;color:var(--ink)!important}
input:focus,textarea:focus,select:focus,.search:focus,.in:focus{border-color:var(--ink-2)!important;outline:none}
.tabs button.on,.seg button.on,.tab.on,[aria-selected="true"]{background:var(--line)!important;color:var(--ink)!important}

/* surfaces: flat panels, no glass, no glow */
.coin,.card,.stat,.panel,.box,.twin,.bounty{background:var(--panel)!important;border-color:var(--line)!important;backdrop-filter:none!important;box-shadow:none!important}
.coin:hover{border-color:var(--line-2)!important}
.top,header.top,body>header{background:rgba(6,14,26,.96)!important;backdrop-filter:none!important;border-bottom:1px solid var(--line)!important}

/* meaning classes */
.wt-verified{color:var(--verify)!important}
.wt-check{display:inline-flex;align-items:center;gap:6px;color:var(--verify);font-family:var(--f-mono);font-size:13px}
.wt-check:before{content:"";width:14px;height:14px;border-radius:50%;border:2px solid var(--verify);box-sizing:border-box;
  background:radial-gradient(circle at 50% 50%,var(--verify) 0 3px,transparent 3.5px)}
.wt-banked{color:var(--money)!important;font-family:var(--f-mono)}
.wt-unreal{color:var(--money)!important;font-family:var(--f-mono);border:1px dashed var(--money);border-radius:6px;padding:0 5px}
.wt-loss{color:var(--loss)!important;font-family:var(--f-mono)}
.wt-scream{color:var(--scream)!important}
.wt-feerule{display:block;margin-top:6px;font-size:12px;color:var(--ink-2);font-family:var(--f-body)}
.wt-feerule b{color:var(--ink)}

/* chain glyphs: stripes only, never buttons */
.wt-chain{display:inline-block;width:4px;align-self:stretch;border-radius:2px;flex:none}
.wt-chain.sol{background:linear-gradient(180deg,var(--c-sol-a),var(--c-sol-b))}
.wt-chain.bnb{background:var(--c-bnb)} .wt-chain.hood,.wt-chain.rh{background:var(--c-hood)}

/* ── shell: left rail ─────────────────────────────────────────────── */
.wt-rail{position:fixed;inset:0 auto 0 0;width:var(--rail-w);background:var(--panel-2);border-right:1px solid var(--line);
  display:flex;flex-direction:column;z-index:60;padding:16px 12px}
.wt-rail .wt-logo{display:flex;align-items:center;gap:10px;padding:4px 8px 18px;color:var(--ink);text-decoration:none}
.wt-rail .wt-logo img{width:30px;height:30px;border-radius:8px}
.wt-rail .wt-logo span{font-family:var(--f-display);font-weight:900;font-size:22px;text-transform:uppercase;letter-spacing:.6px}
.wt-rail h6{margin:14px 8px 6px;font:700 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.wt-rail a.wt-nav{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;color:var(--ink-2);font-weight:600;font-size:15px;text-decoration:none}
.wt-rail a.wt-nav:hover{background:var(--panel);color:var(--ink)}
.wt-rail a.wt-nav.on{background:var(--panel);color:var(--ink);box-shadow:inset 3px 0 0 var(--scream)}
.wt-rail a.wt-nav svg{width:18px;height:18px;flex:none;opacity:.9}
.wt-rail .wt-grow{flex:1}
.wt-rail .wt-cta{display:flex;justify-content:center;padding:13px 14px;border-radius:12px;font-size:16px;text-transform:uppercase;font-family:var(--f-display);letter-spacing:.6px;text-decoration:none}
.wt-rail .wt-railnote{margin:8px 6px 0;font-size:11.5px;color:var(--ink-3);line-height:1.35}

@media (min-width:1024px){
  body.wt-shelled{padding-left:var(--rail-w)!important}
  body.wt-shelled .top .nav,body.wt-shelled>header nav.nav,body.wt-shelled .nav-links{display:none!important}
  body.wt-shelled .top .brand,body.wt-shelled>header .brand,body.wt-shelled>nav.nav .brand{display:none!important}
}
@media (max-width:1023px){ .wt-rail{display:none} }

/* ── live tape (copy fills + launches + breaches), under the top bar ─── */
.wt-tape{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:0;height:38px;overflow:hidden;
  background:#08111E;border-bottom:1px solid var(--line);font:500 13px/1 var(--f-mono);color:var(--ink-2)}
.wt-tape .wt-tape-tag{flex:none;height:100%;display:flex;align-items:center;gap:7px;padding:0 12px;background:var(--panel);border-right:1px solid var(--line);color:var(--ink);font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:11px}
.wt-tape .wt-tape-tag i{width:7px;height:7px;border-radius:50%;background:var(--scream);box-shadow:0 0 0 0 rgba(255,90,31,.6);animation:wtPulse 1.6s infinite}
.wt-tape .wt-tape-clip{flex:1;min-width:0;height:100%;overflow:hidden;display:flex;align-items:center}
.wt-tape .wt-tape-track{display:flex;gap:28px;white-space:nowrap;padding-left:18px;animation:wtTape 60s linear infinite}
.wt-tape:hover .wt-tape-track{animation-play-state:paused}
.wt-tape a{color:var(--ink-2);text-decoration:none;display:inline-flex;align-items:center;gap:7px}
.wt-tape a:hover{color:var(--ink)}
.wt-tape .k-fill b{color:var(--scream)} .wt-tape .k-launch b{color:var(--ink)} .wt-tape .k-breach b{color:var(--scream)}
.wt-tape .wt-lag{color:var(--ink-3);border:0;background:none;padding:0}
@keyframes wtTape{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes wtPulse{0%{box-shadow:0 0 0 0 rgba(255,90,31,.55)}70%{box-shadow:0 0 0 7px rgba(255,90,31,0)}100%{box-shadow:0 0 0 0 rgba(255,90,31,0)}}
@media (prefers-reduced-motion:reduce){.wt-tape .wt-tape-track{animation:none}.wt-tape .wt-tape-tag i{animation:none}}

/* ── footer + risk line (same everywhere) ────────────────────────── */
.wt-foot{border-top:1px solid var(--line);margin-top:48px;padding:26px 16px 96px;color:var(--ink-3);font-size:13.5px}
.wt-foot .wt-foot-in{max-width:1180px;margin:0 auto;display:grid;gap:12px}
.wt-foot nav{display:flex;flex-wrap:wrap;gap:6px 18px}
.wt-foot nav a{color:var(--ink-2);text-decoration:none} .wt-foot nav a:hover{color:var(--ink)}
.wt-foot .wt-risk{color:var(--ink-3);max-width:860px;line-height:1.5}
body.wt-shelled .foot,body.wt-shelled footer.foot,body.wt-shelled>footer:not(.wt-foot){display:none!important}

/* ── phone: bottom tabs, Copy + Launch in the middle ─────────────── */
.wt-tabs{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;grid-template-columns:repeat(5,1fr);
  background:rgba(8,17,30,.98);border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
.wt-tabs a{display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 0;color:var(--ink-3);font:600 11px/1 var(--f-body);text-decoration:none}
.wt-tabs a svg{width:21px;height:21px}
.wt-tabs a.on{color:var(--ink)}
.wt-tabs a.wt-mid{color:#1A0700;background:var(--scream);border-radius:12px;margin:0 3px;box-shadow:0 3px 0 var(--scream-deep);font-weight:900}
@media (max-width:1023px){ .wt-tabs{display:grid} body.wt-shelled{padding-bottom:76px!important} }

/* ── tail-meter: the bonding curve as the logo's tail filling up ─── */
.wt-meter{position:relative;height:10px;border-radius:6px;background:var(--line);overflow:hidden}
.wt-meter>i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,#7A2A0B,var(--scream));border-radius:6px}
.wt-meter.breached>i{background:var(--scream)}
.wt-meter-row{display:flex;align-items:center;gap:8px;font:500 12px/1 var(--f-mono);color:var(--ink-2)}
.wt-meter-row .wt-meter{flex:1}
.wt-tailmark{width:16px;height:16px;flex:none;color:var(--ink-3)}
.wt-meter-row.hot .wt-tailmark{color:var(--scream)}

/* receipts: verified on-chain facts, cyan */
.wt-receipts{display:grid;gap:7px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2)}
.wt-receipts h4{margin:0 0 4px;font:700 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.wt-receipts .r{display:flex;justify-content:space-between;gap:10px;font:500 13px/1.3 var(--f-mono);color:var(--ink-2)}
.wt-receipts .r a{color:var(--verify)}
.wt-receipts .r.no .wt-check{color:var(--ink-3)} .wt-receipts .r.no .wt-check:before{border-color:var(--ink-3);background:none}
.wt-rcount{display:inline-flex;align-items:center;gap:5px;font:600 11.5px/1 var(--f-mono);color:var(--verify)}

/* breach splash */
.wt-breach{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:var(--scream);color:#1A0700;
  font-family:var(--f-display);font-weight:900;text-transform:uppercase;text-align:center;animation:wtBreach 1.2s ease-out forwards;pointer-events:none}
.wt-breach b{display:block;font-size:clamp(56px,12vw,160px);line-height:.9}
.wt-breach span{font-size:clamp(18px,3vw,30px)}
@keyframes wtBreach{0%{clip-path:circle(0% at 50% 100%)}35%{clip-path:circle(150% at 50% 100%)}80%{opacity:1}100%{opacity:0}}

/* old page headers: their link pills stay quiet; only the current page gets the orange outline (Peter, 2026-10-26) */
body.wt-shelled header a.pill{background:transparent!important;border:1px solid var(--line-2)!important;color:var(--ink-2)!important;box-shadow:none!important}
body.wt-shelled header a.pill:hover{color:var(--ink)!important;border-color:var(--ink-2)!important}
body.wt-shelled header a.pill.here,body.wt-shelled header a.pill[aria-current]{border-color:var(--scream)!important;color:var(--ink)!important}

/* display type is for headlines and giant numbers only: small headings inside panels use the body face */
.panel h2,.box h2,.card h2,form h2,.wcard h2,section .panel h3,.box h3{font-family:var(--f-body)!important;text-transform:none;font-weight:800;letter-spacing:0;line-height:1.2}
.panel h2,form h2{font-size:20px}
@media (min-width:1024px){ body.wt-shelled .wrap>header .brand,body.wt-shelled .wrap>header>a:first-child{display:none!important} }

/* phones: a wide table scrolls inside its own box instead of stretching the whole page (Recommended settings had
   two, 397 and 499px wide, which pushed the page to 519px on a 390px screen) */
@media (max-width:640px){
  main table:not(.wt-keep),.wrap table:not(.wt-keep){display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
}
/* section headings: the display face needs size to read, small h2s get a little more room between letters */
h2{letter-spacing:.8px}

/* marketing pages: with the brand and links in the rail, what is left of the old top bar sits on the right */
@media (min-width:1024px){ body.wt-shelled>nav.nav .nav-in{justify-content:flex-end} }