/* ============================================================================
   FFI Engine — site.css — the SHARED LAYOUT CONTRACT
   The ONE place page width, alignment, and shared chrome (nav + title band +
   footer) are decided. Every page loads it BEFORE its own <style>. If a page
   looks misaligned, the bug is a local rule — delete it, don't patch here.

   THE MODEL — one fixed shell, bordered, centered.
   The whole site is a single fixed-width column: max-width var(--shell),
   centered, with a left and right border. EVERYTHING lives inside it and
   shares those two edges — the top-nav, the title band, the content, and the
   footer all start and end on the same vertical lines. There is no full-bleed
   band; nothing spans the viewport. On a wide monitor the shell sits centered
   with a darker margin on either side; on an iPad Pro 13" landscape (1366px)
   it fills the screen with a thin bordered margin.

   Wide content (the Tokens grid, wide tables) scrolls HORIZONTALLY inside the
   shell — the shell's own width never changes.
   ========================================================================= */

:root {
  /* shared palette (a page may ADD vars, never redefine these) */
  --bg:#0e1116; --panel:#161b22; --line:#2a313c; --text:#e6edf3;
  --muted:#8b949e; --accent:#58a6ff; --nav:#0c0f14; --dim:#747e89;
  --row:#11151b;
  --ledger:#0b0c0a; --surface-deep:#0b1016;
  --bright:#f0f6fc; --neutral:#adbac7;
  --positive:#3fb950; --negative:#f85149; --risk:#ff4d4f;
  --warning:#e3b341; --signal:#ffb800;
  --positive-bg:#132d1c; --positive-border:#245f34;
  --negative-bg:#35191c; --negative-border:#61282b;
  --warning-bg:#2d2716; --warning-border:#66521a;
  --accent-bg:#111f2f; --accent-border:#2d4d6e;
  --font-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;
  /* one shared type and component scale */
  --type-2xs:10px; --type-xs:11px; --type-sm:12px; --type-md:13px; --type-base:14px;
  --weight-normal:400; --weight-medium:600; --weight-bold:700;
  --page-title-size:22px; --section-title-size:14px;
  --metric-label-size:10px; --metric-value-size:20px; --metric-note-size:11px;
  --control-height:34px; --compact-action-size:24px; --control-radius:4px; --control-pad-x:10px;
  --table-head-size:10px; --table-body-size:12px; --table-compact-size:var(--table-body-size);
  --table-data-color:var(--neutral); --table-identity-color:var(--text);
  --table-cell-y:8px; --table-cell-x:12px; --table-row-height:40px;
  --focus-ring:2px solid var(--accent);
  /* the shell */
  --shell:1320px;   /* fixed content width — fills iPad Pro 13" landscape (1366) with a bordered margin */
  --pad:24px;       /* inner side gutter, shared by every band and the content column */
}

/* the world OUTSIDE the shell — flat solid, a touch darker, so the bordered
   panel reads as the app (no gradient, no shadow — just a darker flat field) */
html {
  background:#080a0e;
  /* Keep the centred shell fixed while short pages load or routes gain overflow. */
  scrollbar-gutter:stable;
}
* { box-sizing:border-box; }
[hidden] { display:none !important; }
:where(button,input,select) { font:inherit; }
button { color:inherit; }

/* THE SHELL — one centered, bordered, full-height column. nav/header/content/
   footer are its block children, so they all share its left+right edges. */
body {
  margin:0 auto; max-width:var(--shell); min-height:100vh;
  background:var(--bg); color:var(--text);
  border-left:1px solid var(--line); border-right:1px solid var(--line);
}
.type-sans-standard,
.type-sans-data,
.type-sans-compact { font:var(--type-base)/1.5 var(--font-sans); font-variant-numeric:tabular-nums; }

/* Shared keyboard contract. Page CSS may change colour, never remove focus. */
:where(a,button,input,select,summary,[tabindex]):focus-visible {
  outline:var(--focus-ring);
  outline-offset:2px;
}

/* Shared form-control contract. Native checkboxes/radios deliberately opt out. */
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select) {
  min-height:var(--control-height);
  border:1px solid var(--line);
  border-radius:var(--control-radius);
  background:var(--surface-deep);
  color:var(--text);
  padding:0 var(--control-pad-x);
  font-family:var(--font-sans);
  font-size:var(--type-sm);
  line-height:1.2;
}
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select):hover {
  border-color:var(--muted);
}
:where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),select):focus-visible {
  border-color:var(--accent);
}
:where(input,textarea)::placeholder { color:var(--dim); opacity:1; }

/* --- shared chrome — each spans the shell, content gutter = --pad ---------- */
.topnav {
  display:flex; align-items:center; gap:2px; flex-wrap:wrap;
  padding:0 var(--pad); min-height:44px;
  background:var(--nav); border-bottom:1px solid var(--line);
  font-family:var(--font-sans); font-size:14px; font-style:normal; font-variant-numeric:tabular-nums;
  font-weight:400; line-height:20px; letter-spacing:normal; text-transform:none;
}
.topnav .brand { font-weight:650; font-size:14px; line-height:20px; color:var(--text); text-decoration:none; margin-right:10px; white-space:nowrap; }
.topnav .brand span { color:var(--accent); }
.topnav .navver { flex:0 0 auto; margin:0 8px 0 -6px; border:1px solid #2d4d6e; border-radius:999px; padding:0 5px;
  color:var(--accent); font-size:10px; font-weight:650; line-height:18px; letter-spacing:.25px; white-space:nowrap; }
.topnav a.nl { color:var(--muted); text-decoration:none; padding:6px 11px; border-radius:6px; font-size:13px; line-height:20px; }
.topnav a.nl:hover { color:var(--text); background:var(--panel); }
.topnav a.nl.active { color:var(--text); background:#1b2530; }
.topnav .brand:focus-visible,
.topnav a.nl:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
/* the shared "last updated" stamp (filled by site.js) — pinned to the right of the nav */
.topnav .navupd { margin-left:auto; min-width:116px; align-self:center; padding-left:14px; color:var(--dim); font-family:var(--font-sans); font-size:12px; line-height:20px; text-align:right; white-space:nowrap; }
.topnav .navupd[data-health="failed"],
.topnav .navupd[data-health="running"] { color:var(--warning); }

.back-to-top {
  position:fixed; z-index:40;
  right:max(14px,calc((100vw - var(--shell))/2 + 14px)); bottom:max(14px,env(safe-area-inset-bottom));
  border:1px solid var(--line); border-radius:4px; background:var(--panel); color:var(--muted); padding:7px 11px;
  font-family:var(--font-sans); font-size:12px; font-weight:600; line-height:18px;
  cursor:pointer; opacity:0; visibility:hidden; pointer-events:none; transform:translateY(6px);
  transition:opacity 140ms ease,transform 140ms ease,visibility 0s linear 140ms;
}
.back-to-top.is-visible {
  border-color:#2d4d6e; color:var(--text); opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
  transition-delay:0s;
}
.back-to-top:hover { border-color:var(--accent); color:var(--accent); }
.back-to-top:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
@media (prefers-reduced-motion:reduce) {
  .back-to-top { transform:none; transition:none; }
}

header {
  padding:14px var(--pad);
  border-bottom:1px solid var(--line); background:var(--panel);
}
header h1 { margin:0 0 4px; font-size:var(--page-title-size); font-weight:var(--weight-bold); line-height:1.2; }
header h1 span { color:var(--accent); }
/* muted small-print suffix inside an h1 (replaces the per-page inline styles) */
h1 .hsub { color:var(--muted); font-size:var(--type-sm); font-weight:var(--weight-normal); }
.sub { color:var(--muted); font-size:12px; }
.sub b { color:var(--text); font-weight:600; }
.sub-wide { max-width:980px; }
.muted { color:var(--muted); }
.sr-only {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.count { margin-left:auto; color:var(--muted); font-size:12px; }
.filter-control:focus-visible { outline:var(--focus-ring); outline-offset:-2px; }
thead th.r { text-align:right; }
.data-table-scroll {
  width:100%;
  max-width:100%;
  max-height:none;
  overflow-x:auto;
  overflow-y:clip;
  overscroll-behavior-x:contain;
}

/* -------------------------------------------------------------------------
   Shared evidence-table contract
   Standard is the default. Compact and matrix are the only density variants.
   A wrapper may scroll horizontally, never vertically.
   ------------------------------------------------------------------------- */
.data-table {
  --table-sort-y:var(--table-cell-y);
  --table-sort-x:var(--table-cell-x);
  width:100%;
  border-collapse:collapse;
  border-spacing:0;
  color:var(--table-data-color);
  font-family:var(--font-sans);
  font-size:var(--table-body-size);
  font-weight:var(--weight-normal);
  line-height:1.4;
  font-variant-numeric:tabular-nums;
}
.data-table :where(th,td) {
  padding:var(--table-cell-y) var(--table-cell-x);
  border-bottom:1px solid var(--line);
  text-align:left;
  vertical-align:middle;
}
.data-table thead th {
  height:36px;
  background:var(--row);
  color:var(--muted);
  font-size:var(--table-head-size);
  font-weight:var(--weight-bold);
  letter-spacing:.04em;
  line-height:1.25;
  text-transform:uppercase;
  white-space:nowrap;
}
.data-table tbody tr { height:var(--table-row-height); }
.data-table :where(tbody td,tbody th[scope="row"]) {
  color:var(--table-data-color);
  font-family:var(--font-sans);
  font-size:var(--table-body-size);
  font-weight:var(--weight-normal);
}
.data-table :where(tbody tr > :first-child:not([colspan]),tbody .table-identity,tbody th[scope="row"]) {
  color:var(--table-identity-color);
  font-weight:var(--weight-bold);
}
.data-table :where(tbody tr > :only-child[colspan]) {
  color:var(--muted);
  font-weight:var(--weight-normal);
}
.data-table :where(tbody td,tbody th[scope="row"]) :where(button,a,span,b,strong,small) {
  color:inherit;
  font-family:inherit;
  font-size:inherit;
  font-weight:inherit;
}
.data-table :where(tbody tr > :not(:first-child)) :where(b,strong) { font-weight:inherit; }
.data-table tbody tr:hover > :where(th,td) { background:var(--row); }
.data-table tbody tr:focus-visible > :where(th,td),
.data-table tbody tr:focus-within > :where(th,td) { background:var(--accent-bg); }
.data-table :where(.r,.num) { text-align:right; }
.data-table :where(.muted) { color:var(--muted); font-weight:var(--weight-normal); }
.data-table :where(.missing,.dash,.nd) { color:var(--dim); font-weight:var(--weight-normal); }
.data-table--compact { --table-sort-y:6px; --table-sort-x:8px; --table-row-height:36px; }
.data-table--compact :where(th,td) { padding:6px 8px; }
.data-table--matrix { --table-sort-y:5px; --table-sort-x:8px; --table-row-height:34px; }
.data-table--matrix :where(th,td) { padding:5px 8px; }

/* Virtualized grids use the same evidence hierarchy as native tables. */
.data-grid {
  color:var(--table-data-color);
  font-family:var(--font-sans);
  font-size:var(--table-body-size);
  font-weight:var(--weight-normal);
  font-variant-numeric:tabular-nums;
}
.data-grid :where([role="gridcell"],[role="rowheader"]) {
  color:var(--table-data-color);
  font-family:var(--font-sans);
  font-size:var(--table-body-size);
  font-weight:var(--weight-normal);
}
.data-grid :where([role="row"] > :first-child[role="gridcell"],[role="row"] > [role="rowheader"]) {
  color:var(--table-identity-color);
  font-weight:var(--weight-bold);
}
.data-grid :where([role="gridcell"],[role="rowheader"]) :where(button,a,span,b,strong,small) {
  color:inherit;
  font-family:inherit;
  font-size:inherit;
  font-weight:inherit;
}
.data-grid :where([role="row"] > :not(:first-child)) :where(b,strong) { font-weight:inherit; }

.table-sort {
  display:flex;
  width:calc(100% + var(--table-sort-x) + var(--table-sort-x));
  min-height:36px;
  align-items:center;
  justify-content:flex-start;
  gap:5px;
  margin:calc(0px - var(--table-sort-y)) calc(0px - var(--table-sort-x));
  border:0;
  border-radius:2px;
  background:transparent;
  color:inherit;
  padding:var(--table-sort-y) var(--table-sort-x);
  font:inherit;
  letter-spacing:inherit;
  text-align:inherit;
  text-transform:inherit;
  cursor:pointer;
}
th.r .table-sort,
th.num .table-sort,
th.is-numeric .table-sort { justify-content:flex-end; }
.table-sort:hover,
[aria-sort="ascending"] .table-sort,
[aria-sort="descending"] .table-sort { color:var(--accent); }
.table-sort:focus-visible { outline:var(--focus-ring); outline-offset:-2px; }
.table-row-action {
  display:inline-flex;
  min-width:var(--compact-action-size);
  min-height:var(--compact-action-size);
  align-items:center;
  border:0;
  background:transparent;
  color:inherit;
  padding:0;
  font:inherit;
  font-weight:inherit;
  text-align:left;
  text-decoration:underline;
  text-decoration-color:transparent;
  text-underline-offset:3px;
  cursor:pointer;
}
.table-row-action:hover,
.table-row-action:focus-visible { color:var(--accent); text-decoration-color:currentColor; }

.foot {
  padding:10px var(--pad);
  border-top:1px solid var(--line); background:var(--panel);
  font-size:11px; color:var(--muted);
}
.foot b { color:#adbac7; }

/* --- the content column — fills the shell, just an inner gutter ------------ */
/* Used by the "panel" pages (Overview, Analysis, Distribution, Watch, 13F): prose/cards
   sit inset by --pad. The "table" pages (Wallets, Stablecoins, Treasury, ETFs, CEX, Hacks)
   do NOT use .wrap — their toolbars, legends and tables are full-bleed bands (below). */
.wrap { padding:18px var(--pad) 48px; }

/* --- full-bleed data tables (the table pages) ----------------------------- */
/* The <table> is a direct child of the shell, so its rows span border-to-border like the
   nav/header bands; the first/last cell carry the --pad gutter so cell text lines up with
   the nav, header and toolbars. (Panel-page tables live inside .wrap and are unaffected.) */
body > table { width:100%; }
body > table > thead th:first-child, body > table > tbody td:first-child { padding-left:var(--pad); }
body > table > thead th:last-child,  body > table > tbody td:last-child  { padding-right:var(--pad); }

@media (max-width:720px) {
  .data-table-scroll .data-table:not(.holdings-matrix) :where(thead th:first-child,tbody tr > :first-child:not([colspan])) {
    position:sticky;
    left:0;
  }
  .data-table-scroll .data-table:not(.holdings-matrix) thead th:first-child {
    z-index:3;
    background:var(--row);
  }
  .data-table-scroll .data-table:not(.holdings-matrix) tbody tr > :first-child:not([colspan]) {
    z-index:1;
    background:var(--bg);
  }
  .data-table-scroll .data-table:not(.holdings-matrix) tbody tr:hover > :first-child:not([colspan]) { background:var(--row); }
  .data-table-scroll .data-table:not(.holdings-matrix) tbody tr:focus-within > :first-child:not([colspan]) { background:var(--accent-bg); }
  .mobile-stack-section-head { align-items:flex-start; flex-direction:column; }
}