/*
* Spiderx design system — adopted from design/spiderx/{vision,lockout,
* compass-states}.html. Single stylesheet, CSS variables for tokens.
*
* Voice: trading product. Off-white text, never pure white. Mint accent
* (#7be0b0) used SPARINGLY (~3% of pixels) — Risk Spine when healthy,
* recovery state, the moment of contract being kept. P&L green/red are
* confident, not screaming.
*/
/* The type system — ONE face (Calibre, then Figtree) in every role: --sans,
* --mono and --serif all resolve to it, so the app and the marketing site read
* as one product. Must stay above every rule below it: @import is only legal
* before other statements. See assets/typography.css, which pulls
* assets/calibre.css for the @font-face set + licensing.
* The path is relative to THIS file, not to app.html — hence the `../`. */
@import url('../assets/typography.css');
/* The Söhne (Klim) @font-face set that used to sit here is gone. Nothing
* referenced it once --display/--body moved onto --sans and --mono moved off
* Söhne Mono: it was ~150 lines declaring 19 faces the browser never fetched.
* The .otf files remain in assets/fonts/sohne/ (gitignored trial cuts). */
/* =========================================================================
* Tokens
* ========================================================================= */
:root {
color-scheme: dark;
/* === SURFACE STACK ====================================================
* The terminal language. One near-black canvas with four elevation steps
* that get LIGHTER as they come forward — on dark, elevation is light, not
* shadow. Hairlines do the structural work; the fill deltas alone are too
* subtle to separate a panel from the page.
*
* This is the whole platform's palette: trading, Overview, market detail and
* every page in between resolve their surfaces from these five values.
*/
--bg-0: #0a0c0e; /* canvas */
--bg-1: #101317; /* chrome, nav, panels */
--bg-2: #171b20; /* cards, drawers, inputs */
--bg-3: #1f242a; /* popovers, ticket, hover surfaces */
--line: #21262c; /* hairlines */
--line-bright: #333b43; /* hairlines that need to read */
/* Backwards-compat aliases — pre-Spiderx component CSS used these. */
--surface-canvas: var(--bg-0);
--surface-base: var(--bg-1);
--surface-raised: var(--bg-2);
--surface-overlay: var(--bg-3);
--surface-hover: var(--bg-3);
--surface-input: #14181c;
--border-subtle: var(--line);
--border-default: var(--line-bright);
--border-strong: #47515b;
/* === TYPE =============================================================
* Never pure white on near-black — it vibrates. Primary is a warm off-white
* that fades through three greys to the axis labels. */
--text-0: #e9edf1; /* primary — body, headings */
--text-1: #aeb7c0; /* secondary */
--text-2: #7f8994; /* tertiary — labels, eyebrows */
--text-3: #59636d; /* quaternary — section numbers, axes */
/* aliases */
--text-primary: var(--text-0);
--text-secondary: var(--text-1);
--text-tertiary: var(--text-2);
--text-muted: var(--text-3);
--text-disabled: #454e57;
/* === SEMANTIC =========================================================
* Market language, tuned for the dark canvas: the white-bg greens and reds
* go muddy on #0a0c0e, so both are lifted until they carry at 12px. */
--profit: #00C805; /* P&L green — Robinhood electric green */
--loss: #f0645a; /* P&L red */
--warn: #e0a13a; /* approaching a limit */
--breach: #f0645a; /* actual breach */
--info: #4b8ff5; /* unemotional info */
--color-success: var(--profit);
--color-success-bg: rgba(0, 200, 5, 0.14);
--color-success-strong: #33d92e;
--color-warning: var(--warn);
--color-warning-bg: rgba(224, 161, 58, 0.14);
--color-warning-strong: #eeb254;
--color-danger: var(--loss);
--color-danger-bg: rgba(240, 100, 90, 0.14);
--color-danger-strong: #ff7d73;
--color-info: var(--info);
--color-info-bg: rgba(75, 143, 245, 0.14);
--color-info-strong: #6ba4ff;
--color-neutral: var(--text-1);
--color-neutral-bg: rgba(255, 255, 255, 0.05);
/* === SESSION ==========================================================
* The trading session's colour, and the platform's PRIMARY-ACTION colour: every
* "Connect" button and the "24/7" headline read from it, so the call to action
* and the session headline always agree.
*
* It is declared HERE, not only in legend.css, because a token that exists in
* one stylesheet is a token that silently falls back to a literal the moment
* that sheet is missing or the element sits outside `.app` — which is exactly
* how the Connect buttons ended up lime while "24/7" was blue.
*
* legend.css re-declares it on `.app.lg-session--*` to retint the whole app per
* session (market = blue, early = white, after = amber, extended = grey); those
* selectors out-specify this one, so the skin still wins. */
--session-accent: #00C805;
/* === ACCENT ===========================================================
* The brand mint, and the ONLY green on the platform. It means exactly three
* things: a primary action, a positive price, a live signal. Nothing else. */
--accent: #00C805;
--accent-soft: rgba(0, 200, 5, 0.14);
--accent-strong: #33d92e;
--color-accent: var(--accent);
--color-accent-bg: var(--accent-soft);
/* === FONTS ============================================================
* `--sans` / `--mono` / `--serif` are defined once in assets/typography.css
* (imported at the top of this file) and are NOT redefined here — a token
* cannot reference itself, and one definition is the point.
*
* All three roles resolve to the SAME family now — the app used to be all
* sans while marketing set its headlines in a serif, so the two halves read
* as two products. `--display` and `--body` are the app's own long-standing
* names and are referenced widely, so they stay as semantic roles.
*
* `--mono` no longer buys monospaced digits, so every rule that uses it also
* declares `font-variant-numeric: tabular-nums` — that even advance width is
* the one property ladders and P&L columns actually depended on.
*/
--display: var(--sans);
--body: var(--sans);
/* aliases */
--font-sans: var(--body);
--font-mono: var(--mono);
--font-serif: var(--serif);
/* === SPACING (8px rhythm) ============================================ */
--space-0: 0;
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 24px;
--space-6: 32px;
--space-7: 48px;
--space-8: 64px;
/* === TYPE SCALE ======================================================
* Eight-step scale per Joe's spec (size / line-height):
* 12/16 micro — CATEGORIES, TIER badges, eyebrows
* 13/18 caption — secondary labels, captions
* 14/20 body-sm — table cells, descriptions
* 16/24 body — primary body, default UI
* 18/26 body-lg — emphasized body, card titles
* 24/32 section — section headings
* 32/40 page — page headings
* 48/56 hero — display ("No session yet today")
*
* Both halves of each step are exposed as tokens so the .t-* utility
* classes below can pin them in lockstep.
*
* Numerics — apply the .num utility (or font-feature-settings inline)
* wherever a column of numbers needs to align without going monospace. */
--type-micro-size: 12px; --type-micro-lh: 16px;
--type-caption-size: 13px; --type-caption-lh: 18px;
--type-body-sm-size: 14px; --type-body-sm-lh: 20px;
--type-body-size: 16px; --type-body-lh: 24px;
--type-body-lg-size: 18px; --type-body-lg-lh: 26px;
--type-section-size: 24px; --type-section-lh: 32px;
--type-page-size: 32px; --type-page-lh: 40px;
--type-hero-size: 48px; --type-hero-lh: 56px;
/* Legacy aliases — preserved so existing component CSS doesn't have
* to be rewritten in the same commit. New code should use --type-* */
--text-11: 12px; /* re-pointed to micro per the new scale */
--text-12: var(--type-micro-size);
--text-13: var(--type-caption-size);
--text-14: var(--type-body-sm-size);
--text-15: var(--type-body-size); /* 15→16 quantize */
--text-16: var(--type-body-size);
--text-18: var(--type-body-lg-size);
--text-20: 20px;
--text-24: var(--type-section-size);
--text-32: var(--type-page-size);
--text-42: var(--type-hero-size); /* 42→48 quantize */
--text-64: 64px;
--text-128: 128px;
--lh-tight: 1.15;
--lh-snug: 1.3;
--lh-base: 1.55;
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
/* === RADIUS / SHADOW ================================================= */
--radius-sm: 6px;
--radius-md: 10px;
--radius-lg: 14px;
--radius-pill: 999px;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
--shadow-md: 0 4px 12px rgba(0,0,0,0.4);
--shadow-lg: 0 30px 80px -40px rgba(0,0,0,0.6), 0 1px 0 rgba(255,255,255,0.02) inset;
/* === MOTION ==========================================================
* Linear-style easing — fast-out, smooth-stop. */
--ease: cubic-bezier(0.32, 0.72, 0, 1);
--ease-in: cubic-bezier(0.55, 0, 1, 0.45);
--ease-deep: cubic-bezier(0.65, 0, 0.35, 1); /* lockout-grade */
--ease-out: var(--ease);
--motion-fast: 120ms;
--motion-base: 200ms;
--motion-state: 400ms;
--motion-deep: 1200ms;
/* === LAYOUT ==========================================================
* Spiderx layout: 52px top bar + 52px Risk Spine (Trading only) +
* 32px bottom strip. */
--topbar-h: 52px;
--spine-w: 52px;
--strip-h: 32px;
--hub-w: 360px; /* Add-widget hub: fixed right-docked panel width */
}
/* =========================================================================
* Resets / base
* ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
background: var(--bg-0);
color: var(--text-0);
font-family: var(--body);
font-size: var(--text-15);
line-height: var(--lh-base);
font-feature-settings: 'cv11', 'ss01', 'cv02', 'tnum';
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* The dark-theme grain overlay was a near-white speckle on near-black —
invisible on a white core surface. Removed for the light theme. */
body::before { content: none; }
button, input, select, textarea { font-family: inherit; }
[hidden] { display: none !important; }
/* tabular + lining numerics everywhere money/qty/time/ticker appears.
Numerics rendered in Söhne with tnum + lnum so columns align
without the literal monospace look. */
.num, .mono {
font-variant-numeric: tabular-nums lining-nums;
font-feature-settings: 'tnum' 1, 'lnum' 1;
}
.mono { font-family: var(--mono); font-variant-numeric:tabular-nums; font-weight: 500; letter-spacing: -0.005em; }
.display { font-family: var(--display); letter-spacing: -0.022em; font-weight: 600; }
.display-tight { font-family: var(--display); letter-spacing: -0.04em; font-weight: 600; }
/* === Type-scale utilities — Joe's spec ===
* Each .t-* class pins a step from the eight-step scale (size + line-height
* in lockstep). Tracking + weight follow the editorial register: micro and
* caption run looser-tracked all-caps, body sizes are neutral, headings
* tighten progressively. Drop any of these onto an element to opt in. */
.t-micro {
font-size: var(--type-micro-size);
line-height: var(--type-micro-lh);
letter-spacing: 0.06em;
text-transform: uppercase;
font-weight: 500;
}
.t-caption {
font-size: var(--type-caption-size);
line-height: var(--type-caption-lh);
font-weight: 400;
}
.t-body-sm {
font-size: var(--type-body-sm-size);
line-height: var(--type-body-sm-lh);
font-weight: 400;
}
.t-body {
font-size: var(--type-body-size);
line-height: var(--type-body-lh);
font-weight: 400;
}
.t-body-lg {
font-size: var(--type-body-lg-size);
line-height: var(--type-body-lg-lh);
font-weight: 500;
letter-spacing: -0.005em;
}
.t-section {
font-family: var(--display);
font-size: var(--type-section-size);
line-height: var(--type-section-lh);
font-weight: 600;
letter-spacing: -0.02em;
}
.t-page {
font-family: var(--display);
font-size: var(--type-page-size);
line-height: var(--type-page-lh);
font-weight: 600;
letter-spacing: -0.025em;
}
.t-hero {
font-family: var(--display);
font-size: var(--type-hero-size);
line-height: var(--type-hero-lh);
font-weight: 600;
letter-spacing: -0.035em;
text-wrap: pretty;
}
.eyebrow {
font-family: var(--body);
font-size: var(--type-micro-size);
line-height: var(--type-micro-lh);
font-weight: 500;
letter-spacing: 0.06em; /* tightened to spec — was 0.14em */
text-transform: uppercase;
color: var(--text-2);
}
/* =========================================================================
* App shell — top bar + body (spine + page) + bottom strip
* ========================================================================= */
#app-root {
height: 100vh;
overflow: hidden;
position: relative;
z-index: 2;
}
/* The room. One canvas (#05080a — Legend's --lg-bg) and ONE ambient wash, owned
here at the root rather than by each page. It has to live above the top bar,
not below it: a page that glows under a flat-black header reads as two apps
bolted together. The bar, the page and the strip are all transparent and sit on
top of it. */
.app {
position: relative;
display: grid;
grid-template-rows: var(--topbar-h) 1fr var(--strip-h);
height: 100vh;
background: #05080a;
isolation: isolate;
}
.app::before {
content: '';
position: fixed;
inset: 0 0 auto;
height: 62%;
z-index: 0;
pointer-events: none;
background:
radial-gradient(58% 100% at 50% -14%, rgba(0, 200, 5, 0.12) 0%, rgba(0, 120, 8, 0.06) 34%, transparent 72%),
linear-gradient(180deg, rgba(9, 26, 14, 0.55) 0%, rgba(7, 15, 10, 0.25) 45%, transparent 100%);
}
/* ── Aura wash ───────────────────────────────────────────────────────────────
The ambient market aura (Robinhood-Legend style; see src/shell/aura.ts). A
SEPARATE fixed layer from the session skin: `.app::before` paints the session
wash, this `::after` paints the aura ON TOP of it (same z-index, later in paint
order) and BELOW all content (`.app > *` is z-index 1). So an active aura fades
in over whatever session skin is showing rather than fighting it for a selector.
Colour comes from `--aura-rgb` (set per direction below); strength from
`--aura-k` (0..1, set inline by the controller). Fades in only when the shell
adds `.aura-active`. */
.app::after {
content: '';
position: fixed;
inset: 0 0 auto;
height: 62%;
z-index: 0;
pointer-events: none;
opacity: 0;
--aura-rgb: 130 140 150;
background:
radial-gradient(58% 100% at 50% -14%,
rgb(var(--aura-rgb) / calc(0.42 * var(--aura-k, 0))) 0%,
rgb(var(--aura-rgb) / calc(0.22 * var(--aura-k, 0))) 34%,
transparent 72%),
linear-gradient(180deg,
rgb(var(--aura-rgb) / calc(0.34 * var(--aura-k, 0))) 0%,
rgb(var(--aura-rgb) / calc(0.15 * var(--aura-k, 0))) 45%,
transparent 100%);
transition: opacity 480ms ease, background 480ms ease;
}
.app.aura-active::after { opacity: 1; }
.app.aura-dir--up { --aura-rgb: 47 189 119; } /* --profit */
.app.aura-dir--down { --aura-rgb: 240 100 90; } /* --loss */
.app.aura-dir--flat { --aura-rgb: 130 140 150; }
@media (prefers-reduced-motion: reduce) { .app::after { transition: none; } }
.app > * { position: relative; z-index: 1; }
.app__body {
display: grid;
grid-template-columns: var(--spine-w) 1fr;
/* Bound the page row to the body's height. Without an explicit row track the
* page host falls into an implicit `auto` row: grid `align-content: stretch`
* grows it UP to fill when content is short, but never clamps it DOWN — so a
* tall workspace (e.g. many stacked widgets) expands the row to max-content
* and spills past the footer. `minmax(0, 1fr)` fills the body AND allows the
* page (and the bounded workspace inside it) to shrink instead of overflow. */
grid-template-rows: minmax(0, 1fr);
min-height: 0;
}
/* Mode-driven chrome. Trading shows spine + bottom strip; Compass and
Discipline collapse both. We collapse via grid tracks rather than
display:none on the children so the second grid item (pageHost) stays
in column 2 — toggling display:none on the spine would slide pageHost
into the 0-width first cell. */
.app--mode-compass { grid-template-rows: var(--topbar-h) 1fr 0; }
.app--mode-discipline { grid-template-rows: var(--topbar-h) 1fr 0; }
.app--mode-performance { grid-template-rows: var(--topbar-h) 1fr 0; }
.app--mode-open-account { grid-template-rows: var(--topbar-h) 1fr 0; }
.app--mode-compass .app__body,
.app--mode-discipline .app__body,
.app--mode-performance .app__body,
.app--mode-open-account .app__body { grid-template-columns: 0 1fr; }
.app--mode-compass .app__strip,
.app--mode-discipline .app__strip,
.app--mode-performance .app__strip,
.app--mode-open-account .app__strip { display: none; }
.app--mode-compass .app__spine-host,
.app--mode-discipline .app__spine-host,
.app--mode-performance .app__spine-host,
.app--mode-open-account .app__spine-host { visibility: hidden; }
/* Onboarding: strip trading chrome from the top bar, keep brand + sign out so a
user without an account is never trapped. */
/* The `.app--mode-guided-setup` half of these five rules went 2026-08-27 with
the last of that page: the mode class is set from the ACTIVE ROUTE ID, and
with no route registered under that name it could never be applied. */
.app--mode-open-account .topbar__modes,
.app--mode-open-account .topbar__account-sel,
.app--mode-open-account .topbar__meta-pair { display: none; }
.app__spine-host { min-height: 0; }
.app__page { overflow: hidden; min-height: 0; min-width: 0; position: relative; }
/* === Top bar ============================================================ */
/* Transparent, so the app's ambient wash carries straight through the header —
the bar is part of the room, not a lid on it. And NO hairline: a rule under the
bar slices the wash in two and puts back the seam we just removed. The header is
held apart by the space around it, nothing else. */
.topbar {
display: flex; align-items: center; gap: 18px;
padding: 0 16px;
background: transparent;
border-bottom: 0;
}
.topbar__brand {
display: flex; align-items: center;
padding: 0 4px;
}
/* Canonical "spiderx" wordmark image (paper variant for dark surfaces).
Brand is a pure wordmark, no separate symbol — see brand/spiderx/README.md.
Sized to ~22px tall to sit comfortably in the 52px topbar. */
.topbar__brand-img {
height: 22px;
width: auto;
display: block;
user-select: none;
-webkit-user-drag: none;
}
.topbar__modes {
display: flex; gap: 2px; padding: 3px;
background: var(--bg-2); border-radius: 7px;
border: 1px solid var(--line);
}
.topbar__mode {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--display);
font-size: 12px; letter-spacing: -0.01em; font-weight: 500;
color: var(--text-2);
padding: 4px 10px;
border: none; background: transparent;
border-radius: 5px;
cursor: pointer;
transition: color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease);
}
.topbar__mode:hover { color: var(--text-1); }
.topbar__mode.is-active { background: var(--bg-3); color: var(--text-0); }
.topbar__mode-dot {
width: 5px; height: 5px; border-radius: 50%;
background: transparent;
transition: background var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease);
}
.topbar__mode.is-active .topbar__mode-dot {
background: var(--accent);
box-shadow: 0 0 6px var(--accent);
}
/* === Global top-bar navigation (wordmark · tool menus · right cluster) ===== */
.topbar__brand {
display: inline-flex; align-items: center;
padding: 4px 6px;
background: none; border: none; cursor: pointer; border-radius: var(--radius-sm);
transition: opacity var(--motion-fast) var(--ease);
}
.topbar__brand:hover { opacity: 0.72; }
.topbar__brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.topbar__nav {
flex: 1; min-width: 0;
display: flex; align-items: center; justify-content: center;
gap: 2px;
}
.topbar__menu { position: relative; }
.topbar__menu-trigger {
display: inline-flex; align-items: center;
font-family: var(--display);
font-size: 13px; font-weight: 500; letter-spacing: -0.01em;
color: var(--text-1);
padding: 6px 10px;
background: transparent; border: none; border-radius: var(--radius-sm);
cursor: pointer;
transition: color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease);
}
.topbar__menu-trigger:hover { color: var(--text-0); background: var(--surface-hover); }
.topbar__menu-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.topbar__menu-trigger[aria-expanded="true"] { color: var(--text-0); background: var(--surface-hover); }
.topbar__trigger-inner { display: inline-flex; align-items: center; gap: 7px; }
.topbar__trigger-dot {
width: 5px; height: 5px; border-radius: 50%; background: transparent;
transition: background var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease);
}
.topbar__menu-trigger.is-active { color: var(--text-0); }
.topbar__menu-trigger.is-active .topbar__trigger-dot {
background: var(--accent); box-shadow: 0 0 6px var(--accent);
}
.topbar__caret { font-size: 9px; color: var(--text-3); margin-left: 1px; }
/* dropdown panel — clean, hairline, subtle elevation */
.topbar__panel {
position: absolute; top: calc(100% + 6px); left: 0;
min-width: 232px;
display: flex; flex-direction: column; gap: 1px;
background: var(--bg-0);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
box-shadow: 0 12px 32px -16px rgba(17, 19, 21, 0.32), 0 2px 6px -3px rgba(17, 19, 21, 0.08);
padding: 6px;
opacity: 0; visibility: hidden; transform: translateY(-4px);
transition: opacity var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease), visibility var(--motion-fast);
z-index: 200;
}
.topbar__panel--right { left: auto; right: 0; }
.topbar__menu.is-open .topbar__panel { opacity: 1; visibility: visible; transform: none; }
.topbar__menu-group {
font-family: var(--body); font-size: var(--type-micro-size); line-height: var(--type-micro-lh);
font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
color: var(--text-3);
padding: 8px 10px 4px;
}
.topbar__menu-item {
display: flex; flex-direction: column; gap: 1px; text-align: left;
font-family: var(--body); font-size: var(--type-body-sm-size); line-height: var(--type-body-sm-lh);
color: var(--text-1);
padding: 8px 10px;
background: transparent; border: none; border-radius: var(--radius-sm);
cursor: pointer;
transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
}
.topbar__menu-item:hover, .topbar__menu-item:focus-visible {
background: var(--surface-hover); color: var(--text-0); outline: none;
}
.topbar__menu-item-label { font-weight: 500; }
.topbar__menu-item-hint { font-size: var(--type-micro-size); color: var(--text-3); }
/* right cluster: bell · Connect account (or Disconnect when a firm is attached) */
.topbar__right { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); }
/* The overflow menu — three dots, the quietest control in the bar. It replaced the
notifications bell, which had no feed behind it. */
.topbar__kebab {
display: grid; place-items: center;
width: 34px; height: 34px;
border: 0; border-radius: 9px;
background: transparent;
color: var(--text-2);
cursor: pointer;
transition: background 140ms ease, color 140ms ease;
}
.topbar__kebab:hover { background: var(--bg-2); color: var(--text-0); }
.topbar__kebab.is-open { background: var(--bg-2); color: var(--text-0); }
/* "Connect" — the green pill that carries the front-door flow. Matches the CTA on
Overview so the same action always looks the same. */
/* It is a dropdown trigger, not a link: clicking it opens the supported firms
right there in the bar (see buildConnectMenu in top-bar.ts). */
/* ONE primary button, worn by both Connect controls: the pill in the header and
the "Connect account" CTA on Overview. They fire the same action, so they are the
same object at two sizes — the header is the compact cut.
Their colour is --session-accent: the SAME token the "24/7" in Overview's crypto
rail wears (declared in legend.css, retinted by Legend's session pill — green out
of hours, blue in market hours, amber after the close). So the primary action and
the session headline always agree, and both follow the room. */
.gv-rail__title-hi { color: var(--session-accent); }
.topbar__connect,
.gv-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
border: 0;
border-radius: 12px;
background: var(--session-accent);
color: #04140c; /* near-black on a bright accent: sharper than white */
font: inherit;
font-weight: 600;
white-space: nowrap;
cursor: pointer;
transition:
filter 160ms ease,
transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 240ms ease;
}
/* The session tints the accent, so brighten rather than hardcode a hover colour —
a fixed hover hex would fight the skin the moment the session changed. */
.topbar__connect:hover,
.gv-cta:hover { filter: brightness(1.08); transform: translateY(-2px); }
.topbar__connect:active,
.gv-cta:active { transform: translateY(0) scale(0.985); }
.gv-cta:hover svg { transform: translateX(4px); }
.gv-cta svg { transition: transform 240ms cubic-bezier(0.34, 1.56, 0.64, 1); }
/* the compact cut, for the bar */
.topbar__connect {
padding: 9px 18px;
font-size: 13.5px;
border-radius: 10px;
box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--session-accent) 45%, transparent);
}
.topbar__connect:hover { box-shadow: 0 12px 22px -10px color-mix(in srgb, var(--session-accent) 55%, transparent); }
.topbar__connect.is-open { filter: brightness(1.08); transform: none; }
/* the full cut, for the page */
.gv-cta {
padding: 15px 26px;
font-size: 15px;
box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--session-accent) 55%, transparent);
}
.gv-cta:hover { box-shadow: 0 22px 38px -14px color-mix(in srgb, var(--session-accent) 70%, transparent); }
@media (prefers-reduced-motion: reduce) {
.topbar__connect, .gv-cta, .gv-cta svg { transition: none; }
.topbar__connect:hover, .gv-cta:hover { transform: none; }
}
/* The firm picker. Wider than a menu because each row carries a mark, a name and
a line of provenance — this is a choice, not a command. */
.topbar__menu:has(.topbar__connect) .topbar__panel { width: 320px; padding: 8px; }
.topbar__firms-head {
padding: 8px 10px 10px;
font-size: 13px;
font-weight: 600;
color: var(--text-0);
text-align: center;
}
.topbar__firms { display: flex; flex-direction: column; gap: 2px; }
.topbar__firm {
display: flex;
align-items: center;
gap: 11px;
width: 100%;
padding: 10px;
border: 0;
border-radius: 12px;
background: transparent;
font: inherit;
color: var(--text-0);
text-align: left;
cursor: pointer;
transition: background 160ms ease;
}
.topbar__firm:hover, .topbar__firm:focus-visible { background: var(--bg-2); outline: none; }
.topbar__firm-logo {
width: 34px;
height: 34px;
flex: 0 0 auto;
border-radius: 10px;
object-fit: contain;
background: var(--bg-2);
}
.topbar__firm-logo--mono {
display: grid;
place-items: center;
font-size: 14px;
font-weight: 700;
color: var(--text-2);
}
.topbar__firm-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.topbar__firm-name { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; }
.topbar__firm-sub {
font-size: 11.5px;
color: var(--text-3);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.topbar__firms-empty { margin: 14px 10px; font-size: 12.5px; color: var(--text-3); }
.topbar__firms-all {
width: 100%;
margin-top: 4px;
padding: 10px;
border: 0;
border-radius: 12px;
background: transparent;
font: inherit;
font-size: 12.5px;
font-weight: 600;
color: var(--accent);
cursor: pointer;
transition: background 160ms ease;
}
.topbar__firms-all:hover, .topbar__firms-all:focus-visible { background: var(--bg-2); outline: none; }
.topbar__firms-foot {
margin: 8px 4px 2px;
padding-top: 10px;
border-top: 1px solid var(--line);
font-size: 11px;
line-height: 1.5;
color: var(--text-3);
text-align: center;
}
.topbar__clock {
font-family: var(--mono); font-variant-numeric:tabular-nums; font-size: var(--type-micro-size);
color: var(--text-2); font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
white-space: nowrap;
}
/* "Trade now" — the bar's single filled action. Anchored on .btn .btn--primary
but given the app's CONFIDENT solid-accent fill (matching the login + firm
CTAs) so it's the most prominent element in the bar; compact for the 52px
header, never oversized. AA white label on --accent-strong. Scoped under
.topbar__right so it out-specifies the global .btn/.btn--primary fill (which
sits later in the stylesheet). */
.topbar__right .topbar__cta {
flex: 0 0 auto;
gap: 6px;
padding: 6px 12px;
font-size: var(--text-13);
font-weight: 600;
color: #fff;
background: var(--accent-strong);
border: 1px solid transparent;
border-radius: var(--radius-sm);
}
.topbar__right .topbar__cta:hover {
background: color-mix(in oklab, var(--accent-strong) 88%, #000);
border-color: transparent;
color: #fff;
}
.topbar__right .topbar__cta:active { transform: translateY(1px); }
.topbar__right .topbar__cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.topbar__cta-arrow { font-size: 13px; line-height: 1; transition: transform 150ms var(--ease); }
.topbar__right .topbar__cta:hover .topbar__cta-arrow { transform: translateX(2px); }
/* Disconnect variant — neutral by default (not a primary "go" action), turns
destructive-red on hover. A small live-status dot signals an active connection. */
.topbar__right .topbar__cta--disconnect {
background: transparent;
color: var(--text-2);
border-color: var(--line);
}
.topbar__right .topbar__cta--disconnect:hover {
background: color-mix(in oklab, var(--loss) 12%, transparent);
border-color: color-mix(in oklab, var(--loss) 55%, transparent);
color: var(--loss);
}
.topbar__cta-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--profit);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--profit) 22%, transparent);
}
.topbar__right .topbar__cta--disconnect:hover .topbar__cta-dot {
background: var(--loss);
box-shadow: 0 0 0 3px color-mix(in oklab, var(--loss) 22%, transparent);
}
.topbar__menu-trigger--text { color: var(--text-2); font-size: 13px; }
.topbar__menu-trigger--text:hover { color: var(--text-0); }
.topbar__profile {
display: inline-flex; align-items: center; gap: 8px;
padding: 4px 10px 4px 4px;
background: transparent; border: 1px solid var(--border-subtle); border-radius: var(--radius-pill);
cursor: pointer;
transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
}
.topbar__profile:hover { background: var(--surface-hover); border-color: var(--border-default); }
.topbar__profile:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.topbar__avatar {
width: 26px; height: 26px; border-radius: 50%;
display: grid; place-items: center; flex: none; object-fit: cover;
}
.topbar__avatar--initial {
background: var(--accent); color: #04140c;
font-family: var(--display); font-size: 12px; font-weight: 600;
}
.topbar__profile-name {
font-family: var(--body); font-size: var(--type-body-sm-size); font-weight: 500; color: var(--text-0);
max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Workspace mode tabs — Trading / Compass / Discipline / Performance. Pinned in
the main bar on EVERY screen (Wizards, Firms, Connectors, More, onboarding, …)
so these four are always one click away, connected or not. */
.topbar__modetabs {
display: inline-flex; gap: 2px; padding: 3px;
background: var(--bg-2); border: 1px solid var(--line); border-radius: 7px;
}
/* menu separator + logout row */
.topbar__menu-sep { height: 1px; background: var(--border-subtle); margin: 5px 4px; }
.topbar__menu-item--logout .topbar__menu-item-label { color: var(--loss); font-weight: 600; }
.topbar__menu-item--logout:hover { background: var(--color-danger-bg); }
/* profile menu identity header */
.topbar__profile-head { display: flex; align-items: center; gap: 10px; padding: 6px 10px 10px; }
.topbar__profile-head-av {
width: 38px; height: 38px; border-radius: 50%;
display: grid; place-items: center; flex: none; object-fit: cover; font-size: 15px;
}
.topbar__profile-head-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.topbar__profile-head-name {
font-family: var(--display); font-size: var(--type-body-size); font-weight: 600; color: var(--text-0);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar__profile-head-plan { font-size: var(--type-micro-size); color: var(--text-2); }
/* responsive hamburger (collapses the center menus; Profile stays visible) */
.topbar__hamburger-wrap { display: none; }
.topbar__hamburger { font-size: 16px; padding: 6px 9px; }
.topbar__hamburger-glyph { line-height: 1; }
/* Full-bleed: every non-Trading screen gets the whole page (no spine/strip). */
.app--fullbleed { grid-template-rows: var(--topbar-h) 1fr 0; }
.app--fullbleed .app__body { grid-template-columns: 0 1fr; }
.app--fullbleed .app__strip { display: none; }
.app--fullbleed .app__spine-host { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .topbar__panel { transition: none; } }
@media (max-width: 980px) {
.topbar__nav { display: none; }
.topbar__hamburger-wrap { display: block; }
.topbar__profile-name { display: none; }
.topbar__modetabs .topbar__mode span:not(.topbar__mode-dot) { display: none; } /* dots only when tight */
}
/* "Trade now" is the primary action — keep it visible as widths tighten by
collapsing LESS important right-cluster elements first (the clock), and only
as a last resort drop the label to an icon-only button (aria-label retained). */
@media (max-width: 560px) {
.topbar__clock { display: none; }
}
@media (max-width: 400px) {
.topbar__cta-label { display: none; }
.topbar__cta { padding: 6px 9px; }
}
/* Top-bar meta strip: account selector + EQUITY / SESSION / clock /
logout. All rendered in Söhne (var(--display)) at medium
weight so the chrome reads as a single typographic family across
brand → pills → meta. Numerics keep the mono in places where
tabular alignment matters (the bottom strip, the spine values). */
.topbar__meta {
margin-left: auto;
display: flex; align-items: center; gap: 16px;
font-family: var(--display);
font-size: 12px;
font-weight: 500;
color: var(--text-2);
letter-spacing: -0.005em;
}
.topbar__meta-pair { display: inline-flex; gap: 6px; align-items: baseline; }
.topbar__meta-val { color: var(--text-0); font-weight: 600; font-feature-settings: "tnum" 1, "lnum" 1; }
.topbar__meta-val.is-profit { color: var(--profit); }
.topbar__meta-val.is-loss { color: var(--loss); }
.topbar__meta-sep { color: var(--text-3); }
.topbar__account-sel {
background: var(--bg-2);
color: var(--text-0);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: 4px 10px;
font-family: var(--display);
font-size: 12px;
font-weight: 500;
letter-spacing: -0.005em;
cursor: pointer;
outline: none;
}
.topbar__account-sel:hover { border-color: var(--line-bright); }
.topbar__logout {
background: transparent;
border: 1px solid var(--line);
color: var(--text-2);
font-family: var(--display);
font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
font-weight: 500;
padding: 3px 10px;
border-radius: var(--radius-sm);
cursor: pointer;
transition: color var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
}
.topbar__logout:hover { color: var(--text-0); border-color: var(--line-bright); }
/* === Risk Spine (vertical, left) ========================================
* Spec: Spiderx Design Vision p.12 — 52px wide column, three rules
* (LOSS / DD / CONS), each rendered as a vertical capacity meter that
* fills bottom-up. Healthy state breathes at 60bpm halved (6s); when
* any rule crosses 75% the breath accelerates to 3s; at 100% the spine
* freezes (no breath, no animation, breach outline on the breached
* rule).
*
* Geometry — exact:
* .spine 52px wide, flex column, 24px top + 24px bottom padding,
* 14px gap between rules
* .spine__cell flex:1 — three rules share the available height equally
* .spine__meter 8px wide, centered (22px padding either side), fills
* from bottom up via .spine__fill height %.
* label 11px, uppercase, 0.06em tracking, --text-3
* value 12px, mono, --text-2
*/
.spine {
height: 100%;
width: var(--spine-w);
background: var(--bg-1);
border-right: 1px solid var(--line);
padding: 24px 0;
display: flex; flex-direction: column;
align-items: center;
gap: 14px;
overflow: hidden;
min-height: 0;
}
.spine__cell {
flex: 1 1 0;
min-height: 0;
width: 100%;
padding: 0;
background: transparent;
border: 0;
cursor: pointer;
display: flex; flex-direction: column;
align-items: center;
gap: 6px;
position: relative; /* tooltip + breach outline anchor */
color: inherit;
font: inherit;
transition: transform 120ms var(--ease);
}
.spine__cell:hover { transform: translateX(1px); }
.spine__cell:focus-visible {
outline: 1px solid var(--accent);
outline-offset: 2px;
border-radius: 4px;
}
.spine__cell:hover .spine__tip { opacity: 1; transform: translateX(0); pointer-events: auto; }
.spine__label {
font-family: var(--display);
font-size: 11px; letter-spacing: 0.06em;
font-weight: 500;
color: var(--text-3);
text-transform: uppercase;
flex: 0 0 auto;
}
.spine__val {
font-size: 12px;
color: var(--text-2);
flex: 0 0 auto;
font-feature-settings: 'tnum' 1, 'lnum' 1;
}
.spine__meter {
width: 8px;
flex: 1 1 0;
min-height: 28px;
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: 2px;
overflow: hidden;
position: relative;
}
.spine__fill {
position: absolute; bottom: 0; left: 0; right: 0;
height: 0;
background: var(--profit);
transition:
height 200ms cubic-bezier(0.32, 0.72, 0, 1),
background 200ms cubic-bezier(0.32, 0.72, 0, 1);
will-change: opacity;
}
/* === Color bands ===
* The cell carries the current band so fill + value tint stay in sync.
* 0–75% profit, 75–90% warn, 90–100% breach, ≥100% breach + outline.
*/
.spine__cell.is-profit .spine__fill { background: var(--profit); }
.spine__cell.is-warn .spine__fill { background: var(--warn); }
.spine__cell.is-breach .spine__fill { background: var(--breach); }
.spine__cell.is-warn .spine__val { color: var(--warn); }
.spine__cell.is-breach .spine__val { color: var(--breach); }
/* Over-breach: 2px breach outline around the entire cell, fill at 100%,
* frozen — no motion. */
.spine__cell.is-overbreach .spine__meter {
box-shadow: 0 0 0 2px var(--breach);
border-color: var(--breach);
}
.spine__cell.is-overbreach .spine__fill { animation: none; opacity: 1; }
/* === Breath ===
* Healthy: 6s, ±2% opacity. Accelerated (any ≥75%): 3s, ±4%. Frozen
* (any ≥100%): no animation. The spine root carries the cadence class
* so all three rules breathe together.
*/
.spine .spine__fill {
animation: spine-breathe-6s 6s ease-in-out infinite;
}
.spine.is-accelerated .spine__fill {
animation: spine-breathe-3s 3s ease-in-out infinite;
}
.spine.is-frozen .spine__fill,
.spine.is-empty .spine__fill {
animation: none;
}
@keyframes spine-breathe-6s {
0%, 100% { opacity: 0.98; }
50% { opacity: 1.00; }
}
@keyframes spine-breathe-3s {
0%, 100% { opacity: 0.96; }
50% { opacity: 1.00; }
}
/* === Empty / loading state ===
* 200ms shimmer over each empty meter while we wait for first data.
*/
.spine.is-empty .spine__meter::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(
90deg,
transparent,
color-mix(in oklab, var(--text-3) 25%, transparent),
transparent
);
animation: spine-shimmer 1400ms linear infinite;
}
@keyframes spine-shimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
/* === Tooltip ===
* Anchored to the right edge of the cell, fades + slides in on hover.
* Pinned by `.app__page` which has overflow: hidden, so we let the
* tooltip escape via z-index + the spine's own non-clipped column.
*/
.spine__tip {
position: absolute;
left: calc(var(--spine-w) - 4px);
top: 50%;
transform: translate(-4px, -50%);
min-width: 200px;
max-width: 240px;
padding: 10px 12px;
background: var(--bg-2);
border: 1px solid var(--line-bright);
border-radius: 6px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
font-family: var(--body);
font-size: 12px;
color: var(--text-1);
text-align: left;
opacity: 0;
pointer-events: none;
transition: opacity 100ms cubic-bezier(0.32, 0.72, 0, 1), transform 100ms cubic-bezier(0.32, 0.72, 0, 1);
z-index: 30;
}
.spine__tip-title {
font-family: var(--display);
font-size: 12px;
font-weight: 600;
color: var(--text-0);
margin-bottom: 6px;
letter-spacing: -0.005em;
}
.spine__tip-row {
display: flex; justify-content: space-between;
gap: 14px;
font-size: 12px;
line-height: 1.5;
}
.spine__tip-row > span:first-child { color: var(--text-2); }
.spine__tip-row .mono { color: var(--text-0); }
.spine__tip-left { color: var(--accent) !important; }
.spine__tip-meta { color: var(--text-3); font-size: 11px; }
.spine__tip-meta .mono { color: var(--text-2); }
/* === Click-arrival highlight on Discipline ===
* When the user clicks a Spine rule, Discipline scrolls to the
* matching row and adds .is-arrived for 400ms — a mint border that
* confirms "you came from here."
*/
.discipline__rule.is-arrived {
box-shadow: inset 0 0 0 1px var(--accent), 0 0 12px color-mix(in oklab, var(--accent) 35%, transparent);
transition: box-shadow 400ms cubic-bezier(0.32, 0.72, 0, 1);
}
/* === Bottom status strip (Trading only) ================================= */
.app__strip {
background: var(--bg-1);
border-top: 1px solid var(--line);
font-family: var(--mono); font-variant-numeric:tabular-nums;
font-size: 10.5px;
color: var(--text-2);
letter-spacing: 0.04em;
}
.app__strip-inner {
display: flex; align-items: center;
height: 100%;
padding: 0 16px;
gap: 14px;
}
.app__strip-pos { color: var(--text-1); }
.app__strip-end { }
.app__strip-recovery { color: var(--text-2); }
.app__strip-sep { color: var(--text-3); }
.app__strip-spacer { flex: 1 1 auto; }
/* --- Sidebar -------------------------------------------------------------- */
.sidebar {
background: var(--bg-1);
border-right: 1px solid var(--line);
display: flex;
flex-direction: column;
min-height: 0;
}
.sidebar__brand {
display: flex; align-items: center; gap: var(--space-3);
padding: 0 var(--space-4);
height: var(--header-h);
border-bottom: 1px solid var(--line);
}
.sidebar__brand-mark { width: 18px; height: 18px; flex: 0 0 18px; }
.sidebar__brand-name {
font-family: var(--display);
font-size: var(--text-14);
font-weight: var(--weight-semibold);
letter-spacing: -0.02em;
color: var(--text-0);
}
.sidebar__nav { flex: 1 1 auto; padding: var(--space-3) var(--space-2); overflow-y: auto; }
.sidebar__nav-section {
font-family: var(--body);
font-size: var(--text-11);
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-2);
padding: var(--space-3) var(--space-3) var(--space-2);
}
.nav-link {
display: flex; align-items: center; gap: var(--space-3);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-sm);
color: var(--text-1);
text-decoration: none;
cursor: pointer;
font-size: var(--text-13);
font-family: var(--display);
font-weight: 500;
letter-spacing: -0.01em;
transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
user-select: none;
position: relative;
}
.nav-link:hover { background: var(--bg-2); color: var(--text-0); }
.nav-link.is-active {
background: var(--bg-3);
color: var(--text-0);
}
.nav-link.is-active::before {
content: ''; position: absolute; left: -2px; top: 8px; bottom: 8px;
width: 2px; background: var(--accent);
box-shadow: 0 0 6px var(--accent);
border-radius: 1px;
}
.nav-link__icon { width: 16px; height: 16px; flex: 0 0 16px; opacity: 0.85; }
.nav-link.is-active .nav-link__icon { opacity: 1; }
.nav-link__badge {
margin-left: auto;
font-family: var(--mono); font-variant-numeric:tabular-nums;
font-size: 10px;
letter-spacing: 0.06em;
text-transform: uppercase;
background: var(--accent-soft);
color: var(--accent);
padding: 1px 6px;
border-radius: var(--radius-pill);
}
.sidebar__footer {
border-top: 1px solid var(--line);
padding: var(--space-3);
display: flex; align-items: center; gap: var(--space-2);
}
.sidebar__user { flex: 1 1 auto; display: flex; flex-direction: column; font-size: var(--text-12); color: var(--text-2); overflow: hidden; }
.sidebar__user-name { color: var(--text-0); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--display); letter-spacing: -0.01em; }
.sidebar__logout {
background: transparent;
border: 1px solid var(--line);
color: var(--text-2);
font-family: var(--body);
font-size: var(--text-12);
padding: 4px 10px;
border-radius: var(--radius-sm);
cursor: pointer;
transition: color var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
}
.sidebar__logout:hover { color: var(--text-0); border-color: var(--line-bright); }
/* --- Main + header ------------------------------------------------------- */
.main {
display: grid;
grid-template-rows: var(--header-h) auto 1fr;
min-height: 0;
min-width: 0;
}
.main__header {
display: flex; align-items: center; justify-content: space-between;
gap: var(--space-4);
padding: 0 var(--space-6);
border-bottom: 1px solid var(--line);
background: var(--bg-1);
}
.main__title {
font-family: var(--display);
font-size: var(--text-18);
font-weight: var(--weight-semibold);
letter-spacing: -0.02em;
color: var(--text-0);
}
.main__subtitle { font-size: var(--text-12); color: var(--text-2); margin-left: var(--space-3); }
.main__actions { display: flex; gap: var(--space-2); align-items: center; }
.main__page { overflow-y: auto; overflow-x: hidden; padding: var(--space-6); min-height: 0; }
/* =========================================================================
* Pages
* ========================================================================= */
/* ── Performance mode — "The Almanac" (design-handoff #8) ────────────────────
* A calm, editorial long-form account review. Scoped ink/paper/rule vars keep
* it in its own warm-paper world; P&L green/red reuse the app tokens. */
.alm {
--alm-paper: #ffffff;
--alm-ink: #1a1a17;
--alm-rule: #e7e4dd;
height: 100%; min-height: 0; overflow-y: auto; overflow-x: hidden;
background: var(--alm-paper); color: var(--alm-ink);
font-family: var(--display);
}
.alm::-webkit-scrollbar { width: 10px; }
.alm::-webkit-scrollbar-thumb { background: #d8d3c8; border-radius: 8px; border: 3px solid var(--alm-paper); }
.alm::-webkit-scrollbar-track { background: transparent; }
.alm-inner { max-width: 1160px; margin: 0 auto; padding: 56px 60px 100px; }
.alm-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: #9a9384; }
.alm-num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }
.alm-spoke { transition: opacity 160ms ease; }
.alm-masthead { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-bottom: 22px; border-bottom: 1.5px solid var(--alm-ink); flex-wrap: wrap; }
.alm-title { margin: 0; font-size: 52px; font-weight: 700; letter-spacing: -0.035em; color: var(--alm-ink); line-height: 0.95; }
.alm-range { display: inline-flex; gap: 2px; padding: 3px; background: #ece8e0; border-radius: 9px; }
.alm-range button {
font-family: var(--display); font-size: 12px; border: 0; border-radius: 7px; padding: 6px 13px; cursor: pointer;
font-weight: 500; color: #7a7362; background: transparent;
transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
}
.alm-range button.is-on { font-weight: 600; color: var(--alm-ink); background: #fffdf9; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
.alm-lede { padding: 40px 0 46px; border-bottom: 1px solid var(--alm-rule); }
.alm-lede__p { margin: 0; font-size: 33px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.32; color: #3d3a33; max-width: 20ch; text-wrap: balance; }
.alm-chapter { padding: 52px 0; border-bottom: 1px solid var(--alm-rule); }
.alm-chapter--split { display: grid; grid-template-columns: 1fr 340px; gap: 56px; align-items: center; }
.alm-h2 { margin: 0 0 6px; font-size: 27px; font-weight: 700; letter-spacing: -0.025em; color: var(--alm-ink); }
.alm-kv { display: flex; align-items: baseline; justify-content: space-between; font-size: 13px; color: #6f6857; }
.alm-kv .alm-num { font-size: 15px; font-weight: 700; }
.alm-callout { padding: 14px 16px; background: color-mix(in srgb, var(--warn) 9%, var(--alm-paper)); border-radius: 12px; border: 1px solid color-mix(in srgb, var(--warn) 24%, transparent); font-size: 13px; line-height: 1.5; color: #6b5a2e; }
.alm-colophon { margin-top: 44px; padding: 26px 30px; background: #fffdf9; border: 1px solid var(--alm-rule); border-radius: 16px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 40px; }
.alm-colophon__p { margin: 0; font-size: 14.5px; line-height: 1.5; color: #4a463d; }
@media (max-width: 960px) {
.alm-inner { padding: 40px 28px 80px; }
.alm-chapter--split { grid-template-columns: 1fr; gap: 28px; }
.alm-colophon { grid-template-columns: 1fr; gap: 24px; }
.alm-title { font-size: 40px; }
.alm-lede__p { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) { .alm-spoke, .alm-range button { transition: none; } }
/* ── Performance: collected-view primer + "Take the tour" + guided tour ─────── */
.alm-tour-btn {
font: 600 12px var(--display); border: 1px solid var(--alm-ink, #24221a); background: transparent;
color: var(--alm-ink, #24221a); border-radius: 8px; padding: 6px 13px; cursor: pointer;
transition: background var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease);
}
.alm-tour-btn:hover { background: var(--alm-ink, #24221a); color: #fffdf9; }
/* New-member welcome banner above the masthead. */
.alm-primer {
display: flex; margin-bottom: 24px; padding: 12px 16px;
background: color-mix(in srgb, var(--accent) 8%, var(--alm-paper, #fffdf9));
border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
border-radius: 12px; font-size: 13.5px; line-height: 1.5; color: #5a5344;
}
.alm-primer__tour { border: 0; background: none; color: var(--accent); font: 700 13.5px var(--display); cursor: pointer; padding: 0; }
.alm-primer__tour:hover { text-decoration: underline; }
/* Spotlight tour. backdrop = transparent click-catcher; ring = dim + highlight. */
.perf-tour__backdrop { position: fixed; inset: 0; z-index: 9998; background: transparent; }
.perf-tour__ring {
position: fixed; z-index: 9999; border-radius: 14px; pointer-events: none;
box-shadow: 0 0 0 9999px rgba(24, 22, 18, 0.55), 0 0 0 2px var(--accent);
transition: top 0.22s var(--ease), left 0.22s var(--ease), width 0.22s var(--ease), height 0.22s var(--ease);
}
.perf-tour__pop {
position: fixed; z-index: 10000; width: 320px; max-width: calc(100vw - 24px);
background: var(--alm-paper, #fffdf9); color: var(--alm-ink, #24221a);
border: 1px solid var(--alm-rule, #e6e0d5); border-radius: 14px; padding: 18px;
box-shadow: 0 26px 64px -20px rgba(24, 22, 18, 0.5);
transition: top 0.22s var(--ease), left 0.22s var(--ease);
}
.perf-tour__step { font: 600 11px var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: #9a9384; }
.perf-tour__title { margin-top: 6px; font: 800 18px var(--display); letter-spacing: -0.02em; color: var(--alm-ink, #24221a); }
.perf-tour__body { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; color: #4a463d; }
.perf-tour__dots { display: flex; gap: 6px; margin-top: 14px; }
.perf-tour__dots span { width: 6px; height: 6px; border-radius: 50%; background: #d8d3c8; }
.perf-tour__dots span.is-on { background: var(--accent); }
.perf-tour__nav { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; }
.perf-tour__navr { display: flex; gap: 8px; }
.perf-tour__btn { font: 600 13px var(--display); border: 1px solid var(--alm-rule, #e6e0d5); background: #fffdf9; color: var(--alm-ink, #24221a); border-radius: 9px; padding: 7px 14px; cursor: pointer; }
.perf-tour__btn:hover { filter: brightness(0.98); }
.perf-tour__btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.perf-tour__skip { border: 0; background: none; color: #8c8474; font: 500 13px var(--display); cursor: pointer; }
.perf-tour__skip:hover { color: var(--alm-ink, #24221a); }
@media (prefers-reduced-motion: reduce) { .perf-tour__ring, .perf-tour__pop, .alm-tour-btn { transition: none; } }
/* ── Guided tour (empty / no-account states in Compass & Discipline) ─────────
* A short "what this page is" intro, then a hand-drawn arrow + Caveat caption
* pinned into each section explaining what it does. Non-interactive overlay. */
.tour-intro {
padding: 22px 24px; margin-bottom: 22px;
border: 1px solid var(--line); border-radius: 16px;
background: color-mix(in srgb, var(--accent) 5%, var(--bg-0));
}
.tour-intro__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-strong); }
.tour-intro__title { margin: 6px 0 8px; font-family: var(--display); font-size: 23px; font-weight: 700; letter-spacing: -0.02em; color: var(--text-0); }
.tour-intro__body { margin: 0; font-size: 15px; line-height: 1.55; color: var(--text-2); max-width: 64ch; }
/* A section shown purely to illustrate (no live account) — non-interactive. */
.tour-preview { pointer-events: none; user-select: none; }
.tour-anchor { position: relative; }
.tour-note {
position: absolute; top: 10px; right: 16px; z-index: 6;
display: flex; flex-direction: column; align-items: flex-end; gap: 0;
max-width: 300px; text-align: right; pointer-events: none;
color: var(--accent-strong);
}
.tour-note__text {
/* see .hub-hint__word — same annotation voice, one face */
font-family: var(--sans); font-style: italic; font-size: 18px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.16;
color: var(--accent-strong); transform: rotate(-2deg);
filter: drop-shadow(0 1px 1px rgba(255, 255, 255, 0.65));
}
/* Flip the arrow so it curves down-LEFT, into the section it annotates. */
.tour-note__arrow { display: block; margin-top: 2px; color: var(--accent-strong); opacity: 0.85; transform: scaleX(-1); }
.tour-note__arrow svg { display: block; }
@media (max-width: 900px) { .tour-note { position: static; align-items: flex-start; text-align: left; margin: 4px 0 10px; max-width: none; } .tour-note__arrow { display: none; } }
@media (prefers-reduced-motion: reduce) {
.hubc, .hubc__add, .hub-hint { transition: none; }
.hubc:hover { transform: none; }
}
/* === Compass — Apple-tier polish pass =================================
* Calm empty state. Single hairline structure: hero + dashed-line
* timeline + 3 insight cards + 30-day mirror with right-rail metrics.
* Scoped --fg / --acc alpha tokens for readable spec percentages.
* Numerics tabular across the page. */
.compass {
--fg: var(--text-0);
--fg-02: color-mix(in srgb, var(--text-0) 2%, transparent);
--fg-03: color-mix(in srgb, var(--text-0) 3%, transparent);
--fg-04: color-mix(in srgb, var(--text-0) 4%, transparent);
--fg-05: color-mix(in srgb, var(--text-0) 5%, transparent);
--fg-06: color-mix(in srgb, var(--text-0) 6%, transparent);
--fg-08: color-mix(in srgb, var(--text-0) 8%, transparent);
--fg-18: color-mix(in srgb, var(--text-0) 18%, transparent);
--fg-25: color-mix(in srgb, var(--text-0) 25%, transparent);
--fg-30: color-mix(in srgb, var(--text-0) 30%, transparent);
--fg-50: color-mix(in srgb, var(--text-0) 50%, transparent);
--fg-55: color-mix(in srgb, var(--text-0) 55%, transparent);
--fg-60: color-mix(in srgb, var(--text-0) 60%, transparent);
--fg-65: color-mix(in srgb, var(--text-0) 65%, transparent);
--fg-75: color-mix(in srgb, var(--text-0) 75%, transparent);
--cell-good: color-mix(in srgb, var(--accent) 35%, transparent);
--cell-recovery: color-mix(in srgb, var(--warn) 35%, transparent);
--cell-lockout: color-mix(in srgb, var(--breach) 35%, transparent);
--cell-empty: var(--fg-05);
--ease-std: cubic-bezier(0.32, 0.72, 0, 1);
}
.compass, .compass * {
font-feature-settings: 'tnum' 1, 'lnum' 1;
font-variant-numeric: tabular-nums lining-nums;
}
.compass {
height: 100%;
overflow-y: auto;
overflow-x: hidden;
padding: 48px 64px 96px;
}
@media (max-width: 1200px) { .compass { padding: 40px 32px 80px; } }
@media (max-width: 720px) { .compass { padding: 32px 24px 64px; } }
/* === Hero ============================================================== */
.compass__hero {
margin: 0 0 48px;
}
.compass__hero .eyebrow,
.compass__hero-meta {
font-family: var(--display);
font-size: 11px;
line-height: 16px;
font-weight: 500;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--fg-55);
margin: 0 0 16px;
animation: compass-fade-up 300ms var(--ease-std) both;
}
.compass__hero-title {
font-family: var(--display);
font-weight: 600;
font-size: 40px;
line-height: 48px;
letter-spacing: -0.022em;
color: var(--fg);
margin: 0;
text-wrap: pretty;
animation: compass-fade-up 300ms var(--ease-std) 50ms both;
}
.compass__hero-secondary {
color: var(--fg-50); /* spec: 50% foreground for the second sentence */
animation: compass-secondary-fade 200ms ease-out 150ms both;
}
@keyframes compass-fade-up {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes compass-secondary-fade {
from { opacity: 0; }
to { opacity: 1; }
}
/* === Timeline chart — "THE DAY, END-TO-END" ===========================
* Empty state: 240px container with dashed line at vertical center,
* axis ticks + labels at the bottom, center message with bg-padded
* "break" so the dashes appear to part around the text. */
.compass__stripe {
position: relative;
background: transparent;
border: 0;
padding: 0;
margin: 0 0 32px;
min-height: auto;
animation: compass-fade-up 300ms var(--ease-std) 100ms both;
}
.compass__stripe-head {
display: flex; justify-content: space-between; align-items: baseline;
margin: 0 0 16px;
padding: 0 32px;
}
.compass__stripe-head .eyebrow {
font-family: var(--display);
font-size: 11px;
line-height: 16px;
font-weight: 500;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--fg-55);
}
.compass__stripe-meta {
font-family: var(--display);
font-size: 13px;
font-weight: 500;
color: var(--fg-60);
}
.compass__stripe-meta .is-profit { color: var(--profit); }
.compass__stripe-meta .is-loss { color: var(--loss); }
/* Soften the · separators between metric tokens — same family, fainter. */
.compass__stripe-meta .compass__sep {
color: var(--fg-30);
margin: 0 4px;
}
.compass__stripe-canvas {
position: relative;
height: 240px;
padding: 32px 32px 24px;
box-sizing: border-box;
background: transparent;
}
.compass__stripe-canvas svg {
display: block;
width: 100%;
height: 100%;
}
.compass__stripe-canvas .compass__stripe-baseline {
stroke-dasharray: 4 6;
animation: compass-baseline-draw 600ms ease-out both;
}
@keyframes compass-baseline-draw {
from { stroke-dashoffset: 1200; }
to { stroke-dashoffset: 0; }
}
/* Center message — sits ON the dashed line; its background-color
matches the page so the dashes appear to part around the text. */
.compass__stripe-msg {
position: absolute;
left: 50%;
top: calc(50% + 4px); /* +4 to compensate for axis-pad asymmetry */
transform: translate(-50%, -50%);
padding: 0 12px;
background: var(--bg-0);
font-family: var(--display);
font-size: 14px;
font-weight: 400;
color: var(--fg-55);
white-space: nowrap;
opacity: 0;
animation: compass-msg-fade 300ms ease-out 600ms forwards;
}
@keyframes compass-msg-fade {
to { opacity: 1; }
}
.compass__stripe-axis-label {
font-family: var(--display);
font-size: 11px;
font-weight: 500;
fill: var(--fg-50);
}
.compass__stripe-axis-tick {
stroke: var(--fg-25);
stroke-width: 1;
}
/* === Curve animations (kept for the populated session state) =========== */
.compass__stripe-line {
animation: compass-draw 800ms cubic-bezier(0.32, 0.72, 0, 1) forwards;
}
@keyframes compass-draw {
to { stroke-dashoffset: 0; }
}
/* === Curve draw-on motion ===
* The path's stroke-dashoffset is set inline to the path's animation
* length. The CSS animation tweens that to 0 over 800ms. The marker +
* annotation classes fade in AFTER the curve has finished. */
.compass__stripe-line {
animation: compass-draw 800ms cubic-bezier(0.32, 0.72, 0, 1) forwards;
}
@keyframes compass-draw {
to { stroke-dashoffset: 0; }
}
.compass__stripe-marker {
transform-box: fill-box;
transform-origin: center;
transform: scale(0);
animation: compass-marker-pop 300ms cubic-bezier(0.32, 0.72, 0, 1) 800ms forwards;
}
@keyframes compass-marker-pop {
from { transform: scale(0); }
to { transform: scale(1); }
}
.compass__stripe-anno {
opacity: 0;
animation: compass-anno-fade 300ms ease-out 1100ms forwards;
}
@keyframes compass-anno-fade {
to { opacity: 1; }
}
.compass__stripe-pulse {
transform-box: fill-box;
transform-origin: center;
opacity: 0.45;
animation: compass-pulse 4s ease-in-out infinite;
}
@keyframes compass-pulse {
0%, 100% { opacity: 0.25; transform: scale(1.0); }
50% { opacity: 0.65; transform: scale(1.6); }
}
/* === Marker hover tooltip ===
* Position: absolute relative to .compass__stripe; transform:translate(-50%, -100%)
* anchors above the marker. */
.compass__stripe-tip {
position: absolute;
transform: translate(-50%, -100%);
min-width: 220px;
padding: 12px 14px;
background: var(--bg-2);
border: 1px solid var(--line-bright);
border-radius: 6px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
font-family: var(--display);
font-size: 13px;
color: var(--text-1);
transition: opacity 120ms cubic-bezier(0.32, 0.72, 0, 1);
z-index: 30;
pointer-events: none;
}
.compass__stripe-tip-title {
font-weight: 600;
color: var(--text-0);
margin-bottom: 6px;
letter-spacing: -0.005em;
}
.compass__stripe-tip-row {
display: flex; justify-content: space-between;
gap: 16px;
font-size: 12px;
line-height: 1.6;
}
.compass__stripe-tip-row > span:first-child { color: var(--text-2); }
.compass__stripe-tip-row .mono { color: var(--text-0); font-feature-settings: 'tnum' 1, 'lnum' 1; }
.compass__stripe-tip-row .is-profit { color: var(--profit); }
.compass__stripe-tip-row .is-loss { color: var(--loss); }
.compass__stripe-marker { cursor: pointer; }
.compass__stripe-marker:hover { stroke-width: 2; }
/* No-trade-day variant kept lightweight; legacy hooks. */
.compass__stripe--no-trades .compass__stripe-head { margin-bottom: 24px; }
.compass__stripe-empty {
height: 96px;
display: grid; place-items: center;
color: var(--fg-55);
font-size: 14px;
font-weight: 400;
}
/* === Three insight cards =============================================== */
.compass__cards {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 16px;
margin: 0 0 64px;
align-items: stretch;
animation: compass-fade-up 300ms var(--ease-std) 200ms both;
}
.compass__card {
display: flex; flex-direction: column;
gap: 12px;
padding: 24px;
background: transparent;
border: 1px solid var(--fg-08);
border-radius: 12px;
transition: background 150ms var(--ease-std);
animation: compass-card-enter 200ms var(--ease-std) both;
}
.compass__card:nth-child(1) { animation-delay: 250ms; }
.compass__card:nth-child(2) { animation-delay: 300ms; }
.compass__card:nth-child(3) { animation-delay: 350ms; }
.compass__card:hover { background: var(--fg-04); }
@keyframes compass-card-enter {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
.compass__card-label {
display: flex;
align-items: center; /* optical-center for uppercase letterforms */
gap: 8px;
font-family: var(--display);
font-size: 11px;
line-height: 16px;
font-weight: 500;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--fg-55);
}
.compass__card-dot {
width: 6px; height: 6px;
border-radius: 50%;
flex: 0 0 6px;
transform: translateY(-1px); /* optical correction vs cap-height */
}
.compass__card-head {
font-family: var(--display);
font-size: 17px;
line-height: 24px;
font-weight: 600;
letter-spacing: -0.005em;
color: var(--fg);
margin-top: 0; /* gap handled by parent flex */
}
.compass__card-body {
font-family: var(--display);
font-size: 13px;
line-height: 20px;
font-weight: 400;
color: var(--fg-60);
margin-top: -6px; /* tighten head→body gap to spec 6px */
}
/* === 30-day mirror — left grid + right metrics ======================== */
.compass__mirror {
display: grid;
grid-template-columns: 1fr 280px;
gap: 64px;
align-items: start;
animation: compass-fade-up 300ms var(--ease-std) 250ms both;
}
.compass__mirror-grid { display: flex; flex-direction: column; gap: 24px; }
.compass__mirror-grid .eyebrow {
font-family: var(--display);
font-size: 11px;
line-height: 16px;
font-weight: 500;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--fg-55);
}
.compass__cal {
display: grid;
grid-template-columns: repeat(15, 1fr);
gap: 6px;
max-width: 720px;
}
.compass__cal-cell {
aspect-ratio: 1 / 1;
border-radius: 4px;
background: var(--cell-empty);
border: 0;
cursor: pointer;
position: relative;
opacity: 0;
animation: compass-cell-fade 200ms ease-out both;
}
.compass__cal-cell.is-good { background: var(--cell-good); }
.compass__cal-cell.is-recovery { background: var(--cell-recovery); }
.compass__cal-cell.is-lockout { background: var(--cell-lockout); }
.compass__cal-cell.is-drift { background: var(--fg-25); }
.compass__cal-cell.is-rest { background: var(--cell-empty); }
@keyframes compass-cell-fade {
from { opacity: 0; }
to { opacity: 1; }
}
/* Cell tooltip — pseudo-element from data-tip attribute, fades in on hover. */
.compass__cal-cell::after {
content: attr(data-tip);
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%);
padding: 8px 12px;
background: var(--fg);
color: var(--bg-0);
border-radius: 6px;
font-family: var(--display);
font-size: 12px;
font-weight: 500;
letter-spacing: -0.005em;
white-space: nowrap;
opacity: 0;
pointer-events: none;
transition: opacity 150ms var(--ease-std);
z-index: 20;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.compass__cal-cell::before {
/* tooltip arrow */
content: '';
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border: 4px solid transparent;
border-top-color: var(--fg);
opacity: 0;
pointer-events: none;
transition: opacity 150ms var(--ease-std);
z-index: 20;
}
.compass__cal-cell:hover::after,
.compass__cal-cell:hover::before { opacity: 1; }
/* Right rail — metrics list */
.compass__cal-stats {
display: flex; flex-direction: column;
gap: 0;
}
.compass__mirror-row {
display: flex; justify-content: space-between; align-items: center;
padding: 8px 0;
font-family: var(--display);
font-size: 13px;
}
.compass__mirror-row > span:first-child {
color: var(--fg-75);
font-weight: 400;
}
.compass__mirror-row > span:last-child {
color: var(--fg);
font-weight: 500;
}
.compass__mirror-row .is-accent { color: var(--accent); }
@media (max-width: 1100px) {
.compass__mirror { grid-template-columns: 1fr; gap: 32px; }
.compass__cards { grid-template-columns: 1fr; }
}
/* --- Discipline --- */
/* === Discipline page — Apple-tier polish pass =========================
* Scoped --fg / --acc alpha tokens make the spec percentages readable
* inline. Numerics tabular across the page. Hairlines do all the
* structural work; cards / borders / fills are gone except where they
* earn their weight (the inputs, the locked badges, the buttons).
*/
.discipline {
--fg: var(--text-0);
--fg-03: color-mix(in srgb, var(--text-0) 3%, transparent);
--fg-04: color-mix(in srgb, var(--text-0) 4%, transparent);
--fg-05: color-mix(in srgb, var(--text-0) 5%, transparent);
--fg-06: color-mix(in srgb, var(--text-0) 6%, transparent);
--fg-08: color-mix(in srgb, var(--text-0) 8%, transparent);
--fg-10: color-mix(in srgb, var(--text-0) 10%, transparent);
--fg-12: color-mix(in srgb, var(--text-0) 12%, transparent);
--fg-50: color-mix(in srgb, var(--text-0) 50%, transparent);
--fg-55: color-mix(in srgb, var(--text-0) 55%, transparent);
--fg-60: color-mix(in srgb, var(--text-0) 60%, transparent);
--fg-65: color-mix(in srgb, var(--text-0) 65%, transparent);
--fg-80: color-mix(in srgb, var(--text-0) 80%, transparent);
--acc: var(--accent);
--acc-15: color-mix(in srgb, var(--accent) 15%, transparent);
--acc-20: color-mix(in srgb, var(--accent) 20%, transparent);
--acc-22: color-mix(in srgb, var(--accent) 22%, transparent);
--acc-60: color-mix(in srgb, var(--accent) 60%, transparent);
--destructive: #E5484D;
--destructive-10: rgba(229, 72, 77, 0.10);
--destructive-20: rgba(229, 72, 77, 0.20);
--ease-std: cubic-bezier(0.32, 0.72, 0, 1);
}
.discipline, .discipline * {
font-feature-settings: 'tnum' 1, 'lnum' 1;
font-variant-numeric: tabular-nums lining-nums;
}
.discipline {
height: 100%;
overflow-y: auto;
overflow-x: hidden;
padding: 64px 64px 96px;
}
@media (max-width: 1200px) { .discipline { padding: 48px 32px 80px; } }
@media (max-width: 720px) { .discipline { padding: 32px 24px 64px; } }
.discipline__pane { max-width: 920px; }
.discipline__pane--center { max-width: 1100px; margin: 0 auto; }
/* === Top meta line =====================================================
* "SAT · MARKET OPEN IN 21H 13M" — micro all-caps at 55% fg. */
.discipline__meta {
font-family: var(--display);
font-size: 11px;
line-height: 16px;
font-weight: 500;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--fg-55);
margin: 0 0 24px;
animation: discipline-fade-up 300ms var(--ease-std) both;
}
/* === Hero ============================================================== */
.discipline__hero {
font-family: var(--display);
font-weight: 600;
font-size: 40px;
line-height: 48px;
letter-spacing: -0.022em;
color: var(--fg);
margin: 0 0 16px;
max-width: 920px;
animation: discipline-fade-up 300ms var(--ease-std) 50ms both;
}
.discipline__hero-sub {
font-family: var(--display);
font-size: 15px;
line-height: 24px;
font-weight: 400;
color: var(--fg-65);
max-width: 560px;
margin: 0 0 64px;
animation: discipline-fade-up 300ms var(--ease-std) 100ms both;
}
@keyframes discipline-fade-up {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
/* === Rule list =========================================================
* Apple Settings pattern: a single hairline above and below the list,
* one hairline between rows. No card border, no row background, no
* radius. Hover gives a 3% wash so the row reads as targetable. */
.discipline__rules {
border-top: 1px solid var(--fg-08);
border-bottom: 1px solid var(--fg-08);
margin: 0 0 32px;
animation: discipline-fade-up 300ms var(--ease-std) 150ms both;
}
.discipline__rule {
display: grid;
grid-template-columns: 1fr auto;
gap: 24px;
align-items: center;
padding: 24px 0;
border-bottom: 1px solid var(--fg-06);
transition: background 150ms var(--ease-std);
}
.discipline__rule:last-child { border-bottom: 0; }
.discipline__rule:hover { background: var(--fg-03); }
.discipline__rule-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.discipline__rule-label-row {
display: flex;
align-items: center; /* optical center, not baseline */
gap: 12px;
flex-wrap: wrap;
}
.discipline__rule-label {
font-family: var(--display);
font-size: 15px;
line-height: 20px;
font-weight: 600;
letter-spacing: -0.005em;
color: var(--fg);
}
.discipline__rule-sub {
font-family: var(--display);
font-size: 13px;
line-height: 20px;
font-weight: 400;
color: var(--fg-60);
max-width: 540px;
}
/* Locked badge "LOCKED · BROKER" — soft pill, optically aligned with the
title baseline. translateY(-1px) corrects the visual sag from the
uppercase letterforms hanging too low against the title's x-height. */
.discipline__rule-pill {
display: inline-flex;
align-items: center;
font-family: var(--display);
font-size: 10px;
line-height: 14px;
font-weight: 500;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--fg-55);
background: var(--fg-05);
border: 0;
border-radius: 4px;
padding: 2px 8px;
transform: translateY(-1px);
}
/* === Right side: value · toggle · remove =============================== */
.discipline__rule-control {
display: flex; align-items: center; gap: 16px;
flex-shrink: 0;
}
.discipline__rule-value {
height: 32px;
width: 64px;
background: transparent;
border: 1px solid var(--fg-12);
border-radius: 6px;
color: var(--fg);
padding: 0 8px;
font-family: var(--display);
font-size: 14px;
font-weight: 500;
text-align: right;
outline: none;
-moz-appearance: textfield;
transition: border-color 150ms var(--ease-std), box-shadow 150ms var(--ease-std);
}
.discipline__rule-value::-webkit-outer-spin-button,
.discipline__rule-value::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.discipline__rule-value:focus {
border-color: var(--acc);
box-shadow: 0 0 0 2px var(--acc-20);
}
.discipline__rule-suffix {
font-family: var(--display);
font-size: 13px;
font-weight: 400;
color: var(--fg-55);
margin-left: -8px; /* tighten gap to its input */
}
.discipline__rule-firm-value {
font-family: var(--display);
font-size: 14px;
font-weight: 500;
color: var(--fg);
min-width: 64px;
text-align: right;
}
/* save button — visible only when input is dirty (value !== saved). */
.discipline__rule-save {
height: 28px;
padding: 0 12px;
background: var(--fg-06);
border: 0;
border-radius: 6px;
color: var(--fg-80);
font-family: var(--display);
font-size: 12px;
line-height: 16px;
font-weight: 500;
letter-spacing: 0.01em;
cursor: pointer;
transition: background 150ms var(--ease-std), opacity 200ms var(--ease-std), transform 200ms var(--ease-std);
opacity: 0;
transform: scale(0.95);
pointer-events: none;
}
.discipline__rule-save.is-dirty {
opacity: 1;
transform: scale(1);
pointer-events: auto;
}
.discipline__rule-save:hover { background: var(--fg-10); }
.discipline__rule-save:active { transform: scale(0.97); transition-duration: 100ms; }
.discipline__rule-save:focus-visible { outline: 2px solid var(--acc-60); outline-offset: 2px; }
/* "×" remove — hover reveals destructive intent. */
.discipline__rule-delete {
width: 24px; height: 24px;
background: transparent;
border: 0;
border-radius: 6px;
color: var(--fg-50);
font-size: 12px;
line-height: 1;
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: background 150ms var(--ease-std), color 150ms var(--ease-std), transform 150ms var(--ease-std);
}
.discipline__rule-delete:hover {
background: var(--destructive-10);
color: var(--destructive);
}
.discipline__rule-delete:active { transform: scale(0.95); transition-duration: 100ms; }
.discipline__rule-delete:focus-visible { outline: 2px solid var(--acc-60); outline-offset: 2px; }
.discipline__rule-delete-stub {
display: inline-block;
width: 24px; height: 24px;
}
/* === Toggle — iOS spec ================================================= */
.discipline__toggle {
position: relative;
display: inline-block;
width: 44px; height: 26px;
cursor: pointer;
flex-shrink: 0;
}
.discipline__toggle input {
position: absolute;
width: 100%; height: 100%;
opacity: 0;
margin: 0;
cursor: inherit;
}
.discipline__toggle-track {
position: absolute; inset: 0;
background: var(--fg-12);
border-radius: 13px;
transition: background 200ms var(--ease-std);
}
.discipline__toggle-thumb {
position: absolute; top: 2px; left: 2px;
width: 22px; height: 22px;
border-radius: 50%;
background: #fff;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
transition: transform 200ms var(--ease-std), background 200ms var(--ease-std);
}
.discipline__toggle.is-on .discipline__toggle-track { background: var(--acc); }
.discipline__toggle.is-on .discipline__toggle-thumb { transform: translateX(18px); }
/* The hidden input toggling via :checked is the source of truth — fall
back to the .is-on class so live ARIA-only toggles still animate. */
.discipline__toggle input:checked ~ .discipline__toggle-track { background: var(--acc); }
.discipline__toggle input:checked ~ .discipline__toggle-thumb { transform: translateX(18px); }
.discipline__toggle:active .discipline__toggle-thumb { transform: translateX(0) scale(1.05); transition-duration: 140ms; }
.discipline__toggle.is-on:active .discipline__toggle-thumb { transform: translateX(18px) scale(1.05); }
.discipline__toggle:focus-within .discipline__toggle-track {
box-shadow: 0 0 0 2px var(--bg-0), 0 0 0 4px var(--acc-60);
}
/* Locked: 100% opacity per spec, but cursor not-allowed and no transitions. */
.discipline__toggle.is-locked {
opacity: 0.65;
cursor: not-allowed;
}
.discipline__toggle.is-locked .discipline__toggle-track,
.discipline__toggle.is-locked .discipline__toggle-thumb { transition: none; }
/* === Add-rule section ================================================== */
.discipline__add {
display: flex; align-items: center; gap: 12px;
margin: 0 0 80px;
animation: discipline-fade-up 300ms var(--ease-std) 200ms both;
}
.discipline__add-select {
flex: 1 1 0;
height: 40px;
padding: 0 36px 0 12px;
background: transparent;
color: var(--fg);
border: 1px solid var(--fg-12);
border-radius: 8px;
font-family: var(--display);
font-size: 14px;
font-weight: 400;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 12px center;
transition: border-color 150ms var(--ease-std), box-shadow 150ms var(--ease-std);
}
.discipline__add-input {
height: 40px;
width: 120px;
padding: 0 12px;
background: transparent;
color: var(--fg);
border: 1px solid var(--fg-12);
border-radius: 8px;
font-family: var(--display);
font-size: 14px;
font-weight: 500;
text-align: right;
outline: none;
-moz-appearance: textfield;
transition: border-color 150ms var(--ease-std), box-shadow 150ms var(--ease-std);
}
.discipline__add-input::-webkit-outer-spin-button,
.discipline__add-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.discipline__add-select:focus,
.discipline__add-input:focus {
border-color: var(--acc);
box-shadow: 0 0 0 2px var(--acc-20);
}
.discipline__add-button {
height: 40px;
padding: 0 16px;
background: var(--acc-15);
color: var(--acc);
border: 0;
border-radius: 8px;
font-family: var(--display);
font-size: 14px;
line-height: 20px;
font-weight: 500;
letter-spacing: -0.005em;
cursor: pointer;
display: inline-flex; align-items: center; gap: 6px;
transition: background 150ms var(--ease-std), transform 100ms var(--ease-std);
}
.discipline__add-button:hover { background: var(--acc-22); }
.discipline__add-button:active { transform: scale(0.97); }
.discipline__add-button:focus-visible { outline: 2px solid var(--acc-60); outline-offset: 2px; }
.discipline__add-button:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.discipline__add-button svg { width: 14px; height: 14px; }
/* === Self-lockout ====================================================== */
.discipline__lockouts {
animation: discipline-fade-up 300ms var(--ease-std) 250ms both;
}
.discipline__lockouts-label {
font-family: var(--display);
font-size: 11px;
line-height: 16px;
font-weight: 500;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--fg-55);
margin: 0 0 20px;
}
.discipline__lockouts-row {
display: flex; gap: 12px; flex-wrap: wrap;
}
.discipline__lockout-btn {
height: 36px;
padding: 0 16px;
background: var(--fg-04);
border: 1px solid var(--fg-08);
border-radius: 8px;
color: var(--fg-80);
font-family: var(--display);
font-size: 14px;
line-height: 20px;
font-weight: 500;
cursor: pointer;
display: inline-flex; align-items: center; gap: 8px;
transition: background 150ms var(--ease-std), border-color 150ms var(--ease-std), transform 100ms var(--ease-std);
}
.discipline__lockout-btn:hover {
background: var(--fg-08);
border-color: var(--fg-60);
}
.discipline__lockout-btn:active { transform: scale(0.97); }
.discipline__lockout-btn:focus-visible { outline: 2px solid var(--acc-60); outline-offset: 2px; }
.discipline__lockout-btn svg { width: 12px; height: 12px; opacity: 0.6; }
/* === Apple-style alert (replaces window.confirm) ======================= */
.discipline__alert-root {
position: fixed; inset: 0;
z-index: 1100;
display: flex; align-items: center; justify-content: center;
animation: discipline-alert-backdrop 200ms var(--ease-std);
}
.discipline__alert-backdrop {
position: absolute; inset: 0;
background: rgba(0, 0, 0, 0.4);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
@keyframes discipline-alert-backdrop {
from { opacity: 0; }
to { opacity: 1; }
}
.discipline__alert {
position: relative;
width: min(420px, calc(100vw - 48px));
background: var(--bg-0);
border-radius: 14px;
box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.18), 0 0 0 1px rgba(0, 0, 0, 0.04);
padding: 24px;
animation: discipline-alert-enter 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes discipline-alert-enter {
from { opacity: 0; transform: scale(0.96); }
to { opacity: 1; transform: scale(1); }
}
.discipline__alert-title {
font-family: var(--display);
font-size: 17px;
line-height: 22px;
font-weight: 600;
color: var(--fg);
margin: 0 0 8px;
letter-spacing: -0.005em;
}
.discipline__alert-body {
font-family: var(--display);
font-size: 14px;
line-height: 20px;
color: var(--fg-65);
margin: 0 0 24px;
}
.discipline__alert-actions {
display: flex; gap: 8px; justify-content: flex-end;
}
.discipline__alert-btn {
height: 36px;
padding: 0 16px;
border: 0;
border-radius: 8px;
font-family: var(--display);
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: background 150ms var(--ease-std), transform 100ms var(--ease-std);
}
.discipline__alert-btn:active { transform: scale(0.97); }
.discipline__alert-btn--cancel {
background: var(--fg-06);
color: var(--fg);
}
.discipline__alert-btn--cancel:hover { background: var(--fg-10); }
.discipline__alert-btn--destructive {
background: var(--destructive);
color: #fff;
}
.discipline__alert-btn--destructive:hover {
background: color-mix(in srgb, var(--destructive) 92%, black);
}
.discipline__alert-btn:focus-visible { outline: 2px solid var(--acc-60); outline-offset: 2px; }
/* === Undo toast ======================================================== */
.discipline__toast {
position: fixed;
bottom: 32px; left: 50%;
transform: translateX(-50%);
z-index: 1050;
display: flex; align-items: center; gap: 16px;
padding: 12px 16px;
background: var(--fg);
color: var(--bg-0);
border-radius: 10px;
box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.32);
font-family: var(--display);
font-size: 14px;
font-weight: 500;
animation: discipline-toast-enter 250ms var(--ease-std);
}
.discipline__toast.is-leaving { animation: discipline-toast-exit 200ms var(--ease-std) forwards; }
@keyframes discipline-toast-enter {
from { opacity: 0; transform: translate(-50%, 8px); }
to { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes discipline-toast-exit {
to { opacity: 0; transform: translate(-50%, 8px); }
}
.discipline__toast-undo {
background: transparent;
border: 0;
color: var(--acc);
font-family: var(--display);
font-size: 14px;
font-weight: 600;
cursor: pointer;
padding: 0;
}
.discipline__toast-undo:hover { text-decoration: underline; }
.discipline__empty {
padding: 24px;
color: var(--text-2);
text-align: center;
font-size: 13px;
}
/* Recovery active */
.discipline__recovery-eyebrow {
color: var(--accent);
display: flex; align-items: center; gap: 8px;
margin-top: 24px;
}
.discipline__recovery-pip {
width: 6px; height: 6px; border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 10px var(--accent);
}
.discipline__recovery-rails {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-top: 32px;
}
.discipline__rail {
background: var(--bg-1);
border: 1px solid color-mix(in oklab, var(--accent) 25%, var(--line));
border-radius: 12px;
padding: 24px;
display: flex; flex-direction: column; gap: 8px;
}
.discipline__rail-value {
font-size: 24px;
color: var(--text-0);
letter-spacing: -0.025em;
font-weight: 600;
margin: 4px 0;
}
.discipline__rail-body {
font-size: 13px;
color: var(--text-2);
line-height: 1.55;
}
.discipline__recovery-actions {
margin-top: 32px;
display: flex; gap: 8px;
}
/* =========================================================================
* Legacy Risk Bar styles (no longer mounted in Spiderx app shell — kept
* so the trading-vol.html fallback still renders without errors)
* ========================================================================= */
.risk-bar {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1px;
background: var(--line);
border-bottom: 1px solid var(--line);
}
.risk-bar__cell {
background: var(--bg-1);
padding: var(--space-3) var(--space-4);
display: flex; flex-direction: column; gap: 2px;
position: relative;
overflow: hidden;
min-height: var(--risk-bar-h);
}
.risk-bar__cell-label {
font-family: var(--body);
font-size: var(--text-11);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-2);
font-weight: 500;
}
.risk-bar__cell-value {
font-family: var(--display);
font-size: var(--text-24);
font-weight: var(--weight-semibold);
letter-spacing: -0.02em;
color: var(--text-0);
font-variant-numeric: tabular-nums;
margin-top: 4px;
}
.risk-bar__cell-detail {
font-size: var(--text-12);
color: var(--text-1);
font-variant-numeric: tabular-nums;
margin-top: 2px;
}
.risk-bar__cell-bar {
position: absolute; bottom: 0; left: 0; height: 3px;
transition: width 300ms var(--ease), background-color 300ms var(--ease);
}
.risk-bar__cell.is-band-green .risk-bar__cell-bar { background: var(--profit); }
.risk-bar__cell.is-band-yellow .risk-bar__cell-bar { background: var(--warn); }
.risk-bar__cell.is-band-red .risk-bar__cell-bar { background: var(--breach); }
.risk-bar__cell.is-band-red .risk-bar__cell-value { color: #ff8a8a; }
.risk-bar__cell--drawdown { background: linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%); }
.risk-bar__cell--drawdown .risk-bar__cell-value { font-size: var(--text-32); }
.risk-bar__warning {
grid-column: 1 / -1;
background: var(--color-warning-bg);
color: var(--warn);
padding: var(--space-2) var(--space-4);
font-size: var(--text-12);
border-bottom: 1px solid var(--line);
}
/* =========================================================================
* Component primitives
* ========================================================================= */
.panel {
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: var(--space-5);
display: flex; flex-direction: column; gap: var(--space-4);
}
.panel--raised { background: var(--bg-2); box-shadow: var(--shadow-sm); }
.panel--compact { padding: var(--space-4); }
.section-header {
display: flex; align-items: baseline; justify-content: space-between;
gap: var(--space-3);
padding-bottom: var(--space-3);
border-bottom: 1px solid var(--line);
}
.section-header__title {
font-family: var(--display);
font-size: var(--text-16);
font-weight: var(--weight-semibold);
letter-spacing: -0.015em;
color: var(--text-0);
}
.section-header__subtitle {
font-family: var(--body);
font-size: var(--text-12);
color: var(--text-2);
margin-left: var(--space-3);
}
.section-header__actions { display: flex; gap: var(--space-2); align-items: center; }
/* KPI Card */
.kpi-card {
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: var(--radius-md);
padding: var(--space-5);
display: flex; flex-direction: column; gap: var(--space-2);
min-height: 96px;
position: relative;
transition: border-color var(--motion-fast) var(--ease);
}
.kpi-card:hover { border-color: var(--line-bright); }
.kpi-card__label {
font-family: var(--body);
font-size: var(--text-11);
color: var(--text-2);
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.kpi-card__value {
font-family: var(--display);
font-size: var(--text-32);
font-weight: var(--weight-semibold);
letter-spacing: -0.025em;
color: var(--text-0);
font-variant-numeric: tabular-nums;
line-height: var(--lh-tight);
}
.kpi-card__value--success { color: var(--profit); }
.kpi-card__value--danger { color: var(--loss); }
.kpi-card__value--warning { color: var(--warn); }
.kpi-card__delta {
display: flex; align-items: center; gap: var(--space-1);
font-size: var(--text-12);
color: var(--text-1);
font-variant-numeric: tabular-nums;
}
.kpi-card__delta--up { color: var(--profit); }
.kpi-card__delta--down { color: var(--loss); }
.kpi-card__viz { position: absolute; right: var(--space-4); top: var(--space-4); width: 56px; height: 56px; }
/* Status pill */
.pill {
display: inline-flex; align-items: center; gap: var(--space-1);
padding: 2px 8px;
border-radius: var(--radius-pill);
font-size: var(--text-11);
font-weight: 500;
font-variant-numeric: tabular-nums;
letter-spacing: 0.06em;
text-transform: uppercase;
white-space: nowrap;
}
.pill::before {
content: ''; display: inline-block; width: 5px; height: 5px;
border-radius: 50%; background: currentColor;
}
.pill--neutral { background: var(--color-neutral-bg); color: var(--text-1); }
.pill--success { background: var(--color-success-bg); color: var(--profit); }
.pill--warning { background: var(--color-warning-bg); color: var(--warn); }
.pill--danger { background: var(--color-danger-bg); color: var(--loss); }
.pill--info { background: var(--color-info-bg); color: var(--info); }
.pill--accent { background: var(--accent-soft); color: var(--accent); }
.pill--no-dot::before { display: none; }
/* Progress bar */
.progress { width: 100%; height: 4px; background: var(--bg-3); border-radius: var(--radius-pill); overflow: hidden; }
.progress__fill { height: 100%; transition: width 300ms var(--ease), background-color 300ms var(--ease); border-radius: inherit; }
.progress--green .progress__fill { background: var(--profit); }
.progress--yellow .progress__fill { background: var(--warn); }
.progress--red .progress__fill { background: var(--loss); }
/* Alert banner */
.alert {
display: flex; gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-md);
border: 1px solid transparent;
font-size: var(--text-13);
}
.alert__icon { flex: 0 0 16px; line-height: 1; }
.alert__body { flex: 1 1 auto; }
.alert__title { font-family: var(--display); font-weight: var(--weight-semibold); margin-bottom: 2px; letter-spacing: -0.01em; }
.alert--info { background: var(--color-info-bg); border-color: rgba(122, 178, 255, 0.25); color: var(--text-0); }
.alert--warning { background: var(--color-warning-bg); border-color: rgba(232, 183, 82, 0.25); color: var(--text-0); }
.alert--danger { background: var(--color-danger-bg); border-color: rgba(240, 106, 94, 0.25); color: var(--text-0); }
.alert--success { background: var(--color-success-bg); border-color: rgba(78, 216, 138, 0.25); color: var(--text-0); }
/* Empty state */
.empty {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: var(--space-2);
padding: var(--space-4);
text-align: center;
color: var(--text-2);
}
.empty__icon {
width: 48px; height: 48px;
border-radius: var(--radius-pill);
background: var(--bg-2);
display: grid; place-items: center;
color: var(--text-1);
}
.empty__title { color: var(--text-0); font-family: var(--display); font-weight: 500; font-size: var(--text-14); }
.empty__hint { color: var(--text-2); font-size: var(--text-12); max-width: 360px; line-height: var(--lh-base); }
/* Buttons */
.btn {
display: inline-flex; align-items: center; justify-content: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
border: 1px solid var(--line);
border-radius: var(--radius-md);
background: var(--bg-2);
color: var(--text-0);
font-family: var(--display);
font-size: var(--text-13);
font-weight: 500;
letter-spacing: -0.005em;
cursor: pointer;
transition: background-color 150ms var(--ease), border-color 150ms var(--ease), color 150ms var(--ease), transform 150ms var(--ease);
white-space: nowrap;
}
.btn:hover { background: var(--bg-3); border-color: var(--line-bright); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn--primary {
background: color-mix(in oklab, var(--accent) 25%, var(--bg-3));
border-color: color-mix(in oklab, var(--accent) 40%, var(--line-bright));
color: var(--text-0);
}
.btn--primary:hover { background: color-mix(in oklab, var(--accent) 35%, var(--bg-3)); border-color: var(--accent); }
.btn--danger { background: var(--color-danger-bg); border-color: rgba(240, 106, 94, 0.4); color: var(--loss); }
.btn--danger:hover { background: rgba(240, 106, 94, 0.18); border-color: var(--loss); }
.btn--ghost { background: transparent; border-color: transparent; color: var(--text-1); }
.btn--ghost:hover { background: var(--bg-2); color: var(--text-0); border-color: transparent; }
.btn--sm { padding: 4px var(--space-3); font-size: var(--text-12); }
.btn--icon { padding: var(--space-2); }
/* Form controls */
.input, .select {
background: var(--bg-1);
color: var(--text-0);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: var(--space-2) var(--space-3);
font-family: var(--body);
font-size: var(--text-13);
transition: border-color var(--motion-fast) var(--ease);
outline: none;
font-variant-numeric: tabular-nums;
}
.input:focus, .select:focus { border-color: var(--accent); }
.input::placeholder { color: var(--text-3); }
.toggle { position: relative; display: inline-flex; width: 32px; height: 18px; cursor: pointer; }
.toggle input { display: none; }
.toggle__track { position: absolute; inset: 0; background: var(--bg-3); border-radius: 9px; transition: background var(--motion-fast); }
.toggle__thumb { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: var(--text-0); border-radius: 50%; transition: transform var(--motion-base) var(--ease); }
.toggle input:checked + .toggle__track { background: color-mix(in oklab, var(--accent) 60%, var(--bg-3)); }
.toggle input:checked + .toggle__track + .toggle__thumb { transform: translateX(14px); }
/* Data table */
.table { width: 100%; border-collapse: collapse; font-size: var(--text-13); }
.table thead { background: transparent; }
.table th {
text-align: left;
font-family: var(--body);
font-weight: 500;
color: var(--text-2);
font-size: var(--text-11);
letter-spacing: 0.14em;
text-transform: uppercase;
padding: var(--space-2) var(--space-3);
border-bottom: 1px solid var(--line);
}
.table th[data-align="right"] { text-align: right; }
.table td {
padding: var(--space-3);
border-bottom: 1px solid var(--line);
color: var(--text-0);
vertical-align: middle;
}
.table td[data-align="right"] { text-align: right; font-variant-numeric: tabular-nums; }
.table tbody tr { transition: background var(--motion-fast); }
.table tbody tr:hover { background: var(--bg-2); }
.table .num { font-variant-numeric: tabular-nums; }
.table .num--success { color: var(--profit); }
.table .num--danger { color: var(--loss); }
/* Layout helpers */
.grid { display: grid; gap: var(--space-4); }
.grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.stack--sm { gap: var(--space-2); }
.stack--lg { gap: var(--space-6); }
.row { display: flex; gap: var(--space-3); align-items: center; }
.row--between { justify-content: space-between; }
/* =========================================================================
* Login overlay
* ========================================================================= */
#login-overlay {
position: fixed; inset: 0;
background: var(--bg-0);
z-index: 9999;
display: grid; place-items: center;
}
/* The picker sits ABOVE the ambient firm web (a positioned, absolute canvas
sibling) — without an explicit stacking context the positioned canvas would
paint over the card. */
#login-mount { position: relative; z-index: 1; }
/* Firm-tinted ambient web behind the credentials card. Faint + secondary, never
competes with the inputs; transparent so the overlay background shows through. */
.brokerpicker__web {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 0;
pointer-events: none;
}
.login-card {
background: var(--bg-2);
padding: var(--space-7);
border-radius: var(--radius-lg);
width: 380px;
border: 1px solid var(--line);
box-shadow: var(--shadow-lg);
}
.login-card h1 {
margin: 0 0 var(--space-1);
font-family: var(--display);
font-size: var(--text-24);
font-weight: var(--weight-semibold);
letter-spacing: -0.025em;
color: var(--text-0);
}
.login-card .sub { font-size: var(--text-13); color: var(--text-2); margin: 0 0 var(--space-5); }
.login-card label {
display: block;
font-family: var(--body);
font-size: var(--text-11);
color: var(--text-2);
margin: var(--space-3) 0 var(--space-1);
text-transform: uppercase;
letter-spacing: 0.14em;
font-weight: 500;
}
.login-card input {
width: 100%; padding: var(--space-3); box-sizing: border-box;
background: var(--bg-1);
color: var(--text-0);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
font-size: var(--text-14);
font-family: var(--body);
outline: none;
transition: border-color var(--motion-fast) var(--ease);
}
.login-card input:focus { border-color: var(--accent); }
.login-card button {
width: 100%;
margin-top: var(--space-5);
padding: var(--space-3);
font-family: var(--display);
font-size: var(--text-14);
font-weight: 500;
letter-spacing: -0.005em;
background: color-mix(in oklab, var(--accent) 25%, var(--bg-3));
color: var(--text-0);
border: 1px solid color-mix(in oklab, var(--accent) 40%, var(--line-bright));
border-radius: var(--radius-sm);
cursor: pointer;
transition: background var(--motion-fast) var(--ease);
}
.login-card button:hover { background: color-mix(in oklab, var(--accent) 35%, var(--bg-3)); }
.login-card button:disabled { background: var(--bg-3); color: var(--text-2); cursor: not-allowed; }
.login-card .err { color: var(--loss); font-size: var(--text-12); margin-top: var(--space-3); min-height: 14px; }
/* =========================================================================
* Lockout — full-viewport portal. See design/spiderx/lockout.html for
* the full motion / copy / agency contract. Built per spec verbatim.
* ========================================================================= */
.lockout {
position: fixed; inset: 0;
z-index: 10000;
background: var(--bg-0);
overflow: hidden;
isolation: isolate;
}
.lockout__chart {
position: absolute; inset: 0;
z-index: 1;
opacity: 0;
pointer-events: none;
transition: opacity 200ms var(--ease-deep);
}
.lockout.is-entered .lockout__chart { opacity: 0.08; }
.lockout__chart svg { width: 100%; height: 100%; display: block; }
.lockout__vignette {
position: absolute; inset: 0;
z-index: 5;
pointer-events: none;
background: radial-gradient(ellipse 80% 70% at center, transparent 0%, rgba(10,11,13,0.55) 60%, rgba(10,11,13,0.85) 100%);
opacity: 0;
transition: opacity 300ms var(--ease-deep);
transition-delay: 200ms;
}
.lockout.is-entered .lockout__vignette { opacity: 1; }
.lockout__body {
position: absolute; inset: 0;
z-index: 10;
display: flex; flex-direction: column; align-items: center; justify-content: center;
padding: 0 var(--space-7);
text-align: center;
}
.lockout__imperative {
font-family: var(--display);
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
font-size: var(--text-11);
color: var(--text-2);
margin-bottom: var(--space-6);
opacity: 0;
transition: opacity 300ms var(--ease-deep);
transition-delay: 500ms;
}
.lockout.is-entered .lockout__imperative { opacity: 1; }
.lockout__timer {
font-family: var(--display);
font-weight: var(--weight-semibold);
letter-spacing: -0.05em;
font-size: var(--text-128);
line-height: 0.95;
color: var(--text-1); /* never accent (celebratory) — never loss (punitive) */
font-variant-numeric: tabular-nums;
font-feature-settings: 'tnum' 1, 'ss01' 1;
margin-bottom: var(--space-5);
text-shadow: 0 0 60px rgba(123, 224, 176, 0.06);
opacity: 0;
transition: opacity 300ms var(--ease-deep);
transition-delay: 500ms;
}
.lockout.is-entered .lockout__timer { opacity: 1; }
@media (max-width: 1100px) {
.lockout__timer { font-size: 80px; }
}
.lockout__meta {
font-family: var(--display);
font-size: var(--text-18);
font-weight: 500;
letter-spacing: -0.015em;
color: var(--text-0);
margin-bottom: 6px;
opacity: 0;
transition: opacity 250ms var(--ease-deep);
transition-delay: 800ms;
}
.lockout__rule {
font-family: var(--mono); font-variant-numeric:tabular-nums;
font-size: 11.5px;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-2);
margin-bottom: 4px;
opacity: 0;
transition: opacity 250ms var(--ease-deep);
transition-delay: 950ms;
}
.lockout__contract {
font-family: var(--display);
font-style: italic;
font-weight: 500;
font-size: var(--text-13);
color: var(--text-1);
margin-bottom: var(--space-7);
max-width: 480px;
opacity: 0;
transition: opacity 250ms var(--ease-deep);
transition-delay: 1050ms;
}
.lockout.is-entered .lockout__meta,
.lockout.is-entered .lockout__rule,
.lockout.is-entered .lockout__contract { opacity: 1; }
.lockout__actions {
display: grid;
grid-template-columns: repeat(3, minmax(180px, 220px));
gap: 14px;
max-width: 720px;
opacity: 0;
transition: opacity 200ms var(--ease-deep);
transition-delay: 1100ms;
}
.lockout.is-entered .lockout__actions { opacity: 1; }
@media (max-width: 1100px) { .lockout__actions { grid-template-columns: 1fr; } }
.lockout__action {
background: rgba(22, 26, 31, 0.7);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid var(--line);
border-radius: var(--radius-md);
padding: 16px 18px;
text-align: left;
cursor: pointer;
transition: border-color 200ms var(--ease-deep), background 200ms var(--ease-deep);
font-family: inherit;
}
.lockout__action:hover {
border-color: color-mix(in oklab, var(--accent) 30%, var(--line));
background: rgba(29, 34, 40, 0.85);
}
.lockout__action-label {
font-family: var(--mono); font-variant-numeric:tabular-nums;
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-2);
margin-bottom: 6px;
display: flex; align-items: center; gap: 7px;
}
.lockout__action-label .pip { width: 4px; height: 4px; border-radius: 50%; background: var(--text-2); }
.lockout__action-head {
font-family: var(--display);
font-weight: 500;
letter-spacing: -0.01em;
font-size: var(--text-14);
color: var(--text-0);
margin-bottom: 4px;
}
.lockout__action-body {
font-size: 11.5px;
color: var(--text-2);
line-height: 1.45;
}
/* Bottom progress bar — server-pushed elapsed/total. No transition on width. */
.lockout__progress {
position: absolute; left: 0; right: 0; bottom: 0;
height: 1px;
z-index: 20;
background: rgba(35, 40, 48, 0.6);
}
.lockout__progress-fill {
position: absolute; left: 0; top: 0; bottom: 0;
background: linear-gradient(to right, transparent, rgba(123, 224, 176, 0.5));
box-shadow: 0 0 12px rgba(123, 224, 176, 0.4);
}
/* Departure: reverse-stagger fade. Class added 1200ms before unmount. */
.lockout.is-departing .lockout__chart { opacity: 0.0; transition-delay: 600ms; }
.lockout.is-departing .lockout__vignette { opacity: 0; transition-delay: 600ms; }
.lockout.is-departing .lockout__imperative,
.lockout.is-departing .lockout__meta,
.lockout.is-departing .lockout__rule,
.lockout.is-departing .lockout__contract { opacity: 0; transition-delay: 0ms; transition-duration: 300ms; }
.lockout.is-departing .lockout__timer { opacity: 0; transition-delay: 300ms; transition-duration: 300ms; }
.lockout.is-departing .lockout__actions { opacity: 0; transition-delay: 0ms; transition-duration: 200ms; }
/* Locked toast — surfaces if the trader clicks any disabled element. */
.lockout-toast {
position: fixed;
bottom: var(--space-5);
left: 50%;
transform: translateX(-50%);
background: var(--bg-3);
border: 1px solid var(--line-bright);
border-radius: var(--radius-md);
padding: var(--space-2) var(--space-4);
font-family: var(--mono); font-variant-numeric:tabular-nums;
font-size: var(--text-11);
letter-spacing: 0.06em;
color: var(--text-1);
z-index: 10001;
opacity: 0;
pointer-events: none;
transition: opacity 200ms var(--ease);
}
.lockout-toast.is-visible { opacity: 1; }
/* Departure toast — bottom-left, 4s, fades. */
.depart-toast {
position: fixed;
bottom: var(--space-5);
left: var(--space-5);
background: var(--bg-3);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: 10px 14px;
font-family: var(--mono); font-variant-numeric:tabular-nums;
font-size: var(--text-11);
letter-spacing: 0.06em;
color: var(--text-1);
z-index: 9998;
opacity: 0;
transition: opacity 300ms var(--ease);
}
.depart-toast.is-visible { opacity: 1; }
/* Journal panel — opened from Action 2. Inline with the lockout body. */
.journal-panel {
position: fixed;
inset: 0;
z-index: 10002;
display: grid; place-items: center;
padding: var(--space-6);
background: rgba(10, 11, 13, 0.6);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
opacity: 0;
transition: opacity 200ms var(--ease);
}
.journal-panel.is-visible { opacity: 1; }
.journal-panel__card {
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: var(--space-7);
width: 100%; max-width: 600px;
box-shadow: var(--shadow-lg);
}
.journal-panel__prompt {
font-family: var(--display);
font-weight: var(--weight-semibold);
letter-spacing: -0.025em;
font-size: var(--text-24);
color: var(--text-0);
margin: 0 0 var(--space-2);
}
.journal-panel__hint {
font-size: var(--text-13);
color: var(--text-2);
margin-bottom: var(--space-5);
}
.journal-panel__textarea {
width: 100%;
min-height: 160px;
max-height: 320px;
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
padding: var(--space-4);
color: var(--text-0);
font-family: var(--body);
font-size: var(--text-14);
line-height: var(--lh-base);
resize: vertical;
outline: none;
transition: border-color var(--motion-fast) var(--ease);
}
.journal-panel__textarea:focus { border-color: var(--accent); }
.journal-panel__footer {
display: flex; justify-content: space-between; align-items: center;
margin-top: var(--space-4);
gap: var(--space-3);
}
.journal-panel__count {
font-family: var(--mono); font-variant-numeric:tabular-nums;
font-size: var(--text-11);
letter-spacing: 0.06em;
color: var(--text-2);
}
.journal-panel__count.is-over { color: var(--loss); }
/* === Indicator Library modal — Spiderx p.16 ============================
* Full-viewport modal: backdrop scrim + 3-column dialog (rail / grid /
* detail). Cards render their own SVG sparkline thumbs; tier badges
* indicate CORE vs PRO; "On chart" badges layered on the thumb when
* the underlying study is currently mounted. Locked PRO cards still
* show but the Add button surfaces the entitlement.
*/
/* === Indicator Library — Apple-tier polish pass ========================
* Scoped --fg / --acc alpha tokens make the spec percentages readable
* inline (color-mix kept out of every rule). Standard ease + spring
* curves are scoped to the modal so motion is consistent end-to-end.
* Numerics use tabular-nums globally inside the modal. */
.indlib {
--fg: var(--text-0);
--fg-02: color-mix(in srgb, var(--text-0) 2%, transparent);
--fg-04: color-mix(in srgb, var(--text-0) 4%, transparent);
--fg-06: color-mix(in srgb, var(--text-0) 6%, transparent);
--fg-08: color-mix(in srgb, var(--text-0) 8%, transparent);
--fg-20: color-mix(in srgb, var(--text-0) 20%, transparent);
--fg-50: color-mix(in srgb, var(--text-0) 50%, transparent);
--fg-60: color-mix(in srgb, var(--text-0) 60%, transparent);
--fg-75: color-mix(in srgb, var(--text-0) 75%, transparent);
--acc: var(--accent);
--acc-15: color-mix(in srgb, var(--accent) 15%, transparent);
--acc-20: color-mix(in srgb, var(--accent) 20%, transparent);
--acc-60: color-mix(in srgb, var(--accent) 60%, transparent);
--ease-std: cubic-bezier(0.32, 0.72, 0, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}
.indlib, .indlib * {
font-feature-settings: 'tnum' 1, 'lnum' 1;
font-variant-numeric: tabular-nums lining-nums;
}
.indlib__root {
position: fixed; inset: 0;
z-index: 1000;
display: flex; align-items: center; justify-content: center;
}
.indlib__backdrop {
position: absolute; inset: 0;
background: rgba(0, 0, 0, 0.40);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
animation: indlib-backdrop-enter 200ms cubic-bezier(0.32, 0.72, 0, 1);
}
@keyframes indlib-backdrop-enter {
from { opacity: 0; }
to { opacity: 1; }
}
.indlib {
position: relative;
width: min(1100px, calc(100vw - 64px));
/* Definite height (not just max-height) so the body's flex:1 has a
container to grow into. 80vh ceiling per spec, 640px floor so the
modal still feels substantial on shorter viewports. */
height: min(720px, calc(100vh - 64px));
max-height: 80vh;
min-height: 480px;
background: var(--bg-0);
border-radius: 16px;
box-shadow:
0 24px 48px -12px rgba(0, 0, 0, 0.18),
0 0 0 1px rgba(0, 0, 0, 0.04);
display: flex; flex-direction: column;
overflow: hidden;
animation: indlib-enter 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
transform-origin: center;
}
@keyframes indlib-enter {
from { transform: scale(0.96); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
/* === Header ===
* Title 24/32, subtitle 11/16. Search bar fills the middle, close button
* pinned 24px from corners. Bottom hairline separates from body. */
.indlib__header {
display: grid;
grid-template-columns: 1fr minmax(280px, 440px) auto;
align-items: center;
gap: 24px;
padding: 24px 24px 16px 32px;
border-bottom: 1px solid var(--fg-06);
}
.indlib__title-block { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.indlib__title {
font-family: var(--display);
font-size: 24px;
line-height: 32px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--fg);
margin: 0;
}
.indlib__count {
font-family: var(--display);
font-size: 11px;
line-height: 16px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fg-60);
}
/* === Search bar === */
.indlib__search {
position: relative;
display: flex; align-items: center;
height: 36px;
padding: 0 12px;
background: var(--fg-04);
border: 1px solid transparent;
border-radius: 8px;
color: var(--fg);
transition: box-shadow 200ms cubic-bezier(0.32, 0.72, 0, 1);
}
.indlib__search:focus-within {
box-shadow: 0 0 0 2px var(--acc-20);
}
.indlib__search-icon {
display: inline-flex;
width: 16px; height: 16px;
color: var(--fg-50);
margin-right: 8px;
}
.indlib__search-icon svg { width: 16px; height: 16px; }
.indlib__search-input {
flex: 1;
border: none; background: transparent;
outline: none;
color: var(--fg);
font-family: var(--display);
font-size: 14px;
font-weight: 400;
letter-spacing: -0.005em;
min-width: 0;
}
.indlib__search-input::placeholder { color: var(--fg-50); }
.indlib__search-kbd {
display: inline-flex; align-items: center;
height: 20px;
padding: 0 6px;
margin-left: 8px;
font-family: var(--display);
font-size: 11px;
font-weight: 500;
color: var(--fg-60);
background: var(--fg-06);
border-radius: 4px;
}
/* === Close button === */
.indlib__close {
width: 32px; height: 32px;
background: transparent;
border: 0;
border-radius: 8px;
color: var(--fg-60);
font-size: 18px;
line-height: 1;
cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: background 200ms cubic-bezier(0.32, 0.72, 0, 1), color 200ms cubic-bezier(0.32, 0.72, 0, 1);
}
.indlib__close:hover { background: var(--fg-06); color: var(--fg); }
.indlib__close:focus-visible { outline: 2px solid var(--acc-60); outline-offset: 2px; }
/* === Body grid: 200 / 1fr / 320 === */
.indlib__body {
flex: 1 1 0;
display: grid;
grid-template-columns: 200px 1fr 320px;
min-height: 0;
}
/* === Sidebar ===
* 32px gap between Categories / Tier / Sort sections. Items 8px gap,
* 8px×12px padding. Active dot is mint, inactive at 20% fg. Counts
* right-aligned and tabular-nums for column alignment. */
.indlib__rail {
padding: 24px 16px;
display: flex; flex-direction: column;
gap: 32px;
overflow-y: auto;
border-right: 1px solid var(--fg-06);
}
.indlib__rail-section { display: flex; flex-direction: column; gap: 8px; }
.indlib__rail-eyebrow {
font-family: var(--display);
font-size: 11px;
line-height: 16px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fg-60);
}
.indlib__cat-list {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column;
gap: 2px;
}
.indlib__cat {
display: grid;
grid-template-columns: 6px 1fr 32px; /* dot · label · count column (right-aligned) */
align-items: center;
gap: 12px;
padding: 8px 12px;
border-radius: 6px;
background: transparent;
border: 0;
font-family: var(--display);
font-size: 14px;
line-height: 20px;
font-weight: 500;
color: var(--fg);
cursor: pointer;
text-align: left;
transition: background 150ms cubic-bezier(0.32, 0.72, 0, 1);
}
.indlib__cat:hover { background: var(--fg-02); }
.indlib__cat.is-active { background: var(--fg-04); }
.indlib__cat:focus-visible { outline: 2px solid var(--acc-60); outline-offset: 2px; }
.indlib__cat-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--fg-20);
transition: background 150ms cubic-bezier(0.32, 0.72, 0, 1);
}
.indlib__cat.is-active .indlib__cat-dot { background: var(--acc); }
.indlib__cat-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.indlib__cat-count {
font-family: var(--display);
font-size: 13px;
font-weight: 400;
color: var(--fg-60);
text-align: right;
}
/* === Tier filter pills (segmented control) ===
* 32px tall, 8px container radius, 6px active-pill radius, 4px container
* padding so the active pill sits inside cleanly. */
.indlib__pillgroup {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
height: 32px;
padding: 4px;
background: var(--fg-04);
border-radius: 8px;
}
.indlib__pill {
display: inline-flex; align-items: center; justify-content: center;
background: transparent;
border: 0;
color: var(--fg-60);
font-family: var(--display);
font-size: 12px;
line-height: 16px;
font-weight: 500;
border-radius: 6px;
cursor: pointer;
transition: background 250ms cubic-bezier(0.32, 0.72, 0, 1), color 250ms cubic-bezier(0.32, 0.72, 0, 1);
}
.indlib__pill:hover { color: var(--fg); }
.indlib__pill:focus-visible { outline: 2px solid var(--acc-60); outline-offset: 1px; }
.indlib__pill.is-active {
background: var(--bg-0);
color: var(--fg);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), 0 0 0 1px var(--fg-06);
}
/* === Sort buttons ===
* Full-width stack. Active uses 15% accent bg + full-strength accent
* text per spec — distinct from segmented-pill treatment. */
.indlib__sort {
display: flex; flex-direction: column;
gap: 4px;
}
.indlib__pill--block {
width: 100%;
height: 36px;
padding: 0 12px;
border-radius: 8px;
background: transparent;
border: 1px solid var(--fg-06);
color: var(--fg-60);
text-align: left;
font-family: var(--display);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: background 150ms cubic-bezier(0.32, 0.72, 0, 1), color 150ms cubic-bezier(0.32, 0.72, 0, 1);
}
.indlib__pill--block:hover { background: var(--fg-02); color: var(--fg); }
.indlib__pill--block.is-active {
background: var(--acc-15);
border-color: transparent;
color: var(--acc);
font-weight: 600;
}
/* === Card grid ===
* 16px gap, 16px card padding. Rows stretch so all cards in a row
* share height. Footer count strip aligns with the grid's left padding
* (matching the cards' left edge, not the modal's). */
.indlib__main {
display: flex; flex-direction: column;
min-height: 0;
}
.indlib__grid {
flex: 1 1 0;
overflow-y: auto;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
grid-auto-rows: 1fr;
gap: 16px;
padding: 24px;
align-content: start;
}
.indlib__foot-stat {
border-top: 1px solid var(--fg-06);
padding: 12px 24px; /* aligns with grid left padding */
font-family: var(--display);
font-size: 12px;
color: var(--fg-60);
}
/* === Card === */
.indlib__card {
position: relative;
display: flex; flex-direction: column;
padding: 16px;
background: var(--bg-0);
border: 1px solid var(--fg-06);
border-radius: 12px;
cursor: pointer;
text-align: left;
font: inherit;
color: inherit;
transition: background 200ms cubic-bezier(0.32, 0.72, 0, 1), border-color 200ms cubic-bezier(0.32, 0.72, 0, 1);
}
.indlib__card:hover { background: var(--fg-02); }
.indlib__card:focus-visible {
outline: 2px solid var(--acc-60);
outline-offset: 2px;
}
/* Selected: 1px accent border (border-color swap, no width change → no
layout shift) + 2px outer ring at 4px offset (outline). */
.indlib__card.is-selected {
border-color: var(--acc);
outline: 2px solid var(--acc-20);
outline-offset: 4px;
}
.indlib__card.is-locked { opacity: 0.78; }
/* Tier badge — pinned 12px from top + right, identical padding regardless
of CORE / PRO content so widths don't drift. */
.indlib__card-tier {
position: absolute;
top: 12px; right: 12px;
font-family: var(--display);
font-size: 10px;
line-height: 14px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fg-60);
background: transparent;
border: 1px solid var(--fg-08);
border-radius: 4px;
padding: 4px 6px;
z-index: 2;
}
.indlib__card.is-locked .indlib__card-tier {
color: var(--acc);
border-color: var(--acc-20);
}
/* Preview thumbnail — 88px tall, 8px radius, 2% fg bg. */
.indlib__card-thumb {
position: relative;
height: 88px;
border-radius: 8px;
overflow: hidden;
background: var(--fg-02);
margin-bottom: 12px; /* preview-to-title gap */
}
.indlib__card-thumb svg { width: 100%; height: 100%; display: block; }
.indlib__card-on-chart {
position: absolute;
bottom: 6px; left: 8px;
font-family: var(--display);
font-size: 10px;
line-height: 14px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--acc);
background: var(--fg-08);
padding: 2px 6px;
border-radius: 4px;
}
.indlib__card-meta {
display: flex; flex-direction: column;
flex: 1 1 0; /* fills card height so all cards in a row match */
}
.indlib__card-name {
font-family: var(--display);
font-size: 15px;
line-height: 20px;
font-weight: 600;
letter-spacing: -0.005em;
color: var(--fg);
margin-bottom: 6px; /* title-to-category gap */
}
.indlib__card-eyebrow {
font-family: var(--display);
font-size: 10px;
line-height: 14px;
font-weight: 500;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--fg-60);
margin-bottom: 8px; /* category-to-description gap */
}
.indlib__card-desc {
font-family: var(--display);
font-size: 13px;
line-height: 18px;
font-weight: 400;
color: var(--fg-75);
}
/* === Detail pane (320px fixed) === */
.indlib__detail {
border-left: 1px solid var(--fg-06);
display: flex; flex-direction: column;
min-height: 0;
padding: 24px;
}
.indlib__detail-hero {
height: 200px;
border-radius: 8px;
background: var(--fg-02);
overflow: hidden;
flex: 0 0 auto;
}
.indlib__detail-hero svg { width: 100%; height: 100%; display: block; }
.indlib__detail-tier { display: none; }
.indlib__detail-body {
flex: 1 1 0;
overflow-y: auto;
display: flex; flex-direction: column;
gap: 12px;
padding: 24px 0 0; /* preview-to-content gap */
}
.indlib__detail-eyebrow {
font-family: var(--display);
font-size: 10px;
line-height: 14px;
font-weight: 500;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--fg-60);
}
.indlib__detail-name {
font-family: var(--display);
font-size: 22px;
line-height: 28px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--fg);
margin: 0;
}
.indlib__detail-desc {
font-family: var(--display);
font-size: 14px;
line-height: 22px;
font-weight: 400;
color: var(--fg-75);
margin: 0;
}
.indlib__detail-meta {
display: flex; flex-direction: column;
gap: 0;
margin: 12px 0 0;
padding: 0;
}
.indlib__detail-meta-row {
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 12px;
padding: 12px 0;
border-bottom: 1px solid var(--fg-06);
}
.indlib__detail-meta-row:last-child { border-bottom: 0; }
.indlib__detail-meta-row dt {
font-family: var(--display);
font-size: 11px;
line-height: 16px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fg-60);
margin: 0;
}
.indlib__detail-meta-row dd {
font-family: var(--display);
font-size: 13px;
line-height: 16px;
font-weight: 500;
color: var(--fg);
margin: 0;
text-align: right;
}
.indlib__detail-foot {
flex: 0 0 auto;
padding: 24px 0 0;
display: grid;
grid-template-columns: 1fr;
gap: 8px;
}
/* Add / Remove / Locked button.
Default = primary (active state, user has access): full-fg bg, white text.
On-chart = secondary fill, foreground text.
Locked = 8% fg bg + full fg text per spec — communicates a requirement,
NOT a primary CTA. Becomes the accent green primary in PRO. */
.indlib__add {
height: 44px;
background: var(--fg);
color: var(--bg-0);
border: 0;
border-radius: 10px;
padding: 0 16px;
font-family: var(--display);
font-size: 14px;
line-height: 20px;
font-weight: 500;
letter-spacing: -0.005em;
cursor: pointer;
transition: background 200ms cubic-bezier(0.32, 0.72, 0, 1), opacity 200ms cubic-bezier(0.32, 0.72, 0, 1);
}
.indlib__add:hover { opacity: 0.9; }
.indlib__add:disabled { cursor: not-allowed; opacity: 0.55; }
.indlib__add:focus-visible { outline: 2px solid var(--acc-60); outline-offset: 2px; }
.indlib__add.is-active-on-chart {
background: var(--fg-06);
color: var(--fg);
}
.indlib__add.is-locked {
background: var(--fg-08);
color: var(--fg);
}
@media (max-width: 1100px) {
.indlib { width: calc(100vw - 32px); max-height: calc(100vh - 32px); }
.indlib__body { grid-template-columns: 180px 1fr 280px; }
}
/* =========================================================================
* Broker picker — the multi-broker login flow.
*
* Two visual states share the same full-viewport overlay (#login-overlay):
* .brokerpicker[data-step="pick"] — grid of broker cards
* .brokerpicker[data-step="creds"] — dynamic credentials form
*
* Transition between steps is a short opacity+translate so it feels like
* a state change, not a page reload. Hidden via .is-hidden (not display:none)
* so the motion can play before we tear the panel out of the layout.
* ========================================================================= */
.brokerpicker {
width: 100%;
max-width: 720px;
padding: var(--space-7) var(--space-6);
box-sizing: border-box;
margin: 0 auto;
}
.brokerpicker__header {
display: flex;
flex-direction: column;
gap: var(--space-2);
margin-bottom: var(--space-6);
}
.brokerpicker__eyebrow {
font-family: var(--body);
font-size: var(--type-micro-size);
line-height: var(--type-micro-lh);
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-2);
}
.brokerpicker__title {
margin: 0;
font-family: var(--display);
font-size: var(--type-page-size);
line-height: var(--type-page-lh);
font-weight: var(--weight-semibold);
letter-spacing: -0.025em;
color: var(--text-0);
text-wrap: balance;
}
.brokerpicker__sub {
margin: 0;
font-size: var(--text-15);
line-height: var(--lh-base);
color: var(--text-1);
text-wrap: pretty;
max-width: 540px;
}
/* Step panes share the same overlay slot — opacity + translate transition. */
.brokerpicker__pane {
transition:
opacity var(--motion-base) var(--ease),
transform var(--motion-base) var(--ease);
}
.brokerpicker__pane.is-hidden {
display: none;
opacity: 0;
transform: translateY(6px);
pointer-events: none;
}
.brokerpicker__pane.is-entering {
opacity: 0;
transform: translateY(6px);
}
.brokerpicker__pane.is-entered {
opacity: 1;
transform: translateY(0);
}
/* === Step 1 — broker cards ============================================ */
.brokerpicker__grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-4);
}
.brokerpicker__loading {
color: var(--text-2);
font-size: var(--text-14);
padding: var(--space-6) 0;
text-align: center;
}
.brokerpicker__card {
display: grid;
grid-template-columns: 56px 1fr;
grid-template-rows: auto auto;
column-gap: var(--space-4);
row-gap: var(--space-1);
padding: var(--space-5);
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: var(--radius-md);
cursor: pointer;
text-align: left;
font-family: inherit;
color: inherit;
transition:
border-color var(--motion-fast) var(--ease),
transform var(--motion-fast) var(--ease),
box-shadow var(--motion-fast) var(--ease),
background var(--motion-fast) var(--ease);
}
.brokerpicker__card:hover {
border-color: var(--line-bright);
transform: translateY(-1px);
box-shadow: 0 6px 20px -10px rgba(0, 0, 0, 0.18);
background: var(--bg-3);
}
.brokerpicker__card:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.brokerpicker__card-logo {
grid-row: 1 / span 2;
width: 48px;
height: 48px;
flex: 0 0 48px;
border-radius: var(--radius-sm);
display: block;
align-self: start;
}
.brokerpicker__card-name {
grid-column: 2;
font-family: var(--display);
font-size: var(--text-18);
font-weight: var(--weight-semibold);
letter-spacing: -0.015em;
color: var(--text-0);
line-height: 1.2;
align-self: end;
}
.brokerpicker__card-blurb {
grid-column: 2;
font-size: var(--text-13);
color: var(--text-2);
line-height: 1.45;
margin-top: 2px;
}
.brokerpicker__card-cta {
grid-column: 2;
margin-top: var(--space-3);
font-family: var(--display);
font-size: var(--text-13);
font-weight: var(--weight-medium);
color: var(--accent-strong);
letter-spacing: -0.005em;
display: inline-flex;
align-items: center;
gap: 6px;
transition: gap var(--motion-fast) var(--ease);
}
.brokerpicker__card:hover .brokerpicker__card-cta { gap: 10px; }
.brokerpicker__card-cta::after {
content: '→';
font-size: 14px;
line-height: 1;
}
/* === Step 2 — credentials form ======================================== */
.brokerpicker__creds {
background: var(--bg-2);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
padding: var(--space-6);
box-shadow: var(--shadow-lg);
max-width: 440px;
margin: 0 auto;
}
.brokerpicker__creds-head {
display: flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-5);
}
.brokerpicker__creds-logo {
width: 40px;
height: 40px;
border-radius: var(--radius-sm);
flex: 0 0 40px;
}
.brokerpicker__creds-name {
flex: 1 1 auto;
font-family: var(--display);
font-size: var(--text-18);
font-weight: var(--weight-semibold);
letter-spacing: -0.015em;
color: var(--text-0);
line-height: 1.2;
}
.brokerpicker__back {
background: transparent;
border: 0;
padding: 4px 8px;
margin-left: -8px;
margin-bottom: var(--space-3);
font-family: var(--body);
font-size: var(--text-12);
color: var(--text-2);
cursor: pointer;
border-radius: var(--radius-sm);
letter-spacing: 0.06em;
text-transform: uppercase;
font-weight: 500;
transition: color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease);
}
.brokerpicker__back:hover { color: var(--text-0); background: var(--bg-3); }
.brokerpicker__back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.brokerpicker__field { margin-top: var(--space-3); }
.brokerpicker__field:first-of-type { margin-top: 0; }
.brokerpicker__field label {
display: block;
font-family: var(--body);
font-size: var(--text-11);
color: var(--text-2);
margin-bottom: var(--space-1);
text-transform: uppercase;
letter-spacing: 0.14em;
font-weight: 500;
}
.brokerpicker__field input,
.brokerpicker__field select {
width: 100%;
padding: var(--space-3);
box-sizing: border-box;
background: var(--bg-1);
color: var(--text-0);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
font-size: var(--text-14);
font-family: var(--body);
outline: none;
transition: border-color var(--motion-fast) var(--ease);
}
.brokerpicker__field input:focus,
.brokerpicker__field select:focus { border-color: var(--accent); }
/* ── Toggle row (type:'checkbox') ─────────────────────────────────────
Designed to sit alongside the standard "label-on-top, input-below"
rows above it. Whole row is clickable. Bold short label on the left,
muted helper text on the second line, custom-painted switch on the
right. The native stays in the DOM (visually hidden) so the
form submit handler still reads its `.checked` state and the
keyboard / a11y semantics keep working. */
.brokerpicker__toggle {
margin-top: var(--space-3);
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3);
background: var(--bg-1);
border: 1px solid var(--line);
border-radius: var(--radius-sm);
cursor: pointer;
transition:
border-color var(--motion-fast) var(--ease),
background var(--motion-fast) var(--ease);
}
.brokerpicker__toggle:hover {
border-color: color-mix(in oklab, var(--accent) 40%, var(--line));
background: color-mix(in oklab, var(--accent) 4%, var(--bg-1));
}
.brokerpicker__toggle:has(.brokerpicker__toggle-input:focus-visible) {
border-color: var(--accent);
outline: 2px solid color-mix(in oklab, var(--accent) 50%, transparent);
outline-offset: 2px;
}
.brokerpicker__toggle-text {
flex: 1 1 auto;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.brokerpicker__toggle-title {
font-family: var(--body);
font-size: var(--text-13);
font-weight: 600;
color: var(--text-0);
letter-spacing: -0.005em;
}
.brokerpicker__toggle-desc {
font-family: var(--body);
font-size: var(--text-12);
color: var(--text-2);
line-height: 1.4;
letter-spacing: 0;
text-transform: none;
}
/* Native input hidden but reachable by keyboard / form submit. */
.brokerpicker__toggle-input {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.brokerpicker__toggle-track {
flex: 0 0 auto;
position: relative;
width: 36px;
height: 20px;
background: var(--bg-3);
border: 1px solid var(--line-bright);
border-radius: 999px;
transition:
background var(--motion-fast) var(--ease),
border-color var(--motion-fast) var(--ease);
}
.brokerpicker__toggle-thumb {
position: absolute;
top: 2px;
left: 2px;
width: 14px;
height: 14px;
background: var(--text-0);
border-radius: 50%;
transition: transform var(--motion-fast) var(--ease);
}
.brokerpicker__toggle-input:checked ~ .brokerpicker__toggle-track {
background: var(--accent);
border-color: var(--accent);
}
.brokerpicker__toggle-input:checked ~ .brokerpicker__toggle-track .brokerpicker__toggle-thumb {
transform: translateX(16px);
}
/* Primary "Sign in to " — the most important action on this screen, so it
is a CONFIDENT, accessible primary: a solid fill of the firm accent (its
AA-safe `--firm-accent-strong`, white label clears WCAG AA) rather than the
old pale 25%-mix wash. Firm-accented from config; falls back to the global
accent-strong when no firm var is set. Same metrics/weight as the button
system, with clear hover / active / keyboard-focus states. */
.brokerpicker__submit {
width: 100%;
margin-top: var(--space-5);
padding: var(--space-3);
font-family: var(--display);
font-size: var(--text-14);
font-weight: 600;
letter-spacing: -0.005em;
background: var(--firm-accent-strong, var(--accent-strong));
color: #fff;
border: 1px solid transparent;
border-radius: var(--radius-sm);
cursor: pointer;
transition: background var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.brokerpicker__submit:hover {
background: color-mix(in oklab, var(--firm-accent-strong, var(--accent-strong)) 88%, #000);
box-shadow: 0 6px 18px -10px color-mix(in oklab, var(--firm-accent-strong, var(--accent-strong)) 70%, transparent);
}
.brokerpicker__submit:active { transform: translateY(1px); }
.brokerpicker__submit:focus-visible {
outline: 2px solid var(--firm-accent, var(--accent));
outline-offset: 2px;
}
.brokerpicker__submit:disabled { background: var(--bg-3); color: var(--text-2); cursor: not-allowed; border-color: var(--line); transform: none; box-shadow: none; }
/* Credential fields — filled-subtle rows (creds redesign, mockup: Connect
Credentials). Padding is set inline per row (single- vs split-field), so it's
deliberately omitted here. The focus ring reads the firm --accent-strong. */
.cc-field { background: var(--bg-1); border-radius: 12px; transition: background var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease); }
.cc-field:focus-within { background: var(--bg-0); box-shadow: inset 0 0 0 1.5px var(--accent-strong); }
.cc-input { border: 0; background: none; outline: none; font-family: var(--display); font-size: 16px; color: var(--text-0); width: 100%; }
.cc-input::placeholder { color: var(--text-3); }
.brokerpicker__spinner {
width: 14px;
height: 14px;
border-radius: 50%;
/* white on the solid accent button (label is white too) */
border: 2px solid rgba(255, 255, 255, 0.45);
border-top-color: #fff;
animation: brokerpicker-spin 700ms linear infinite;
display: none;
}
.brokerpicker__submit.is-loading .brokerpicker__spinner { display: inline-block; }
@keyframes brokerpicker-spin { to { transform: rotate(360deg); } }
.brokerpicker__err {
color: var(--loss);
font-size: var(--text-12);
margin-top: var(--space-3);
min-height: 14px;
line-height: 1.4;
}
/* Mobile — single column under ~640px, tighter paddings. */
@media (max-width: 640px) {
.brokerpicker { padding: var(--space-5) var(--space-4); }
.brokerpicker__grid { grid-template-columns: 1fr; }
.brokerpicker__title {
font-size: var(--type-section-size);
line-height: var(--type-section-lh);
}
.brokerpicker__creds { padding: var(--space-5); }
}
/* ============================================================================
ONBOARDING — post-login screens (Open Account, Guided Setup)
Light, spacious, typography-led. Reuses the global tokens; the only accent is
the firm's (--accent, re-skinned per firm). Calm counterpart to the dark
marketing site. Off the trading dashboard entirely.
========================================================================== */
.onb {
position: relative;
/* The route host (.app__page) is overflow:hidden with a fixed height, so each
screen must scroll ITSELF. `height:100%` (not min-height) binds .onb to the
cell so its own overflow-y:auto engages when content is taller than the
viewport — otherwise it grew past the cell and got clipped (no scroll). */
height: 100%;
width: 100%;
overflow-y: auto;
background: var(--bg-0);
display: flex;
justify-content: center;
}
.onb-wrap {
position: relative;
z-index: 1;
width: 100%;
max-width: 940px;
padding: clamp(var(--space-6), 7vh, var(--space-8)) var(--space-5) var(--space-7);
/* `margin:auto` centers the wrap when it fits AND stays scroll-safe when it
doesn't (unlike align-items/align-self:center, which clips the top of an
overflowing flex child so you can never scroll up to it). */
margin: auto;
}
.onb-wrap--narrow { max-width: 560px; }
/* restrained ambient accent — header glow only, never busy */
.onb-glow {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(60vw 42vh at 78% -8%, var(--accent-soft), transparent 60%),
radial-gradient(40vw 30vh at 8% 108%, var(--accent-soft), transparent 62%);
}
.onb-eyebrow { color: var(--accent-strong); margin-bottom: var(--space-3); }
.onb-title { color: var(--text-0); letter-spacing: -0.02em; margin: 0; }
.onb-firm { color: var(--accent-strong); font-style: italic; }
.onb-sub {
color: var(--text-1);
margin: var(--space-3) 0 0;
max-width: 48ch;
text-wrap: pretty;
}
.onb--setup .onb-sub { max-width: 42ch; }
/* ---- Open Account: firm cards are the hero ---- */
.onb-firms {
margin-top: var(--space-7);
display: grid;
grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
gap: var(--space-4);
}
.onb-status { color: var(--text-2); margin-top: var(--space-6); }
.onb-card {
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-5);
border-radius: var(--radius-lg);
background: var(--bg-1);
border: 1px solid var(--border-subtle);
transition: transform var(--motion-base) var(--ease),
box-shadow var(--motion-base) var(--ease),
border-color var(--motion-base) var(--ease);
}
.onb-card:hover {
transform: translateY(-3px);
border-color: var(--border-default);
box-shadow: 0 18px 40px -28px rgba(17, 19, 21, 0.4), 0 2px 6px -3px rgba(17, 19, 21, 0.08);
}
.onb-card__top { display: flex; align-items: flex-start; justify-content: space-between; }
.onb-card__logo {
width: 44px;
height: 44px;
border-radius: var(--radius-md);
border: 1px solid var(--border-subtle);
background: var(--bg-0);
}
.onb-card__tag { align-self: center; }
.onb-card__name { color: var(--text-0); }
.onb-card__blurb { color: var(--text-2); margin: 0; flex: 1; text-wrap: pretty; }
.onb-card__foot { margin-top: var(--space-2); display: flex; flex-direction: column; gap: var(--space-2); }
.onb-card__cta { width: 100%; justify-content: center; gap: var(--space-2); }
.onb-card__cta.is-linking { opacity: 0.8; pointer-events: none; }
.onb-card__arrow { transition: transform var(--motion-base) var(--ease); }
.onb-card__cta:hover .onb-card__arrow,
.onb-enter:hover .onb-card__arrow,
.onb-modal__cta:hover .onb-card__arrow { transform: translateX(3px); }
.onb-card__about {
margin-top: 2px;
background: none;
border: none;
cursor: pointer;
font-family: var(--font-sans);
font-size: var(--type-caption-size);
line-height: var(--type-caption-lh);
color: var(--text-2);
padding: var(--space-1);
align-self: center;
transition: color var(--motion-fast) var(--ease);
}
.onb-card__about:hover { color: var(--accent-strong); }
/* =========================================================================
* Firm grid (#/open-account) — scannable cards; click opens the connect modal.
* ========================================================================= */
.firm-search { position: relative; margin-top: var(--space-6); max-width: 420px; }
.firm-search > svg { position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.firm-search__input {
width: 100%;
padding: 10px var(--space-4) 10px 38px;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
background: var(--surface-input);
color: var(--text-0);
font-family: var(--body);
font-size: var(--text-14);
transition: border-color var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease);
}
.firm-search__input::placeholder { color: var(--text-3); }
.firm-search__input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.firm-search__input::-webkit-search-cancel-button { cursor: pointer; }
.firm-grid {
margin-top: var(--space-5);
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: var(--space-4);
align-items: stretch;
}
.firm-grid__empty { grid-column: 1 / -1; }
.firm-card {
display: flex;
flex-direction: column;
gap: var(--space-3);
height: 100%;
text-align: left;
padding: var(--space-5);
border-radius: var(--radius-lg);
background: var(--bg-1);
border: 1px solid var(--border-subtle);
color: inherit;
font-family: var(--body);
cursor: pointer;
transition: transform var(--motion-base) var(--ease),
box-shadow var(--motion-base) var(--ease),
border-color var(--motion-base) var(--ease);
}
.firm-card:hover {
transform: translateY(-3px);
border-color: var(--border-default);
box-shadow: 0 18px 40px -28px rgba(17, 19, 21, 0.4), 0 2px 6px -3px rgba(17, 19, 21, 0.08);
}
.firm-card:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.firm-card--featured { border-color: color-mix(in oklab, var(--accent) 30%, var(--border-subtle)); }
.firm-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.firm-card__name { color: var(--text-0); }
.firm-card__meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; }
.firm-card__rating { display: inline-flex; align-items: center; gap: 4px; color: var(--text-1); font-size: var(--text-13); }
.firm-card__rating svg { color: #e0a32f; }
.firm-card__star { display: inline-flex; color: var(--accent); }
/* Graceful logo tile — firm initial sits behind the image. */
.logo-tile {
position: relative;
display: grid; place-items: center;
width: 44px; height: 44px; flex: none;
border-radius: var(--radius-md);
border: 1px solid var(--border-subtle);
background: var(--bg-0);
overflow: hidden;
}
.logo-tile__initial {
position: absolute; inset: 0;
display: grid; place-items: center;
font-family: var(--display); font-weight: 600; font-size: 18px;
color: var(--text-2);
}
.logo-tile__img { position: relative; width: 100%; height: 100%; object-fit: contain; padding: 6px; }
.logo-tile__img.is-broken { display: none; }
/* Request-a-firm fallback tile. */
.firm-card--request {
align-items: flex-start;
justify-content: center;
gap: var(--space-2);
background: transparent;
border-style: dashed;
}
.firm-card--request:hover { background: var(--bg-1); border-color: var(--accent); }
.firm-card__plus {
display: grid; place-items: center;
width: 40px; height: 40px;
border-radius: var(--radius-md);
background: var(--accent-soft);
color: var(--accent-strong);
}
.firm-card__request-hint { color: var(--text-2); }
/* =========================================================================
* Connect modal — skins the .sx-dialog primitive, accent-themed per firm.
* ========================================================================= */
.sx-dialog__panel.connect { display: flex; flex-direction: column; gap: var(--space-4); width: min(420px, calc(100vw - 32px)); }
.connect__close {
position: absolute; top: var(--space-3); right: var(--space-3);
width: 30px; height: 30px;
display: grid; place-items: center;
background: none; border: none; cursor: pointer;
color: var(--text-2);
border-radius: var(--radius-sm);
transition: color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease);
}
.connect__close:hover { color: var(--text-0); background: var(--surface-hover); }
.connect__close:focus-visible { outline: none; color: var(--text-0); box-shadow: 0 0 0 3px var(--accent-soft); }
.connect__head { display: flex; align-items: center; gap: var(--space-3); padding-right: var(--space-6); }
.connect__logo { width: 52px; height: 52px; }
.connect__logo--ghost { color: var(--accent-strong); background: var(--accent-soft); border-color: transparent; }
.connect__id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.connect__name { color: var(--text-0); }
.connect__network { color: var(--text-2); }
.connect__rating-row {
display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
padding-bottom: var(--space-4);
border-bottom: 1px solid var(--border-subtle);
}
.connect__rating { display: inline-flex; align-items: center; gap: 5px; color: var(--text-0); font-size: var(--text-18); font-weight: 600; }
.connect__rating svg { color: #e0a32f; }
.connect__rating-max { color: var(--text-3); font-size: var(--text-13); font-weight: 500; }
.connect__rating--empty { color: var(--text-2); font-weight: 500; }
/* Weighted CTAs: filled accent primary · outlined secondary · text-link tertiary */
.connect__cta {
display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
width: 100%;
padding: 11px var(--space-4);
border: 1px solid transparent;
border-radius: var(--radius-md);
font-family: var(--display); font-size: var(--text-15); font-weight: 600; letter-spacing: -0.01em;
cursor: pointer;
transition: background-color var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease),
color var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease);
}
.connect__cta--primary { background: var(--accent); color: #04140c; border-color: var(--accent); }
.connect__cta--primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
.connect__cta--primary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.connect__cta-arrow { transition: transform var(--motion-base) var(--ease); }
.connect__cta--primary:hover .connect__cta-arrow { transform: translateX(3px); }
.connect__cta--ghost { background: transparent; color: var(--text-0); border-color: var(--border-default); }
.connect__cta--ghost:hover { background: var(--bg-2); border-color: var(--accent); color: var(--accent-strong); }
.connect__cta--ghost:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.connect__terms { color: var(--text-2); margin: 0; text-align: center; text-wrap: pretty; }
.connect__terms-link { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 2px; }
.connect__terms-link:hover { color: var(--accent); }
.connect__divider { display: flex; align-items: center; gap: var(--space-3); color: var(--text-3); }
.connect__divider::before, .connect__divider::after { content: ""; flex: 1; height: 1px; background: var(--border-subtle); }
.connect__divider-label { color: var(--text-3); }
.connect__link {
background: none; border: none; cursor: pointer;
padding: var(--space-1) 0;
font-family: var(--body); font-size: var(--text-13);
color: var(--text-2);
transition: color var(--motion-fast) var(--ease);
}
.connect__link:hover { color: var(--accent-strong); }
.connect__link:focus-visible { outline: none; color: var(--accent-strong); text-decoration: underline; text-underline-offset: 2px; }
.connect__tertiary { align-self: center; color: var(--text-1); font-size: var(--text-14); }
.connect__support { text-align: center; color: var(--text-2); margin-top: calc(-1 * var(--space-2)); }
.connect__support-link { color: var(--accent-strong); }
@media (max-width: 560px) {
.firm-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
.firm-card, .connect__cta, .connect__cta-arrow { transition: none; }
.firm-card:hover, .firm-card--request:hover { transform: none; }
}
/* =========================================================================
* Dialog primitive (.sx-dialog) — the one modal shell, owned by @spiderx/ui.
* Behaviors (focus trap, scroll lock, Escape/backdrop) live in openDialog();
* this is purely the surface + motion. Per-use skins extend `.sx-dialog__panel`.
* ========================================================================= */
.sx-dialog { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: var(--space-4); }
.sx-dialog__backdrop {
position: absolute; inset: 0;
background: rgba(17, 19, 21, 0.42);
opacity: 0;
transition: opacity var(--motion-base) var(--ease);
}
.sx-dialog.is-open .sx-dialog__backdrop { opacity: 1; }
.sx-dialog__panel {
position: relative; z-index: 1;
width: min(440px, calc(100vw - 32px));
max-height: calc(100vh - 32px);
overflow-y: auto;
background: var(--bg-0);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
box-shadow: 0 30px 80px -40px rgba(17, 19, 21, 0.45), 0 2px 8px -4px rgba(17, 19, 21, 0.12);
padding: var(--space-6);
opacity: 0;
transform: translateY(10px) scale(0.985);
transition: opacity var(--motion-base) var(--ease), transform var(--motion-base) var(--ease);
}
.sx-dialog.is-open .sx-dialog__panel { opacity: 1; transform: none; }
.sx-dialog__panel:focus, .sx-dialog__panel:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) {
.sx-dialog__backdrop, .sx-dialog__panel { transition: none; }
.sx-dialog__panel { transform: none; }
}
/* ---- Guided Setup ---- */
.onb-checklist {
list-style: none;
margin: var(--space-7) 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.onb-check {
display: flex;
gap: var(--space-3);
align-items: flex-start;
padding: var(--space-3) var(--space-4);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
background: var(--bg-1);
}
.onb-check__mark {
flex: none;
width: 22px;
height: 22px;
border-radius: var(--radius-pill);
display: grid;
place-items: center;
font-size: 12px;
color: #fff;
background: var(--accent);
margin-top: 1px;
}
.onb-check__body { display: flex; flex-direction: column; gap: 2px; }
.onb-check__title { color: var(--text-0); }
.onb-check__hint { color: var(--text-2); }
.onb-actions { margin-top: var(--space-7); }
.onb-enter { gap: var(--space-2); padding-inline: var(--space-5); }
/* dark→light reveal — the brand mechanic, gated by reduced-motion below */
.onb-reveal {
position: absolute;
inset: 0;
z-index: 5;
background: #0a0b0d;
opacity: 1;
transition: opacity 0.9s var(--ease);
}
.onb-reveal.is-lifting { opacity: 0; }
@media (max-width: 640px) {
.onb-firms { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.onb-card, .onb-card__arrow, .onb-reveal { transition: none; }
.onb-card:hover { transform: none; }
}
/* ==========================================================================
FIRM DETAIL — one templated page (hero + Overview/Offerings tabs).
Light + spacious; the firm accent (--accent / --accent-strong re-skinned on
the page root from config) themes the hero tint, active tab, and CTAs. Reuses
the onboarding wrap/glow + global tokens — no per-firm styling.
========================================================================== */
.onb--firm .onb-wrap { max-width: 920px; }
.firmd-back {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--body); font-size: var(--text-13);
color: var(--text-2); text-decoration: none;
letter-spacing: 0.02em;
margin-bottom: var(--space-4);
transition: color var(--motion-fast) var(--ease);
}
.firmd-back:hover { color: var(--text-0); }
/* ── Hero ───────────────────────────────────────────────────────────────── */
.firmd-hero {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
border: 1px solid var(--border-subtle);
background: var(--bg-1);
margin-bottom: var(--space-6);
}
.firmd-hero__media { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; }
.firmd-hero__media::after { /* legibility scrim over a cover image */
content: ''; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.92));
}
.firmd-hero__media--fallback {
background:
radial-gradient(80vw 60vh at 82% -25%, color-mix(in oklab, var(--accent) 22%, transparent), transparent 60%),
radial-gradient(60vw 40vh at -10% 120%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 62%);
}
.firmd-hero__media--fallback::after { content: none; }
.firmd-hero__inner {
position: relative; z-index: 1;
padding: var(--space-7) var(--space-6);
display: flex; flex-direction: column; gap: var(--space-5);
}
.firmd-hero__head { display: flex; align-items: center; gap: var(--space-4); }
.firmd-hero__logo { width: 64px; height: 64px; flex: 0 0 64px; border-radius: var(--radius-md); display: block; }
.firmd-hero__name { margin: 0; color: var(--text-0); letter-spacing: -0.02em; }
.firmd-hero__tagline { margin: 2px 0 0; color: var(--text-1); }
.firmd-hero__powered { margin: 6px 0 0; color: var(--text-2); }
.firmd-hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.firmd-rating { font-family: var(--display); font-weight: 600; color: var(--accent-strong); font-size: var(--text-14); }
.firmd-stats {
display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: var(--space-4); padding-top: var(--space-2);
}
.firmd-stat__value { font-family: var(--display); font-weight: 600; font-size: var(--text-24); color: var(--text-0); letter-spacing: -0.02em; }
.firmd-stat__label { font-size: var(--text-12); color: var(--text-2); margin-top: 2px; }
.firmd-hero__cta { display: flex; }
/* ── CTAs (confident, firm-accented; mirrors the login button treatment) ─── */
.firmd-cta {
display: inline-flex; align-items: center; justify-content: center;
padding: var(--space-3) var(--space-5);
font-family: var(--display); font-weight: 600; font-size: var(--text-14);
letter-spacing: -0.005em;
border-radius: var(--radius-sm); cursor: pointer; border: 1px solid transparent;
transition: background var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease), color var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
}
.firmd-cta--solid { background: var(--accent-strong); color: #fff; }
.firmd-cta--solid:hover { background: color-mix(in oklab, var(--accent-strong) 88%, #000); box-shadow: 0 6px 18px -10px color-mix(in oklab, var(--accent-strong) 70%, transparent); }
.firmd-cta--outline { background: transparent; color: var(--accent-strong); border-color: color-mix(in oklab, var(--accent) 45%, var(--line)); }
.firmd-cta--outline:hover { background: color-mix(in oklab, var(--accent) 8%, transparent); border-color: var(--accent); }
.firmd-cta:active { transform: translateY(1px); }
.firmd-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* ── Tabs (deep-linkable; active reflects the route) ─────────────────────── */
.firmd-tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--border-subtle); margin-bottom: var(--space-5); }
.firmd-tab {
appearance: none; background: transparent; border: 0; cursor: pointer;
padding: var(--space-3) var(--space-4);
font-family: var(--display); font-size: var(--text-14); font-weight: 500;
color: var(--text-2); border-bottom: 2px solid transparent; margin-bottom: -1px;
transition: color var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
}
.firmd-tab:hover { color: var(--text-0); }
.firmd-tab.is-active { color: var(--text-0); border-bottom-color: var(--accent); }
.firmd-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }
/* ── Overview ───────────────────────────────────────────────────────────── */
.firmd-section { margin-bottom: var(--space-6); }
.firmd-section__title { margin: 0 0 var(--space-3); color: var(--text-0); }
.firmd-prose { color: var(--text-1); max-width: 68ch; line-height: var(--lh-base); text-wrap: pretty; }
.firmd-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.firmd-links { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.firmd-link { color: var(--accent-strong); text-decoration: none; font-size: var(--text-14); font-weight: 500; }
.firmd-link:hover { text-decoration: underline; }
.firmd-empty-mini { color: var(--text-2); }
/* ── Offerings ──────────────────────────────────────────────────────────── */
.firmd-pkg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); }
.firmd-pkg {
position: relative; display: flex; flex-direction: column; gap: var(--space-3);
padding: var(--space-5); border-radius: var(--radius-lg);
background: var(--bg-1); border: 1px solid var(--border-subtle);
}
.firmd-pkg--featured {
border-color: color-mix(in oklab, var(--accent) 55%, var(--line));
box-shadow: 0 10px 34px -22px color-mix(in oklab, var(--accent) 80%, transparent);
}
.firmd-pkg__tag {
position: absolute; top: calc(-1 * var(--space-2)); right: var(--space-4);
background: var(--accent-strong); color: #fff;
font-family: var(--display); font-size: var(--text-11); font-weight: 600;
padding: 2px 10px; border-radius: 999px; letter-spacing: 0.02em;
}
.firmd-pkg__name { color: var(--text-0); }
.firmd-pkg__price { font-family: var(--display); font-weight: 700; font-size: var(--text-24); color: var(--text-0); letter-spacing: -0.02em; }
.firmd-pkg__highlights { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.firmd-pkg__hl { position: relative; padding-left: 20px; font-size: var(--text-13); color: var(--text-1); line-height: 1.4; }
.firmd-pkg__hl::before { content: '✓'; position: absolute; left: 0; color: var(--accent-strong); font-weight: 700; }
.firmd-pkg__details {
display: grid; grid-template-columns: 1fr auto; gap: 6px var(--space-3);
margin: 0; padding: var(--space-3) 0 0; border-top: 1px solid var(--border-subtle);
}
.firmd-pkg__details dt { font-size: var(--text-12); color: var(--text-2); }
.firmd-pkg__details dd { margin: 0; font-size: var(--text-12); color: var(--text-0); font-weight: 500; text-align: right; }
.firmd-pkg .firmd-cta { margin-top: var(--space-2); width: 100%; }
/* ── Sticky CTA (always reachable while scrolling → Offerings) ───────────── */
.firmd-sticky {
position: sticky; bottom: var(--space-4); margin-top: var(--space-6);
display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
padding: var(--space-3) var(--space-3) var(--space-3) var(--space-5);
border-radius: 999px;
background: color-mix(in oklab, var(--bg-1) 86%, transparent);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
border: 1px solid var(--border-subtle); box-shadow: var(--shadow-lg);
}
.firmd-sticky.is-hidden { display: none; }
.firmd-sticky__name { color: var(--text-1); }
@media (max-width: 640px) {
.firmd-hero__inner { padding: var(--space-5); }
.firmd-pkg-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
.firmd-cta, .firmd-tab, .firmd-back { transition: none; }
}
/* =========================================================================
TRADINGVIEW STRATEGY CONNECTOR (.tvc-*)
The showcase Connectors page. Extends the global tokens — light, spacious,
one accent. Signature element: "the conduit", the routed signal path shared
by the demo and How-it-works. All colour from tokens; motion class-driven.
========================================================================= */
.tvc.onb { align-items: flex-start; }
/* Near-monochrome ambient wash — ONE accent only (no competing blue). */
.tvc-bg {
position: absolute; inset: 0; z-index: 0; pointer-events: none;
background:
radial-gradient(52vw 40vh at 82% -6%, var(--accent-soft), transparent 60%),
radial-gradient(38vw 28vh at -4% 14%, var(--accent-soft), transparent 64%);
}
.tvc-wrap {
position: relative; z-index: 1;
width: 100%; max-width: 1120px;
margin: 0 auto;
padding: clamp(var(--space-6), 6vh, var(--space-8)) var(--space-6) var(--space-8);
}
/* Page CTAs — confident FILLED accent (matches the app's other primary CTAs),
real hover/active/focus. Out-specifies the pale global .btn--primary mix. */
.tvc .btn--primary { background: var(--accent-strong); border-color: transparent; color: #fff; }
.tvc .btn--primary:hover { background: color-mix(in oklab, var(--accent-strong) 88%, #000); border-color: transparent; }
.tvc .btn--primary:active { transform: translateY(1px); }
.tvc .btn--primary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* ---- Hero — two-column: content left, quiet signal-path motif right ------- */
.tvc-hero {
position: relative;
display: grid;
grid-template-columns: minmax(0, 33rem) 1fr;
gap: var(--space-7);
align-items: center;
padding: clamp(var(--space-5), 5vh, var(--space-7)) 0 var(--space-8);
}
.tvc-hero__inner { position: relative; z-index: 1; min-width: 0; }
.tvc-hero__eyebrow { color: var(--accent-strong); margin: 0 0 var(--space-4); }
.tvc-hero__title { margin: 0; color: var(--text-0); max-width: 18ch; letter-spacing: -0.02em; }
/* single SOLID accent emphasis — no gradient */
.tvc-hero__accent { color: var(--accent-strong); }
.tvc-hero__sub { margin: var(--space-4) 0 0; color: var(--text-1); max-width: 54ch; }
.tvc-hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.tvc-hero__see-arrow { margin-left: 6px; transition: transform var(--motion-base) var(--ease); }
.tvc-hero__see:hover .tvc-hero__see-arrow { transform: translateY(2px); }
/* right column: deliberate (not empty) — single-accent dot grid + a static
preview of the conduit, masked to fade. Quiet; never competes with the type. */
.tvc-hero__viz {
position: relative;
align-self: stretch;
min-height: 248px;
border-radius: var(--radius-lg);
overflow: hidden;
background-image: radial-gradient(circle at 1px 1px, color-mix(in oklab, var(--accent) 40%, transparent) 1.2px, transparent 1.6px);
background-size: 26px 26px;
-webkit-mask-image: radial-gradient(82% 74% at 60% 46%, #000 38%, transparent 80%);
mask-image: radial-gradient(82% 74% at 60% 46%, #000 38%, transparent 80%);
}
.tvc-hero__viz::before {
content: ''; position: absolute; inset: 0;
background: radial-gradient(62% 52% at 60% 44%, var(--accent-soft), transparent 70%);
}
.tvc-hero__path { position: relative; display: block; width: 100%; height: 100%; }
.tvc-hero__pulse { animation: tvc-pulse 3.6s var(--ease) infinite; }
@keyframes tvc-pulse {
0% { cx: 40px; opacity: 0; }
14% { opacity: 1; }
86% { opacity: 1; }
100% { cx: 296px; opacity: 0; }
}
@media (max-width: 900px) {
.tvc-hero { grid-template-columns: 1fr; gap: var(--space-5); }
.tvc-hero__viz { display: none; }
}
/* ---- Sections — intentional rhythm: tight within, generous between ------- */
.tvc-section { margin-top: var(--space-8); }
.tvc-section__head { max-width: 62ch; margin-bottom: var(--space-5); }
.tvc-section__title { margin: 0; color: var(--text-0); letter-spacing: -0.02em; font-weight: var(--weight-semibold); }
.tvc-section__lede { margin: var(--space-2) 0 0; color: var(--text-2); }
.tvc-scaffold { border-style: dashed; background: var(--bg-1); }
.tvc-scaffold__text { margin: 0; color: var(--text-3); }
/* ---- How it works — conduit visual language (nodes on a single hairline) -- */
.tvc-flow {
list-style: none; margin: 0; padding: 0;
position: relative;
display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5);
}
.tvc-flow::before {
content: ''; position: absolute; top: 20px; left: 16.66%; right: 16.66%; height: 1px;
background: linear-gradient(90deg, transparent, var(--accent) 12%, var(--accent) 88%, transparent);
opacity: 0.45;
}
.tvc-flow__step { position: relative; display: flex; flex-direction: column; gap: var(--space-3); }
.tvc-flow__node {
width: 40px; height: 40px; border-radius: 50%;
display: grid; place-items: center;
background: var(--bg-1);
border: 1px solid color-mix(in oklab, var(--accent) 45%, var(--line));
box-shadow: 0 1px 0 var(--accent-soft);
position: relative; z-index: 1;
}
.tvc-flow__num { font-family: var(--display); font-weight: 600; color: var(--accent-strong); font-size: var(--text-15); }
.tvc-flow__title { margin: 0; color: var(--text-0); letter-spacing: -0.01em; }
.tvc-flow__copy { margin: var(--space-1) 0 0; color: var(--text-2); max-width: 38ch; }
@media (max-width: 760px) {
.tvc-flow { grid-template-columns: 1fr; gap: var(--space-4); }
.tvc-flow::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.tvc-hero__pulse { display: none; }
}
/* ---- Demo layout --------------------------------------------------------- */
.tvc-demo {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
gap: var(--space-5);
align-items: start;
}
@media (max-width: 980px) { .tvc-demo { grid-template-columns: 1fr; } }
.tvc-demo__build, .tvc-demo__run { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.tvc-demo__run { position: sticky; top: var(--space-4); }
@media (max-width: 980px) { .tvc-demo__run { position: static; } }
/* ---- Builder steps ------------------------------------------------------- */
.tvc-builder { display: flex; flex-direction: column; gap: var(--space-3); }
.tvc-step {
border: 1px solid var(--line);
border-radius: var(--radius-lg);
background: var(--bg-1);
padding: var(--space-4) var(--space-5) var(--space-5);
transition: border-color var(--motion-base) var(--ease), box-shadow var(--motion-base) var(--ease);
}
.tvc-step:focus-within { border-color: var(--line-bright); box-shadow: 0 1px 0 var(--accent-soft), 0 12px 30px -24px rgba(0,0,0,0.35); }
.tvc-step__head { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); }
.tvc-step__num {
flex: none; width: 26px; height: 26px; border-radius: var(--radius-pill);
display: grid; place-items: center;
font-family: var(--mono); font-variant-numeric:tabular-nums; font-size: var(--text-13); font-weight: 600;
color: var(--accent-strong); background: var(--accent-soft);
font-variant-numeric: tabular-nums;
}
.tvc-step__title { margin: 0; color: var(--text-0); }
.tvc-step__hint { margin: 1px 0 0; color: var(--text-2); }
.tvc-step__body { display: flex; flex-direction: column; gap: var(--space-4); }
.tvc-field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.tvc-field__label { color: var(--text-2); }
/* segmented control — a sliding pill (.tvc-seg__thumb) eases between options */
.tvc-seg {
position: relative;
display: inline-flex; padding: 3px; gap: 2px;
background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-md);
width: fit-content; max-width: 100%;
}
.tvc-seg__thumb {
position: absolute; top: 3px; bottom: 3px; left: 0; width: 0;
border-radius: 7px; background: var(--bg-0); box-shadow: 0 1px 2px rgba(0,0,0,0.08);
opacity: 0; pointer-events: none; z-index: 0;
transition: transform var(--tvc-dur-micro) var(--tvc-ease), width var(--tvc-dur-micro) var(--tvc-ease);
will-change: transform, width;
}
.tvc-seg__btn {
position: relative; z-index: 1;
appearance: none; border: 0; background: transparent; cursor: pointer;
padding: 6px 14px; border-radius: 7px;
font-family: var(--body); font-size: var(--text-14); font-weight: 500;
color: var(--text-2); white-space: nowrap;
transition: color var(--tvc-dur-micro) var(--tvc-ease), transform var(--tvc-dur-micro) var(--tvc-ease);
}
.tvc-seg__btn:hover { color: var(--text-0); }
.tvc-seg__btn.is-on { color: var(--text-0); }
.tvc-seg__btn:active { transform: scale(0.96); }
.tvc-seg__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* instrument picker */
.tvc-instruments { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: var(--space-2); }
.tvc-inst {
appearance: none; cursor: pointer; text-align: left;
display: flex; flex-direction: column; gap: 2px;
padding: 10px 12px; border-radius: var(--radius-md);
border: 1px solid var(--line); background: var(--bg-1);
transition: border-color var(--tvc-dur-micro) var(--tvc-ease), background var(--tvc-dur-micro) var(--tvc-ease), transform var(--tvc-dur-micro) var(--tvc-ease);
}
.tvc-inst:hover { border-color: var(--line-bright); transform: translateY(-1px); }
.tvc-inst:active { transform: scale(0.985); }
.tvc-inst.is-on { border-color: var(--accent); background: var(--accent-soft); }
.tvc-inst__sym { color: var(--text-0); font-weight: 600; font-variant-numeric: tabular-nums; }
.tvc-inst__name { color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tvc-inst:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* inputs */
.tvc-input {
width: 100%; appearance: none;
padding: 9px 12px; border-radius: var(--radius-md);
border: 1px solid var(--line); background: var(--surface-input);
color: var(--text-0); font-family: var(--mono); font-variant-numeric:tabular-nums; font-size: var(--text-15);
font-variant-numeric: tabular-nums;
transition: border-color var(--tvc-dur-micro) var(--tvc-ease), box-shadow var(--tvc-dur-micro) var(--tvc-ease);
}
.tvc-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.tvc-input-wrap { position: relative; display: flex; align-items: center; }
.tvc-input-wrap .tvc-input { padding-right: 52px; }
.tvc-input-suffix { position: absolute; right: 12px; color: var(--text-3); pointer-events: none; }
.tvc-calc { color: var(--text-2); }
/* protection rows */
.tvc-protect { display: flex; flex-direction: column; gap: var(--space-2); }
.tvc-protect__head { display: flex; align-items: center; gap: var(--space-3); }
.tvc-protect__body { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); transition: opacity var(--tvc-dur-micro) var(--tvc-ease); }
.tvc-protect__body.is-off { opacity: 0.4; pointer-events: none; }
.tvc-protect__body .tvc-input-wrap { width: 140px; }
.tvc-rr {
display: flex; align-items: baseline; gap: var(--space-3);
padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
}
.tvc-rr.is-empty { background: var(--bg-2); border-color: var(--line); }
.tvc-rr__ratio { font-family: var(--mono); font-variant-numeric:tabular-nums; font-size: var(--text-20); font-weight: 600; color: var(--accent-strong); font-variant-numeric: tabular-nums; }
.tvc-rr__label { color: var(--text-2); }
.tvc-rr.is-empty .tvc-rr__label { color: var(--text-3); }
/* small pop when the risk:reward recalculates (transform — GPU-friendly) */
.tvc-rr { will-change: transform; }
.tvc-rr.is-flash { animation: tvc-rr-pop var(--tvc-dur-flash) var(--tvc-ease); }
@keyframes tvc-rr-pop { 0% { transform: scale(1); } 35% { transform: scale(1.02); } 100% { transform: scale(1); } }
/* auth row + switch */
.tvc-authrow { display: flex; align-items: center; gap: var(--space-3); }
.tvc-authrow__text { display: flex; flex-direction: column; gap: 1px; }
.tvc-authrow__hint { color: var(--text-3); }
.tvc-check {
flex: none; appearance: none; cursor: pointer;
width: 40px; height: 24px; border-radius: var(--radius-pill);
border: 1px solid var(--line-bright); background: var(--bg-2);
position: relative; transition: background var(--tvc-dur-micro) var(--tvc-ease), border-color var(--tvc-dur-micro) var(--tvc-ease);
}
.tvc-check__dot {
position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.3);
transition: transform var(--tvc-dur-micro) var(--tvc-ease);
will-change: transform;
}
.tvc-check.is-on { background: var(--accent); border-color: var(--accent); }
.tvc-check.is-on .tvc-check__dot { transform: translateX(16px); }
.tvc-check:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* ---- Payload panel ------------------------------------------------------- */
.tvc-payload { gap: var(--space-3); }
.tvc-payload__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.tvc-payload__title { color: var(--text-2); margin: 0; }
.tvc-copy { gap: 6px; }
.tvc-copy.is-copied { color: var(--accent-strong); border-color: var(--accent); }
.tvc-payload__code {
margin: 0; padding: var(--space-4);
background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--radius-md);
font-family: var(--mono); font-variant-numeric:tabular-nums; font-size: var(--text-13); line-height: 1.6;
color: var(--text-1); white-space: pre-wrap; word-break: break-word;
font-variant-numeric: tabular-nums; max-height: 300px; overflow: auto;
}
.tvc-payload__code:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* soft flash when the payload changes — accent wash fading back to rest */
.tvc-payload__code.is-flash { animation: tvc-payload-flash var(--tvc-dur-flash) var(--tvc-ease); }
@keyframes tvc-payload-flash { from { background-color: var(--accent-soft); } to { background-color: var(--bg-2); } }
.tvc-payload__note { margin: 0; color: var(--text-3); }
/* ---- Stage + latency ----------------------------------------------------- */
.tvc-stage { gap: var(--space-4); }
.tvc-stage__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.tvc-latency { display: flex; align-items: baseline; gap: 6px; }
.tvc-latency__num { font-family: var(--mono); font-variant-numeric:tabular-nums; font-size: var(--text-24); font-weight: 600; color: var(--text-0); font-variant-numeric: tabular-nums; min-width: 2ch; text-align: right; }
.tvc-latency__unit { color: var(--text-3); }
.tvc-stage__controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.tvc-stage__alt { display: flex; gap: var(--space-2); }
.tvc-sim { gap: 8px; }
.tvc-sim__arrow { transition: transform var(--tvc-dur-micro) var(--tvc-ease); }
.tvc-sim:not(:disabled):hover .tvc-sim__arrow { transform: translateX(3px); }
.tvc-sim.is-running { opacity: 0.7; }
/* button press feedback — slight scale on press (.btn already eases transform) */
.tvc-sim:not(:disabled):active { transform: scale(0.98); }
.tvc-copy:active { transform: scale(0.97); }
.tvc-flow-note { margin: 0; color: var(--text-2); min-height: var(--type-caption-lh); }
/* ---- Shared motion scale (Connector page) -------------------------------
* ONE easing + duration set, reused by the signal path, count-up, and every
* micro-interaction below. Mirrored in JS by motion.ts (TVC_EASE / MOTION). */
:root {
--tvc-ease: cubic-bezier(0.22, 1, 0.36, 1); /* standard ease-out */
--tvc-dur-micro: 160ms; /* toggles, hovers, button press, knob slide */
--tvc-dur-flash: 480ms; /* "it reacted" flash on payload + risk:reward */
--tvc-dur-hop: 320ms; /* one signal hop (wire pulse → node) */
--tvc-dur-count: 1000ms; /* ms counter count-up budget */
}
/* ---- The conduit --------------------------------------------------------- */
.tvc-conduit { --tvc-spine: 30px; }
/* Calm idle — a faint ambient breathe at the entry node hints the path is
* armed and ready, instead of a dead grey rail with a frozen "0 ms". */
.tvc-conduit.is-idle .tvc-node[data-hop="tradingview"] .tvc-node__dot {
background: var(--accent);
animation: tvc-idle-breathe 2.8s var(--tvc-ease) infinite;
}
@keyframes tvc-idle-breathe {
0%, 100% { box-shadow: 0 0 0 0 var(--accent-soft); }
50% { box-shadow: 0 0 0 5px transparent; }
}
.tvc-rail { display: flex; flex-direction: column; }
.tvc-node {
display: flex; align-items: center; gap: var(--space-3);
padding: 11px 14px; border-radius: var(--radius-md);
border: 1px solid var(--line); background: var(--bg-1);
transition: border-color var(--tvc-dur-hop) var(--tvc-ease), background var(--tvc-dur-hop) var(--tvc-ease), box-shadow var(--tvc-dur-hop) var(--tvc-ease);
}
.tvc-node__dot {
flex: none; width: 8px; height: 8px; border-radius: 50%;
background: var(--line-bright); transition: background var(--tvc-dur-hop) var(--tvc-ease), box-shadow var(--tvc-dur-hop) var(--tvc-ease);
}
.tvc-node__glyph { flex: none; display: grid; place-items: center; width: 26px; height: 26px; color: var(--text-3); transition: color var(--tvc-dur-hop) var(--tvc-ease); }
.tvc-node__title { color: var(--text-1); font-weight: 600; }
.tvc-node__detail { margin-left: auto; color: var(--text-3); transition: color var(--tvc-dur-hop) var(--tvc-ease); text-align: right; }
/* lit / active node states, coloured by role */
.tvc-node.is-lit { background: var(--bg-0); border-color: var(--line-bright); }
.tvc-node.is-lit .tvc-node__title { color: var(--text-0); }
.tvc-node.is-lit .tvc-node__detail { color: var(--text-1); }
.tvc-node[data-hop="tradingview"].is-lit .tvc-node__glyph,
.tvc-node[data-hop="tradingview"].is-lit .tvc-node__dot { color: var(--text-0); background: var(--text-1); }
.tvc-node[data-hop="spiderx"].is-lit { border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); }
.tvc-node[data-hop="spiderx"].is-lit .tvc-node__glyph { color: var(--accent-strong); }
.tvc-node[data-hop="spiderx"].is-lit .tvc-node__dot { background: var(--accent); }
.tvc-node[data-hop="backend"].is-lit { border-color: color-mix(in srgb, var(--info) 40%, var(--line)); }
.tvc-node[data-hop="backend"].is-lit .tvc-node__glyph { color: var(--color-info-strong); }
.tvc-node[data-hop="backend"].is-lit .tvc-node__dot { background: var(--info); }
.tvc-node[data-hop="accounts"].is-lit { border-color: color-mix(in srgb, var(--profit) 40%, var(--line)); }
.tvc-node[data-hop="accounts"].is-lit .tvc-node__glyph { color: var(--color-success-strong); }
.tvc-node[data-hop="accounts"].is-lit .tvc-node__dot { background: var(--profit); }
.tvc-node.is-active { box-shadow: 0 0 0 3px var(--accent-soft); }
.tvc-node.is-active .tvc-node__dot { animation: tvc-ping 1s var(--tvc-ease) infinite; }
@keyframes tvc-ping { 0% { box-shadow: 0 0 0 0 var(--accent-soft); } 70%,100% { box-shadow: 0 0 0 6px transparent; } }
/* vertical wire between nodes, with a travelling pulse */
.tvc-wire { position: relative; height: 26px; width: 2px; margin-left: var(--tvc-spine); background: var(--line); border-radius: 2px; overflow: hidden; transition: background var(--tvc-dur-hop) var(--tvc-ease); }
.tvc-wire.is-charged { background: var(--accent); }
.tvc-wire__pulse {
position: absolute; left: -1px; width: 4px; height: 16px; top: 0; border-radius: 4px;
background: linear-gradient(180deg, transparent, var(--accent), transparent);
opacity: 0; transform: translateY(-18px); will-change: transform, opacity;
}
.tvc-wire.is-flowing .tvc-wire__pulse { animation: tvc-flow var(--tvc-dur-hop) var(--tvc-ease) forwards; }
@keyframes tvc-flow {
0% { opacity: 0; transform: translateY(-18px); }
20% { opacity: 1; }
80% { opacity: 1; }
100% { opacity: 0; transform: translateY(28px); }
}
/* fan-out — backend trunk into the accounts bus */
.tvc-fork { display: flex; flex-direction: column; }
.tvc-accounts { position: relative; display: flex; flex-direction: column; gap: var(--space-2); margin: var(--space-2) 0 0; padding-left: calc(var(--tvc-spine) + 14px); }
.tvc-accounts::before {
content: ""; position: absolute; left: var(--tvc-spine); top: -10px; bottom: 18px; width: 2px;
background: var(--line); border-radius: 2px;
}
.tvc-chip {
position: relative;
display: flex; align-items: center; gap: var(--space-3);
padding: 9px 12px; border-radius: var(--radius-md);
border: 1px solid var(--line); background: var(--bg-1);
opacity: 0.6;
transition: opacity var(--tvc-dur-hop) var(--tvc-ease), border-color var(--tvc-dur-hop) var(--tvc-ease), background var(--tvc-dur-hop) var(--tvc-ease), transform var(--tvc-dur-hop) var(--tvc-ease);
}
/* stub from the bus to each chip */
.tvc-chip::before {
content: ""; position: absolute; left: -14px; top: 50%; width: 14px; height: 2px;
background: var(--line); transition: background var(--motion-base) var(--ease);
}
.tvc-chip.is-targeted { opacity: 1; }
.tvc-chip__code {
flex: none; width: 30px; height: 30px; border-radius: 8px;
display: grid; place-items: center;
font-family: var(--mono); font-variant-numeric:tabular-nums; font-size: var(--text-12); font-weight: 700; letter-spacing: 0.02em;
color: var(--text-1); background: var(--bg-3); border: 1px solid var(--line);
transition: color var(--motion-base) var(--ease), background var(--motion-base) var(--ease), border-color var(--motion-base) var(--ease);
}
.tvc-chip__meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.tvc-chip__firm { color: var(--text-0); font-weight: 600; }
.tvc-chip__backend { color: var(--text-3); }
.tvc-chip__result { margin-left: auto; font-family: var(--mono); font-variant-numeric:tabular-nums; color: var(--text-3); text-align: right; font-variant-numeric: tabular-nums; opacity: 0; transition: opacity var(--tvc-dur-hop) var(--tvc-ease); }
.tvc-chip__result[aria-hidden="false"] { opacity: 1; }
.tvc-chip.is-filled { opacity: 1; border-color: color-mix(in srgb, var(--profit) 45%, var(--line)); background: var(--color-success-bg); transform: translateX(1px); }
.tvc-chip.is-filled::before { background: var(--profit); }
.tvc-chip.is-filled .tvc-chip__code { color: #fff; background: var(--profit); border-color: var(--profit); }
.tvc-chip.is-filled .tvc-chip__result { color: var(--color-success-strong); }
.tvc-chip.is-stopped { opacity: 1; border-color: color-mix(in srgb, var(--loss) 45%, var(--line)); background: var(--color-danger-bg); }
.tvc-chip.is-stopped::before { background: var(--loss); }
.tvc-chip.is-stopped .tvc-chip__code { color: #fff; background: var(--loss); border-color: var(--loss); }
.tvc-chip.is-stopped .tvc-chip__result { color: var(--color-danger-strong); }
/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 640px) {
.tvc-wrap { padding-left: var(--space-4); padding-right: var(--space-4); }
.tvc-stage__controls { flex-direction: column; align-items: stretch; }
.tvc-stage__alt { justify-content: space-between; }
.tvc-node__detail { display: none; }
}
/* ---- Reduced motion: calm, instant, full path still shown ---------------- */
@media (prefers-reduced-motion: reduce) {
.tvc-hero__see-arrow, .tvc-sim__arrow, .tvc-inst, .tvc-step,
.tvc-node, .tvc-wire, .tvc-chip, .tvc-chip::before, .tvc-check__dot,
.tvc-node__glyph, .tvc-node__dot, .tvc-node__detail, .tvc-chip__result,
.tvc-chip__code { transition: none; }
.tvc-wire.is-flowing .tvc-wire__pulse { animation: none; }
.tvc-node.is-active .tvc-node__dot { animation: none; }
.tvc-node.is-active { box-shadow: none; }
.tvc-conduit.is-idle .tvc-node[data-hop="tradingview"] .tvc-node__dot { animation: none; }
/* Micro-interactions: state still changes, just without movement. The seg
thumb snaps to the active option; flashes and press-scale are suppressed. */
.tvc-seg__thumb, .tvc-seg__btn, .tvc-rr { transition: none; }
.tvc-payload__code.is-flash, .tvc-rr.is-flash { animation: none; }
.tvc-seg__btn:active, .tvc-inst:active, .tvc-sim:not(:disabled):active, .tvc-copy:active { transform: none; }
}
/* =========================================================================
* Wizards · Strategies — marketplace grid + split detail view
* Light, spacious, calm. Trading-dashboard information translated into the
* SpiderX light system: hairline borders, two weights, restrained accent.
* ========================================================================= */
.strat-wrap { max-width: 1180px; }
/* ── Marketplace header ─────────────────────────────────────────────────── */
.strat-head {
display: flex; align-items: flex-end; justify-content: space-between;
gap: var(--space-5); flex-wrap: wrap;
}
.strat-head__title { color: var(--text-0); margin: var(--space-2) 0 0; }
.strat-head__sub { color: var(--text-1); margin: var(--space-3) 0 0; max-width: 54ch; text-wrap: pretty; }
.strat-head__actions { display: flex; align-items: center; gap: var(--space-3); flex: none; }
.strat-balance {
display: inline-flex; align-items: baseline; gap: 6px;
padding: 7px 12px;
border: 1px solid var(--line); border-radius: var(--radius-pill);
background: var(--bg-1);
}
.strat-balance__dot {
align-self: center; width: 7px; height: 7px; border-radius: 50%;
background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.strat-balance__num { font-weight: 500; color: var(--text-0); font-variant-numeric: tabular-nums; }
.strat-balance__unit { color: var(--text-2); }
/* ── Filter chips ───────────────────────────────────────────────────────── */
.strat-filters {
display: flex; flex-wrap: wrap; gap: var(--space-2);
margin: var(--space-6) 0 var(--space-5);
}
.strat-chip {
font-family: var(--body); font-size: var(--text-13); font-weight: 400;
color: var(--text-1); background: var(--bg-1);
border: 1px solid var(--line); border-radius: var(--radius-pill);
padding: 7px 14px; cursor: pointer;
transition: color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
}
.strat-chip:hover { border-color: var(--line-bright); color: var(--text-0); }
.strat-chip:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.strat-chip.is-active {
color: var(--accent-strong); background: var(--accent-soft);
border-color: color-mix(in oklab, var(--accent) 32%, var(--line));
font-weight: 500;
}
/* ── Grid ───────────────────────────────────────────────────────────────── */
.strat-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--space-4); align-items: stretch;
}
.strat-grid__empty { grid-column: 1 / -1; }
/* ── Strategy card ──────────────────────────────────────────────────────── */
.strat-card {
position: relative; min-width: 0;
display: flex; flex-direction: column; gap: var(--space-3);
height: 100%; padding: var(--space-5);
background: var(--bg-1); border: 1px solid var(--line);
border-radius: var(--radius-lg);
transition: transform var(--motion-base) var(--ease),
box-shadow var(--motion-base) var(--ease), border-color var(--motion-base) var(--ease);
}
.strat-card:hover {
transform: translateY(-3px); border-color: var(--line-bright);
box-shadow: 0 18px 40px -28px rgba(17,19,21,0.4), 0 2px 6px -3px rgba(17,19,21,0.08);
}
/* Official strategies are featured — accent hairline reads instantly. */
.strat-card--official { border-color: color-mix(in oklab, var(--accent) 32%, var(--line)); border-width: 2px; padding: calc(var(--space-5) - 1px); }
/* Stretched link covers the card for click + keyboard nav; the action button
* (raised below) stays independently interactive. No nested