/* ════════════════════════════════════════════════════════════════════════ Design tokens — Phase 1 of the UI design refresh. Architecture: • :root holds the LIGHT theme as the canonical brand baseline (Coinbase- style fintech). Every semantic role token resolves to a light value. • [data-theme="dark"] overrides every semantic role token with the dark palette (today's existing surface colours, preserved verbatim). • Pre-paint JS in base.html sets data-theme on from localStorage. Default is "dark" for backwards compatibility — users opt into light via the topbar theme toggle. • Legacy aliases (--bg, --accent, --sp-N, --t-N) remain wired to the new role tokens so every existing rule keeps compiling. • Bridge aliases (--s-N, --c-border) repair broken template references. ════════════════════════════════════════════════════════════════════════ */ :root { /* ── Primary (Coinbase blue) ladder ────────────────────────────── */ --color-primary-50: #eff5ff; --color-primary-100: #dbe6ff; --color-primary-200: #b6cdff; --color-primary-300: #84a7ff; --color-primary-400: #4d7eff; --color-primary-500: #0052ff; --color-primary-600: #0042cc; --color-primary-700: #003299; --color-primary-800: #002266; --color-primary-900: #001433; --color-primary-translucent-08: rgba(0, 82, 255, 0.08); --color-primary-translucent-16: rgba(0, 82, 255, 0.16); /* ── Neutral / surface ramp ────────────────────────────────────── */ --color-neutral-0: #ffffff; --color-neutral-50: #f7f8fa; --color-neutral-100: #eef0f4; --color-neutral-200: #dee2eb; --color-neutral-300: #c2c8d4; --color-neutral-400: #8a91a3; --color-neutral-500: #5b616e; --color-neutral-600: #404653; --color-neutral-700: #2a2f3a; --color-neutral-800: #181c25; --color-neutral-900: #0a0b0d; /* ── Semantic ladders ──────────────────────────────────────────── */ --color-success-500: #05b169; --color-success-600: #048752; --color-success-50: #e6f6ee; --color-warning-500: #f4c622; --color-warning-600: #c9a113; --color-warning-50: #fdf6dc; --color-error-500: #df5f67; --color-error-600: #b53941; --color-error-50: #fbe7e8; /* ── Semantic role tokens (template-facing API, light defaults) ── */ --bg: var(--color-neutral-50); --bg-elevated: var(--color-neutral-0); --surface: var(--color-neutral-0); --surface-2: var(--color-neutral-50); --surface-3: var(--color-neutral-100); --ink: var(--color-neutral-900); --ink-strong: #000; --muted: var(--color-neutral-500); --on-surface-variant: var(--color-neutral-600); --border: var(--color-neutral-200); --border-strong: var(--color-neutral-300); --primary: var(--color-primary-500); --primary-hover: var(--color-primary-600); --on-primary: var(--color-neutral-0); --primary-container: var(--color-primary-50); --on-primary-container: var(--color-primary-700); --success: var(--color-success-500); --on-success: var(--color-neutral-0); --success-container: var(--color-success-50); --on-success-container: var(--color-success-600); --warn: var(--color-warning-500); --on-warn: #2a1f00; --warn-container: var(--color-warning-50); --on-warn-container: var(--color-warning-600); --error: var(--color-error-500); --on-error: var(--color-neutral-0); --error-container: var(--color-error-50); --on-error-container: var(--color-error-600); --info: var(--primary); --info-container: var(--primary-container); --on-info-container: var(--on-primary-container); --ok: var(--success); --hold: var(--color-neutral-400); --bar-track: var(--surface-3); /* Snackbar surface — high-contrast on the ambient page */ --color-snackbar-surface: var(--color-neutral-800); --color-snackbar-ink: var(--color-neutral-0); /* Chart strokes (uPlot reads these via getComputedStyle in P3) */ --color-chart-equity: var(--color-primary-500); --color-chart-drawdown: var(--color-error-500); --color-chart-compare-a: var(--color-primary-500); --color-chart-compare-b: #7eb37a; /* Accent — legacy alias for backward-compatibility */ --accent: var(--primary); --accent-ink: var(--on-primary); /* ── Typography ────────────────────────────────────────────────── */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace; --text-2xs: 0.6875rem; /* 11 */ --text-xs: 0.75rem; /* 12 */ --text-sm: 0.8125rem; /* 13 */ --text-md: 0.875rem; /* 14 */ --text-base:1rem; /* 16 */ --text-lg: 1.125rem; /* 18 */ --text-xl: 1.25rem; /* 20 */ --text-2xl: 1.5rem; /* 24 */ --text-3xl: 1.75rem; /* 28 */ --text-4xl: 2.125rem; /* 34 */ --leading-tight: 1.15; --leading-snug: 1.25; --leading-normal: 1.45; --leading-relaxed: 1.6; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-wider: 0.08em; /* Legacy type aliases (templates still reference these). */ --t-display: var(--text-3xl); --t-headline: var(--text-2xl); --t-title: var(--text-base); --t-body: var(--text-md); --t-body-lg: var(--text-base); --t-label: var(--text-xs); --t-label-sm: var(--text-2xs); /* ── Spacing ───────────────────────────────────────────────────── */ --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 3rem; /* 48 */ --space-8: 4rem; /* 64 */ --sp-1: var(--space-1); --sp-2: var(--space-2); --sp-3: var(--space-3); --sp-4: var(--space-4); --sp-5: var(--space-5); --sp-6: var(--space-6); --sp-7: var(--space-7); /* Bridge aliases — repair --s-N references in templates. */ --s-1: var(--space-1); --s-2: var(--space-2); --s-3: var(--space-3); --s-4: var(--space-4); --s-5: var(--space-5); --gap: var(--space-4); /* Bridge alias — repair --c-border reference in strategy.html. */ --c-border: var(--border); /* ── Radius ────────────────────────────────────────────────────── */ --radius-xs: 4px; --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 999px; /* ── Shadow / elevation (soft fintech) ─────────────────────────── */ --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.02); --shadow-2: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04); --shadow-3: 0 12px 32px rgba(15, 23, 42, 0.10), 0 4px 8px rgba(15, 23, 42, 0.04); --shadow-focus: 0 0 0 3px var(--color-primary-translucent-16); /* ── Motion ────────────────────────────────────────────────────── */ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-normal: 220ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 320ms cubic-bezier(0.4, 0, 0.2, 1); /* Focus ring */ --focus-outline: 2px solid var(--primary); --focus-offset: 2px; /* Layout */ --container-narrow: 640px; --container: 960px; --container-wide: 1200px; --container-xl: 1440px; --bottom-nav-h: 0px; --topbar-h: 56px; --z-topbar: 10; --z-bottom-nav: 20; --z-drawer: 50; --z-modal: 100; --z-snackbar: 200; } /* ════════════════════════════════════════════════════════════════════════ Dark theme — overrides every semantic role token. Surface values match today's deployed dark palette so no visible regression for current users. ════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] { --bg: #0a0f1a; --bg-elevated: #141b2d; --surface: #141b2d; --surface-2: #1c2540; --surface-3: #232d4d; --ink: #eef1fa; --ink-strong: #ffffff; --muted: #a3acc6; --on-surface-variant: #c5cce0; --border: #2b3352; --border-strong: #3a4470; --primary: #5aa3ff; --primary-hover: #7eb6ff; --on-primary: #041225; --primary-container: rgba(90, 163, 255, 0.20); --on-primary-container: #c8defc; --success: #3ddc97; --on-success: #06231a; --success-container: rgba(61, 220, 151, 0.18); --on-success-container: #b2f2d4; --warn: #ffc850; --on-warn: #2a1f00; --warn-container: rgba(255, 200, 80, 0.14); --on-warn-container: #ffe2a8; --error: #ff6b6b; --on-error: #240505; --error-container: rgba(255, 107, 107, 0.18); --on-error-container: #ffd0d0; --hold: #5b6790; --bar-track: #1c2540; --color-snackbar-surface: #2c3760; --color-snackbar-ink: #ffffff; --color-chart-equity: #5aa3ff; --color-chart-drawdown: #d96565; --color-chart-compare-a: #5aa3ff; --color-chart-compare-b: #7eb37a; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.30), 0 1px 1px rgba(0, 0, 0, 0.18); --shadow-2: 0 4px 8px rgba(0, 0, 0, 0.30), 0 2px 4px rgba(0, 0, 0, 0.18); --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.45); --shadow-focus: 0 0 0 3px rgba(90, 163, 255, 0.32); } @media (prefers-reduced-motion: reduce) { :root { --transition-fast: 0ms; --transition-normal: 0ms; --transition-slow: 0ms; } } * { box-sizing: border-box; } /* Global focus-visible default — replaced by component-specific styles below where needed but never suppressed without a replacement. */ :focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-offset); border-radius: 6px; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal); min-height: 100dvh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* MD3 typography roles applied to native headings (I2). */ h1 { font-size: var(--t-display); line-height: 1.15; font-weight: 700; margin: 0 0 var(--sp-3); } h2 { font-size: var(--t-headline); line-height: 1.2; font-weight: 700; margin: 0 0 var(--sp-3); } h3 { font-size: var(--t-title); line-height: 1.3; font-weight: 700; margin: 0 0 var(--sp-2); } small { font-size: var(--t-label); } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } .topbar { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-3) var(--sp-4); padding-top: max(var(--sp-3), env(safe-area-inset-top, 0px)); border-bottom: 1px solid var(--border); background: var(--surface); position: sticky; top: 0; z-index: 10; } .brand { font-weight: 700; color: var(--ink); } .nav-left { display: flex; align-items: center; gap: 16px; } .container { max-width: 640px; margin: 0 auto; padding: var(--sp-4) var(--sp-4) var(--sp-7); } @media (min-width: 720px) { .container { max-width: 720px; } } @media (min-width: 960px) { .container { max-width: 880px; } } .stack > * + * { margin-top: var(--gap); } .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; } .cards { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); grid-template-columns: 1fr; } @media (min-width: 600px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); } } @media (min-width: 960px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } } label { display: block; font-weight: 600; } label small { display: block; font-weight: 400; margin-top: 4px; } input[type="email"], input[type="password"], input[type="text"], textarea { width: 100%; background: var(--surface-2); border: 1px solid var(--border); color: var(--ink); padding: 12px 14px; border-radius: 10px; font-size: 16px; /* prevents iOS zoom-on-focus */ margin-top: 6px; min-height: 44px; -webkit-appearance: none; } textarea { min-height: 140px; resize: vertical; } button, .button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 18px; border-radius: 10px; border: 1px solid transparent; font-weight: 600; font-size: 16px; cursor: pointer; text-decoration: none; } button.primary, .primary.button { background: var(--accent); color: var(--accent-ink); } button.secondary, .secondary.button { background: var(--surface-2); color: var(--ink); border-color: var(--border); } button.linkish { background: transparent; color: var(--muted); border: none; padding: 4px 0; font-weight: 500; min-height: 0; } form.inline { display: inline; } .muted { color: var(--muted); } .error { color: var(--error); } .pill { display: inline-flex; align-items: center; font-size: var(--text-xs); font-weight: var(--weight-semibold); padding: 2px 10px; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--muted); text-transform: uppercase; letter-spacing: var(--tracking-wider); white-space: nowrap; } .pill-active { background: var(--success-container); color: var(--on-success-container); } .pill-draft { background: var(--primary-container); color: var(--on-primary-container); } .pill-paused { background: var(--warn-container); color: var(--on-warn-container); } .pill-ready { background: var(--warn-container); color: var(--on-warn-container); } .prompt { white-space: pre-wrap; font-family: ui-monospace, Menlo, Consolas, monospace; background: var(--surface-2); padding: 12px; border-radius: 8px; margin: 0; } .mono { font-family: ui-monospace, Menlo, Consolas, monospace; } .chat { display: flex; flex-direction: column; gap: 10px; max-height: 60dvh; overflow-y: auto; padding: 4px 2px; } .turn { padding: 10px 12px; border-radius: 10px; max-width: 90%; } .turn-role { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; } .turn-user { background: var(--surface-2); align-self: flex-end; } .turn-analyst { background: rgba(90, 163, 255, 0.12); align-self: flex-start; } /* R-6: analyst-avatar dot — small filled circle with check, sits before the role label on assistant turns. Inline-flex so it lines up with the label baseline; current colour cascades to the SVG stroke. */ .turn .turn-avatar { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 999px; background: var(--primary); color: var(--on-primary); margin-right: var(--space-2); vertical-align: middle; } .turn .turn-avatar + .turn-role { display: inline-block; vertical-align: middle; } details summary { cursor: pointer; font-weight: 600; } details[open] summary { margin-bottom: 10px; } @media (min-width: 720px) { .container { padding: 28px; } } /* ── Reports dashboard ──────────────────────────────────────────────── */ /* (--warn, --hold, --bar-track are defined in the top token block.) */ @media (min-width: 720px) { .reports.stack { gap: 20px; } } /* Window picker */ .window-picker { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .window-pill { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); color: var(--muted); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .window-pill:hover { text-decoration: none; color: var(--ink); border-color: var(--accent); } .window-pill.is-active { background: rgba(90, 163, 255, 0.16); color: var(--accent); border-color: rgba(90, 163, 255, 0.4); } .window-pill.chip-clear { margin-left: 8px; text-transform: none; letter-spacing: 0; color: var(--ink); } /* Freshness badge */ .freshness { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--surface-2); } .freshness::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); } .freshness-ok { color: var(--ok); } .freshness-ok::before { background: var(--ok); } .freshness-amber { color: var(--warn); } .freshness-amber::before { background: var(--warn); } .freshness-red { color: var(--error); } .freshness-red::before { background: var(--error); } /* KPI strip */ .kpi-strip { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); grid-template-columns: 1fr 1fr; } @media (min-width: 720px) { .kpi-strip { grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); } } .kpi { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; overflow: hidden; transition: border-color 0.12s ease, transform 0.12s ease; } .kpi:hover { border-color: var(--accent); } .kpi-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .kpi-value { font-size: 32px; font-weight: 700; line-height: 1.05; margin-top: 6px; color: var(--ink); } .kpi-sub { margin-top: 6px; font-size: 13px; color: var(--ink); } .kpi-alert .kpi-value { color: var(--error); } /* D26: performance chart card (Dashboard + Strategy page + Reports). */ .perf-chart { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); } .perf-chart__header { align-items: center; gap: var(--sp-3); flex-wrap: wrap; } .perf-chart__title { margin: 0; font-size: var(--text-lg); } .perf-chart__kpis { /* Tighter tiles than the report KPI strip — 5–6 may need to fit. */ grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } .perf-chart__body { display: flex; flex-direction: column; gap: var(--sp-3); } .perf-chart__caveat { margin: 0; } .perf-kpi.is-up .kpi-value { color: var(--success, #3ddc97); } .perf-kpi.is-down .kpi-value { color: var(--error, #ff6b6b); } .perf-kpi.is-neutral .kpi-value { color: var(--ink); } .perf-chart--compact .perf-chart__kpis { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); } /* uPlot legend — theme it so the series label + live cursor value are readable on both light and dark themes. uPlot ships unstyled text that inherits from the chart host; chart-host's surface background has too little contrast against muted defaults. */ .u-legend { color: var(--ink); font-size: 0.8125rem; margin-top: var(--sp-2); } .u-legend .u-label { color: var(--muted); margin-right: 4px; } .u-legend .u-value { color: var(--ink); font-variant-numeric: tabular-nums; } .u-legend th { font-weight: 600; padding: 0 var(--sp-2); } /* Sparkline */ .sparkline { position: absolute; inset: auto 0 0 0; height: 28px; display: flex; align-items: flex-end; gap: 1px; padding: 0 14px 0; opacity: 0.35; pointer-events: none; } .spark-bar { flex: 1; background: var(--accent); border-radius: 1px 1px 0 0; min-height: 1px; } /* "Why no action?" banner */ .banner-hold { background: rgba(90, 163, 255, 0.06); border: 1px solid rgba(90, 163, 255, 0.25); border-radius: var(--radius); padding: 14px 16px; } .banner-hold p { margin: 0 0 10px; } .reason-bars { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; } .reason-bar { display: grid; grid-template-columns: minmax(120px, 1.2fr) minmax(80px, 3fr) auto; gap: 10px; align-items: center; font-size: 13px; } .reason-bar .bar { background: var(--bar-track); border-radius: 4px; height: 10px; overflow: hidden; } .reason-bar .bar-fill { display: block; height: 100%; background: var(--accent); } /* Outcome pills */ .pill-placed { background: var(--success-container); color: var(--on-success-container); } .pill-rejected { background: var(--error-container); color: var(--on-error-container); } .pill-no_action_gate, .pill-no_action_claude { background: var(--surface-2); color: var(--muted); } .pill-no_action_claude { border: 1px solid var(--border); } /* Timeline */ .timeline { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; } .tick-row { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--border); border-radius: var(--radius); padding: 10px 14px; display: grid; grid-template-columns: 1fr; gap: 4px; } .tick-row.tick-placed { border-left-color: var(--ok); } .tick-row.tick-rejected { border-left-color: var(--error); } .tick-row.tick-no_action_gate, .tick-row.tick-no_action_claude { border-left-color: var(--hold); } .tick-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 12px; } .tick-ts { font-size: 12px; } .tick-sid { font-size: 12px; } .tick-reason { margin: 2px 0 0; font-size: 14px; color: var(--ink); } .tick-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .chip { font-size: 11px; background: var(--surface-2); color: var(--muted); padding: 2px 8px; border-radius: 6px; font-family: ui-monospace, Menlo, Consolas, monospace; } .chip-side { color: var(--ink); } .chip-warn { color: var(--warn); background: rgba(255, 200, 80, 0.1); } .empty-state { text-align: center; padding: var(--sp-6) var(--sp-4); } .empty-state h1 { font-size: var(--t-headline); } .empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin: 0 auto var(--sp-3); border-radius: 50%; background: var(--surface-2); color: var(--muted); } .empty-icon svg { display: block; } .empty-cta-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; margin-top: var(--sp-4); } /* Edit-diff preview (B4) */ dialog.modal-wide { width: min(720px, calc(100vw - 32px)); } .diff-meta { font-size: var(--t-body); margin-bottom: var(--sp-2); } .diff-added { color: var(--success); font-weight: 700; margin-right: var(--sp-2); } .diff-removed { color: var(--error); font-weight: 700; margin-right: var(--sp-2); } .diff-over { color: var(--error); font-weight: 700; margin-left: var(--sp-2); } .diff-block { background: var(--surface-2); border-radius: var(--radius-sm); padding: var(--sp-3); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: var(--t-label); line-height: 1.5; max-height: 360px; overflow: auto; margin: 0; white-space: pre-wrap; } .diff-line { display: block; } .diff-add { color: var(--on-success-container); background: rgba(61, 220, 151, 0.12); } .diff-del { color: var(--on-error-container); background: rgba(255, 107, 107, 0.12); text-decoration: line-through; } .diff-ctx { color: var(--muted); } /* Onboarding checklist (G3) */ .onboarding { background: var(--primary-container); border-color: rgba(90,163,255,0.4); } .onboarding h2 { font-size: var(--t-title); margin: 0; } .onboarding-steps { list-style: none; padding: 0; margin: var(--sp-3) 0 0; display: grid; gap: var(--sp-3); } .onboarding-steps li { display: grid; grid-template-columns: 32px 1fr; gap: var(--sp-3); align-items: start; } .onboarding-mark { width: 28px; height: 28px; border-radius: 50%; background: var(--surface-2); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: var(--t-body); } .onboarding-steps li.is-done .onboarding-mark { background: var(--success); color: var(--on-success); } .onboarding-steps li.is-done strong { text-decoration: line-through; color: var(--muted); } .onboarding-steps p { margin: 2px 0 4px; font-size: var(--t-body); } /* Glossary list (G2) */ .glossary { margin: 0; } .glossary dt { font-weight: 700; margin-top: var(--sp-4); font-size: var(--t-body-lg); } .glossary dt:first-of-type { margin-top: 0; } .glossary dd { margin: 4px 0 0; color: var(--on-surface-variant); font-size: var(--t-body); line-height: 1.55; } /* Breadcrumbs (E2) */ .breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); font-size: var(--t-body); color: var(--muted); margin-bottom: var(--sp-3); } .breadcrumbs a { color: var(--muted); } .breadcrumbs a:hover { color: var(--ink); } .breadcrumbs .current { color: var(--ink); font-weight: 600; } .breadcrumbs .sep { color: var(--border-strong); user-select: none; } /* Tick row hover/focus — affordance that it opens a drawer. */ .tick-row { cursor: pointer; transition: border-color 0.12s ease, background 0.12s ease; } .tick-row:hover { border-color: var(--accent); background: rgba(90, 163, 255, 0.04); } .tick-row:focus-visible { border-color: var(--accent); background: rgba(90, 163, 255, 0.08); outline: var(--focus-outline); outline-offset: var(--focus-offset); } .tick-chevron { margin-left: auto; font-size: 18px; } /* ── Drawer ─────────────────────────────────────────────────────────── */ .drawer-host { position: fixed; inset: 0; pointer-events: none; z-index: 50; } .drawer-host:empty { display: none; } .drawer { position: fixed; top: 0; right: 0; height: 100dvh; width: 100%; max-width: 540px; background: var(--surface); border-left: 1px solid var(--border); padding: 18px 18px 32px; overflow-y: auto; pointer-events: auto; box-shadow: -16px 0 40px rgba(0, 0, 0, 0.45); animation: drawer-in 180ms ease-out; } @media (prefers-reduced-motion: reduce) { .drawer { animation: none; } } @keyframes drawer-in { from { transform: translateX(20px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .drawer-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); z-index: 1; } .drawer-close { background: transparent; color: var(--muted); border: 1px solid var(--border); border-radius: 8px; width: 48px; height: 48px; min-height: 48px; padding: 0; font-size: 20px; display: inline-flex; align-items: center; justify-content: center; } .drawer-close:hover { color: var(--ink); border-color: var(--accent); } .drawer-title { margin: 0 0 4px; font-size: 20px; } .drawer-ts { margin: 0 0 14px; font-size: 12px; } .drawer-desc { margin: 0 0 14px; } .drawer-section { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); } .drawer-section h3 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); } .drawer-table { width: 100%; border-collapse: collapse; font-size: 13px; } .drawer-table th, .drawer-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); } .drawer-table th { color: var(--muted); font-weight: 600; } .drawer-table th.num, .drawer-table td.num { text-align: right; font-variant-numeric: tabular-nums; } .drawer-rejections { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .rejection-card { background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--error); padding: 10px 12px; border-radius: 8px; font-size: 13px; } .rejection-card .pill { font-size: 11px; } .rejection-detail { margin: 6px 0 4px; font-family: ui-monospace, Menlo, Consolas, monospace; } .rejection-meaning, .rejection-fix { margin: 4px 0; font-size: 12px; } .drawer-reasoning { white-space: pre-wrap; font-size: 14px; } .drawer-transcript { font-size: 12px; max-height: 260px; overflow-y: auto; } .drawer-dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0; font-size: 13px; } .drawer-dl dt { color: var(--muted); } .drawer-dl dd { margin: 0; } .slip-warn { color: var(--warn); font-weight: 700; } /* ── Filter bar ─────────────────────────────────────────────────────── */ .filter-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; } .filter-bar .filter-search { flex: 1; min-width: 180px; margin: 0; min-height: 38px; padding: 8px 12px; } .filter-bar .filter-apply { min-height: 38px; padding: 6px 16px; } .filter-bar .filter-reset { display: inline-flex; align-items: center; font-size: 13px; } .facet { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 0; } .facet > summary { list-style: none; padding: 8px 14px; font-size: 13px; font-weight: 600; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; user-select: none; } .facet > summary::-webkit-details-marker { display: none; } .facet > summary::after { content: "▾"; color: var(--muted); font-size: 10px; } .facet[open] > summary::after { content: "▴"; } .facet[open] { border-color: var(--accent); } .facet .badge { display: inline-flex; align-items: center; justify-content: center; background: var(--accent); color: var(--accent-ink); border-radius: 999px; min-width: 18px; height: 18px; font-size: 11px; font-weight: 700; padding: 0 6px; } .facet-options { position: absolute; top: calc(100% + 4px); left: 0; z-index: 5; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 8px; display: grid; gap: 4px; min-width: 180px; max-height: 280px; overflow-y: auto; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); } .facet-opt { display: flex; align-items: center; gap: 8px; padding: 4px 6px; font-weight: 500; cursor: pointer; border-radius: 6px; } .facet-opt:hover { background: var(--surface-2); } .facet-opt input { margin: 0; } .active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; } .filter-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; background: var(--surface-2); color: var(--ink); font-size: 12px; } .filter-chip:hover { text-decoration: none; background: var(--surface); border-color: var(--accent); } .filter-export { margin-left: auto; font-size: 13px; font-weight: 600; } /* Freshness row above KPIs (live region). */ .freshness-row { display: flex; justify-content: flex-end; } .empty-state p { margin: 0 0 8px; } .empty-state p:last-child { margin-bottom: 0; } /* ── Adaptive navigation ──────────────────────────────────────────────── Compact (≤599 px): top app bar with brand + logout, persistent bottom navigation bar with Dashboard / Reports / Settings. ≥600 px: top bar carries the primary nav inline, bottom bar hidden. */ .topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); width: 100%; max-width: 1280px; margin: 0 auto; } .topnav { display: none; gap: var(--sp-3); flex: 1; margin-left: var(--sp-4); } .topnav .nav-item { color: var(--muted); padding: 6px var(--sp-3); border-radius: 999px; font-size: var(--t-body); font-weight: 600; } .topnav .nav-item:hover { color: var(--ink); text-decoration: none; } .topnav .nav-item.is-active { color: var(--primary); background: var(--primary-container); } .bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface); border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom, 0); z-index: 20; } .bottom-nav .nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; color: var(--muted); font-size: var(--t-label); font-weight: 600; padding: 6px var(--sp-2); } .bottom-nav .nav-item:hover { text-decoration: none; } .bottom-nav .nav-item.is-active { color: var(--primary); } .bottom-nav .nav-icon { font-size: 18px; line-height: 1; } @media (min-width: 600px) { .topnav { display: flex; } .bottom-nav { display: none; } } /* Reserve space for bottom-nav on compact so content does not slide under it. */ @media (max-width: 599px) { body:has(.bottom-nav) { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0)); } } /* ── Alerts (D1 — single component for success/error/warning/info) ──── */ .alert { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3) var(--sp-4); border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface-2); color: var(--ink); font-size: var(--t-body); line-height: 1.45; } .alert + .alert { margin-top: var(--sp-3); } .alert-icon { flex: 0 0 auto; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; border-radius: 999px; } .alert-body { flex: 1; } .alert-title { font-weight: 700; margin: 0 0 2px; font-size: var(--t-body-lg); } .alert p { margin: 0; } .alert p + p { margin-top: 4px; } .alert-action { margin-top: var(--sp-2); display: inline-block; font-weight: 600; } .alert-success { border-color: rgba(61, 220, 151, 0.4); background: var(--success-container); color: var(--on-success-container); } .alert-success .alert-icon { background: var(--success); color: var(--on-success); } .alert-error { border-color: rgba(255, 107, 107, 0.45); background: var(--error-container); color: var(--on-error-container); } .alert-error .alert-icon { background: var(--error); color: var(--on-error); } .alert-warning { border-color: rgba(255, 200, 80, 0.45); background: var(--warn-container); color: var(--on-warn-container); } .alert-warning .alert-icon { background: var(--warn); color: #2a1f00; } .alert-info { border-color: rgba(90, 163, 255, 0.45); background: var(--primary-container); color: var(--on-primary-container); } .alert-info .alert-icon { background: var(--primary); color: var(--on-primary); } /* ── Snackbar (A2) ──────────────────────────────────────────────────── */ .snackbar { position: fixed; left: 50%; bottom: calc(var(--sp-5) + env(safe-area-inset-bottom, 0)); transform: translate(-50%, calc(100% + 32px)); min-width: 240px; max-width: min(560px, calc(100vw - 32px)); padding: var(--sp-3) var(--sp-4); background: var(--color-snackbar-surface); color: var(--color-snackbar-ink); border-radius: var(--radius); box-shadow: var(--shadow-3); display: flex; align-items: center; gap: var(--sp-3); font-size: var(--t-body-lg); z-index: 100; opacity: 0; pointer-events: none; transition: transform 220ms ease, opacity 200ms ease; } .snackbar.is-visible { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; } .snackbar-text { flex: 1; } .snackbar-action { background: transparent; border: none; color: var(--primary); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--t-label); padding: var(--sp-2) var(--sp-3); min-height: 0; cursor: pointer; } @media (max-width: 599px) { .snackbar { bottom: calc(56px + env(safe-area-inset-bottom, 0) + var(--sp-3)); } } @media (prefers-reduced-motion: reduce) { .snackbar { transition: opacity 120ms ease; transform: translate(-50%, 0); } } /* ── Connection-loss banner (A3) ───────────────────────────────────── */ .conn-banner { display: none; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border: 1px solid rgba(255, 200, 80, 0.45); background: var(--warn-container); color: var(--on-warn-container); border-radius: var(--radius); margin-bottom: var(--sp-3); font-size: var(--t-body); } .conn-banner.is-visible { display: flex; } .conn-banner-action { margin-left: auto; background: transparent; border: 1px solid currentColor; color: inherit; padding: 4px var(--sp-3); border-radius: var(--radius-sm); min-height: 32px; font-size: var(--t-body); } .freshness::before { transition: background 200ms ease; } .is-disconnected .freshness::before { background: var(--warn) !important; } .is-disconnected .freshness { color: var(--warn) !important; } /* ── Modal dialog (B1, B2) — uses native element ─────────── */ dialog.modal { width: min(420px, calc(100vw - 32px)); margin: auto; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-3); } dialog.modal::backdrop { background: rgba(0, 0, 0, 0.55); } .modal-body { padding: var(--sp-5); } .modal-title { margin: 0 0 var(--sp-3); font-size: var(--t-headline); font-weight: 700; } .modal-text { margin: 0; color: var(--on-surface-variant); font-size: var(--t-body-lg); line-height: 1.5; } .modal-text + .modal-text { margin-top: var(--sp-3); } .modal-impact { margin-top: var(--sp-4); padding: var(--sp-3); border-radius: var(--radius-sm); background: var(--surface-2); font-size: var(--t-body); } .modal-impact ul { margin: 4px 0 0; padding-left: var(--sp-5); } .modal-actions { display: flex; justify-content: flex-end; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5) var(--sp-5); } .modal-confirm-input { margin-top: var(--sp-4); } .modal-confirm-input label { display: block; font-size: var(--t-body); margin-bottom: 4px; } .modal-confirm-input input { width: 100%; } button.destructive, .destructive.button { background: var(--error); color: var(--on-error); } button.destructive:hover:not(:disabled), .destructive.button:hover:not([aria-disabled="true"]) { background: var(--color-error-600); } button:disabled, .button[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; filter: grayscale(0.2); } /* ── Form field affordances (C1, C2, C3) ──────────────────────────── */ .field { display: block; } .field + .field { margin-top: var(--sp-4); } .field-label { display: block; font-weight: 600; font-size: var(--t-body); margin-bottom: 4px; } .field-required::after { content: " *"; color: var(--error); font-weight: 700; } .field-helper { display: block; margin-top: 4px; font-size: var(--t-label); color: var(--muted); } .field-error { display: none; margin-top: 4px; font-size: var(--t-label); color: var(--error); font-weight: 600; } .field.has-error .field-error { display: block; } .field.has-error .field-helper { display: none; } .field.has-error input, .field.has-error textarea, .field.has-error select { border-color: var(--error); box-shadow: 0 0 0 1px var(--error); } .char-counter { display: block; text-align: right; font-size: var(--t-label); color: var(--muted); margin-top: 4px; font-variant-numeric: tabular-nums; } .char-counter.is-warn { color: var(--warn); } .char-counter.is-over { color: var(--error); font-weight: 700; } /* ── HTMX & form-submit loading state (A1) ────────────────────────── */ button.is-loading, button.htmx-request, .button.is-loading, .button.htmx-request { position: relative; color: transparent !important; pointer-events: none; } button.is-loading::after, button.htmx-request::after, .button.is-loading::after, .button.htmx-request::after { content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; color: var(--ink); animation: spin 720ms linear infinite; } button.primary.is-loading::after, button.primary.htmx-request::after, .primary.button.is-loading::after, .primary.button.htmx-request::after { color: var(--on-primary); } @keyframes spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { button.is-loading::after, button.htmx-request::after, .button.is-loading::after, .button.htmx-request::after { animation-duration: 1.6s; } } /* Skeleton placeholders for HTMX target swaps. */ .skeleton { background: linear-gradient(90deg, var(--surface-2) 0%, var(--surface-3) 50%, var(--surface-2) 100%); background-size: 200% 100%; animation: skeleton-shimmer 1.4s ease-in-out infinite; border-radius: var(--radius-sm); color: transparent !important; } @keyframes skeleton-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } } @media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } } /* ── Mobile filter sheet (H1) ─────────────────────────────────────── */ @media (max-width: 599px) { .facet[open] { /* Promote the dropdown panel to a full-width bottom sheet on compact. */ position: static; } .facet[open] > .facet-options { position: fixed; inset: auto 0 0 0; top: auto; z-index: 60; width: 100%; max-height: 70vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding: var(--sp-4); box-shadow: var(--shadow-3); padding-bottom: calc(var(--sp-5) + env(safe-area-inset-bottom, 0)); } .facet[open]::before { /* Backdrop dimming the page behind the sheet. */ content: ""; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 55; } .facet-opt { padding: var(--sp-3) var(--sp-2); min-height: 48px; } /* Lock body scroll while any filter sheet is open. */ body:has(.facet[open]) { overflow: hidden; } } /* ── Real-world data presentation (F2) ─────────────────────────────── */ .num { font-variant-numeric: tabular-nums; text-align: right; } .unit { color: var(--muted); font-weight: 500; margin-left: 4px; } /* Tighten plain freshness badge text colour for contrast. */ .freshness-amber { color: #ffd784; } .freshness-red { color: #ff8b8b; } /* Underlined link helper for inline jargon (info dotted underline). */ .term { border-bottom: 1px dotted var(--muted); cursor: help; } /* Reduce max-width sprawl of card contents on tablet+. */ @media (min-width: 600px) { .container { padding: var(--sp-5) var(--sp-4) var(--sp-7); } } /* Override .secondary disabled state to remain readable. */ button.secondary:disabled, .secondary.button[aria-disabled="true"] { background: var(--surface-2); color: var(--muted); } /* Keyboard shortcuts cheat-sheet (K3). */ .shortcut-grid { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-2) var(--sp-4); margin: 0; font-size: var(--t-body); } .shortcut-grid dt { display: flex; gap: 4px; } .shortcut-grid dd { margin: 0; color: var(--on-surface-variant); } kbd { display: inline-block; padding: 1px 6px; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 4px; background: var(--surface-2); color: var(--ink); font-family: ui-monospace, Menlo, Consolas, monospace; font-size: var(--t-label); min-width: 18px; text-align: center; } /* Reason-search typeahead popover (E4). */ .filter-search-wrap { position: relative; flex: 1; min-width: 180px; } .filter-search-wrap .filter-search { width: 100%; } .suggest-popover { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30; } .suggest-popover:empty { display: none; } .suggest-list { list-style: none; padding: var(--sp-2); margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-3); max-height: 280px; overflow-y: auto; } .suggest-list li { margin: 0; } .suggest-item { width: 100%; text-align: left; background: transparent; border: none; border-radius: var(--radius-sm); padding: var(--sp-2) var(--sp-3); color: var(--ink); font-size: var(--t-body); cursor: pointer; min-height: 36px; } .suggest-item:hover, .suggest-item:focus-visible { background: var(--surface-2); } /* 30D summary-only banner — KPI tiles do the heavy lifting; this just tells the user the timeline is hidden and offers a drill-into link. */ .summary-note p { margin: 0; } .summary-note a { font-weight: 600; } /* Inline-editable strategy title. View mode shows the text + a small pencil icon; clicking the pencil swaps in an input + save (check) icon. Saving posts the existing /rename form; click-outside or Enter also saves; Escape cancels. */ .title-edit { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; } .title-edit-display { display: inline-flex; align-items: center; gap: var(--sp-2); margin: 0; flex-wrap: wrap; } .title-edit-text { word-break: break-word; } .title-edit-form { display: none; align-items: center; gap: var(--sp-2); flex: 1 1 auto; min-width: 0; } .title-edit[data-title-mode="edit"] .title-edit-display { display: none; } .title-edit[data-title-mode="edit"] .title-edit-form { display: inline-flex; } .title-edit-input { font: inherit; font-size: var(--t-headline); font-weight: 700; line-height: 1.2; margin: 0; padding: 4px 10px; min-height: 0; flex: 1 1 auto; width: auto; min-width: 0; } .title-edit-icon-btn { background: transparent; border: 1px solid transparent; color: var(--muted); padding: 4px; border-radius: 8px; min-height: 0; min-width: 0; line-height: 0; display: inline-flex; align-items: center; justify-content: center; } .title-edit-icon-btn:hover { color: var(--ink); background: var(--surface-2); } .title-edit-icon-btn:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-offset); } /* J4 — Honour reduced-motion for the few transitions that aren't already gated. */ @media (prefers-reduced-motion: reduce) { .kpi, .tick-row, .freshness::before { transition: none; } } /* ════════════════════════════════════════════════════════════════════════ Phase 1 additions — selectors used in templates that previously had no matching CSS rule. Each fix corresponds to a punch-list row in UI_DESIGN_REQUIREMENTS.md §8. ════════════════════════════════════════════════════════════════════════ */ /* Horizontal rule — used in settings.html for section dividers. */ hr { border: none; height: 1px; background: var(--border); margin: var(--sp-5) 0; } /* Theme toggle button (topbar). Sun/moon icon flip via [data-theme]. */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); cursor: pointer; transition: color var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast); } .theme-toggle:hover { color: var(--ink); border-color: var(--primary); } .theme-toggle:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-offset); } .theme-toggle .theme-toggle-icon { line-height: 0; } .theme-toggle .theme-icon-sun { display: none; } .theme-toggle .theme-icon-moon { display: inline; } [data-theme="dark"] .theme-toggle .theme-icon-sun { display: inline; } [data-theme="dark"] .theme-toggle .theme-icon-moon { display: none; } /* KPI grid layout — used in backtest.html, reports_backtests.html. */ .kpi-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 600px) { .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); } } @media (min-width: 960px) { .kpi-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } } /* KPI card — backtest variant. Reuses .kpi visual rules with structured slots. */ .kpi-card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4); display: flex; flex-direction: column; min-height: 96px; overflow: hidden; transition: border-color var(--transition-fast); } .kpi-card:hover { border-color: var(--border-strong); } .kpi-card .kpi-label { font-size: var(--text-2xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--muted); } .kpi-card .kpi-value { margin-top: var(--space-2); font-size: var(--text-3xl); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; line-height: 1.1; color: var(--ink); } .kpi-card .kpi-sub { margin-top: var(--space-1); font-size: var(--text-sm); color: var(--muted); } @media (prefers-reduced-motion: reduce) { .kpi-card { transition: none; } } /* Pos / neg numeric tints. Use as a class on a .kpi-value or .num cell. */ .pos { color: var(--success); } .neg { color: var(--error); } /* Key-value descriptor list — used in backtest.html for run metadata. */ .kv-grid { display: grid; gap: var(--space-2) var(--space-4); grid-template-columns: max-content 1fr; font-size: var(--text-sm); margin: 0; } .kv-grid dt { color: var(--muted); font-weight: var(--weight-semibold); } .kv-grid dd { margin: 0; font-family: var(--font-mono); color: var(--ink); } /* Generic table — alias for .trade-ledger / future .tbl uses. */ .trade-ledger { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-sm); font-variant-numeric: tabular-nums; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } .trade-ledger th, .trade-ledger td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border); } .trade-ledger th { background: var(--surface-2); color: var(--muted); font-weight: var(--weight-semibold); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); position: sticky; top: 0; z-index: 1; } .trade-ledger tbody tr:last-child td { border-bottom: none; } .trade-ledger tbody tr:hover { background: var(--surface-2); } .trade-ledger .num, .trade-ledger td.num, .trade-ledger th.num { text-align: right; font-family: var(--font-mono); } .trade-ledger .num.pos { color: var(--success); } .trade-ledger .num.neg { color: var(--error); } /* Table scroll wrapper — drop in around any wide table for mobile safety. */ .tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-lg); } .tbl-scroll > .trade-ledger { border-radius: 0; border-left: none; border-right: none; } /* Progress bar — used during backtest run status. */ .progress { display: block; width: 100%; height: 6px; background: var(--surface-2); border-radius: var(--radius-pill); overflow: hidden; } .progress-bar { display: block; height: 100%; background: var(--primary); border-radius: inherit; transition: width var(--transition-normal); } @media (prefers-reduced-motion: reduce) { .progress-bar { transition: none; } } /* Chart host — wraps uPlot canvases in backtest pages. */ .chart-host { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-3); margin: var(--space-2) 0; } .chart-host:empty { display: none; } /* Backtest run status pills. */ .pill-completed { background: var(--success-container); color: var(--on-success-container); } .pill-running { background: var(--primary-container); color: var(--on-primary-container); } .pill-queued { background: var(--surface-2); color: var(--muted); } .pill-failed { background: var(--error-container); color: var(--on-error-container); } /* Chat turn — Claude (assistant) bubble. _chat_turn.html renders the role directly, producing turn-{user,assistant}. The dead alias .turn-analyst stays because _chat_turn.html uses it for legacy "analyst"-keyed turns. */ .turn-assistant { background: var(--primary-container); color: var(--on-primary-container); align-self: flex-start; } /* ════════════════════════════════════════════════════════════════════════ Phase 2 — component refresh. New BEM-style primitives layered on top of the legacy classes so old templates keep working as aliases. New code should prefer the .btn / .btn--variant / .row--end / .text-meta API. ════════════════════════════════════════════════════════════════════════ */ /* ── Button system ───────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 10px 18px; min-height: 44px; border: 1px solid transparent; border-radius: var(--radius); font: var(--weight-semibold) var(--text-base)/1 var(--font-sans); cursor: pointer; text-decoration: none; user-select: none; -webkit-tap-highlight-color: transparent; transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast), color var(--transition-fast); } .btn:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-offset); } .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; pointer-events: none; } .btn--primary { background: var(--primary); color: var(--on-primary); } .btn--primary:hover:not(:disabled) { background: var(--primary-hover); } .btn--secondary { background: var(--surface); color: var(--ink); border-color: var(--border-strong); } .btn--secondary:hover:not(:disabled) { background: var(--surface-2); border-color: var(--primary); } .btn--ghost { background: transparent; color: var(--ink); } .btn--ghost:hover:not(:disabled) { background: var(--surface-2); } /* Legacy alias used in backtest.html */ .btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--border); } .btn-ghost:hover:not(:disabled) { background: var(--surface-2); border-color: var(--border-strong); } .btn--destructive { background: var(--error); color: var(--on-error); } .btn--destructive:hover:not(:disabled) { background: var(--color-error-600); } .btn--link { background: transparent; border: none; padding: 4px 0; min-height: 0; color: var(--muted); font-weight: var(--weight-medium); } .btn--link:hover { color: var(--ink); text-decoration: underline; } .btn--sm { min-height: 32px; padding: 6px 12px; font-size: var(--text-sm); } .btn--lg { min-height: 48px; padding: 12px 24px; font-size: var(--text-lg); } .btn--icon { padding: 0; aspect-ratio: 1 / 1; min-width: 44px; } .btn--icon.btn--sm { min-width: 32px; } .btn--block { display: flex; width: 100%; } /* ── Row utilities ───────────────────────────────────────────────── */ .row--start { justify-content: flex-start; } .row--end { justify-content: flex-end; } .row--center { justify-content: center; } .row--between { justify-content: space-between; } .row--gap-1 { gap: var(--space-1); } .row--gap-2 { gap: var(--space-2); } .row--gap-3 { gap: var(--space-3); } .row--gap-4 { gap: var(--space-4); } .row--gap-5 { gap: var(--space-5); } .row--column { flex-direction: column; align-items: stretch; } .row--baseline { align-items: baseline; } .row--top { align-items: flex-start; } /* ── Spacing utilities ───────────────────────────────────────────── */ .mt-1 { margin-top: var(--space-1); } .mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); } .mt-5 { margin-top: var(--space-5); } /* ── Text utilities ──────────────────────────────────────────────── */ .text-meta { font-size: var(--text-xs); color: var(--muted); } .text-meta--mono { font-family: var(--font-mono); } .text-strong { font-weight: var(--weight-semibold); } .text-num { font-variant-numeric: tabular-nums; } /* ── Container width variants ────────────────────────────────────── */ .container--narrow { max-width: var(--container-narrow); } .container--wide { max-width: var(--container-wide); } .container--xl { max-width: var(--container-xl); } /* ── Card variants + slots ───────────────────────────────────────── */ .card--flat { box-shadow: none; } .card--padded { padding: var(--space-5); } .card--interactive { transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); cursor: pointer; } .card--interactive:hover { border-color: var(--primary); box-shadow: var(--shadow-2); } .card--interactive:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-offset); } @media (prefers-reduced-motion: reduce) { .card--interactive { transition: none; } } .card__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); } .card__title { margin: 0; font-size: var(--text-lg); font-weight: var(--weight-semibold); } .card__footer { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border); } /* ── Modal size variants (backwards-compatible with .modal-wide) ─── */ dialog.modal--lg, dialog.modal-wide { width: min(720px, calc(100vw - 32px)); } dialog.modal--xl { width: min(960px, calc(100vw - 32px)); } dialog.modal::backdrop { background: rgba(15, 23, 42, 0.55); } @supports (backdrop-filter: blur(2px)) { dialog.modal::backdrop { backdrop-filter: blur(2px); } } /* ── Drawer scrim (click-to-close handled in app.js) ─────────────── */ .drawer-scrim { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.45); pointer-events: auto; z-index: 49; animation: drawer-scrim-in var(--transition-normal); cursor: pointer; } @keyframes drawer-scrim-in { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .drawer-scrim { animation: none; } } /* ── Custom select chevron (replaces OS dropdown arrow) ──────────── */ select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 52%, calc(100% - 12px) 52%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 40px; background-color: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); color: var(--ink); font: var(--weight-regular) var(--text-base)/1.4 var(--font-sans); min-height: 44px; padding-left: 14px; padding-top: 10px; padding-bottom: 10px; width: 100%; cursor: pointer; transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } select:hover:not(:disabled) { border-color: var(--color-neutral-400); } select:focus, select:focus-visible { outline: none; border-color: var(--primary); box-shadow: var(--shadow-focus); } select:disabled { background-color: var(--surface-2); color: var(--muted); cursor: not-allowed; } /* ── Custom radio + checkbox ─────────────────────────────────────── */ .checkbox, .radio { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; user-select: none; font-weight: var(--weight-regular); } .checkbox input[type="checkbox"], .radio input[type="radio"] { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; margin: 0; border: 1.5px solid var(--border-strong); background: var(--surface); display: inline-grid; place-content: center; cursor: pointer; flex-shrink: 0; transition: background-color var(--transition-fast), border-color var(--transition-fast); } .checkbox input[type="checkbox"] { border-radius: var(--radius-xs); } .radio input[type="radio"] { border-radius: 50%; } .checkbox input[type="checkbox"]:checked, .radio input[type="radio"]:checked { background: var(--primary); border-color: var(--primary); } .checkbox input[type="checkbox"]:checked::after { content: ""; width: 10px; height: 10px; background: var(--on-primary); clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%); } .radio input[type="radio"]:checked::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--on-primary); } .checkbox input[type="checkbox"]:focus-visible, .radio input[type="radio"]:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-color: var(--primary); } .checkbox input[type="checkbox"]:disabled, .radio input[type="radio"]:disabled { opacity: 0.55; cursor: not-allowed; } /* ── Tab keyboard hover for facets / filter chips ────────────────── */ .facet[open] > summary, .facet:focus-within > summary { color: var(--ink); } .facet[open] > summary:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-offset); border-radius: var(--radius); } .suggest-item:focus-visible { outline: var(--focus-outline); outline-offset: -2px; } /* ════════════════════════════════════════════════════════════════════════ Landing-redesign primitives (Wave 1 — see LANDING_REQUIREMENTS_ANALYSIS.md) D-1: radial-glow body underlay (dark only) D-2: .card--hero gradient variant (dark only) D-4: chart-line glow — JS hook reads --chart-glow-blur (dark only) D-5: .eyebrow utility — standardised all-caps section labels ════════════════════════════════════════════════════════════════════════ */ :root { --tracking-eyebrow: 0.18em; --chart-glow-blur: 0; } .eyebrow { display: inline-block; font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--muted); line-height: 1.2; } [data-theme="dark"] { --chart-glow-blur: 6px; } [data-theme="dark"] body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1; background: radial-gradient( ellipse 65% 55% at 50% 28%, rgba(28, 37, 64, 0.7) 0%, rgba(10, 15, 26, 0) 70% ); } [data-theme="dark"] .card--hero { background: linear-gradient(180deg, #1a2240 0%, #141b2d 100%); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-3); } .card--hero .card-hero-eyebrow { display: block; margin-bottom: var(--space-2); } /* T-4: sparkle prompt hero on /strategies/new. Gradient panel, sparkle icon top-left, primary CTA bottom-right. Stacks on narrow screens. */ .prompt-hero { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; align-items: start; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: linear-gradient( 90deg, rgba(90, 163, 255, 0.18) 0%, rgba(90, 163, 255, 0.04) 100% ), var(--surface); } [data-theme="dark"] .prompt-hero { border-color: rgba(90, 163, 255, 0.4); } .prompt-hero-icon { grid-column: 1; grid-row: 1; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: var(--primary); margin-top: 4px; } .prompt-hero-input { grid-column: 2; grid-row: 1; width: 100%; background: transparent; border: 0; resize: vertical; font-size: var(--text-base); line-height: var(--leading-normal); color: var(--ink); padding: 0; } .prompt-hero-input:focus { outline: none; } .prompt-hero:focus-within { box-shadow: var(--shadow-focus); } .prompt-hero-cta { grid-column: 1 / -1; grid-row: 2; justify-self: end; border-radius: var(--radius-pill); padding: 8px 18px; } @media (min-width: 720px) { .prompt-hero { grid-template-columns: auto 1fr auto; grid-template-rows: auto; } .prompt-hero-cta { grid-column: 3; grid-row: 1; align-self: start; } } /* T-5 (reshaped): single-class confirmation chip on /strategies/new. Replaces the dropped "Analyst drafted N strategies" multi-draft chip with an honest one-line restatement of the chosen venue. */ .single-class-chip { display: inline-flex; align-items: center; gap: var(--space-2); padding: 6px 12px; border-radius: var(--radius-pill); background: var(--success-container); color: var(--on-success-container); font-size: var(--text-sm); font-weight: var(--weight-semibold); margin-top: var(--space-2); } .single-class-chip .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--success); } /* B-6: equity-curve end-point label. Absolute-positioned by JS at the right edge of the strategy line; offset upward and leftward so it sits above the data point rather than on top of it. */ .equity-endpoint { position: absolute; pointer-events: none; transform: translate(-100%, -150%); padding: 4px 10px; font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--on-primary-container); background: var(--surface-2); border: 1px solid rgba(90, 163, 255, 0.5); border-radius: var(--radius-sm); font-variant-numeric: tabular-nums; white-space: nowrap; z-index: 1; box-shadow: var(--shadow-1); } /* B-7: cache-key footer line under the equity chart. */ .cache-key-footer { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; margin-top: var(--space-3); font-size: var(--text-xs); } /* R-1: split-pane revise editor. Stacks on narrow viewports, two columns of equal width at >=960px. */ .split-pane { display: grid; grid-template-columns: 1fr; gap: var(--space-4); } .split-pane-col { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; } @media (min-width: 960px) { .split-pane { grid-template-columns: 1fr 1fr; gap: var(--space-5); } } /* R-3: structured analyst-proposal pieces. */ .proposal-issues { margin: 0; padding-left: var(--space-4); list-style: disc; color: var(--on-surface-variant); } .proposal-issues li { margin-top: var(--space-1); } .proposal-edits { display: flex; flex-direction: column; gap: var(--space-1); } .proposal-edit-chip { display: inline-block; padding: 4px 10px; border-radius: var(--radius-sm); background: var(--success-container); color: var(--on-success-container); font-size: var(--text-sm); font-weight: var(--weight-semibold); white-space: normal; } .proposal-diff .diff-meta { margin-bottom: var(--space-2); } /* R-4: projected before/after backtest metrics. */ .proposal-divider { border: 0; border-top: 1px solid var(--border); margin: var(--space-3) 0 var(--space-3); } .proposal-metric-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); } @media (min-width: 540px) { .proposal-metric-grid { grid-template-columns: repeat(3, 1fr); } } .proposal-metric { display: flex; flex-direction: column; gap: var(--space-1); } .proposal-metric-label { font-size: var(--text-2xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--muted); } .proposal-metric-row { display: flex; align-items: baseline; gap: var(--space-2); font-variant-numeric: tabular-nums; } .proposal-metric-before { color: var(--muted); font-size: var(--text-base); font-weight: var(--weight-bold); } .proposal-metric-after { color: var(--success); font-size: var(--text-xl); font-weight: var(--weight-bold); } .proposal-disclaimer { background: var(--warn-container); color: var(--on-warn-container); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); border: 1px solid rgba(255, 200, 80, 0.35); } .proposal-budget-hint { margin-top: var(--space-2); } /* Linkable table rows on /reports/backtests — whole row navigates, anchor stays in the primary cell for screen-reader semantics. */ .trade-ledger--linkable tbody tr.row-linkable { cursor: pointer; transition: background-color var(--transition-fast); } .trade-ledger--linkable tbody tr.row-linkable:hover, .trade-ledger--linkable tbody tr.row-linkable:focus-visible { background: var(--surface-2); } .trade-ledger--linkable tbody tr.row-linkable:focus-visible { outline: var(--focus-outline); outline-offset: -2px; } .trade-ledger--linkable .row-link { color: inherit; text-decoration: none; } .trade-ledger--linkable .row-link:hover { text-decoration: none; } @media (prefers-reduced-motion: reduce) { .trade-ledger--linkable tbody tr.row-linkable { transition: none; } } /* ── Google Sign-in button + auth divider ─────────────────────────── */ .btn-google { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); width: 100%; min-height: 44px; padding: 10px 18px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--surface); color: var(--ink); font: var(--weight-semibold) var(--text-base)/1 var(--font-sans); text-decoration: none; cursor: pointer; transition: background-color var(--transition-fast), border-color var(--transition-fast); } .btn-google:hover { background: var(--surface-2); border-color: var(--primary); } .btn-google:focus-visible { outline: var(--focus-outline); outline-offset: var(--focus-offset); } .btn-google-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; background: #fff; /* Google brand-guideline white tile around the G mark */ border-radius: 2px; } .auth-divider { display: flex; align-items: center; gap: var(--space-3); color: var(--muted); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.05em; } .auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); } /* ── Billing / pricing (D22) ───────────────────────────────────────── Plan badge: small chip in the topbar that links to /billing. Pricing grid: 3-up at >=720px, stacked below. Plan card variants: featured for the recommended tier. */ .plan-badge { display: inline-flex; align-items: center; padding: 4px 12px; font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wider); text-transform: uppercase; text-decoration: none; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); white-space: nowrap; transition: background var(--transition-fast), color var(--transition-fast); } .plan-badge:hover { background: var(--surface-3); color: var(--ink); } .plan-badge--starter, .plan-badge--pro, .plan-badge--max { background: var(--primary-container); color: var(--on-primary-container); border-color: transparent; } .plan-badge--admin { background: var(--success-container); color: var(--on-success-container); border-color: transparent; } .plan-badge--none { background: var(--warn-container); color: var(--on-warn-container); border-color: transparent; } @media (max-width: 599px) { /* Reclaim topbar real-estate on narrow screens — the badge link is already reachable via the dashboard banner / settings page. */ .plan-badge { display: none; } } .pill-admin { background: var(--success-container); color: var(--on-success-container); } /* Pricing page hero */ .pricing-hero { text-align: center; padding: var(--sp-5) 0; } .pricing-hero h1 { font-size: var(--t-display); margin-bottom: var(--sp-3); } .pricing-hero p { max-width: 560px; margin: 0 auto; } /* 3-up pricing grid: stacked on mobile, side-by-side on tablet+ */ .pricing-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; } @media (min-width: 720px) { .pricing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .pricing-card { position: relative; display: flex; flex-direction: column; padding: var(--sp-5); } .pricing-card--featured { border: 2px solid var(--primary); box-shadow: var(--shadow-2); } .pricing-card-tag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--primary); color: var(--on-primary); font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wider); text-transform: uppercase; padding: 4px 12px; border-radius: var(--radius-pill); white-space: nowrap; } .pricing-card-name { margin: 0 0 var(--sp-1); font-size: var(--text-2xl); font-weight: var(--weight-bold); } .pricing-card-tagline { margin: 0 0 var(--sp-4); } .pricing-card-price { display: flex; align-items: baseline; gap: 4px; margin: 0 0 var(--sp-4); } .pricing-card-currency { font-size: var(--text-xl); color: var(--muted); } .pricing-card-amount { font-size: var(--text-4xl); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); } .pricing-card-period { font-size: var(--text-md); } .pricing-card-features { list-style: none; padding: 0; margin: 0 0 var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; } .pricing-card-features li { display: grid; grid-template-columns: 20px 1fr; gap: var(--sp-2); align-items: start; font-size: var(--text-md); line-height: var(--leading-snug); } .pricing-card-feature-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--success); margin-top: 2px; } .pricing-card-cta { margin-top: auto; } /* Block-width buttons for pricing CTAs */ button.block, .button.block, a.button.block { display: block; width: 100%; text-align: center; } form.block { display: block; } .pricing-faq { margin-top: var(--sp-5); } .pricing-faq dl.glossary dt { font-weight: var(--weight-semibold); margin-top: var(--sp-3); } .pricing-faq dl.glossary dt:first-child { margin-top: 0; } .pricing-faq dl.glossary dd { margin: 4px 0 var(--sp-3); color: var(--on-surface-variant); } /* ── Admin dashboard (D27) ────────────────────────────────────────────── Inline-SVG sparkline + minimal table styling. Reuses --color-chart-equity from the existing performance-chart palette so dark/light themes Just Work. */ .sparkline { width: 100%; height: 60px; display: block; } .sparkline polyline { fill: none; stroke: var(--color-chart-equity); stroke-width: 2; vector-effect: non-scaling-stroke; } .kpi-meta { font-size: 0.85em; margin-top: 2px; } table.data-table { width: 100%; border-collapse: collapse; margin: var(--space-2) 0; } table.data-table th, table.data-table td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border, rgba(255,255,255,0.08)); } table.data-table th { font-weight: var(--weight-semibold); color: var(--on-surface-variant, var(--ink)); }