:root{
  color-scheme:dark;
  /* Canvas — warm charcoal / espresso, never pure black; lifted by faint warm glows (set on body). */
  --bg:#221e1a;
  /* Surfaces — translucent warm panels that read as floating matte-glass tabs; a near-solid warm panel
     (--surface-solid) keeps dense tables legible against the canvas. */
  --surface:rgba(58,52,46,.5); --surface-2:rgba(74,66,57,.42); --surface-3:rgba(92,82,70,.5);
  --surface-solid:#2b2620;
  --border:rgba(226,212,186,.13); --border-strong:rgba(226,212,186,.24);
  --text:#f2ebdf; --text-muted:#b6ac99; --text-faint:#867c6c;
  /* Accent — muted sage green (perpdexlist-inspired), used sparingly; a warm-tan partner for the mark. */
  --accent:#a4c294; --accent-2:#cdb389; --accent-strong:#c2dab4;
  --accent-weak:rgba(164,194,148,.14); --accent-line:rgba(164,194,148,.3);
  /* Semantic — warm + muted (low-saturation tint fill + readable foreground + faint same-hue line). */
  --good-bg:rgba(140,176,124,.16); --good-fg:#a9cc9b; --good-line:rgba(140,176,124,.3);
  --warn-bg:rgba(198,162,86,.15); --warn-fg:#d9bd80; --warn-line:rgba(198,162,86,.3);
  --bad-bg:rgba(198,112,96,.17); --bad-fg:#e4a597; --bad-line:rgba(198,112,96,.32);
  --muted-bg:rgba(176,162,138,.14); --muted-fg:#bdb09c; --muted-line:rgba(176,162,138,.26);
  --info-bg:rgba(164,194,148,.12); --info-fg:#bcd0ad; --info-line:rgba(164,194,148,.24);
  --r-lg:20px; --r:14px; --r-sm:10px;
  /* Material — soft warm-dark shadows + a faint top sheen and translucent overlay that make panels read
     as matte glass floating over the canvas. */
  --shadow-sm:0 1px 2px rgba(0,0,0,.3),0 2px 8px rgba(0,0,0,.26);
  --shadow:0 4px 14px rgba(0,0,0,.34),0 22px 48px rgba(0,0,0,.4);
  --sheen:inset 0 1px 0 rgba(255,246,230,.05);
  --glass:linear-gradient(180deg,rgba(255,247,232,.04),rgba(255,247,232,0));
  --mono:ui-monospace,SFMono-Regular,Menlo,"SF Mono",monospace;
}
*{box-sizing:border-box}
/* scrollbar-gutter keeps the centered layout from shifting horizontally when navigating between
   pages that do / don't scroll (classic-scrollbar environments; overlay scrollbars reserve 0). */
/* overflow-x:clip kills any horizontal PAGE scroll (e.g. an opened popover that reaches the edge) without
   creating a scroll container — so the sticky app-bar and vertical scrolling are unaffected. The page
   itself must never pan sideways; inner scrollers (e.g. the mobile table) keep their own overflow. */
html{-webkit-text-size-adjust:100%;scrollbar-gutter:stable;overflow-x:clip}
body{margin:0;color:var(--text);
  background:
    radial-gradient(1100px 600px at 16% -10%,rgba(150,176,120,.08),transparent 60%),
    radial-gradient(1000px 680px at 100% -4%,rgba(196,150,96,.09),transparent 56%),
    radial-gradient(1200px 900px at 50% 122%,rgba(120,98,76,.16),transparent 60%),
    var(--bg);
  background-attachment:fixed;
  font:14px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--accent);text-underline-offset:2px}
a:hover{color:var(--accent-strong)}
::selection{background:rgba(164,194,148,.3);color:#23201c}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:9px;border:3px solid transparent;
  background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--border-strong)}
::-webkit-scrollbar-track{background:transparent}
.wrap{max-width:1400px;margin:0 auto;padding:0 clamp(24px,4vw,56px) 96px}

/* App shell: a sticky, warm, frosted-glass top bar with brand, nav pills, and provenance/meta chips. */
/* App shell top bar — a rounded, translucent floating card in the SAME visual language as the filter /
   table cards below (matte glass, hairline border, soft shadow, blur), not a square full-width panel.
   It lives inside the .wrap container, so its inner content aligns to the same grid as the page content;
   a small sticky offset lets it float with a gap from the viewport top while scrolling. */
.appbar{position:sticky;top:12px;z-index:20;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  margin:16px 0 18px;padding:11px 18px;background:var(--glass),var(--surface);
  border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-sm),var(--sheen);
  -webkit-backdrop-filter:saturate(140%) blur(12px);backdrop-filter:saturate(140%) blur(12px)}
.brand{display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:700;
  letter-spacing:-.01em;color:var(--text);text-decoration:none}
/* Crisp solid mark matching the favicon (sage square, dark radar glyph) — no gradient, no glow:
   at 26px a blurred shadow reads as a smudge, not a logo. */
.brand-mark{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;
  background:var(--accent);color:#23201c;font-size:16px;font-weight:700}
.brand-mark::before{content:"\25CE"}
/* Nav sits RIGHT on every page (operator 2026-06-11) and owns the ONLY auto margin in the bar, so it
   and the account slot never reflow between pages. The meta slot (freshness chip) lives LEFT of this
   boundary, next to the search — its presence/absence only breathes into the middle free space. */
.nav{display:flex;gap:7px;flex-wrap:wrap;font-size:13px;margin-left:auto}
.nav a,.nav .nav-here{border-radius:999px;padding:6px 13px;text-decoration:none;white-space:nowrap;
  display:inline-flex;flex-direction:column;align-items:center;
  transition:background .15s ease,color .15s ease,box-shadow .15s ease}
/* Width-stable pills: a zero-height bold ghost of the label (data-l) reserves the active 600-weight
   width on EVERY pill, so the nav row never shifts when the active (bold) tab changes between pages. */
.nav a::after,.nav .nav-here::after{content:attr(data-l);height:0;overflow:hidden;visibility:hidden;
  font-weight:600;pointer-events:none}
.nav a{color:var(--text-muted)}
.nav a:hover{background:var(--surface-3);color:var(--text)}
.nav .nav-here{font-weight:600;color:var(--accent-strong);background:var(--accent-weak);
  box-shadow:inset 0 0 0 1px var(--accent-line)}
.appbar-meta{display:flex;align-items:center;gap:7px;min-width:0}
/* In-header asset search: a pill input that navigates to /asset-<SYMBOL> via a custom suggestion popover.
   Sits at the left, right after the brand; the nav keeps its margin-left:auto so the tabs + account float
   to the right edge. The magnifier is the submit button. */
.appbar-search{position:relative;display:flex;align-items:center;flex:0 1 220px;min-width:150px}
.as-input{width:100%;font:inherit;font-size:13px;color:var(--text);background:var(--surface-2);
  border:1px solid var(--border);border-radius:999px;padding:7px 30px 7px 31px;outline:none;
  transition:border-color .14s ease,background .14s ease,box-shadow .14s ease}
.as-input::placeholder{color:var(--text-faint)}
.as-input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.as-input:focus{border-color:var(--accent-line);background:var(--surface-solid);
  box-shadow:0 0 0 3px var(--accent-weak)}
.appbar-search[data-nomatch] .as-input{border-color:var(--bad-line)}
/* Magnifier submit, left-inset and centered on the field. */
.as-go{position:absolute;left:4px;top:50%;transform:translateY(-50%);display:inline-grid;place-items:center;
  width:24px;height:24px;padding:0;border:none;border-radius:50%;background:transparent;
  color:var(--text-faint);cursor:pointer;transition:color .14s ease}
.as-go:hover,.appbar-search:focus-within .as-go{color:var(--accent-strong)}
.as-go svg{display:block}
/* "/" shortcut hint, right-inset; fades out the moment the field is focused or has text. */
.as-kbd{position:absolute;right:8px;top:50%;transform:translateY(-50%);pointer-events:none;
  display:inline-grid;place-items:center;min-width:16px;height:16px;padding:0 4px;font:inherit;
  font-size:11px;line-height:1;color:var(--text-faint);background:var(--surface-3);
  border:1px solid var(--border);border-radius:5px;transition:opacity .12s ease}
.as-input:focus~.as-kbd,.as-input:not(:placeholder-shown)~.as-kbd{opacity:0}
/* Custom asset-search suggestions — replaces the native picker (which dumped the whole set on focus and
   couldn't be skinned). Empty until the user types; the client fills it with prefix-first matches. Skinned
   like the other site popovers (solid surface, strong hairline, soft shadow), anchored under the field. */
.as-pop{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:30;margin:0;padding:4px;list-style:none;
  max-height:min(52vh,340px);overflow-y:auto;background:var(--surface-solid);
  border:1px solid var(--border-strong);border-radius:var(--r);box-shadow:var(--shadow)}
.as-pop[hidden]{display:none}
.as-opt{padding:7px 10px;border-radius:8px;font-size:13px;font-weight:600;color:var(--text-muted);
  cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .1s ease}
.as-opt:hover,.as-opt.is-active{background:var(--accent-weak);color:var(--accent-strong)}
/* The slice the user typed reads brighter than the rest, so the match is obvious at a glance. */
.as-opt .as-hl{color:var(--text);font-weight:700}
.as-opt:hover .as-hl,.as-opt.is-active .as-hl{color:var(--accent-strong)}

/* App-bar account slot — the global sign-in entry point (identity client hydrates it; the static
   fallback is a plain link to My Markets). The sheet is a small anchored panel with the provider
   actions; it is built entirely by the inline script (createElement — no markup-over-data). */
/* min-width covers both static "Account" and hydrated "Sign in", so the identity script's swap
   does not move the nav pills sitting to the slot's left. */
.appbar-account{position:relative;display:flex;align-items:center;justify-content:flex-end;
  flex:none;min-width:86px}
.acct-link,.acct-signin{font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  border-radius:999px;padding:6px 14px;color:var(--accent-strong);background:var(--accent-weak);
  border:1px solid var(--accent-line);text-decoration:none;white-space:nowrap;
  transition:background .15s ease,box-shadow .15s ease}
.acct-link:hover,.acct-signin:hover{box-shadow:inset 0 0 0 1px var(--accent-line)}
/* A <button> — it opens the account menu (Open My Markets + Log out), not a bare page link. */
.acct-chip{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:13px;
  font-weight:600;cursor:pointer;border-radius:999px;padding:6px 13px;color:var(--text);
  background:var(--surface-2);border:1px solid var(--border);text-decoration:none;
  white-space:nowrap;transition:border-color .15s ease,color .15s ease}
.acct-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);
  flex:none}
.acct-chip:hover{border-color:var(--accent-line);color:var(--accent-strong)}
.acct-sheet{position:absolute;top:calc(100% + 10px);right:0;z-index:35;width:min(330px,88vw);
  background:var(--surface-solid);border:1px solid var(--border-strong);border-radius:var(--r);
  padding:15px 17px;box-shadow:var(--shadow)}
.acct-sheet-title{margin:0 0 6px;font-size:14px;font-weight:700;color:var(--text)}
.acct-sheet p.muted{margin:0 0 10px;font-size:12.5px;line-height:1.55}
.acct-sheet .pmr-status{margin-top:8px;font-size:12px;line-height:1.5}
/* Provider actions (header sheet + signed-out account boxes) — stacked, full-width in the sheet. */
.acct-sheet .acct-provider{display:block;width:100%;margin:0 0 8px;text-align:center}
.pmr-account .acct-provider{margin:0 10px 8px 0}
.acct-fineprint{font-size:11.5px;line-height:1.5;margin:2px 0 0}
/* Linked-identities lines on the My Markets account box. */
.pmr-identities{margin:10px 0 4px}
.pmr-identity-line{margin:4px 0;font-size:12.5px}
.pmr-identity-line .pmr-connect{margin-left:6px;font-size:11.5px;padding:3px 10px}

/* Account-action buttons (header sheet + the My Markets / Alerts account boxes) — quiet pills in
   the warm skin instead of native browser buttons. */
.pmr-connect,.pmr-logout{font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
  border-radius:999px;padding:6px 14px;color:var(--accent-strong);background:var(--accent-weak);
  border:1px solid var(--accent-line);text-decoration:none;transition:box-shadow .15s ease}
.pmr-connect:hover,.pmr-logout:hover{box-shadow:inset 0 0 0 1px var(--accent-line)}
.pmr-connect[disabled]{opacity:.55;cursor:default}
/* EIP-6963 wallet picker (several wallet extensions installed) — compact pills carrying the
   wallet's own icon (a data: URI from the announce event; nothing fetched). */
.pmr-wallet-pick{display:inline-flex;align-items:center;gap:6px;font-size:12px;
  padding:5px 11px;margin:6px 6px 0 0}
.pmr-wallet-icon{width:16px;height:16px;border-radius:4px;display:block}
.pmr-logout{color:var(--text-muted);background:var(--surface-2);border-color:var(--border)}
.pmr-logout:hover{color:var(--text);box-shadow:none;background:var(--surface-3)}
.meta-chip{font-size:12px;color:var(--text-muted);background:var(--surface-2);
  border:1px solid var(--border);border-radius:999px;padding:3px 10px;white-space:nowrap}
.tag{font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--accent-strong);
  background:var(--accent-weak);border:1px solid var(--accent-line);border-radius:999px;
  padding:3px 9px;white-space:nowrap}

/* App-bar data-freshness chip — ESCALATION-ONLY by design (operator: it must never be in the way).
   Healthy state is a lone 7px dot next to the search (the "alive" cue; the absolute stamp rides the
   title for anyone who hovers) — the label TEXT surfaces only when the freshness script demotes the
   page to delayed/stalled, i.e. exactly when getting in the way is the point. The server renders a
   NEUTRAL dot (the honest no-JS state — it claims nothing about health); the script re-tones it
   against the VISITOR's clock, so a page a broken pipeline froze keeps visibly aging on its own. */
.fresh{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--text-muted);
  white-space:nowrap}
.fresh-text{display:none}
.fresh--delayed .fresh-text,.fresh--stalled .fresh-text{display:inline}
.fresh-dot{width:7px;height:7px;border-radius:50%;background:var(--text-faint);flex:none}
.fresh--ok .fresh-dot{background:var(--good-fg);animation:fresh-pulse 2.4s ease-in-out infinite}
.fresh--delayed{color:var(--warn-fg)}
.fresh--delayed .fresh-dot{background:var(--warn-fg)}
.fresh--stalled{color:var(--bad-fg)}
.fresh--stalled .fresh-dot{background:var(--bad-fg)}
@keyframes fresh-pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* Per-page heading block (Funding / Asset / etc.). The Home hero text block was removed — Home opens with
   the dominant market-summary strip instead (see the .summary rules below). */
.page-head{padding:40px 0 4px}
.page-head h1{margin:0;font-size:26px;font-weight:700;letter-spacing:-.02em}
.banner{margin:18px 0 0;font-size:13px;line-height:1.55;color:var(--text-muted);
  background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--accent);
  border-radius:var(--r-sm);padding:11px 14px;box-shadow:var(--shadow-sm),var(--sheen);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.banner strong{color:var(--text)}
.legend{margin:12px 0 0;font-size:12px;color:var(--text-faint);line-height:2.1}
.legend .badge{vertical-align:middle}

/* Section headers + supporting copy. */
h2{font-size:20px;font-weight:700;letter-spacing:-.014em;margin:46px 0 2px;color:var(--text)}
section>p.muted{margin:5px 0 14px;font-size:13.5px;max-width:760px}
h3{font-size:14px;font-weight:600;margin:22px 0 8px;color:var(--text)}
.muted{color:var(--text-muted)}

/* Metric tiles — translucent warm cards with a strong tabular-numeric headline. */
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:18px 0}
.stat{background:var(--glass),var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:16px 17px;box-shadow:var(--shadow-sm),var(--sheen);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.stat .stat-n{display:block;font-size:30px;font-weight:700;line-height:1.05;
  font-variant-numeric:tabular-nums;letter-spacing:-.028em;color:var(--text)}
.stat .stat-l{display:block;margin-top:6px;font-size:11px;font-weight:600;color:var(--text-faint);
  text-transform:uppercase;letter-spacing:.055em}

/* Home dashboard (UI-7B) — a product summary header: a featured, numeric-first "Top signal now" market
   card beside a user-facing "Market pulse" card. .feature reuses the .card base (radius / padding /
   shadow / hover); .card.feature wins the tinted background via higher specificity, and .feature .x /
   .pulse .x beat the generic .card h3 / .card p rules. */
.dash{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:14px;margin:18px 0 0;
  align-items:start}
.card.feature{background:linear-gradient(180deg,var(--accent-weak),var(--surface) 60%);
  border:1px solid var(--accent-line)}
.card.feature-quiet{background:var(--surface);border-color:var(--border)}
.feature .feature-eyebrow,.pulse .feature-eyebrow{margin:0 0 10px;font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.feature .badges{margin:0 0 6px}
.feature .feature-title{margin:2px 0 4px;font-size:17px;font-weight:700;letter-spacing:-.012em;
  color:var(--text)}
.feature .feature-figure{margin:4px 0 8px;display:flex;align-items:baseline;gap:8px;font-size:40px;
  font-weight:700;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-.03em;color:var(--text)}
.feature .feature-figure .feature-unit{font-size:13px;font-weight:600;letter-spacing:0;
  color:var(--text-faint)}
.feature .feature-sub{margin:0;font-size:12.5px;line-height:1.5;color:var(--text-muted)}
.pulse .pulse-list{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column;gap:13px}
.pulse .pulse-list li{display:flex;align-items:baseline;gap:11px;margin:0}
.pulse-n{font-size:24px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em;
  color:var(--text);min-width:2.4ch;text-align:right}
.pulse-l{font-size:13px;color:var(--text-muted)}
.pulse .pulse-issue{margin:14px 0 0}
.pulse .pulse-updated{margin:14px 0 0;font-size:12px;color:var(--text-faint)}
.note-card{background:var(--surface-2);box-shadow:none}
.note-card .note-line{margin:0 0 8px;font-size:13px;line-height:1.55;color:var(--text-muted)}
.note-card .note-line strong{color:var(--text)}

/* Signal / asset / funding cards — translucent warm matte-glass panels, soft shadow, subtle hover lift. */
.card{background:var(--glass),var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:20px 22px;margin:14px 0;box-shadow:var(--shadow-sm),var(--sheen);
  -webkit-backdrop-filter:blur(10px) saturate(115%);backdrop-filter:blur(10px) saturate(115%);
  transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease}
.card:hover{box-shadow:var(--shadow);transform:translateY(-2px);border-color:var(--border-strong)}
.card>.badges:first-child{margin-top:0}
.signal-card h3{margin-top:2px}
.card h3{margin:0 0 8px;font-size:16px;font-weight:600;letter-spacing:-.01em}
.card h3 a{color:inherit;text-decoration:none}
.card h3 a:hover{color:var(--accent)}
.card p{margin:8px 0;color:var(--text-muted)}
.card p.why,.card p.risk{font-size:13px}
.card .why strong,.card .risk strong{color:var(--text)}

/* Signal cards (UI-7B) — numeric-first: the annualized magnitude (when the summary carries one) is the
   visual anchor; the raw-rate/interval summary line and the why/risk lines are compact and secondary. */
.signal-card .sc-figure{margin:4px 0 6px;display:flex;align-items:baseline;gap:7px;font-size:27px;
  font-weight:700;line-height:1.05;font-variant-numeric:tabular-nums;letter-spacing:-.026em;
  color:var(--text)}
.signal-card .sc-figure .sc-unit{font-size:12px;font-weight:600;letter-spacing:0;color:var(--text-faint)}
.signal-card .sc-sub{margin:0 0 10px;font-size:12.5px;line-height:1.5;color:var(--text-muted)}
.signal-card .why,.signal-card .risk{margin:6px 0 0;font-size:12.5px;line-height:1.5}
.signal-card .risk{color:var(--text-muted)}

/* Funding-section preview block. */
.preview{background:var(--glass),var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:20px 22px;margin:14px 0;box-shadow:var(--shadow-sm),var(--sheen);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.preview p{margin:8px 0;color:var(--text-muted)}
.preview .more{font-weight:600}
.preview .more a{text-decoration:none}

/* Responsive card grid — used by the homepage signal groups and the funding highlight cards so a wide
   screen shows scannable columns instead of one tall stack; collapses to a single column on mobile. */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;
  margin:12px 0;align-items:start}
.card-grid>.card{margin:0}

/* Homepage radar feed grouping — a labeled band (priority vs the wider radar) with a brief, factual
   lead-in, so the first screen reads as curated sections rather than one undifferentiated dump. */
.feed-group{margin:20px 0 0}
.feed-group-head{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin:18px 0 0}
.feed-group-head h3{margin:0;font-size:15px;font-weight:600}
.feed-lead{margin:3px 0 4px;font-size:12.5px;line-height:1.55;color:var(--text-muted);max-width:780px}

/* Funding highlight cards (top extremes + cross-venue spreads) — a figure-led, scannable card grid that
   replaces the old bullet lists while keeping every funding-truth/data-trust fact visible. The market
   figure is the visual anchor; the supporting facts/badges read as secondary. */
.fcard{background:var(--glass),var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:16px 17px;box-shadow:var(--shadow-sm),var(--sheen);display:flex;flex-direction:column;gap:6px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease}
.fcard:hover{box-shadow:var(--shadow);transform:translateY(-2px);border-color:var(--border-strong)}
.fcard-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.fcard-asset{font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--text)}
.fcard-figure{font-size:26px;font-weight:700;line-height:1.06;font-variant-numeric:tabular-nums;
  letter-spacing:-.028em;color:var(--text)}
.fcard-figure .fcard-unit{font-size:12px;font-weight:600;color:var(--text-faint);letter-spacing:0}
.fcard-sub{margin:0;font-size:12.5px;color:var(--text-muted)}
.fcard-note{margin:1px 0 0;font-size:11.5px;line-height:1.5;color:var(--text-faint)}
.fcard .badges{margin:3px 0 0;line-height:2}

/* Market summary strip — the DOMINANT top band (the large hero text block is gone). Big tabular numbers
   communicate market scale at a glance; the total-OI value is accented as the focal point. */
/* position+z-index so the whole strip (and the metric tooltips that overflow its bottom edge) paints
   above the in-flow sections below it — the backdrop-filter traps the tooltip's own z-index inside this
   card, so without lifting the card itself the "Cross-venue…"/"Largest funding moves" sections (later in
   the DOM) would paint over the bubble. z-index must EXCEED the sibling sections' own 1 (.digest etc.
   create equal stacking contexts and, being later in the DOM, would win a tie — operator hit exactly
   that: tables covering the strip's tooltips). Kept below the sticky .appbar (z-index:20). */
.summary{position:relative;z-index:2;margin:20px 0 0;background:var(--glass),var(--surface);
  border:1px solid var(--border);
  border-top:2px solid var(--accent-line);border-radius:var(--r-lg);padding:20px 16px;
  box-shadow:var(--shadow-sm),var(--sheen);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
/* Five equal full-card-width segments, each filling its share of the strip and separated by a hairline
   divider (so no metric reads as a small detached text island — VENUES included). gap:0 + a per-segment
   border-left + internal padding makes each segment a distinct full-height band, not floating text. */
.summary-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;align-items:stretch}
.sm{display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:2px 6px;
  border-left:1px solid var(--border)}
.sm:first-child{padding-left:0;border-left:none}
.sm:last-child{padding-right:0}
/* Count tiles (venues / assets / markets): centered in their cell, same size as the rest. */
.sm.sm-center{align-items:center;justify-content:center;text-align:center}
/* Scoped to .summary so the size beats the global .num rule (font-size:.94em), which has equal
   specificity and is declared later — without this the values render at .num's tiny .94em. */
.summary .sm-n{font-size:27px;font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--text);
  font-variant-numeric:tabular-nums}
.summary .sm-n.sm-accent{color:var(--accent-strong)}
.summary .sm-n.sm-gap{font-size:27px;font-weight:600;color:var(--text-faint)}
/* Currency symbol + magnitude suffix: same size/weight as the digits (one uniform value). */
.summary .sm-u{font-size:1em;font-weight:800;letter-spacing:-.04em;opacity:1}
.sm-l{font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--text-muted)}
/* A small hoverable "ⓘ" next to a summary label whose tooltip explains what the metric counts. Glyph stays
   a lowercase "i" (text-transform/letter-spacing reset) and sits on the text baseline; cursor:help signals
   the tooltip. position:relative anchors the bubble below. */
.sm-i{position:relative;display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;
  margin-left:5px;border:1px solid var(--border);border-radius:50%;font-size:9px;font-weight:700;
  font-style:normal;line-height:1;letter-spacing:0;text-transform:none;color:var(--text-faint);cursor:help;
  vertical-align:middle;transition:color .12s ease,border-color .12s ease}
.sm-i:hover,.sm-i:focus-visible{color:var(--text-muted);border-color:var(--text-faint);outline:none}
/* Styled tooltip bubble (::after) + arrow (::before): the native "title" was slow and unreliable, so the
   explanation rides the data-tip attribute and appears instantly below the icon on hover/focus. Resets the
   parent label's uppercase/letter-spacing so the copy reads as a normal sentence. */
.sm-i::after,.sm-i::before{position:absolute;left:50%;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .12s ease;z-index:40}
.sm-i::after{content:attr(data-tip);top:calc(100% + 8px);transform:translateX(-50%);width:max-content;
  max-width:240px;white-space:normal;text-align:left;text-transform:none;letter-spacing:normal;
  font-size:12px;font-weight:500;line-height:1.45;color:var(--text);background:var(--surface-solid);
  border:1px solid var(--border-strong);border-radius:var(--r-sm);padding:9px 11px;box-shadow:var(--shadow)}
.sm-i::before{content:"";top:calc(100% + 4px);width:9px;height:9px;transform:translateX(-50%) rotate(45deg);
  background:var(--surface-solid);border-left:1px solid var(--border-strong);
  border-top:1px solid var(--border-strong)}
.sm-i:hover::after,.sm-i:hover::before,.sm-i:focus-visible::after,.sm-i:focus-visible::before{
  opacity:1;visibility:visible}
/* A list-style tooltip: real line breaks in data-tip render (white-space:pre-line) and the bubble widens a
   little so the per-item lines do not wrap awkwardly. Used by the Persistence header "ⓘ". */
.sm-i.tip-list::after{white-space:pre-line;max-width:300px}

/* Cross-venue funding setup rows — the PRIMARY product surface: a prominent asset + spread figure, two
   venue legs with a restrained positive/negative funding tint, and quiet OI/volume context below. */
.cv-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column}
.cv-row{display:flex;align-items:stretch;justify-content:space-between;gap:18px;
  padding:13px 0;border-top:1px solid var(--surface-3)}
.cv-row:first-child{border-top:none}
.cv-main{min-width:0;flex:1}
.cv-head{display:flex;align-items:baseline;gap:10px}
.cv-asset{font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--text)}
.cv-asset a{color:inherit;text-decoration:none}
.cv-asset a:hover{color:var(--accent)}
/* Headline APY: the big number spans the top two left lines (asset + funding legs); the caption sits on
   the bottom line, level with the OI/context line and styled to match it. */
.cv-spread{display:flex;flex-direction:column;align-items:flex-end;justify-content:flex-end;
  flex:none;white-space:nowrap;text-align:right}
/* Scoped past the global .num{font-size:.94em} so the headline size actually applies. */
.cv-spread .cv-spread-n{font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:.9;
  color:var(--accent-strong)}
/* "APY" suffix appended to the headline number — smaller, same colour as the number. */
.cv-spread-suffix{font-size:.42em;font-weight:700;letter-spacing:0;color:inherit}
.cv-legs{margin-top:5px;font-size:13.5px;color:var(--text-muted)}
.cv-legs-l{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;
  color:var(--text-faint);margin-right:7px}
.cv-venue{color:var(--text)}
.cv-pos{color:var(--good-fg);font-weight:600}
.cv-neg{color:var(--bad-fg);font-weight:600}
.cv-vs{color:var(--text-faint);font-size:11px;margin:0 5px}
.cv-ctx{margin-top:4px;font-size:12px}
.cv-oi-na{color:var(--text-faint)}

/* Signal card list ("what else is moving") — asset@venue → value. */
.sig-list{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.sig-list li{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.sig-id{font-size:13px;color:var(--text)}
.sig-v{font-size:13px;font-weight:600;color:var(--text)}

/* Cockpit — the above-the-fold 2-column layout: a large Funding Opportunities card (left) beside a
   compact side-card stack (right). Collapses to one column on narrow screens. */
.cockpit{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:16px;align-items:start;
  margin:22px 0 0}
.cockpit-main{min-width:0}
.cockpit-side{display:flex;flex-direction:column;gap:14px;min-width:0}
.cockpit .card{margin:0}

/* Funding Opportunities — the one large main card + the cockpit's clear focal point: a warm accent
   border + a faint sage glow lift it above the side cards, without changing the theme. */
.opp-main{padding:22px 24px;border-color:var(--accent-line);
  background:linear-gradient(180deg,var(--accent-weak),var(--surface) 46%);
  box-shadow:var(--shadow),var(--sheen),0 10px 34px rgba(164,194,148,.08)}
.opp-main-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.opp-main-head h3{margin:0;font-size:18px;letter-spacing:-.01em}
.opp-main-sub{font-size:11.5px}
.opp-main-foot{margin:14px 0 0;font-size:12px;line-height:1.55}
.opp-main-foot a{font-weight:600;text-decoration:none}

/* Compact side cards — the "what else is moving" signal card + the watchlist teaser. */
.side-card{padding:16px 17px}
.side-card h3{margin:0 0 10px;font-size:14px}
.side-foot{margin:10px 0 0;font-size:11px;line-height:1.5}
.side-actions{margin:12px 0 0;gap:8px}
.side-actions .action a{color:inherit;text-decoration:none}
.teaser-card p{margin:0;color:var(--text-muted);font-size:13px;line-height:1.55}

@media (max-width:860px){.cockpit{grid-template-columns:1fr}}

/* ================= Home v2 (daily digest) ================= */

/* "Since yesterday" digest strip — four delta tiles anchoring the sections below. Tiles are links
   (each jumps to its section); a gap value is faint, never a fabricated zero. */
.digest{position:relative;z-index:1;margin:14px 0 0;background:var(--glass),var(--surface);
  border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-sm),var(--sheen);
  backdrop-filter:blur(6px);padding:12px 16px 14px}
.dg-head{display:flex;align-items:baseline;gap:10px}
.dg-title{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-muted);font-weight:600}
.dg-clock{margin-left:auto;font-size:11.5px;color:var(--text-faint)}
.dg-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:10px}
.dg{display:flex;flex-direction:column;gap:2px;text-decoration:none;color:inherit;min-width:0;
  border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface-2);padding:9px 11px;
  transition:border-color .15s ease}
.dg:hover{border-color:var(--border-strong)}
.dg-n{font-size:20px;font-weight:700;letter-spacing:-.02em;line-height:1.15;color:var(--text)}
.dg-n.dg-accent{color:var(--accent-strong)}
.dg-n.dg-gap{color:var(--text-faint);font-weight:600}
.dg-l{font-size:11.5px;color:var(--text-muted);line-height:1.35}

/* Funding movers rows — was → now over the recorded 24h series; the sparkline is styled here so the
   inline SVG stays attribute-free (theme tokens win). */
.mv-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column}
.mv-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0;
  border-top:1px solid var(--border)}
.mv-row:first-child{border-top:none;padding-top:4px}
.mv-main{min-width:0}
.mv-head{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.mv-asset a{font-weight:600;text-decoration:none}
.mv-asset a:hover{text-decoration:underline}
.mv-venue{font-size:12px}
.mv-ctx{font-size:12px;margin-top:3px}
.mv-flip{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  padding:1px 7px;border-radius:6px;color:var(--warn-fg);background:var(--warn-bg);
  border:1px solid var(--warn-line);margin-right:6px;vertical-align:1px}
.mv-side{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:none}
.mv-spark polyline{stroke:var(--accent);stroke-width:1.5}
.mv-spark circle{fill:var(--accent-strong)}
.mv-zero{stroke:var(--border-strong);stroke-width:1}
.mv-nums{display:flex;align-items:baseline;gap:6px;font-size:13px;white-space:nowrap}
.mv-was{color:var(--text-faint)}
.mv-arrow{color:var(--text-faint)}

/* Setup of the day — plain money first: net carry headline, then dollar fill tiers, then the
   persistence verdict (the same cell the Funding workbench renders). */
.sod-asset{font-size:16px;font-weight:800;letter-spacing:-.02em;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.sod-asset a{text-decoration:none}
.sod-asset a:hover{text-decoration:underline}
.sod-venues{font-size:11.5px;font-weight:400}
.sod-legs{margin-top:6px;font-size:12.5px;color:var(--text-muted)}
.sod-carry{display:flex;align-items:baseline;gap:8px;margin:9px 0 0}
.sod-carry-n{font-size:25px;font-weight:800;letter-spacing:-.03em;color:var(--good-fg)}
.sod-carry-l{font-size:11.5px;line-height:1.3;max-width:20ch}
.sod-fills{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;margin-top:10px;font-size:12.5px}
.sod-fills-l{flex-basis:100%;font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--text-faint);font-weight:600}
.sod-tier{display:inline-flex;align-items:baseline;gap:5px}
.sod-tier-l{color:var(--text-faint);font-size:11.5px}
.sod-tier-bps{color:var(--text-faint);font-size:11px}
.sod-persist{margin-top:10px;font-size:12px}

/* Predictions watch — the recorded-probability bar: fill = now, the thin marker = ≈24h-ago. */
.pred-q{font-weight:600;font-size:13.5px;line-height:1.4}
.pred-bar{position:relative;height:8px;border-radius:999px;background:var(--surface-3);margin:9px 0 5px;overflow:hidden}
.pred-fill{position:absolute;top:0;bottom:0;left:0;border-radius:999px;
  background:linear-gradient(90deg,rgba(164,194,148,.35),var(--accent))}
.pred-was{position:absolute;top:-1px;bottom:-1px;width:2px;background:var(--text-faint)}
.pred-nums{display:flex;justify-content:space-between;gap:8px;font-size:12px;flex-wrap:wrap}
.pred-now{color:var(--accent-strong);font-weight:700}
.pred-resolved{margin-top:10px;padding-top:9px;border-top:1px solid var(--border);font-size:12px;line-height:1.5}
.pred-resolved-n{color:var(--text)}

/* Cockpit v2 — desktop: two INDEPENDENT columns, each flowing to its own height (a short card never
   leaves a row-track hole above its neighbor or overhangs the other column). Mobile: the column
   wrappers dissolve and explicit order restores the approved stack (movers → setup → pred → teaser). */
.cockpit2{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:16px;align-items:start;
  margin:22px 0 0}
.cockpit2 .card{margin:0}
.ck-col{display:flex;flex-direction:column;gap:16px;min-width:0}
@media (max-width:860px){
  .cockpit2{display:flex;flex-direction:column;gap:14px}
  .ck-col{display:contents}
  .cockpit2 #movers{order:1}
  .cockpit2 #setup{order:2}
  .cockpit2 #predictions{order:3}
  .cockpit2 .teaser-card{order:4}
}

/* Explicit per-card CTA (operator 07-05: the way into each section's page must be an OBVIOUS button,
   not a footer text link) — an accent-tinted pill, one per card. */
.card-cta{margin:13px 0 0}
.btn-cta{display:inline-block;padding:7px 14px;border-radius:999px;border:1px solid var(--accent-line);
  background:var(--accent-weak);color:var(--accent-strong);font-weight:600;font-size:12.5px;
  text-decoration:none;transition:border-color .15s ease,background-color .15s ease}
.btn-cta:hover{border-color:var(--accent);background:rgba(164,194,148,.22)}
.btn-cta:active{transform:translateY(1px)}

/* Venue scoreboard — the rank column stays narrow and quiet; ranking only exists where measured. */
.sb-rank{width:28px;color:var(--text-faint)}

@media (max-width:720px){
  .dg-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:460px){
  .mv-nums{font-size:12px}
  .mv-side{gap:2px}
}

/* Badges / chips — compact, crisp status chips (smaller than a pill, a faint same-hue border for
   definition, a small leading dot). Tuned to carry meaning without pastel "badge soup". */
.badges{margin:6px 0 10px;line-height:2.1}
.badge{display:inline-flex;align-items:center;gap:5px;margin:0 4px 4px 0;padding:2px 8px;
  border-radius:7px;font-size:11px;font-weight:600;line-height:1.5;white-space:nowrap;
  border:1px solid transparent}
.badge::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.85}
.badge-good{background:var(--good-bg);color:var(--good-fg);border-color:var(--good-line)}
.badge-warn{background:var(--warn-bg);color:var(--warn-fg);border-color:var(--warn-line)}
.badge-bad{background:var(--bad-bg);color:var(--bad-fg);border-color:var(--bad-line)}
.badge-muted{background:var(--muted-bg);color:var(--muted-fg);border-color:var(--muted-line)}
.badge-info{background:var(--info-bg);color:var(--info-fg);border-color:var(--info-line)}
.num{font-variant-numeric:tabular-nums;font-family:var(--mono);font-size:.94em;letter-spacing:-.01em}
.suppressed{color:var(--bad-fg);font-weight:600}

/* Numeric-column alignment + compact one-cell badge stack (data-status cell) — financial-table craft:
   numbers right-aligned for scan-comparison; the per-row trust/freshness/proof labels share ONE cell as a
   tight wrap of chips instead of three sparse badge columns. */
th.cell-r,td.cell-r{text-align:right}
td.cell-r .num{font-size:.97em}
.status-stack{display:flex;flex-wrap:wrap;gap:3px;align-items:center}
.status-stack .badge{margin:0}
/* Collapsible badge legend under a page head — honesty stays one click away without a permanent
   badge-soup banner. */
.legend-details{margin:10px 0 0;font-size:12px;color:var(--text-faint)}
.legend-details summary{color:var(--text-faint);font-weight:500;font-size:12px}
.legend-details summary:hover{color:var(--text-muted)}
.legend-details .legend{margin:8px 0 0}

/* Home hero positioning — one strong product line + the venue-coverage chip row. The venue breadth IS
   the differentiator (several of these venues sit outside mainstream aggregator coverage), so the chips
   are a first-screen product statement, not footer trivia. */
.hero-pos{margin:30px 0 0}
.hero-pos h1{margin:0;font-size:clamp(24px,3.2vw,31px);font-weight:800;letter-spacing:-.025em;
  line-height:1.16;max-width:860px}
.hero-pos h1 .hero-accent{color:var(--accent-strong)}
.hero-sub{margin:10px 0 0;font-size:14px;line-height:1.62;color:var(--text-muted);max-width:760px}
.venue-chips{display:flex;flex-wrap:wrap;gap:7px;margin:16px 0 0}
.venue-chip{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:600;
  color:var(--text-muted);background:var(--surface-2);border:1px solid var(--border);
  border-radius:999px;padding:5px 12px;white-space:nowrap}
.venue-chip .vc-dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none}
.venue-chip .vc-n{color:var(--text-faint);font-weight:500}

/* Method tiles — the data-honesty differentiators presented as product value (a compact 3-up band),
   never a methodology essay. */
.vprops{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin:26px 0 0}
.vprop{background:var(--glass),var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:15px 17px;box-shadow:var(--shadow-sm),var(--sheen)}
.vprop h3{margin:0 0 6px;font-size:13px;font-weight:700;letter-spacing:-.005em;color:var(--accent-strong)}
.vprop p{margin:0;font-size:12.5px;line-height:1.55;color:var(--text-muted)}

/* Funding workbench (table-first) — a compact page head, a sticky-feeling filter bar of segmented chips
   (24h volume + intended position size), and a size-reactive capacity cell. Additive: these classes are
   used only by the Funding page; every other surface is untouched. The warm-skin tokens are reused. */
.page-head-compact{padding:10px 0 0}
.page-head-compact h1{font-size:24px}
.page-sub{margin:8px 0 0;font-size:12.5px;line-height:1.55;color:var(--text-muted);max-width:780px}
.sub-eg{color:var(--text)}
.sub-eg b{color:var(--accent-strong);font-weight:600}
.filterbar{display:flex;flex-wrap:wrap;align-items:center;gap:13px 22px;margin:18px 0 8px;
  padding:14px 16px;background:var(--glass),var(--surface);border:1px solid var(--border);
  border-radius:var(--r);box-shadow:var(--shadow-sm),var(--sheen);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.filter-group{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.filter-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  color:var(--text-faint)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;border-radius:999px;padding:5px 12px;
  color:var(--text-muted);background:var(--surface-2);border:1px solid var(--border);
  transition:background .15s ease,color .15s ease,box-shadow .15s ease}
.chip:hover{color:var(--text);background:var(--surface-3)}
.chip.is-active{color:var(--accent-strong);background:var(--accent-weak);border-color:var(--accent-line);
  box-shadow:inset 0 0 0 1px var(--accent-line)}
.filter-note{flex-basis:100%;margin:3px 0 0;font-size:12.5px;color:var(--text-muted)}
.cap-size-echo{color:var(--accent-strong);font-weight:700}
table.workbench td.col-asset{font-weight:700;color:var(--text)}
.cap-cell{font-size:12px}
.cap-q{display:block;margin-bottom:3px}
.cap{display:block}
.cap-na{color:var(--text-muted)}
.funding-foot{margin-top:34px}

/* Funding SETUP table (size-aware executable view) — each row is a cross-venue funding-capture pair. The
   "Target notional per leg" selector is the page's hero input; a sort/filter row sits above the table.
   Additive: these classes are used only by the Funding page. */
.size-hero .filter-label{font-size:12px;color:var(--text-muted)}
.size-hero{gap:11px}
.size-hint{font-size:11.5px;color:var(--text-faint)}
.size-echo{color:var(--accent-strong);font-weight:700;font-variant-numeric:tabular-nums}
/* Typed amount inputs (target notional + min OI per leg) — a compact $-prefixed numeric field. */
.amt-input{display:inline-flex;align-items:center;background:var(--surface-2);border:1px solid var(--border);
  border-radius:8px;padding:2px 8px}
.amt-prefix{color:var(--text-faint);font-size:12px;margin-right:2px}
.amt-field{width:6.5ch;background:transparent;border:0;color:var(--text);font:inherit;font-size:13px;
  font-variant-numeric:tabular-nums;padding:3px 0;outline:none}
.amt-field::-webkit-outer-spin-button,.amt-field::-webkit-inner-spin-button{margin:0}
/* The sort/filter row sits just under the size hero; lighter, denser than the hero bar. */
/* position+z-index lifts the whole row (and the Exchanges popover that overflows its bottom edge) above
   the in-flow setup table below — the bar's backdrop-filter would otherwise trap the popover's z-index
   inside the card and the table would paint over it. Kept below the sticky .appbar (z-index:20). */
.sortbar{margin-top:8px;padding:10px 16px;gap:10px 18px;position:relative;z-index:5}
.sortbar .filter-label{color:var(--text-muted)}
.minoi-group{display:inline-flex;align-items:center;gap:8px}
.minoi-label{font-size:11px}
/* Column widths come from the table's <colgroup> (percentages). table-layout:fixed + overflow:hidden on
   every BODY cell is the overflow/overlap guard: columns never expand past the container and content can
   never spill into the neighbouring column. The header cells are overflow:visible so a header's hover
   tooltip (the Persistence "ⓘ" bubble) can paint past the cell instead of being clipped to it. The unit
   "1h eq." is stated once in the Setup header subtitle. */
/* overflow:visible (overriding the base table's overflow:hidden) so a header "ⓘ" tooltip bubble is never
   clipped by the table box — it can be taller than the rows beneath it. The base clip was there to keep the
   rounded corners; we re-round the header corner cells by hand since the table no longer clips. */
table.setups{table-layout:fixed;overflow:visible}
table.setups thead tr:first-child th:first-child{border-top-left-radius:var(--r)}
table.setups thead tr:first-child th:last-child{border-top-right-radius:var(--r)}
table.setups th,table.setups td{padding:9px 10px}
table.setups td{overflow:hidden;vertical-align:top}
/* NO z-index/position on th on purpose — a stacking context per th would trap the bubble below the later
   (Risk/limit) header; the bubble's own z-index:40 then resolves in the page root, above every neighbour. */
table.setups th{overflow:visible}
table.setups td.col-asset{font-weight:700;color:var(--text);font-size:13.5px}
/* Asset ticker links to its asset page — keeps the ticker look; affordance is a subtle dotted underline. */
.col-asset .asset-link{color:inherit;text-decoration:none;border-bottom:1px dotted var(--text-faint)}
.col-asset .asset-link:hover{color:var(--accent-strong);border-bottom-color:var(--accent-line)}
.th-sub{display:block;font-weight:500;text-transform:none;letter-spacing:0;color:var(--text-faint);
  font-size:9.5px;margin-top:1px}
/* Setup pair — the two legs share ONE grid with FIXED-WIDTH tracks (badge · venue · funding · Open) so the
   Open links sit in a fixed action lane: aligned with each other AND identical across every table row,
   regardless of venue-name or funding-value length. Each leg row is display:contents so its four cells
   join the shared grid; the venue cell truncates (never pushes the lane); row-gap spaces the two legs. */
.col-setup .setup-grid{display:grid;grid-template-columns:42px 84px 62px auto;
  column-gap:8px;row-gap:8px;align-items:center;font-size:12px;line-height:1.4}
.col-setup .leg-line{display:contents}
.leg{width:42px;text-align:center;font-size:9.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.03em;border-radius:6px;padding:1px 0}
.leg-hi{color:var(--bad-fg);background:var(--bad-bg);border:1px solid var(--bad-line)}
.leg-lo{color:var(--good-fg);background:var(--good-bg);border:1px solid var(--good-line)}
.leg-venue{color:var(--text);font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.leg-fund{color:var(--text-muted);font-size:.92em;font-variant-numeric:tabular-nums;justify-self:end}
/* The Setup column header is just two full-size column labels — "venue" and "funding" — laid out on the
   SAME grid template + gap as the cell below, so each label sits directly over its lane (th and td share
   14px side padding). The word "Setup" is dropped; the badge + Open lanes need no label; "funding" aligns
   right over the numbers. Labels inherit the normal th type (uppercase, 11px) so they read like Net APY /
   Costs / OI, not as faint sub-text. */
.th-grid{display:grid;grid-template-columns:42px 84px 62px auto;column-gap:8px;align-items:baseline}
/* "venue" spans the badge + venue lanes and sits flush at the cell's left edge, so it begins exactly where
   the action badge starts (same x as the row's side badge). "funding" left-aligns at the start of the
   funding-number lane (the word is wider than the numbers, so right-aligning made it stick out to their
   left) with a small nudge so it begins roughly at the digits. */
.th-grid .thg-venue{grid-column:1 / 3}
.th-grid .thg-fund{grid-column:3;justify-self:start;padding-left:8px;white-space:nowrap}
.venue-link{font-size:10.5px;font-weight:600;color:var(--accent);text-decoration:none;justify-self:start;
  border:1px solid var(--border-strong);border-radius:6px;padding:1px 6px;white-space:nowrap}
.venue-link:hover{color:var(--accent-strong);border-color:var(--accent-line);background:var(--accent-weak)}
/* The venue NAME rendered as an external link (Home "Venues at a glance"): reads as a normal name in the
   cell (inherits the table text size/weight), turns accent on hover. Distinct from the .venue-link pill. */
.venue-name-link{color:var(--text);font-weight:600;text-decoration:none;transition:color .12s ease}
.venue-name-link:hover{color:var(--accent)}
.ext-mark{font-size:9px;color:var(--text-faint)}
/* Net APY — the visual anchor of the row. */
.col-apy{white-space:nowrap}
.apy-n{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em;
  color:var(--accent-strong)}
.apy-u{font-size:9.5px;font-weight:600;color:var(--text-faint);text-transform:uppercase;letter-spacing:.04em}
/* Projected $/yr at the typed size — a labeled projection beneath the APY, not the visual anchor. */
.apy-yr{font-size:10.5px;font-weight:600;color:var(--text-muted);margin-top:2px;white-space:nowrap}
.apy-yr-amt{color:var(--text);font-variant-numeric:tabular-nums}
/* Costs — the cost side of the edge (fees + slippage estimate); NOT a repeat of the headline APY. */
.col-costs{font-size:11.5px;color:var(--text-muted)}
.cost-line{line-height:1.5;white-space:nowrap}
.cost-line .num{color:var(--text)}
/* Fees block — a "Fees taker/maker" header, then one row per setup leg, each showing that venue's
   taker / maker percent. Maker (the cheaper limit rate) is the fainter second number. No per-cell tooltip. */
.cost-fees{line-height:1.45;margin-bottom:2px}
.cf-row{display:block;white-space:nowrap}
.cf-row .num{color:var(--text)}
.cf-k{color:var(--text-muted)}
.cf-leg{padding-left:0.8em}
.cf-side{color:var(--text-muted);display:inline-block;min-width:3.1em}
.cf-sep{color:var(--text-faint);margin:0 1px}
.cf-mk{color:var(--text-faint)}
.fee-kind{color:var(--text-faint);font-size:10px}
/* Costs show the NUMBER only — no provenance words. A measured Slippage (walked from the captured ladder for
   the typed size) reads plainly; an OI estimate keeps a leading "~"; "won't fill" (warn colour) means the
   book is too thin to fill your size on a leg — the capacity answer, folded into the Slippage line. */
.slip-thin{color:var(--warn-fg)}
/* OI / liquidity — per-leg open interest, one clean line each (slippage lives in Costs). */
.col-oi{font-size:11.5px}
.oi-line{color:var(--text-muted);line-height:1.6;white-space:nowrap}
.oi-v{color:var(--text)}
.oi-na{color:var(--text-faint)}
/* Persistence — a plain-words reliability verdict (Held steady / Swings a lot / Just flipped / Too new to
   tell) + a flips·APY-range detail, folded from both legs' real funding history over 24h. cursor:help +
   the header "ⓘ" signal the explanation; width:fit-content keeps the hover target tight to the text. */
.col-persist{font-size:11.5px}
.persist-status{font-weight:700;font-size:12px;cursor:help;width:fit-content}
.persist-reason{color:var(--text-faint);font-size:10.5px}
.persist-good{color:var(--good-fg)}
.persist-warn{color:var(--warn-fg)}
.persist-bad{color:var(--bad-fg)}
.persist-muted{color:var(--text-muted)}
/* Risk / limit — the single most important blocker, quiet by default, warm when it is a trust problem. */
.col-risk{font-size:11.5px}
.risk-warn{color:var(--warn-fg);font-weight:600}
.risk-muted{color:var(--text-muted)}
.no-match{margin-top:10px}
/* Exchange (venue) filter — a compact trigger that opens a popover of venue chips (so the bar is not a
   wall of 15 chips). The popover anchors to the trigger and floats over the table below (the .sortbar
   z-index lift keeps it above the table despite the bar's backdrop-filter). */
.vchip-all,.vchip{font-size:12px;padding:4px 11px}
.venue-pop-wrap{position:relative;display:inline-flex}
.venue-trigger{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:12.5px;font-weight:600;
  cursor:pointer;border-radius:999px;padding:5px 12px;color:var(--text);background:var(--surface-2);
  border:1px solid var(--border);transition:border-color .15s ease,color .15s ease}
.venue-trigger:hover{border-color:var(--accent-line);color:var(--accent-strong)}
.venue-trigger[aria-expanded="true"]{color:var(--accent-strong);background:var(--accent-weak);
  border-color:var(--accent-line)}
.venue-caret{font-size:9px;color:var(--text-faint);transition:transform .15s ease}
.venue-trigger[aria-expanded="true"] .venue-caret{transform:rotate(180deg)}
/* Left-anchored (opens rightward, into the bar) so it never spills past the viewport's left edge — the
   Exchanges control now sits at the LEFT of the row, so a right-anchored panel would push the page
   sideways. Width is also clamped to the viewport so it can never force horizontal scroll. */
.venue-pop{position:absolute;top:calc(100% + 8px);left:0;right:auto;z-index:30;display:flex;
  flex-wrap:wrap;gap:6px;width:max-content;max-width:min(340px,calc(100vw - 32px));padding:11px 12px;
  background:var(--surface-solid);border:1px solid var(--border-strong);border-radius:var(--r);
  box-shadow:var(--shadow)}
/* Per-asset "other pairs" expander — a tiny quiet pill under the setup legs; JS unhides it on the asset's
   current primary row only (inert + hidden with JS off, so the no-JS table is just best-per-asset). */
.variants-toggle{display:inline-block;margin-top:7px;font:inherit;font-size:10.5px;font-weight:600;
  cursor:pointer;color:var(--accent);background:var(--accent-weak);border:1px solid var(--accent-line);
  border-radius:999px;padding:1px 8px;line-height:1.5;letter-spacing:.01em;white-space:nowrap}
.variants-toggle:hover{color:var(--accent-strong);box-shadow:inset 0 0 0 1px var(--accent-line)}
/* Variant (non-best) pairing rows — a faint inset + a "↳" lead so they read as alternatives of the asset
   above, not separate assets. Shown only when that asset is expanded. */
tr.is-variant{background:rgba(164,194,148,.045)}
tr.is-variant td.col-asset{position:relative;padding-left:20px;font-weight:600}
tr.is-variant td.col-asset::before{content:"\21B3";position:absolute;left:7px;top:9px;
  color:var(--text-faint);font-weight:400}
tr.is-variant td.col-asset .asset-link{color:var(--text-muted)}
/* Asset page funding-setups table — the SAME workbench columns as the Funding page (minus the redundant
   Asset column). The top few setups show; the rest stay hidden until the "Show N more" button below the
   table reveals them (a quiet pill, a touch larger than the in-cell .variants-toggle since it sits alone). */
.setups-more{display:inline-block;margin-top:12px;font:inherit;font-size:12px;font-weight:600;cursor:pointer;
  color:var(--accent);background:var(--accent-weak);border:1px solid var(--accent-line);border-radius:999px;
  padding:6px 14px;letter-spacing:.01em}
.setups-more:hover{color:var(--accent-strong);box-shadow:inset 0 0 0 1px var(--accent-line)}

/* Asset dashboard (trader-facing per-asset page) — overview metric strip, best-setup card, per-venue
   table cells, market-context + signals. Additive: these .a-* classes are used only by the Asset page;
   they reuse the warm-skin tokens and the shared .leg setup badges. */
.a-prov{margin:8px 0 0;font-size:12px;color:var(--text-faint)}
/* Overview metric strip — compact tiles (smaller than Home's hero strip so a price RANGE fits cleanly). */
.a-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:20px 0 0}
.a-metric{background:var(--glass),var(--surface);border:1px solid var(--border);border-radius:var(--r);
  padding:14px 16px;box-shadow:var(--shadow-sm),var(--sheen);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.a-metric-l{display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.055em;
  color:var(--text-faint)}
.a-metric-v{display:block;margin-top:7px;font-size:21px;font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--text);line-height:1.12}
.a-metric-v.a-accent{color:var(--accent-strong)}
.a-metric-v.a-gap{color:var(--text-faint);font-weight:600}

/* Best-setup card — the cross-venue funding-capture pair for THIS asset (reuses the .leg side badges). */
.a-setup{margin:14px 0 0;background:linear-gradient(180deg,var(--accent-weak),var(--surface) 52%);
  border:1px solid var(--accent-line);border-radius:var(--r-lg);padding:18px 20px;
  box-shadow:var(--shadow-sm),var(--sheen);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.a-setup-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.a-setup-title{font-size:14px;font-weight:600;color:var(--text)}
.a-setup-apy{white-space:nowrap}
.a-setup-apy-n{font-size:27px;font-weight:800;letter-spacing:-.03em;color:var(--accent-strong);
  font-variant-numeric:tabular-nums}
.a-setup-apy-u{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;
  color:var(--text-faint)}
.a-setup-legs{margin:14px 0 0;display:flex;flex-direction:column;gap:9px}
.a-leg{display:grid;grid-template-columns:54px minmax(0,1fr) auto auto;align-items:center;gap:12px;
  font-size:13px}
.a-leg .leg{width:54px}
.a-leg-venue{color:var(--text);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.a-leg-fund{color:var(--text-muted);font-variant-numeric:tabular-nums;justify-self:end;white-space:nowrap}
.a-leg-fund .a-eq{color:var(--text-faint);font-size:.85em}
.venue-link.a-open{font-size:11px;padding:3px 9px}
.a-setup-foot{margin:15px 0 0;display:flex;flex-wrap:wrap;gap:7px 20px;font-size:12px;color:var(--text)}
.a-setup-foot .a-foot-k{color:var(--text-faint);text-transform:uppercase;font-size:10px;font-weight:600;
  letter-spacing:.05em;margin-right:6px}
.a-setup-empty{margin:12px 0 0;padding:16px 18px;background:var(--surface);
  border:1px dashed var(--border-strong);border-radius:var(--r);color:var(--text-muted);font-size:13px}
.a-setup-empty strong{color:var(--text)}

/* Per-venue table cells. */
table.a-venues td{vertical-align:top}
table.a-venues td.a-venue{font-weight:700;color:var(--text)}
/* Compact baseline-fee line under the venue name (rough context, not execution truth). */
.a-venue-fee{display:block;margin-top:2px;font-size:10.5px;font-weight:400;font-variant-numeric:tabular-nums;line-height:1.5}
/* A maker rebate (negative fee) reads as a small positive cue, distinct from a cost. */
.fee-rebate{color:var(--good-fg)}
.a-fund-apy{font-weight:700;font-variant-numeric:tabular-nums}
.a-fund-apy.cv-pos{color:var(--good-fg)}
.a-fund-apy.cv-neg{color:var(--bad-fg)}
.a-fund-sub{display:block;margin-top:3px;font-size:10.5px;color:var(--text-faint);line-height:1.7}
.a-next{font-variant-numeric:tabular-nums;color:var(--text-muted)}
.a-alerts{list-style:none;margin:9px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;
  font-size:12.5px;color:var(--text-muted)}
.a-alerts li{display:flex;gap:9px;align-items:baseline}
.a-alerts li::before{content:"\2022";color:var(--accent);font-weight:700}

[hidden]{display:none!important}

/* Tables — clean financial style: warm near-solid surface, muted uppercase header, airy rows, hairlines. */
table{border-collapse:separate;border-spacing:0;width:100%;font-size:13px;margin:12px 0;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;
  box-shadow:var(--shadow-sm)}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--surface-3);vertical-align:top}
th{background:var(--surface-2);color:var(--text-faint);font-weight:600;font-size:11px;
  text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
tbody tr{transition:background .12s ease}
tbody tr:hover{background:var(--surface-2)}
tr:last-child td{border-bottom:none}

ul{margin:8px 0;padding-left:20px}
ul li{margin:4px 0}
ul.actions{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.action{font-size:12.5px;font-weight:500;border:1px solid var(--border-strong);border-radius:999px;
  padding:6px 13px;background:var(--surface);color:var(--text);
  transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,color .15s ease}
.action:hover{background:var(--accent-weak);border-color:var(--accent-line);color:var(--accent-strong);
  box-shadow:var(--shadow-sm)}
.action-ext{border-style:dashed;color:var(--warn-fg)}
.action-ext:hover{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn-fg)}
.action .ext{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;opacity:.85}

details summary{cursor:pointer;font-size:12.5px;font-weight:500;color:var(--accent)}

footer{margin-top:52px;padding-top:20px;border-top:1px solid var(--border);
  font-size:12px;line-height:1.7;color:var(--text-faint)}
/* The shared shell's site footer line (the feedback entry) — sits below each page's own footer. */
.sitefoot{margin:14px 0 0;font-size:12px;color:var(--text-faint)}
.sitefoot a{color:var(--accent)}
code{background:var(--surface-3);border:1px solid var(--border);border-radius:5px;padding:1px 5px;
  font-size:.9em;font-family:var(--mono);color:var(--text-muted)}

/* Identity Phase A — local (this-browser) watchlist controls. The ☆ card star and the asset-page
   toggle are real links that NAVIGATE without JS; the inline script upgrades them into toggles.
   The My Markets "On this device" list is client-rendered into .lw-list. */
.watch-star{margin-left:8px;font-size:15px;line-height:1;text-decoration:none;color:var(--text-faint)}
.watch-star:hover{color:var(--accent-strong)}
.watch-star.is-watched{color:var(--accent)}
.watch-toggle.is-watched{color:var(--accent-strong)}
.lw-note{margin:8px 0 0;font-size:11.5px;color:var(--text-faint)}
.lw-list{list-style:none;margin:14px 0 0;padding:0}
.lw-row{display:flex;align-items:center;gap:10px;padding:9px 2px;border-bottom:1px solid var(--border)}
.lw-row:last-child{border-bottom:none}
.lw-asset{font-weight:700}
.lw-when{font-size:11.5px}
.lw-remove{font:inherit;font-size:11.5px;cursor:pointer;margin-left:auto;color:var(--text-muted);
  background:var(--surface-2);border:1px solid var(--border);border-radius:999px;padding:3px 10px}
.lw-remove:hover{color:var(--text);background:var(--surface-3)}
.lw-empty{padding:6px 0}

/* Touch/keyboard-accessible explanation bubbles (.tip) — the no-JS replacement for title-attribute
   tooltips on CRITICAL explanations (badges, labeled gaps). Hover shows it on desktop; tap/Tab
   focuses the trigger on touch/keyboard; the bubble is real DOM text, readable by screen readers. */
.tip{position:relative;display:inline-block;cursor:help;outline:none}
.tip:focus-visible{border-radius:6px;box-shadow:0 0 0 1px var(--accent-line)}
.tip .tip-b{display:none;position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);
  z-index:40;width:max-content;max-width:250px;padding:8px 10px;font-size:11.5px;line-height:1.5;
  font-weight:400;text-align:left;white-space:normal;color:var(--text);
  background:var(--surface-3);border:1px solid var(--border);border-radius:8px;
  box-shadow:var(--shadow-sm)}
.tip:hover .tip-b,.tip:focus .tip-b,.tip:focus-within .tip-b{display:block}

/* History charts (asset page) — server-rendered inline SVG line charts over the recorded funding/OI
   series. One translucent panel per chart; the legend maps the deterministic series colors to venues;
   per-series honesty notes (suppressions / gaps / imported provenance) sit under the legend. */
.a-hist{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px;margin:14px 0 0}
.a-hist-card{background:var(--glass),var(--surface);border:1px solid var(--border);
  border-radius:var(--r);padding:14px 16px;box-shadow:var(--shadow-sm),var(--sheen)}
.a-hist-card h3{margin:0 0 8px;font-size:13px;font-weight:700;letter-spacing:-.005em;
  color:var(--accent-strong)}
.ch{display:block;width:100%;height:auto}
.ch-grid{stroke:rgba(242,235,223,.07)}
.ch-zero{stroke:rgba(242,235,223,.28);stroke-dasharray:3 3}
.ch-tick{fill:var(--text-faint);font-size:10px;font-family:var(--mono)}
.ch-line{fill:none;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.ch-legend{display:flex;flex-wrap:wrap;gap:5px 14px;margin:9px 0 0;font-size:12px;
  color:var(--text-muted)}
.ch-key{display:inline-flex;align-items:center;gap:5px}
.ch-swatch{width:10px;height:10px;border-radius:3px;display:inline-block}
.ch-note{margin:7px 0 0;font-size:11.5px;color:var(--text-faint);line-height:1.6}
.a-hist-empty{margin:6px 0 0;font-size:12.5px;color:var(--text-muted)}

/* /hip3 "Stocks on-chain" — one panel per builder dex: a head row (name + slug chip + collateral
   chip + mono totals), then the shared dense table. Low-activity / fully-delisted dexes collapse to
   the compact .h3-low card strip below the panels — recorded and labeled, never hidden. */
.h3-dex{background:var(--glass),var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm),var(--sheen);margin:16px 0;padding:4px 18px 10px}
.h3-dex-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:12px 0 0}
.h3-dex-head h3{margin:0;font-size:16px;letter-spacing:-.01em}
.h3-chip{font-family:var(--mono);font-size:11.5px;border-radius:6px;padding:1px 7px;border:1px solid}
.h3-slug{color:var(--accent);background:var(--accent-weak);border-color:var(--accent-line)}
.h3-coll{color:var(--muted-fg);background:var(--muted-bg);border-color:var(--muted-line)}
.h3-coll span{font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-faint)}
.h3-sum{margin-left:auto;font-family:var(--mono);font-size:12.5px;color:var(--text-muted);
  font-variant-numeric:tabular-nums}
.h3-sum b{color:var(--text);font-weight:600}
/* The dense 9-column table scrolls INSIDE its dex panel on mid widths (721px–~940px) — the page
   body never scrolls sideways; below 640px the cards take over and the wrapper becomes inert. */
.h3-scroll{overflow-x:auto}
table.hip3{margin:8px 0 2px}
.h3-mkt-link{display:inline-flex;align-items:baseline;gap:6px;color:inherit;text-decoration:none}
.h3-mkt-link:hover .h3-tkr,.h3-mkt-link:focus-visible .h3-tkr{color:var(--accent-strong)}
.h3-tkr{font-weight:600;font-size:13.5px;color:var(--text)}
.h3-more{margin:6px 0 4px}
.h3-low{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;margin:12px 0 0}
.h3-low-card{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);
  padding:10px 14px;font-size:13px;color:var(--text-muted)}
.h3-low-card b{color:var(--text);font-family:var(--mono);font-weight:600}
.h3-low-card .n{font-family:var(--mono);font-size:12px;color:var(--text-faint);margin-top:2px}
.h3-pos{color:var(--good-fg)}
.h3-neg{color:var(--bad-fg)}
/* Top-carry strip — three jump cards above the fold (highest / most negative carry, largest market). */
.h3-top{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:0 0 8px}
.h3-top-card{display:flex;flex-direction:column;gap:2px;background:var(--glass),var(--surface);
  border:1px solid var(--border);border-radius:var(--r);padding:13px 16px;text-decoration:none;
  color:var(--text);box-shadow:var(--shadow-sm),var(--sheen)}
.h3-top-card:hover{border-color:var(--border-strong);box-shadow:var(--shadow)}
.h3-top-k{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint)}
.h3-top-v{font:700 24px/1.25 var(--mono);font-variant-numeric:tabular-nums}
.h3-top-v small{font-size:12px;font-weight:600;color:var(--text-faint)}
.h3-top-m{font-size:13.5px;font-weight:600}
.h3-top-s{font-family:var(--mono);font-size:11.5px;color:var(--text-faint)}
/* Page-level fill-size chips + the secondary bps note inside fill-cost cells. */
.h3-sizes{align-items:center;margin:0 0 12px}
.h3-sizes-l{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);
  margin-right:4px}
.h3-bps{font-family:var(--mono);font-size:10.5px;color:var(--text-faint);margin-left:6px}

/* /hip4 "Predictions on-chain" — one panel per question / market family. A parallel .h4-* block
   (not shared .h3 classes) so either surface can evolve without breaking the other; the mobile
   card takeover below extends the shared table.setups/a-venues/hip3 rules with table.hip4. */
.h4-panel{background:var(--glass),var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm),var(--sheen);margin:16px 0;padding:4px 18px 10px}
.h4-panel-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:12px 0 0}
.h4-panel-head h3{margin:0;font-size:16px;letter-spacing:-.01em}
.h4-chip{font-family:var(--mono);font-size:11.5px;border-radius:6px;padding:1px 7px;border:1px solid;
  color:var(--muted-fg);background:var(--muted-bg);border-color:var(--muted-line)}
/* The dense table scrolls INSIDE its panel on mid widths (721px–~940px) — the page body never
   scrolls sideways; below 640px the cards take over and the wrapper becomes inert. */
.h4-scroll{overflow-x:auto}
table.hip4{margin:8px 0 2px}
.h4-mkt .h4-name{font-weight:600;font-size:13.5px;color:var(--text)}
.h4-more{margin:6px 0 4px}
.h4-pos{color:var(--good-fg)}
.h4-neg{color:var(--bad-fg)}
/* Probability cell: recorded mid + a proportional bar (numbers stay primary; the bar is a glance aid). */
.h4-prob{display:inline-flex;align-items:center;gap:8px}
.h4-side{font-weight:600;font-size:12.5px;color:var(--text-muted)}
.h4-bar{width:52px;height:5px;border-radius:3px;background:var(--muted-bg);overflow:hidden;flex:none}
.h4-bar i{display:block;height:100%;border-radius:3px;background:var(--accent)}
/* Top strip — up to three jump cards above the fold (swing / contested / expiry / depth). */
.h4-top{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin:0 0 8px}
.h4-top-card{display:flex;flex-direction:column;gap:2px;background:var(--glass),var(--surface);
  border:1px solid var(--border);border-radius:var(--r);padding:13px 16px;text-decoration:none;
  color:var(--text);box-shadow:var(--shadow-sm),var(--sheen)}
.h4-top-card:hover{border-color:var(--border-strong);box-shadow:var(--shadow)}
.h4-top-k{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint)}
.h4-top-v{font:700 24px/1.25 var(--mono);font-variant-numeric:tabular-nums}
.h4-top-v small{font-size:12px;font-weight:600;color:var(--text-faint)}
.h4-top-m{font-size:13.5px;font-weight:600}
.h4-top-s{font-family:var(--mono);font-size:11.5px;color:var(--text-faint)}
/* Page-level fill-size chips + the recording-provenance note under the panels. */
.h4-sizes{align-items:center;margin:0 0 12px}
.h4-sizes-l{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);
  margin-right:4px}
.h4-since{font-size:12.5px;margin:14px 0 0}

@media (max-width:720px){
  /* Mobile header: a compact 3-row grid — brand + account share the top line, then a full-width search
     row, then nav. Grid AREAS pin account to the top-right whatever its DOM position, so the flex
     re-sequencing property (whose name trips the honesty guard) is never needed. The brand keeps its
     natural width (auto) and the account column is minmax(0,1fr) — it takes the remaining width and
     yields rather than ever pushing its chip past the card's right edge. */
  /* position:relative (not static) + z-index keep the header a stacking context ABOVE the page sections,
     so the sign-in sheet (.acct-sheet, z-index:35 inside here) paints over the Market-data summary (which
     is position:relative;z-index:1) instead of disappearing behind it — which also hid the sheet's lower
     half (the Telegram "Open Telegram" link + the wallet status line), making those providers look dead.
     top:auto cancels the desktop sticky offset so the bar does not shift down in relative flow. */
  .appbar{position:relative;top:auto;z-index:20;display:grid;grid-template-columns:auto minmax(0,1fr);
    column-gap:12px;row-gap:11px;align-items:center;grid-template-areas:"brand account" "search search" "nav nav"}
  .brand{grid-area:brand;min-width:0}
  .appbar-account{grid-area:account;justify-self:end;margin-left:0;min-width:0;max-width:100%}
  /* Clip an over-wide handle on the chip/button itself — NOT on .appbar-account, whose overflow must stay
     visible so the absolutely-positioned sign-in sheet (.acct-sheet, a child of this box) can paint below
     the button instead of being clipped to the tiny button (which made "Sign in" appear to do nothing). */
  .appbar-account .acct-chip,.appbar-account .acct-link,.appbar-account .acct-signin{max-width:100%;
    overflow:hidden}
  .appbar-search{grid-area:search;margin-left:0;min-width:0}
  /* On phones the meta slot exists ONLY when something is wrong: healthy pages hide it entirely (no
     spare row for a lone dot on a small screen); a delayed/stalled verdict surfaces it as its own
     full-width caption row — the one moment it is allowed to take space. */
  .appbar-meta{grid-column:1/-1;width:auto;justify-content:flex-start}
  .appbar-meta:not(:has(.fresh--delayed,.fresh--stalled)){display:none}
  /* Nav stays on ONE row as a horizontal swipe-strip — operator prefers it bleeding slightly past the
     right edge over wrapping the current-asset pill onto a second line. Tighter gap + pill padding + font
     ONLY on phones (desktop values untouched) so all four pills — incl. an 8-char asset like 1000PEPE next
     to "My Markets" — fit one row on mainstream phones (~375px+); only the narrowest screens need a swipe. */
  .nav{grid-area:nav;margin-left:0;width:auto;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;gap:5px;font-size:12px}
  .nav::-webkit-scrollbar{display:none}
  .nav a,.nav .nav-here{flex:none;padding:6px 9px}
  .summary-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px}
  .sm{padding:0;border-left:none}
  /* The big summary figures scale with the viewport so a wide value (e.g. a billion) cannot overflow its
     half-width column on a narrow phone; capped at the desktop 44px. */
  .summary .sm-n{font-size:clamp(30px,9.5vw,44px)}
  .summary .sm-n.sm-gap{font-size:clamp(30px,9.5vw,44px)}
  table{display:block;overflow-x:auto;white-space:nowrap}
  /* In the 641–720px band the setups workbench keeps its full column set via horizontal scroll (the Net APY
     column must never be cropped). Below 640px the card block further down replaces this with stacked cards. */
  table.setups{min-width:760px;overflow:auto}
}
/* Phones: the two dense data tables (cross-venue setups + per-venue markets) stop being scrollable grids and
   become a stack of cards — one card per row, each value cell labeled by its column name (data-label). This
   block sits AFTER the 720px rules on purpose: at equal specificity the later cascade entry wins, so it
   overrides the min-width:760 horizontal-scroll fallback above. */
@media (max-width:640px){
  table.setups,table.a-venues,table.hip3,table.hip4{display:block;min-width:0;overflow:visible;white-space:normal}
  table.setups thead,table.a-venues thead,table.hip3 thead,table.hip4 thead,
  table.setups colgroup,table.a-venues colgroup,table.hip3 colgroup,table.hip4 colgroup{display:none}
  table.setups tbody,table.a-venues tbody,table.hip3 tbody,table.hip4 tbody{display:block}
  table.setups tbody tr,table.a-venues tbody tr,table.hip3 tbody tr,table.hip4 tbody tr{display:block;margin:0 0 12px;padding:10px 14px 12px;
    border:1px solid var(--border-strong);border-radius:var(--r);background:var(--surface-2)}
  table.setups td,table.a-venues td,table.hip3 td,table.hip4 td{display:block;position:relative;padding:7px 0 7px 40%;border:0;
    overflow:visible;white-space:normal;vertical-align:baseline;font-size:12.5px;text-align:left}
  table.setups td+td,table.a-venues td+td,table.hip3 td+td,table.hip4 td+td{border-top:1px solid var(--border)}
  /* Labeled value cells: the column name lives in a fixed left gutter, the value flows in the rest. */
  table.setups td[data-label]::before,table.a-venues td[data-label]::before,table.hip3 td[data-label]::before,table.hip4 td[data-label]::before{content:attr(data-label);
    position:absolute;left:0;top:7px;width:36%;color:var(--text-faint);font-size:11px;font-weight:600;
    line-height:1.4;text-transform:uppercase;letter-spacing:.04em}
  table.setups td[data-label] *,table.a-venues td[data-label] *,table.hip3 td[data-label] *,table.hip4 td[data-label] *{white-space:normal}
  /* Header cells (the asset/setup pair, or the venue name) span the full card width with no gutter or rule. */
  table.setups td.col-asset,table.setups td.col-setup,table.a-venues td.a-venue,table.hip3 td.h3-mkt,table.hip4 td.h4-mkt{padding-left:0;border-top:0;
    text-align:left}
  table.hip3 td.h3-mkt{font-size:15px;padding-bottom:2px}
  table.hip4 td.h4-mkt{font-size:15px;padding-bottom:2px}
  table.setups td.col-asset{font-size:18px;font-weight:700;padding-bottom:0}
  table.setups td.col-setup{padding-top:8px}
  table.a-venues td.a-venue{font-size:15px;font-weight:600;padding-bottom:2px}
  /* "+N more" reveals an asset's OTHER venue pairings (same asset, different exchanges). Nest those
     variant cards under the primary — indent + a left accent rail + a slightly recessed fill — so they
     read as sub-cards of the asset above, not new top-level assets. The repeated asset ticker is dropped
     as redundant; every variant still carries its full field set (its own Net APY, Costs, OI, …). */
  table.setups tbody tr.is-variant{margin:0 0 10px 16px;background:var(--surface);
    border-color:var(--border);border-left:2px solid var(--accent-line)}
  table.setups tbody tr.is-variant td.col-asset{display:none}
  table.setups tbody tr.is-variant td.col-setup{padding-top:2px}
}
@media (max-width:460px){
  .page-head h1{font-size:22px}
  .hero-pos h1{font-size:clamp(21px,6.4vw,24px)}
  h2{font-size:18px}
  .wrap{padding-bottom:64px}
  .appbar{padding:10px 13px}
  table.setups td,table.a-venues td,table.hip3 td,table.hip4 td{padding-left:38%}
  table.setups td[data-label]::before,table.a-venues td[data-label]::before,table.hip3 td[data-label]::before,table.hip4 td[data-label]::before{width:34%}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
  .card:hover,.fcard:hover{transform:none}
  .fresh-dot{animation:none!important}
}