/* ========================================================================== Trader Journal — Institutional Terminal tokens (FINAL) Dark is default (:root, no attribute). Light via . Charts read tokens via getComputedStyle(document.documentElement); re-read on 'themechange'. Legacy aliases keep existing rules resolving during the literal sweep — delete the alias block when the sweep is done. CONTRACT NOTES: - Accent (--accent) means interaction only: active nav, focus, primary CTA, chart line. Nothing else. - --pnl-* means money only. Never decoration. - Text-entry surfaces always use --surface-inset (opaque). Never translucency behind text being typed. ========================================================================== */ :root { color-scheme: dark; /* Surfaces — soft clay ramp. Two rules from the clay recipe are structural, not taste: the page is never pure black, and every surface is LIGHTER than the page (depth reads as lift, not as an outline). The ramp carries a faint 245deg cast so the hue-matched clay shadows below have something to match. */ --surface-0: #0b0c11; /* page */ --surface-1: #171a23; /* panels, cards — +5% L over the page */ --surface-2: #1d202b; /* nav, modal, raised */ --surface-3: #21242f; /* hover / active fill */ --surface-inset: #101219; /* inputs, table heads, wells — ALWAYS OPAQUE */ /* Hairlines — kept in the vocabulary (tables and grids still need a rule), but softened: on clay surfaces depth is carried by shadow, not by edges. */ --line: #262a36; --line-strong: #343a4a; --line-accent: rgba(91, 141, 239, 0.45); /* Text */ --text: #e9ecf2; --text-soft: #9aa2b4; --text-faint: #969eb2; /* labels only, never below 11px / weight 600; AA 4.5:1 on all surfaces */ --text-inverse: #0b0d10; /* Accent — one hue, interaction only */ --accent: #5b8def; --accent-strong: #7da5f5; --accent-muted: rgba(91, 141, 239, 0.12); /* P&L — money colors, used for nothing else */ --pnl-pos: #2fd18c; --pnl-pos-soft: rgba(47, 209, 140, 0.12); --pnl-pos-line: rgba(47, 209, 140, 0.38); --pnl-neg: #f5537a; --pnl-neg-soft: rgba(245, 83, 122, 0.12); --pnl-neg-line: rgba(245, 83, 122, 0.38); --pnl-flat: var(--text-soft); /* P&L intensity — JS sets clamp(|dayPnl| / dailyLossLimit, 0, 1) on the balance card; drives signed-hairline width/opacity, never a glow */ --pl-intensity: 0; /* Status */ --warn: #f0b34e; --warn-soft: rgba(240, 179, 78, 0.12); --info: #4cc3e8; --info-soft: rgba(76, 195, 232, 0.12); /* Charts — canvas reads these; nothing hard-coded in charts.js */ --chart-grid: #22262f; --chart-axis: #969eb2; --chart-line: var(--accent); --chart-pos: var(--pnl-pos); --chart-neg: var(--pnl-neg); --chart-radar: var(--info); --chart-font-size: 11; /* px, unitless for canvas */ --chart-font-family: "JetBrains Mono", ui-monospace, monospace; /* Charts — depth pass. Every gradient stop, glow and extruded face the canvas renderer uses is a token, so both themes stay authored in CSS. *-fade pairs exist because a canvas gradient interpolates RGBA channels literally: fading to `transparent` (rgba(0,0,0,0)) greys the ramp, so every fade stop repeats its own RGB at alpha 0. */ --chart-line-deep: #2f4f8f; /* extruded side face, accent bars */ --chart-glow: rgba(91, 141, 239, 0.55); --chart-halo: rgba(91, 141, 239, 0.26); --chart-halo-fade: rgba(91, 141, 239, 0); --chart-area-top: rgba(91, 141, 239, 0.42); --chart-area-mid: rgba(91, 141, 239, 0.13); --chart-area-bottom: rgba(91, 141, 239, 0); --chart-pos-deep: #17805a; --chart-pos-glow: rgba(47, 209, 140, 0.55); --chart-neg-deep: #8f2646; --chart-neg-glow: rgba(245, 83, 122, 0.55); --chart-halo-neg: rgba(245, 83, 122, 0.26); --chart-halo-neg-fade: rgba(245, 83, 122, 0); --chart-neg-area-top: rgba(245, 83, 122, 0.04); --chart-neg-area-bottom: rgba(245, 83, 122, 0.46); --chart-highlight: rgba(255, 255, 255, 0.30); --chart-highlight-fade: rgba(255, 255, 255, 0); --chart-shade: rgba(0, 0, 0, 0.38); --chart-shade-fade: rgba(0, 0, 0, 0); --chart-track: rgba(150, 158, 178, 0.10); --chart-crosshair: rgba(154, 162, 180, 0.55); --chart-tooltip-bg: rgba(19, 22, 28, 0.96); --chart-tooltip-line: #333a49; --chart-tooltip-shadow: rgba(0, 0, 0, 0.6); --chart-ring-wash: rgba(150, 158, 178, 0.05); --chart-radar-core: rgba(76, 195, 232, 0.40); --chart-radar-edge: rgba(76, 195, 232, 0.04); --chart-radar-glow: rgba(76, 195, 232, 0.55); /* Chart well — must sit BELOW --surface-1 in luminance in BOTH themes, or the "pressed into the card" read inverts and the canvas looks like a bump glued on top. Verified by the contrast harness, not by eye. */ --chart-canvas-top: #13151d; --chart-canvas-bottom: #0f1118; --chart-canvas-glow: rgba(91, 141, 239, 0.07); --chart-canvas-shadow: rgba(0, 0, 0, 0.55); /* Sparkline area fades — the alpha-0 twins of --pnl-pos/--pnl-neg. */ --spark-pos-fade: rgba(47, 209, 140, 0); --spark-neg-fade: rgba(245, 83, 122, 0); /* Type */ --font-ui: "Sora", "Manrope", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace; --fs-micro: 11px; /* badges, kickers — the floor */ --fs-label: 12px; --fs-data: 13px; /* table numerals */ --fs-body: 13.5px; --fs-md: 15px; --fs-lg: 18px; --fs-h2: 22px; --fs-metric: 26px; --fs-hero: clamp(2rem, 4.5vw, 3.25rem); /* Spacing — 4px base */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* ---- CLAY GEOMETRY ----------------------------------------------------- Radius is the first half of the clay read. Below ~14px a clay element stops looking moulded and starts looking like a flat box with a shadow, so the clay scale never dips under 14. Chips and inputs that sit INSIDE a clay card use the legacy scale (8/12px) — nesting 26 inside 26 inflates the card and eats horizontal room. */ --radius-clay-sm: 14px; /* chart wells, nested cards */ --radius-clay-md: 20px; /* metric cards, buttons, tab bar items */ --radius-clay-lg: 26px; /* panels, view heads, sidebar */ --radius-clay-xl: 32px; /* hero surfaces, modals */ /* Legacy scale — same names, clay-scaled values, so every existing rule rounds up without being rewritten. */ --radius-sm: 8px; /* pills, tags, delta chips */ --radius-md: 12px; /* inputs, small buttons, nav items */ --radius-lg: var(--radius-clay-sm); --radius-xl: var(--radius-clay-lg); --radius-pill: 999px; /* ---- CLAY ELEVATION ---------------------------------------------------- The signature is one box-shadow carrying three jobs: a soft hue-matched outer drop, an inset dark shade on the BOTTOM, and an inset light highlight on the TOP. One light source, top/top-left, everywhere. Dark clay is re-derived, never inverted: the top inset is a low-alpha hue-matched near-white (0.10-0.18). Push it past ~0.25 and the surface reads as wet plastic; drop it under ~0.08 and the volume disappears. --clay-raised cards, panels — resting surfaces --clay-float genuinely interactive things — buttons, nav, modal --clay-soft quiet containers — outer drop only, so "puffy" keeps meaning "tappable" instead of leaking onto everything --clay-pressed wells and active states — the surface sinks inward */ --clay-raised: 0 14px 28px -14px hsl(245 45% 2% / 0.80), 0 4px 10px -6px hsl(245 45% 2% / 0.55), inset 0 -6px 12px -6px hsl(245 40% 2% / 0.55), inset 0 7px 12px -6px hsl(245 25% 80% / 0.12); --clay-float: 0 22px 40px -16px hsl(245 45% 2% / 0.85), 0 6px 14px -7px hsl(245 45% 2% / 0.60), inset 0 -7px 14px -7px hsl(245 40% 2% / 0.60), inset 0 8px 14px -7px hsl(245 25% 82% / 0.17); --clay-soft: 0 12px 26px -18px hsl(245 45% 2% / 0.70); /* Primary action. The shadow is derived from the ACCENT hue, not from the surface — a neutral drop under a saturated button is the tell that kills the moulded read. */ --clay-accent: 0 18px 32px -14px hsl(220 62% 16% / 0.90), 0 5px 12px -6px hsl(220 62% 13% / 0.62), inset 0 -6px 12px -6px hsl(220 66% 12% / 0.50), inset 0 7px 12px -6px hsl(0 0% 100% / 0.26); --clay-pressed: inset 0 3px 8px -2px hsl(245 45% 2% / 0.70), inset 0 -2px 5px -3px hsl(245 25% 80% / 0.07); /* Barely-there soft edge. In dark this is load-bearing: with the drop shadow invisible against a dark page, the hairline is what separates surface from background and what holds the 3:1 non-text bar. */ --clay-edge: hsl(245 25% 82% / 0.09); --clay-edge-strong: hsl(245 25% 84% / 0.14); /* Control boundary. Clay carries depth by shadow, but a soft shadow edge measures ~1.4:1 — WCAG 1.4.11 wants 3:1 to identify a control. So every CONTROL (button, input, select, toggle) keeps one hairline at this value while every CONTAINER (panel, card, rail) drops its border entirely. */ --control-edge: #6b7385; /* Elevation aliases — every existing rule keeps its token name. */ --shadow: var(--clay-raised); --shadow-modal: 0 40px 80px -24px hsl(245 45% 2% / 0.88), 0 10px 24px -10px hsl(245 45% 2% / 0.62), inset 0 -8px 16px -8px hsl(245 40% 2% / 0.55), inset 0 9px 16px -8px hsl(245 25% 82% / 0.15); --edge-highlight: inset 0 1px 0 var(--clay-edge); --focus-ring: 0 0 0 3px var(--surface-0), 0 0 0 6px var(--accent); /* Z-index */ --z-nav: 100; --z-dropdown: 200; --z-overlay: 900; --z-modal: 1000; --z-toast: 1100; /* Motion */ --dur-instant: 90ms; --dur-fast: 140ms; --dur-base: 200ms; --dur-slow: 320ms; --dur-tick: 480ms; --dur-draw: 640ms; --ease-out: cubic-bezier(0.2, 0, 0, 1); --ease-in-out: cubic-bezier(0.45, 0, 0.15, 1); --ease-snap: cubic-bezier(0.3, 1.1, 0.3, 1); --ease-squish: cubic-bezier(0.34, 1.56, 0.64, 1); /* clay press/release */ --dur-squish: 180ms; /* Landing depth kit — the marketing surface only. Every value here is a colour or a scalar so both themes stay authored in CSS; the gradients themselves are composed at the rule so light/dark share one recipe. */ --fs-hero-xl: clamp(2.35rem, 5.2vw, 4.15rem); --space-16: 64px; --space-20: 80px; --space-24: 96px; --stagger-reveal: 70ms; --aurora-a: rgba(91, 141, 239, 0.32); --aurora-b: rgba(47, 209, 140, 0.17); --aurora-c: rgba(126, 92, 239, 0.22); --aurora-fade: rgba(91, 141, 239, 0); --landing-grid-line: rgba(91, 141, 239, 0.16); /* Clay pass: the "glass" is now opaque moulded clay. The gradient drops to a whisper (volume comes from the insets — a strong plane gradient fights them) and both depth tokens resolve to the clay stacks, which converts every landing consumer without rewriting its rule. */ --glass-top: #1a1d27; --glass-bottom: #15181f; --glass-edge: var(--clay-edge); --glass-sheen: rgba(255, 255, 255, 0.08); --glass-sheen-fade: rgba(255, 255, 255, 0); --halo-accent: rgba(91, 141, 239, 0.42); --floor-glow: rgba(91, 141, 239, 0.24); --depth-shadow: var(--clay-float); --depth-shadow-sm: var(--clay-raised); /* Deck depth kit (Phase C) — the dashboard's card surfaces. Same authoring rule as the landing kit: colours and scalars only, gradients composed at the rule so both themes share one recipe. Clay pass: the card gradient drops to a whisper (clay volume comes from the insets, and a strong plane gradient fights them), and the two shadow tokens now resolve to the clay stacks so every Phase C consumer converts without being rewritten. */ --deck-top: #1a1d27; /* card gradient, lit edge */ --deck-bottom: #15181f; /* card gradient, floor */ --deck-edge: var(--clay-edge); --deck-sheen: rgba(255, 255, 255, 0.06); /* pointer specular */ --deck-sheen-fade: rgba(255, 255, 255, 0); --deck-wash: rgba(91, 141, 239, 0.09); /* accent inner glow at card top */ --deck-shadow: var(--clay-raised); --deck-shadow-lift: var(--clay-float); --deck-groove: hsl(245 45% 2% / 0.70); /* recessed meter track */ /* Dashboard entrance (retuned in Phase E). Clay is soft and heavy, so the deck settles instead of overshooting: --ease-clay has no bounce, and the cascade is slower and wider than the Phase C snap. */ --ease-clay: cubic-bezier(0.22, 1, 0.36, 1); --stagger-dash: 72ms; --dur-reveal: 820ms; } /* Light theme — only raw values override; every var()-referencing token (--chart-pos, --chart-line…) follows automatically. All values below are verified by scratchpad contrast script: 4.5:1 body / 3:1 large numerals in both themes. */ [data-theme="light"] { color-scheme: light; /* Clay ramp, light. The page is a pale tint — never #fff — so the cards have something to be lighter than. */ --surface-0: #ecedf5; --surface-1: #fbfbff; --surface-2: #ffffff; --surface-3: #e8ebf5; --surface-inset: #e7eaf4; --line: #dfe2ec; --line-strong: #c6cbda; --line-accent: rgba(38, 88, 199, 0.5); --text: #171a21; --text-soft: #4c5567; --text-faint: #5c6476; --text-inverse: #ffffff; --accent: #2658c7; --accent-strong: #1c47a8; --accent-muted: rgba(38, 88, 199, 0.09); --pnl-pos: #0a6e46; --pnl-pos-soft: rgba(10, 110, 70, 0.10); --pnl-pos-line: rgba(10, 110, 70, 0.35); --pnl-neg: #c02a4f; --pnl-neg-soft: rgba(192, 42, 79, 0.09); --pnl-neg-line: rgba(192, 42, 79, 0.35); --warn: #8a5a0c; --warn-soft: rgba(138, 90, 12, 0.10); --info: #0c6b8a; --info-soft: rgba(12, 107, 138, 0.10); --chart-grid: #e2e5ef; --chart-axis: #5c6476; /* Depth pass, light theme. Glows are tighter and areas lighter: on white the same alphas that read as atmosphere on graphite read as smudge. */ --chart-line-deep: #16337c; --chart-glow: rgba(38, 88, 199, 0.32); --chart-halo: rgba(38, 88, 199, 0.18); --chart-halo-fade: rgba(38, 88, 199, 0); --chart-area-top: rgba(38, 88, 199, 0.28); --chart-area-mid: rgba(38, 88, 199, 0.09); --chart-area-bottom: rgba(38, 88, 199, 0); --chart-pos-deep: #064e31; --chart-pos-glow: rgba(12, 123, 78, 0.32); --chart-neg-deep: #8a1c39; --chart-neg-glow: rgba(203, 46, 86, 0.32); --chart-halo-neg: rgba(203, 46, 86, 0.18); --chart-halo-neg-fade: rgba(203, 46, 86, 0); --chart-neg-area-top: rgba(203, 46, 86, 0.03); --chart-neg-area-bottom: rgba(203, 46, 86, 0.30); --chart-highlight: rgba(255, 255, 255, 0.55); --chart-highlight-fade: rgba(255, 255, 255, 0); --chart-shade: rgba(23, 26, 33, 0.22); --chart-shade-fade: rgba(23, 26, 33, 0); --chart-track: rgba(100, 108, 125, 0.10); --chart-crosshair: rgba(76, 85, 103, 0.55); --chart-tooltip-bg: rgba(255, 255, 255, 0.98); --chart-tooltip-line: #c2c8d3; --chart-tooltip-shadow: rgba(23, 26, 33, 0.20); --chart-ring-wash: rgba(100, 108, 125, 0.05); --chart-radar-core: rgba(13, 115, 149, 0.26); --chart-radar-edge: rgba(13, 115, 149, 0.03); --chart-radar-glow: rgba(13, 115, 149, 0.32); /* Was #ffffff on a #fbfbff card — a well that read as a bump. */ --chart-canvas-top: #f2f4fb; --chart-canvas-bottom: #e9ecf7; --chart-canvas-glow: rgba(38, 88, 199, 0.05); --chart-canvas-shadow: rgba(23, 26, 33, 0.10); --spark-pos-fade: rgba(12, 123, 78, 0); --spark-neg-fade: rgba(203, 46, 86, 0); /* Clay elevation, light. Re-derived from the light surface, not inverted: the top inset is near-opaque white (that is what sells the moulded edge on a pale surface) and every outer shadow is hue-matched 245deg, never neutral grey — grey kills the moulded read instantly. Negative spread keeps the drops tight so two cards 16px apart do not merge into one smudge. */ --clay-raised: 0 10px 20px -10px hsl(245 30% 45% / 0.22), 0 3px 6px -4px hsl(245 30% 45% / 0.13), inset 0 -5px 10px -4px hsl(245 30% 45% / 0.15), inset 0 6px 10px -5px hsl(0 0% 100% / 0.95); --clay-float: 0 18px 30px -12px hsl(245 32% 42% / 0.28), 0 6px 12px -6px hsl(245 32% 42% / 0.16), inset 0 -6px 12px -5px hsl(245 32% 42% / 0.20), inset 0 7px 12px -6px hsl(0 0% 100% / 1); --clay-soft: 0 8px 18px -12px hsl(245 30% 45% / 0.22); --clay-accent: 0 16px 28px -12px hsl(220 60% 40% / 0.42), 0 5px 10px -6px hsl(220 60% 40% / 0.26), inset 0 -6px 12px -5px hsl(220 66% 24% / 0.32), inset 0 7px 12px -6px hsl(0 0% 100% / 0.34); --clay-pressed: inset 0 3px 7px -2px hsl(245 30% 45% / 0.24), inset 0 -2px 5px -3px hsl(0 0% 100% / 0.9); --clay-edge: hsl(245 22% 30% / 0.07); --clay-edge-strong: hsl(245 22% 30% / 0.12); --control-edge: #82889a; --shadow: var(--clay-raised); --shadow-modal: 0 34px 64px -22px hsl(245 32% 42% / 0.32), 0 10px 22px -10px hsl(245 32% 42% / 0.18), inset 0 -7px 14px -6px hsl(245 32% 42% / 0.16), inset 0 8px 14px -7px hsl(0 0% 100% / 1); --edge-highlight: inset 0 1px 0 hsl(0 0% 100% / 0.9); --focus-ring: 0 0 0 3px var(--surface-1), 0 0 0 6px var(--accent); /* Landing depth kit, light. On white the same alphas that read as atmosphere on graphite read as dirt, so every wash is roughly halved and the glass becomes an opaque paper card with a soft edge. */ --aurora-a: rgba(38, 88, 199, 0.17); --aurora-b: rgba(12, 123, 78, 0.11); --aurora-c: rgba(104, 74, 214, 0.13); --aurora-fade: rgba(38, 88, 199, 0); --landing-grid-line: rgba(38, 88, 199, 0.13); --glass-top: #ffffff; --glass-bottom: #f6f7fd; --glass-edge: var(--clay-edge); --glass-sheen: rgba(255, 255, 255, 0.9); --glass-sheen-fade: rgba(255, 255, 255, 0); --halo-accent: rgba(38, 88, 199, 0.30); --floor-glow: rgba(38, 88, 199, 0.16); --depth-shadow: var(--clay-float); --depth-shadow-sm: var(--clay-raised); /* Deck depth kit, light. On paper the card gradient is a whisper and the specular is white-on-white — anything stronger reads as a smudge over the numerals. */ --deck-top: #fdfdff; --deck-bottom: #f5f6fc; --deck-edge: hsl(0 0% 100% / 0.9); --deck-sheen: rgba(255, 255, 255, 0.85); --deck-sheen-fade: rgba(255, 255, 255, 0); --deck-wash: rgba(38, 88, 199, 0.055); --deck-shadow: var(--clay-raised); --deck-shadow-lift: var(--clay-float); --deck-groove: hsl(245 30% 45% / 0.22); } /* Theme crossfade (graft) — JS adds .theme-switching before flipping data-theme, removes it ~300ms after. Skipped when reduced motion. */ html.theme-switching, html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after { transition: background-color var(--dur-base) var(--ease-in-out), color var(--dur-base) var(--ease-in-out), border-color var(--dur-base) var(--ease-in-out) !important; } /* Reduced motion — belt AND suspenders (graft: zeroed duration tokens make future motion compliant by construction; global block catches strays). JS mirrors with matchMedia('(prefers-reduced-motion: reduce)') for count-up / draw-in / ticks / crossfade. */ @media (prefers-reduced-motion: reduce) { :root { --dur-instant: 0.01ms; --dur-fast: 0.01ms; --dur-base: 0.01ms; --dur-slow: 0.01ms; --dur-tick: 0.01ms; --dur-draw: 0.01ms; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; /* Delays must die with durations: a `backwards`-filled entrance or a staggered reveal would otherwise sit in its invisible FROM state for the whole delay. Required by the landing stagger + terminal settle. */ animation-delay: 0ms !important; transition-delay: 0ms !important; } } * { box-sizing: border-box; } html, body { margin: 0; min-height: 100%; height: 100%; } body { display: flex; flex-direction: column; min-height: 100vh; font-family: var(--font-ui); color: var(--text); background: var(--surface-0); font-variant-numeric: tabular-nums; line-height: 1.4; position: relative; } body.modal-open { overflow: hidden; } /* Landing/app backdrop (§4): 24px dot grid — GPU-cheap, edge-masked, no fixed-blur jank on mobile Safari. */ body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5; background-image: radial-gradient(var(--line) 1px, transparent 1px); background-size: 24px 24px; mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.92), rgba(0, 0, 0, 0.52) 66%, transparent 100%); } /* Signature rule (§3): numerals never jitter — tabular figures everywhere a number can tick. */ .metric-value, td, .live-cell, .calendar-cell { font-feature-settings: "tnum"; } .app-layout { position: relative; z-index: 1; display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 18px; width: min(1420px, 96vw); margin: 18px auto; } /* .is-guest (demo mode) joins .is-authenticated/.is-preview everywhere the CSS decides "the app shell is on screen". body.demo-signup is the one exception: a demo visitor reaching for the account form gets the landing back WITHOUT the demo being torn down, so nothing they logged is lost. */ body:not(.is-authenticated):not(.is-preview):not(.is-guest) .app-layout, body.demo-signup .app-layout { display: none; } body.is-authenticated .auth-shell, body.is-preview .auth-shell, body.is-guest:not(.demo-signup) .auth-shell { display: none; } .auth-shell { position: relative; z-index: 1; width: min(1280px, 96vw); flex: 1 0 auto; margin: 0 auto; padding: 6px 24px 8px; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; animation: fadeUp var(--dur-slow) var(--ease-out); display: flex; flex-direction: column; justify-content: center; } /* live-pulse (graft): the only infinite animation in the product; the global reduced-motion block freezes it into a static dot. */ .live-pulse-dot { display: inline-block; width: 6px; height: 6px; flex: 0 0 6px; border-radius: 50%; background: var(--pnl-pos); animation: livePulse 2s var(--ease-in-out) infinite; } @keyframes livePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } /* Hero CTAs: the primary button is the single accent use above the fold; the secondary stays a hairline .btn. */ /* Honest feed tag — replaces the unbacked "Verified" pill. */ /* Terminal tape: hairline-separated rows inside one bordered track. */ /* Direction tag — Long/Short is money-adjacent, so it may wear P&L color (shared with the in-progress cards on the journal action bar). */ /* Modal treatment (§4): flat dim overlay (no blur), panel fades and settles from scale(0.98). The public trades board keeps ticking underneath. */ .auth-overlay { position: fixed; inset: 0; z-index: var(--z-overlay); background: rgba(4, 5, 8, 0.65); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base); } [data-theme="light"] .auth-overlay { background: rgba(23, 26, 33, 0.35); } .auth-panel { position: fixed; top: 50%; left: 50%; z-index: var(--z-modal); transform: translate(-50%, -50%) scale(0.98); width: min(90vw, 400px); max-height: min(82vh, 680px); overflow-y: auto; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base); } .auth-shell.auth-panel-visible .auth-overlay { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity var(--dur-base) var(--ease-out), visibility 0s; } .auth-shell.auth-panel-visible .auth-panel { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, -50%) scale(1); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s; } .sidebar { display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-4); border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface-2); box-shadow: var(--edge-highlight); min-height: calc(100vh - 36px); position: sticky; top: 18px; z-index: var(--z-nav); } .sidebar-header { display: block; } .brand-mark { margin: 6px 0 0; display: inline-flex; align-items: baseline; gap: 0.34rem; font: 700 clamp(1.45rem, 3vw, 2rem)/0.98 var(--font-ui); letter-spacing: -0.05em; } .brand-word-accent { color: var(--accent); } .brand-word-primary { color: var(--text); } h1 { margin: 10px 0 8px; font-size: 1.6rem; line-height: 1.1; } .nav-toggle { display: none; align-items: center; gap: var(--space-2); border: 1px solid var(--line-strong); border-radius: var(--radius-md); background: var(--surface-2); color: var(--text); padding: 8px 10px; cursor: pointer; font: 600 var(--fs-label)/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; } .nav-toggle.is-open { border-color: var(--accent); background: var(--surface-3); } .nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { display: block; width: 14px; height: 2px; background: var(--text-soft); border-radius: var(--radius-pill); content: ""; } .nav-toggle-bars { position: relative; } .nav-toggle-bars::before { position: absolute; top: -4px; left: 0; } .nav-toggle-bars::after { position: absolute; top: 4px; left: 0; } .main-nav { display: grid; gap: var(--space-1); } /* Nav buttons (§4): mono uppercase, quiet by default; the active state is an accent underline rail (desktop) or a 2px inset left rail (sidebar) — never a filled pill. */ .nav-btn { border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text-soft); padding: 8px 12px; text-align: left; cursor: pointer; font: 600 var(--fs-label)/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); } .nav-btn:hover { background: var(--surface-3); color: var(--text); } .nav-btn.is-active { color: var(--text); box-shadow: inset 0 -2px 0 var(--accent); border-radius: var(--radius-md) var(--radius-md) 0 0; } .main-nav .nav-btn.is-active { box-shadow: inset 2px 0 0 var(--accent); border-radius: var(--radius-md); } .sidebar-foot { margin-top: auto; display: grid; gap: 10px; } .sidebar-foot p { margin: 0; font: 500 var(--fs-label)/1.4 var(--font-mono); color: var(--text-soft); } .auth-panel { border: 1px solid var(--line-strong); border-radius: var(--radius-xl); background: var(--surface-2); padding: var(--space-5); display: grid; gap: 10px; box-shadow: var(--shadow-modal); } .auth-panel[hidden] { display: none !important; } .auth-status:empty, #authMessage:empty { display: none; } .auth-title { margin: 0; color: var(--text); font: 700 var(--fs-lg)/1.2 var(--font-ui); letter-spacing: -0.01em; } .auth-status { margin: 0; color: var(--text-soft); font: 600 var(--fs-label)/1.3 var(--font-mono); } .auth-status.is-on { color: var(--accent); } .auth-status.is-off { color: var(--warn); } .auth-status:empty { display: none; } .auth-copy { margin: 0; color: var(--text-soft); font-size: 0.86rem; line-height: 1.42; } #resetPasswordView { display: none; gap: 12px; } #resetPasswordView.is-visible { display: grid; } #resetPasswordView[hidden] { display: none !important; } .auth-form-actions { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 10px; } .auth-form-actions .btn { width: 100%; flex: none; } .auth-link-btn { justify-self: flex-start; padding: 0; border: 0; background: transparent; color: var(--text-soft); cursor: pointer; font: 500 var(--fs-label)/1.35 var(--font-mono); letter-spacing: 0.02em; } .auth-link-btn:hover { color: var(--text); text-decoration: underline; } kbd { background: var(--surface-inset); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 2px 6px; font: 600 var(--fs-micro)/1.2 var(--font-mono); color: var(--text); } .content { display: grid; gap: 14px; align-content: start; } body.is-authenticated .auth-panel { display: none !important; } .brand-block .brand-mark { font-size: 1.48rem; } .nav-logout-mobile { width: 100%; } .view { display: none; gap: 14px; } .view.is-active { display: grid; animation: viewEnter var(--dur-base) var(--ease-out); } .view-head { padding: var(--space-4) var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface-1); box-shadow: var(--edge-highlight); } .view-head h2 { margin: 0; font: 700 var(--fs-h2)/1.2 var(--font-ui); letter-spacing: -0.01em; } .view-head p { margin: 6px 0 0; color: var(--text-soft); font-size: var(--fs-body); } .metric-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-3); } .metric-grid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); } .metric-card { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-1); padding: var(--space-4); min-height: 88px; display: grid; align-content: center; box-shadow: var(--edge-highlight); } /* Money metrics: signed left hairline stamped by JS (.is-pos/.is-neg). */ .metric-card.is-pos { border-left: 2px solid var(--pnl-pos-line); } .metric-card.is-neg { border-left: 2px solid var(--pnl-neg-line); } /* Balance card only: --pl-intensity (|todayPnl| / dailyMaxLoss, clamped 0-1) widens the hairline 2px -> 4px and deepens its opacity. Static token color above is the non-color-mix fallback. */ .metric-card-balance.is-pos, .metric-card-balance.is-neg { border-left-width: calc(2px + var(--pl-intensity) * 2px); } .metric-card-balance.is-pos { border-left-color: var(--pnl-pos-line); border-left-color: color-mix(in srgb, var(--pnl-pos) calc(30% + var(--pl-intensity) * 55%), transparent); } .metric-card-balance.is-neg { border-left-color: var(--pnl-neg-line); border-left-color: color-mix(in srgb, var(--pnl-neg) calc(30% + var(--pl-intensity) * 55%), transparent); } .metric-label { margin: 0; text-transform: uppercase; letter-spacing: 0.08em; font: 600 var(--fs-micro)/1.2 var(--font-mono); color: var(--text-faint); } .metric-value { margin: 7px 0 0; font: 700 var(--fs-metric)/1.15 var(--font-mono); } .metric-delta { justify-self: start; margin-top: var(--space-2); padding: 2px 6px; border-radius: var(--radius-sm); background: var(--surface-inset); color: var(--text-soft); font: 600 var(--fs-micro)/1.2 var(--font-mono); letter-spacing: 0.02em; } .metric-delta.is-pos { background: var(--pnl-pos-soft); color: var(--pnl-pos); } .metric-delta.is-neg { background: var(--pnl-neg-soft); color: var(--pnl-neg); } /* display:grid on these would defeat the hidden attribute (author rules beat the UA [hidden] rule) — JS toggles hidden on all three. */ .metric-grid[hidden], .dashboard-empty[hidden] { display: none; } /* Empty state (§4 graft): replaces the metric-card wall when zero trades. */ .dashboard-empty { display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-12) var(--space-5); border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface-1); text-align: center; } .dashboard-empty svg { width: 48px; height: 48px; color: var(--text-faint); } .dashboard-empty h3 { margin: 0; font: 600 var(--fs-lg)/1.3 var(--font-ui); } .dashboard-empty p { margin: 0; max-width: 380px; color: var(--text-soft); font-size: var(--fs-body); } .panel-grid { display: grid; gap: 12px; } .panel-grid-analytics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .panel-grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* Panels: one recipe — flat surface, hairline, token radius. */ .panel { border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--surface-1); padding: var(--space-5); box-shadow: var(--edge-highlight); } .panel-head { margin-bottom: var(--space-3); } .panel-head h3 { margin: 0; font: 600 var(--fs-md)/1.3 var(--font-ui); } .panel-head p { margin: 4px 0 0; color: var(--text-soft); font-size: var(--fs-body); } .panel-head-inline { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } /* Chart wells: a lit stage rather than a flat inset. The radial wash sits behind the canvas bitmap (which is drawn transparent), so it reads as atmosphere under the curve without the renderer knowing about it. */ .panel-chart canvas { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--line); background: radial-gradient(130% 88% at 50% 0%, var(--chart-canvas-glow) 0%, transparent 64%), linear-gradient(180deg, var(--chart-canvas-top) 0%, var(--chart-canvas-bottom) 100%); box-shadow: inset 0 1px 0 var(--chart-highlight), 0 14px 30px -22px var(--chart-canvas-shadow); transition: border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .panel-chart:hover canvas { border-color: var(--line-strong); box-shadow: inset 0 1px 0 var(--chart-highlight), 0 18px 38px -22px var(--chart-canvas-shadow); } /* Crosshair only where a crosshair actually appears (the two line charts); bar and radar panels keep the default cursor. */ #equityChart, #drawdownChart { cursor: crosshair; } .panel-strategy-performance { display: grid; grid-template-rows: auto minmax(0, 1fr); } .strategy-performance-toolbar { display: grid; gap: 10px; justify-items: end; } .strategy-toggle-group { display: inline-grid; grid-auto-flow: column; gap: 2px; padding: 2px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-inset); } .strategy-toggle-btn { min-height: 32px; padding: 0 12px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-soft); font: 600 var(--fs-label)/1 var(--font-mono); cursor: pointer; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .strategy-toggle-btn:hover { color: var(--text); } .strategy-toggle-btn.is-active { background: var(--surface-3); color: var(--text); } .panel-trader-score { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; } .trader-score-foot { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-4); align-items: end; margin-top: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--line); } .trader-score-value-wrap { display: grid; gap: 6px; } .trader-score-value { margin: 0; font: 700 var(--fs-metric)/1 var(--font-mono); font-feature-settings: "tnum"; color: var(--text); } .trader-score-caption { margin: 0; color: var(--text-soft); font-size: var(--fs-body); line-height: 1.45; } label { display: grid; gap: 6px; margin-bottom: 11px; color: var(--text-soft); font: 600 var(--fs-label)/1.25 var(--font-mono); } input, select, textarea, button { font-family: var(--font-mono); } button, .btn, .mini-btn, .nav-btn, .nav-toggle { min-height: 42px; } /* Token contract: text-entry surfaces always sit on --surface-inset (opaque). Focus feedback is instant — no transition. */ input, select, textarea { width: 100%; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-inset); color: var(--text); font-size: var(--fs-body); font-weight: 400; padding: 9px 11px; } textarea { resize: vertical; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); } .compact-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .bulk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } #bulkInput { min-height: 170px; font-family: var(--font-mono); font-size: var(--fs-label); } .compact-form .form-actions { grid-column: 1 / -1; } .form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } #trade-entry .panel { padding: 18px; } #trade-entry .panel-head { margin-bottom: 14px; } #trade-entry .view-head { padding: 16px 18px; } #trade-entry .form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } #trade-entry .panel:first-of-type { max-width: 100%; } .trade-form-shell { display: grid; gap: 16px; } .trade-form-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 14px; } /* Trade-entry sections are nested wells (§4): opaque inset surface. */ .trade-section { display: grid; gap: 12px; align-content: start; height: 100%; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface-inset); } .trade-section-head { display: grid; gap: 3px; } .trade-section-kicker { margin: 0; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.08em; font: 600 var(--fs-micro)/1.2 var(--font-mono); } .trade-section-head h3 { margin: 0; font-size: var(--fs-md); } /* 1f: the psychology section no longer hides behind a disclosure, so it needs the one line that says why it is not optional. */ .trade-section-note { margin: 2px 0 0; color: var(--text-soft); font: 400 var(--fs-label)/1.5 var(--font-ui); } .trade-grid { display: grid; gap: 10px; } .trade-grid label { margin-bottom: 0; } .trade-status-toggle { display: inline-flex; align-items: center; gap: 9px; min-height: 42px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-1); font: 600 var(--fs-body)/1.3 var(--font-mono); color: var(--text); } .trade-status-toggle input { margin: 0; inline-size: 15px; block-size: 15px; accent-color: var(--accent); } /* Long/Short segmented control (graft): two buttons in one hairline track; active fill uses the P&L soft tokens — direction is a money statement. The native select stays in the DOM (hidden) as the form's source of truth. */ .direction-field { display: grid; gap: 6px; align-content: start; } .direction-field-label { color: var(--text-soft); font: 600 var(--fs-label)/1.25 var(--font-mono); } .direction-native { display: none; } .direction-toggle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-inset); overflow: hidden; } .direction-btn { appearance: none; border: 0; min-height: 40px; padding: 9px 11px; background: transparent; color: var(--text-soft); cursor: pointer; font: 600 var(--fs-label)/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .direction-btn + .direction-btn { border-left: 1px solid var(--line); } .direction-btn:hover { color: var(--text); } .direction-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); } .direction-btn.is-active[data-direction="Buy"] { background: var(--pnl-pos-soft); color: var(--pnl-pos); } .direction-btn.is-active[data-direction="Sell"] { background: var(--pnl-neg-soft); color: var(--pnl-neg); } /* Form-shake (graft): 4px horizontal, 3 cycles, offending field only. Under reduced motion JS skips the shake and .is-invalid carries a border flash. */ @keyframes formShake { 0%, 100% { transform: none; } 16%, 48%, 80% { transform: translateX(-4px); } 32%, 64%, 96% { transform: translateX(4px); } } .form-shake { animation: formShake 240ms var(--ease-out); } input.is-invalid, select.is-invalid, textarea.is-invalid { border-color: var(--pnl-neg); box-shadow: 0 0 0 1px var(--pnl-neg-line); } .trade-grid-context { grid-template-columns: repeat(2, minmax(0, 1fr)); } .trade-grid-risk { grid-template-columns: repeat(2, minmax(0, 1fr)); } .trade-grid-review { grid-template-columns: repeat(2, minmax(0, 1fr)); } .trade-grid-record { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .setup-inline-group { align-self: end; } .setup-inline-controls { display: grid; grid-template-columns: minmax(160px, 220px) minmax(0, 1fr); gap: 8px; align-items: center; } .field-span-2 { grid-column: span 2; } .field-span-all { grid-column: 1 / -1; } .screenshot-preview { min-height: 88px; border: 1px dashed var(--line-strong); border-radius: var(--radius-md); background: var(--surface-1); display: grid; place-items: center; color: var(--text-soft); font-size: var(--fs-body); padding: 8px; overflow: hidden; } .screenshot-preview img { max-width: 100%; max-height: 140px; border-radius: var(--radius-sm); } .form-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; } .split-wrap { justify-content: space-between; } .inline-actions { display: flex; flex-wrap: wrap; gap: 8px; } .journal-action-icon { display: inline-flex; width: 16px; height: 16px; flex: 0 0 16px; } .journal-action-icon svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; fill: none; } .btn { border: 1px solid var(--line-strong); border-radius: var(--radius-md); padding: 10px 16px; background: var(--surface-2); color: var(--text); cursor: pointer; font: 600 12.5px/1.2 var(--font-mono); transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .btn:hover { border-color: var(--accent); } .btn:active { transform: translateY(1px); } .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--text-inverse); } .btn.primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); } button:focus-visible, .btn:focus-visible, .mini-btn:focus-visible, .nav-btn:focus-visible, summary:focus-visible { outline: none; box-shadow: var(--focus-ring); } /* Async buttons (§4): pending = dimmed + inert; label swapped by JS. */ .btn.is-pending, button.is-pending { opacity: 0.6; pointer-events: none; } .form-message { margin: 10px 0 0; min-height: 1.2em; font: 500 var(--fs-label)/1.3 var(--font-mono); color: var(--text-soft); } .form-message.success { color: var(--pnl-pos); } .form-message.error { color: var(--pnl-neg); } /* Third tone, for the demo-mode nudges. Neither red (nothing failed — the trade really did save into the demo) nor green (it will not persist). Amber, matching the demo notice's own mark. */ .form-message.notice { color: var(--warn); } .panel-collapsible { padding: 0; overflow: hidden; } .panel-collapsible:not([open]) .panel-collapsible-body { display: none; } .panel-collapse-summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px; cursor: pointer; } .panel-collapse-summary::-webkit-details-marker { display: none; } .panel-collapse-toggle { flex: 0 0 auto; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 8px 10px; color: var(--text-soft); font: 600 var(--fs-micro)/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; } .panel-collapsible[open] .panel-collapse-toggle { color: var(--text); } .panel-collapsible[open] .panel-collapse-toggle .toggle-label-closed, .panel-collapsible:not([open]) .panel-collapse-toggle .toggle-label-open { display: none; } .panel-collapsible-body { padding: 0 16px 16px; } /* Calendar (§4): hairline grid via 1px gaps on a --line background — no per-cell borders. Traded days are real buttons that filter the journal. */ .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; padding: 1px; margin-top: 10px; background: var(--line); border-radius: var(--radius-md); overflow: hidden; } .calendar-weekday { background: var(--surface-inset); color: var(--text-faint); text-align: center; font: 600 var(--fs-micro)/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; padding: 6px 4px; } .calendar-cell { appearance: none; min-height: 108px; border: 0; border-radius: 0; background: var(--surface-1); color: var(--text); padding: 10px; display: grid; align-content: start; gap: 6px; text-align: left; font: 500 var(--fs-data)/1.3 var(--font-mono); } /* Intensity ramp (graft): static soft-tint fallback first, then the --day-intensity color-mix ramp for browsers that support it. */ .calendar-cell-positive { background: var(--pnl-pos-soft); background: color-mix(in srgb, var(--pnl-pos) calc(var(--day-intensity, 0) * 18%), var(--surface-1)); } .calendar-cell-negative { background: var(--pnl-neg-soft); background: color-mix(in srgb, var(--pnl-neg) calc(var(--day-intensity, 0) * 18%), var(--surface-1)); } .calendar-cell-today { box-shadow: inset 0 0 0 1px var(--accent); } .calendar-cell-empty { min-height: 0; background: var(--surface-inset); padding: 0; } button.calendar-cell { cursor: pointer; transition: box-shadow var(--dur-fast) var(--ease-out); } button.calendar-cell:hover { box-shadow: inset 0 0 0 1px var(--line-strong); } button.calendar-cell.calendar-cell-today:hover { box-shadow: inset 0 0 0 1px var(--accent); } button.calendar-cell:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); } .calendar-cell-day { justify-self: end; color: var(--text-faint); font: 600 var(--fs-micro)/1 var(--font-mono); } .calendar-cell-pnl { font: 600 var(--fs-data)/1.2 var(--font-mono); } .calendar-cell-meta { color: var(--text-soft); font: 500 var(--fs-micro)/1.3 var(--font-mono); } /* Shown only in the <=760px agenda layout when the month has no trades. */ .calendar-agenda-note { display: none; background: var(--surface-1); color: var(--text-soft); padding: 12px; font: 500 var(--fs-label)/1.4 var(--font-mono); } .filter-grid { display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); } .table-wrap { margin-top: 10px; border: 1px solid var(--line); border-radius: var(--radius-md); overflow-x: auto; } table { width: 100%; min-width: 980px; border-collapse: collapse; } th, td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; } thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-inset); color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.07em; font: 600 var(--fs-micro)/1.2 var(--font-mono); border-bottom: 1px solid var(--line-strong); } td { font: 500 var(--fs-data)/1.4 var(--font-mono); } /* Numeric columns: right-aligned, tabular. */ th.num, td.num { text-align: right; } tbody tr { transition: background-color var(--dur-fast) var(--ease-out); } tbody tr:hover { background: var(--surface-3); } .user-agent-cell { max-width: 360px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .empty-row td { color: var(--text-soft); text-align: center; padding: 20px 8px; } .pill { display: inline-block; border-radius: var(--radius-sm); padding: 3px 7px; font: 600 var(--fs-micro)/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; border: 1px solid var(--line-strong); color: var(--text-soft); } .pill-win { color: var(--pnl-pos); background: var(--pnl-pos-soft); border-color: var(--pnl-pos-line); } .pill-loss { color: var(--pnl-neg); background: var(--pnl-neg-soft); border-color: var(--pnl-neg-line); } .pill-be { color: var(--warn); background: var(--warn-soft); border-color: var(--warn); border-color: color-mix(in srgb, var(--warn) 38%, transparent); } .pnl-positive { color: var(--pnl-pos); font-weight: 700; } .pnl-negative { color: var(--pnl-neg); font-weight: 700; } .row-actions { white-space: nowrap; } .mini-btn { border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); padding: 6px 8px; cursor: pointer; font: 600 var(--fs-micro)/1.2 var(--font-mono); transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); } .mini-btn:hover { border-color: var(--accent); } .mini-btn + .mini-btn { margin-left: 6px; } /* Destructive: transparent until hover. */ .mini-btn.danger { border-color: transparent; background: transparent; color: var(--pnl-neg); } .mini-btn.danger:hover { background: var(--pnl-neg-soft); border-color: transparent; } .score-stack { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; } .score-item { background: var(--surface-inset); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-3); } .score-item p { margin: 0; color: var(--text-faint); font: 600 var(--fs-micro)/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; } .score-item strong { display: block; margin-top: 7px; font: 700 var(--fs-lg)/1.2 var(--font-mono); font-feature-settings: "tnum"; } .warning-list { margin: 0; padding-left: 18px; display: grid; gap: 6px; } .warning-list li { color: var(--pnl-neg); } .warning-list li.ok { color: var(--pnl-pos); } .tag-set { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 12px; margin: 8px 0; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; } .tag-set legend { padding: 0 6px; color: var(--text-soft); font: 600 var(--fs-micro)/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; } /* Behavior tags: rectangular chips (§4 badges), not pills. */ .tag-set label { display: inline-flex; align-items: center; gap: 6px; margin: 0; min-height: 36px; padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-inset); font-size: var(--fs-label); flex: 0 0 auto; min-width: fit-content; white-space: nowrap; line-height: 1.2; max-width: 100%; } .tag-set input { margin: 0; inline-size: 14px; block-size: 14px; accent-color: var(--accent); } .reflection-list { margin: 0; padding-left: 0; list-style: none; display: grid; gap: 9px; max-height: 580px; overflow: auto; } .reflection-list li { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-inset); padding: 10px; } .reflection-list h4 { margin: 0; font-size: 0.95rem; } .reflection-list p { margin: 6px 0 0; color: var(--text-soft); font-size: 0.86rem; } .muted { color: var(--text-soft); } body.auth-locked .view { display: none !important; } .nav-btn:disabled { opacity: 0.52; cursor: not-allowed; } .nav-btn:disabled:hover { transform: none; border-color: var(--line); } .site-footer { width: min(1280px, 96vw); margin: 12px auto 16px; padding: 12px 14px; border: 0; border-radius: 0; background: transparent; color: var(--text-soft); box-shadow: none; font: 500 var(--fs-label)/1.45 var(--font-mono); text-align: center; } .trust-row { width: min(1420px, 96vw); margin: 0 auto 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .trust-item { padding: 16px 18px; border: 1px solid var(--clay-edge); border-radius: var(--radius-clay-md); background: var(--surface-1); box-shadow: var(--clay-soft); color: var(--text-soft); text-align: center; font: 600 var(--fs-label)/1.35 var(--font-mono); text-transform: lowercase; } body.is-authenticated .trust-row { display: none; } body.auth-locked .trust-row, body.is-preview .trust-row, body.is-guest:not(.demo-signup) .trust-row { display: none; } .footer-main, .footer-donation { margin: 0; } .footer-main { color: var(--text-soft); } .footer-support { margin-top: 0; } .footer-support summary { cursor: pointer; color: var(--text-soft); list-style: none; display: inline-flex; justify-content: center; } .footer-support summary::-webkit-details-marker { display: none; } .footer-support summary:hover { color: var(--text); } .footer-support-body { display: grid; gap: 4px; margin-top: 8px; justify-items: center; } .site-footer .footer-main { margin-top: 8px; } .site-footer code { display: inline-block; margin-left: 4px; padding: 2px 6px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-inset); color: var(--text); word-break: break-all; } @media (min-width: 1025px) { .app-layout { grid-template-columns: 1fr; width: min(1480px, 96vw); } .sidebar { display: none; } } @media (max-width: 1300px) { .metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .form-grid, .filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .trade-grid-context, .trade-grid-risk, .trade-grid-review { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1024px) { .content, .view, .panel-grid { gap: 10px; } .panel-grid-analytics { grid-template-columns: 1fr; } .strategy-performance-toolbar { width: 100%; justify-items: start; } .auth-shell { width: min(100%, calc(100vw - 16px)); margin: 0 auto; padding: 6px 18px 8px; border-radius: 0; } .trust-row { width: min(100%, calc(100vw - 12px)); } .app-layout { grid-template-columns: 1fr; width: min(100%, calc(100vw - 12px)); margin: 8px auto 18px; } .sidebar { min-height: auto; position: static; gap: 12px; } .sidebar-header { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .brand-block { min-width: 0; flex: 1 1 auto; } .nav-toggle { display: inline-flex; align-self: center; justify-content: center; min-width: 92px; padding: 10px 12px; } .main-nav { grid-template-columns: 1fr; justify-items: center; max-height: 0; opacity: 0; visibility: hidden; overflow: hidden; pointer-events: none; margin-top: 0; padding-bottom: 0; transition: max-height 220ms ease, opacity 220ms ease, margin-top 220ms ease, padding-bottom 220ms ease; } .sidebar.nav-open .main-nav { max-height: 460px; opacity: 1; visibility: visible; pointer-events: auto; margin-top: 8px; padding-bottom: 10px; } .sidebar-foot { max-height: 0; opacity: 0; visibility: hidden; overflow: hidden; pointer-events: none; margin-top: 0; transition: max-height 220ms ease, opacity 220ms ease, margin-top 220ms ease; } .sidebar.nav-open .sidebar-foot { max-height: 140px; opacity: 1; visibility: visible; pointer-events: auto; margin-top: 14px; } .panel-grid-two, .score-stack { grid-template-columns: 1fr; } .metric-grid { gap: 8px; } .metric-card { min-height: 76px; padding: var(--space-3); } .metric-value { font-size: var(--fs-lg); } #trade-entry .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .trade-form-layout { gap: 12px; } .trade-section { padding: 12px; } .trade-grid-context, .trade-grid-risk, .trade-grid-review { grid-template-columns: repeat(2, minmax(0, 1fr)); } .trade-grid-record { grid-template-columns: 1fr; } .panel-head-inline, .panel-collapse-summary { flex-direction: column; align-items: stretch; } .trader-score-foot { grid-template-columns: 1fr; gap: 10px; align-items: start; } .auth-panel { order: 2; width: 100%; max-width: 560px; padding: 18px; } .shortcut-hint { display: none; } .bulk-grid { grid-template-columns: 1fr; } .site-footer { width: min(100%, calc(100vw - 12px)); margin: 0 auto 16px; padding: 10px 12px; } } @media (max-width: 980px) and (min-width: 901px) { .table-wrap { overflow-x: auto; } table { min-width: 900px; } } @media (max-width: 900px) { .table-wrap { border: 0; background: transparent; overflow: visible; } table { min-width: 0; border-collapse: separate; border-spacing: 0 10px; } thead { display: none; } tbody, tr { display: block; } tbody tr { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface-1); box-shadow: var(--edge-highlight); padding: 8px 10px; } tbody tr:hover { background: var(--surface-1); } td { display: grid; grid-template-columns: minmax(96px, 42%) minmax(0, 1fr); gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--line); } td::before { content: attr(data-label); color: var(--text-faint); font: 600 var(--fs-micro)/1.2 var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; text-align: left; } td:last-child { border-bottom: 0; } .user-agent-cell { max-width: none; white-space: normal; word-break: break-word; } .row-actions { display: flex; justify-content: flex-end; gap: 8px; padding-top: 8px; } .row-actions::before, .empty-row td::before { content: none; } .mini-btn + .mini-btn { margin-left: 0; } .empty-row td { display: block; border-bottom: 0; text-align: center; padding: 12px 4px; } } @media (max-width: 760px) { .metric-grid.compact, .form-grid, .filter-grid, .compact-form, .bulk-grid, .main-nav { grid-template-columns: 1fr; } .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .field-span-2, .field-span-all { grid-column: auto; } h1 { font-size: 1.25rem; } .brand-block .brand-mark { font-size: 1.16rem; gap: 0.2rem; } .nav-btn, .nav-logout-mobile { width: 100%; text-align: center; } .auth-shell { width: min(100%, calc(100vw - 16px)); padding: 4px 12px 8px; border-radius: 0; display: flex; flex-direction: column; justify-content: center; } body:not(.auth-ready):not(.is-authenticated) .auth-panel, body:not(.auth-ready):not(.is-authenticated) #resetPasswordView { display: none !important; } .view-head, .panel, .sidebar { padding: 12px; } .metric-card { min-height: 72px; padding: 10px; } .metric-value { font-size: var(--fs-lg); } /* Agenda mode (§4): vertical list of traded days only. */ .calendar-grid { grid-template-columns: 1fr; } .calendar-cell-empty, .calendar-cell:not(.calendar-cell-has-trades) { display: none; } .calendar-agenda-note { display: block; } .setup-inline-controls { grid-template-columns: 1fr; } .trade-form-shell { gap: 12px; } .trade-form-layout { grid-template-columns: 1fr; gap: 10px; } #trade-entry .form-grid { grid-template-columns: 1fr; } .trade-grid-context, .trade-grid-risk, .trade-grid-review, .trade-grid-record { grid-template-columns: 1fr; } .trade-section { height: auto; padding: 11px; } .trade-section-head { gap: 2px; } .trade-grid { gap: 9px; } .trade-status-toggle { width: 100%; min-height: 44px; } .screenshot-preview { min-height: 64px; } #trade-entry .form-actions { margin-top: 4px; justify-content: stretch; } #trade-entry .form-actions .btn { flex: 1 1 100%; } .calendar-weekday { display: none; } .calendar-cell { min-height: 0; padding: 8px 10px; } .calendar-cell-meta { font-size: var(--fs-micro); line-height: 1.25; } .auth-panel { padding: 16px; } .auth-title, .auth-status, .auth-copy { text-align: center; } .auth-form-actions { display: grid; grid-template-columns: 1fr; } .auth-panel .btn { width: 100%; } .auth-link-btn { margin-top: -2px; font-size: 0.82rem; } .split-wrap { justify-content: flex-start; } input, select, textarea { font-size: 16px; } .site-footer { font-size: 11px; } .trust-row { display: none; } .tag-set { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 10px; } .tag-set label { min-width: 0; width: 100%; white-space: normal; overflow-wrap: anywhere; align-items: flex-start; padding: 8px 9px; font-size: var(--fs-label); } .tag-set input { margin-top: 2px; } .strategy-toggle-group { width: 100%; } .strategy-toggle-btn { width: 100%; padding-inline: 10px; } .nav-logout-mobile { margin-top: 6px; margin-bottom: 10px; } } @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* View enter — 4px rise + fade on activation; no exit animation. */ @keyframes viewEnter { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } /* pnl-tick — directional flash on live value change. Applied by app.js on the poll patch path; removed on animationend so each change replays. */ @keyframes tickUp { from { background-color: var(--pnl-pos-soft); } to { background-color: transparent; } } @keyframes tickDown { from { background-color: var(--pnl-neg-soft); } to { background-color: transparent; } } .tick-up { animation: tickUp var(--dur-tick) var(--ease-out); } .tick-down { animation: tickDown var(--dur-tick) var(--ease-out); } /* Skeleton pulse — body.is-journal-loading is set while the server journal loads (auth restore / manual load); metric values and journal rows become pulsing blocks. Under reduced motion the zeroed tokens leave a static block. */ @keyframes skeletonPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } } body.is-journal-loading .metric-value, body.is-journal-loading #tradesBody td { color: transparent !important; background: var(--surface-3); border-radius: var(--radius-sm); animation: skeletonPulse 1.2s var(--ease-in-out) infinite; } body.is-journal-loading .metric-value *, body.is-journal-loading #tradesBody td * { visibility: hidden; } /* ========================================================================== Phase 6 — feature adds: risk strip, report panels support, sortable headers, score-info dialog, bulk-import honesty, close-at-market. ========================================================================== */ /* Balance card note chip: balanceOverride is set, so the number is manual and may disagree with the computed equity curve. */ .metric-note { justify-self: start; margin-top: var(--space-2); padding: 2px 6px; border-radius: var(--radius-sm); background: var(--warn-soft); color: var(--warn); font: 600 var(--fs-micro)/1.2 var(--font-mono); letter-spacing: 0.02em; cursor: help; } /* Risk-budget strip: today vs dailyMaxLoss, week vs weeklyMaxLoss. display:grid would defeat the hidden attribute — guard both levels. */ .risk-strip[hidden], .risk-strip-item[hidden] { display: none; } .risk-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-3); } .risk-strip-item { display: grid; gap: 7px; padding: var(--space-3) var(--space-4); background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--edge-highlight); } .risk-strip-label { color: var(--text-faint); font: 600 var(--fs-micro)/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; } .risk-strip-track { height: 4px; border-radius: var(--radius-pill); background: var(--surface-inset); border: 1px solid var(--line); overflow: hidden; } .risk-strip-fill { display: block; height: 100%; width: 0; background: var(--line-strong); transition: width var(--dur-base) var(--ease-out), background-color var(--dur-fast) var(--ease-out); } .risk-strip-value { color: var(--text-soft); font: 500 var(--fs-label)/1.3 var(--font-mono); } .risk-strip-item.is-warn .risk-strip-fill { background: var(--warn); } .risk-strip-item.is-warn .risk-strip-value { color: var(--warn); } .risk-strip-item.is-breach { border-color: var(--pnl-neg-line); } .risk-strip-item.is-breach .risk-strip-fill { background: var(--pnl-neg); } .risk-strip-item.is-breach .risk-strip-value { color: var(--pnl-neg); } /* Sortable journal headers: mono arrow indicator via aria-sort. */ th[data-sort] { cursor: pointer; user-select: none; } th[data-sort]:hover, th[data-sort]:focus-visible { color: var(--text-soft); } th[data-sort]:focus-visible { outline: none; box-shadow: var(--focus-ring); } th[aria-sort="ascending"]::after { content: " \2191"; } th[aria-sort="descending"]::after { content: " \2193"; } th[aria-sort] { color: var(--text); } /* Score-formula info popover (native