/* SN25 Intel — design system, carried over from sn25-owner-revenues so the two
   read as one product. Dark-first, after taomarketcap.com: near-black navy
   surfaces, hairline borders, Inter with tabular figures, green/red deltas.

   Kept as a copy of that file rather than a trimmed subset: it is a shared
   system, and the pages still on the older stylesheet are meant to follow. Edit
   it there first, then bring it across. */

:root{
  --bg:#0b0d12;--bg-2:#0f1218;--card:#12151c;--card-hi:#171b24;--border:#1f2430;--border-hi:#2c3342;
  --text:#e8eaf0;--text-2:#9aa2b5;--text-3:#5f677a;
  --accent:#3987e5;--up:#16c784;--down:#ea3943;--warn:#f0b90b;
  --s1:#3987e5;--s2:#d95926;--s3:#9085e9;   /* emission · yield · take (validated, dark) */
  --buy:#3987e5;--sell:#ea3943;            /* order chart, diverging (validated, dark) */
  --grid:#1a1f29;--shadow:0 1px 0 rgba(255,255,255,.02) inset;
  color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --bg:#f6f7f9;--bg-2:#eef0f4;--card:#ffffff;--card-hi:#f8f9fb;--border:#e3e6ec;--border-hi:#cfd4dd;
    --text:#0f1219;--text-2:#545c6e;--text-3:#8a91a1;
    --accent:#2a78d6;--up:#0e9f6e;--down:#d92d3a;--warn:#b7791f;
    --s1:#2a78d6;--s2:#eb6834;--s3:#4a3aa7;--grid:#eef0f4;color-scheme:light;
    --buy:#2a78d6;--sell:#d92d3a;          /* order chart, diverging (validated, light) */
  }
}
:root[data-theme="light"]{
  --bg:#f6f7f9;--bg-2:#eef0f4;--card:#ffffff;--card-hi:#f8f9fb;--border:#e3e6ec;--border-hi:#cfd4dd;
  --text:#0f1219;--text-2:#545c6e;--text-3:#8a91a1;
  --accent:#2a78d6;--up:#0e9f6e;--down:#d92d3a;--warn:#b7791f;
  --s1:#2a78d6;--s2:#eb6834;--s3:#4a3aa7;--grid:#eef0f4;color-scheme:light;
  --buy:#2a78d6;--sell:#d92d3a;            /* order chart, diverging (validated, light) */
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--text);font:14px/1.5 Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-feature-settings:"tnum" 1,"cv11" 1;min-height:100vh;display:flex;flex-direction:column}
a{color:inherit;text-decoration:none}
.num{font-variant-numeric:tabular-nums}
.up{color:var(--up)}.down{color:var(--down)}.muted{color:var(--text-3)}.sec{color:var(--text-2)}

/* ticker strip */
.ticker{border-bottom:1px solid var(--border);background:var(--bg-2);font-size:12px;color:var(--text-2)}
.ticker-in{max-width:1280px;margin:0 auto;padding:7px 16px;display:flex;gap:22px;overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.ticker-in::-webkit-scrollbar{display:none}
.ticker b{color:var(--text);font-weight:600;margin-left:4px}

/* header */
header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
nav{max-width:1280px;margin:0 auto;padding:0 16px;height:56px;display:flex;align-items:center;gap:28px}
.brand{white-space:nowrap;display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px;letter-spacing:-.01em}
.brand img{width:24px;height:24px}
.brand small{font-weight:500;color:var(--text-3);font-size:12px}
/* One page, so the nav carries no links: this is the spacer that pushes the
   theme button to the right of the brand. */
.links{flex:1;min-width:0}
.icon-btn{background:var(--card);border:1px solid var(--border);color:var(--text-2);width:34px;height:34px;border-radius:8px;
  cursor:pointer;display:grid;place-items:center}
.icon-btn:hover{color:var(--text);border-color:var(--border-hi)}

main{flex:1;width:100%;max-width:1280px;margin:0 auto;padding:24px 16px 48px}
footer{border-top:1px solid var(--border);color:var(--text-3);font-size:12px}
footer div{max-width:1280px;margin:0 auto;padding:18px 16px;display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between}

/* page head */
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
h1{font-size:24px;font-weight:700;letter-spacing:-.02em}
h2{font-size:15px;font-weight:600;letter-spacing:-.01em}
.sub{color:var(--text-2);font-size:13px;margin-top:4px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;font-size:11.5px;font-weight:600;
  border:1px solid var(--border);color:var(--text-2);background:var(--card)}
.chip i{width:6px;height:6px;border-radius:50%;background:var(--up)}
.chip.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,var(--border))}
.chip.warn i{background:var(--warn)}

/* segmented control */
.seg{display:inline-flex;background:var(--card);border:1px solid var(--border);border-radius:8px;padding:2px}
.seg button{background:none;border:0;color:var(--text-2);font:600 12px Inter,system-ui,sans-serif;padding:5px 11px;border-radius:6px;cursor:pointer}
.seg button.on{background:var(--card-hi);color:var(--text);box-shadow:inset 0 0 0 1px var(--border-hi)}

/* KPI strip */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
.kpi{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px 16px;min-width:0}
.kpi .lbl{font-size:12px;color:var(--text-2);font-weight:500;display:flex;justify-content:space-between;gap:8px}
.kpi .val{font-size:22px;font-weight:700;letter-spacing:-.02em;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi .alt{font-size:12.5px;color:var(--text-2);margin-top:2px;display:flex;gap:8px;flex-wrap:wrap}

/* cards & grid */
.grid{display:grid;gap:16px}
.g2{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-main{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
.card{background:var(--card);border:1px solid var(--border);border-radius:12px;min-width:0}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px 0;flex-wrap:wrap}
.card-h .sub{margin-top:2px;font-size:12px}
.card-b{padding:12px 16px 16px}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--text-2)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{width:10px;height:10px;border-radius:3px;display:inline-block}
/* the hatch that marks alpha leaving with no order behind it */
.legend i.hatch{background:repeating-linear-gradient(45deg,var(--sell) 0 2px,color-mix(in srgb,var(--sell) 30%,transparent) 2px 5px)}

/* chart */
.chart{position:relative;width:100%}
.chart svg{display:block;width:100%;overflow:visible}
.chart .ax{font-size:11px;fill:var(--text-3);font-family:inherit}
.chart .gl{stroke:var(--grid);stroke-width:1}
.chart .base{stroke:var(--border-hi);stroke-width:1}
.chart .xh{stroke:var(--text-3);stroke-width:1;stroke-dasharray:3 3}
.tip{position:absolute;pointer-events:none;background:var(--card-hi);border:1px solid var(--border-hi);border-radius:10px;
  padding:9px 11px;font-size:12px;min-width:170px;box-shadow:0 8px 24px rgba(0,0,0,.35);opacity:0;transition:opacity .08s;z-index:5}
.tip .t{font-weight:600;margin-bottom:5px;color:var(--text)}
.tip .r{display:flex;justify-content:space-between;gap:14px;color:var(--text-2)}
.tip .r b{color:var(--text);font-weight:600}
.tip .r i{width:8px;height:8px;border-radius:2px;display:inline-block;margin-right:6px}
.tip .tot{border-top:1px solid var(--border);margin-top:5px;padding-top:5px}

/* driver mix */
.mix{display:flex;height:10px;border-radius:999px;overflow:hidden;gap:2px;background:var(--bg-2)}
.mix div{height:100%}
.mix-rows{margin-top:12px;display:grid;gap:10px}
.mix-row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;font-size:13px}
.mix-row i{width:10px;height:10px;border-radius:3px}
.mix-row .r{text-align:right}
.mix-row .r small{display:block;color:var(--text-3);font-size:11.5px}

/* tables */
.tbl-wrap{overflow-x:auto;border-top:1px solid var(--border)}
table{width:100%;border-collapse:collapse;font-size:13px}
th{position:sticky;top:0;background:var(--card);color:var(--text-2);font-weight:600;font-size:12px;text-align:right;
  padding:10px 12px;border-bottom:1px solid var(--border);white-space:nowrap;cursor:default}
th:first-child,td:first-child{text-align:left}
td{padding:10px 12px;border-bottom:1px solid var(--border);text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
tbody tr:hover td{background:var(--card-hi)}
tbody tr:last-child td{border-bottom:0}
td .dot{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px;vertical-align:1px}
tr.total td{font-weight:700;background:var(--bg-2)}
tr.dim td{color:var(--text-3)}
tr.detail td{background:var(--bg-2);white-space:normal;text-align:left;color:var(--text-2);font-size:12.5px}
.badge{display:inline-block;padding:2px 7px;border-radius:6px;font-size:11px;font-weight:600;border:1px solid var(--border);color:var(--text-2)}
.badge.ok{color:var(--up);border-color:color-mix(in srgb,var(--up) 35%,var(--border))}
.badge.check{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 40%,var(--border))}
.badge.partial{color:var(--accent);border-color:color-mix(in srgb,var(--accent) 40%,var(--border))}
.expander{cursor:pointer}
.btn{background:var(--card);border:1px solid var(--border);color:var(--text);border-radius:8px;padding:6px 12px;font:600 12px Inter,system-ui,sans-serif;cursor:pointer}
.btn:hover{border-color:var(--border-hi)}

/* roll-forward */
.rf{display:grid;gap:0}
.rf div{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px dashed var(--border);font-size:13px}
.rf div:last-child{border-bottom:0}
.rf .k{color:var(--text-2);display:flex;align-items:center;gap:8px}
.rf .k i{width:10px;height:10px;border-radius:3px}
.rf .end{font-weight:700;border-top:1px solid var(--border-hi);border-bottom:0;margin-top:2px}

.note{font-size:12px;color:var(--text-3);margin-top:10px;line-height:1.6}
.notice{display:flex;gap:10px;align-items:flex-start;background:color-mix(in srgb,var(--warn) 8%,var(--card));
  border:1px solid color-mix(in srgb,var(--warn) 35%,var(--border));border-radius:12px;padding:12px 14px;font-size:13px;color:var(--text-2);margin-bottom:16px}
.notice b{color:var(--text)}
.section{margin-top:28px}
.stat-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--border);border-top:1px solid var(--border)}
.stat-row>div{background:var(--card);padding:12px 16px}
.stat-row .l{font-size:11.5px;color:var(--text-2)}
.stat-row .v{font-size:16px;font-weight:700;margin-top:2px}
.stat-row .a{font-size:12px;color:var(--text-3)}
.drv-head{display:flex;align-items:center;gap:10px}
.drv-head i{width:12px;height:12px;border-radius:3px}

@media (max-width:960px){
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g2,.g3,.g-main{grid-template-columns:minmax(0,1fr)}
  .stat-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  nav{gap:12px}
  .brand small{display:none}
  .brand span.long{display:none}
  .kpi .val{font-size:19px}
  h1{font-size:20px}
}

/* ---- additions for the holder pages ---------------------------------- */

/* a wallet: a name chip and the address, side by side and never wrapped apart */
.w{display:flex;align-items:center;gap:8px;min-width:0}
.w .addr{color:var(--text-2);font-size:12.5px;white-space:nowrap}
.w a.addr:hover{color:var(--accent)}
.name{font-weight:600;white-space:nowrap}

/* holder type, as the badge the system already has, with a colour per verdict */
.badge.buy{color:var(--up);border-color:color-mix(in srgb,var(--up) 35%,var(--border))}
.badge.sell{color:var(--down);border-color:color-mix(in srgb,var(--down) 40%,var(--border))}
.badge.flat{color:var(--text-3)}
.badge.move{color:var(--s2);border-color:color-mix(in srgb,var(--s2) 40%,var(--border))}
.badge.infra{color:var(--s3);border-color:color-mix(in srgb,var(--s3) 40%,var(--border))}
/* role, not stance: a fact about the wallet rather than a reading of it */
.badge.own{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,var(--border));background:color-mix(in srgb,var(--warn) 9%,transparent)}

/* share of supply, as a hairline under the number rather than a column of its own */
.sb{height:3px;border-radius:999px;background:var(--bg-2);margin-top:5px;overflow:hidden}
.sb i{display:block;height:100%;background:var(--accent);border-radius:999px}

/* the row-level note under a cell: an order count, how much record there is,
   or the reason behind a holder type. The table is nowrap, so the one that
   carries a sentence wraps inside a width of its own. */
.sub-cell{font-size:11px;color:var(--text-3);margin-top:2px;font-weight:400}
.sub-cell.why{white-space:normal;max-width:210px;line-height:1.45}
/* a column that carries a sentence reads left, whatever the table's default */
th.l,td.l{text-align:left}
.warn-ink{color:var(--warn)}

/* search sits in the head beside the controls */
.find{background:var(--card);border:1px solid var(--border);color:var(--text);border-radius:8px;
  padding:6px 10px;font:500 12.5px Inter,system-ui,sans-serif;min-width:170px}
.find:focus{outline:none;border-color:var(--border-hi)}
.find::placeholder{color:var(--text-3)}
@media (max-width:560px){.find{min-width:0;width:100%}}


/* ---- the per-wallet detail row -----------------------------------------
   A wallet's orders and the note about them open under its row, so the table
   stays scannable and the research is one click away rather than a page away. */
.wrow{cursor:pointer}
.wrow .chev{display:inline-block;width:10px;color:var(--text-3);transition:transform .16s}
tr.open .chev{transform:rotate(90deg);color:var(--accent)}
tr.det>td{padding:0;background:var(--bg-2);border-bottom:1px solid var(--border)}
.det-in{padding:18px 16px 20px;display:grid;gap:16px;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  white-space:normal;text-align:left}
@media (max-width:860px){.det-in{grid-template-columns:minmax(0,1fr)}}
.det-in h3{font-size:13px;font-weight:600;letter-spacing:-.01em}
.det-note{font-size:13px;line-height:1.65;color:var(--text-2)}
.det-note b{color:var(--text)}
.det-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--border);
  border:1px solid var(--border);border-radius:10px;overflow:hidden;margin-top:12px}
.det-facts>div{background:var(--card);padding:9px 11px}
.det-facts .l{font-size:11px;color:var(--text-3)}
.det-facts .v{font-size:13px;font-weight:600;margin-top:1px;font-variant-numeric:tabular-nums}

/* ---- the order chart ---------------------------------------------------
   Buys above the baseline, sells below: the sign of the position IS the
   encoding, so colour is the second channel and not the only one. The pair is
   blue/red rather than the green/red the deltas use — validated against both
   surfaces, where green/red lands at deutan ΔE 6-7 and blue/red at 24. */
.ochart{position:relative;width:100%}
.ochart svg{display:block;width:100%;overflow:visible}
.ochart .ax{font-size:10.5px;fill:var(--text-3);font-family:inherit}
.ochart .gl{stroke:var(--grid);stroke-width:1}
.ochart .zero{stroke:var(--border-hi);stroke-width:1}
.ochart .lbl{font-size:10.5px;fill:var(--text-2);font-family:inherit;font-weight:600}
.ochart .empty{font-size:12.5px;fill:var(--text-3);font-family:inherit}
.obar{cursor:pointer}
.obar:hover{opacity:.78}
.otip{position:fixed;z-index:80;pointer-events:none;background:var(--card-hi);
  border:1px solid var(--border-hi);border-radius:10px;padding:8px 10px;font-size:12px;
  box-shadow:0 10px 30px color-mix(in srgb,#000 45%,transparent);max-width:min(240px,calc(100vw - 20px))}
.otip .t{font-weight:600;color:var(--text);margin-bottom:4px}
.otip .r{display:flex;justify-content:space-between;gap:14px;color:var(--text-2)}
.otip .r b{color:var(--text);font-weight:600}
.otip .k{display:inline-block;width:12px;height:2px;border-radius:1px;margin-right:6px;vertical-align:3px}

/* the orders as a table, so every value the chart shows is reachable without a pointer */
.otable{margin-top:12px;max-height:208px;overflow:auto;border:1px solid var(--border);border-radius:10px}
.otable table{font-size:12px}
.otable th{font-size:11px;padding:7px 10px}
.otable td{padding:6px 10px}

/* ---- info dots ----------------------------------------------------------
   A dot beside a heading holds what would otherwise be a paragraph under the
   table. One bubble is shared and moved to whichever dot asked for it: the
   dots sit inside cards that clip their overflow, so it is fixed to the
   viewport rather than positioned inside them. */
.info{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;flex:0 0 auto;
  border-radius:50%;border:1px solid var(--border-hi);background:transparent;color:var(--text-3);
  font-family:Georgia,"Times New Roman",serif;font-size:10px;font-style:italic;font-weight:700;line-height:1;
  padding:0;cursor:pointer;vertical-align:middle;position:relative;transition:color .15s,border-color .15s}
.info::after{content:'';position:absolute;top:-8px;right:-8px;bottom:-8px;left:-8px}
.info:hover,.info[aria-expanded="true"]{border-color:var(--accent);color:var(--accent)}
.info:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
th .info{margin-left:3px;vertical-align:-1px}
/* the header is a control now, so say so to a pointer */
th:has(.info){cursor:default}
.infopop{position:fixed;z-index:300;display:none;width:max-content;max-width:min(320px,calc(100vw - 20px));
  background:var(--card-hi);border:1px solid var(--border-hi);border-radius:10px;padding:10px 12px;
  font-size:12px;line-height:1.6;color:var(--text-2);box-shadow:0 10px 30px color-mix(in srgb,#000 45%,transparent)}
.infopop.on{display:block}
.infopop b{color:var(--text)}