/* PelosiTracker dashboard — single-layer stylesheet. ONE layer only: never
append an override pass; change rules in place. Order: tokens, reset, shell,
nav, primitives, components, responsive, motion. Invariants: every value
from a token; nothing under 12px; uppercase only on table column headers;
numerics in --font-mono with tabular-nums; --elevation is for popovers and
dialogs only. */
/* THEME. Two token blocks, never two stylesheets and never an override pass:
because only one colour literal existed outside this block, re-declaring the
same names flips the entire interface with no component rule edits. Dark
("cyber") is the default; [data-theme="light"] further down restores the
light editorial palette. */
:root {
color-scheme: dark;
/* Surfaces — near-black with a blue-violet cast, stepped far enough apart
that a card, an inset well and a hover state stay distinguishable. */
--page: #08080d;
--bg: #0f0f17;
--surface: #16161f;
--surface-sunk: #1d1d29;
--border: #2b2b3b;
--border-strong: #414157;
/* Text. Never pure white on near-black — it vibrates and smears. */
--text: #eceef5;
--text-secondary: #b6b8ca;
/* Raised from #82859d, which sat at 4.9:1 — effectively on the AA floor. */
--text-muted: #9295ab;
/* Accent — the Cyberpunk 2077 acid yellow. Alone among the neons here it
works as both a fill and a text colour: 14.6:1 on --bg, and it takes
near-black text at 13.5:1. */
--accent: #fcee0a;
--accent-hover: #fff64d;
--accent-wash: #21200a;
--accent-edge: #5c5710;
--on-accent: #08080d;
/* Semantic — neons, each re-derived for AA on --bg. The light theme's
#0a7350 and #c02a1c sit near 2:1 here and would be unreadable. */
--positive: #2ee6a0;
--negative: #ff5f7e;
--warning: #ffb02e;
--info: #34e0f2;
--positive-wash: #06231a;
--negative-wash: #2a0c14;
--warning-wash: #241a05;
--info-wash: #052227;
/* Theme-dependent values that would otherwise be literals inside a rule. */
/* Reactive X-glyph field. The whole url() is the token because var() does
not interpolate inside a data URI. Two tiles at different sizes, offset
against each other, so the field scatters instead of gridding. */
--xfield-red: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="46" height="46" viewBox="0 0 46 46"%3E%3Cg stroke="%23ff2d55" stroke-width="1.7" stroke-linecap="round" fill="none"%3E%3Cpath d="M7 7l9 9M16 7l-9 9"/%3E%3Cpath d="M30 27l9 9M39 27l-9 9"/%3E%3C/g%3E%3C/svg%3E');
--xfield-teal: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="62" height="62" viewBox="0 0 62 62"%3E%3Cg stroke="%2334e0f2" stroke-width="1.7" stroke-linecap="round" fill="none"%3E%3Cpath d="M40 9l9 9M49 9l-9 9"/%3E%3Cpath d="M11 38l9 9M20 38l-9 9"/%3E%3C/g%3E%3C/svg%3E');
/* Pointer position, in px, written by index.js. Starts off-screen so the
bright field is hidden until the pointer actually enters the page. */
--field-x: -9999px;
--field-y: -9999px;
--field-r: 320px;
--backdrop: rgba(4, 4, 8, .74);
/* Sign-in HUD only, never text. A hotter red than --negative, which is tuned
for AA body copy and reads as muted maroon at instrument scale, plus the
cyan used for the chromatic ghost. */
/* Launcher-tile hues with no semantic equivalent to borrow. */
--tile-violet: #8b7bff;
--tile-mint: #4ad6c0;
--tile-pink: #ff8ab0;
--hud-red: #ff2038;
--hud-ghost: #2ad4ea;
--hud-glow-ghost: rgba(42, 212, 234, .5);
--hud-glow-red: rgba(255, 32, 56, .5);
--hud-bloom: rgba(255, 32, 56, .32);
--hud-node-glow: rgba(255, 32, 56, .85);
--hud-wash: rgba(120, 12, 26, .3);
--hud-cell-glow: rgba(46, 230, 160, .45);
/* Sign-in copy runs slightly warm so it belongs to the red instrumentation
instead of reading as cold UI chrome dropped on top of it. */
--hud-ink: #f2e8ea;
--hud-ink-dim: #cbb2b7;
--hud-red-hover: #ff4759;
--select-chevron: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"%3E%3Cpath d="M1 1l4 4 4-4" fill="none" stroke="%23a7a9bd" stroke-width="1.5" stroke-linecap="round"/%3E%3C/svg%3E');
/* Type scale — 12px floor */
--text-xs: 12px;
--text-sm: 13px;
--text-base: 15px;
--text-lg: 17px;
--text-xl: 20px;
--text-2xl: 24px;
--text-3xl: 30px;
/* Spacing — 4px base */
--sp-05: 2px; /* stacked label/value pairs only */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
--sp-6: 24px; --sp-8: 32px; --sp-12: 48px; --sp-16: 64px;
/* Horizontal page gutter. The sticky bars bleed by exactly this much, so
their background reaches the page edges while their content stays aligned
with the panels below. Redefined per breakpoint further down. */
--gutter: var(--sp-6);
--sticky-offset: 104px; /* clears the two sticky nav bars */
/* Hard edges. Soft 18px cards read as friendly SaaS; this UI is meant to
look like instrumentation. The light theme keeps the rounded values. */
--radius: 2px;
--radius-card: 3px;
--radius-pill: 999px;
/* One easing/duration for every state change, so hovers and selections feel
like one object rather than six widgets. */
--ease: cubic-bezier(.2, 0, .2, 1);
--dur: 130ms;
--font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
--font-mono: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
/* The only allowed elevation: popovers and dialogs. On near-black a plain
drop shadow is invisible, so it carries a hairline to define the edge. */
--elevation: 0 0 0 1px var(--border-strong), 0 16px 40px -12px rgba(0, 0, 0, .9);
/* Selective neon: active/armed controls only, never a decorative surface. */
--glow: 0 0 0 1px var(--accent-edge), 0 0 18px -4px rgba(252, 238, 10, .5);
/* Hover bloom for controls that are not currently carrying the accent fill. */
--glow-soft: 0 0 0 1px var(--border-strong), 0 0 18px -8px rgba(252, 238, 10, .55);
/* A 1px top inner highlight reads as a lit edge and is what makes a control
look raised rather than painted on. */
--lift: inset 0 1px 0 rgba(255, 255, 255, .07);
--focus: var(--accent);
}
/* Light editorial palette, kept intact and reachable via
. Same names, so nothing else changes. */
[data-theme="light"] {
color-scheme: light;
--page: #f0f0f4; --bg: #ffffff; --surface: #f6f6fa; --surface-sunk: #eeeef5;
--border: #e4e4ee; --border-strong: #d2d2e0;
--text: #14141b; --text-secondary: #55556a; --text-muted: #6a6a80;
--accent: #5546e8; --accent-hover: #4436d4; --accent-wash: #f0eefe;
--accent-edge: #c9c2fb; --on-accent: #ffffff;
--positive: #0a7350; --negative: #c02a1c; --warning: #a8560b; --info: #3a3a52;
--positive-wash: #e9faf2; --negative-wash: #fdf0ee;
--warning-wash: #fdf6e8; --info-wash: #f3f3f8;
--radius: 8px; --radius-card: 18px;
--tile-violet: #6d5ce0;
--tile-mint: #0f9c86;
--tile-pink: #c8437a;
--backdrop: rgba(26, 26, 26, .45);
--hud-red: #c02a1c; --hud-ghost: #0e7090;
--hud-glow-ghost: rgba(14, 112, 144, .3); --hud-glow-red: rgba(192, 42, 28, .3);
--hud-bloom: rgba(192, 42, 28, .18); --hud-node-glow: rgba(192, 42, 28, .45);
--hud-wash: rgba(192, 42, 28, .06); --hud-cell-glow: rgba(10, 115, 80, .25);
--select-chevron: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6"%3E%3Cpath d="M1 1l4 4 4-4" fill="none" stroke="%2355556a" stroke-width="1.5" stroke-linecap="round"/%3E%3C/svg%3E');
--elevation: 0 4px 12px rgba(0, 0, 0, .08);
--glow: 0 0 0 3px var(--accent-wash);
--glow-soft: 0 0 0 1px var(--border-strong), 0 0 14px -8px rgba(85, 70, 232, .5);
--lift: inset 0 1px 0 rgba(255, 255, 255, .7);
--focus: #14141b;
}
/* ---------------------------------------------------------------- reset --- */
*, *::before, *::after { box-sizing: border-box; }
/* The canvas colour lives on html so the two fixed field layers on body can
sit above it without a negative z-index (which would drop them behind it). */
html { -webkit-text-size-adjust: 100%; background: var(--page); }
body {
margin: 0; background: transparent; color: var(--text); font: var(--text-base)/1.55 var(--font-sans);
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
/* Reactive X-glyph field ---------------------------------------------------
Two fixed layers behind the whole interface. ::before is the resting field,
dim enough to read as texture; ::after is the same field at full strength,
masked to a soft disc that follows the pointer, so the glyphs resolve only
where you are looking. Both are pointer-events:none and sit at z-index 0,
with the content raised to 1 — nothing is ever drawn over text, which is
what made the old scanline overlay unusable.
These are the only gradient functions in the stylesheet, and they are masks
on a background layer, not fills on a component surface. */
body::before, body::after {
content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
background-image: var(--xfield-red), var(--xfield-teal);
background-position: 0 0, 22px 14px;
}
/* Panels stay fully opaque on purpose. Making them translucent would let the
glyph strokes under the text shift its effective contrast, which is exactly
the readability problem this rebuild removed. The field lives in the gutters
and margins instead. */
body::before { opacity: .14; }
/* The other half of the sign-in hand-off: the resting field arrives from a
larger scale as the HUD disperses outward, so the glyphs appear to settle out
of it. Set for one run by index.js and removed afterwards. */
@keyframes xfield-arrive { from { opacity: 0; transform: scale(1.4); } to { opacity: .14; transform: none; } }
body.is-entering::before { animation: xfield-arrive 1.15s var(--ease); }
body::after {
opacity: .7;
/* A disc at the pointer. transparent->black in a mask alpha-reveals. */
-webkit-mask-image: radial-gradient(circle var(--field-r) at var(--field-x) var(--field-y), #000 0%, rgba(0,0,0,.55) 45%, transparent 72%);
mask-image: radial-gradient(circle var(--field-r) at var(--field-x) var(--field-y), #000 0%, rgba(0,0,0,.55) 45%, transparent 72%);
}
/* The field belongs to the dark theme only; the light theme is editorial. */
[data-theme="light"] body::before, [data-theme="light"] body::after { display: none; }
/* Dashboard price tapes. Same layer as the glyph field: fixed, behind
everything, pointer-inert. Panels are opaque, so these read only in the
gutters — motion at the edge of vision, never under text. */
.bg-tapes {
position: fixed; inset: 0; z-index: 0; pointer-events: none;
/* Same resting weight as the glyph field. Decoration must not compete with
the interface; the tapes are meant to be noticed only peripherally. */
opacity: .13;
}
/* No bloom on this layer: the glow haloed into the gutters beside panel edges. */
.bg-tapes .hud-tape { filter: none; opacity: 1; }
.bg-tapes svg { width: 100%; height: 100%; display: block; }
[data-theme="light"] .bg-tapes { display: none; }
/* Raise every top-level surface above the field. */
.wrap, #login-overlay, .app-dialog, .info-popover, .skip-link { position: relative; z-index: 1; }
#login-overlay { z-index: 1000; }
/* Headings get slight negative tracking; at these sizes default spacing reads
loose and dated. Numerals stay lining so figures in headings still align. */
h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.25; letter-spacing: -.011em; }
h1 { font-size: var(--text-xl); letter-spacing: -.018em; }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-base); }
p { margin: 0 0 var(--sp-3); }
ul, ol { margin: 0 0 var(--sp-3); padding-left: var(--sp-6); }
code { font: var(--text-sm)/1.4 var(--font-mono); }
/* small/sub/sup default to a relative `smaller`, which lands below the 12px
floor wherever they nest. Pin them to the token instead. */
small, sub, sup { font-size: var(--text-xs); }
a { color: var(--text); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--text-secondary); }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
/* One transition for every interactive surface. Colour and border only, never
layout, so nothing reflows on hover. */
a, button, input, select, textarea, summary,
.best-bet, .game, .event-jump, .research-section-link, .research-section-top,
.us-policy-handoff-link, .info-btn, .us-mode-switch span, tbody tr {
transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--sp-05); }
/* A pressed control should feel like it took the click. */
button:active:not(:disabled) { transform: translateY(.5px); }
/* Numbers align in columns wherever they appear. */
.value, .us-performance-value, .score, .mtile .v, td, th,
.us-position span, .us-journal-metrics span { font-variant-numeric: tabular-nums; }
/* ---------------------------------------------------------------- shell --- */
.skip-link {
position: fixed; top: var(--sp-2); left: var(--sp-3); z-index: 1200; padding: var(--sp-2) var(--sp-3); background: var(--bg);
border: 1px solid var(--border-strong); border-radius: var(--radius); font-size: var(--text-sm); transform: translateY(-200%);
}
.skip-link:focus { transform: none; }
.wrap { max-width: 1200px; margin: 0 auto; padding: var(--sp-6) var(--gutter) var(--sp-16); }
.research-workstation .wrap { max-width: 1320px; }
header {
display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding-bottom: var(--sp-4); margin-bottom: var(--sp-6);
border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: var(--sp-3); }
.brand h1 { font-size: var(--text-xl); letter-spacing: -.01em; }
.brand small { display: block; margin-top: var(--sp-05); color: var(--text-secondary); font-size: var(--text-sm); }
.dot { width: var(--sp-2); height: var(--sp-2); border-radius: 50%; background: var(--positive); flex: 0 0 auto; }
.header-brand { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--sp-2); }
.workstation-chip {
padding: var(--sp-1) var(--sp-2); border: 1px solid var(--border-strong); border-radius: var(--radius-pill); color: var(--text-secondary);
font-size: var(--text-xs); white-space: nowrap;
}
.config {
padding: var(--sp-1) var(--sp-2); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
color: var(--text-secondary); font: var(--text-xs)/1.4 var(--font-mono);
}
.section-gap { margin-bottom: var(--sp-6); }
.is-hidden { display: none; }
/* ----------------------------------------------------------- navigation --- */
.tab-carousel {
position: sticky; top: 0; z-index: 40; display: flex; gap: var(--sp-1); margin: 0 calc(var(--gutter) * -1) var(--sp-6);
padding: var(--sp-2) var(--gutter); background: var(--bg);
border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none;
}
.tab-carousel::-webkit-scrollbar { display: none; }
.tab-carousel .pill {
flex: 0 0 auto; min-height: 36px; padding: var(--sp-2) var(--sp-3); border: 1px solid transparent; border-radius: var(--radius);
background: var(--surface); border-color: var(--border); box-shadow: var(--lift);
color: var(--text-secondary); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; cursor: pointer;
}
.tab-carousel .pill:hover { background: var(--surface-sunk); color: var(--text); box-shadow: var(--glow-soft), var(--lift); }
/* The selected workspace is the accent's permanent home, so the brand colour
is present on every screen without being sprayed around. */
.tab-carousel .pill.active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.tab-carousel .pill.active:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
/* Selective neon: only the elements that already carry the accent as a fill,
never a decorative surface. */
.tab-carousel .pill.active, .primary { box-shadow: var(--glow), var(--lift); }
/* Sticky bars sit on a translucent, blurred backdrop so long tables scrolling
underneath stay legible without a shadow. */
.tab-carousel, .research-section-nav, .us-policy-rail, .us-policy-footer {
background: color-mix(in srgb, var(--page) 86%, transparent); backdrop-filter: saturate(180%) blur(8px);
-webkit-backdrop-filter: saturate(180%) blur(8px);
}
@supports not (backdrop-filter: blur(1px)) {
.tab-carousel, .research-section-nav, .us-policy-rail, .us-policy-footer { background: var(--page); }
}
/* Workspace map. Phase 3 turns these into real view switches; the styling
here already reads as a segmented control rather than a link list. */
.research-section-nav {
position: sticky; top: 53px; z-index: 35; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3);
margin: 0 calc(var(--gutter) * -1) var(--sp-6); padding: var(--sp-2) var(--gutter);
background: var(--bg); border-bottom: 1px solid var(--border);
}
.research-section-nav-label { color: var(--text-muted); font-size: var(--text-xs); white-space: nowrap; }
.research-section-nav-scroll { display: flex; min-width: 0; gap: var(--sp-1); overflow-x: auto; scrollbar-width: none; }
.research-section-nav-scroll::-webkit-scrollbar { display: none; }
/* A resting surface and hairline, not bare text on the page: with a transparent
background these read as a row of labels and gave no sign they were
pressable until hovered. */
.research-section-link,
.research-section-top {
display: inline-flex; flex: 0 0 auto; min-height: 32px; align-items: center; justify-content: center; padding: 0 var(--sp-3);
border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--lift);
color: var(--text-secondary); font-size: var(--text-sm); text-decoration: none;
white-space: nowrap;
}
.research-section-link:hover,
.research-section-top:hover {
background: var(--surface-sunk); color: var(--text); box-shadow: var(--glow-soft), var(--lift);
}
.research-section-link.active {
background: var(--accent-wash); border-color: var(--accent-edge); color: var(--accent); font-weight: 600;
box-shadow: var(--glow-soft), var(--lift);
}
.research-anchor, #us-activity { scroll-margin-top: var(--sticky-offset); }
.carousel { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3); padding-bottom: var(--sp-1); overflow-x: auto; }
.carousel .pill {
flex: 0 0 auto; min-height: 32px; padding: 0 var(--sp-3); border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
background: var(--bg); color: var(--text-secondary); font-size: var(--text-sm); white-space: nowrap; cursor: pointer;
}
.carousel .pill:hover { border-color: var(--text-secondary); color: var(--text); }
.carousel .pill.active { background: var(--text); border-color: var(--text); color: var(--bg); }
.discover-league-filter { margin: var(--sp-3) 0 var(--sp-1); }
/* ----------------------------------------------------------- primitives --- */
/* Data panels stay one flat surface with a hairline: tinting them would
collapse the contrast against the wells, tables and forms inside. The
tinted bento fill is used on the overview launcher, where nothing dense
competes. */
.panel, .event, .empty {
position: relative; background: var(--bg); border: 1px solid var(--border);
border-radius: var(--radius-card); min-width: 0;
transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
/* A short accent rule at the top-left of every panel, so a screenful of panels
has a rhythm instead of reading as undifferentiated boxes. */
.panel::before {
content: ""; position: absolute; top: -1px; left: -1px; width: 52px; height: 2px;
background: var(--accent); border-radius: var(--radius-card) 0 0 0; opacity: .5;
}
.panel:hover { border-color: var(--border-strong); }
/* Views fade and lift in on a route change rather than snapping. */
@keyframes view-in { from { opacity: 0; transform: translateY(6px); } }
[data-research-view]:not([hidden]) { animation: view-in .26s var(--ease); }
/* HUD corner brackets. Purely decorative, drawn with borders on pseudo
elements — no clip-path, so nothing clips content, shadows or sticky
children. Diagonally opposed so a panel reads as a framed instrument. */
.panel::before, .panel::after {
content: ""; position: absolute; width: 10px; height: 10px; pointer-events: none;
border-color: var(--accent-edge); border-style: solid; border-width: 0;
}
.panel::before { top: -1px; left: -1px; border-top-width: 1px; border-left-width: 1px; }
.panel::after { right: -1px; bottom: -1px; border-bottom-width: 1px; border-right-width: 1px; }
[data-theme="light"] .panel::before, [data-theme="light"] .panel::after { display: none; }
/* 20px, not 16: at 16 the panels read cramped against a 12px type floor. */
.pad { padding: var(--sp-5); }
.title { margin: 0 0 var(--sp-3); color: var(--text); font-size: var(--text-lg); font-weight: 600; }
/* Two-tone heading: the subject stays ink, the qualifying phrase drops to
secondary at the same size. Reads as one sentence, scans as a label. */
.title > span, .bento-card h3 > span { color: var(--text-secondary); font-weight: 500; }
/* Bento launcher — white tiles on the grey canvas. */
.bento-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sp-3); margin-top: var(--sp-4); }
.bento-card {
position: relative; display: flex; flex-direction: column; gap: var(--sp-2); grid-column: span 2;
padding: var(--sp-5); border: 1px solid var(--border); border-radius: var(--radius-card);
background: var(--bg); color: var(--text); text-align: left; text-decoration: none; min-height: 148px; overflow: hidden;
}
.bento-card.is-wide { grid-column: span 3; }
/* Each tile owns a hue, set once here and inherited by its rule, arrow and
glow. Colour-coding the launcher is what stops the overview reading as nine
identical grey boxes, and it doubles as a recognition cue. */
.bento-card:nth-child(1) { --tile: var(--positive); }
.bento-card:nth-child(2) { --tile: var(--info); }
.bento-card:nth-child(3) { --tile: var(--accent); }
.bento-card:nth-child(4) { --tile: var(--tile-violet); }
.bento-card:nth-child(5) { --tile: var(--warning); }
.bento-card:nth-child(6) { --tile: var(--tile-mint); }
.bento-card:nth-child(7) { --tile: var(--tile-pink); }
.bento-card:nth-child(8) { --tile: var(--hud-ghost); }
/* Hairline of the tile's hue along the top edge. */
.bento-card::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
background: var(--tile, var(--border-strong)); opacity: .4;
transition: opacity var(--dur) var(--ease);
}
.bento-card:hover {
border-color: var(--tile, var(--border-strong)); background: var(--surface);
box-shadow: 0 0 0 1px var(--tile, transparent), 0 0 24px -10px var(--tile, transparent);
}
.bento-card:hover::before { opacity: 1; }
.bento-card:hover::after { background: var(--tile); color: var(--page); }
.bento-metric { color: var(--tile, var(--text)); }
.bento-card h3 { padding-right: var(--sp-8); font-size: var(--text-xl); line-height: 1.2; letter-spacing: -.018em; }
.bento-card p { margin: 0; color: var(--text-secondary); font-size: var(--text-sm); }
.bento-card .bento-metric { margin-top: auto; font: 600 var(--text-2xl)/1.1 var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.bento-card .bento-metric small { display: block; margin-top: var(--sp-1); color: var(--text-secondary); font-weight: 400; }
/* Corner affordance: a white pill holding an arrow, as on a Ramp tile. */
.bento-card::after {
content: "↗"; position: absolute; top: var(--sp-4); right: var(--sp-4); display: grid; place-items: center; width: 30px; height: 30px;
border-radius: 50%; background: var(--bg); color: var(--text); font-size: var(--text-sm); line-height: 1;
transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.bento-card:hover::after { background: var(--accent); color: var(--on-accent); }
.bento-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Hairline rules. One divider colour and one width everywhere, used to close
off a heading from its content and to separate repeated rows. Borders rather
than
so nothing is added to the DOM and screen readers are unaffected. */
.browse-head {
display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
margin-bottom: var(--sp-3); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--border);
}
/* A stacked head (account panel, small screens) would otherwise put the rule
between the title and its own actions. */
.us-account-panel .browse-head { padding-bottom: 0; border-bottom: 0; }
.browse-head .title { margin: 0; }
/* Forms ------------------------------------------------------------------- */
label { display: block; margin: 0 0 var(--sp-1); color: var(--text); font-size: var(--text-sm); font-weight: 500; }
.optional { color: var(--text-muted); font-weight: 400; }
input, select, textarea {
width: 100%; min-height: 38px; padding: var(--sp-2) var(--sp-3); background: var(--bg); border: 1px solid var(--border-strong);
border-radius: var(--radius); color: var(--text); font-size: var(--text-sm);
}
input::placeholder { color: var(--text-muted); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--text); box-shadow: var(--glow); }
input:focus-visible, select:focus-visible { outline: none; }
input[type="checkbox"], input[type="radio"] { width: 16px; height: 16px; min-height: 16px; flex: 0 0 auto; accent-color: var(--text); }
input[type="file"] { padding: var(--sp-1); font-size: var(--text-sm); }
select {
appearance: none;
padding-right: var(--sp-8);
/* Chevron as an inline SVG mark, not a surface gradient. The whole url()
is the token: var() does not interpolate inside a data URI string. */
background-image: var(--select-chevron);
background-position: right var(--sp-3) center;
background-repeat: no-repeat;
}
fieldset { margin: 0; padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius); }
legend { padding: 0 var(--sp-1); color: var(--text); font-size: var(--text-sm); font-weight: 600; }
/* Buttons ---------------------------------------------------------------- */
button {
min-height: 38px; padding: var(--sp-2) var(--sp-4); border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--bg);
color: var(--text); font-size: var(--text-sm); font-weight: 500; cursor: pointer; box-shadow: var(--lift);
}
button:hover:not(:disabled) { background: var(--surface-sunk); box-shadow: var(--glow-soft), var(--lift); }
button:disabled { opacity: .5; cursor: not-allowed; }
.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 600; }
.primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
.ghost { background: var(--bg); }
.ghost:hover:not(:disabled) { background: var(--surface-sunk); }
.danger { background: var(--bg); border-color: var(--negative); color: var(--negative); }
.danger:hover:not(:disabled) { background: var(--negative-wash); }
/* Busy / removing / refreshing are live JS states, not decoration: index.js
sets aria-busy and the is-* classes, so each needs a visible affordance. */
button[aria-busy="true"]::before,
.is-refreshing::before,
.is-removing::before {
content: ""; display: inline-block; width: 9px; height: 9px; margin-right: var(--sp-2); border: 1px solid currentColor;
border-right-color: transparent; border-radius: 50%; vertical-align: -1px; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* Row flash marks a newly scrolled-to card. */
.flash { animation: flash 1.4s ease-out; }
@keyframes flash {
from { background: var(--accent-wash); }
to { background: transparent; }
}
.compact-button { min-height: 32px; padding: 0 var(--sp-3); font-size: var(--text-sm); }
.compact-input { width: auto; margin: 0; }
.compact-number { width: 78px; min-height: 32px; padding: var(--sp-1) var(--sp-2); }
.no-top-margin { margin-top: 0; }
.align-right { text-align: right; }
.search-gap { margin-top: var(--sp-3); }
.full-row { grid-column: 1 / -1; }
/* Disclosure ------------------------------------------------------------- */
details.advanced, details.why, details.us-exit-recovery-audit {
margin-top: var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
}
details.advanced > summary,
details.why > summary,
details.us-exit-recovery-audit > summary {
padding: var(--sp-2) var(--sp-3); color: var(--text); font-size: var(--text-sm); font-weight: 500; cursor: pointer; list-style: none;
}
details.advanced > summary::-webkit-details-marker { display: none; }
details.advanced > summary::before,
details.why > summary::before,
details.us-exit-recovery-audit > summary::before { content: "+"; display: inline-block; width: 1em; color: var(--text-muted); font-family: var(--font-mono); }
details.advanced[open] > summary::before,
details.why[open] > summary::before,
details.us-exit-recovery-audit[open] > summary::before { content: "\2212"; }
details.advanced > *:not(summary),
details.why > *:not(summary),
details.us-exit-recovery-audit > *:not(summary) { margin-left: var(--sp-3); margin-right: var(--sp-3); }
details.advanced > *:last-child,
details.why > *:last-child,
details.us-exit-recovery-audit > *:last-child { margin-bottom: var(--sp-3); }
/* Notes, notices, statuses ----------------------------------------------- */
/* Phase 2 moves these behind an info button. Until then they render as quiet
one-line helper text rather than the four-line prose blocks they were. */
.field-note { margin-top: var(--sp-1); max-width: 84ch; color: var(--text-secondary); font-size: var(--text-xs); line-height: 1.5; }
.note { margin: var(--sp-4) 0 0; padding-top: var(--sp-3); border-top: 1px solid var(--border); color: var(--text-secondary); font-size: var(--text-sm); }
.notice {
padding: var(--sp-3); margin-top: var(--sp-3); border: 1px solid var(--border); border-left: 3px solid var(--warning); border-radius: var(--radius);
background: var(--warning-wash); color: var(--text); font-size: var(--text-sm);
}
.notice strong { color: var(--warning); }
.notice.price-only { border-left-color: var(--warning); }
.error {
margin-bottom: var(--sp-3); padding: var(--sp-2) var(--sp-3); border: 1px solid var(--negative); border-radius: var(--radius);
background: var(--negative-wash); color: var(--negative); font-size: var(--text-sm);
}
.refresh-status { min-height: 18px; margin-top: var(--sp-2); color: var(--text-secondary); font-size: var(--text-xs); }
.refresh-status.is-success { color: var(--positive); }
.refresh-status.is-error { color: var(--negative); }
.event-action-status, .bot-action-status, .us-liquidate-status {
margin: var(--sp-2) 0; padding: var(--sp-2) var(--sp-3); border-left: 3px solid var(--info); border-radius: var(--radius);
background: var(--info-wash); color: var(--text); font-size: var(--text-sm);
}
.event-action-status.is-success, .bot-action-status.is-success { border-left-color: var(--positive); background: var(--positive-wash); }
.event-action-status.is-error, .bot-action-status.is-error { border-left-color: var(--negative); background: var(--negative-wash); }
.us-liquidate-status:empty { display: none; }
.odds-api-status {
margin: var(--sp-2) 0; padding: var(--sp-2) var(--sp-3); border-left: 3px solid var(--info); border-radius: var(--radius);
background: var(--info-wash); font-size: var(--text-sm);
}
.odds-api-status.is-enabled { border-left-color: var(--positive); background: var(--positive-wash); }
.odds-api-status.is-disabled { border-left-color: var(--warning); background: var(--warning-wash); }
.odds-api-status.is-error { border-left-color: var(--negative); background: var(--negative-wash); }
.metrics-empty, .discover-empty { padding: var(--sp-6) 0; color: var(--text-muted); font-size: var(--text-sm); text-align: center; }
.empty { padding: var(--sp-12) var(--sp-4); text-align: center; color: var(--text-secondary); }
.empty b { display: block; margin-bottom: var(--sp-1); color: var(--text); font-size: var(--text-lg); }
.pending { padding: var(--sp-4); color: var(--text-secondary); font-size: var(--text-sm); }
/* Chips, tags, badges ---------------------------------------------------- */
.tag, .line-badge, .us-venue-badge, .activity-status, .us-journal-status {
display: inline-block; padding: var(--sp-05) var(--sp-2); border: 1px solid var(--border-strong); border-radius: var(--radius-pill);
background: var(--surface); color: var(--text-secondary); font-size: var(--text-xs); font-weight: 500; white-space: nowrap;
}
.entry, .hold, .activity-status.placed { border-color: var(--positive); background: var(--positive-wash); color: var(--positive); }
.wait, .monitor, .activity-status.rejected { border-color: var(--warning); background: var(--warning-wash); color: var(--warning); }
.cash, .exit { border-color: var(--negative); background: var(--negative-wash); color: var(--negative); }
.marketonly { color: var(--text-muted); }
.lt-ml { color: var(--info); }
.lt-sp { color: var(--warning); }
.lt-ou { color: var(--text-secondary); }
.positive, .mtile .v.good, .is-positive { color: var(--positive); }
.negative, .mtile .v.bad, .is-negative { color: var(--negative); }
.risk { color: var(--warning) !important; }
/* Figures and tiles ----------------------------------------------------- */
.figs, .metric-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-2); margin-top: var(--sp-3); }
.fig, .mtile, .us-status-card { padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
/* Mono metadata labels over mono values: the instrument/HUD idiom, and it
keeps each label visually paired with its figure. Deliberately not
uppercase — tiny tracked-out caps is what made the old theme unreadable. */
.key, .mtile .k, .us-status-card span, .hint, .mtile .sub2, .us-state-chip span {
display: block; color: var(--text-secondary); font: 500 var(--text-xs)/1.4 var(--font-mono); letter-spacing: .04em;
}
/* Rule between a tile's label and its value, so the pair reads as a labelled
figure instead of two stacked lines of text. */
.value, .mtile .v, .us-status-card strong {
display: block; margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--border);
font: 600 var(--text-lg)/1.2 var(--font-mono); letter-spacing: -.01em;
}
.hint, .mtile .sub2 { margin-top: var(--sp-05); color: var(--text-muted); }
.us-status-card { min-height: 72px; }
/* Tables ---------------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; }
th {
padding: var(--sp-2) var(--sp-3);
border-bottom: 1px solid var(--border-strong);
background: var(--surface);
color: var(--text-secondary);
/* The only uppercase in the system, and only at --text-sm. */
font-size: var(--text-sm);
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
text-align: left;
white-space: nowrap;
}
td { padding: var(--sp-3); border-bottom: 1px solid var(--border); font-size: var(--text-sm); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--surface); }
/* Money and count columns line up on the decimal, the way a ledger should. */
.us-performance-table td:not(:last-child), .us-performance-table th:not(:first-child):not(:last-child) { text-align: right; }
.us-performance-table th:first-child, .us-performance-table td:first-child { text-align: left; }
/* Info popover — the "ⓘ" affordance. index.js moves every .field-note in
here at boot, so the compliance prose is kept but out of the default view. */
.info-btn {
display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; min-height: 18px; padding: 0; margin-left: var(--sp-1);
border: 1px solid var(--border-strong); border-radius: 50%; background: var(--bg); color: var(--text-secondary);
font: 600 var(--text-xs)/1 var(--font-mono); vertical-align: middle; flex: 0 0 auto; cursor: help;
}
.info-btn:hover { background: var(--surface-sunk); color: var(--text); }
.info-btn[aria-expanded="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
/* Comfortable touch target without disturbing inline layout. */
.info-btn::after { content: ""; position: absolute; inset: -11px; }
.info-btn { position: relative; }
.info-popover {
/* Fixed and measured from the trigger by the controller, so no ancestor
with overflow:hidden can clip it. */
position: fixed; z-index: 200; width: max-content; max-width: min(380px, calc(100vw - var(--sp-4)));
padding: var(--sp-3); border: 1px solid var(--border-strong); border-radius: var(--radius-card);
background: var(--bg); box-shadow: var(--elevation); color: var(--text); font-size: var(--text-sm); line-height: 1.55;
}
.info-popover[hidden] { display: none !important; }
/* Keeps a label's text and its help button on one line inside the
column-flex labels used by the policy form. */
/* flex-start, not center: a label long enough to wrap would otherwise centre
the button against the whole text block instead of its first line. */
.info-label-row { display: flex; align-items: flex-start; gap: var(--sp-1); }
.info-label-row .info-btn { margin-top: 1px; }
/* ----------------------------------------------------------- components --- */
/* Login ----------------------------------------------------------------- */
#login-overlay {
position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: var(--sp-4);
transition: opacity .4s ease, background-color .8s var(--ease); overflow: hidden;
/* Atmospheric wash so the HUD sits in a lit volume instead of on flat black,
which is what carries the reference's depth. A full-bleed backdrop layer,
not a fill on a component surface. */
background:
radial-gradient(115% 85% at 50% 50%, var(--hud-wash) 0%, transparent 62%),
var(--page);
}
/* Hand-off to the dashboard. The overlay itself is not faded as a whole any
more: its backdrop clears while the HUD expands outward and the X-glyph field
converges inward from a larger scale, so the instrumentation reads as
dispersing into the background texture rather than cross-fading with it.
`forwards` is safe on these three because the overlay is hidden immediately
afterwards — unlike the entrance animations, nothing stays on screen
depending on them. */
#login-overlay.dissolve { background: transparent; pointer-events: none; }
#login-overlay.dissolve .login-hud { animation: hud-disperse 1.05s var(--ease) forwards; }
#login-overlay.dissolve .login-box { animation: hud-card-out .45s var(--ease) forwards; }
@keyframes hud-disperse { from { opacity: .5; transform: none; } to { opacity: 0; transform: scale(2.1); } }
@keyframes hud-card-out { to { opacity: 0; transform: translateY(-8px) scale(.97); } }
/* Targeting HUD ---------------------------------------------------------
Decorative. Sits behind the card, drawn in the semantic red so it reads as
instrumentation rather than a third brand colour. Only opacity and transform
are animated, both compositor-only, so an idle sign-in screen does not spin
the CPU. */
.login-hud {
position: absolute; inset: 0; pointer-events: none;
color: var(--hud-red); opacity: .82;
}
/* Chromatic split plus bloom. Two zero-blur drop-shadows offset in opposite
directions produce offset colour copies of the alpha silhouette, which is the
RGB-split glitch, without duplicating any geometry — a