/* Self-hosted fonts (no external dependencies). DESIGN.md §typography is the
canonical role split. Doto + Space Mono were originally a Nothing-design
bounded experiment (2026-04-25) that grew page-wide; blessed and self-hosted
on 2026-04-27 to drop the fonts.googleapis.com runtime dependency (network
drag + privacy + brittle CDN coupling). */
@font-face { font-family: 'Lato'; src: url('/static/cw/fonts/lato-300.woff2') format('woff2'); font-weight: 300; font-display: swap; font-style: normal; }
@font-face { font-family: 'Lato'; src: url('/static/cw/fonts/lato-400.woff2') format('woff2'); font-weight: 400; font-display: swap; font-style: normal; }
@font-face { font-family: 'Lato'; src: url('/static/cw/fonts/lato-700.woff2') format('woff2'); font-weight: 700; font-display: swap; font-style: normal; }
@font-face { font-family: 'Fira Code'; src: url('/static/cw/fonts/firacode-400.woff2') format('woff2'); font-weight: 400 700; font-display: swap; font-style: normal; }
@font-face { font-family: 'Switzer'; src: url('/static/cw/fonts/switzer-400.woff2') format('woff2'); font-weight: 400; font-display: swap; font-style: normal; }
@font-face { font-family: 'Switzer'; src: url('/static/cw/fonts/switzer-500.woff2') format('woff2'); font-weight: 500; font-display: swap; font-style: normal; }
@font-face { font-family: 'Switzer'; src: url('/static/cw/fonts/switzer-600.woff2') format('woff2'); font-weight: 600; font-display: swap; font-style: normal; }
@font-face { font-family: 'Switzer'; src: url('/static/cw/fonts/switzer-700.woff2') format('woff2'); font-weight: 700; font-display: swap; font-style: normal; }
@font-face { font-family: 'Switzer'; src: url('/static/cw/fonts/switzer-800.woff2') format('woff2'); font-weight: 800; font-display: swap; font-style: normal; }
/* Doto: dot-matrix display face for hero numerals (composite score, fear/greed,
heat thermometer). Variable woff2 — same file serves 400/500/700; browser
interpolates the weight axis. Latin subset only (English-only dashboard). */
@font-face { font-family: 'Doto'; src: url('/static/cw/fonts/doto-400.woff2') format('woff2'); font-weight: 400 700; font-display: swap; font-style: normal; }
/* Space Mono: panel-head display face (ALL CAPS labels) and BTC-price chip. */
@font-face { font-family: 'Space Mono'; src: url('/static/cw/fonts/space-mono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; font-style: normal; }
@font-face { font-family: 'Space Mono'; src: url('/static/cw/fonts/space-mono-700.woff2') format('woff2'); font-weight: 700; font-display: swap; font-style: normal; }
:root {
--bg: #0b0e14;
--bg-panel: #141821;
--bg-panel-2: #1a1f2c;
--border: #242938;
--text: #e6e8ef;
--text-dim: #8a92a8;
/* Cryptowatch brand palette (from 2018 brand guide) */
--brand-neon-blue: #507DFC; /* primary, 90% usage */
--brand-maya-blue: #7498FD; /* secondary */
--brand-aquamarine: #50FCD1; /* accent — vivid mint */
--brand-sky-blue: #8BDBEC;
--brand-ship-gray: #313A3D;
--brand-charcoal: #3C5266;
/* semantic — remapped to brand */
--blue: #507DFC; /* Neon Blue */
--cyan: #50FCD1; /* Aquamarine */
--purple: #7498FD; /* Maya Blue */
/* P&L semantics — rebranded to harmonize with the blue/mint palette.
Positive uses Aquamarine (native brand mint). Negative uses a warm
rose that complements the neon-blue without clashing (brand has no red). */
--green: #50FCD1; /* Aquamarine — was #50FCD1 */
--red: #FF5E7F; /* Brand-harmonized rose — was #FF5E7F */
--yellow: #FFD166; /* Warmer yellow that sits with the cool palette */
--orange: #FF9457; /* Softer orange */
--font-display: 'Switzer', ui-sans-serif, system-ui, sans-serif;
--font-body: 'Lato', ui-sans-serif, system-ui, sans-serif;
--mono: 'Fira Code', ui-monospace, "SF Mono", "Menlo", "Monaco", "Consolas", monospace;
--gold: #F59E0B;
--gold-dim: rgba(245,158,11,0.15);
/* DESIGN.md motion tokens — ship the signature easing + duration scale.
Previously the spec values were hardcoded inline (0.9s cubic-bezier(0.16,1,0.3,1))
in ~7 places without a token, so "change the signature motion" meant a
global find-replace. Tokens let one edit ripple. 2026-04-24. */
--dur-instant: 120ms;
--dur-fast: 200ms;
--dur-base: 300ms;
--dur-slow: 600ms;
--dur-data-reveal: 900ms; /* KPI tick-ups, gauge fills, progress settle */
--ease-out: cubic-bezier(0, 0, 0.2, 1);
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--ease-data-reveal: cubic-bezier(0.16, 1, 0.3, 1); /* signature */
/* Aliases for legacy/imported CSS that referenced names which were never
declared at :root. Each one was silently falling through to the inline
fallback value in `var(--x, #fallback)` calls. Aliasing them to the
canonical token means a single edit to the canonical token now ripples
everywhere — and any new alias use without a fallback won't render
blank. (2026-04-27 design-review hardening.) */
--panel-bg: var(--bg-panel);
--panel-border: var(--border);
--muted: var(--text-dim);
--text-strong: var(--text);
--fg-muted: var(--text-dim);
--aqua: var(--brand-aquamarine);
--rose: var(--red);
--positive: var(--green);
--negative: var(--red);
--font-sans: var(--font-body);
/* DESIGN.md § Layout § Spacing — base unit 4px, all spacing snaps to this scale.
2026-05-01 (F8 design-audit residual): tokens declared so future panels
can use `var(--sp-*)` instead of raw px. The first-pass migration of
padding/margin/gap exact-match values landed in the same commit; off-scale
values (5/7/11/13px etc.) are still raw and tagged as drift. */
--sp-2xs: 2px; /* icon-to-text inside tight pills */
--sp-xs: 4px; /* inline gaps, pill padding y */
--sp-sm: 8px; /* standard inline gaps, button padding y */
--sp-md: 12px; /* panel internal padding (compact), row gap */
--sp-lg: 16px; /* panel padding (default), section gap */
--sp-xl: 24px; /* section break, dashboard grid gap */
--sp-2xl: 32px; /* major section separator */
--sp-3xl: 48px; /* page top padding, hero breathing room */
--sp-4xl: 96px; /* desk landing-page hero whitespace, full-width section breaks */
/* DESIGN.md § Shapes — radius scale */
--r-xs: 2px; /* pill stems, tiny inline badges, legend swatches */
--r-sm: 4px; /* inputs, small buttons, inline tags, small KPI cards */
--r-md: 6px; /* cards, panels, medium buttons, chart containers */
--r-lg: 10px; /* hero panels, modals, feature promo cards */
--r-pill: 999px; /* live-pulse dots, full pills, progress bar ends */
/* DESIGN.md § Typography § Type scale — pick from these only */
--fs-mono-xs: 9px;
--fs-mono-sm: 10px;
--fs-mono: 11px;
--fs-body-sm: 12px;
--fs-body: 13px; /* base body */
--fs-body-lg: 14px;
--fs-ui: 16px;
--fs-ui-lg: 18px;
--fs-display-sm: 20px;
--fs-display-md: 24px; /* added 2026-05-02: cw_desk hero numerals + section heads */
--fs-display: 28px;
--fs-display-hero: 48px;
}
/* DESIGN.md § Accessibility — brand focus ring */
:focus { outline: none; }
:focus-visible {
outline: 2px solid var(--blue);
outline-offset: 2px;
border-radius: inherit;
}
/* DESIGN.md § Accessibility — respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); color-scheme: dark; }
html, body {
color: var(--text);
font: 13px/1.5 var(--font-body);
-webkit-font-smoothing: antialiased;
}
body {
padding:
max(var(--sp-lg), env(safe-area-inset-top))
max(var(--sp-lg), env(safe-area-inset-right))
max(var(--sp-lg), env(safe-area-inset-bottom))
max(var(--sp-lg), env(safe-area-inset-left));
max-width: 1600px; margin: 0 auto;
position: relative;
min-height: 100vh;
}
/* Supergraphic pattern — fixed in the page background (below all content).
Two rotated-square clusters inspired by the brand guide's cover / identity
spreads: top-right mint/neon-blue cluster, bottom-left sky-blue accent.
Low opacity so data stays readable, pointer-events: none so it's non-interactive. */
body::before {
content: '';
position: fixed; inset: 0; z-index: -1;
pointer-events: none;
background-color: var(--bg);
background-image:
/* bottom-left soft sky cluster */
radial-gradient(
ellipse 620px 520px at -8% 108%,
rgba(139, 219, 236, 0.10) 0%,
rgba(139, 219, 236, 0) 60%
),
/* top-right mint cluster */
radial-gradient(
ellipse 700px 600px at 112% -12%,
rgba(80, 252, 209, 0.10) 0%,
rgba(80, 252, 209, 0) 60%
),
/* center neon glow */
radial-gradient(
ellipse 900px 700px at 50% 50%,
rgba(80, 125, 252, 0.05) 0%,
rgba(80, 125, 252, 0) 65%
);
}
body::after {
content: '';
position: fixed;
top: -120px; right: -160px;
width: 520px; height: 520px;
z-index: -1;
pointer-events: none;
background-image: url("data:image/svg+xml;utf8,");
background-size: contain;
background-repeat: no-repeat;
}
/* Display font on headings + nav — brand requires Klavika (paid);
Switzer is a modern grotesque from Fontshare (free, OFL, self-hostable) */
h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: 0.01em; }
header.topbar {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0;
padding-bottom: 14px;
border-bottom: 1px solid var(--border);
}
header.topbar .brand {
display: flex; align-items: center; gap: 14px;
}
/* Full CRYPTOWATCH wordmark (1288x165) — sized so the W icon reads ~34px tall */
header.topbar .brand-logo {
height: 32px; width: auto; display: block;
filter: drop-shadow(0 0 14px rgba(80, 125, 252, 0.2));
}
/* "MACRO" product-name divider that pairs with the wordmark */
header.topbar .brand-divider {
width: 1px; height: 26px;
background: linear-gradient(180deg, transparent, var(--brand-neon-blue), transparent);
}
header.topbar .brand-product {
font-family: var(--font-display);
font-size: var(--fs-ui-lg);
font-weight: 600;
letter-spacing: 0.28em;
text-transform: uppercase;
color: var(--brand-aquamarine);
line-height: 1;
}
/* Surface-switch nav — Macro ↔ Hunter. Sits in the left brand block
so both product surfaces appear side-by-side as peers, not a hidden
link in the topbar-right utility area. */
header.topbar .surface-nav {
display: flex;
gap: 10px;
margin-left: 20px;
padding-left: 20px;
border-left: 1px solid var(--border);
font-family: var(--mono);
font-size: var(--fs-mono);
text-transform: uppercase;
letter-spacing: 0.08em;
}
header.topbar .surface-nav a {
color: var(--text-dim);
text-decoration: none;
display: inline-flex;
align-items: center;
min-height: 32px;
padding: var(--sp-2xs) 6px;
border-radius: var(--r-sm);
transition: color 140ms ease-out, background 140ms ease-out;
}
header.topbar .surface-nav a:hover { color: var(--text); background: rgba(255,255,255,0.04); }
header.topbar .surface-nav a.active {
color: var(--brand-aquamarine);
background: rgba(80, 252, 209, 0.06);
}
header.topbar .brand-docs-link {
margin-left: 14px;
padding: var(--sp-xs) 10px;
font-family: var(--mono);
font-size: var(--fs-mono-sm);
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--text-dim);
text-decoration: none;
border: 1px solid var(--border);
border-radius: var(--r-sm);
transition: all 0.15s;
}
header.topbar .brand-docs-link:hover {
color: var(--cyan);
border-color: var(--cyan);
background: rgba(80,252,209,0.06);
}
@media (max-width: 768px) {
header.topbar .brand-docs-link { font-size: var(--fs-mono-xs); padding: 3px var(--sp-sm); margin-left: var(--sp-sm); }
}
/* Keep h1 class for screen readers / compatibility but hide visually
since the logo image already contains CRYPTOWATCH */
.sr-only,
header.topbar h1.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;
}
/* Secondary nav (Track Record / Ledger / Docs / Changelog). Case +
letter-spacing match .surface-nav so the two nav groups read as one
visual row. A vertical border-left acts as the divider between
primary (product surfaces) and secondary (accountability + reference)
so users see two clear groups rather than one running blob. */
.nav-links {
display: flex; gap: var(--sp-md); font-size: var(--fs-mono); font-family: var(--mono);
padding-left: var(--sp-lg); margin-left: var(--sp-xs);
border-left: 1px solid var(--border);
text-transform: uppercase; letter-spacing: 0.08em;
}
.nav-links a {
color: var(--text-dim);
text-decoration: none;
display: inline-flex;
align-items: center;
min-height: 32px;
padding: var(--sp-2xs) 6px;
border-radius: var(--r-sm);
transition: color 140ms ease-out, background 140ms ease-out;
}
.nav-links a:hover { color: var(--text); background: rgba(255,255,255,0.04); }
.nav-links a.active { color: var(--cyan); background: rgba(80, 252, 209, 0.06); }
/* Touch target minimum (DESIGN.md a11y §line 401) */
.screen-pill { min-height: 32px !important; }
.topbar button, .topbar a, .tm-trigger { min-height: 32px; }
.status-strip {
display: flex; gap: var(--sp-md); font-size: var(--fs-mono);
font-family: var(--mono); color: var(--text-dim);
}
.status-strip .dot {
display: inline-block; width: 8px; height: 8px;
border-radius: 50%; background: var(--text-dim);
margin-right: var(--sp-xs); vertical-align: middle;
}
.status-strip .dot.ok { background: var(--green); }
.status-strip .dot.err { background: var(--red); }
/* Time machine controls */
.topbar-controls {
display: flex; align-items: center; gap: var(--sp-lg);
flex-wrap: wrap;
}
.time-machine { position: relative; }
/* 2026-05-05 (Round 9 P1-8 follow-up): bump visibility — the audit
thought no time-travel UI existed because the trigger was easy to
miss in the topbar. Aqua-tinted background + visible "AS-OF" prefix
turn the button into a clear affordance. */
.tm-trigger {
position: relative;
display: inline-flex; align-items: center; gap: 6px;
background: linear-gradient(135deg, rgba(80, 252, 209, 0.14), rgba(80, 252, 209, 0.06));
border: 1px solid rgba(80, 252, 209, 0.55);
color: var(--cyan);
padding: var(--sp-xs) 12px;
font-family: var(--mono); font-size: var(--fs-mono-sm);
text-transform: uppercase; letter-spacing: 0.08em;
font-weight: 700;
cursor: pointer; border-radius: var(--r-sm);
transition: all 0.15s;
box-shadow: 0 0 0 1px rgba(80, 252, 209, 0.10);
}
.tm-trigger:hover {
border-color: var(--cyan); background: rgba(80,252,209,0.18);
box-shadow: 0 0 0 1px rgba(80, 252, 209, 0.35);
}
.tm-trigger:focus-visible {
outline: 2px solid var(--cyan); outline-offset: 2px;
}
/* "NEW" badge removed — Time Machine shipped 2026-04 and is no longer new */
.tm-trigger .tm-tick { font-size: var(--fs-mono); }
/* position:fixed (not absolute) so .cw-nav-inner's overflow-x:auto
doesn't clip the popover — same fix used by .jump-menu. JS sets
top/left from the trigger rect on open. Mobile's @media block at
~7786 overrides with position:fixed !important + centered modal.
max-width + flex-wrap keeps the popover compact (date row + preset
row) so it stays visually anchored to the trigger; without the cap,
`white-space: nowrap` made it ~1100px wide and the right-aligned
left edge ended up halfway across the page. */
.tm-popover {
position: fixed; top: 0; left: 0;
display: none; align-items: center; gap: 10px;
flex-wrap: wrap;
max-width: 380px;
font-family: var(--mono); font-size: var(--fs-mono-sm);
padding: var(--sp-md) 14px;
border: 1px solid rgba(80, 252, 209, 0.35);
background: var(--bg-panel);
border-radius: var(--r-md);
box-shadow: 0 12px 32px rgba(0,0,0,0.55);
z-index: 100;
}
/* Either selector wins — `.tm-popover.is-open` covers the portaled-to-body
case where the popover is no longer a descendant of `.time-machine`. */
.time-machine.is-open .tm-popover,
.tm-popover.is-open { display: flex; }
.time-machine.is-open .tm-trigger { border-color: var(--cyan); background: rgba(80,252,209,0.08); }
.tm-popover .tm-hint {
color: var(--text-dim); font-size: var(--fs-mono-xs);
letter-spacing: 0.03em;
}
.tm-popover .tm-input {
background: var(--bg-panel-2); border: 1px solid var(--border);
color: var(--text); padding: var(--sp-xs) var(--sp-sm);
font-family: var(--mono); font-size: var(--fs-mono-sm);
border-radius: var(--r-sm);
color-scheme: dark;
}
.tm-popover .tm-btn {
background: var(--bg-panel-2); border: 1px solid var(--border);
color: var(--text-dim); padding: var(--sp-xs) 10px;
font-family: var(--mono); font-size: var(--fs-mono-xs);
text-transform: uppercase; letter-spacing: 0.06em;
cursor: pointer; border-radius: var(--r-sm);
transition: all 0.15s;
}
.tm-popover .tm-btn:hover { color: var(--blue); border-color: var(--blue); }
.tm-popover .tm-btn.primary {
color: var(--cyan); border-color: var(--cyan);
background: rgba(80,252,209,0.08);
}
.tm-popover .tm-presets { display: flex; gap: var(--sp-xs); flex-wrap: wrap; }
.tm-popover .tm-presets button {
background: var(--bg-panel-2); border: 1px solid var(--border);
color: var(--text-dim); padding: 3px var(--sp-sm);
font-family: var(--mono); font-size: var(--fs-mono-xs);
cursor: pointer; border-radius: var(--r-xs);
transition: all 0.15s;
}
.tm-popover .tm-presets button:hover { color: var(--blue); border-color: var(--blue); }
@media (max-width: 768px) {
.topbar-controls { width: 100%; justify-content: space-between; }
.tm-popover { right: auto; left: 0; flex-wrap: wrap; white-space: normal; }
.tm-popover .tm-presets { flex-wrap: wrap; }
.tm-popover .tm-hint { display: none; }
}
.historical-banner {
background: linear-gradient(90deg, rgba(116,152,253,0.20), rgba(80,125,252,0.10));
border: 1px solid var(--purple);
border-radius: var(--r-sm);
padding: 10px var(--sp-lg);
margin-bottom: var(--sp-lg);
display: flex; align-items: center; gap: 14px;
font-family: var(--mono); font-size: var(--fs-mono);
color: var(--text);
flex-wrap: wrap;
}
.historical-banner .hb-icon { font-size: var(--fs-ui); }
.historical-banner b { color: var(--cyan); }
.historical-banner .hb-note {
color: var(--text-dim); font-size: var(--fs-mono-sm);
margin-left: auto;
}
.historical-banner .hb-exit {
background: var(--cyan); border: none;
color: var(--bg); padding: var(--sp-xs) var(--sp-md);
font-family: var(--mono); font-size: var(--fs-mono-sm);
text-transform: uppercase; letter-spacing: 0.06em;
font-weight: 700; cursor: pointer; border-radius: var(--r-sm);
}
.kpi-row {
display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-md); margin-bottom: var(--sp-lg);
}
.kpi {
background: var(--bg-panel); border: 1px solid var(--border);
border-radius: var(--r-md); padding: 12px var(--sp-lg);
transition: background 0.25s ease-out, border-color 0.25s ease-out;
/* Uniform card height + flex layout 2026-05-05 — label/value/sub on a
shared baseline grid. Value gets flex:1 + center so different value
string lengths don't shift the sub-line up or down. */
display: flex;
flex-direction: column;
min-height: 116px;
}
.kpi-label { flex-shrink: 0; }
.kpi-sub { flex-shrink: 0; }
/* State-tinted KPI cards (FINDING-007 from external review) */
.kpi:has(.kpi-value.positive) {
background: linear-gradient(180deg, rgba(80,252,209,0.06) 0%, rgba(80,252,209,0.02) 60%, transparent 100%);
border-color: rgba(80,252,209,0.28);
}
.kpi:has(.kpi-value.negative) {
background: linear-gradient(180deg, rgba(255,94,127,0.07) 0%, rgba(255,94,127,0.02) 60%, transparent 100%);
border-color: rgba(255,94,127,0.28);
}
.kpi:has(.kpi-value.warn) {
background: linear-gradient(180deg, rgba(255,209,102,0.07) 0%, rgba(255,209,102,0.02) 60%, transparent 100%);
border-color: rgba(255,209,102,0.30);
}
.kpi:has(.kpi-value.hot) {
background: linear-gradient(180deg, rgba(255,148,87,0.07) 0%, rgba(255,148,87,0.02) 60%, transparent 100%);
border-color: rgba(255,148,87,0.28);
}
.kpi:has(.kpi-value.cool) {
background: linear-gradient(180deg, rgba(80,125,252,0.06) 0%, rgba(80,125,252,0.02) 60%, transparent 100%);
border-color: rgba(80,125,252,0.28);
}
.kpi-label {
font-size: var(--fs-body-sm); text-transform: uppercase; letter-spacing: 0.08em;
color: var(--text-dim); margin-bottom: 6px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kpi-label .kpi-label-tag {
font-weight: 400; opacity: 0.55;
font-size: var(--fs-mono-sm);
}
/* Multi-Asset radar cards 2026-05-04 — replaces 6-col mock table with
a 4-asset card grid, each card showing a 5-axis mini-radar so the
cross-asset rotation is scannable at a glance. */
.ma-radar-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-md);
margin-top: var(--sp-md);
}
.ma-card {
background: rgba(20, 24, 33, 0.55);
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: var(--sp-sm) var(--sp-md) var(--sp-md);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--sp-xs);
transition: border-color 0.2s ease-out, background 0.2s ease-out;
}
.ma-card[data-tone="bull"] { border-color: rgba(80, 252, 209, 0.30); background: rgba(80, 252, 209, 0.04); }
.ma-card[data-tone="warn"] { border-color: rgba(255, 209, 102, 0.30); background: rgba(255, 209, 102, 0.04); }
.ma-card[data-tone="bear"] { border-color: rgba(255, 94, 127, 0.30); background: rgba(255, 94, 127, 0.04); }
.ma-card-head {
display: flex;
align-items: baseline;
justify-content: space-between;
width: 100%;
gap: var(--sp-xs);
}
.ma-ticker {
font-family: 'Doto', 'Fira Code', var(--mono);
font-size: 24px;
font-weight: 700;
letter-spacing: 0.04em;
line-height: 1;
color: var(--text);
}
.ma-verdict {
font-family: var(--mono);
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 3px 6px;
border-radius: var(--r-pill);
border: 1px solid currentColor;
white-space: nowrap;
}
.ma-verdict.bull { color: var(--green); background: rgba(80, 252, 209, 0.10); }
.ma-verdict.warn { color: var(--yellow); background: rgba(255, 209, 102, 0.10); }
.ma-verdict.bear { color: var(--red); background: rgba(255, 94, 127, 0.10); }
.ma-radar {
width: 100%;
height: auto;
max-width: 140px;
aspect-ratio: 1 / 1;
overflow: visible;
}
.ma-radar-grid-bg {
fill: none;
stroke: var(--border);
stroke-width: 0.6;
opacity: 0.7;
}
.ma-radar-fill {
stroke-width: 1.5;
transition: opacity 0.25s;
}
.ma-radar-fill.bull { fill: rgba(80, 252, 209, 0.22); stroke: var(--green); }
.ma-radar-fill.warn { fill: rgba(255, 209, 102, 0.18); stroke: var(--yellow); }
.ma-radar-fill.bear { fill: rgba(255, 94, 127, 0.20); stroke: var(--red); }
.ma-radar-fill.neutral { fill: rgba(138, 146, 168, 0.15); stroke: var(--text-dim); }
/* Polygon points transition smoothly when data updates (CSS animation
of the points attribute is browser-supported via SMIL on Chrome/Safari
and via attribute interpolation in modern browsers). */
.ma-radar-fill {
transition: fill 0.4s ease-out, stroke 0.4s ease-out;
}
.ma-verdict.neutral { color: var(--text-dim); background: rgba(138, 146, 168, 0.10); }
.ma-card[data-tone="neutral"] { border-color: var(--border); background: rgba(255, 255, 255, 0.015); }
.ma-axis {
font-family: var(--mono);
font-size: 7.5px;
font-weight: 600;
fill: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.ma-card-foot {
font: 500 var(--fs-mono-xs) var(--mono);
color: var(--text-dim);
text-align: center;
margin-top: 2px;
line-height: 1.3;
}
.ma-phase-badge {
font: 600 var(--fs-mono-xs) var(--mono);
text-align: center;
margin-top: 4px;
padding: 2px 6px;
border-radius: var(--r-pill);
border: 1px solid currentColor;
white-space: nowrap;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.ma-phase-badge.bull {
color: var(--green);
background: rgba(80, 252, 209, 0.10);
border-color: rgba(80, 252, 209, 0.25);
}
.ma-phase-badge.bear {
color: var(--red);
background: rgba(255, 94, 127, 0.10);
border-color: rgba(255, 94, 127, 0.25);
}
.ma-phase-badge.warn {
color: var(--yellow);
background: rgba(255, 209, 102, 0.10);
border-color: rgba(255, 209, 102, 0.25);
}
.ma-phase-badge.neutral {
color: var(--text-dim);
background: rgba(138, 146, 168, 0.10);
border-color: rgba(138, 146, 168, 0.20);
}
@media (max-width: 900px) {
.ma-radar-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.ma-radar-grid { grid-template-columns: 1fr; }
}
/* KPI value polish — Doto + neon glow keyed by tone classes. Doto is a
7-segment-style dot-matrix face designed for digits, not words, so
text-only KPIs (MA Stack pills, BTC Cycle phase name) override
font-family back to Switzer below. */
.kpi-value {
font-family: 'Doto', 'Fira Code', var(--mono);
font-size: 30px;
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1;
white-space: nowrap;
overflow: hidden;
/* Vertically center the value in the middle slot of the card so
sub-line stays anchored at the bottom regardless of value length */
flex: 1;
display: flex;
align-items: center;
min-width: 0;
transition: text-shadow var(--dur-data-reveal, 900ms) var(--ease-data-reveal, cubic-bezier(0.16, 1, 0.3, 1));
}
/* Text-only KPI values — drop Doto, use the display face at a smaller
size since words need more horizontal room than digits. */
#kpi-ma-stack,
#kpi-cycle {
font-family: var(--font-display);
font-size: 20px;
font-weight: 700;
letter-spacing: 0;
}
.kpi-value.positive {
text-shadow: 0 0 4px rgba(80, 252, 209, 0.85),
0 0 14px rgba(80, 252, 209, 0.45);
}
.kpi-value.negative {
text-shadow: 0 0 4px rgba(255, 94, 127, 0.85),
0 0 14px rgba(255, 94, 127, 0.40);
}
.kpi-value.warn {
text-shadow: 0 0 4px rgba(255, 209, 102, 0.80),
0 0 14px rgba(255, 209, 102, 0.35);
}
.kpi-value.cool {
text-shadow: 0 0 4px rgba(80, 125, 252, 0.85),
0 0 14px rgba(80, 125, 252, 0.40);
}
.kpi-value.hot {
text-shadow: 0 0 4px rgba(255, 148, 87, 0.85),
0 0 14px rgba(255, 148, 87, 0.40);
}
/* MA bonus strip — Compression + Velocity Divergence + Weekly RSI (paper #2/3/4) */
.ma-bonus-strip {
margin-top: 14px; padding-top: var(--sp-md);
border-top: 1px solid var(--border);
display: grid; grid-template-columns: 1fr 1fr 1fr;
gap: 14px;
font-family: var(--mono); font-size: var(--fs-mono);
}
@media (max-width: 900px) { .ma-bonus-strip { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .ma-bonus-strip { grid-template-columns: 1fr; } }
.ma-bonus-cell {
display: flex; flex-direction: column; gap: 3px;
}
.ma-bonus-cell .label {
font-size: var(--fs-mono-xs); text-transform: uppercase; letter-spacing: 0.06em;
color: var(--text-dim);
}
.ma-bonus-cell .value {
font-size: var(--fs-body-lg); font-weight: 600; color: var(--text);
font-variant-numeric: tabular-nums;
}
.ma-bonus-cell .value.green { color: var(--green); }
.ma-bonus-cell .value.cyan { color: var(--cyan); }
.ma-bonus-cell .value.warn { color: var(--yellow); }
.ma-bonus-cell .value.red { color: var(--red); }
.ma-bonus-cell .interp {
font-size: var(--fs-mono-xs); color: var(--text-dim);
margin-top: 1px;
}
.ma-bonus-cell .scale {
margin-top: var(--sp-xs); height: 4px;
background: var(--bg-panel); border: 1px solid var(--border);
border-radius: var(--r-pill); overflow: hidden;
position: relative;
}
.ma-bonus-cell .scale .marker {
position: absolute; top: -2px; bottom: -2px;
width: 2px; background: var(--text);
transition: left 0.5s ease;
}
.ma-bonus-cell .scale .zone-buy {
position: absolute; top: 0; bottom: 0;
background: rgba(80,252,209,0.15);
}
/* MA Stack dot pattern */
.ma-stack-dots {
display: inline-flex; gap: var(--sp-xs);
align-items: center;
font-family: var(--mono);
font-size: var(--fs-ui-lg); line-height: 1;
}
.ma-stack-dots .dot {
width: 14px; height: 14px; border-radius: 50%;
border: 1.5px solid var(--text-dim);
background: transparent;
transition: background 0.2s;
}
.ma-stack-dots .dot.on { background: var(--cyan); border-color: var(--cyan); }
.ma-stack-dots.score-0 .dot.on { background: var(--red); border-color: var(--red); }
.ma-stack-dots.score-1 .dot.on { background: var(--orange); border-color: var(--orange); }
.ma-stack-dots.score-2 .dot.on { background: var(--yellow); border-color: var(--yellow); }
.ma-stack-dots.score-3 .dot.on { background: var(--green); border-color: var(--green); }
.ma-stack-dots.score-4 .dot.on { background: var(--cyan); border-color: var(--cyan); }
.ma-stack-dots .num {
margin-left: 6px;
font-size: var(--fs-body-lg); font-weight: 700;
color: var(--text);
}
.kpi-value.positive { color: var(--green); }
.kpi-value.negative { color: var(--red); }
.kpi-value.warn { color: var(--yellow); }
.kpi-value.cool { color: var(--blue); }
.kpi-value.hot { color: var(--orange); }
/* Color-blind affordance — Kimi audit #7. Hue-only red/green excludes
~8% of male users. Add a directional glyph to value-bearing elements
so signal direction reads without color. Scoped narrowly to *value*
classes (numbers/percent/ratio displays) to avoid double-glyphing
chips, badges, or icon labels. 2026-04-26. */
.kpi-value.positive::before,
.vsb-value.positive::before,
.vsb-ratio-chip.positive::before,
.macro-bento-grid .bento-value.positive::before { content: '▲ '; font-size: 0.78em; }
.kpi-value.negative::before,
.vsb-value.negative::before,
.vsb-ratio-chip.negative::before,
.macro-bento-grid .bento-value.negative::before { content: '▼ '; font-size: 0.78em; }
.kpi-sub {
font-family: var(--mono); font-size: var(--fs-mono);
color: var(--text-dim); margin-top: var(--sp-xs);
}
.panel {
background: var(--bg-panel); border: 1px solid rgba(35,40,56,0.6);
border-radius: var(--r-lg); margin-bottom: var(--sp-lg);
position: relative;
}
/* Inline panel-head MOCK badge — sits next to the panel title on panels
whose data is still scaffolded (per CLAUDE.md § Mock-vs-real endpoint
discipline). External audit 2026-04-24 (C2): originally 9px which
users routinely missed. Bumped to 12px with solid amber fill so it's
impossible to overlook next to a 13px panel title. */
.panel-mock-badge {
display: inline-flex;
align-items: center;
padding: var(--sp-2xs) var(--sp-sm);
margin-left: var(--sp-sm);
font-family: var(--mono);
font-size: var(--fs-body-sm);
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #1a1410;
background: rgba(255, 209, 102, 0.95);
border: 1px solid rgba(255, 209, 102, 1);
border-radius: var(--r-sm);
line-height: 1.2;
box-shadow: 0 0 0 1px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
}
.panel-mock-badge::before { content: "⚠ "; margin-right: var(--sp-2xs); font-size: var(--fs-mono); }
/* Full-width in-panel MOCK DATA banner — auto-injected by JS into the
.panel-body of any panel that has a .panel-mock-badge in its head.
Audit C2: unmissable in-body signal beyond the header badge. */
.panel-mock-banner {
display: flex; align-items: center; gap: 10px;
margin: 0 0 var(--sp-md) 0; padding: var(--sp-sm) var(--sp-md);
background: rgba(255, 209, 102, 0.12);
border: 1px solid rgba(255, 209, 102, 0.55);
border-left: 3px solid rgba(255, 209, 102, 1);
border-radius: var(--r-sm);
font-family: var(--mono); font-size: var(--fs-mono);
color: var(--text); line-height: 1.45;
}
.panel-mock-banner .pmb-icon { font-size: var(--fs-ui); flex-shrink: 0; color: var(--yellow); }
.panel-mock-banner .pmb-label {
font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--yellow); flex-shrink: 0;
}
.panel-mock-banner .pmb-msg { color: var(--text-dim); flex: 1; }
/* Build-drift toast — surfaces "new version available" when the snapshot
reports a different build_sha than the page was loaded with.
external_audit P0-5: closes the silent-stale-assets failure mode that
used to be papered over with a "Cmd+Shift+R" usage instruction. */
.cw-update-toast {
position: fixed; right: var(--sp-md, 16px); bottom: var(--sp-md, 16px);
z-index: 9999; max-width: 360px;
padding: var(--sp-sm, 10px) var(--sp-md, 16px);
display: flex; align-items: center; gap: var(--sp-sm, 10px);
background: rgba(13, 17, 26, 0.95);
border: 1px solid var(--aqua, #50FCD1);
border-left: 3px solid var(--aqua, #50FCD1);
border-radius: var(--r-md, 6px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(80, 252, 209, 0.18);
font-family: var(--mono, ui-monospace, monospace);
font-size: var(--fs-mono-sm, 12px);
color: var(--text, #e6e8ef);
backdrop-filter: blur(6px);
animation: cw-update-toast-in 220ms ease-out;
}
@keyframes cw-update-toast-in {
from { transform: translateY(8px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.cw-update-toast .ut-label {
font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--aqua, #50FCD1);
}
.cw-update-toast .ut-msg { color: var(--text-dim, #8a92a8); flex: 1; }
.cw-update-toast .ut-action {
color: var(--aqua, #50FCD1); cursor: pointer; text-decoration: none;
font-weight: 700; padding: 2px 8px; border: 1px solid rgba(80,252,209,0.45);
border-radius: var(--r-sm, 4px); white-space: nowrap;
}
.cw-update-toast .ut-action:hover { background: rgba(80,252,209,0.12); }
.cw-update-toast .ut-dismiss {
color: var(--text-dim, #8a92a8); cursor: pointer; padding: 0 4px;
background: transparent; border: 0; font-size: 14px;
}
.cw-update-toast .ut-dismiss:hover { color: var(--text, #e6e8ef); }
.panel-head {
display: flex; justify-content: space-between; align-items: center;
padding: var(--sp-md) var(--sp-lg); border-bottom: 1px solid rgba(35,40,56,0.5);
font-family: var(--font-display);
font-size: var(--fs-body); font-weight: 600;
text-transform: uppercase; letter-spacing: 0.08em;
color: var(--text);
background: var(--bg-panel);
border-top-left-radius: var(--r-lg);
border-top-right-radius: var(--r-lg);
}
.panel-head.is-current {
box-shadow: 0 0 0 1px rgba(80, 252, 209, 0.25), 0 4px 12px rgba(80, 252, 209, 0.08);
}
.panel-head > .panel-title {
color: var(--text);
margin: 0;
font: inherit;
min-width: 0;
}
/* Diff feed — "what changed today" panel. Round 9 P1-7. */
#sec-diff-feed .diff-feed-rows {
display: flex; flex-direction: column; gap: 6px;
font-family: var(--mono, ui-monospace, monospace);
font-size: var(--fs-mono-sm);
}
#sec-diff-feed .df-row {
display: grid;
grid-template-columns: 64px 1fr 110px 90px 64px;
gap: var(--sp-sm);
align-items: center;
padding: 8px 12px;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.06);
border-radius: var(--r-sm);
transition: background 120ms ease-out;
}
#sec-diff-feed .df-row.is-extreme {
border-color: rgba(255, 209, 102, 0.45);
background: linear-gradient(135deg, rgba(255,209,102,0.08), rgba(255,209,102,0.02));
}
#sec-diff-feed .df-row.is-bull-extreme {
border-color: rgba(80, 252, 209, 0.45);
background: linear-gradient(135deg, rgba(80, 252, 209, 0.10), rgba(80, 252, 209, 0.02));
}
#sec-diff-feed .df-row.is-bear-extreme {
border-color: rgba(255, 94, 127, 0.45);
background: linear-gradient(135deg, rgba(255, 94, 127, 0.08), rgba(255, 94, 127, 0.02));
}
#sec-diff-feed .df-z {
font-weight: 800; font-size: 14px; letter-spacing: 0;
text-align: left; color: var(--text-strong, #e6e8ef);
}
#sec-diff-feed .df-z.bull { color: var(--aqua, #50FCD1); }
#sec-diff-feed .df-z.bear { color: var(--rose, #FF5E7F); }
#sec-diff-feed .df-label { color: var(--text); }
#sec-diff-feed .df-source {
font-size: 10px; color: var(--text-dim); letter-spacing: 0.06em; text-transform: uppercase;
}
#sec-diff-feed .df-value {
text-align: right; color: var(--text); font-weight: 600;
}
#sec-diff-feed .df-delta {
text-align: right; font-weight: 700;
}
#sec-diff-feed .df-delta.bull { color: var(--aqua, #50FCD1); }
#sec-diff-feed .df-delta.bear { color: var(--rose, #FF5E7F); }
#sec-diff-feed .df-bar {
height: 6px; background: rgba(255,255,255,0.06); border-radius: 3px;
position: relative; overflow: hidden;
}
#sec-diff-feed .df-bar > .df-bar-fill {
position: absolute; top: 0; bottom: 0;
}
#sec-diff-feed .df-bar > .df-bar-fill.bull {
left: 50%; background: linear-gradient(90deg, rgba(80,252,209,0.30), var(--aqua, #50FCD1));
}
#sec-diff-feed .df-bar > .df-bar-fill.bear {
right: 50%; background: linear-gradient(270deg, rgba(255,94,127,0.30), var(--rose, #FF5E7F));
}
#sec-diff-feed .df-bar::before {
content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px;
background: rgba(255,255,255,0.18);
}
@media (max-width: 720px) {
#sec-diff-feed .df-row {
grid-template-columns: 48px 1fr 80px 64px;
}
#sec-diff-feed .df-bar { display: none; }
}
#sec-diff-feed .df-empty { color: var(--text-dim); padding: var(--sp-md); text-align: center; }
/* Forward-return panel — the decision-system layer. external_audit P0-2.
Layout: a current-band hero line, then a 7-card horizontal grid of
score bands with median 90d forward return + sample count, then a
plain-language caption. */
#sec-fwd-returns .fwd-current {
margin-bottom: var(--sp-md);
padding: var(--sp-md) var(--sp-lg);
background: linear-gradient(135deg, rgba(80, 252, 209, 0.06), rgba(116, 152, 253, 0.04));
border: 1px solid var(--border, rgba(36,41,56,0.65));
border-left: 3px solid var(--aqua, #50FCD1);
border-radius: var(--r-md, 6px);
font-family: var(--mono, ui-monospace, monospace);
font-size: var(--fs-body);
line-height: 1.5;
}
#sec-fwd-returns .fwd-current .fc-label {
font-size: var(--fs-mono-xs);
text-transform: uppercase; letter-spacing: 0.12em;
color: var(--text-dim, #8a92a8);
margin-bottom: 4px;
}
#sec-fwd-returns .fwd-current .fc-line { color: var(--text); font-weight: 600; }
#sec-fwd-returns .fwd-current .fc-line b { font-weight: 800; letter-spacing: 0; }
#sec-fwd-returns .fwd-current .fc-line b.bull { color: var(--aqua, #50FCD1); }
#sec-fwd-returns .fwd-current .fc-line b.bear { color: var(--rose, #FF5E7F); }
#sec-fwd-returns .fwd-current .fc-detail {
margin-top: 6px; font-size: var(--fs-mono-sm); color: var(--text-dim);
}
#sec-fwd-returns .fwd-band-grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 6px;
margin-bottom: var(--sp-md);
}
@media (max-width: 720px) {
#sec-fwd-returns .fwd-band-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
#sec-fwd-returns .fwd-band-card {
position: relative;
padding: 10px 8px;
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.06);
border-radius: var(--r-sm, 4px);
text-align: center;
font-family: var(--mono, ui-monospace, monospace);
}
#sec-fwd-returns .fwd-band-card.is-current {
background: linear-gradient(135deg, rgba(80, 252, 209, 0.10), rgba(80, 252, 209, 0.04));
border-color: var(--aqua, #50FCD1);
box-shadow: 0 0 0 1px rgba(80, 252, 209, 0.25);
}
#sec-fwd-returns .fwd-band-label {
font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--text-dim);
margin-bottom: 4px;
}
#sec-fwd-returns .fwd-band-card.is-current .fwd-band-label {
color: var(--aqua, #50FCD1); font-weight: 700;
}
#sec-fwd-returns .fwd-band-pin {
display: inline-block; margin-right: 4px; font-size: 9px;
}
#sec-fwd-returns .fwd-band-median {
font-size: 18px; font-weight: 800; letter-spacing: -0.02em;
color: var(--text-strong, #e6e8ef); margin: 2px 0;
}
#sec-fwd-returns .fwd-band-median.bull { color: var(--aqua, #50FCD1); }
#sec-fwd-returns .fwd-band-median.bear { color: var(--rose, #FF5E7F); }
#sec-fwd-returns .fwd-band-median.flat { color: var(--text-dim); }
#sec-fwd-returns .fwd-band-iqr {
font-size: 10px; color: var(--text-dim); margin-top: 2px;
font-family: var(--mono, ui-monospace, monospace);
}
#sec-fwd-returns .fwd-v1v2 {
margin-top: 8px;
font-family: var(--mono, ui-monospace, monospace);
font-size: 11px;
line-height: 1.4;
}
#sec-fwd-returns .fwd-band-verdict {
margin-top: 4px;
font-family: var(--mono, ui-monospace, monospace);
font-size: 9px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
}
#sec-fwd-returns .fwd-band-verdict.strong-buy { color: var(--cyan); }
#sec-fwd-returns .fwd-band-verdict.buy { color: var(--aqua); }
#sec-fwd-returns .fwd-band-verdict.mild-buy { color: var(--aqua); opacity: 0.8; }
#sec-fwd-returns .fwd-band-verdict.wait { color: var(--text-dim); }
#sec-fwd-returns .fwd-band-verdict.mild-sell { color: var(--rose); opacity: 0.8; }
#sec-fwd-returns .fwd-band-verdict.sell { color: var(--rose); }
#sec-fwd-returns .fwd-band-verdict.strong-sell { color: var(--red); }
#sec-fwd-returns .fwd-band-n {
font-size: 9px; color: var(--text-dim); margin-top: 4px;
text-transform: uppercase; letter-spacing: 0.06em;
}
#sec-fwd-returns .fwd-caption {
font-size: var(--fs-mono-sm);
line-height: 1.5;
padding: 0 var(--sp-sm);
}
/* Panel source-link icon — auto-injected next to the panel title for
panels with a known canonical source. Closes external_audit P0-3 /
Round 9 P0-3 / Codex P2-3 (4/5 auditors): 49 outbound links across
1.22MB of HTML, ~0 to glassnode/tradingview/cryptoquant/deribit. The
link is visual evidence of the source claim; the tooltip names it. */
.panel-source-link {
display: inline-flex; align-items: center; justify-content: center;
width: 18px; height: 18px;
margin-left: 8px;
color: var(--text-dim, #8a92a8);
text-decoration: none;
font-family: var(--mono, ui-monospace, monospace);
font-size: 11px; font-weight: 700; letter-spacing: 0;
border: 1px solid rgba(255,255,255,0.10);
border-radius: 3px;
background: rgba(255,255,255,0.02);
transition: color 120ms ease-out, border-color 120ms ease-out, background 120ms ease-out;
text-transform: none;
flex-shrink: 0;
}
.panel-source-link:hover {
color: var(--aqua, #50FCD1);
border-color: rgba(80, 252, 209, 0.45);
background: rgba(80, 252, 209, 0.08);
}
.panel-source-link:focus-visible {
outline: 2px solid var(--aqua, #50FCD1);
outline-offset: 2px;
}
/* Panel info-icon — matches .panel-source-link visual rhythm. Closes
Round 9 audit P1-3 ("176 hidden tooltips, 0 visible help affordances").
Sits before the source-link icon (info first, then source) so the
reading order is "what is this" → "where does it come from". */
.panel-info-icon {
display: inline-flex; align-items: center; justify-content: center;
width: 18px; height: 18px;
margin-left: 6px;
padding: 0;
color: var(--text-dim, #8a92a8);
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.10);
border-radius: 3px;
font-family: var(--mono, ui-monospace, monospace);
font-size: 12px; font-weight: 600; line-height: 1;
cursor: pointer;
transition: color 120ms ease-out, border-color 120ms ease-out, background 120ms ease-out;
flex-shrink: 0;
}
.panel-info-icon:hover {
color: var(--aqua, #50FCD1);
border-color: rgba(80, 252, 209, 0.45);
background: rgba(80, 252, 209, 0.08);
}
/* D3: Per-panel source badges for time-machine reconstructed mode */
.panel-source-badge {
display: inline-block;
margin-left: 8px;
padding: 1px 5px;
border-radius: 3px;
font-family: var(--mono, ui-monospace, monospace);
font-size: 9px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
line-height: 1.4;
flex-shrink: 0;
}
.panel-source-badge.source-historical {
color: var(--aqua, #50FCD1);
background: rgba(80, 252, 209, 0.08);
border: 1px solid rgba(80, 252, 209, 0.25);
}
.panel-source-badge.source-live {
color: var(--text-dim, #8a92a8);
background: rgba(255,255,255,0.02);
border: 1px solid rgba(255,255,255,0.08);
}
.panel-info-icon:focus-visible {
outline: 2px solid var(--aqua, #50FCD1);
outline-offset: 2px;
}
.panel-info-icon[aria-expanded="true"] {
color: var(--aqua, #50FCD1);
border-color: rgba(80, 252, 209, 0.45);
background: rgba(80, 252, 209, 0.12);
}
.panel-body { padding: var(--sp-lg) var(--sp-lg); }
/* Info blocks (FINDING-008): hide the inline summary, surface as popover.
F3 (audit 2026-05-02): popover body is running prose; promote color to
--text. --text-dim reserved for meta labels only. */
details.panel-info {
display: none;
font-size: var(--fs-mono); line-height: 1.55;
color: var(--text); font-family: var(--mono);
}
details.panel-info[open] {
display: block;
opacity: 1;
position: absolute;
top: 44px; right: 14px;
z-index: 80;
width: min(380px, calc(100vw - 32px));
max-width: calc(100% - 28px);
max-height: min(420px, calc(100vh - 120px));
overflow-y: auto;
overscroll-behavior: contain;
margin: 0;
padding: 14px var(--sp-lg);
border: 1px solid var(--blue);
border-radius: var(--r-sm);
background: var(--bg-panel-2);
box-shadow: 0 18px 48px rgba(0,0,0,0.6), 0 0 0 1px rgba(80,125,252,0.15);
}
@keyframes cw-popover-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
details.panel-info > summary { display: none; }
details.panel-info > div { padding: 0; }
details.panel-info > div p { margin: 6px 0; }
details.panel-info > div p:first-child { margin-top: 0; }
details.panel-info > div p:last-child { margin-bottom: 0; }
details.panel-info > div b { color: var(--text); font-weight: 600; }
details.panel-info > div .warn { color: var(--yellow); }
@media (max-width: 640px) {
details.panel-info[open] {
left: 10px;
right: 10px;
width: auto;
max-width: none;
max-height: min(360px, calc(100vh - 96px));
}
}
/* Round 9 P2-4 — glossary drawer. Definitions live in hidden #sec-glossary
as a DOM source so reference material stays out of the main terminal flow. */
body.glossary-open { overflow: hidden; }
.glossary-fab {
position: fixed;
right: var(--sp-lg);
bottom: var(--sp-lg);
z-index: 180;
width: 44px;
height: 44px;
border: 1px solid rgba(80,252,209,0.34);
border-radius: var(--r-pill);
background: rgba(20,24,33,0.96);
color: var(--cyan);
box-shadow: 0 16px 42px rgba(0,0,0,0.48), 0 0 0 1px rgba(80,252,209,0.08);
cursor: pointer;
font-family: var(--mono);
font-size: var(--fs-ui-lg);
font-weight: 700;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
transition: transform 140ms ease-out, border-color 140ms ease-out, background 140ms ease-out;
}
.glossary-fab:hover,
.glossary-fab[aria-expanded="true"] {
border-color: var(--cyan);
background: rgba(80,252,209,0.10);
transform: translateY(-1px);
}
.glossary-fab:focus-visible,
.glossary-close:focus-visible,
.glossary-search:focus-visible {
outline: 2px solid var(--cyan);
outline-offset: 2px;
}
.glossary-shell[hidden] { display: none; }
.glossary-shell {
position: fixed;
inset: 0;
z-index: 9998;
pointer-events: none;
}
.glossary-backdrop {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.58);
opacity: 0;
transition: opacity 160ms ease-out;
}
.glossary-drawer {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: min(390px, calc(100vw - 32px));
box-sizing: border-box;
border-left: 1px solid var(--border);
background: rgba(20,24,33,0.98);
box-shadow: -18px 0 56px rgba(0,0,0,0.56);
overflow-y: auto;
transform: translateX(100%);
transition: transform 180ms ease-out;
padding: var(--sp-lg);
color: var(--text);
}
.glossary-shell.is-open {
pointer-events: auto;
}
.glossary-shell.is-open .glossary-backdrop {
opacity: 1;
}
.glossary-shell.is-open .glossary-drawer {
transform: translateX(0);
}
.glossary-drawer-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-md);
padding-bottom: var(--sp-md);
border-bottom: 1px solid var(--border);
}
.glossary-kicker,
.glossary-drawer-term h3,
.glossary-term h3 {
font-family: var(--mono);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.glossary-kicker {
color: var(--text-dim);
font-size: var(--fs-mono-xs);
margin-bottom: var(--sp-xs);
}
.glossary-title {
margin: 0;
color: var(--text);
font-family: var(--font-display);
font-size: var(--fs-ui-lg);
line-height: 1.2;
}
.glossary-close {
width: 32px;
height: 32px;
border: 1px solid var(--border);
border-radius: var(--r-sm);
background: rgba(255,255,255,0.02);
color: var(--text-dim);
cursor: pointer;
font-family: var(--mono);
font-size: var(--fs-body-lg);
}
.glossary-close:hover {
color: var(--text);
border-color: var(--text-dim);
}
.glossary-search-wrap {
display: block;
margin: var(--sp-md) 0;
}
.glossary-search {
width: 100%;
box-sizing: border-box;
min-height: 40px;
border: 1px solid var(--border);
border-radius: var(--r-sm);
background: var(--bg);
color: var(--text);
font-family: var(--mono);
font-size: var(--fs-body);
padding: 0 var(--sp-md);
}
.glossary-drawer-list,
.glossary-term-list {
display: grid;
gap: var(--sp-md);
}
.glossary-term-list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.glossary-drawer-term,
.glossary-term {
border-top: 1px solid rgba(255,255,255,0.08);
padding-top: var(--sp-md);
}
.glossary-drawer-term h3,
.glossary-term h3 {
margin: 0 0 var(--sp-xs);
color: var(--cyan);
font-size: var(--fs-mono);
line-height: 1.35;
}
.glossary-drawer-term p,
.glossary-term p,
.glossary-intro,
.glossary-footnote {
margin: 0;
color: var(--text-dim);
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: 1.5;
}
.glossary-intro {
margin-bottom: var(--sp-lg);
max-width: 780px;
}
.glossary-footnote {
margin-top: var(--sp-md);
padding-top: var(--sp-md);
border-top: 1px solid var(--border);
font-size: var(--fs-body-sm);
}
@media (max-width: 768px) {
.glossary-fab {
right: var(--sp-md);
bottom: calc(env(safe-area-inset-bottom, 0px) + 76px);
}
.glossary-drawer {
width: 100vw;
max-width: none;
border-left: 0;
}
.glossary-term-list {
grid-template-columns: 1fr;
}
}
/* Source-attribution chip injected onto indicator cards by JS — Round 7
§7 #8 fix (2026-05-04). Every Tier 1 / Tier 2 / Tactical Layer card
gets a small chip showing its raw data source + series name. Lets
users spot when two cards read the same underlying series (e.g.,
STH cost basis + STH NUPL both derive from STH realized price).
Tooltip on hover shows the full series description. */
.cw-source-chip {
display: inline-flex; align-items: center;
margin-top: var(--sp-xs);
padding: 2px var(--sp-sm);
border: 1px solid var(--border);
border-radius: var(--r-sm);
background: var(--bg-panel-2);
color: var(--text-dim);
font-family: var(--mono);
font-size: var(--fs-mono-xs);
font-weight: 500;
letter-spacing: 0.02em;
line-height: 1.3;
cursor: help;
user-select: none;
}
.cw-source-chip .cw-source-vendor {
color: var(--text);
font-weight: 600;
margin-right: 6px;
}
.cw-source-chip[data-vendor="Glassnode"] .cw-source-vendor { color: var(--cyan); }
.cw-source-chip[data-vendor="Deribit"] .cw-source-vendor { color: var(--gold); }
.cw-source-chip[data-vendor="Hyperliquid"] .cw-source-vendor { color: var(--blue); }
.t1-card .cw-source-chip,
.cg-cyc-card .cw-source-chip {
margin-top: var(--sp-sm);
}
/* Methodology link injected into panel headers by JS — Round 7 §7 #5
fix (2026-05-04). Every verdict-bearing panel gets a one-click jump
to its /docs section. Sits in the right-side meta cluster, dim by
default, blue on hover. Hidden on narrow viewports to preserve the
two-line panel-head layout. */
.panel-doc-link {
display: inline-flex; align-items: center;
margin-left: var(--sp-sm);
padding: 2px var(--sp-sm);
border: 1px solid var(--border);
border-radius: var(--r-sm);
color: var(--text-dim);
font-family: var(--mono);
font-size: var(--fs-mono-xs);
font-weight: 500;
letter-spacing: 0.04em;
text-transform: none;
text-decoration: none;
line-height: 1.4;
transition: color 0.15s, border-color 0.15s, background 0.15s;
flex-shrink: 0;
}
.panel-doc-link:hover,
.panel-doc-link:focus-visible {
color: var(--blue); border-color: var(--blue);
background: rgba(80,125,252,0.08);
outline: none;
}
/* ===== Tabbed panel composites ===== */
.tab-bar {
display: flex;
gap: 0;
border-bottom: 1px solid var(--border);
margin: -var(--sp-2xs) -var(--sp-lg) 14px;
padding: 0 var(--sp-lg);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.tab-btn {
padding: var(--sp-sm) var(--sp-lg) var(--sp-sm);
font-size: 10.5px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.07em;
background: none;
border: none;
color: var(--muted);
cursor: pointer;
border-bottom: 2px solid transparent;
transition: color 0.15s, border-color 0.15s;
white-space: nowrap;
font-family: inherit;
}
.tab-btn:hover { color: var(--text); }
.tab-btn.active {
color: var(--aqua);
border-bottom-color: var(--aqua);
}
.tab-pane { display: none; }
.tab-pane.active { display: block; }
#sec-cycle-position-hero .tab-pane {
padding-top: var(--sp-md);
}
@media (max-width: 480px) {
.tab-bar { margin: -var(--sp-2xs) -var(--sp-md) var(--sp-md); padding: 0 var(--sp-md); }
.tab-btn { padding: var(--sp-sm) var(--sp-md) 6px; font-size: 9.5px; }
}
@media (max-width: 720px) {
.panel-doc-link { display: none; }
}
/* collapsible panel bodies (default collapsed on mobile for heavy panels) */
.panel-head .panel-head-right {
display: flex; align-items: center; gap: 10px;
margin-left: auto;
}
.collapse-btn {
background: none; border: 1px solid var(--border);
color: var(--text-dim); cursor: pointer;
font-family: var(--mono); font-size: var(--fs-mono-sm);
padding: var(--sp-2xs) var(--sp-sm); border-radius: var(--r-sm);
transition: background 0.15s;
}
.collapse-btn:hover { background: var(--bg-panel-2); color: var(--text); }
.collapse-btn::before { content: '▾ hide'; }
.panel.collapsed .collapse-btn::before { content: '▸ show'; }
.panel.collapsed .panel-body { display: none; }
/* ── Tabular-lining numerals for data-dense contexts ── */
.kpi-value, .kpi-sub,
.gauge-score-num, .gauge-conf-num,
.opt-value, .ct-value,
.macro-val, .inst-val,
.dist-val, .dc-value,
.bmvz-kpi strong,
.hv-day, .heat-score,
.spot-val, .dca-pill,
.liq-meta .item b,
td, th,
.synth-hero-line,
.pm-card-hero,
.cap-num,
.tier-row .val {
font-variant-numeric: tabular-nums;
}
/* ── Auto-collapse for reference/lower panels ── */
.panel.auto-collapsed .panel-body { display: none; }
.panel.auto-collapsed .panel-head { cursor: pointer; opacity: 0.85; }
.panel.auto-collapsed .panel-head:hover { opacity: 1; }
.panel.auto-collapsed .panel-head::after {
content: '▸ expand';
font-family: var(--mono); font-size: var(--fs-mono-sm); color: var(--text-dim);
margin-left: auto; padding: var(--sp-2xs) var(--sp-sm);
border: 1px solid var(--border); border-radius: var(--r-sm);
}
.panel.auto-collapsed .panel-head .muted { display: inline; }
.panel.auto-collapsed .panel-head .panel-head-right { display: none; }
/* cycle phase — thermometer-style smooth gradient */
.cycle-wrap { display: flex; gap: var(--sp-xl); align-items: center; }
.cycle-bar-wrap { flex: 1; }
.cycle-bar {
height: 36px; border-radius: var(--r-sm); position: relative;
background: linear-gradient(90deg,
#FF5E7F 0%,
#FF5E7F 14%,
#507DFC 32%,
#507DFC 43%,
#50FCD1 57%,
#50FCD1 68%,
#FFD166 86%,
#FFD166 100%);
border: 1px solid var(--border);
}
.cycle-labels {
display: grid; grid-template-columns: repeat(4, 1fr);
margin-top: 6px; font-size: var(--fs-mono-xs); font-family: var(--mono);
color: var(--text-dim); text-transform: uppercase;
letter-spacing: 0.05em;
}
.cycle-labels span { text-align: center; }
.cycle-labels span:first-child { text-align: left; }
.cycle-labels span:last-child { text-align: right; }
.cycle-needle {
position: absolute; top: -6px; bottom: -6px; width: 3px;
background: var(--text); box-shadow: 0 0 8px rgba(255,255,255,0.7);
transition: left 0.4s ease;
}
.cycle-ghost {
position: absolute; top: 2px; bottom: 2px; width: 2px;
background: rgba(255,255,255,0.35);
border-left: 1px dashed rgba(255,255,255,0.55);
transition: left 0.4s ease;
}
/* Always-visible legend so users don't have to expand the panel-info
details to figure out what the dashed ghost marker means. */
.cycle-legend {
display: flex; gap: 14px; margin-top: 6px;
font-family: var(--mono); font-size: var(--fs-mono-xs);
color: var(--text-dim); letter-spacing: 0.05em; text-transform: uppercase;
}
.cycle-legend .cl-item { display: inline-flex; align-items: center; gap: var(--sp-xs); }
.cycle-legend .cl-swatch { display: inline-block; width: 2px; height: 10px; }
.cycle-legend .cl-solid { background: var(--text); box-shadow: 0 0 4px rgba(255,255,255,0.7); }
.cycle-legend .cl-dashed { background: transparent; border-left: 1px dashed rgba(255,255,255,0.55); }
.cycle-trend-line {
font-family: var(--mono); font-size: var(--fs-mono-sm);
color: var(--text-dim); margin-top: var(--sp-xs);
}
.cycle-trend-arrow {
display: inline-block; padding: 1px 6px; border-radius: var(--r-sm);
font-weight: 700; letter-spacing: 0.05em;
}
.cycle-trend-arrow.flat { background: rgba(138,146,168,0.15); color: var(--text-dim); }
.cycle-trend-arrow.cooling, .cycle-trend-arrow.cooling_fast {
background: rgba(96,165,250,0.2); color: var(--blue);
}
.cycle-trend-arrow.warming, .cycle-trend-arrow.warming_fast {
background: rgba(248,113,113,0.2); color: var(--red);
}
.cycle-summary { min-width: 220px; font-family: var(--mono); }
.cycle-phase { font-size: var(--fs-ui-lg); font-weight: 600; margin-bottom: var(--sp-xs); }
.cycle-phase.capitulation { color: var(--red); }
.cycle-phase.accumulation { color: var(--blue); }
.cycle-phase.markup { color: var(--green); }
.cycle-phase.distribution { color: var(--yellow); }
.cycle-pos { font-size: var(--fs-mono); color: var(--text-dim); }
.cycle-conf { font-size: var(--fs-mono-sm); color: var(--text-dim); margin-top: var(--sp-xs); }
.cycle-signals {
display: grid; grid-template-columns: repeat(5, 1fr);
gap: var(--sp-md); margin-top: var(--sp-lg); font-family: var(--mono); font-size: var(--fs-mono);
}
.cycle-sig-card {
background: var(--bg-panel-2); border: 1px solid var(--border);
border-radius: var(--r-sm); padding: var(--sp-sm) 10px;
}
.cycle-sig-label { font-size: var(--fs-mono-xs); color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; }
.cycle-sig-val { font-size: var(--fs-body); margin-top: var(--sp-2xs); }
/* heat thermometer */
.heat-wrap { display: flex; gap: var(--sp-xl); align-items: center; }
.heat-bar-wrap { flex: 1; }
.heat-bar {
height: 36px; border-radius: var(--r-sm); position: relative;
background: linear-gradient(90deg, #507DFC 0%, #50FCD1 25%, #FFD166 60%, #FF9457 80%, #FF5E7F 100%);
border: 1px solid var(--border);
}
.heat-needle {
position: absolute; top: -6px; bottom: -6px; width: 3px;
background: var(--text); box-shadow: 0 0 8px rgba(255,255,255,0.7);
transition: left 0.4s ease;
}
.heat-labels {
display: grid; grid-template-columns: repeat(5, 1fr);
margin-top: 6px; font-size: var(--fs-mono-xs); font-family: var(--mono);
color: var(--text-dim); text-transform: uppercase;
}
.heat-labels span:nth-child(2), .heat-labels span:nth-child(4) { text-align: center; }
.heat-labels span:nth-child(3) { text-align: center; }
.heat-labels span:last-child { text-align: right; }
.heat-summary { min-width: 220px; font-family: var(--mono); }
.heat-score { font-size: 32px; font-weight: 700; }
.heat-score.cool { color: var(--blue); }
.heat-score.neutral { color: var(--text); }
.heat-score.warm { color: var(--yellow); }
.heat-score.hot { color: var(--orange); }
.heat-score.overheat { color: var(--red); }
.heat-label-text { font-size: var(--fs-body); color: var(--text-dim); margin-top: var(--sp-2xs); }
.heat-coverage { font-size: var(--fs-mono-sm); color: var(--text-dim); margin-top: var(--sp-xs); }
.heat-comp-grid {
display: grid; grid-template-columns: repeat(2, 1fr);
gap: 6px; margin-top: var(--sp-lg);
}
.heat-comp {
display: flex; justify-content: space-between; align-items: center;
background: var(--bg-panel-2); border: 1px solid var(--border);
border-radius: var(--r-sm); padding: 6px 10px;
font-family: var(--mono); font-size: var(--fs-mono);
}
.heat-comp-name { color: var(--text-dim); }
.heat-comp-vals { display: flex; gap: var(--sp-md); }
.heat-comp-score { color: var(--text); }
.heat-comp-contrib { color: var(--cyan); }
/* asset-row layout */
.two-col {
display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-lg);
}
.three-col {
display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: var(--sp-lg);
}
/* sentiment */
.sentiment-card {
background: var(--bg-panel-2); border: 1px solid var(--border);
border-radius: var(--r-sm); padding: var(--sp-md);
}
.sentiment-head {
display: flex; justify-content: space-between; align-items: baseline;
margin-bottom: var(--sp-sm);
}
.sentiment-coin { font-weight: 600; font-size: var(--fs-body-lg); }
.sentiment-score { font-family: var(--mono); font-size: var(--fs-body); }
.sentiment-bias {
font-size: var(--fs-mono-sm); font-family: var(--mono); text-transform: uppercase;
padding: var(--sp-2xs) 6px; border-radius: var(--r-sm); margin-left: 6px;
}
.sentiment-bias.bullish { background: rgba(74,222,128,0.18); color: var(--green); }
.sentiment-bias.bearish { background: rgba(248,113,113,0.18); color: var(--red); }
.sentiment-bias.neutral { background: rgba(138,146,168,0.18); color: var(--text-dim); }
.sentiment-narratives {
font-size: var(--fs-mono); line-height: 1.5; color: var(--text-dim);
border-top: 1px solid var(--border); padding-top: var(--sp-sm);
}
.sentiment-narratives li { padding: var(--sp-2xs) 0; list-style: disc; margin-left: 14px; }
/* Verdict summary bento — compact cards that preview the 4 in-screen
panels (Market Pulse, Daily Context, Signal Conflict, Intel Feed)
with mini-visualizations. Click any card to scroll to the full panel.
order: 11.5 equivalent — sits between #sec-overview (11) and
#sec-conflict-resolver (12). */
.panel-stack > .verdict-summary-bento { order: 11; }
.verdict-summary-bento {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-md);
margin-bottom: var(--sp-lg);
margin-top: var(--sp-xs);
}
@media (max-width: 900px) {
.verdict-summary-bento { grid-template-columns: repeat(2, 1fr); }
}
.verdict-summary-bento .vsb-card {
background: var(--bg-panel);
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: var(--sp-md) 14px;
display: flex;
flex-direction: column;
gap: 6px;
text-decoration: none;
color: var(--text);
cursor: pointer;
transition: border-color 120ms ease-out, background 120ms ease-out;
min-height: 100px;
position: relative;
overflow: hidden;
}
.verdict-summary-bento .vsb-card:hover {
border-color: rgba(80, 125, 252, 0.45);
background: var(--bg-panel-2);
}
.verdict-summary-bento .vsb-card::after {
content: '→';
position: absolute;
top: 12px;
right: 14px;
font-size: var(--fs-mono);
color: var(--text-dim);
opacity: 0;
transition: opacity 120ms, transform 120ms;
}
.verdict-summary-bento .vsb-card:hover::after {
opacity: 1;
transform: translateX(2px);
color: var(--blue);
}
.verdict-summary-bento .vsb-label {
font-family: var(--mono);
font-size: var(--fs-mono-xs);
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-dim);
}
.verdict-summary-bento .vsb-value {
font-family: var(--mono);
font-size: var(--fs-ui-lg);
font-weight: 700;
font-variant-numeric: tabular-nums;
color: var(--text);
line-height: 1.15;
letter-spacing: 0;
}
.verdict-summary-bento .vsb-value.positive { color: var(--green); }
.verdict-summary-bento .vsb-value.negative { color: var(--red); }
.verdict-summary-bento .vsb-value.warn { color: var(--yellow); }
.verdict-summary-bento .vsb-value.info { color: var(--blue); }
.verdict-summary-bento .vsb-sub {
font-family: var(--mono);
font-size: var(--fs-mono-sm);
color: var(--text-dim);
font-variant-numeric: tabular-nums;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Mini viz: pulse dot strip */
.verdict-summary-bento .vsb-pulse-strip {
display: flex;
gap: var(--sp-xs);
margin-top: var(--sp-xs);
}
.verdict-summary-bento .vsb-pulse-dot {
width: 14px;
height: 4px;
border-radius: var(--r-xs);
background: var(--border);
}
.verdict-summary-bento .vsb-pulse-dot.high { background: var(--blue); }
.verdict-summary-bento .vsb-pulse-dot.low { background: var(--orange, #FF9457); }
.verdict-summary-bento .vsb-pulse-dot.mod { background: var(--text-dim); opacity: 0.6; }
.verdict-summary-bento .vsb-pulse-dot.polar-bull { background: var(--green); }
.verdict-summary-bento .vsb-pulse-dot.polar-bear { background: var(--red); }
/* Mini viz: confidence ring (pseudo via linear gradient bar) */
.verdict-summary-bento .vsb-conf-bar {
margin-top: var(--sp-xs);
height: 4px;
background: var(--bg-panel-2);
border-radius: var(--r-xs);
overflow: hidden;
}
.verdict-summary-bento .vsb-conf-fill {
height: 100%;
background: var(--blue);
border-radius: var(--r-xs);
transition: width var(--dur-data-reveal) var(--ease-data-reveal);
}
.verdict-summary-bento .vsb-conf-fill.positive { background: var(--green); }
.verdict-summary-bento .vsb-conf-fill.negative { background: var(--red); }
.verdict-summary-bento .vsb-conf-fill.warn { background: var(--yellow); }
/* Mini viz: conflict agreement ratio */
.verdict-summary-bento .vsb-ratio {
display: flex; align-items: center; gap: 6px;
font-family: var(--mono); font-size: var(--fs-mono-sm);
color: var(--text-dim); font-variant-numeric: tabular-nums;
}
.verdict-summary-bento .vsb-ratio-chip {
padding: var(--sp-2xs) 6px;
border-radius: var(--r-sm);
font-size: var(--fs-mono-xs);
letter-spacing: 0.06em;
text-transform: uppercase;
background: var(--bg-panel-2);
}
.verdict-summary-bento .vsb-ratio-chip.positive { color: var(--green); background: rgba(80,252,209,0.10); }
.verdict-summary-bento .vsb-ratio-chip.warn { color: var(--yellow); background: rgba(255,209,102,0.10); }
/* Mini viz: intel freshness pulse dot */
.verdict-summary-bento .vsb-fresh-dot {
display: inline-block;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--green);
margin-right: 6px;
animation: cw-live-pulse 2s ease-in-out infinite;
}
.verdict-summary-bento .vsb-fresh-dot.stale { background: var(--yellow); animation: none; }
.verdict-summary-bento .vsb-fresh-dot.cold { background: var(--text-dim); animation: none; }
/* Macro Bento Grid — data tiles, not nav duplicates.
Each card is a scannable KPI with primary value + context + sparkline. */
.macro-bento-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-md);
margin-bottom: var(--sp-lg);
}
@media (max-width: 900px) {
.macro-bento-grid { grid-template-columns: repeat(2, 1fr); }
}
.macro-bento-grid .bento-card {
/* Reset button-default styling — these tiles became