/* ==========================================================================
   tyr — rune terminal
   --------------------------------------------------------------------------
   A war-room at 3am. Near-black ground with a faint grid and scanlines,
   hairline panels with lime corner ticks, runes as section glyphs. One
   monospaced body face (JetBrains Mono), Chakra Petch for the few display
   words. Colour is a signal, never decoration:
     lime    = armed, in range, done, the primary action
     cyan    = live data, values, the price trace
     magenta = danger, errors, out of range, what signs for real
     amber   = dry run, pending, waiting
   Rooms live on a function-key bar along the bottom (1..5); networks are
   keycaps in the header. Corners are square.

   Every id and class the scripts reach for is kept. Names that look odd for
   what they now draw (.sum, .tabs, .head, .ticket, .blotter) are hooks.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=Cinzel:wght@400;600;800&family=JetBrains+Mono:wght@400;500;600;700&family=Noto+Sans+Runic&display=swap');

:root{
  --bg:#06080a;
  --bg2:#040506;
  --sheet:#0b0f12;
  --panel:#0b0f12;
  --panel2:#0f1519;
  --ink:#0f1519;
  --line:#1c252b;
  --line2:#2c3a42;
  --fg:#e9f1ec;
  --dim:#8a9a91;
  --mute:#74847b;
  --deco:#4d5b54;
  --brand:#c6ff3d;          /* lime: armed */
  --brand-ink:#06080a;
  --cyan:#3de0ff;
  --mag:#ff3d9a;
  --c1:#c6ff3d;
  --c2:#3de0ff;
  --grad:linear-gradient(90deg,var(--c1),var(--c2));
  --glow:0 0 22px rgba(198,255,61,.28);
  --acc:#c6ff3d;            /* good: done, in range, gains */
  --acc2:#3de0ff;           /* numbers and live values */
  --warn:#ffb020;
  --bad:#ff3d9a;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --disp:"Chakra Petch","JetBrains Mono",ui-monospace,monospace;
  --rune:"Noto Sans Runic","Segoe UI Historic",serif;
  --r:0px;
  --rail:0px;
  --fbar:36px;
}
*{box-sizing:border-box}
html{color-scheme:dark;background:var(--bg)}
body{margin:0;min-height:100vh;color:var(--fg);font:400 12.5px/1.6 var(--mono);font-variant-numeric:tabular-nums;background:var(--bg);
  -webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:48px 48px;opacity:.35;-webkit-mask-image:radial-gradient(ellipse at 50% 35%,#000 25%,transparent 80%);mask-image:radial-gradient(ellipse at 50% 35%,#000 25%,transparent 80%)}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 1px,transparent 1px 3px)}
a{color:var(--acc2);text-decoration:none;border-bottom:1px solid var(--line2)}
a:hover{color:var(--brand);border-bottom-color:var(--brand)}
b{font-weight:600}
.hidden{display:none!important}
::selection{background:rgba(198,255,61,.25)}
::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-thumb{background:var(--line2)}::-webkit-scrollbar-track{background:transparent}
/* labels: the terminal's eyebrow */
label,.head span,.tile .k,.sum span,.mkt-stats span,table.pos-t th,summary,.vg-name,.strip-lbl b,.tag,.venue,.ident .sec,
.chainsw button,.rail a,button,.tabs button,.badge{font-family:var(--mono);text-transform:uppercase;letter-spacing:.12em}

/* ---- rooms: a function-key bar along the bottom ----------------------------- */
.rail{position:fixed;left:0;right:0;bottom:0;height:var(--fbar);z-index:40;display:flex;flex-direction:row;align-items:stretch;
  background:var(--bg2);border-top:1px solid var(--line2);counter-reset:fk;overflow-x:auto;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail .logo{display:none}
.rail .clock{margin-left:auto;display:flex;align-items:center;gap:14px;padding:0 16px;white-space:nowrap;font:500 10px var(--mono);color:var(--dim)}
.rail .clock b{color:var(--fg);font-weight:500}
.rail a{counter-increment:fk;display:flex;align-items:stretch;height:100%;padding:0;border:0;color:var(--cyan);font-size:11px;font-weight:600;white-space:nowrap}
.rail a::before{content:counter(fk);display:grid;place-items:center;padding:0 8px;color:var(--fg);font:700 11px var(--mono);letter-spacing:0}
.rail a svg{display:none}
.rail a span{display:grid;place-items:center;padding:0 18px 0 10px;background:#101a1f;transition:background .09s}
.rail a:hover{border:0;color:var(--cyan)}
.rail a:hover span{background:#15252c}
.rail a.on span{background:var(--cyan);color:var(--bg);font-weight:700}
/* The same idea in the bar: the tag floats just above the room it names. */
.rail a.soon{position:relative;color:var(--deco);cursor:not-allowed}
.rail a.soon::before{color:var(--deco)}
.rail a.soon span{background:#0c1114;color:var(--deco)}
.rail a.soon:hover span{background:#0c1114}
.rail a.soon span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;line-height:1.1}
.rail a.soon .soon-tag{position:static;transform:none;font-size:7px;letter-spacing:.16em;padding:0 3px;line-height:9px}
@keyframes blink{50%{opacity:0}}
@keyframes pulse{50%{opacity:.25}}

/* ---- top bar ------------------------------------------------------------------ */
.wrap{position:relative;z-index:1;margin:0 auto;padding:0 0 calc(var(--fbar) + 28px)}
.wrap > :not(header){margin-left:16px;margin-right:16px}
header{position:sticky;top:0;z-index:30;display:flex;align-items:stretch;flex-wrap:wrap;min-height:52px;margin:0 0 16px;
  background:rgba(6,8,10,.94);border-bottom:1px solid var(--line2);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
h1{display:none}
.brand{display:flex;align-items:center;gap:12px;padding:0 18px;border-right:1px solid var(--line2)}
.brand i{width:30px;height:30px;flex:none;border-radius:50%;background:#000 url(/img/logo.webp) center/cover no-repeat;
  border:1px solid rgba(224,194,122,.4);box-shadow:0 0 14px rgba(224,194,122,.14)}
.brand b{display:block;font:700 17px/1 var(--disp);letter-spacing:.22em;text-transform:uppercase}
/* beta: a tag beside the name, not part of it -- so it reads as a state
   of the desk rather than a word in its title. */
.brand b em{display:inline-block;vertical-align:3px;margin-left:9px;padding:2px 5px;border:1px solid var(--deco);
  font:700 8px var(--mono);font-style:normal;letter-spacing:.14em;color:var(--mute)}
.brand b::before{content:"ᛏ ";font-family:var(--rune);color:var(--brand);letter-spacing:0;text-shadow:0 0 12px rgba(198,255,61,.45)}
.brand small{display:block;margin-top:4px;font-size:9px;letter-spacing:.12em;color:var(--mute);text-transform:uppercase}
.meta{display:inline-flex;flex-direction:column;justify-content:center;gap:1px;min-height:52px;padding:0 16px;border-left:1px solid var(--line);
  color:var(--dim);font-size:9px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.meta b{color:var(--fg);font-weight:500;font-size:12px;letter-spacing:0;text-transform:none}
/* one row on a desktop: long readouts clip instead of pushing the bar onto two lines */
@media (min-width:1400px){
  header{flex-wrap:nowrap}
  .brand,.meta-chain,.meta.wallet-cell,.badge{flex:none}
  .meta:not(.meta-chain):not(.wallet-cell){min-width:0;flex:0 1 auto}
  .meta:not(.meta-chain):not(.wallet-cell) b{display:block;max-width:220px;overflow:hidden;text-overflow:ellipsis}
}
.meta-chain{padding:0;border-left:0;border-right:1px solid var(--line2);flex-direction:row;align-items:stretch}
.meta-chain + .meta{margin-left:auto}
#m-wallet{display:inline-block;max-width:150px;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;white-space:nowrap}
/* the gas token in dollars, next to the brand: a live number, so it is
   coloured like the other live numbers rather than like a label */
.price-cell{border-left:0;border-right:1px solid var(--line2)}
.price-cell b{color:var(--acc2);font-variant-numeric:tabular-nums}
nav:not(.rail){display:none}
.badge{align-self:center;margin:0 16px 0 12px;order:9;font-size:10px;font-weight:700;color:var(--warn);background:transparent;
  border:1px solid currentColor;padding:4px 8px;white-space:nowrap}
.badge::before{content:"[ "}.badge::after{content:" ]"}

/* chain switch: keycaps that light cyan */
.chainsw{display:flex;align-items:stretch}
.chainsw button{--chain:var(--cyan);display:inline-flex;align-items:center;gap:8px;min-height:52px;padding:0 16px;border:0;border-right:1px solid var(--line);
  background:transparent;color:var(--dim);font:600 11px var(--disp);letter-spacing:.14em;cursor:pointer;white-space:nowrap;transition:color .09s,background .09s}
.chainsw button kbd{font:500 9px var(--mono);letter-spacing:0;border:1px solid var(--line2);padding:1px 4px;color:var(--deco)}
.chainsw button small{font:500 9px var(--mono);letter-spacing:0;padding:1px 4px;border:1px solid var(--line2);color:var(--mute);text-transform:none}
.chainsw button:hover:not(:disabled){color:var(--fg);border-color:var(--line);background:transparent}
/* Not open yet: listed, legible, and refusing the click. The tag sits over
   the name rather than beside it, so the row keeps its rhythm. */
.chainsw button.soon{position:relative;color:var(--deco);cursor:not-allowed;padding-top:12px}
.chainsw button.soon kbd{opacity:.4}
.chainsw button.soon:hover{color:var(--deco)}
.soon-tag{position:absolute;top:7px;left:50%;transform:translateX(-50%);
  font:700 7.5px var(--mono);letter-spacing:.18em;text-transform:uppercase;font-style:normal;
  color:var(--warn);border:1px solid rgba(255,176,32,.35);padding:0 4px;line-height:11px;white-space:nowrap}
.chainsw button:focus-visible{outline:1px solid var(--cyan);outline-offset:-3px}
.chainsw button[aria-checked="true"]{color:var(--bg);background:var(--chain)}
.chainsw button[aria-checked="true"] kbd{border-color:rgba(0,0,0,.35);color:rgba(0,0,0,.6)}
.chainsw button[aria-checked="true"] small{border-color:rgba(0,0,0,.3);color:rgba(0,0,0,.6)}
.chainsw.switching button{pointer-events:none;opacity:.5}
.chainsw.switching button[aria-checked="true"]{opacity:1}

/* wallet: one key. Not connected it says so and connects; connected it is
   the address, with a live dot, and opens a menu that holds disconnect. */
.meta.wallet-cell{position:relative;padding:0;flex-direction:row;align-items:stretch}
.wkey{display:flex;align-items:center;gap:10px;min-height:52px;height:100%;padding:0 16px;border:0;background:transparent;
  color:var(--fg);text-align:left;letter-spacing:0;text-transform:none;font:inherit;transition:background .09s,color .09s}
.wkey .wtxt{display:flex;flex-direction:column;gap:1px;line-height:1.2}
.wkey small{font:500 9px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.wkey b{font:600 12px var(--mono);letter-spacing:.02em;white-space:nowrap}
/* not connected: a lit key with a cursor */
.wkey:not(.on){align-self:center;height:auto;min-height:0;margin:0 12px;padding:5px 12px;border:1px solid var(--brand);background:rgba(198,255,61,.06)}
.wkey:not(.on) b{font:700 11px var(--disp);letter-spacing:.18em;text-transform:uppercase;color:var(--brand)}
.wkey:not(.on) b::before{content:"> ";color:var(--brand)}
.wkey:not(.on) small{color:var(--mute)}
.wkey:not(.on) .cur{width:7px;height:12px;background:var(--brand);animation:pulse 1s steps(2) infinite}
.wkey:not(.on):hover:not(:disabled){background:var(--brand);border-color:var(--brand)}
.wkey:not(.on):hover:not(:disabled) b,.wkey:not(.on):hover:not(:disabled) b::before,.wkey:not(.on):hover:not(:disabled) small{color:var(--brand-ink)}
.wkey:not(.on):hover:not(:disabled) .cur{background:var(--brand-ink)}
.wkey:disabled{opacity:.6;cursor:progress}
/* connected: the address is the key */
.wkey.on b{color:var(--brand)}
.wkey.on:hover,.wkey.on[aria-expanded=true]{background:#0f1519}
.wkey.on[aria-expanded=true]{box-shadow:inset 0 -2px 0 var(--brand)}
.wdot{width:7px;height:7px;flex:none;background:var(--brand);box-shadow:0 0 8px var(--brand);animation:pulse 1.6s steps(2) infinite}
.caret{color:var(--dim);font-size:10px;transition:transform .12s}
.wkey[aria-expanded=true] .caret{transform:rotate(180deg);color:var(--brand)}
.wmenu{position:absolute;top:calc(100% + 1px);right:0;z-index:45;min-width:280px;background:var(--panel);border:1px solid var(--line2);
  box-shadow:0 18px 40px -12px rgba(0,0,0,.9);animation:wm-in .12s steps(3)}
.wmenu::before,.wmenu::after{content:"";position:absolute;width:9px;height:9px;border:1px solid var(--brand);pointer-events:none}
.wmenu::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.wmenu::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
@keyframes wm-in{from{opacity:0;transform:translateY(-4px)}}
.wm-head{padding:11px 14px;border-bottom:1px dashed var(--line2)}
.wm-head small{display:block;font:500 9px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-bottom:4px}
.wm-head code{display:block;font:500 11px var(--mono);color:var(--cyan);word-break:break-all;line-height:1.5;text-transform:none;letter-spacing:0}
.wmenu [role=menuitem]{display:flex;align-items:center;justify-content:space-between;width:100%;padding:10px 14px;border:0;border-bottom:1px solid var(--line);
  background:transparent;color:var(--fg);font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;text-align:left;cursor:pointer}
.wmenu [role=menuitem]:last-child{border-bottom:0}
.wmenu [role=menuitem] span::before{content:"› ";color:var(--deco)}
.wmenu [role=menuitem] kbd{font:500 10px var(--mono);color:var(--dim);border:1px solid var(--line2);padding:0 5px;min-width:20px;text-align:center}
.wmenu [role=menuitem]:hover,.wmenu [role=menuitem]:focus-visible{background:#0f1519;color:var(--brand);outline:0}
.wmenu [role=menuitem]:hover span::before,.wmenu [role=menuitem]:focus-visible span::before{color:var(--brand)}
.wmenu [role=menuitem].bad{color:var(--mag)}
.wmenu [role=menuitem].bad:hover,.wmenu [role=menuitem].bad:focus-visible{background:var(--mag);color:var(--bg)}
.wmenu [role=menuitem].bad:hover kbd,.wmenu [role=menuitem].bad:focus-visible kbd{color:var(--bg);border-color:rgba(0,0,0,.35)}
.wmenu a[role=menuitem]{border-bottom:1px solid var(--line)}

/* ---- panels: hairline frames with lime corner ticks ------------------------ */
section{margin-bottom:12px;background:rgba(11,15,18,.86);border:1px solid var(--line);position:relative}
section::before,section::after{content:"";position:absolute;width:9px;height:9px;border:1px solid var(--brand);pointer-events:none;z-index:1}
section::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
section::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
section > .head{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:9px 14px;border-bottom:1px dashed var(--line2)}
.head span{font:600 12px var(--disp);letter-spacing:.18em;color:var(--fg)}
.head span:first-child::before{content:"ᛜ";font-family:var(--rune);color:var(--brand);margin-right:9px;font-size:14px;letter-spacing:0}
.head span:last-child{font:500 10px var(--mono);color:var(--dim);letter-spacing:.08em;text-align:right}
.head span:first-child:last-child{text-align:left}
.head .n{font:500 10px var(--mono);color:var(--mute);font-style:normal;margin-right:8px;letter-spacing:0}
.head a{border:0;color:var(--brand)}
.ticket section > .head span:first-child::before{content:"ᚠ"}
#sec-market > .head span:first-child::before{content:"ᛟ"}
#sec-report > .head span:first-child::before{content:"ᚱ"}
#sec-exec > .head span:first-child::before{content:"ᛊ"}
#sec-tape > .head span:first-child::before{content:"ᚷ"}
.body{padding:14px}

/* ---- the deck: ticket | blotter | tail --------------------------------------- */
.deck{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
@media(min-width:1080px){
  .deck{grid-template-columns:380px minmax(0,1fr)}
  .ticket{position:sticky;top:64px;align-self:start;max-height:calc(100vh - 64px - var(--fbar) - 12px);overflow:auto;scrollbar-width:thin}
}
/* run: a cockpit that fills the screen; each column scrolls on its own */
.deck.run{gap:0}
.wrap > .deck.run{margin:0}
.deck.run .col{min-width:0}
.deck.run .col section,.deck.run .col .logwrap,.deck.run .blotter-empty{margin:12px}
@media(min-width:1080px) and (max-width:1179px){.deck.run .tail{grid-column:1/-1}}
@media(min-width:1180px){
  body:has(.deck.run){overflow:hidden}
  .wrap:has(> .deck.run){height:100vh;display:grid;grid-template-rows:auto minmax(0,1fr);padding-bottom:var(--fbar)}
  .wrap:has(> .deck.run) > header{margin:0}
  .deck.run{grid-template-columns:340px minmax(0,1fr) 320px;min-height:0}
  /* Each column fills its row and scrolls inside it. align-self has to be
     put back: the sticky ticket above sets it to start, and a grid item that
     does not stretch is as tall as its content -- so overflow never has
     anything to scroll and the run button falls off the screen. */
  .deck.run .col{position:static;align-self:stretch;max-height:100%;min-height:0;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
  .deck.run .col + .col{border-left:1px solid var(--line2)}
}
.ticket section{margin-bottom:12px}
.blotter-empty{border:1px dashed var(--line2);color:var(--mute);padding:34px 22px;font-size:12px;line-height:1.8;background:rgba(11,15,18,.7);margin-bottom:12px}
.blotter-empty b{color:var(--dim);font-weight:600}
.blotter-empty b::before{content:"$ ";color:var(--brand)}

/* the command the ticket describes, echoed as you type */
.cmd{margin:0;padding:12px 14px;background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  font:400 11px/1.75 var(--mono);color:var(--dim);white-space:pre-wrap;word-break:break-all}
.cmd .p{color:var(--brand)} .cmd .f{color:var(--cyan)} .cmd .v{color:var(--fg)} .cmd .d{color:var(--mag)}
.cmd .cur{display:inline-block;width:7px;height:13px;background:var(--brand);vertical-align:-2px;animation:pulse 1s steps(2) infinite}

/* pipeline tape */
.tape{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.stage{position:relative;padding:12px 14px 14px;border-right:1px solid var(--line);min-width:0;min-height:92px}
.stage:last-child{border-right:0}
.stage .bar{position:absolute;left:0;right:0;top:0;height:2px;background:var(--line)}
.stage .bar u{display:block;height:100%;width:0;background:var(--cyan);transition:width .6s cubic-bezier(.2,.8,.2,1)}
.stage i{font:normal 10px var(--mono);color:var(--mute)}
.stage i .r{font-family:var(--rune);font-size:13px;margin-right:6px}
.stage b{display:block;margin:7px 0 2px;font:600 12px var(--disp);letter-spacing:.16em;text-transform:uppercase}
.stage p{margin:0;font-size:10px;color:var(--dim);line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.stage b{margin:8px 0 3px}
.stage[data-s=run] i,.stage[data-s=run] p{color:var(--cyan)}
.stage[data-s=run] .bar u{animation:load 1s linear infinite}
.stage[data-s=ok] i,.stage[data-s=ok] p{color:var(--brand)}
.stage[data-s=ok] .bar u{width:100%;background:var(--brand)}
.stage[data-s=wait] i,.stage[data-s=wait] p{color:var(--warn)}
.stage[data-s=wait] .bar u{width:100%;background:var(--warn)}
.stage[data-s=bad] i,.stage[data-s=bad] p{color:var(--bad)}
.stage[data-s=bad] .bar u{width:100%;background:var(--bad)}
@keyframes load{0%{margin-left:0;width:10%}50%{width:40%}100%{margin-left:90%;width:10%}}

/* ---- fields ------------------------------------------------------------------ */
label{display:block;font-size:9.5px;font-weight:700;color:var(--dim);margin-bottom:6px}
.ticket label:not(.chk):not(.inline){font-size:11px;font-weight:500;color:var(--cyan);text-transform:none;letter-spacing:0}
.ticket label:not(.chk):not(.inline)::before{content:"--";color:var(--deco)}
input{width:100%;background:var(--bg2);border:1px solid var(--line2);color:var(--brand);
  font:500 12.5px var(--mono);padding:8px 10px;outline:none;transition:border-color .09s;caret-color:var(--brand)}
input::placeholder{color:var(--deco)}
input:hover{border-color:var(--deco)}
input:focus{border-color:var(--brand)}
.row{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));margin-bottom:14px}
select{width:100%;appearance:none;-webkit-appearance:none;background:var(--bg2);border:1px solid var(--line2);
  color:var(--brand);font:500 12px var(--mono);padding:8px 28px 8px 10px;outline:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--cyan) 50%),linear-gradient(135deg,var(--cyan) 50%,transparent 50%);
  background-position:right 14px top 50%,right 9px top 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
select:hover{border-color:var(--deco)}
select:focus{border-color:var(--brand)}
select option{background:#0b0f12;color:var(--fg)}
.pick input.custom{margin-top:6px;font-size:12px}
.picks{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.hint{color:var(--dim);font-size:11px;line-height:1.6;margin:6px 0 12px}
.hint b{color:var(--fg);font-weight:600}
details{border-top:1px dashed var(--line2);margin-top:8px;padding-top:10px}
summary{cursor:pointer;list-style:none;font-size:10px;font-weight:700;color:var(--cyan);display:flex;align-items:center;gap:8px}
summary::-webkit-details-marker{display:none}
summary::before{content:"+";color:var(--brand);width:10px;letter-spacing:0}
details[open] summary::before{content:"−"}
summary:hover{color:var(--fg)}
.chk{display:flex;align-items:center;gap:9px;color:var(--dim);font-size:11.5px;text-transform:none;letter-spacing:0;margin:9px 0;cursor:pointer}
.chk input,label.inline input{appearance:none;-webkit-appearance:none;width:13px;height:13px;flex:none;margin:0;padding:0;
  border:1px solid var(--line2);background:transparent;display:inline-grid;place-items:center;cursor:pointer;vertical-align:middle}
.chk input:checked,label.inline input:checked{background:var(--mag);border-color:var(--mag)}
.chk input:checked::after,label.inline input:checked::after{content:"×";color:var(--bg);font:700 11px/1 var(--mono)}
label.inline{font-size:11px;color:var(--dim);text-transform:none;letter-spacing:0;display:inline;font-weight:500}
label.inline input{margin-right:6px}

/* ---- buttons: square keys; the primary is lit ----------------------------- */
button{background:transparent;border:1px solid var(--line2);color:var(--fg);border-radius:0;
  font-size:10.5px;font-weight:700;padding:8px 13px;cursor:pointer;transition:border-color .09s,color .09s,background .09s,box-shadow .09s}
button:hover:not(:disabled){border-color:var(--brand);color:var(--brand)}
button:disabled{opacity:.35;cursor:not-allowed}
#btn-run,#btn-login{width:100%;padding:13px 16px;font:700 12px var(--disp);letter-spacing:.22em;border-color:var(--brand);color:var(--brand-ink);background:var(--brand)}
#btn-run::before,#btn-login::before{content:"> "}
#btn-run:hover:not(:disabled),#btn-login:hover:not(:disabled){background:#d6ff6e;color:var(--brand-ink);box-shadow:var(--glow)}
#btn-run{margin-top:0!important}
/* what signs for real is magenta */
button.danger{border-color:var(--mag);color:var(--mag)}
button.danger::before{content:"> "}
button.danger:hover:not(:disabled){background:var(--mag);border-color:var(--mag);color:var(--bg);box-shadow:0 0 22px rgba(255,61,154,.3)}
#btn-create{width:100%;padding:13px 16px;font:700 12px var(--disp);letter-spacing:.2em}
.tabs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:12px}
.tabs button{padding:6px 10px;border:1px solid var(--line2);color:var(--dim);font-size:10.5px;background:transparent;letter-spacing:.06em;text-transform:lowercase}
.tabs button.on{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.tabs button:hover:not(.on):not(:disabled){border-color:var(--brand);color:var(--fg)}

/* ---- notices: a bracketed prefix says how bad -------------------------------- */
div.alert,div.note,div.ok,p.alert,p.note{padding:9px 12px 9px 34px;margin:10px 0;font-size:11.5px;line-height:1.55;
  border:1px solid var(--line);border-left-width:2px;background:var(--panel2);position:relative}
div.alert::before,div.note::before,div.ok::before,p.alert::before,p.note::before{position:absolute;left:12px;top:9px;font-weight:700}
div.alert,p.alert{border-color:rgba(255,61,154,.4);border-left-color:var(--mag);color:#ffd0e4}
div.alert::before,p.alert::before{content:"✕";color:var(--bad)}
div.note,p.note{border-color:rgba(255,176,32,.35);border-left-color:var(--warn);color:#f5e0b8}
div.note::before,p.note::before{content:"!";color:var(--warn)}
div.ok{border-color:rgba(198,255,61,.35);border-left-color:var(--brand);color:var(--fg)}
div.ok::before{content:"✓";color:var(--acc)}
span.alert{color:var(--bad)}
.ok .big{font:700 13px var(--disp);letter-spacing:.16em;text-transform:uppercase;color:var(--acc)}
.ok table td:first-child{color:var(--dim);white-space:nowrap;padding-right:14px;width:1%}
.ok table td{font-size:11.5px;padding:2px 0;vertical-align:top}
.ok table td.addr{word-break:break-all}
table{width:100%;border-collapse:collapse;font-size:12px}
td{padding:4px 8px 4px 0;vertical-align:top}
td:first-child{color:var(--dim);white-space:nowrap;width:1%;padding-right:20px}
.num{color:var(--acc2)}
.big{font-size:15px;color:var(--acc)}
pre{margin:0;white-space:pre-wrap;word-break:break-all;font-size:11.5px;color:var(--dim)}

/* ---- log: tail -f -------------------------------------------------------------- */
.logwrap{background:rgba(11,15,18,.86);border:1px solid var(--line);margin-top:0;padding:0;position:relative}
.logwrap::before{content:"";position:absolute;top:-1px;left:-1px;width:9px;height:9px;border:1px solid var(--brand);border-right:0;border-bottom:0}
.logwrap summary{display:flex;align-items:center;gap:10px;padding:9px 14px;font:600 12px var(--disp);letter-spacing:.18em;color:var(--fg);border-bottom:1px dashed transparent}
.logwrap[open] summary{border-bottom-color:var(--line2)}
.logwrap summary::before{content:"ᚾ";font-family:var(--rune);color:var(--brand);font-size:14px;letter-spacing:0;width:auto;margin-right:0}
.logwrap summary span:first-child::after{content:" -f"}
.logwrap summary .cnt{margin-left:auto;font:500 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
#log{max-height:300px;overflow:auto;font-size:11px;color:var(--dim);padding:8px 14px 12px;counter-reset:ln}
.tail #log{max-height:none;padding:8px 14px}
#log div{display:grid;grid-template-columns:26px 32px minmax(0,1fr);gap:6px;padding:1px 0;line-height:1.6;animation:ln-in .18s steps(3)}
#log div .lv{font-weight:700;color:var(--cyan)}
#log div span{color:var(--fg2,#b3c2ba);word-break:break-word}
#log div::before{counter-increment:ln;content:counter(ln,decimal-leading-zero);color:var(--deco)}
#log div:last-child span{color:var(--fg)}
#log div.e .lv{color:var(--bad)} #log div.w .lv{color:var(--warn)} #log div.o .lv{color:var(--acc)}
#log:empty::before{content:"$ waiting for a run";color:var(--mute)}
@keyframes ln-in{from{opacity:0;transform:translateX(-4px)}}

/* ---- gate: a login prompt ---------------------------------------------------- */
.gate{position:fixed;inset:0;display:grid;place-items:center;padding:24px;z-index:60;background:var(--bg)}
.gatebox{position:relative;width:min(440px,100%);padding:26px 28px 28px;background:var(--panel);border:1px solid var(--line2)}
.gatebox::before,.gatebox::after{content:"";position:absolute;width:12px;height:12px;border:1px solid var(--brand)}
.gatebox::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.gatebox::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.gatebox h1{display:block;margin:0 0 8px;font:700 24px/1 var(--disp);letter-spacing:.24em;text-transform:uppercase;color:var(--fg)}
.gatebox h1::before{content:"";display:block;width:84px;height:84px;margin:0 0 18px;border-radius:50%;
  background:#000 url(/img/logo.webp) center/cover no-repeat;border:1px solid rgba(224,194,122,.4);box-shadow:0 0 24px rgba(224,194,122,.14)}
.gatebox h1::after{content:"▮";margin-left:6px;color:var(--brand);animation:blink 1.1s steps(1) infinite}
.gatebox h1 em{display:inline-block;vertical-align:4px;margin-left:10px;padding:2px 6px;border:1px solid var(--deco);
  font:700 9px var(--mono);font-style:normal;letter-spacing:.14em;color:var(--mute)}
.gatebox label::before{content:"--";color:var(--deco)}
.gatebox label{color:var(--cyan);text-transform:none;letter-spacing:0;font-size:11px;font-weight:500}
.gatebox .hint{margin-bottom:20px}
#gate-err{margin-top:12px}

/* ---- readouts --------------------------------------------------------------- */
.sum{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0;margin-bottom:12px;border:1px solid var(--line);background:rgba(11,15,18,.86)}
.sum div{padding:12px 14px;min-width:0;border-right:1px solid var(--line)}
.sum div:last-child{border-right:0}
.sum span{display:block;font-size:9px;font-weight:600;letter-spacing:.14em;color:var(--dim)}
.sum b{display:block;font:500 20px/1.2 var(--mono);color:var(--acc2);margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* The two assets the desk spends rather than trades: gas and the dollar it
   settles in. They sit in the same list as the bags, with the same sell
   button beside them, so they are marked. */
.rsv{display:block;margin-top:5px;font:500 9.5px/1.5 var(--mono);font-style:normal;color:var(--warn);
  letter-spacing:.06em}
.rsv::before{content:"\26A0";margin-right:5px}
td .rsv{display:inline-block;margin:0 0 0 6px;font-size:11px;vertical-align:0;cursor:help}
td .rsv::before{margin:0}

/* ---- pool list (join mode) -------------------------------------------------- */
/* The pool panel folds. Open it is every pool the token trades in; shut it is
   the one you are in, which is the only one that matters once it is picked --
   and a token with 91 pools used to print all 91 down this column. */
.poolpick{border-top:0;margin:0;padding:0}
.pp-bar{display:grid;gap:2px 8px;align-items:center;padding:9px 11px;border:1px solid var(--line2);
  background:var(--bg2);grid-template-columns:auto auto auto minmax(0,1fr);
  grid-template-areas:"l v f c" "s s s s";font-size:10px;letter-spacing:.06em}
/* `details[open] summary::before` out-ranks a single class, so the shared
   +/- marker leaked a stray dash into the open bar. */
.pp-bar::before,.poolpick[open] > .pp-bar::before{content:none}
.pp-bar:hover{border-color:var(--deco)}
.poolpick[open] .pp-bar{border-bottom-style:dashed}
.pp-l{grid-area:l;color:var(--deco);font-weight:700;letter-spacing:.14em}
.pp-venue{grid-area:v;justify-self:start}
.pp-fee{grid-area:f;color:var(--fg);font:600 11px var(--mono);letter-spacing:0}
.pp-count{grid-area:c;justify-self:end;color:var(--dim);font:500 10px var(--mono);letter-spacing:.06em;text-transform:none}
.pp-count::after{content:" ›";color:var(--deco)}
.poolpick[open] .pp-count::after{content:" ⌄"}
.pp-bar:hover .pp-count,.pp-bar:hover .pp-count::after{color:var(--fg)}
.pp-sub{grid-area:s;display:flex;align-items:baseline;gap:8px;min-width:0;margin-top:3px;
  font:400 10.5px var(--mono);color:var(--mute);letter-spacing:0;text-transform:none}
.pp-sub .dev{margin-left:auto;white-space:nowrap}
.poolpick.off .pp-bar{border-color:rgba(255,176,32,.45)}
/* room for roughly six rows, then it scrolls -- the column has other things in it */
.pp-body{max-height:46vh;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--line2) transparent;
  border:1px solid var(--line2);border-top:0;padding:8px}
.pp-body > .hint{margin:2px 2px 10px}

.poolgrid{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
.venuegroup{border:1px solid var(--line);background:var(--bg2);margin:0}
.venuegroup.ro{opacity:.7}
.vg-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:8px 12px;border-bottom:1px dashed var(--line2)}
.vg-name{font-size:10px;font-weight:700;color:var(--fg)}
.venuegroup.ro .vg-name{color:var(--dim)}
.vg-sum{color:var(--dim);font-size:10.5px;white-space:nowrap}
.vg-body{padding:2px 4px}
.vg-foot{padding:6px 12px 8px;color:var(--mute);font-size:10.5px}
.venue{border:1px solid var(--line2);color:var(--cyan);font-size:9px;padding:1px 5px}
.poolrow{display:grid;grid-template-columns:14px 44px minmax(0,1fr) auto;grid-template-areas:"r f p d" ". q q a";
  gap:3px 10px;align-items:center;padding:7px 9px;margin:1px 0;cursor:pointer;font-size:11.5px;color:var(--dim);border:1px solid transparent}
.poolrow input{grid-area:r}.poolrow .pf{grid-area:f}.poolrow .pp{grid-area:p}.poolrow .dev{grid-area:d}
.poolrow .pd{grid-area:q}.poolrow .pa{grid-area:a}
.poolrow:hover{background:#0f1519}
.poolrow.on{border-color:rgba(198,255,61,.45);background:rgba(198,255,61,.05);color:var(--fg)}
.poolrow input{width:auto;margin:0;padding:0;background:none;border:0;box-shadow:none;accent-color:var(--brand)}
.poolrow .pf{color:var(--fg);font-weight:600}
.poolrow .pp{color:var(--acc2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.poolrow .dev{text-align:right;white-space:nowrap;font-size:11px}
.poolrow .dev.ok{color:var(--acc)}
.poolrow .dev.warn{color:var(--warn)}
.poolrow .dev.bad{color:var(--bad)}
.poolrow .dev.ref{color:var(--brand);font-size:9.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.poolrow .pd{text-align:left;white-space:nowrap;font-size:10.5px;color:var(--mute)}
.poolrow .pd::before{content:"depth ";}
.poolrow .pa{color:var(--mute);font-size:10.5px;white-space:nowrap;text-align:right;cursor:copy;text-transform:none;letter-spacing:0}
.poolrow .pa a{color:var(--mute);border-bottom:1px dotted var(--line2)}
.poolrow .pa a:hover{color:var(--brand)}
.poolrow.ro{cursor:not-allowed}
.poolrow.ro:hover{background:none}
.poolrow:focus-within{outline:1px solid var(--brand);outline-offset:-1px}

/* ---- positions & wallet tables: hairline ledgers -------------------------- */
.tablewrap{overflow-x:auto}
.tablehost{min-height:40px}
table.pos-t{width:100%;border-collapse:collapse;font-size:12px;min-width:920px}
table.pos-t th{text-align:left;font-size:9px;font-weight:600;letter-spacing:.14em;color:var(--dim);padding:0 14px 9px 0;border-bottom:1px solid var(--line2)}
table.pos-t td{padding:12px 14px 12px 0;border-bottom:1px solid var(--line);vertical-align:top;width:auto;color:inherit}
table.pos-t tr:last-child td{border-bottom:0}
table.pos-t tbody tr:hover td{background:#0d1316}
table.pos-t tr.slotrow td{padding:0 0 12px;border-top:0}
.cell-main{color:var(--fg)}
.cell-sub{color:var(--dim);font-size:11px;margin-top:3px;white-space:nowrap}
.cell-sub.tname{color:var(--fg);white-space:normal}
/* a position earning more than a percent an hour is worth looking at */
.cell-sub.hot{color:var(--acc)}
.cell-sub.hot b{color:var(--acc);font-weight:600}
.cell-sub.entry{color:var(--mute)}
.cell-val{color:var(--acc2);font-size:13px;font-weight:500}
.pair-name{font:600 14px var(--disp);color:var(--fg);letter-spacing:.06em}
.pair-meta{color:var(--dim);font-size:10.5px;margin-top:4px}
.pair-meta.act b{color:var(--brand);font-weight:600}
.delta.up{color:var(--acc)}
.delta.down{color:var(--bad)}
.tag{display:inline-block;vertical-align:1px;font-size:9px;font-weight:700;padding:1px 6px;margin-left:6px;border:1px solid currentColor}
.tag.in{color:var(--acc);background:transparent}
.tag.out{color:var(--bad);background:transparent}
.tag.closed{color:var(--dim);border-color:var(--line2)}
.rangecell{min-width:160px}
.minibar{height:6px;background:rgba(198,255,61,.14);border-inline:1px solid var(--brand);position:relative;margin:7px 0 5px}
.minibar::before,.minibar::after{content:none}
.minibar i{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--cyan);box-shadow:0 0 8px rgba(61,224,255,.6)}
.acts-inline{display:flex;gap:5px;flex-wrap:wrap}
.acts-inline button{padding:5px 9px;font-size:9px;white-space:nowrap}
.acts{display:flex;gap:6px;margin-top:9px}
.acts button{flex:1;padding:7px 10px;font-size:9.5px}
.slot:empty{display:none}
.slot{margin-top:8px;max-width:440px}
.slotrow .slot{max-width:820px}
.fees{margin-top:7px;padding-top:6px;border-top:1px dashed var(--line2);font-size:11.5px;color:var(--acc)}
.fees b{font-weight:500}.fees span{color:var(--dim)}.fees.zero{color:var(--dim)}
.grid{display:grid;gap:10px}

/* legacy position cards */
.pos{border-top:1px solid var(--line);padding:10px 0;margin-bottom:8px}
.pos-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.pos-h b{color:var(--fg);font-weight:600}
.pos-h time{color:var(--dim);font-size:10.5px;white-space:nowrap}
.pos-m{color:var(--dim);font-size:11px;margin:3px 0 6px}
.pos-r{display:flex;justify-content:space-between;font-size:10.5px;color:var(--dim);margin-top:3px}

/* ==========================================================================
   The report: identity, the band, readouts, flags, drawer.
   ========================================================================== */
.ident{display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;font-size:11.5px;color:var(--dim);padding-bottom:12px;border-bottom:1px dashed var(--line2)}
.ident b{color:var(--fg);font:700 22px var(--disp);letter-spacing:.06em}
.ident b::before{content:"$ ";color:var(--brand);font-family:var(--mono);font-size:15px}
.ident .addr{font-size:10.5px;color:var(--mute);word-break:break-all}
.ident .sec{margin-left:auto;font-size:9.5px;font-weight:700;padding:2px 8px;border:1px solid var(--line2)}
.ident .sec.bad{color:var(--bad);border-color:rgba(255,61,154,.55)}
.ident .sec.ok{color:var(--acc);border-color:rgba(198,255,61,.55)}

/* the band: a ruled track with the range lit and two pins */
.strip{margin:20px 0 6px;position:relative}
.strip-track{height:28px;position:relative;border-bottom:1px solid var(--line2);
  background:
    repeating-linear-gradient(-45deg,rgba(198,255,61,.1) 0 1px,transparent 1px 9px),
    linear-gradient(90deg,rgba(198,255,61,.07),rgba(198,255,61,.07)),
    repeating-linear-gradient(90deg,var(--line2) 0 1px,transparent 1px 12.5%);
  background-size:100% 100%,100% 100%,100% 8px;background-position:0 0,0 0,0 100%;background-repeat:no-repeat,no-repeat,repeat-x}
.strip-track::before{content:"";position:absolute;left:0;right:0;top:0;bottom:0;border-left:1px dashed var(--brand);border-right:1px dashed var(--brand)}
.mk{position:absolute;bottom:-1px;width:2px;height:26px;transform:translateX(-1px)}
.mk::after{content:"";position:absolute;left:-3px;top:-6px;width:8px;height:8px;background:inherit}
.mk.spot{background:var(--brand);box-shadow:var(--glow)}
.mk.mkt{background:var(--cyan);box-shadow:0 0 10px rgba(61,224,255,.5)}
.mk.mkt.out{width:0;height:0;background:none;box-shadow:none;transform:none;top:8px;bottom:auto;border-top:6px solid transparent;border-bottom:6px solid transparent}
.mk.mkt.out::after{display:none}
.mk.mkt.out.lo{left:-12px!important;border-right:8px solid var(--mag)}
.mk.mkt.out.hi{right:-12px;left:auto!important;border-left:8px solid var(--mag)}
.strip-lbl{display:flex;justify-content:space-between;font-size:11px;color:var(--dim);margin-top:8px}
.strip-lbl b{color:var(--brand);font-size:10.5px;font-weight:700}
.strip-key{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:11px;color:var(--dim);margin-top:8px}
.strip-key i{display:inline-block;width:8px;height:8px;vertical-align:0;margin-right:7px}
.strip-key i.spot{background:var(--brand)}
.strip-key i.mkt{background:var(--cyan)}
.strip-key .gap{margin-left:auto;color:var(--fg);font-weight:600}
.strip-key .gap.bad{color:var(--bad)}

.tiles{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin-top:16px;border:1px solid var(--line);border-right:0;border-bottom:0}
.tile{padding:11px 14px;min-width:0;background:var(--bg2);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.tile .k{font-size:9px;font-weight:600;letter-spacing:.14em;color:var(--dim)}
.tile .v{font:500 16px var(--mono);color:var(--acc2);margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* what the pair charges right now, over its resting fee */
.tile .v b.live{color:var(--warn);font-weight:600}
.tile .v.fg{color:var(--fg)}
.tile .s{font-size:10.5px;color:var(--dim);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile.warn .v{color:var(--warn)}

.flags{margin-top:12px;display:grid;gap:6px}
.flag{font-size:11.5px;line-height:1.55;padding:8px 11px 8px 30px;position:relative;border:1px solid var(--line);border-left-width:2px;background:var(--panel2)}
.flag::before{position:absolute;left:11px;top:8px;font-weight:700;color:var(--mute);content:"·"}
.flag.bad{border-color:rgba(255,61,154,.4);border-left-color:var(--mag);color:var(--fg)}
.flag.bad::before{content:"✕";color:var(--bad)}
.flag.warn{border-color:rgba(255,176,32,.35);border-left-color:var(--warn);color:var(--fg)}
.flag.warn::before{content:"!";color:var(--warn)}
.flag.info{color:var(--dim)}
.flag b{font-weight:600;color:inherit}
.flag.bad b{color:var(--bad)}
.flag.warn b{color:var(--warn)}

.drawer{margin-top:12px}
.drawer table{margin-top:8px}
.drawer td:first-child{color:var(--dim);white-space:nowrap;padding-right:14px;width:1%}
.drawer td{font-size:11.5px;vertical-align:top;padding:3px 0}
.drawer td.num{color:var(--acc2)}

/* ---- market panel: the scope ------------------------------------------------- */
.mkt-head{margin-bottom:12px}
.mkt-name{font:700 30px/1.1 var(--disp);letter-spacing:.04em;margin-bottom:12px}
.mkt-name b::before{content:"$ ";color:var(--brand);font:500 16px var(--mono)}
.mkt-name .cell-sub{font:400 10.5px var(--mono);letter-spacing:0;margin-left:8px}
.mkt-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(104px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.mkt-stats div{background:var(--bg2);padding:8px 11px}
.mkt-stats span{display:block;font-size:9px;font-weight:600;color:var(--dim);margin-bottom:4px}
.mkt-stats b{font-size:13px;font-weight:500;color:var(--fg)}
.mkt-stats i{font-style:normal;font-size:9.5px}
.mkt-stats i.up{color:var(--acc)}.mkt-stats i.down{color:var(--bad)}

.chart{margin:0;border:1px solid var(--line);background:var(--bg2);padding:10px 12px 8px;position:relative}
.chart-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;font-size:10.5px;color:var(--dim);margin-bottom:8px}
.chart-tfs,.chart-units{display:inline-flex;gap:3px}
.chart-bar button{padding:3px 8px;font-size:9.5px;letter-spacing:.06em;border:1px solid var(--line2);background:transparent;color:var(--dim)}
.chart-bar button.on{color:var(--brand-ink);background:var(--brand);border-color:var(--brand)}
.chart-src{margin-left:auto}
.chart-svg{display:block;width:100%;height:300px;touch-action:none;user-select:none}
.chart-svg .grid{stroke:var(--line);stroke-width:1}
.chart-svg .ax{fill:var(--dim);font:500 10px var(--mono)}
.chart-svg .ax.spot{fill:var(--brand)}
.chart-svg .line{fill:none;stroke:var(--cyan);stroke-width:1.5;vector-effect:non-scaling-stroke;filter:drop-shadow(0 0 4px rgba(61,224,255,.65))}
.chart-svg .bandfill{fill:rgba(198,255,61,.08)}
.chart-svg .spotline{stroke:var(--brand);stroke-width:1;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}
.chart-svg .bin.quote{fill:var(--cyan);opacity:.6}
.chart-svg .bin.token{fill:var(--brand);opacity:.6}
.chart-svg .bin.active{fill:var(--warn)}
.chart-svg .bin.band{fill:var(--brand);opacity:.25}
.chart-svg .edge line{stroke:var(--brand);stroke-width:1.2;stroke-dasharray:4 4;vector-effect:non-scaling-stroke}
.chart-svg .edge text{fill:var(--brand);font:700 10px var(--mono)}
.chart-svg .edge .grab{fill:transparent;cursor:ns-resize}
.chart-svg .edge.drag line{stroke:var(--fg);stroke-width:1.6;stroke-dasharray:none}
.chart-svg .edge.drag text{fill:var(--fg)}
.chart-key{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:10.5px;color:var(--dim);margin-top:8px}
.chart-key i{display:inline-block;width:10px;height:6px;margin-right:6px;vertical-align:1px}
.chart-key i.quote{background:var(--cyan)}.chart-key i.token{background:var(--brand)}.chart-key i.active{background:var(--warn)}

/* ---- focus, motion, small screens --------------------------------------------- */
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible,summary:focus-visible{outline:1px solid var(--cyan);outline-offset:2px}
@media (prefers-reduced-motion:no-preference){
  .mk.spot,.mk.mkt{transition:left .3s ease}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important}
}
@media (max-width:1100px){
  .meta:not(.meta-chain){padding:0 12px}
}
@media (max-width:820px){
  :root{--fbar:48px}
  header{position:relative;z-index:30}
  /* row 1: mark + dry-run; row 2: readouts; row 3: networks */
  .brand{order:0;flex:1 0 60%;border-right:0;padding:10px 16px}
  .brand small{white-space:nowrap}
  .badge{order:1;align-self:center}
  .meta{order:2;min-height:44px;padding:0 16px;border-left:0;border-top:1px solid var(--line);flex:1 1 30%;min-width:0}
  .meta + .meta{border-left:1px solid var(--line)}
  .meta b{overflow:hidden;text-overflow:ellipsis}
  .meta.wallet-cell{flex:1 1 34%;min-width:0}
  .brand{flex-basis:66%}
  .wkey{min-height:44px;width:100%}
  .meta.wallet-cell:not(.connected){flex:1 1 100%}
  .wkey:not(.on){margin:6px 16px;width:auto;flex:1;min-width:0;justify-content:space-between}
  .wmenu{position:fixed;left:10px;right:10px;min-width:0}
  .meta-chain + .meta{margin-left:0;border-left:0}
  .meta-chain{order:3;flex:1 1 100%;border-right:0;border-top:1px solid var(--line2);overflow-x:auto;padding:0}
  .chainsw{width:100%}
  .chainsw button{flex:1;justify-content:center;min-height:44px;padding:0 10px}
  .chainsw button small{display:none}
  .rail::after{display:none}
  .rail a{flex:1}
  .rail a span{flex:1;padding:0 10px}
  .ticket,.deck.run .tail{position:static;max-height:none}
  .sum div{border-bottom:1px solid var(--line)}
  .sum b{font-size:18px}
  .tape{grid-template-columns:1fr}
  .stage{border-right:0;border-bottom:1px solid var(--line)}
  .chart-svg{height:220px}
  .chart-src{margin-left:0;width:100%}
  .mkt-name{font-size:24px}
  .body{padding:14px}
}

/* ==========================================================================
   The ticket as flags, the keys, the scope, the pools panel.
   ========================================================================== */
.fl{display:grid;grid-template-columns:88px minmax(0,1fr);align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid rgba(28,37,43,.6)}
.ticket .fl > label,.fl > .lb{margin:0;font:500 11px var(--mono);color:var(--cyan);text-transform:none;letter-spacing:0}
.fl > .lb::before{content:"--";color:var(--deco)}
.fl input{height:32px;padding:0 9px;font-size:12px}
.fl .tabs{margin:0}
.ticket .hint{font-size:10px;margin:2px 0 6px;padding-left:98px;line-height:1.55}
.unit{position:relative}.unit input{padding-right:52px}
.unit em{position:absolute;right:9px;top:50%;transform:translateY(-50%);font-style:normal;color:var(--dim);font-size:10px}
select.mirror{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}
.chips{display:flex;flex-wrap:wrap;gap:4px}
.opt,.tabs button{height:28px;padding:0 9px;border:1px solid var(--line2);background:transparent;color:#b3c2ba;font:500 11px var(--mono);letter-spacing:0;text-transform:none}
.opt:hover,.tabs button:hover:not(.on):not(:disabled){border-color:var(--brand);color:var(--fg)}
.opt[aria-pressed=true],.tabs button.on{background:var(--brand);border-color:var(--brand);color:var(--brand-ink);font-weight:700}
.fl .custom{margin-top:6px}
.checks{padding-top:8px}
.checks .chk{margin:4px 0;font-size:11px;color:#b3c2ba}
.ticket section > .body{padding:12px 14px}
.keys{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
.keys button{height:44px;border:0;padding:0;font:700 12px var(--disp);letter-spacing:.2em;background:var(--panel)}
#btn-run{width:auto;padding:0;border:0;box-shadow:none}
#btn-run:hover:not(:disabled){box-shadow:0 0 24px rgba(198,255,61,.3)}
.keys button.danger{background:var(--panel);color:var(--mag)}
.keys button.danger:hover:not(:disabled){background:#121a1f;color:var(--mag);box-shadow:none}
.keys button:disabled{opacity:.35}
#run-out:not(:empty){padding:0 14px 12px}

/* scope: the pair, its price, a readout row, the chart flush in the panel */
.mkt-head{margin:0}
.pair{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;padding:16px 16px 0}
.pair h1{display:block;margin:0;font:700 40px/1 var(--disp);letter-spacing:.04em;text-transform:uppercase}
.pair h1 small{font:500 16px var(--disp);color:var(--dim);margin-left:6px}
.pair .ca{font-size:10px;color:var(--dim);margin-top:6px}
.pair .ca b{color:var(--cyan);font-weight:500}
.px{text-align:right}
.px b{display:block;font:600 26px/1 var(--mono);color:var(--brand)}
.px span{font-size:10px;color:var(--dim)}
.stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:14px}
.stat{padding:11px 14px;border-right:1px solid var(--line);min-width:0}
.stat:last-child{border-right:0}
.stat span{display:block;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.stat b{display:block;margin-top:4px;font:500 15px var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat b.l{color:var(--brand)} .stat b.c{color:var(--cyan)}
.stat i{font-style:normal;font-size:9.5px}.stat i.up{color:var(--acc)}.stat i.down{color:var(--bad)}
#sec-market .chart{border:0;background:transparent;padding:12px 14px 12px}
#sec-market > .chart > .hint{padding:24px 2px}
.chart-svg{height:340px}
.chart-svg .hatch{stroke:rgba(198,255,61,.1);stroke-width:1}
.chart-svg .edge text{font:700 10px var(--mono)}

/* pools: the join list, or what it would show */
.pools-empty{padding:12px 14px;font-size:10.5px;line-height:1.6;color:var(--dim)}
.pools-empty b{color:var(--cyan);font-weight:500}
#sec-pools #pool-list{padding:8px}

@media (max-width:1100px){
  .stats{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:820px){
  .tape{grid-template-columns:1fr}
  .stage{min-height:0}
  .stats{grid-template-columns:1fr 1fr}
  .pair{flex-direction:column;align-items:flex-start}.px{text-align:left}
  .pair h1{font-size:30px}
  .ticket .hint{padding-left:0}
  .deck.run .col section,.deck.run .col .logwrap,.deck.run .blotter-empty{margin:10px 16px}
  .rail .clock{display:none}
  .chart-svg{height:240px}
}

/* ==========================================================================
   The ticket in three stages.

   It used to be twelve equally-weighted rows with six permanent hints under
   them: the token address looked exactly as important as the tick spacing,
   and the preset -- which sets the venue, the shape, the mode and the band at
   once -- read as a peer of the knobs it was overriding. Now: 01 target is the
   money, 02 strategy is one picture per shape, 03 tuning collapses to the line
   of values it holds, and a sentence says what the run will do before the key
   that runs it.
   ========================================================================== */
.stg{display:flex;align-items:center;gap:9px;margin:15px 0 9px}
.stg:first-child{margin-top:0}
.stg > b{font:500 9px var(--mono);color:var(--brand);border:1px solid var(--line2);padding:1px 5px;letter-spacing:.08em}
.stg > span{font:600 10px var(--disp);letter-spacing:.18em;color:var(--cyan);text-transform:uppercase}
.stg::after{content:"";flex:1;height:1px;background:var(--line)}

/* budget: the wallet's ceiling, one press away */
.fl.fl-3{grid-template-columns:88px minmax(0,1fr) auto}
#btn-max{height:32px;padding:0 10px;font:500 10px var(--mono);font-weight:500;color:var(--brand);
  letter-spacing:.1em;text-transform:lowercase}

/* strategy as four pictures: the bars ARE the band */
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin:0 0 8px}
.card{display:block;width:100%;padding:7px 3px;background:var(--bg2);color:var(--deco);text-align:center;font-weight:500}
.card .cg{display:block;width:100%;height:23px}
.card .cg line{stroke:var(--deco);stroke-width:1}
.card > b{display:block;margin-top:5px;font:500 8.5px/1.35 var(--mono);color:var(--dim);
  letter-spacing:.04em;text-transform:none}
.card:hover:not(.on){border-color:var(--brand)}
.card:hover:not(.on) > b{color:var(--fg)}
.card.on{border-color:var(--brand);background:rgba(198,255,61,.07);color:var(--brand)}
.card.on .cg line{stroke:var(--cyan)}
.card.on > b{color:var(--brand);font-weight:700}
.ticket .hint.nx{padding-left:0}

/* tuning: a drawer whose handle shows what is inside it */
#tuning{border-top:0;margin-top:15px;padding-top:0}
#tuning > summary{gap:9px;margin:0 0 4px;font:600 10px var(--disp);letter-spacing:.18em;
  color:var(--cyan);text-transform:uppercase}
#tuning > summary::before{content:none}
#tuning > summary .n{font:500 9px var(--mono);color:var(--brand);border:1px solid var(--line2);
  padding:1px 5px;letter-spacing:.08em}
#tuning > summary em{margin-left:auto;font:400 10px var(--mono);font-style:normal;color:var(--deco);
  letter-spacing:0;text-transform:none;text-align:right}
#tuning > summary em::after{content:" ›";color:var(--deco)}
#tuning[open] > summary em{color:var(--mute)}
#tuning[open] > summary em::after{content:" ⌄"}
#tuning > summary:hover em,#tuning > summary:hover em::after{color:var(--fg)}
/* quote is a fact, not a field: it is the chain's own token and never typed */
.qv{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.qv > span{font:500 11px var(--mono);color:var(--dim)}
#btn-quote-edit{padding:3px 7px;font:500 9px var(--mono);font-weight:500;color:var(--mute);
  letter-spacing:.08em;text-transform:lowercase;border-color:var(--line)}
.qv input{flex:1 0 100%;height:32px;padding:0 9px;font-size:12px}

/* which checkbox ticked itself, and who ticked it */
.checks .chk em{font-style:normal;color:var(--deco);font-size:10px}

/* the sentence before the key */
.sumbox{margin-top:15px;border-left:2px solid var(--brand);padding:1px 0 1px 11px}
.sumbox > .l{font:500 9px var(--mono);letter-spacing:.16em;color:var(--deco);text-transform:uppercase}
.sumbox > p{margin:6px 0 0;font-size:11.5px;line-height:1.6;color:var(--fg)}
.sumbox > p b{color:var(--cyan);font-weight:500}
.sumbox > p.x{margin-top:6px;font-size:10px;color:var(--dim)}
.sumbox > p.x:empty{display:none}
.sumbox > p.x b{color:var(--warn);font-weight:500}

/* run says what it is still waiting for */
#btn-run.wait{background:transparent;border-color:var(--line2);color:var(--mute);letter-spacing:.1em}
#btn-run.wait::before{content:"· "}
#btn-run.wait:hover:not(:disabled){background:transparent;border-color:var(--warn);color:var(--warn);box-shadow:none}

/* The key stays reachable. The ticket is taller than the column on most
   screens, and a RUN button that has to be scrolled to is a RUN button that
   gets missed -- which is exactly what happened before. The echo keeps its
   own scroll so a long command cannot push everything else out of reach. */
@media(min-width:1080px){
  .ticket .cmd{max-height:116px;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
  .ticket .keys{position:sticky;bottom:0;z-index:2;box-shadow:0 -12px 20px rgba(6,8,10,.8)}
}