/* ── Environment badge (Phase B6: dev/prod identification) ─────────────── Hidden by default; auth-bootstrap toggles display + adds a tier class (env-dev / env-staging / etc.) when /api/config.instance is non-prod. Sits in the header next to the live indicator and admin badge. */ .env-badge { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; padding: 4px 8px; border-radius: 4px; } .env-badge.env-dev { background: rgba(245, 158, 11, 0.15); /* amber-500 @ 15% */ color: #fbbf24; /* amber-400 */ border: 1px solid rgba(245, 158, 11, 0.45); } /* Future tiers slot in the same way: .env-badge.env-staging { ... } */ /* Font families are managed by src/frontend/fonts.js (4/29/26). Default = system stacks (zero egress, instant). Three Google Fonts options (JetBrains / IBM Plex / Geist) are loaded lazily when the user picks one in the header dropdown. The previous self-hosted Atkinson Hyperlegible setup was 404'ing in production because the .woff2 files weren't being copied into the deployed bundle — every browser was already falling back to system anyway, so this is a clean cut. */ /* ─── THEME TOKENS ─────────────────────────────────────────────── Three themes selected via : (default — no attr) → Original (terminal-dense, purple-accent) [data-theme="compass-black"] → Compass Black (clean dark, less chrome) [data-theme="compass-white"] → Compass White (light, professional) Brand data-encoding colors (--pika = positive GEX yellow, --barney = negative GEX purple, --king = orange, --gate = teal) are PRESERVED across themes so users don't need to relearn the visual encoding — they just shift saturation slightly for white-bg readability when needed. The themes vary the CHROME (bg, text, borders, grid pattern, glow/shadow) more than the data colors. Adding a new theme: copy a [data-theme=…] block below, tweak values, add an entry to the THEMES registry in app.js + a row in renderLadderCogPopover()'s theme picker. */ :root { --bg: #080b0f; --bg2: #0d1117; --bg3: #111820; --bg4: #161e28; --border: rgba(255,255,255,0.06); --border2: rgba(255,255,255,0.1); --text: #e8eaed; --text2: #8b95a1; --text3: #4a5568; --pika: #f5c842; --pika2: rgba(245,200,66,0.15); --pika3: rgba(245,200,66,0.06); --barney: #9b5de5; --barney2: rgba(155,93,229,0.15); --barney3: rgba(155,93,229,0.06); --king: #ff6b35; --king2: rgba(255,107,53,0.2); --gate: #00d4aa; --gate2: rgba(0,212,170,0.15); --red: #ef4444; --green: #22c55e; --blue: #3b82f6; --flip: #60a5fa; /* fonts.js overrides these via inline style on when the user picks a non-system family. The values below are the initial-paint defaults; ANY non-system choice is applied before first render via the import side-effect in fonts.js. */ --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Theme-tunable chrome flags. Original keeps the grid pattern + glow effects characteristic of the terminal-dense look; the White theme drops them to read cleaner. */ --grid-color: rgba(255,255,255,0.015); --shadow-card: 0 4px 16px rgba(0,0,0,0.25); --shadow-glow: 0 0 18px rgba(255,107,53,0.06); --bg-input: rgba(255,255,255,0.04); /* Spot-row anchor — these mark the strike-row containing current spot. Original uses a near-white left zone to make spot pop on dark bg. Light themes invert to a dark accent so the zone stays a visual anchor rather than disappearing into the white surface. Replaces the previous hardcoded rgba(255,255,255,0.92) values in app.js DS object. */ --spot-pill-bg: rgba(255,255,255,0.92); --spot-pill-color: #080b0f; --spot-arrow-color: rgba(255,255,255,0.35); --spot-zone-bg: rgba(255,255,255,0.92); --spot-border-color:rgba(255,255,255,0.9); --badge-pill-bg: rgba(0,0,0,0.55); /* Faint text — non-flagged strike numbers, dim labels. Replaces hardcoded rgba(255,255,255,0.55) at call sites so light themes can flip to a dark variant. */ --text-faint: rgba(255,255,255,0.55); /* Subtle backgrounds — hover states, dim panels, table-row stripes. Replace the dozen+ hardcoded `rgba(255,255,255,0.0X)` uses across app.css. White theme gets dark-on-white inversions so subtle affordances (hover, alt-row) stay visible. */ --bg-hover: rgba(255,255,255,0.025); --bg-subtle: rgba(255,255,255,0.04); /* Spot-row pulse animation endpoints — used by spotBorderPulse + spotShadowPulse keyframes. Original hardcoded full-bright white at peak; themes can supply contrast-appropriate values. */ --spot-pulse-strong: rgba(255,255,255,0.95); --spot-pulse-faint: rgba(255,255,255,0.25); } /* ── White ──────────────────────────────────────────────────── Light professional. Bg flips to near-white; text to near-black; borders to subtle dark; data-encoding accents shift darker for contrast on white surfaces (yellow→amber, light-violet→darker violet, etc.). Spot-row zone inverts to a near-black panel so the visual anchor remains. */ [data-theme="white"] { --bg: #f7f8fa; --bg2: #ffffff; --bg3: #f1f3f6; --bg4: #e8ecf1; --border: rgba(0,0,0,0.07); --border2: rgba(0,0,0,0.11); --text: #0f172a; --text2: #475569; --text3: #94a3b8; /* Darker accents for white-bg readability */ --pika: #b45309; /* amber — yellow is illegible on white */ --pika2: rgba(180,83,9,0.12); --pika3: rgba(180,83,9,0.05); --barney: #7c3aed; /* darker violet */ --barney2: rgba(124,58,237,0.12); --barney3: rgba(124,58,237,0.05); --king: #dc2626; /* red — high importance */ --king2: rgba(220,38,38,0.13); --gate: #0d9488; /* darker teal */ --gate2: rgba(13,148,136,0.13); --red: #dc2626; --green: #16a34a; --blue: #2563eb; --flip: #2563eb; --grid-color: rgba(0,0,0,0); --shadow-card: 0 1px 0 rgba(0,0,0,0.04); --shadow-glow: none; --bg-input: rgba(0,0,0,0.04); /* Spot-row anchor inverted: dark panel on light bg, light text on it. */ --spot-pill-bg: #0f172a; --spot-pill-color: #f7f8fa; --spot-arrow-color: rgba(15,23,42,0.45); --spot-zone-bg: rgba(15,23,42,0.92); --spot-border-color:rgba(15,23,42,0.85); --badge-pill-bg: rgba(255,255,255,0.85); /* Faint strike text reads on white bg */ --text-faint: rgba(15,23,42,0.55); /* Subtle backgrounds inverted: dark-on-white for hover / alt-row affordances. Slightly stronger than the dark-theme equivalents since subtle dark on white is harder to perceive than subtle light on black. */ --bg-hover: rgba(15,23,42,0.04); --bg-subtle: rgba(15,23,42,0.05); /* Spot-row pulse animation — invert to dark-on-white. */ --spot-pulse-strong: rgba(15,23,42,0.92); --spot-pulse-faint: rgba(15,23,42,0.30); } * { margin: 0; padding: 0; box-sizing: border-box; } body { background: var(--bg); color: var(--text); font-family: var(--sans); min-height: 100vh; overflow-x: hidden; } /* Subtle grid background. Color sourced from --grid-color so themes can drop it (Compass themes set it to transparent). */ body::before { content: ''; position: fixed; inset: 0; background-image: linear-gradient(var(--grid-color) 1px, transparent 1px), linear-gradient(90deg, var(--grid-color) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; z-index: 0; } /* ── HEADER ── bg uses --bg with backdrop-blur for the sticky-translucent feel. Themes set --bg appropriately so this transparency-overlay works on both dark and light surfaces. 4/29/26: scoped to .app-navbar (the top-level page header) so it no longer cascades into nested

elements like the collapsible-sidebar section heads — which were inheriting height:52px and reading as huge bars on the Heatmap rail. */ .app-navbar { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); padding: 0 24px; height: 52px; display: flex; align-items: center; gap: 32px; } .logo { font-family: var(--sans); font-size: 15px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text); } .logo span { color: var(--pika); } .nav-tabs { display: flex; gap: 2px; background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; padding: 3px; } .nav-tab { font-family: var(--mono); font-size: 11px; padding: 5px 14px; border-radius: 5px; cursor: pointer; color: var(--text2); letter-spacing: 0.04em; transition: all 0.15s; border: none; background: none; } .nav-tab.active { background: var(--bg); color: var(--text); border: 1px solid var(--border2); } .nav-tab:hover:not(.active) { color: var(--text); } /* (.nav-cluster* removed — flat tabs; the GEX category prefix was dropped in favor of a per-view GEX/VEX toggle.) */ .header-right { margin-left: auto; display: flex; align-items: center; gap: 16px; } .live-badge { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px; color: var(--green); letter-spacing: 0.08em; } /* Market phase chip — sits left of the .live-badge. Hidden during regular session; reveals during extended + overnight to flag that server-side polling + WS broadcasts are throttled. Phase is set by app.js on init + transition (body[data-market-phase=...]). */ .market-phase-chip { display: none; align-items: center; font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; padding: 4px 8px; border-radius: 4px; margin-right: 8px; } body[data-market-phase="extended"] .market-phase-chip { display: inline-flex; background: rgba(245, 200, 66, 0.10); color: var(--pika); border: 1px solid rgba(245, 200, 66, 0.30); } body[data-market-phase="extended"] .market-phase-chip::before { content: '◐ Extended Hours'; } body[data-market-phase="overnight"] .market-phase-chip { display: inline-flex; background: rgba(155, 93, 229, 0.10); color: var(--barney); border: 1px solid rgba(155, 93, 229, 0.30); } body[data-market-phase="overnight"] .market-phase-chip::before { content: '⏸ Markets Closed'; } .live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: pulse 2s infinite; } @keyframes pulse { 0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34,197,94,0.4); } 50% { opacity: 0.8; box-shadow: 0 0 0 4px rgba(34,197,94,0); } } .regime-badge { font-family: var(--mono); font-size: 10px; padding: 4px 10px; border-radius: 4px; letter-spacing: 0.06em; font-weight: 700; } .regime-pos { background: var(--pika2); color: var(--pika); border: 1px solid rgba(245,200,66,0.3); } .regime-neg { background: var(--barney2); color: var(--barney); border: 1px solid rgba(155,93,229,0.3); } .data-source { font-family: var(--mono); font-size: 10px; color: var(--text3); letter-spacing: 0.04em; } /* ── VIEWS ── */ .view { display: none; padding: 20px 24px; position: relative; z-index: 1; } .view.active { display: block; } /* ── SINGLE INSTRUMENT LAYOUT ── 4/29/26 tighten pass: dropped from 3-column (sidebar / ladder / detail) to 2-column (sidebar / ladder). Per-node detail moved to hover tooltip (multiTooltip), pattern detector + key levels moved into the left sidebar. Ladder gets the freed space — no longer squeezed by a 320px right rail. */ .instrument-layout { display: grid; grid-template-columns: 260px 1fr; gap: 14px; height: calc(100vh - 92px); } /* ── PANELS ── */ .panel { background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; } .panel-header { padding: 12px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } .panel-title { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text2); } .panel-body { flex: 1; overflow-y: auto; overflow-x: hidden; } .panel-body::-webkit-scrollbar { width: 3px; } .panel-body::-webkit-scrollbar-track { background: transparent; } .panel-body::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; } /* ── TICKER SELECTOR ── 4/29/26 tighten pass: cards collapsed to single-row chips. Symbol + price + change% on one line; the long ticker name (e.g. "iShares Russell 2000 ETF") moved into a title attribute (visible on hover) so the rail stays dense at four+ instruments. */ .ticker-select { display: flex; flex-direction: column; gap: 2px; padding: 8px; } .ticker-btn { display: flex; align-items: center; justify-content: space-between; text-align: left; width: 100%; padding: 6px 10px; border-radius: 5px; cursor: pointer; transition: background 0.12s, border-color 0.12s; border: 1px solid transparent; background: none; min-height: 28px; } .ticker-btn:hover { background: var(--bg3); border-color: var(--border); } .ticker-btn.active { background: var(--bg4); border-color: var(--border2); } .ticker-btn-left { display: flex; align-items: baseline; gap: 8px; min-width: 0; } .ticker-btn-right { display: flex; align-items: baseline; gap: 8px; flex-shrink: 0; } .ticker-name { font-family: var(--sans); font-size: 12px; font-weight: 700; color: var(--text); letter-spacing: 0.02em; } .ticker-price { font-family: var(--mono); font-size: 11px; color: var(--text2); } .ticker-change { font-family: var(--mono); font-size: 10px; font-weight: 600; min-width: 38px; text-align: right; } .pos { color: var(--green); } .neg { color: var(--red); } /* Legacy .ticker-meta — preserved for any in-flight use; the row layout no longer renders it, but admin pages or other consumers might. */ .ticker-meta { font-family: var(--mono); font-size: 9px; color: var(--text3); letter-spacing: 0.04em; margin-top: 2px; } /* ── REGIME PANEL ── */ .regime-section { padding: 14px 16px; border-bottom: 1px solid var(--border); } .regime-state { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .regime-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; } .regime-label { font-family: var(--sans); font-size: 13px; font-weight: 700; } .regime-desc { font-family: var(--mono); font-size: 9px; color: var(--text2); line-height: 1.6; letter-spacing: 0.03em; } .regime-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; } .stat-cell { background: var(--bg3); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; } .stat-label { font-family: var(--mono); font-size: 9px; color: var(--text3); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 3px; } .stat-value { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--text); } /* ── NODE LADDER ── */ .node-ladder { padding: 8px 0; position: relative; } .price-line { position: sticky; top: 0; z-index: 10; background: #130e06; border-top: 1px solid rgba(255,107,53,0.5); border-bottom: 1px solid rgba(255,107,53,0.5); padding: 6px 16px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 0 18px rgba(255,107,53,0.07), 0 2px 10px rgba(0,0,0,0.7); } .price-line-label { font-family: var(--mono); font-size: 9px; color: var(--king); letter-spacing: 0.08em; text-transform: uppercase; } .price-line-value { font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--king); } .node-row { display: flex; align-items: center; padding: 3px 16px 3px 12px; gap: 8px; transition: background 0.1s; position: relative; -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; } .node-row:hover { background: var(--bg-hover); } .king-node { background: rgba(255,107,53,0.11); box-shadow: inset 0 0 18px rgba(255,107,53,0.06); } .gate-node { border-left: 2px solid rgba(0,212,170,0.3); } /* Spot price row — separator lines + animated left border. Top/bottom shadows use --spot-border-color so they're visible on both themes. */ .node-row.at-price { box-shadow: 0 -2px 0 var(--spot-border-color), 0 2px 0 var(--spot-border-color); z-index: 1; position: relative; } .spot-arrow { display: inline-flex; align-items: center; justify-content: center; min-width: 13px; flex-shrink: 0; line-height: 1; will-change: opacity; animation: spotArrowPulse 1.8s ease-in-out infinite; } @keyframes spotArrowPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } } @keyframes spotBorderPulse { 0%,100% { border-left-color: var(--spot-pulse-strong); } 50% { border-left-color: var(--spot-pulse-faint); } } @keyframes spotShadowPulse { 0%,100% { box-shadow: inset 3px 0 0 var(--spot-pulse-strong); } 50% { box-shadow: inset 3px 0 0 var(--spot-pulse-faint); } } .strike-label { font-family: var(--mono); font-size: 11px; color: var(--text2); width: 54px; flex-shrink: 0; letter-spacing: 0.02em; } .strike-label.king { color: var(--king); font-weight: 700; } .strike-label.gate { color: var(--gate); font-weight: 600; } /* ── NODE BADGE — left-side icon column ── */ .node-badge { width: 26px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 16px; line-height: 1; filter: drop-shadow(0 0 4px currentColor); } .node-badge.empty { width: 26px; } .node-badge-label { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.1em; flex-shrink: 0; padding-right: 4px; } .node-bar-container { flex: 1; height: 20px; display: flex; align-items: center; position: relative; } .node-bar { height: 14px; border-radius: 2px; position: absolute; transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1); min-width: 2px; } .node-bar.pika { background: linear-gradient(90deg, var(--pika2), var(--pika)); left: 50%; } .node-bar.barney { background: linear-gradient(90deg, var(--barney), var(--barney2)); right: 50%; } .node-center-line { position: absolute; left: 50%; width: 1px; height: 20px; background: var(--border2); transform: translateX(-0.5px); } /* ── Volume-profile bar overlay ───────────────────────────────────── Per-row bar zone for Profile variants A / B / C. The zone fills the row's flex middle area and is `position:relative` so child .node-vp-bar elements absolute-position inside it. Bar widths are linear in the value (NOT power-law — see dsProfileBarHTML doc-block). */ .node-vp-zone { position: relative; align-self: stretch; display: flex; align-items: center; overflow: hidden; /* No min-height: zone stretches to whatever the row's text content dictates so profile rows match heat-default row height exactly. Bars use a fixed pixel height instead of a percentage so they stay readable regardless of how short the row collapses. */ } .node-vp-bar { position: absolute; /* Fixed 10px bar height (was height:70%) — vertical centering via top:50% + translateY keeps the bar centered in whatever row height the text dictates. Predictable visual weight across all row densities. */ height: 10px; top: 50%; transform: translateY(-50%); border-radius: 2px; transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s linear; min-width: 1px; } /* Variant A — single magnitude bar, left-anchored. */ .node-vp-bar.node-vp-a { left: 0; } /* Variant B — stacked: call segment then put segment, both left of center. */ .node-vp-bar.node-vp-b-call { /* width + left set inline */ } .node-vp-bar.node-vp-b-put { /* width + left set inline; abuts call segment */ } /* Variant C — center-axis split. */ .node-vp-bar.node-vp-c-call { /* width inline; left:50% */ } .node-vp-bar.node-vp-c-put { /* width inline; right:50% */ } /* (Extras removed 4/27/26 — POC accent / VA bracket / distance-fade / air-pocket dashed didn't earn their visual cost. Reintroduce only when there's a concrete trader-utility concept worth shipping — candidates: per-strike sparkline of recent change using partner's Phase 4.1 rolling-delta data; rapid-velocity glyph using the existing isRapidVelocity flag.) */ /* ── Display cog button + popover ────────────────────────────────── Single labeled "Display" entry in the legend bar; popover opens below and reflects whichever ladder (Heatmap or Multi) is active. The label is the discoverability fix — without it the icon alone was easy to skim past. */ .ladder-cog { background: var(--bg3); border: 1px solid var(--border); border-radius: 5px; padding: 4px 10px; cursor: pointer; color: var(--text2); display: inline-flex; align-items: center; gap: 5px; margin-left: 4px; transition: background 0.15s, color 0.15s, border-color 0.15s; } .ladder-cog:hover { background: var(--bg); color: var(--text); border-color: var(--border2); } .ladder-cog[aria-expanded="true"] { background: var(--bg); color: var(--text); border-color: var(--king); } .ladder-cog-label { font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; } .ladder-cog-popover { position: fixed; /* z-index 9500 — above sb-section-hover-card (9000) and the other 9k-tier floating UI, below tour overlay (10000) so the tour can still spotlight the cog if needed. Was 1000; bumped 4/30 evening when popover was getting visually obscured by higher-z-index sidebar hover cards on Heatmap/Multi. */ z-index: 9500; min-width: 280px; max-width: 340px; padding: 12px 14px; background: var(--bg2); border: 1px solid var(--border2); border-radius: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35), 0 2px 4px rgba(0, 0, 0, 0.2); font-family: var(--mono); font-size: 11px; color: var(--text2); } .ladder-cog-header { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text); margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border); } /* Settings → DISPLAY category label (4/29 evening). Sits below the "Settings" header and groups the actual settings sections. Future categories (Alerts, Notifications, Account) slot in alongside. */ .ladder-cog-category { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text2); margin: 0 0 8px 0; padding: 2px 4px; background: var(--bg3); border-radius: 3px; text-align: center; } /* "page" tag next to per-page section titles — distinguishes them from global settings at a glance. */ .ladder-cog-section-tag { display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 8px; font-size: 8px; font-weight: 700; letter-spacing: 0.08em; color: var(--text3); background: var(--bg3); border: 1px solid var(--border); text-transform: uppercase; vertical-align: middle; } .ladder-cog-section-title { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text3); margin: 4px 0 4px; } .ladder-cog-radio, .ladder-cog-checkbox { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; padding: 5px 4px; border-radius: 3px; cursor: pointer; } .ladder-cog-radio:hover, .ladder-cog-checkbox:hover { background:var(--bg-subtle); } .ladder-cog-radio input[type="radio"], .ladder-cog-checkbox input[type="checkbox"] { grid-row: 1 / span 2; margin: 0; accent-color: var(--king); } .ladder-cog-radio-label, .ladder-cog-checkbox-label { font-size: 11px; color: var(--text); line-height: 1.2; } .ladder-cog-radio-hint, .ladder-cog-checkbox-hint { font-size: 9px; color: var(--text3); line-height: 1.2; } .ladder-cog-reset { margin-top: 10px; width: 100%; padding: 5px 0; background: var(--bg3); border: 1px solid var(--border); border-radius: 3px; color: var(--text3); font-family: var(--mono); font-size: 10px; cursor: pointer; transition: background 0.15s, color 0.15s; } .ladder-cog-reset:hover { background: var(--bg); color: var(--text); } /* ── Sound section (5/01/26) ── Nested 2-column layout for the volume slider, output preset, and per-channel mutes with inline Test buttons. Tight checkbox variant drops the vertical hint slot since channel labels are self-explanatory once you see them paired with the channel symbol. */ .ladder-cog-checkbox-tight { grid-template-rows: auto; padding: 4px 6px; } .ladder-cog-checkbox-tight .ladder-cog-checkbox-label { grid-row: 1; } .ladder-cog-audio-row { display: flex; gap: 8px; margin-top: 6px; padding: 0 6px; } .ladder-cog-audio-row-dim { opacity: 0.45; pointer-events: none; } .ladder-cog-audio-vol { display: flex; align-items: center; gap: 8px; flex: 1; font-size: 10px; color: var(--text2); } .ladder-cog-audio-vol > span:first-child { min-width: 44px; color: var(--text3); } .ladder-cog-audio-vol input[type="range"] { flex: 1; accent-color: var(--king); } .ladder-cog-audio-vol-num { min-width: 24px; text-align: right; font-family: var(--mono); font-size: 10px; color: var(--text3); } .ladder-cog-audio-output, .ladder-cog-audio-quiet { display: flex; align-items: center; gap: 6px; flex: 1; font-size: 10px; color: var(--text3); } .ladder-cog-audio-output > span, .ladder-cog-audio-quiet > span { min-width: 44px; } .ladder-cog-audio-output select, .ladder-cog-audio-quiet input[type="time"] { flex: 1; padding: 3px 6px; background: var(--bg3); border: 1px solid var(--border); border-radius: 3px; color: var(--text); font-family: var(--mono); font-size: 10px; } .ladder-cog-audio-channels { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; padding: 6px; background: var(--bg-subtle, var(--bg3)); border-radius: 4px; } /* Inline Test pill — clicking previews that channel's apex sound. stops onclick propagation so it doesn't toggle the parent checkbox. */ .ladder-cog-audio-test { display: inline-block; margin-left: 6px; padding: 1px 7px; background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; color: var(--text2); font-family: var(--mono); font-size: 9px; letter-spacing: 0.05em; cursor: pointer; transition: color 0.12s, border-color 0.12s, background 0.12s; } .ladder-cog-audio-test:hover { color: var(--text); background: var(--bg); border-color: var(--border2); } /* Tour-replay button (Help category — 4/29 evening). Shares the reset-button visual treatment so the popover footer reads as a row of action buttons. */ .ladder-cog-tour-btn { margin-top: 4px; width: 100%; padding: 5px 0; background: var(--bg3); border: 1px solid var(--border); border-radius: 3px; color: var(--text3); font-family: var(--mono); font-size: 10px; cursor: pointer; transition: background 0.15s, color 0.15s; } .ladder-cog-tour-btn:hover { background: var(--bg); color: var(--text); } /* Section divider — separates Ladder / Annotations / Palette / Font */ .ladder-cog-divider { height: 1px; background: var(--border); margin: 10px 0; } /* Section hint — small italicized note below a section. Used to explain when extras are gated (only meaningful in Profile views). */ .ladder-cog-section-hint { font-size: 9px; color: var(--text3); font-style: italic; line-height: 1.35; padding: 2px 4px 0; } /* Dimmed radio — used to signal "this option is selectable but won't render anything in the current context." E.g. profile views on Heatmap-Weekly: the multi-expiry grid layout doesn't carry profile bars, so the option is dimmed with an explanatory hint underneath. */ .ladder-cog-radio-dimmed { opacity: 0.5; } /* Compact radio — used for Palette section so 6 options don't sprawl */ .ladder-cog-radio-compact { grid-template-rows: auto; padding: 3px 4px; } .ladder-cog-radio-compact .ladder-cog-radio-label { grid-column: 2; } /* Font row — two compact field selects side-by-side */ .ladder-cog-fontrow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 4px 4px 0; } .ladder-cog-fontfield { display: flex; flex-direction: column; gap: 3px; font-size: 9px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; } .ladder-cog-fontfield select { background: var(--bg3); color: var(--text); border: 1px solid var(--border); border-radius: 3px; padding: 3px 5px; font-family: var(--mono); font-size: 11px; } .ladder-cog-fontfield select:hover { border-color: var(--border2); } /* Wide variant — used by the Font Family picker (one full-width select instead of two side-by-side sizing fields). */ .ladder-cog-fontfield-wide { flex: 1; } .ladder-cog-fontfield-wide select { width: 100%; } /* Palette + View dropdowns (4/29/26) — replace the radio lists. Same styling as the font selects so the cog reads consistently. */ .ladder-cog-palette-select, .ladder-cog-view-select { width: 100%; background: var(--bg3); color: var(--text); border: 1px solid var(--border); border-radius: 3px; padding: 5px 7px; font-family: var(--mono); font-size: 11px; cursor: pointer; } .ladder-cog-palette-select:hover, .ladder-cog-view-select:hover { border-color: var(--border2); } /* Mobile — popover renders as bottom-sheet on narrow viewports */ @media (max-width: 520px) { .ladder-cog-popover { position: fixed !important; left: 8px !important; right: 8px !important; top: auto !important; bottom: 12px !important; max-width: none; } } .node-value { font-family: var(--mono); font-size: 11px; min-width: 90px; text-align: right; flex-shrink: 0; letter-spacing: 0.02em; } .node-tag { font-family: var(--mono); font-size: 8px; padding: 2px 5px; border-radius: 3px; letter-spacing: 0.06em; flex-shrink: 0; font-weight: 700; } .tag-king { background: rgba(255,107,53,0.18); color: var(--king); border: 1px solid rgba(255,107,53,0.5); font-size: 9px; letter-spacing: 0.1em; text-shadow: 0 0 8px rgba(255,107,53,0.6); } .tag-gate { background: var(--gate2); color: var(--gate); border: 1px solid rgba(0,212,170,0.3); } .tag-fresh { background: rgba(34,197,94,0.1); color: var(--green); border: 1px solid rgba(34,197,94,0.2); } .tag-tested { background: rgba(245,200,66,0.1); color: var(--pika); border: 1px solid rgba(245,200,66,0.2); } .tag-weak { background: rgba(239,68,68,0.1); color: var(--red); border: 1px solid rgba(239,68,68,0.2); } /* ── DETAIL PANEL ── */ .detail-section { padding: 14px 16px; border-bottom: 1px solid var(--border); } .detail-title { font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text3); margin-bottom: 10px; } .node-detail-card { background: var(--bg3); border: 1px solid var(--border); border-radius: 8px; padding: 12px; margin-bottom: 8px; } .node-detail-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } .node-detail-strike { font-family: var(--mono); font-size: 16px; font-weight: 700; } .tap-dots { display: flex; gap: 3px; align-items: center; } .tap-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border2); } .tap-dot.filled { background: var(--pika); } .tap-dot.used { background: var(--text3); } .prob-bar { height: 4px; background: var(--bg4); border-radius: 2px; margin: 8px 0 4px; overflow: hidden; } .prob-fill { height: 100%; border-radius: 2px; transition: width 1s; } .prob-label { font-family: var(--mono); font-size: 9px; color: var(--text3); display: flex; justify-content: space-between; } .gex-vex-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; } .gvex-cell { background: var(--bg4); border-radius: 5px; padding: 6px 8px; } .gvex-label { font-family: var(--mono); font-size: 8px; color: var(--text3); letter-spacing: 0.08em; } .gvex-value { font-family: var(--mono); font-size: 12px; font-weight: 700; margin-top: 2px; } /* ── PATTERN DETECTOR ── */ .pattern-card { background: var(--bg3); border-radius: 8px; padding: 12px; margin-bottom: 8px; border: 1px solid var(--border); position: relative; overflow: hidden; } .pattern-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; } /* Pattern accent stripes — kind-specific, see patterns.js _PATTERN_DIR_COLOR for the framework. Trade bias gets semantic green/red; regime states match the regime card's pika/barney data encoding; structural patterns get king (level magnetism) or gate (cluster). */ /* Trade bias */ .pattern-card.bull::before { background: var(--green); } .pattern-card.bear::before { background: var(--red); } /* Regime state — aligned with the left-rail regime card */ .pattern-card.regime-pos::before { background: var(--pika); } .pattern-card.regime-neg::before { background: var(--barney); } /* Structural */ .pattern-card.level::before { background: var(--king); } .pattern-card.cluster::before { background: var(--gate); } /* No signal */ .pattern-card.neutral::before { background: var(--text3); } /* Legacy aliases — match the renderer's backward-compat mapping */ .pattern-card.bullish::before { background: var(--green); } .pattern-card.bearish::before { background: var(--red); } .pattern-card.caution::before { background: var(--king); } .pattern-name { font-family: var(--sans); font-size: 12px; font-weight: 700; margin-bottom: 3px; } .pattern-desc { font-family: var(--mono); font-size: 9px; color: var(--text2); line-height: 1.6; letter-spacing: 0.02em; } .pattern-conf { display: flex; align-items: center; gap: 6px; margin-top: 6px; } .conf-bar { flex: 1; height: 3px; background: var(--bg4); border-radius: 1px; overflow: hidden; } .conf-fill { height: 100%; border-radius: 1px; background: var(--pika); } .conf-label { font-family: var(--mono); font-size: 9px; color: var(--text3); } /* ── HEATMAP GRID (multi-expiry) ── */ .heat-grid { display: grid; font-family: var(--mono); } .heat-grid-head { background: var(--bg3); color: var(--text3); font-size: 10px; padding: 6px 8px; text-align: right; letter-spacing: 0.03em; font-weight: 500; white-space: nowrap; position: sticky; top: 0; z-index: 2; } .heat-grid-strike-head { text-align: center; z-index: 3; } .heat-grid-strike { background: var(--bg); color: var(--text2); font-weight: 600; padding: 0; -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; letter-spacing: 0.02em; position: sticky; left: 0; z-index: 1; display: flex; align-items: center; justify-content: center; } .heat-grid-strike.atprice { /* visual handled inline — keep only structural */ } .heat-grid-cell { padding: 0 8px; text-align: right; white-space: nowrap; font-weight: 400; -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; justify-content: flex-end; } .heat-grid-cell.king { font-weight: 800; } .heat-grid-cell.empty { color: var(--text3); opacity: 0.5; } .heat-grid-cell:not(.empty) { cursor: default; } .heat-grid-strike { cursor: default; } /* ── GRID MODE (1W) — hide right detail panel, expand ladder ── */ /* grid-mode (Weekly view) is now identical to default since the right detail panel was retired in the 4/29/26 tighten pass. Selector kept as a no-op so any code paths that toggle it don't error. */ .instrument-layout.grid-mode { grid-template-columns: 260px 1fr; } /* ── TRINITY MODE ── */ .multi-layout { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; height: calc(100vh - 92px); } .multi-panel { background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; display: flex; flex-direction: column; overflow: hidden; } .multi-header { padding: 6px 12px; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .multi-ticker { font-family: var(--sans); font-size: 13px; font-weight: 800; letter-spacing: 0.04em; } /* Heat gauge sits between the ticker name and the price block. Compact variant — drops the "Heat" label, narrows the sparkline so it fits cleanly in a header row that already carries ticker + price + %change. Inherits all .heat-gauge zone classes. */ .multi-header .ladder-heat-gauge { padding: 2px 6px; font-size: 8px; flex-shrink: 0; } .multi-header .ladder-heat-gauge .heat-gauge-label { display: none; } .multi-header .ladder-heat-gauge .heat-gauge-sparkline { width: 38px; height: 12px; } /* Push price block to the right edge regardless of how many siblings are in the header (ticker + heat gauge + price block). */ .multi-price-block { text-align: right; margin-left: auto; } .multi-price { font-family: var(--mono); font-size: 11px; font-weight: 700; } .multi-change { font-family: var(--mono); font-size: 9px; } .multi-regime { display: flex; align-items: center; gap: 6px; padding: 3px 12px; border-bottom: 1px solid var(--border); background: var(--bg3); flex-shrink: 0; } .multi-regime-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .multi-regime-text { font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; } .multi-regime-net { margin-left: auto; font-family: var(--mono); font-size: 10px; color: var(--text3); } .multi-ladder { flex: 1; overflow-y: auto; padding: 4px 0; } .multi-ladder::-webkit-scrollbar { width: 2px; } .multi-ladder::-webkit-scrollbar-thumb { background: var(--border); border-radius: 1px; } .multi-node { display: flex; align-items: center; padding: 1px 8px; /* Gap bumped 4→8px (4/27/26) to match Heatmap's row gap so role-label pills (which float at left:100% of .tn-strike) have proportional breathing room before the bar zone — fixes the "labels overlap the bar" perception on Multi profile modes. */ gap: 8px; -webkit-font-smoothing: antialiased; text-rendering: geometricPrecision; } .tn-strike { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--text2); /* Width bumped 44→60px (4/27/26) to match Heatmap's effective strike column width. Centers strike text in a wider zone so the floating role-label pill sits within proportional space before reaching the bar zone. */ width: 60px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .tn-strike.king { color: var(--king); font-weight: 700; } .tn-bar-wrap { flex: 1; height: 12px; position: relative; display: flex; align-items: center; } .tn-bar { height: 7px; border-radius: 1px; position: absolute; min-width: 1px; transition: width 1s cubic-bezier(0.16, 1, 0.3, 1); } .tn-bar.pika { background: var(--pika); left: 50%; opacity: 0.85; } .tn-bar.barney { background: var(--barney); right: 50%; opacity: 0.85; } .tn-center { position: absolute; left: 50%; width: 1px; height: 12px; background: var(--border2); } .tn-val { font-family: var(--mono); font-size: 11px; min-width: 72px; text-align: right; flex-shrink: 0; } /* ── ALIGNMENT SCORE ── */ .alignment-bar { padding: 14px 16px; border-top: 1px solid var(--border); flex-shrink: 0; background: var(--bg3); } .alignment-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .alignment-label { font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text3); } .alignment-score { font-family: var(--mono); font-size: 14px; font-weight: 700; } .alignment-track { height: 6px; background: var(--bg4); border-radius: 3px; overflow: hidden; margin-bottom: 6px; } .alignment-fill { height: 100%; border-radius: 3px; transition: width 1.5s cubic-bezier(0.16, 1, 0.3, 1); } .alignment-verdict { font-family: var(--mono); font-size: 9px; letter-spacing: 0.04em; } /* ── TRINITY FOOTER — SYSTEM STATUS ── */ .multi-footer { grid-column: 1 / -1; background: var(--bg2); border: 1px solid var(--border); border-radius: 10px; padding: 14px 20px; display: flex; align-items: center; gap: 24px; } .system-label { font-family: var(--mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text3); white-space: nowrap; } .verdict-chip { font-family: var(--sans); font-size: 13px; font-weight: 700; padding: 6px 16px; border-radius: 6px; } .verdict-full { background: rgba(34,197,94,0.15); color: var(--green); border: 1px solid rgba(34,197,94,0.3); } .verdict-partial { background: rgba(245,200,66,0.15); color: var(--pika); border: 1px solid rgba(245,200,66,0.3); } .verdict-diverge { background: rgba(239,68,68,0.15); color: var(--red); border: 1px solid rgba(239,68,68,0.3); } .verdict-detail { font-family: var(--mono); font-size: 10px; color: var(--text2); line-height: 1.6; letter-spacing: 0.02em; } .key-levels { margin-left: auto; display: flex; gap: 16px; } .kl-item { text-align: center; } .kl-label { font-family: var(--mono); font-size: 8px; color: var(--text3); letter-spacing: 0.06em; text-transform: uppercase; } .kl-value { font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--text); } /* ── REFRESH COUNTER ── */ .refresh-ring { width: 24px; height: 24px; position: relative; flex-shrink: 0; } .refresh-svg { transform: rotate(-90deg); } .refresh-track { fill: none; stroke: var(--border2); stroke-width: 2.5; } .refresh-fill { fill: none; stroke: var(--green); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 63; stroke-dashoffset: 63; transition: stroke-dashoffset 1s linear; } /* ── LEGEND ── */ .legend { display: flex; align-items: center; gap: 14px; padding: 0 24px; height: 36px; border-bottom: 1px solid var(--border); background: var(--bg2); position: sticky; top: 52px; z-index: 99; } .legend.hidden { display: none; } .legend-item { display: flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 9px; color: var(--text3); letter-spacing: 0.04em; position: relative; } .legend-item.has-tip { cursor: default; } .legend-tip { visibility: hidden; opacity: 0; pointer-events: none; position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); width: 260px; background: var(--bg2); border: 1px solid var(--border2); border-radius: 7px; padding: 11px 13px; z-index: 999; transition: opacity 0.15s ease, visibility 0.15s ease; box-shadow: 0 8px 24px rgba(0,0,0,0.5); } .legend-tip::after { content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-bottom-color: var(--border2); } .legend-item.has-tip:hover .legend-tip { visibility: visible; opacity: 1; } .tip-header { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; } .tip-icon { font-size: 15px; line-height: 1; filter: drop-shadow(0 0 4px currentColor); } .tip-label { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.08em; } .tip-body { font-family: var(--mono); font-size: 9.5px; color: var(--text2); line-height: 1.55; margin-bottom: 8px; } .tip-strategy { font-family: var(--mono); font-size: 9px; color: var(--text3); line-height: 1.5; border-top: 1px solid var(--border); padding-top: 7px; } .tip-strategy strong { color: var(--text2); font-weight: 700; } .legend-dot { width: 8px; height: 8px; border-radius: 2px; } .last-update { margin-left: auto; font-family: var(--mono); font-size: 9px; color: var(--text3); letter-spacing: 0.04em; } /* ── HEAT-DECAY GAUGE ── small toolbar pill on the heatmap. Color reflects how today's king magnitude compares to trailing 5-day avg. Painted by setHeatGaugeRatio() in app.js; .heat-gauge-* zone classes control color. */ .heat-gauge { display: flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 4px; font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em; background: var(--bg3); /* Slightly stronger border than the rest of the legend chrome so the sparkline reads as its own widget instead of dissolving into background. Pairs with the punchier polyline below. */ border: 1px solid var(--border2); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04); cursor: help; transition: all 0.15s; } .heat-gauge-label { color: var(--text3); text-transform: uppercase; } .heat-gauge-ratio { color: var(--text); font-weight: 700; } .heat-gauge-sparkline { width: 56px; height: 14px; display: inline-block; overflow: visible; margin-left: 2px; } .heat-gauge-sparkline polyline { fill: none; stroke: var(--text2); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; opacity: 1; } .heat-gauge-sparkline circle { fill: var(--text); stroke: var(--bg); stroke-width: 0.6; r: 1.8; } /* Sparkline color follows the gauge zone so the visual reinforces the ratio reading. */ .heat-gauge.heat-zone-elevated .heat-gauge-sparkline polyline { stroke: var(--pika); } .heat-gauge.heat-zone-elevated .heat-gauge-sparkline circle { fill: var(--pika); } .heat-gauge.heat-zone-heavy .heat-gauge-sparkline polyline { stroke: var(--king); } .heat-gauge.heat-zone-heavy .heat-gauge-sparkline circle { fill: var(--king); } .heat-gauge.heat-zone-extreme .heat-gauge-sparkline polyline { stroke: var(--red); } .heat-gauge.heat-zone-extreme .heat-gauge-sparkline circle { fill: var(--red); } /* Hide the gauge entirely when the active tab isn't Heatmap. Set in switchView() — fixes the "appears differently on different tabs" symptom where the legend gauge retained stale state from a previous Heatmap render after the user switched away. */ .heat-gauge.tab-hidden { display: none !important; } /* Zone classes — restrained per-zone background tinting that carries the heat-multiplier signal. Sparkline color + ratio-text color reinforce. Previous attempt swapped saturated bg colors which read as "the widget keeps changing its mind"; these are softer (~12-16% alpha against the chip's bg3) so the chip frame stays recognisable across regime transitions. */ .heat-gauge.heat-zone-suppressed { background: color-mix(in srgb, var(--text3) 8%, var(--bg3)); } .heat-gauge.heat-zone-suppressed .heat-gauge-sparkline polyline { stroke: var(--text3); opacity: 0.65; } .heat-gauge.heat-zone-suppressed .heat-gauge-ratio { color: var(--text2); } .heat-gauge.heat-zone-normal { /* default — bg3, no tint */ } .heat-gauge.heat-zone-elevated { background: color-mix(in srgb, var(--pika) 12%, var(--bg3)); border-color: color-mix(in srgb, var(--pika) 35%, var(--border2)); } .heat-gauge.heat-zone-elevated .heat-gauge-ratio { color: var(--pika); } .heat-gauge.heat-zone-heavy { background: color-mix(in srgb, var(--king) 14%, var(--bg3)); border-color: color-mix(in srgb, var(--king) 40%, var(--border2)); } .heat-gauge.heat-zone-heavy .heat-gauge-ratio { color: var(--king); } .heat-gauge.heat-zone-extreme { background: color-mix(in srgb, var(--red) 16%, var(--bg3)); border-color: color-mix(in srgb, var(--red) 50%, var(--border2)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--red) 25%, transparent); } .heat-gauge.heat-zone-extreme .heat-gauge-ratio { color: var(--red); } /* Bootstrap = <2 sessions of baseline. Shows absolute magnitude instead of a ratio. Sparkline still renders if we have ≥1 prior point. Visual frame stays the same as active mode. */ .heat-gauge.heat-zone-bootstrap .heat-gauge-ratio { color: var(--text3); } /* Atlas ghost-levels styles retired 4/29/26 (toggle removed). */ /* ── FLOW BASELINE BADGE — appears next to the ticker in the flow tape when today's session premium is unusually high vs 30-day avg. */ .flow-baseline-badge { display: inline-block; margin-left: 4px; padding: 1px 5px; border-radius: 3px; font-family: var(--mono); font-size: 9px; font-weight: 700; background: var(--king2); color: var(--king); border: 1px solid rgba(255,107,53,0.3); } .flow-baseline-badge.flow-baseline-mild { background: var(--pika3); color: var(--pika); border-color: rgba(245,200,66,0.3); } .flow-baseline-badge.flow-baseline-quiet { background:var(--bg-subtle); color: var(--text3); border-color: var(--border); } /* ── TOGGLE SWITCH ── */ .toggle-row { display: flex; gap: 4px; background: var(--bg3); border: 1px solid var(--border); border-radius: 6px; padding: 2px; } .toggle-opt { font-family: var(--mono); font-size: 9px; padding: 4px 10px; border-radius: 4px; cursor: pointer; color: var(--text3); letter-spacing: 0.06em; transition: all 0.12s; border: none; background: none; text-transform: uppercase; } .toggle-opt.active { background: var(--bg); color: var(--text); border: 1px solid var(--border2); } /* ── TRINITY TOOLTIP ── */ .multi-tooltip { position: fixed; z-index: 9999; pointer-events: none; background: var(--bg2); border: 1px solid var(--border2); border-radius: 10px; padding: 12px; width: 220px; box-shadow: 0 8px 32px rgba(0,0,0,0.7); opacity: 0; transition: opacity 0.1s; } .multi-tooltip.visible { opacity: 1; } /* ── PALETTE SELECTOR ── */ .palette-select { font-family: var(--mono); font-size: 9px; letter-spacing: 0.05em; background: var(--bg3); color: var(--text2); border: 1px solid var(--border2); border-radius: 5px; padding: 3px 22px 3px 8px; cursor: pointer; outline: none; appearance: none; -webkit-appearance: none; /* Caret SVG uses fill="currentColor" so the arrow inherits the text color of the select — automatically themes (gray on dark, slate on light). The fill is encoded in the URL so we use a computed-style approach via CSS mask + background-color in browsers that support it; for broad support we ship the SVG inline and let CSS color the parent. Inline-svg fill cannot reference a CSS variable directly, so we rely on currentColor inside the data URL — which DOES work because currentColor resolves at paint time using the parent's color. */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='currentColor'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 7px center; transition: border-color 0.12s, color 0.12s; } .palette-select:hover { border-color: var(--border2); color: var(--text); } /* Dropdown options use the theme's panel bg + text color so the open menu list matches the page. Native dropdowns get a usable min width when wrapped, but cap so they can't dominate the row */ .palette-select, .legend select { min-width: 80px; max-width: 160px; } /* The "Last update: —" text on the far right of the legend is purely informational; hide it on phone to free up space */ #lastUpdate { display: none; } /* Single instrument: stack vertically. The 100vh height calc was designed for desktop; on phone we let content flow and scroll the page naturally. */ .instrument-layout { display: flex; flex-direction: column; gap: 10px; height: auto; min-height: 0; } .instrument-layout .panel { min-height: 220px; } /* Make the heatmap panel taller since it's the primary content */ .instrument-layout > .panel:nth-child(2) { min-height: 60vh; } /* Multi: ladders stack vertically. Each gets full width and a sensible min-height so the strikes are still readable. */ .multi-layout { display: flex; flex-direction: column; height: auto; gap: 10px; } .multi-panels-row { grid-template-columns: 1fr; gap: 10px; } .multi-panel { min-height: 60vh; } /* Multi footer (System Alignment + verdict + key-levels) renders as horizontal context on desktop. On phone it had been stacking vertically but visually felt like a misplaced "sidebar in the middle of the charts" when sandwiched between three full-width panels. The summary information here is also redundant on phone — users scrolling through panels can read each instrument's regime and alignment directly on its panel. Hiding entirely on phone keeps the Multi tab to "3 vertical panels, nothing else." Desktop unchanged. */ .multi-footer-row, .multi-footer { display: none !important; } /* Also drop the legend bar on Multi specifically — its per-feature dropdowns (Mode / Strikes / Display cog) operate on a single active ticker, which doesn't apply when 3 panels each have their own. Less visual noise above the panel stack. */ body.tab-multi .legend { display: none !important; } /* Narrative: full-width, no two-column greeks row */ .narrative-greeks-row { grid-template-columns: 1fr; } .narrative-section { padding: 14px 14px; } .narrative-thesis { font-size: 12px; padding: 10px 12px; } .narrative-body { padding: 12px 14px !important; } } /* ─── Phone landscape / very small (≤480px) ───────────────────────── */ @media (max-width: 480px) { /* Drop ADMIN badge on the smallest screens — sign-out + LIVE indicator are the only non-tab things really worth keeping. */ .header-right > #adminBadge { display: none; } /* Logo can disappear entirely on the smallest screens — the active nav-tab is visually anchoring enough. */ .logo { display: none; } } /* ═════════════════════════════════════════════════════════════════════ RESPONSIVE — Pass 2: Atlas, Flow, Alerts (and the Flow detail modal) ───────────────────────────────────────────────────────────────────── These views were skipped in the mobile-MVP commit; they're usable on desktop unchanged but need their own reflow at small widths. Atlas is the hardest (chart + sidebar); Flow has a wide table that already scrolls horizontally; Alerts is mostly card-based and only needs the header + subtabs to wrap. ═════════════════════════════════════════════════════════════════════ */ /* ─── Tablet (641–1024px) — pass 2 ────────────────────────────────── */ @media (max-width: 1024px) { /* Atlas: narrow the sidebar so the chart gets more room */ .atlas-sidebar { width: 220px; } /* Flow stats grid: 4 → 2 columns so each stat card has room for its value at tablet widths */ .flow-stats { grid-template-columns: repeat(2, 1fr); } /* Alerts header: tighter gap so the subtabs row fits */ .alerts-header { gap: 6px; padding: 8px 12px; } } /* ─── Phone (≤640px) — pass 2 ─────────────────────────────────────── */ @media (max-width: 640px) { /* ── Atlas ── stack chart on top, sidebar (mini panels + narrative card) below. Chart gets the lion's share of vertical space; the sidebar is compact and scrolls within itself if the user wants to drill into the per-ticker stats. */ .atlas-main { flex-direction: column; } .atlas-chart-container { min-height: 60vh; flex: 1 1 auto; } .atlas-sidebar { width: 100%; border-left: none; border-top: 1px solid var(--border); max-height: 30vh; /* was 50vh — too dominant; chart matters more */ flex: 0 0 auto; } /* Sidebar mini panels (SPX/SPY/QQQ stats) get tighter padding on phone so 3 fit in roughly one screenful of scroll */ .atlas-mini-panel { padding: 6px 10px; } /* Narrative card at the bottom of the sidebar: tighter padding */ .atlas-sidebar .narrative-section { padding: 10px 12px; margin: 8px 10px; } /* ── Flow ── stats become 1-col so each card has full readability; the table relies on its existing overflow-x scroll, but we tighten cell padding + font so more columns fit at once. */ .flow-stats { grid-template-columns: 1fr; } .flow-stat-val { font-size: 17px; } .flow-table { font-size: 10px; } .flow-table thead th, .flow-table tbody td { padding: 7px 6px !important; } .flow-table-wrap { max-height: 70vh; /* Hint to mobile browsers to scroll smoothly */ -webkit-overflow-scrolling: touch; } /* Flow header / filter rows wrap so dropdowns don't overflow */ .flow-card-head { flex-wrap: wrap; gap: 6px; } /* ── Flow detail modal ── full-screen on phone (the 32px backdrop padding wastes too much room on small displays) */ .flow-modal-backdrop { padding: 0; } .flow-modal { max-height: 100vh; height: 100vh; max-width: 100vw; width: 100vw; border-radius: 0; } /* ── Alerts header ── allow filter buttons + subtabs to wrap to multiple rows; tighten paddings + sub-tab font so more chips fit in each row. */ .alerts-header { flex-wrap: wrap; gap: 6px; padding: 8px 10px; } .alerts-subtabs { flex-wrap: wrap; gap: 3px; } .alert-subtab { padding: 3px 8px; font-size: 9px; } .alerts-filters { flex-wrap: wrap; } /* ── Alert prefs panel ── if there's a multi-column grid of alert type cards, collapse to single column so the toggle UI doesn't crush. The selector is broad on purpose — covers any inline grid-template-columns: repeat(N, 1fr) within the alerts view. */ #alertsTypePanel, .alerts-types-grid { grid-template-columns: 1fr !important; } } /* ═══════════════════════════════════════════════════════════════════ Phase 4.3 / 4.4 — Trending Nodes UI variants (Pulse panel + inline ladder micro-labels + sparkline column) ═══════════════════════════════════════════════════════════════════ */ /* ── Variant 1: Pulse panel ── Floating right-edge panel listing the top-N strikes by significance. Anchored fixed so it overlays the Heatmap right-detail panel without resizing the layout. */ .trending-pulse-panel { position: fixed; right: 12px; top: 130px; width: 360px; max-height: calc(100vh - 160px); overflow-y: auto; z-index: 900; background: var(--bg2); border: 1px solid var(--border2); border-radius: 6px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 2px 4px rgba(0, 0, 0, 0.25); font-family: var(--mono); font-size: 11px; color: var(--text2); padding: 10px 12px; } .trending-pulse-panel::-webkit-scrollbar { width: 4px; } .trending-pulse-panel::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px; } .trending-header { display: flex; align-items: center; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--border); margin-bottom: 8px; } .trending-title { font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text); flex: 1; } .trending-count { font-size: 9px; color: var(--text3); letter-spacing: 0.04em; } .trending-close { background: transparent; border: 1px solid var(--border); color: var(--text3); font-size: 12px; line-height: 1; width: 18px; height: 18px; border-radius: 3px; cursor: pointer; padding: 0; } .trending-close:hover { color: var(--text); border-color: var(--border2); } .trending-controls { display: flex; flex-direction: column; gap: 5px; margin-bottom: 8px; } .trending-chips, .trending-thresholds { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .trending-thr-label { font-size: 9px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.06em; margin-right: 2px; } .trending-chip { background: var(--bg3); border: 1px solid var(--border); color: var(--text2); font-family: var(--mono); font-size: 9px; padding: 2px 8px; border-radius: 3px; cursor: pointer; text-transform: uppercase; letter-spacing: 0.06em; } .trending-chip:hover { border-color: var(--border2); color: var(--text); } .trending-chip.active { background: rgba(255, 107, 53, 0.15); border-color: var(--king); color: var(--king); } .trending-list { display: flex; flex-direction: column; gap: 2px; } .trending-row { display: grid; grid-template-columns: 22px 60px 50px 80px 22px 30px 1fr; gap: 6px; align-items: center; padding: 5px 6px; border-radius: 3px; cursor: pointer; border-left: 2px solid transparent; background: var(--bg-hover); } .trending-row:hover { background:var(--bg-subtle); } .trending-row.dir-up { border-left-color: var(--green); } .trending-row.dir-down { border-left-color: var(--red); } .trending-row.dir-neutral { border-left-color: var(--text3); } .trending-rank { font-size: 9px; color: var(--text3); font-weight: 700; } .trending-strike { font-size: 11px; color: var(--text); font-weight: 600; letter-spacing: 0.02em; } .trending-sig { font-size: 10px; color: var(--king); font-weight: 700; letter-spacing: 0.04em; } .trending-delta { font-size: 10px; color: var(--text2); text-align: right; letter-spacing: 0.02em; } .trending-row.dir-up .trending-delta { color: var(--green); } .trending-row.dir-down .trending-delta { color: var(--red); } .trending-arrow { font-size: 10px; text-align: center; line-height: 1; } .trending-row.dir-up .trending-arrow { color: var(--green); } .trending-row.dir-down .trending-arrow { color: var(--red); } .trending-row.dir-neutral .trending-arrow { color: var(--text3); } .trending-horizon { font-size: 9px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.06em; } .trending-tags { display: flex; gap: 3px; flex-wrap: wrap; overflow: hidden; } .trending-tag { font-size: 8px; padding: 1px 4px; border-radius: 2px; background:var(--bg-subtle); color: var(--text3); text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; } .trending-tag.tag-king { background: rgba(255, 107, 53, 0.18); color: var(--king); } .trending-tag.tag-signflip { background: rgba(96, 165, 250, 0.18); color: var(--flip); } .trending-tag.tag-cohortleader{ background: rgba(34, 197, 94, 0.16); color: var(--green); } .trending-tag.tag-accelspike { background: rgba(245, 200, 66, 0.16); color: var(--pika); } .trending-tag.tag-bleeding { background: rgba(239, 68, 68, 0.18); color: var(--red); } .trending-tag.tag-persistent { background: rgba(155, 93, 229, 0.16); color: var(--barney); } .trending-tag.tag-selfoutlier { background: rgba(0, 212, 170, 0.16); color: var(--gate); } .trending-empty { font-size: 10px; color: var(--text3); padding: 12px 6px; line-height: 1.4; font-style: italic; } /* Brief flash on click-to-scroll (Pulse panel → ladder row) */ @keyframes trending-flash { 0% { box-shadow: 0 0 0 2px var(--king), 0 0 12px var(--king); } 100% { box-shadow: 0 0 0 0 transparent; } } .node-row.trending-flash { animation: trending-flash 1.4s ease-out; } /* ── Variant 2: Inline ladder micro-labels (B2 + B4) ── */ /* Side-rail: 4px vertical bar at the LEFT edge of qualifying rows. Color = direction; height = magnitude bucket. Anchored relative to the .node-row (already position:relative). */ .trending-rail { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; border-radius: 2px; pointer-events: none; z-index: 6; box-shadow: 0 0 4px currentColor; opacity: 0.85; } /* Pulse-rank chip: small numbered badge at the RIGHT edge for top-5. */ .trending-rankchip { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.65); color: var(--king); font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.04em; padding: 1px 5px; border-radius: 2px; border: 1px solid rgba(255, 107, 53, 0.4); pointer-events: none; z-index: 6; line-height: 1; } /* ── Variant 3: Inline sparkline + ROC pill ── */ .trending-spark { position: absolute; right: 95px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 4px; pointer-events: none; z-index: 6; background: rgba(0, 0, 0, 0.5); padding: 2px 4px; border-radius: 3px; } .trending-spark svg { display: block; } .trending-pill { font-family: var(--mono); font-size: 8px; font-weight: 700; padding: 1px 3px; border-radius: 2px; line-height: 1; letter-spacing: 0.02em; } .trending-pill.pill-up { background: rgba(34, 197, 94, 0.18); color: var(--green); } .trending-pill.pill-down { background: rgba(239, 68, 68, 0.18); color: var(--red); } /* Mobile/narrow viewport — Pulse panel slides in as bottom-sheet */ @media (max-width: 720px) { .trending-pulse-panel { left: 8px; right: 8px; width: auto; top: auto; bottom: 12px; max-height: 60vh; } } /* ═══ KNOWLEDGE BASE ════════════════════════════════════════════════════ Sidebar nav + reading pane. Compass-inspired layout: left rail with sections + article list, right pane with the rendered markdown. All tokens come from the theme system so it inherits Original / White automatically. */ #view-knowledge { padding: 0; } .knowledge-view { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 0; height: calc(100vh - var(--nav-h, 56px)); background: var(--bg); } .knowledge-sidebar { border-right: 1px solid var(--border); background: var(--bg2); overflow-y: auto; padding: 18px 0 24px 0; } .knowledge-sidebar-head { padding: 0 18px 14px 18px; border-bottom: 1px solid var(--border); margin-bottom: 12px; } .knowledge-sidebar-title { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text2); } .knowledge-sidebar-sub { font-size: 11px; color: var(--text3); margin-top: 2px; } .knowledge-nav { padding: 0 8px; } .knowledge-section { margin-bottom: 16px; } .knowledge-section-head { display: flex; align-items: center; gap: 8px; padding: 6px 10px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text2); } .knowledge-section-icon { display: inline-flex; width: 16px; height: 16px; align-items: center; justify-content: center; color: var(--text3); font-size: 11px; } .knowledge-section-summary { padding: 0 10px 6px 34px; font-size: 11px; color: var(--text3); line-height: 1.4; } .knowledge-article-list { list-style: none; margin: 0; padding: 0; } .knowledge-article-list li { margin: 0; } .knowledge-article-list a { display: block; padding: 6px 10px 6px 34px; color: var(--text); text-decoration: none; font-size: 13px; line-height: 1.35; border-left: 2px solid transparent; transition: background 90ms ease, border-color 90ms ease, color 90ms ease; } .knowledge-article-list a:hover { background: var(--bg-hover); color: var(--text); } .knowledge-article-list a.active { background: var(--bg-subtle); border-left-color: var(--accent, #3b82f6); color: var(--text); font-weight: 500; } .knowledge-pane { overflow-y: auto; padding: 28px 36px 60px 36px; background: var(--bg); } .knowledge-empty, .knowledge-empty-state { color: var(--text3); font-size: 13px; padding: 24px; text-align: center; } .knowledge-article { max-width: 760px; margin: 0 auto; color: var(--text); line-height: 1.6; font-size: 14.5px; } .knowledge-article-meta { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text3); margin-bottom: 14px; } .knowledge-article h1 { font-size: 26px; font-weight: 600; margin: 0 0 18px 0; letter-spacing: -0.01em; color: var(--text); } .knowledge-article h2 { font-size: 17px; font-weight: 600; margin: 28px 0 10px 0; color: var(--text); } .knowledge-article h3 { font-size: 14px; font-weight: 600; margin: 22px 0 8px 0; color: var(--text2); } .knowledge-article p { margin: 0 0 14px 0; color: var(--text); } .knowledge-article ul, .knowledge-article ol { margin: 0 0 14px 24px; padding: 0; color: var(--text); } .knowledge-article li { margin: 4px 0; } .knowledge-article code { font-family: var(--mono); font-size: 12.5px; padding: 1px 5px; background: var(--bg-subtle); border-radius: 3px; color: var(--text); } .knowledge-article a { color: var(--accent, #3b82f6); text-decoration: none; border-bottom: 1px dashed color-mix(in srgb, var(--accent, #3b82f6) 50%, transparent); } .knowledge-article a:hover { border-bottom-style: solid; } /* ── KB images + figures (5/02/26) ── `![alt](src)` on its own line renders as

with the alt text as

. Inline images render as plain . Both variants are constrained to the article width and rounded for visual cohesion with the platform UI. */ .knowledge-article img { display: block; max-width: 100%; height: auto; margin: 18px auto; border-radius: 6px; border: 1px solid var(--border); background: var(--bg2); } .knowledge-article .kb-figure { margin: 24px 0; padding: 0; } .knowledge-article .kb-figure img { margin: 0 auto 8px auto; } .knowledge-article .kb-figure figcaption { font-family: var(--mono); font-size: 11px; color: var(--text3); text-align: center; letter-spacing: 0.02em; line-height: 1.4; padding: 0 12px; } .knowledge-article hr { border: 0; border-top: 1px solid var(--border); margin: 22px 0; } .knowledge-article strong { font-weight: 600; } .knowledge-article em { font-style: italic; } @media (max-width: 720px) { .knowledge-view { grid-template-columns: 1fr; height: auto; } .knowledge-sidebar { border-right: 0; border-bottom: 1px solid var(--border); max-height: 40vh; } .knowledge-pane { padding: 18px; } } /* ═══ CHART DRAWING TOOLS ═════════════════════════════════════════════ Vertical toolbar pinned to the chart's left edge + overlay layer for drawings (vlines, rectangles). Toolbar buttons are square mono icons in the same chrome family as the legend chips so they don't compete visually with the chart. */ .chart-drawing-toolbar { position: absolute; top: 50%; left: 8px; transform: translateY(-50%); display: flex; flex-direction: column; gap: 2px; background: var(--bg2); border: 1px solid var(--border2); border-radius: 5px; padding: 3px; z-index: 12; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18); } .cdt-btn { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; color: var(--text2); font-family: var(--mono); font-size: 14px; border-radius: 3px; cursor: pointer; transition: background 90ms ease, color 90ms ease; } .cdt-btn:hover { background: var(--bg-hover); color: var(--text); } .cdt-btn.active { background: color-mix(in srgb, var(--accent, #3b82f6) 25%, transparent); color: var(--accent, #3b82f6); } .cdt-sep { height: 1px; background: var(--border); margin: 3px 2px; } /* When a drawing tool is active, replace the chart cursor with a crosshair so users see they're in drawing mode. */ .atlas-chart-container.drawing-mode { cursor: crosshair; } .atlas-chart-container[data-active-tool="eraser"] { cursor: not-allowed; } /* Drawing overlays — vlines and rectangle edges/fills. The host div has pointer-events:none; only the actual drawings opt in so the chart stays interactive everywhere else. */ .chart-drawings-overlay { /* set inline */ } .chart-drawing { transition: opacity 80ms ease; } .chart-drawing:hover { opacity: 0.8; } .chart-drawing-preview { z-index: 6; } /* ─── Drawing tools v2: color picker, handles, labels ─────────────── */ .cdt-color-btn { padding: 0; } .cdt-color-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: #3b82f6; border: 1px solid var(--border2); } .chart-drawing-color-popup { position: absolute; left: 44px; /* sits to the right of the toolbar */ top: 50%; transform: translateY(-50%); display: grid; grid-template-columns: repeat(4, 22px); gap: 4px; padding: 6px; background: var(--bg2); border: 1px solid var(--border2); border-radius: 5px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22); z-index: 13; } .chart-drawing-color-swatch { width: 22px; height: 22px; border-radius: 4px; border: 1px solid var(--border2); cursor: pointer; padding: 0; transition: transform 80ms ease; } .chart-drawing-color-swatch:hover { transform: scale(1.08); } .chart-drawing-color-swatch.active { outline: 2px solid var(--accent, #3b82f6); outline-offset: 1px; } /* Selection handle dots — appear on the selected drawing in cursor mode. Pure presentation; pointer-events live on the .style.cssText inline so click-through behaviour stays consistent across browsers. */ .chart-drawing-handle { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } /* Drawing labels — small chip rendered as overlay near the drawing's anchor point. Color comes from the drawing inline. */ .chart-drawing-label { letter-spacing: 0.04em; text-transform: none; user-select: none; } /* ── ONBOARDING TOUR ───────────────────────────────────────────── Spotlight overlay + step card. Activated on first sign-in for a user (controlled by tour.js, gated by localStorage). Replayable from the 🧭 link in the header. */ .tour-root { position: fixed; inset: 0; z-index: 10000; pointer-events: none; } .tour-spotlight { position: fixed; inset: 0; background: rgba(8, 11, 15, 0.78); pointer-events: auto; cursor: pointer; transition: clip-path 0.18s ease; } .tour-spotlight.full-dim { clip-path: none; } .tour-card { position: fixed; width: 360px; max-width: calc(100vw - 24px); background: var(--bg2); border: 1px solid var(--border2); border-radius: 10px; padding: 16px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04); pointer-events: auto; outline: none; transition: top 0.2s ease, left 0.2s ease; } .tour-card-progress { display: flex; gap: 4px; margin-bottom: 12px; } .tour-progress-dot { flex: 1; height: 3px; border-radius: 2px; background: var(--bg3); } .tour-progress-dot.active { background: var(--pika); box-shadow: 0 0 6px var(--pika2); } .tour-progress-dot.done { background: var(--text3); } .tour-card-title { font-family: var(--sans); font-size: 16px; font-weight: 700; color: var(--text); margin-bottom: 8px; letter-spacing: 0.01em; } .tour-card-body { font-family: var(--mono); font-size: 11px; color: var(--text2); line-height: 1.6; letter-spacing: 0.02em; margin-bottom: 14px; } .tour-card-footer { display: flex; align-items: center; gap: 12px; font-family: var(--mono); font-size: 9px; color: var(--text3); } .tour-card-step { flex: 1; text-align: center; letter-spacing: 0.08em; } .tour-nav-btns { display: flex; gap: 6px; } .tour-btn { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.06em; padding: 6px 12px; border-radius: 5px; border: 1px solid var(--border2); background: var(--bg3); color: var(--text); cursor: pointer; transition: background 0.1s, border-color 0.1s; } .tour-btn:hover { background: var(--bg4); border-color: var(--text3); } .tour-btn-skip { background: transparent; border-color: transparent; color: var(--text3); font-weight: 500; } .tour-btn-skip:hover { color: var(--text2); background: transparent; border-color: transparent; } .tour-btn-next { background: var(--pika); border-color: var(--pika); color: #080b0f; } .tour-btn-next:hover { background: var(--pika); filter: brightness(1.1); } .tour-btn-prev:disabled { opacity: 0.4; cursor: not-allowed; } /* Tour link in the header */ .tour-link { font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--text3); letter-spacing: 0.06em; cursor: pointer; padding: 4px 8px; border-radius: 4px; transition: color 0.1s, background 0.1s; background: transparent; border: 1px solid transparent; text-decoration: none; } .tour-link:hover { color: var(--pika); background: var(--bg3); border-color: var(--border2); } /* Settings cog button in the navbar (4/29 evening — moved from per-tab legend bar). Same visual weight as .tour-link so the right side of the navbar stays consistent. */ .navbar-settings-btn { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--text3); letter-spacing: 0.06em; cursor: pointer; padding: 4px 8px; border-radius: 4px; transition: color 0.1s, background 0.1s; background: transparent; border: 1px solid transparent; } .navbar-settings-btn:hover { color: var(--text); background: var(--bg3); border-color: var(--border2); } .navbar-settings-btn[aria-expanded="true"] { color: var(--text); background: var(--bg3); border-color: var(--border2); } .navbar-settings-btn svg { flex-shrink: 0; } /* ═══ PAYWALL VIEW ════════════════════════════════════════════════════════ Surfaced when /api/me resolves with every feature denied. Body carries data-paywalled="on" to hide the normal app shell (header / legend / layout / footer chrome) and reveal #paywallView. Sign-out + the toast container stay reachable so account-switch works. No motion / no chart / no live data — this is a sales surface. Single centered card, mono wordmark logo, one-line value prop, disabled CTA placeholder until Whop wiring lands. Theme tokens used so light-mode inherits correctly. */ body[data-paywalled="on"] > header, body[data-paywalled="on"] > .legend, body[data-paywalled="on"] > .app-layout, body[data-paywalled="on"] > div:not(#paywallView):not(#toastContainer):not(.tour-overlay):not(#multiTooltip) { display: none !important; } .paywall-view { display: none; position: fixed; inset: 0; z-index: 9000; background: var(--bg); align-items: center; justify-content: center; padding: 24px; box-sizing: border-box; } body[data-paywalled="on"] .paywall-view { display: flex; } .paywall-card { width: 100%; max-width: 460px; background: var(--bg2); border: 1px solid var(--border); border-radius: 8px; padding: 36px 32px 28px; font-family: var(--font); color: var(--text); text-align: center; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35); } .paywall-logo { font-family: var(--mono); font-size: 22px; font-weight: 700; letter-spacing: 0.04em; color: var(--text); margin-bottom: 10px; } .paywall-tagline { font-size: 12px; color: var(--text2); letter-spacing: 0.02em; margin-bottom: 22px; line-height: 1.5; } .paywall-body { font-size: 13px; color: var(--text2); line-height: 1.55; margin-bottom: 22px; } .paywall-cta { width: 100%; padding: 12px 16px; background: var(--bg3); border: 1px solid var(--border2); border-radius: 6px; color: var(--text2); font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; cursor: not-allowed; margin-bottom: 18px; } /* When the CTA goes live (Whop wiring), the disabled attr is removed and an href / onclick is wired. These hover styles take effect then. */ .paywall-cta:not([disabled]) { cursor: pointer; background: var(--king); color: #0a0d11; border-color: var(--king); } .paywall-cta:not([disabled]):hover { filter: brightness(1.08); } .paywall-foot { font-size: 10.5px; color: var(--text3); line-height: 1.6; letter-spacing: 0.02em; } .paywall-signout { display: inline-block; margin-top: 6px; padding: 4px 10px; background: transparent; border: 1px solid var(--border); border-radius: 4px; color: var(--text2); font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; cursor: pointer; } .paywall-signout:hover { border-color: var(--text2); color: var(--text); } /* ── MOTION LANGUAGE ──────────────────────────────────────────── Two opt-in motion features driven by body[data-motion-*] attrs (set by src/frontend/motion.js). Both default OFF so the platform stays snappy + predictable for users who don't want it. 1. Breathing king — when spot tests the king node (within 0.3% of its strike), the king's row pulses a subtle king-orange glow. Renderer adds .king-breathing on the qualifying king row; CSS animation drives the pulse. Glance from across the room and you can SEE when the king is being tested. 2. Heat-zone flow — registers --heat-color as an animatable color property via @property, then transitions it on the heatmap row. When heatmap.js / multi.js stamp inline style="--heat-color:rgb(...)", the change eases over ~380ms instead of snapping. Gated on data-motion-heat. */ @property --heat-color { syntax: ''; inherits: false; initial-value: rgba(0, 0, 0, 0); } /* Breathing king. Animation only runs when both: a) body[data-motion-king="on"] (user toggled it on) b) the row carries .king-breathing (renderer detected proximity) so the pulse fires precisely at the moment that matters and stays silent the rest of the time. The animation composites on top of any inline background — pure box-shadow, no layout impact. */ @keyframes kingBreathe { 0%, 100% { box-shadow: inset 0 0 0 0 rgba(255, 107, 53, 0), inset 4px 0 0 var(--king); } 50% { box-shadow: inset 0 0 28px 2px rgba(255, 107, 53, 0.45), inset 4px 0 0 var(--king); } } body[data-motion-king="on"] .node-row.king-breathing, body[data-motion-king="on"] .multi-node.king-breathing { position: relative; animation: kingBreathe 2.4s ease-in-out infinite; } /* Heat-zone smooth transition. Renderer toggles between two inline- style shapes based on data-motion-heat at render time: OFF: style="background: linear-gradient(...rgb literal...)" ON: style="--heat-color: rgb(...); --heat-flow-break: Npx" The .heat-flow class on the row activates the var-driven gradient below; @property --heat-color makes it animatable, transition declaration eases changes between renders. */ body[data-motion-heat="on"] .node-row.heat-flow, body[data-motion-heat="on"] .multi-node.heat-flow { background: linear-gradient(90deg, var(--bg2) var(--heat-flow-break, 60px), var(--heat-color) var(--heat-flow-break, 60px)); transition: --heat-color 380ms cubic-bezier(.4, .0, .2, 1); } /* ═══ COLLAPSIBLE SIDEBAR SECTIONS (Heatmap left rail, 4/29/26) ═══════════ Each .sb-section toggles between: data-collapsed="off" → header + body (full content, summary hidden) data-collapsed="on" → header + summary (compact context, body hidden) The chevron rotates 90° on collapse. Header is the click target — toggleSidebarSection() in app.js flips the data attr + persists to localStorage via state.js persistSidebarCollapsed. Renderers (top-bar.js renderRegime / renderKeyLevels, patterns.js renderPatternsForTicker) populate BOTH the body container AND the matching #

Summary container; CSS picks which one shows. */ .sb-section { /* Border now lives on .sb-section-head bottom edge (not the section wrapper) so each header gets a clean rule even when the body is collapsed. No outer border on the wrapper itself. */ } .sb-section-head { display: flex; align-items: center; justify-content: space-between; /* Compact header — 9px text + 4px padding both sides = ~17px row total. Below this (we tried 2px) the chevron read as nearly touching the section border on collapse and the line lost its "divider" feel. 4px gives the chevron breathing room while keeping headers visibly thinner than data rows below them (.key-level rows are ~24px). The rail's job is to surface data, not advertise its own structure — chrome stays thin. Single padding / font / line-height set for ALL sidebar headers (collapsible + static), so the rail has consistent visual rhythm. The [data-static="on"] selector below disables hover / cursor for non-clickable variants. */ padding: 4px 14px; cursor: pointer; user-select: none; background: var(--bg2); transition: background 0.12s; line-height: 1; /* Subtle separator below — replaces the per-section border that used to sit on .sb-section. Gives every header a consistent below-line. */ border-bottom: 1px solid var(--border); } .sb-section-head:hover { background: var(--bg3); } /* Static (non-collapsible) sections — Instruments, Key Levels. Same visual header, but no click affordance. */ .sb-section[data-static="on"] > .sb-section-head { cursor: default; } .sb-section[data-static="on"] > .sb-section-head:hover { background: var(--bg2); } .sb-section-label { /* Matches .detail-title — same font, size, weight, letter-spacing, uppercase. Single canonical inline-section-header style across the platform, even though the surrounding wrapper differs. */ font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text2); line-height: 1; } .sb-section-chevron { font-size: 9px; color: var(--text3); transition: transform 0.18s ease-out; display: inline-block; line-height: 1; } .sb-section[data-collapsed="on"] .sb-section-chevron { transform: rotate(-90deg); } /* Body / summary visibility — driven entirely by data-collapsed. The renderer keeps both in sync; CSS just picks which is on screen. */ .sb-section[data-collapsed="off"] > .sb-section-summary { display: none; } .sb-section[data-collapsed="on"] > .sb-section-body { display: none; } .sb-section-summary { padding: 0 14px 10px; } .sb-section-body { padding: 0 0 4px; /* per-renderer content provides its own padding */ } /* Summary chip styles — used by renderers to lay out the compact view. Reusable across regime / alignment / levels (one-liners) and patterns (multi-row compact list). */ .sb-summary-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--mono); font-size: 10px; line-height: 1.5; padding: 2px 0; } .sb-summary-row + .sb-summary-row { border-top: 1px dashed var(--border); padding-top: 4px; margin-top: 4px; } .sb-summary-label { color: var(--text3); letter-spacing: 0.04em; } .sb-summary-value { color: var(--text); font-weight: 700; } .sb-summary-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 4px; background: var(--bg3); border: 1px solid var(--border); font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; } /* Compact pattern row (collapsed Pattern Detector). User asked specifically for "small rows of the active patterns when collapsed," not just a single top-pattern summary. Layout: name (left, colored by direction) + confidence pill (right). Entire summary block accommodates the full active-pattern list. */ .sb-pattern-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; font-family: var(--mono); font-size: 10px; line-height: 1.4; } .sb-pattern-row + .sb-pattern-row { border-top: 1px dashed var(--border); } .sb-pattern-name { font-weight: 700; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sb-pattern-conf { color: var(--text2); font-size: 9px; flex-shrink: 0; } .sb-pattern-empty { font-family: var(--mono); font-size: 10px; color: var(--text3); font-style: italic; } /* Hover-card for collapsed sidebar sections (4/29/26). When a section is collapsed (summary row visible only), hovering the summary surfaces the full body content as a floating card to the right of the rail. Lets users get the full read without expanding/collapsing — preserves the dense rail aesthetic. Bound in bindSidebarHoverCards() in app.js. */ .sb-section-hover-card { position: fixed; z-index: 9000; background: var(--bg2); border: 1px solid var(--border2); border-radius: 8px; /* Horizontal padding so cloned-in content (which assumes some host padding via .panel-body context) has breathing room. Without this, regime-state and stat-cells run edge-to-edge and long copy gets pushed against the card border. */ padding: 10px 14px; min-width: 240px; max-width: 320px; max-height: 400px; overflow-y: auto; /* Force long content to wrap rather than overflow horizontally. Belt-and-suspenders: works for both whitespace-broken text and unbreakable strings (rare in our content but safe). */ overflow-wrap: anywhere; word-break: break-word; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45); display: none; /* Don't intercept hover ourselves — the card appears next to the summary row, and we want the user to be able to mouse INTO the card to scroll long content. So pointer-events stay enabled. */ pointer-events: auto; } /* Regime-state inside the hover card: the inner label/desc wrapper has no class — give the second flex child constrained sizing so long descriptions wrap inside the card width instead of pushing the icon out. Same fix applies in the regular sidebar — the rule is global so both surfaces get it. */ .regime-state > div:not(.regime-icon) { flex: 1; min-width: 0; } /* Regime description carries explicit \n line breaks from the renderer ("dealers buy dips · sell rips\nVolatility suppressed"). pre-line honors them; otherwise they collapse to whitespace. */ .regime-desc { white-space: pre-line; } .sb-section-hover-card.visible { display: block; } .sb-section-hover-card::-webkit-scrollbar { width: 6px; } .sb-section-hover-card::-webkit-scrollbar-track { background: transparent; } .sb-section-hover-card::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; } /* Summary row — visible when collapsed. Add a subtle hover bg so it's clear the row is interactive (the hover-card pops on hover). */ .sb-section-summary { cursor: default; transition: background 0.12s; } .sb-section[data-collapsed="on"] .sb-section-summary:hover { background: var(--bg3); } /* Key-Level row tooltip (4/29/26). Surfaces the contextual description for a structural level on row hover. Smaller / tighter than the section hover-card since it carries one line of copy at most. Bound in bindKeyLevelTooltips() in app.js. */ .key-level-tooltip { position: fixed; z-index: 9100; background: var(--bg2); border: 1px solid var(--border2); border-radius: 6px; padding: 8px 12px; max-width: 280px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45); display: none; pointer-events: none; font-family: var(--mono); } .key-level-tooltip.visible { display: block; } .key-level-tooltip .klt-label { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text2); margin-bottom: 4px; } .key-level-tooltip .klt-body { font-size: 10px; color: var(--text); line-height: 1.5; letter-spacing: 0.02em; } .key-level-row:hover { background: var(--bg3); } /* ─────────────────────────────────────────────────────────────────────── PHASE 4.3 — Pulse TAB Top-level Pulse view styles. Distinct from the V1 floating `.trending-pulse-panel` (which stays for admin A/B testing). Pulse tab fills the active view region; styling intentionally lean since the next phase folds Pulse content into the Heatmap view. ─────────────────────────────────────────────────────────────────────── */ .pulse-wrap { font-family: var(--mono); color: var(--text2); display: flex; flex-direction: column; gap: 12px; } .pulse-header-row { display: flex; align-items: center; gap: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } .pulse-title { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text); flex: 1; } .pulse-instrument-chips { display: flex; gap: 4px; } .pulse-filters { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; padding: 6px 0; } .pulse-filter-group { display: flex; align-items: center; gap: 4px; } .pulse-filter-label { font-size: 9px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.08em; margin-right: 4px; } .pulse-chip { background: var(--bg3); border: 1px solid var(--border); color: var(--text2); font-family: var(--mono); font-size: 10px; padding: 3px 10px; border-radius: 3px; cursor: pointer; text-transform: uppercase; letter-spacing: 0.06em; line-height: 1; } .pulse-chip:hover { border-color: var(--border2); color: var(--text); } .pulse-chip.active { background: rgba(255, 107, 53, 0.15); border-color: var(--king); color: var(--king); } .pulse-table-wrap { overflow-x: auto; background: var(--bg2); border: 1px solid var(--border); border-radius: 4px; } .pulse-table { width: 100%; border-collapse: collapse; font-size: 11px; } .pulse-th { text-align: left; padding: 8px 10px; background: var(--bg3); color: var(--text3); font-size: 9px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; border-bottom: 1px solid var(--border); white-space: nowrap; position: sticky; top: 0; z-index: 1; } .pulse-row { border-bottom: 1px solid rgba(255,255,255,0.04); cursor: pointer; border-left: 2px solid transparent; transition: background 100ms ease; } .pulse-row:hover { background: rgba(255, 255, 255, 0.04); } .pulse-row.dir-up { border-left-color: var(--green); } .pulse-row.dir-down { border-left-color: var(--red); } .pulse-row.dir-neutral { border-left-color: var(--text3); } .pulse-row td { padding: 6px 10px; vertical-align: middle; white-space: nowrap; } .pulse-rank { font-size: 10px; color: var(--text3); font-weight: 700; width: 28px; } .pulse-sym { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; width: 40px; } .pulse-sym-spx { color: var(--pika); } .pulse-sym-spy { color: var(--gate); } .pulse-sym-qqq { color: var(--flip); } .pulse-strike { font-size: 12px; color: var(--text); font-weight: 600; letter-spacing: 0.02em; } .pulse-sig { font-size: 11px; color: var(--king); font-weight: 700; } .pulse-delta { font-size: 11px; color: var(--text2); text-align: right; letter-spacing: 0.02em; } .pulse-row.dir-up .pulse-delta { color: var(--green); } .pulse-row.dir-down .pulse-delta { color: var(--red); } /* Active timescale column gets a light highlight so the user sees which delta is the current secondary-sort key. */ .pulse-delta-on { background: rgba(255, 107, 53, 0.06); border-left: 1px solid rgba(255, 107, 53, 0.25); border-right: 1px solid rgba(255, 107, 53, 0.25); } .pulse-arrow { font-size: 10px; margin-left: 4px; } .pulse-row.dir-up .pulse-arrow { color: var(--green); } .pulse-row.dir-down .pulse-arrow { color: var(--red); } .pulse-row.dir-neutral .pulse-arrow { color: var(--text3); } .pulse-accel { font-size: 10px; text-align: center; letter-spacing: 0.04em; } .pulse-tags { display: flex; gap: 3px; flex-wrap: wrap; } .pulse-spark { text-align: right; font-size: 12px; color: var(--text3); min-width: 70px; } .pulse-empty-cell { padding: 24px; text-align: center; color: var(--text3); font-style: italic; font-size: 11px; } .pulse-footer { font-size: 10px; color: var(--text3); letter-spacing: 0.04em; padding: 4px 2px; } .pulse-warming { background: var(--bg2); border: 1px solid var(--border); border-radius: 4px; padding: 32px 24px; text-align: center; max-width: 480px; margin: 32px auto; } .pulse-warming-title { font-size: 13px; font-weight: 700; color: var(--king); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 8px; } .pulse-warming-body { font-size: 11px; color: var(--text3); line-height: 1.5; letter-spacing: 0.02em; } /* Narrow viewport — drop the spark column gracefully (it's the lowest- value piece on small screens). */ @media (max-width: 720px) { .pulse-spark, .pulse-table th:last-child { display: none; } .pulse-filters { gap: 8px; } } /* Phase 4.4 grid port: position rail/chip correctly when attached to a CSS Grid strike cell (.heat-grid-strike) instead of a row container. The rail's existing rules already work (left:0, top:50%, absolute) since the strike cell is position:relative. The chip needs a corner-anchored variant so it doesn't overlap the strike number. */ .heat-grid-strike .trending-rankchip { right: 2px; top: 2px; transform: none; font-size: 8px; padding: 0 3px; letter-spacing: 0; } .heat-grid-strike .trending-rail { /* Override box-shadow magnitude — strike column is narrow, halo bleeds into the GEX cell next to it which looks wrong. */ box-shadow: 0 0 2px currentColor; }