/* BANE CONSOLE — the app, written in the site's own design language.

   The landing page speaks in inked outlines, generous radii, Clash Display headings and
   one green accent. This stylesheet says the same thing for a data-dense screen: same
   tokens, same borders, same buttons, same lift on hover. It is hand-written — the old
   generator that recoloured the donor's terminal CSS is gone. */

@font-face{font-family:'Clash Display';src:url('assets/fonts/ClashDisplay-Semibold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Clash Display';src:url('assets/fonts/ClashDisplay-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('assets/fonts/Satoshi-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('assets/fonts/Satoshi-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Satoshi';src:url('assets/fonts/Satoshi-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('assets/fonts/JetBrainsMono-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  /* the landing page's palette, unchanged */
  --bg:#ffffff; --bg-alt:#f9faf9; --bg-alt2:#eceeea;
  --ink:#0f0f0f; --ink-strong:#000000; --mut:#5f6b6c;
  --line:rgba(15,15,15,.12);
  --acc:#2fc93f; --acc-deep:#1fa733;
  --bad:#c8452f; --warn:#b5751a;

  --fd:'Clash Display',sans-serif;
  --ft:'Satoshi',system-ui,sans-serif;
  --fm:'JetBrains Mono',ui-monospace,monospace;

  --fs-body:0.96875rem; --fs-small:0.8125rem; --fs-label:0.75rem;
  --e-out:cubic-bezier(.165,.84,.44,1);
  --t-fast:.5s;
  --radius:1.25rem;
  --pad-x:clamp(1rem,3vw,2.5rem);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--bg-alt);color:var(--ink);
  font:400 var(--fs-body)/1.5 var(--ft);
  -webkit-font-smoothing:antialiased;
  padding-bottom:4.5rem;
}
a{color:inherit;text-decoration:none}
button,select,input{font:inherit;color:inherit;background:none;border:0}
button,select{cursor:pointer}
::selection{background:var(--acc);color:var(--ink-strong)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px}
.mono{font-family:var(--fm);font-variant-numeric:tabular-nums}

/* ---------- top bar — the landing header, carried over ---------- */
.top{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;gap:1.25rem;flex-wrap:wrap;
  padding:.9rem var(--pad-x);
  background:var(--bg);border-bottom:1.5px solid var(--ink);
}
.top-brand{display:flex;align-items:center;gap:.7rem}
.brand-link{display:flex;align-items:center;gap:.55rem}
.mark{height:26px;width:auto;display:block}
.wordmark{font-family:var(--fd);font-weight:600;font-size:1.05rem;letter-spacing:-.01em;color:var(--ink)}
.wordmark em{font-style:normal;font-weight:500;color:var(--mut);margin-left:.4em}
.pill{
  font-family:var(--fm);font-size:var(--fs-label);letter-spacing:.06em;
  color:var(--acc-deep);border:1.5px solid var(--acc-deep);border-radius:999px;padding:.32em .8em;
}
.navlink{
  font-size:var(--fs-small);font-weight:500;color:var(--mut);
  border-radius:999px;padding:.45em .9em;
  transition:background-color var(--t-fast) var(--e-out),color var(--t-fast) var(--e-out);
}
.navlink:hover{background:var(--bg-alt2);color:var(--ink)}

/* Wide: one row — brand, stats pushed right, then the wallet button.
   Narrow: the stats drop to their own line and the button stays up top on the right. */
.top-brand{flex:none}
.top-stats{
  display:flex;gap:1.15rem;flex-wrap:wrap;align-items:center;
  order:3;flex:1 1 100%;margin-left:0;
  font-size:var(--fs-small);color:var(--mut);
}
#btnWallet{order:2;margin-left:auto;flex:none}
@media (min-width:1250px){
  /* no wrapping at this width: the stats shrink and wrap inside themselves instead of
     pushing the button onto a second row */
  .top{flex-wrap:nowrap}
  .top-stats{order:2;flex:1 1 auto;min-width:0;margin-left:auto;justify-content:flex-end}
  #btnWallet{order:3;margin-left:1rem}
}
.top-stats b{color:var(--ink);font-weight:500}
.top-stats .phase{color:var(--acc-deep)}
.top-stats .phase b{color:var(--acc-deep)}
.mode-tag{
  font-family:var(--fm);font-size:var(--fs-label);letter-spacing:.12em;
  border-radius:999px;padding:.35em .85em;border:1.5px solid var(--ink);
}
.mode-tag.live{background:var(--acc);color:var(--ink-strong)}
.mode-tag.sim{background:var(--bg-alt2);color:var(--ink)}

/* the buttons are the landing page's buttons */
.ctl,.act{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  font-family:var(--ft);font-weight:700;font-size:var(--fs-small);
  border-radius:999px;padding:.72em 1.35em;white-space:nowrap;
  border:2px solid var(--ink);background:var(--bg);color:var(--ink);
  transition:background-color var(--t-fast) var(--e-out),color var(--t-fast) var(--e-out),transform var(--t-fast) var(--e-out);
}
.ctl:hover,.act:hover{background:var(--ink);color:#fff;transform:translateY(-2px)}
.ctl-ice,.act-ice{background:var(--acc);color:var(--ink-strong)}
.ctl-ice:hover,.act-ice:hover{background:var(--ink);color:#fff}
.ctl:disabled{opacity:.45;cursor:default;transform:none;background:var(--bg);color:var(--ink)}

/* epoch progress runs along the header's edge */
.epoch-line{position:absolute;left:0;right:0;bottom:-1.5px;height:3px;background:transparent}
.epoch-line span{display:block;height:100%;width:0;background:var(--acc);transition:width .9s linear;border-radius:0 3px 3px 0}

/* ---------- alerts ---------- */
#alerts{padding:1rem var(--pad-x) 0;max-width:96rem;margin-inline:auto}
.alert{
  border:1.5px solid var(--ink);border-radius:var(--radius);
  padding:.9rem 1.2rem;font-size:var(--fs-small);background:var(--bg);
}
.alert-warn{border-color:var(--warn);color:var(--warn);background:rgba(181,117,26,.06)}
.alert-bad{border-color:var(--bad);color:var(--bad);background:rgba(200,69,47,.06)}

/* ---------- grid of cards ---------- */
.grid{
  display:grid;grid-template-columns:repeat(12,1fr);gap:1rem;align-items:start;
  padding:1.25rem var(--pad-x) 2rem;max-width:96rem;margin-inline:auto;
}
.col-12{grid-column:span 12}
.col-7{grid-column:span 7}
.col-5{grid-column:span 5}
.col-4{grid-column:span 4}
@media (max-width:1080px){ .col-7,.col-5,.col-4{grid-column:span 12} }

.card{
  background:var(--bg);border:1.5px solid var(--ink);border-radius:var(--radius);
  padding:clamp(1.1rem,2.2vw,1.6rem);
  transition:transform var(--t-fast) var(--e-out),box-shadow var(--t-fast) var(--e-out);
}
.card:hover{transform:translate(-2px,-4px);box-shadow:6px 8px 0 rgba(15,15,15,.08)}
.card h2{
  font-family:var(--fd);font-weight:600;font-size:1.15rem;line-height:1.2;
  display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;margin-bottom:1.1rem;
}
/* the kicker device from the landing page: uppercase label with a green dot */
.cn{
  font-family:var(--ft);font-weight:500;font-size:var(--fs-label);
  letter-spacing:.14em;text-transform:uppercase;color:var(--mut);
  display:inline-flex;align-items:center;gap:.45em;
}
.cn::before{content:"";width:.42em;height:.42em;border-radius:50%;background:var(--acc);flex:none}
.lf-status{font-size:var(--fs-label);letter-spacing:.08em;color:var(--mut);margin-left:auto}
.lf-status.ok{color:var(--acc-deep)}
.lf-status.err{color:var(--bad)}

.foot{font-size:var(--fs-small);color:var(--mut);margin-top:1rem;line-height:1.55}

/* ---------- basket rows ---------- */
.b-row{
  display:grid;grid-template-columns:4.5rem 1fr auto auto;align-items:center;
  gap:.9rem;padding:.65rem 0;border-bottom:1px solid var(--line);
}
.b-row:last-of-type{border-bottom:0}
.b-tkr{font-family:var(--fm);font-size:var(--fs-small);letter-spacing:.04em;color:var(--ink)}
.b-bar{height:.6rem;background:var(--bg-alt2);border-radius:999px;overflow:hidden}
.b-fill{height:100%;background:var(--acc);border-radius:999px;transition:width .7s var(--e-out)}
.b-fill.cash{background:var(--ink)}
.b-w{font-family:var(--fm);font-size:var(--fs-small);color:var(--ink);min-width:4rem;text-align:right}
.b-p{font-family:var(--fm);font-size:var(--fs-small);color:var(--mut);min-width:5.5rem;text-align:right}

/* ---------- chart ---------- */
#chart{width:100%;height:240px;display:block}
.legend{display:flex;gap:1.2rem;flex-wrap:wrap;margin-top:.9rem;font-size:var(--fs-label);color:var(--mut)}
.legend span{display:inline-flex;align-items:center;gap:.45em}
.sw{width:1.1rem;height:2px;border-radius:2px;display:inline-block}
.sw-fact{background:var(--acc-deep)}
.sw-shadow{background:#2f7dc9}

/* ---------- track record ---------- */
.t-item{
  background:var(--bg-alt);border:1.5px solid var(--line);border-radius:1rem;
  padding:.9rem 1.1rem;margin-bottom:.7rem;cursor:pointer;
  transition:border-color var(--t-fast) var(--e-out),background-color var(--t-fast) var(--e-out);
}
.t-item:hover{border-color:var(--ink);background:var(--bg)}
.t-head{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap}
.t-ep{font-family:var(--fm);font-size:var(--fs-small);font-weight:700;
  border:1.5px solid var(--ink);border-radius:999px;padding:.2em .7em}
.t-hash{font-family:var(--fm);font-size:11.5px;color:var(--mut);word-break:break-all}
.t-open-hint{color:var(--mut);font-size:var(--fs-small)}
.t-badge{
  margin-left:auto;font-size:var(--fs-label);letter-spacing:.06em;
  border-radius:999px;padding:.28em .8em;border:1.5px solid var(--line);color:var(--mut);white-space:nowrap;
}
.t-ok{border-color:var(--acc-deep);color:var(--acc-deep)}
.t-sealed{border-style:dashed}
.t-fail{border-color:var(--bad);color:var(--bad)}
.t-thesis{margin-top:.6rem;font-size:var(--fs-small);line-height:1.6;color:var(--ink)}
.t-meta{margin-top:.5rem;font-family:var(--fm);font-size:11px;color:var(--mut)}
.t-details{margin-top:.7rem;padding-top:.7rem;border-top:1px solid var(--line)}
.t-details .foot{margin-top:0;word-break:break-all;font-family:var(--fm);font-size:11px}
.t-dnav{font-family:var(--fm);font-size:var(--fs-small)}

/* ---------- guard checks ---------- */
.g-lim{font-family:var(--fm);font-size:var(--fs-label);color:var(--mut);
  letter-spacing:.06em;margin-bottom:.9rem}
.g-row{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.7rem;
  padding:.6rem 0;border-bottom:1px solid var(--line);font-size:var(--fs-small);
}
.g-row:last-of-type{border-bottom:0}
.g-dot{width:.55rem;height:.55rem;border-radius:50%;background:var(--acc);flex:none}
.g-bad .g-dot{background:var(--bad)}
.g-name{color:var(--ink)}
.g-bad .g-name{color:var(--bad)}
.g-detail{font-family:var(--fm);font-size:11.5px;color:var(--mut);text-align:right}
.g-cancel{margin-top:.9rem;font-size:var(--fs-small);color:var(--bad)}

/* ---------- tables ---------- */
table.h{width:100%;border-collapse:collapse;font-size:var(--fs-small)}
table.h th{
  text-align:left;font-weight:500;font-size:var(--fs-label);letter-spacing:.12em;
  text-transform:uppercase;color:var(--mut);padding:0 .6rem .7rem 0;border-bottom:1.5px solid var(--line);
}
table.h td{padding:.7rem .6rem .7rem 0;border-bottom:1px solid var(--line);vertical-align:middle}
table.h tr:last-child td{border-bottom:0}
table.h td.r,table.h th.r{text-align:right;padding-right:0}
table.h td a{border-bottom:1px solid var(--line)}
table.h td a:hover{border-color:var(--acc-deep);color:var(--acc-deep)}
.mut{color:var(--mut)}

/* ---------- live cells (wallet, token) ---------- */
.live-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.75rem}
.live-cell{
  background:var(--bg-alt);border:1.5px solid var(--line);border-radius:1rem;padding:.85rem 1rem;
}
.live-cell span{display:block;font-size:var(--fs-label);letter-spacing:.1em;
  text-transform:uppercase;color:var(--mut);margin-bottom:.35rem}
.live-cell b{font-family:var(--fm);font-weight:500;font-size:var(--fs-small);
  color:var(--ink);word-break:break-all;line-height:1.45}
.live-cell b a{border-bottom:1px solid var(--line)}
.live-cell b a:hover{border-color:var(--acc-deep);color:var(--acc-deep)}

/* ---------- governance ---------- */
.ph-steps{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1rem}
.ph{
  font-family:var(--fm);font-size:var(--fs-label);letter-spacing:.04em;
  border:1.5px solid var(--line);border-radius:999px;padding:.35em .85em;color:var(--mut);
}
.ph.on{background:var(--acc);border-color:var(--ink);color:var(--ink-strong);font-weight:700}
.ph.done{border-color:var(--acc-deep);color:var(--acc-deep)}
.gq{
  background:var(--bg-alt);border:1.5px solid var(--line);border-radius:1rem;
  padding:.8rem 1rem;font-size:var(--fs-small);margin-bottom:.6rem;
}
.gov-btns{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.9rem}

/* ---------- node log ---------- */
#log{max-height:22rem;overflow-y:auto;font-size:var(--fs-small);line-height:1.7}
#log div{padding:.45rem 0;border-bottom:1px solid var(--line);color:var(--ink)}
#log div:last-child{border-bottom:0}
#log b{font-family:var(--fm);font-size:11px;color:var(--acc-deep);margin-right:.7rem}
#log::-webkit-scrollbar{width:8px}
#log::-webkit-scrollbar-thumb{background:var(--bg-alt2);border-radius:999px}

/* ---------- footer ---------- */
.bottom{
  padding:1.5rem var(--pad-x) 5rem;max-width:96rem;margin-inline:auto;
  font-size:var(--fs-label);letter-spacing:.04em;color:var(--mut);line-height:1.7;
}

/* ---------- contract bar (shared with the front) ---------- */
.cabar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  background:var(--ink);color:#fff;border-top:1.5px solid var(--ink);
}
.cabar-in{
  display:flex;align-items:center;justify-content:center;gap:.75rem;
  padding:.6rem var(--pad-x);max-width:96rem;margin-inline:auto;
}
.ca-label{
  font-family:var(--fm);font-size:var(--fs-label);letter-spacing:.16em;flex:none;
  background:var(--acc);color:var(--ink-strong);border-radius:999px;padding:.35em .8em;
}
.ca-val{
  font-family:var(--fm);font-size:var(--fs-small);color:#fff;cursor:pointer;
  border:1.5px solid rgba(255,255,255,.28);border-radius:999px;padding:.42em 1em;
  max-width:min(64vw,42rem);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  transition:border-color var(--t-fast) var(--e-out),background-color var(--t-fast) var(--e-out);
}
.ca-val:hover{border-color:var(--acc);background:rgba(47,201,63,.14)}
.ca-val.copied{border-color:var(--acc);background:var(--acc);color:var(--ink-strong)}
.ca-x{
  display:grid;place-items:center;width:2rem;height:2rem;border-radius:999px;flex:none;
  border:1.5px solid rgba(255,255,255,.28);color:#fff;
  transition:background-color var(--t-fast) var(--e-out),border-color var(--t-fast) var(--e-out);
}
.ca-x:hover{background:var(--acc);border-color:var(--acc);color:var(--ink-strong)}
.ca-x.off{opacity:.42;pointer-events:none;cursor:default}
.ca-x svg{width:.95rem;height:.95rem}

@media (max-width:700px){
  .top{gap:.8rem}
  .top-stats{width:100%;margin-left:0;gap:.8rem;font-size:var(--fs-label)}
  .card h2{font-size:1.05rem}
  /* keep ticker, bar, weight and price on one line — tighter columns, not a second row */
  .b-row{grid-template-columns:3.2rem minmax(2.5rem,1fr) auto auto;gap:.5rem;font-size:var(--fs-label)}
  .b-tkr,.b-w,.b-p{font-size:11.5px}
  .b-w{min-width:3rem}
  .b-p{min-width:4.2rem}
}
@media (max-width:520px){
  .cabar-in{gap:.5rem;padding-inline:.75rem}
  .ca-val{max-width:52vw}
}