/* ═══════════════════════════════════════════════════════════════════════════
   THE SLATE — design system
   ───────────────────────────────────────────────────────────────────────────
   A betting shop after hours. Two materials, and the split between them is
   load-bearing rather than decorative:

     THE BOARD  — dark, chalk-lettered, condensed. Everything that is still
                  moving lives here: prices, the field, the clock.
     THE PAPER  — warm receipt stock, monospaced, printed. Everything that has
                  been committed lives here: your slip, a settled result, a
                  claim. Once it is on paper, it is a record.

   Single-theme on purpose. A betting slip does not have a dark mode.
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Courier+Prime:wght@400;700&family=Archivo:wght@500;600;700;800&display=swap');

:root{
  --desk:#141d1c; --desk2:#1b2725; --felt:#0f1716; --felt2:#16231f;
  --chalk:#e8e4d8; --chalk-dim:#8b968f; --rule:#2c3b38; --rule-soft:#213230;

  --paper:#f1ece0; --paper2:#e6e0d0; --paper3:#dcd5c2;
  --ink:#1e1b16; --ink-dim:#6d665a; --ink-faint:#a29a8a;

  --stamp:#c0342a; --teal:#16a08b; --gold:#d99b1f;
  --up:#1d8a5e; --dn:#c0342a; --up-chalk:#3fc98c; --dn-chalk:#f2685c;

  --bronze:#b07a42; --silver:#9aa7ac; --gold-t:#d99b1f; --diamond:#4bbfd4;

  --disp:'Oswald',system-ui,sans-serif;
  --mono:'Courier Prime',ui-monospace,'SFMono-Regular',monospace;
  --ui:'Archivo',system-ui,-apple-system,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* The UA's [hidden]{display:none} is a user-agent rule, so ANY author rule that
   sets display — and this sheet sets display:flex on a dozen things — silently
   beats it. Without this line the `hidden` attribute looks like it works in the
   DOM and does nothing on screen, which is exactly how the prototype held-
   balance picker stayed visible next to a connected wallet. */
[hidden]{display:none!important}
body{
  background:var(--desk);
  background-image:radial-gradient(85% 55% at 50% -10%,#25352f 0%,transparent 62%);
  background-attachment:fixed;
  color:var(--chalk);font-family:var(--ui);font-weight:600;line-height:1.45;
  min-height:100dvh;overflow-x:hidden;-webkit-font-smoothing:antialiased;
}

/* ── type ────────────────────────────────────────────────────────────────*/
.num{font-family:var(--mono);font-weight:700;font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--disp);font-weight:500;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--chalk-dim)}
h1,h2,h3{font-family:var(--disp);font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  text-wrap:balance}
h1{font-size:clamp(26px,4.5vw,38px)} h2{font-size:19px} h3{font-size:14px}
.up{color:var(--up-chalk)} .dn{color:var(--dn-chalk)}
a{color:var(--teal)}

/* ── shop sign + nav ─────────────────────────────────────────────────────*/
.sign{border-bottom:2px solid var(--rule);background:var(--felt);padding:0 20px;
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;position:sticky;top:0;z-index:70;
  backdrop-filter:blur(10px)}
.mark{font-family:var(--disp);font-weight:700;font-size:21px;letter-spacing:.07em;
  text-transform:uppercase;text-decoration:none;color:var(--chalk);padding:14px 0;white-space:nowrap}
.mark i{font-style:normal;color:var(--gold)}
.nav{display:flex;gap:2px}
.nav a{font-family:var(--disp);font-weight:500;font-size:13px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--chalk-dim);text-decoration:none;padding:16px 13px;
  border-bottom:2px solid transparent;margin-bottom:-2px}
.nav a:hover{color:var(--chalk)}
.nav a.on{color:var(--gold);border-bottom-color:var(--gold)}
.sign .sp{flex:1}
.ticker-row{display:flex;gap:22px;flex-wrap:wrap;padding:9px 0}
.ti{line-height:1.15}
.ti b{display:block;font-family:var(--mono);font-size:15px;font-weight:700;color:var(--chalk)}
.ti b.live{color:var(--gold)}
.ti b.stale{color:var(--chalk-dim)}

/* ── wallet control ──────────────────────────────────────────────────────
   Chalk furniture, not a crypto widget. It sits in the sign next to the
   clock because that is where the other facts about "right now" live. The
   DEMO chip uses the same shape as the connected chip on purpose: the
   control is always present and always readable, and the only thing that
   changes between a prototype and a live deployment is what it says. */
.wallet{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:9px 0;position:relative}
.wbtn{font-family:var(--disp);font-weight:600;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;padding:8px 14px;border-radius:3px;cursor:pointer;
  border:1px solid var(--gold);background:var(--gold);color:var(--felt);
  text-decoration:none;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.wbtn:hover:not(:disabled){filter:brightness(1.1)}
.wbtn:disabled{opacity:.55;cursor:progress}
.wbtn.ghost{background:transparent;color:var(--chalk-dim);border-color:var(--rule)}
.wbtn.ghost:hover{color:var(--chalk);border-color:var(--chalk-dim)}
.wbtn.warn{background:var(--stamp);border-color:var(--stamp);color:#fff}
.wchip{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--chalk);
  border:1px solid var(--rule);border-radius:3px;padding:6px 10px;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.wchip.demo{font-family:var(--disp);font-size:11px;letter-spacing:.15em;text-transform:uppercase;
  color:var(--gold);border-color:var(--gold);background:rgba(217,155,31,.09);cursor:help}
.wchip .wbal{color:var(--gold);font-weight:700}
.wdot{width:6px;height:6px;border-radius:99px;background:var(--up-chalk);flex:0 0 auto}
.wnote{position:absolute;top:100%;right:0;z-index:90;max-width:min(320px,78vw);
  font-family:var(--ui);font-size:11px;font-weight:600;line-height:1.5;color:var(--chalk);
  background:var(--desk2);border:1px solid var(--rule);border-left:3px solid var(--gold);
  border-radius:3px;padding:8px 11px;box-shadow:0 10px 26px rgba(0,0,0,.5)}

.wrap{max-width:1280px;margin:0 auto;padding:22px 20px 56px}
.grid2{display:grid;grid-template-columns:1fr 384px;gap:26px;align-items:start}
/* Grid items default to min-width:auto, so a column can never be narrower than
   its widest content — and the widest content here is a hundred-row table full
   of nowrap cells. That floor is inherited straight past .tbl-scroll, which is
   why the board was pushing the whole page sideways on a phone instead of
   scrolling inside its own panel. Letting the columns shrink is what lets the
   scroller do the job it was already set up to do. */
.grid2>*,.two>*{min-width:0}

/* ── the board (dark surface) ────────────────────────────────────────────*/
.panel{background:var(--felt);border:2px solid var(--rule);border-radius:4px;
  box-shadow:inset 0 0 60px rgba(0,0,0,.4)}
.panel-h{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:15px 20px 13px;border-bottom:2px solid var(--rule)}
.panel-b{padding:6px 20px 18px}
.panel-b.flush{padding:0}

.tabs{display:flex;gap:3px;flex-wrap:wrap}
.tabs button{font-family:var(--disp);font-weight:500;font-size:12px;letter-spacing:.11em;
  text-transform:uppercase;padding:6px 12px;background:transparent;color:var(--chalk-dim);
  border:1px solid transparent;border-radius:3px;cursor:pointer}
.tabs button:hover{color:var(--chalk)}
.tabs button.on{color:var(--felt);background:var(--gold);border-color:var(--gold)}

/* ── tables ──────────────────────────────────────────────────────────────*/
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse}
thead th{font-family:var(--disp);font-weight:500;font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--chalk-dim);text-align:right;padding:10px 9px;
  border-bottom:1px solid var(--rule);white-space:nowrap}
thead th:first-child{text-align:left;padding-left:20px}
thead th:last-child{padding-right:20px}
tbody td{padding:11px 9px;text-align:right;border-bottom:1px dashed var(--rule-soft);
  font-family:var(--mono);font-size:13.5px;font-weight:700;white-space:nowrap}
tbody td:first-child{text-align:left;padding-left:20px}
tbody td:last-child{padding-right:20px}
tbody tr.pick{cursor:pointer;transition:background .12s}
tbody tr.pick:hover{background:rgba(232,228,216,.045)}
tbody tr.on{background:rgba(22,160,139,.15)}
tbody tr.dear{opacity:.34}
tbody tr.dear td:first-child{cursor:not-allowed}

.runner{display:flex;align-items:center;gap:11px}
.pin{width:22px;height:22px;border:1.5px solid var(--rule);border-radius:3px;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-size:12px;color:transparent}
tr.on .pin{background:var(--teal);border-color:var(--teal);color:#fff}
.rname{line-height:1.2;min-width:0}
.rname b{font-family:var(--disp);font-weight:600;font-size:15.5px;letter-spacing:.04em;
  display:block;color:var(--chalk)}
.rname span{font-family:var(--ui);font-size:11px;font-weight:600;color:var(--chalk-dim);
  display:block;overflow:hidden;text-overflow:ellipsis}
td.sal{color:var(--gold)}
td.up{color:var(--up-chalk)} td.dn{color:var(--dn-chalk)}
.muted{color:var(--chalk-dim)}

/* chart / scan links */
.links{display:inline-flex;gap:5px;align-items:center}
.ilink{width:25px;height:25px;border:1px solid var(--rule);border-radius:3px;
  display:inline-flex;align-items:center;justify-content:center;color:var(--chalk-dim);
  text-decoration:none;transition:border-color .14s,color .14s,background .14s}
.ilink:hover{color:var(--gold);border-color:var(--gold);background:rgba(217,155,31,.1)}
.ilink svg{width:13px;height:13px;display:block}

/* sparkline */
canvas.spark{display:block;width:66px;height:20px;margin-left:auto}

/* depth bar — liquidity as a physical quantity, not a number to compare */
.depth{display:flex;align-items:center;gap:7px;justify-content:flex-end}
.depth i{display:block;height:5px;border-radius:99px;background:var(--teal);opacity:.55;min-width:2px}

/* ── the paper ───────────────────────────────────────────────────────────*/
.paper{background:var(--paper);color:var(--ink);border-radius:2px;position:relative;
  box-shadow:0 14px 38px rgba(0,0,0,.5),0 2px 0 rgba(0,0,0,.28);padding-bottom:4px}
.paper::after{content:'';position:absolute;left:0;right:0;bottom:-7px;height:8px;
  background-image:radial-gradient(circle at 6px 0,transparent 5px,var(--paper) 5.5px);
  background-size:12px 8px}
.paper-h{padding:17px 20px 12px;border-bottom:2px dashed var(--paper3);text-align:center;
  position:relative}
.paper-h .co{font-family:var(--disp);font-weight:700;font-size:16px;letter-spacing:.3em;
  text-transform:uppercase}
.paper-h .sub{font-family:var(--mono);font-size:10.5px;color:var(--ink-dim);margin-top:3px}
.paper-b{padding:14px 20px 6px;font-family:var(--mono);font-size:12.5px}
.paper-f{padding:14px 20px 18px}

.stamp{position:absolute;top:13px;right:12px;transform:rotate(-11deg);
  border:2.5px solid var(--stamp);color:var(--stamp);font-family:var(--disp);font-weight:700;
  font-size:12.5px;letter-spacing:.15em;padding:3px 9px;border-radius:3px;opacity:.8;
  pointer-events:none}
.stamp.ok{border-color:var(--up);color:var(--up)}
.stamp.void{border-color:var(--ink-faint);color:var(--ink-faint)}

.legs{min-height:140px}
.leg{display:flex;justify-content:space-between;gap:10px;padding:7px 0;
  border-bottom:1px dotted var(--paper3);animation:type .2s ease-out}
@keyframes type{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
.leg .lt{font-weight:700;letter-spacing:.03em;flex:1;display:flex;align-items:center;gap:5px}
.leg .lt a{color:inherit;text-decoration:none;border-bottom:1px dotted var(--ink-faint)}
.leg .lt a:hover{color:var(--stamp);border-bottom-color:var(--stamp)}
.leg .lm{color:var(--ink-dim);width:62px;text-align:right}
.leg .lc{font-weight:700;width:62px;text-align:right}
.leg.void{color:var(--ink-faint)}
.leg.void .lt a{text-decoration:line-through;border:none}
.leg.void .lc{color:var(--ink-faint)}
.voidtag{font-size:8.5px;letter-spacing:.1em;background:var(--ink-faint);color:var(--paper);
  padding:1px 4px;border-radius:2px}
/* marks a leg whose raw move exceeded the +/-100% per-token score cap */
.captag{font-size:8.5px;letter-spacing:.1em;background:var(--gold);color:var(--ink);
  padding:1px 4px;border-radius:2px;cursor:help}
.blank{color:var(--ink-faint);padding:7px 0;border-bottom:1px dotted var(--paper2);
  display:flex;justify-content:space-between}

.sums{margin-top:10px;padding-top:11px;border-top:2px solid var(--ink)}
.sr{display:flex;justify-content:space-between;gap:10px;padding:4px 0}
.sr.big{font-size:15px;font-weight:700;padding-top:9px;margin-top:6px;
  border-top:1px dashed var(--paper3)}
.sr.neg .v{color:var(--stamp)}
.sr .v{font-weight:700}
.band{background:var(--paper2);margin:11px -20px 0;padding:11px 20px;
  border-top:1px dashed var(--paper3);border-bottom:1px dashed var(--paper3)}
.band .br{display:flex;justify-content:space-between;gap:10px;padding:2px 0}
.note{font-family:var(--ui);font-size:10.5px;font-weight:600;color:var(--ink-dim);
  margin-top:6px;line-height:1.5}

.btn{width:100%;font-family:var(--disp);font-weight:700;font-size:16px;letter-spacing:.13em;
  text-transform:uppercase;padding:15px;border:none;border-radius:2px;cursor:pointer;
  background:var(--stamp);color:#fff;transition:filter .15s,transform .07s}
.btn:hover:not(:disabled){filter:brightness(1.09)}
.btn:active:not(:disabled){transform:translateY(2px)}
.btn:disabled{background:var(--paper3);color:var(--ink-faint);cursor:not-allowed}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--paper3)}
.fine{font-family:var(--ui);font-size:10.5px;font-weight:600;color:var(--ink-dim);
  line-height:1.5;margin-top:11px;text-align:center}
.fine a{color:var(--ink);text-decoration:none;border-bottom:1px dotted var(--ink-faint)}

/* ── transaction states (on the paper) ───────────────────────────────────
   A pending signature and a failed entry are both RECORDS, so they print on
   the paper in the paper's own voice rather than appearing as a browser
   alert. Errors carry a sentence, never a revert string — see explain() in
   chain.js, which is where the translation actually happens. */
.txbar{font-family:var(--mono);font-size:11.5px;line-height:1.5;padding:9px 11px;
  border-radius:2px;margin-bottom:11px;border-left:3px solid var(--ink-faint);
  background:var(--paper2);color:var(--ink-dim);display:flex;gap:9px;align-items:flex-start}
.txbar b{font-family:var(--disp);font-weight:700;font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink);display:block;margin-bottom:2px}
.txbar .txmsg{flex:1;min-width:0;overflow-wrap:anywhere}
.txbar.pending{border-left-color:var(--gold);background:rgba(217,155,31,.12)}
.txbar.pending b{color:var(--gold-t)}
.txbar.bad{border-left-color:var(--stamp);background:rgba(192,52,42,.1)}
.txbar.bad b{color:var(--stamp)}
.txbar.good{border-left-color:var(--up);background:rgba(29,138,94,.11)}
.txbar.good b{color:var(--up)}
.txbar a{color:inherit;text-decoration:none;border-bottom:1px dotted currentColor}
/* the one moving part: a printer working, not a spinner */
.txdots{display:inline-block;width:1.6em}
.txdots::after{content:'';animation:txd 1.2s steps(4,end) infinite}
@keyframes txd{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}

/* the live-balance line that replaces the prototype picker once connected */
.walletline{display:flex;justify-content:space-between;gap:10px;align-items:baseline;
  font-family:var(--ui);font-size:10px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-faint);margin-top:4px}
.walletline a{color:var(--ink-dim)}

/* held-balance selector */
.held{display:flex;gap:4px;margin-top:8px}
.held button{flex:1;font-family:var(--mono);font-size:10px;font-weight:700;padding:6px 2px;
  border:1px solid var(--paper3);background:transparent;color:var(--ink-dim);
  border-radius:2px;cursor:pointer}
.held button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* tier chip */
.tier{display:inline-flex;align-items:center;gap:5px;font-family:var(--disp);font-weight:600;
  font-size:11px;letter-spacing:.11em;text-transform:uppercase;padding:3px 9px;border-radius:99px;
  border:1px solid currentColor}
.tier.bronze{color:var(--bronze)} .tier.silver{color:var(--silver)}
.tier.gold{color:var(--gold-t)} .tier.diamond{color:var(--diamond)}
.tier.dim{color:var(--chalk-dim)}

/* ── stat cards ──────────────────────────────────────────────────────────*/
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--rule);border:2px solid var(--rule);border-radius:4px;overflow:hidden}
.stat{background:var(--felt);padding:14px 16px}
.stat .k{font-family:var(--disp);font-weight:500;font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--chalk-dim)}
.stat .v{font-family:var(--mono);font-weight:700;font-size:22px;margin-top:3px;letter-spacing:-.02em}
.stat .s{font-family:var(--ui);font-size:11px;font-weight:600;color:var(--chalk-dim);margin-top:2px}

/* ── how-it-works strip ──────────────────────────────────────────────────*/
.howto{margin-top:22px;display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:1px;background:var(--rule);border:2px solid var(--rule);border-radius:4px;overflow:hidden}
.howto div{background:var(--felt);padding:14px 16px}
.howto b{display:block;font-family:var(--disp);font-weight:600;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold);margin-bottom:4px}
.howto span{font-size:12px;color:var(--chalk-dim);font-weight:600;line-height:1.55}

/* ── misc ────────────────────────────────────────────────────────────────*/
.empty{padding:46px 20px;text-align:center;color:var(--chalk-dim)}
.empty b{display:block;font-family:var(--disp);font-size:17px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--chalk);margin-bottom:6px}
.pill{font-family:var(--disp);font-weight:600;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;padding:2px 8px;border-radius:99px}
.pill.win{background:rgba(29,138,94,.2);color:var(--up-chalk)}
.pill.loss{background:rgba(192,52,42,.18);color:var(--dn-chalk)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
}
@media (max-width:980px){
  .grid2{grid-template-columns:1fr;gap:20px}
  .slipcol{position:static!important;order:-1}
}
@media (max-width:640px){
  .wrap{padding:16px 13px 44px}
  .sign{padding:0 13px;gap:10px}
  .nav a{padding:12px 9px;font-size:12px}
  .ticker-row{gap:15px}
  thead th:first-child,tbody td:first-child{padding-left:13px}
  thead th:last-child,tbody td:last-child{padding-right:13px}
}