/* ============================================================
LARCHER COMPOSITE — Design System
A Bloomberg-meets-Linear dark financial dashboard
============================================================ */
/* ---------- Google Fonts ----------
Loaded via in the of index.html / landing.html.
Do NOT re-add an @import here: an @import is invisible to the HTML preload
scanner, so the cold DNS+TCP+TLS to fonts.googleapis.com could not start until
this 43KB stylesheet had itself downloaded AND parsed — a fully serial chain on
the critical path. As a it opens in parallel with this file. */
/* ---------- Design Tokens ---------- */
:root {
/* Background layers */
--bg-base: #06080f;
--bg-primary: #0b0f1a;
--bg-secondary: #111827;
--bg-card: var(--bg-card);
--bg-card-solid: #0f172a;
--bg-hover: rgba(30, 41, 59, 0.5);
--bg-active: rgba(51, 65, 85, 0.4);
--bg-input: var(--slate-card-80);
/* Borders */
--border: rgba(148, 163, 184, 0.08);
--border-subtle: rgba(148, 163, 184, 0.04);
--border-accent: rgba(59, 130, 246, 0.25);
/* Text */
--text-primary: #f1f5f9;
--text-secondary: #94a3b8;
--text-tertiary: #64748b;
--text-muted: #475569;
/* Accent palette */
--accent: #5b8ad6;
--accent-light: #7ea6e6;
--accent-dim: rgba(91, 138, 214, 0.15);
--cyan: #06b6d4;
--purple: #8b5cf6;
--indigo: #6366f1;
/* Semantic */
--positive: #22c55e;
--positive-dim: rgba(34, 197, 94, 0.12);
--negative: #ef4444;
--negative-dim: rgba(239, 68, 68, 0.12);
--warning: #eab308;
--warning-dim: rgba(234, 179, 8, 0.12);
--neutral: #64748b;
/* Shadows */
--shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
--shadow-md: 0 4px 12px rgba(0,0,0,0.3);
--shadow-lg: 0 8px 32px rgba(0,0,0,0.4);
--shadow-glow: 0 0 40px rgba(59,130,246,0.08);
/* Radii */
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 20px;
--radius-full: 9999px;
/* Transitions */
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--duration: 200ms;
--duration-slow: 400ms;
/* Font */
--font-sans: 'Public Sans', 'Inter', system-ui, -apple-system, sans-serif;
--font-mono: 'IBM Plex Mono', 'JetBrains Mono', 'SF Mono', monospace;
--font-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
/* Helpers used by light-mode overrides for hardcoded slate backgrounds */
--slate-card: var(--bg-card);
--slate-card-40: var(--slate-card-40);
--slate-card-50: var(--slate-card-50);
--slate-card-60: var(--slate-card-60);
--slate-card-80: var(--slate-card-80);
--slate-card-90: var(--slate-card-90);
--nav-bg: rgba(6, 8, 15, 0.85);
}
/* ---------- Light theme overrides ---------- */
:root[data-theme="light"] {
--bg-base: #f6f7fb;
--bg-primary: #ffffff;
--bg-secondary: #f1f3f8;
--bg-card: rgba(255, 255, 255, 0.85);
--bg-card-solid: #ffffff;
--bg-hover: rgba(15, 23, 42, 0.04);
--bg-active: rgba(15, 23, 42, 0.08);
--bg-input: rgba(255, 255, 255, 0.95);
--border: rgba(15, 23, 42, 0.10);
--border-subtle: rgba(15, 23, 42, 0.05);
--border-accent: rgba(59, 130, 246, 0.45);
--text-primary: #0f172a;
--text-secondary: #475569;
--text-tertiary: #64748b;
--text-muted: #94a3b8;
--accent: #2b5fb0;
--accent-light: #3f74c9;
--accent-dim: rgba(37, 99, 235, 0.10);
--positive-dim: rgba(34, 197, 94, 0.12);
--negative-dim: rgba(239, 68, 68, 0.12);
--warning-dim: rgba(234, 179, 8, 0.18);
--shadow-sm: 0 1px 2px rgba(15,23,42,0.06);
--shadow-md: 0 4px 12px rgba(15,23,42,0.08);
--shadow-lg: 0 8px 32px rgba(15,23,42,0.12);
--shadow-glow: 0 0 40px rgba(59,130,246,0.15);
/* Map "slate dark with alpha" tokens used across hardcoded rules to soft surfaces */
--slate-card: rgba(248, 250, 252, 0.85);
--slate-card-40: rgba(241, 245, 249, 0.7);
--slate-card-50: rgba(241, 245, 249, 0.8);
--slate-card-60: rgba(241, 245, 249, 0.85);
--slate-card-80: rgba(248, 250, 252, 0.95);
--slate-card-90: rgba(255, 255, 255, 0.95);
--nav-bg: rgba(255, 255, 255, 0.85);
}
/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
height: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
body {
min-height: 100vh;
background: var(--bg-base);
color: var(--text-primary);
font-family: var(--font-sans);
font-size: 14px;
line-height: 1.6;
overflow-x: hidden;
}
/* Static mesh gradient background.
NOTE: This layer is intentionally NOT animated. It sits behind ~24
backdrop-filter: blur() surfaces; animating it forces every one of those
blur regions to be recomputed on the GPU every frame, continuously, which
pins the GPU/CPU and slows the whole machine while the tab is open. A static
background lets the compositor cache the blur results, so the page goes idle
when nothing is happening. Keep it static. */
body::before {
content: '';
position: fixed;
top: 0; right: 0; bottom: 0; left: 0; /* longhand, not `inset` — Safari <14.5 (older iPadOS) ignores the shorthand */
z-index: -1;
background:
radial-gradient(ellipse 80% 60% at 20% 10%, rgba(59,130,246,0.06) 0%, transparent 60%),
radial-gradient(ellipse 60% 50% at 80% 30%, rgba(139,92,246,0.04) 0%, transparent 50%),
radial-gradient(ellipse 70% 50% at 50% 90%, rgba(6,182,212,0.03) 0%, transparent 50%);
}
/* Respect the OS "reduce motion" setting: kill all looping animations.
Also a perf safety net — looping animations behind blur() surfaces force
continuous GPU recompute. Enable "Reduce motion" in the OS to opt in. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
}
}
/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--text-muted); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }
::selection { background: rgba(59,130,246,0.3); color: #fff; }
a { color: var(--accent-light); text-decoration: none; }
a:hover { color: var(--accent); }
/* ---------- Layout ---------- */
.app {
max-width: 1440px;
margin: 0 auto;
padding: 0 24px;
}
/* ---------- Navigation ---------- */
.nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 0;
border-bottom: 1px solid var(--border);
margin-bottom: 32px;
position: sticky;
top: 0;
z-index: 100;
background: var(--nav-bg);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
margin-left: -24px;
margin-right: -24px;
padding-left: 24px;
padding-right: 24px;
}
.nav-brand {
display: flex;
align-items: center;
gap: 12px;
}
.nav-brand .logo {
width: 28px;
height: auto;
display: flex;
align-items: center;
color: var(--accent-light);
flex-shrink: 0;
}
.nav-brand .logo svg { width: 100%; height: auto; display: block; }
.nav-brand h1 {
font-size: 16px;
font-weight: 600;
letter-spacing: -0.01em;
color: var(--text-primary);
font-family: var(--font-sans);
white-space: nowrap;
}
.nav-brand .badge {
font-size: 10px;
font-weight: 600;
padding: 2px 8px;
border-radius: var(--radius-full);
background: var(--accent-dim);
color: var(--accent-light);
letter-spacing: 0.05em;
text-transform: uppercase;
}
.nav-tabs {
display: flex;
align-items: center;
gap: 4px;
background: var(--bg-input);
padding: 3px;
border-radius: var(--radius-sm);
}
.nav-tab {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 16px;
font-size: 13px;
font-weight: 500;
color: var(--text-tertiary);
background: transparent;
border: none;
border-radius: 6px;
cursor: pointer;
transition: all var(--duration) var(--ease);
font-family: var(--font-sans);
white-space: nowrap;
}
.nav-tab:hover { color: var(--text-secondary); }
.nav-tab.active {
background: var(--bg-active);
color: var(--text-primary);
font-weight: 600;
}
.nav-tab svg { opacity: 0.6; transition: opacity var(--duration) var(--ease); }
.nav-tab.active svg { opacity: 1; }
/* Basic-tier: premium tabs are shown but "locked" — dimmed with a padlock.
Clicking one opens the upgrade prompt (guarded in switchView/setDashMode). */
.nav-tab-locked { opacity: 0.4; }
.nav-tab-locked:hover { opacity: 0.6; color: var(--text-tertiary); }
.nav-tab-locked .nav-lock { opacity: 1; margin-left: 1px; }
.dash-mode-locked { opacity: 0.5; }
.dash-mode-locked:hover { opacity: 0.7; color: var(--text-tertiary); }
.dash-mode-locked .nav-lock { margin-left: 5px; vertical-align: -1px; }
.nav-actions {
display: flex;
align-items: center;
gap: 8px;
}
/* ============================================================
Responsive nav — three tiers, by width (this is how we tell a
phone from an iPad from a desktop: not device sniffing, just the
viewport width the nav actually has to work with).
Desktop (>1200px): brand | tabs | actions on one row, as authored.
Tablet (880–1200px, e.g. iPad landscape): the full-size tabs don't
fit, but the screen is plenty wide for a single row — so CONDENSE
(tighter tabs, icon-only action buttons) and keep it one clean row
rather than the phone's stacked strip. The tab group can scroll on
its own if it's still a hair too wide, so brand + actions stay put.
Phone / small tablet portrait (<880px): there genuinely isn't room
for one row, so wrap the tabs to a full-width, horizontally-
scrollable strip below the brand — every tab one swipe away, no
hamburger, no JS.
============================================================ */
/* --- Tablet: condensed single row (iPad landscape, narrow laptops) ---
Floor is 940px, not 880: below that the seven text tabs + brand + actions
get tight enough that the last tab (admin's Analytics) starts to clip, so
those in-between widths are better served by the wrapped strip below. No
real iPad lands in 880–940 (portraits are ≤834 or 1024; landscapes ≥1024). */
@media (min-width: 940px) and (max-width: 1200px) {
.nav { flex-wrap: nowrap; justify-content: flex-start; gap: 10px; }
.nav-brand { flex: 0 0 auto; }
.nav-brand h1 { font-size: 15px; }
.nav-tabs {
flex: 0 1 auto;
min-width: 0; /* allow the strip to shrink... */
overflow-x: auto; /* ...and scroll if still too wide */
overflow-y: hidden;
scrollbar-width: none;
}
.nav-tabs::-webkit-scrollbar { display: none; }
.nav-tab { flex: 0 0 auto; padding: 7px 11px; font-size: 12.5px; gap: 5px; }
.nav-tab svg { display: none; } /* text-only tabs — compact enough to fit all 7 */
.nav-actions { flex: 0 0 auto; margin-left: auto; } /* pin actions to the right */
.nav-actions .btn-sm { font-size: 0; padding: 7px; } /* "Refresh All" -> icon only */
.nav-actions .btn-sm svg { width: 15px; height: 15px; }
}
/* --- Phone + tablet portrait: wrapped, scrollable tab strip --- */
@media (max-width: 939px) {
.nav {
flex-wrap: wrap;
row-gap: 10px;
padding-top: 12px;
padding-bottom: 0;
}
.nav-brand { flex: 1 1 auto; min-width: 0; }
.nav-brand h1 {
font-size: 15px;
overflow: hidden;
text-overflow: ellipsis;
}
.nav-actions { flex: 0 0 auto; gap: 6px; }
.nav-tabs {
order: 3;
flex-basis: 100%;
width: 100%;
justify-content: flex-start;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none; /* Firefox: hide the strip's scrollbar */
margin-bottom: 8px;
}
.nav-tabs::-webkit-scrollbar { display: none; } /* WebKit: hide it too */
.nav-tab { flex: 0 0 auto; } /* don't shrink; scroll instead */
}
/* Phone: reclaim edge padding for content, keep the nav bleed aligned. */
@media (max-width: 560px) {
.app { padding: 0 16px; }
.nav {
margin-left: -16px;
margin-right: -16px;
padding-left: 16px;
padding-right: 16px;
}
.nav-tab { padding: 7px 13px; } /* a touch tighter so more tabs peek in */
}
/* Research: the ticker input + "Run Deep Research" sit in one flex row. The
input won't shrink past its placeholder (default min-width:auto), so on a
phone the button gets pushed off the right edge. Stack them below 620px. */
@media (max-width: 620px) {
.rs-input-row { flex-direction: column; align-items: stretch; }
.rs-input-row input { min-width: 0; width: 100%; }
.rs-input-row .btn-primary { width: 100%; justify-content: center; }
#research-view { padding: 20px 16px; }
}
/* Consensus "Sector Implications" table: the Rationale cell doesn't wrap, so
the table blows past the viewport and (with no scroll wrapper) its right half
was simply unreachable on a phone. Let the container scroll as a safety net,
and on small screens switch to a fixed layout so the text wraps and the whole
table fits. Used by both the house briefing and the portfolio debate. */
.consensus-sectors { overflow-x: auto; }
@media (max-width: 900px) {
.sector-impl-table { table-layout: fixed; width: 100%; }
.sector-impl-table th, .sector-impl-table td { white-space: normal; }
.sector-impl-table .rec-reason { overflow-wrap: anywhere; } /* only the long text hard-wraps */
.sector-impl-table .rec-badge { white-space: nowrap; } /* keep OVERWEIGHT/UNDERWEIGHT intact */
.sector-impl-table th:first-child, .sector-impl-table td:first-child { width: 20%; }
.sector-impl-table th:nth-child(2), .sector-impl-table td:nth-child(2) { width: 20%; }
}
@media (max-width: 560px) {
.sector-impl-table { font-size: 12px; }
.sector-impl-table tbody td { padding: 8px; }
.sector-impl-table th:first-child, .sector-impl-table td:first-child { width: 30%; }
.sector-impl-table th:nth-child(2), .sector-impl-table td:nth-child(2) { width: 28%; }
}
/* ---------- Views (SPA) ---------- */
.view { display: none; animation: fadeSlideIn var(--duration-slow) var(--ease); }
.view.active { display: block; }
@keyframes fadeSlideIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* ---------- Hero / Header ---------- */
.hero {
text-align: center;
padding: 48px 0 32px;
}
.hero h2 {
font-size: 36px;
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.1;
margin-bottom: 12px;
background: linear-gradient(135deg, #f1f5f9 0%, #94a3b8 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero p {
font-size: 16px;
color: var(--text-secondary);
max-width: 600px;
margin: 0 auto;
}
/* ---------- Input Section ---------- */
.input-section {
max-width: 720px;
margin: 0 auto 40px;
}
.input-card {
background: var(--bg-card);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 20px;
transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.input-card:focus-within {
border-color: var(--border-accent);
box-shadow: var(--shadow-glow);
}
.input-card label {
display: block;
font-size: 12px;
font-weight: 500;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 8px;
}
.input-card textarea {
width: 100%;
min-height: 80px;
padding: 12px;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: var(--radius-md);
color: var(--text-primary);
font-family: var(--font-mono);
font-size: 13px;
resize: vertical;
outline: none;
transition: border-color var(--duration) var(--ease);
}
.input-card textarea::placeholder { color: var(--text-muted); }
.input-card textarea:focus { border-color: var(--accent); }
.input-row {
display: flex;
gap: 8px;
margin-top: 12px;
align-items: center;
flex-wrap: wrap;
}
.input-row input[type="file"] {
font-size: 12px;
color: var(--text-secondary);
}
.input-row input[type="file"]::file-selector-button {
background: var(--bg-hover);
color: var(--text-secondary);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 8px 12px;
font-size: 12px;
cursor: pointer;
transition: all var(--duration) var(--ease);
}
.input-row input[type="file"]::file-selector-button:hover {
background: var(--bg-active);
color: var(--text-primary);
}
.input-row input[type="text"] {
flex: 1;
min-width: 200px;
padding: 10px 12px;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text-primary);
font-size: 13px;
outline: none;
transition: border-color var(--duration) var(--ease);
}
.input-row input[type="text"]::placeholder { color: var(--text-muted); }
.input-row input[type="text"]:focus { border-color: var(--accent); }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
font-size: 13px;
font-weight: 600;
border-radius: var(--radius-sm);
border: none;
cursor: pointer;
transition: all var(--duration) var(--ease);
white-space: nowrap;
}
.btn-primary {
background: linear-gradient(135deg, var(--accent), var(--indigo));
color: #fff;
box-shadow: 0 2px 8px rgba(59,130,246,0.3);
}
.btn-primary:hover {
filter: brightness(1.1);
box-shadow: 0 4px 16px rgba(59,130,246,0.4);
transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
filter: none;
}
.btn-outline {
background: transparent;
color: var(--text-secondary);
border: 1px solid var(--border);
}
.btn-outline:hover {
border-color: var(--text-muted);
color: var(--text-primary);
background: var(--bg-surface);
}
.btn-ghost {
background: transparent;
color: var(--text-secondary);
border: 1px solid var(--border);
}
.btn-ghost:hover {
background: var(--bg-hover);
color: var(--text-primary);
border-color: rgba(148,163,184,0.15);
}
.btn-sm { padding: 6px 12px; font-size: 12px; }
.btn-xs { padding: 4px 8px; font-size: 11px; }
/* Loading spinner in button */
.btn .spinner {
width: 14px;
height: 14px;
border: 2px solid rgba(255,255,255,0.3);
border-top-color: #fff;
border-radius: 50%;
animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* ---------- Status Bar ---------- */
.status-bar {
max-width: 720px;
margin: -24px auto 24px;
padding: 12px 16px;
border-radius: var(--radius-md);
font-size: 13px;
display: none;
align-items: center;
gap: 8px;
animation: fadeSlideIn 0.3s var(--ease);
}
.status-bar.visible { display: flex; }
.status-bar.info {
background: var(--accent-dim);
border: 1px solid var(--border-accent);
color: var(--accent-light);
}
.status-bar.error {
background: var(--negative-dim);
border: 1px solid rgba(239,68,68,0.25);
color: #fca5a5;
}
.status-bar.success {
background: var(--positive-dim);
border: 1px solid rgba(34,197,94,0.25);
color: #86efac;
}
/* ---------- Summary Stats Cards ---------- */
.stats-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 24px;
}
@media (max-width: 900px) {
.stats-grid { grid-template-columns: repeat(2, 1fr); }
}
.stat-card {
background: var(--bg-card);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 20px;
transition: all var(--duration) var(--ease);
position: relative;
overflow: hidden;
}
.stat-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, var(--accent), transparent);
opacity: 0;
transition: opacity var(--duration) var(--ease);
}
.stat-card:hover {
border-color: rgba(148,163,184,0.12);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.stat-card:hover::before { opacity: 1; }
.stat-card .stat-label {
font-size: 11px;
font-weight: 500;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 8px;
}
.stat-card .stat-value {
font-size: 28px;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1;
margin-bottom: 4px;
}
.stat-card .stat-sub {
font-size: 12px;
color: var(--text-tertiary);
}
.stat-card .stat-icon {
position: absolute;
top: 16px;
right: 16px;
width: 36px;
height: 36px;
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
opacity: 0.8;
}
/* ---------- Table Section ---------- */
.table-section {
background: var(--bg-card);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
}
.table-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid var(--border);
gap: 12px;
flex-wrap: wrap;
}
.table-header h3 {
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
}
.table-header .count {
font-size: 12px;
color: var(--text-tertiary);
background: var(--bg-hover);
padding: 2px 8px;
border-radius: var(--radius-full);
}
.table-controls {
display: flex;
align-items: center;
gap: 8px;
}
.search-input {
padding: 7px 12px 7px 32px;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text-primary);
font-size: 13px;
outline: none;
width: 220px;
transition: all var(--duration) var(--ease);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 10px center;
}
.search-input::placeholder { color: var(--text-muted); }
.search-input:focus { border-color: var(--accent); width: 280px; }
/* Grid filters + themes */
.filter-bar {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
padding: 10px 20px; border-bottom: 1px solid var(--border);
}
.filter-bar .theme-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.theme-chip {
background: transparent; color: var(--text-secondary);
border: 1px solid var(--border); border-radius: var(--radius-full);
padding: 4px 12px; font-size: 12px; cursor: pointer; transition: all .15s ease;
}
.theme-chip:hover { color: var(--text-primary); border-color: var(--border-accent); }
.theme-chip.active { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; }
.filter-spacer { flex: 1 1 auto; }
.filter-select {
background: var(--bg-input); color: var(--text-primary);
border: 1px solid var(--border); border-radius: var(--radius-sm);
padding: 6px 8px; font-size: 12px; outline: none; cursor: pointer;
}
.filter-select:focus { border-color: var(--accent); }
.filter-num { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-secondary); }
.filter-num input {
width: 54px; background: var(--bg-input); color: var(--text-primary);
border: 1px solid var(--border); border-radius: var(--radius-sm);
padding: 5px 6px; font-size: 12px; outline: none;
}
.filter-num input:focus { border-color: var(--accent); }
.filter-clear {
background: transparent; color: var(--text-tertiary);
border: 1px solid var(--border); border-radius: var(--radius-sm);
padding: 6px 10px; font-size: 12px; cursor: pointer;
}
.filter-clear:hover { color: var(--text-primary); border-color: var(--border-accent); }
/* About / Business profile (detail page) */
.about-section {
background: var(--bg-card-solid);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 18px 20px;
margin-bottom: 20px;
}
.about-header {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; margin-bottom: 10px;
}
.about-header h3 { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.about-website {
font-size: 12px; color: var(--accent); text-decoration: none; white-space: nowrap;
padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
}
.about-website:hover { border-color: var(--accent); }
.about-summary {
font-size: 13px; line-height: 1.65; color: var(--text-secondary);
margin: 0 0 14px; max-width: 78ch;
}
.about-facts {
display: flex; flex-wrap: wrap; gap: 10px 28px;
padding-top: 12px; border-top: 1px solid var(--border-subtle);
}
.about-fact { display: flex; flex-direction: column; gap: 2px; }
.about-fact-label {
font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted);
}
.about-fact-value { font-size: 13px; font-weight: 500; color: var(--text-primary); }
/* Collapsible "About the Business" card (collapsed by default) */
.about-toggle-title { font-size: 15px; font-weight: 600; color: var(--text-primary); margin: 0; }
.about-collapsible .about-header {
cursor: pointer;
user-select: none;
border-radius: var(--radius-sm);
margin: -4px -4px 10px;
padding: 4px;
transition: background 0.12s var(--ease);
}
.about-collapsible .about-header:hover { background: var(--bg-hover); }
.about-collapsible.collapsed .about-header { margin-bottom: 0; }
.about-header-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.about-chevron { color: var(--text-muted); flex-shrink: 0; transition: transform 0.25s var(--ease); }
.about-collapsible.collapsed .about-chevron { transform: rotate(-90deg); }
.about-body {
overflow: hidden;
max-height: 1000px;
opacity: 1;
transition: max-height 0.3s var(--ease), opacity 0.2s var(--ease);
}
.about-collapsible.collapsed .about-body { max-height: 0; opacity: 0; }
/* Table */
.table-wrap { overflow-x: auto; }
table {
width: 100%;
border-collapse: collapse;
table-layout: auto;
}
thead th {
padding: 12px 16px;
font-size: 11px;
font-weight: 600;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.06em;
text-align: left;
border-bottom: 1px solid var(--border);
background: var(--slate-card-40);
cursor: pointer;
user-select: none;
white-space: nowrap;
transition: color var(--duration) var(--ease);
position: sticky;
top: 0;
}
thead th:hover { color: var(--text-secondary); }
thead th .sort-arrow {
display: inline-block;
margin-left: 4px;
opacity: 0;
transition: opacity var(--duration) var(--ease);
font-size: 10px;
}
thead th.sorted .sort-arrow { opacity: 1; }
thead th.sorted { color: var(--accent-light); }
tbody tr {
border-bottom: 1px solid var(--border-subtle);
cursor: pointer;
transition: background var(--duration) var(--ease);
}
tbody tr:hover { background: var(--bg-hover); }
tbody tr:active { background: var(--bg-active); }
/* Row flashes briefly when an SSE cache-update event arrives for it
(earnings-triggered incremental score refresh). */
@keyframes rowJustUpdatedFlash {
0% { background: rgba(34, 197, 94, 0.28); }
60% { background: rgba(34, 197, 94, 0.10); }
100% { background: transparent; }
}
tbody tr.row-just-updated {
animation: rowJustUpdatedFlash 4s ease-out;
}
tbody tr.row-just-updated td:first-child::before {
content: "●";
color: rgb(34, 197, 94);
margin-right: 4px;
font-size: 10px;
animation: rowJustUpdatedFlash 4s ease-out;
}
tbody td {
padding: 12px 16px;
font-size: 13px;
white-space: nowrap;
}
/* Ticker column */
.ticker-cell {
font-weight: 600;
color: var(--accent-light);
display: flex;
align-items: center;
gap: 8px;
}
.ticker-cell .ticker-dot {
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
}
/* Score cells */
.score-cell {
font-family: var(--font-mono);
font-size: 12px;
font-weight: 500;
}
.score-badge {
display: inline-flex;
align-items: center;
padding: 3px 10px;
border-radius: var(--radius-full);
font-size: 12px;
font-weight: 600;
font-family: var(--font-mono);
}
/* Score color tiers */
.score-excellent { background: rgba(34,197,94,0.12); color: #4ade80; }
.score-good { background: rgba(34,197,94,0.08); color: #86efac; }
.score-fair { background: rgba(234,179,8,0.1); color: #fde047; }
.score-poor { background: rgba(239,68,68,0.1); color: #fca5a5; }
.score-na { color: var(--text-muted); }
/* Composite score with bar */
.composite-cell {
display: flex;
align-items: center;
gap: 10px;
}
.composite-bar {
width: 60px;
height: 4px;
background: var(--bg-active);
border-radius: 2px;
overflow: hidden;
flex-shrink: 0;
}
.composite-bar-fill {
height: 100%;
border-radius: 2px;
transition: width 0.8s var(--ease);
}
/* 1M Tactical cell */
.tactical-cell {
display: flex;
align-items: center;
gap: 8px;
cursor: help;
}
.bucket-chip {
display: inline-block;
min-width: 20px;
padding: 2px 6px;
border-radius: 4px;
background: var(--bg-active);
color: var(--text-muted);
font-size: 11px;
font-weight: 600;
text-align: center;
font-variant-numeric: tabular-nums;
}
/* IV cell */
.iv-cell {
display: flex;
flex-direction: column;
}
.iv-value { font-weight: 600; font-family: var(--font-mono); font-size: 13px; }
.iv-na { color: var(--text-muted); }
/* ---------- Detail View ---------- */
.detail-view { padding-bottom: 60px; }
.back-btn {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--text-secondary);
cursor: pointer;
padding: 8px 0;
transition: color var(--duration) var(--ease);
background: none;
border: none;
font-family: var(--font-sans);
}
.back-btn:hover { color: var(--accent-light); }
.detail-hero {
display: flex;
align-items: flex-start;
gap: 24px;
padding: 24px 0 32px;
flex-wrap: wrap;
}
.detail-hero .ticker-info {
flex: 1;
min-width: 300px;
}
.detail-hero .ticker-symbol {
font-size: 32px;
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1;
margin-bottom: 4px;
}
.detail-hero .ticker-name {
font-size: 15px;
color: var(--text-secondary);
margin-bottom: 12px;
}
.detail-hero .ticker-meta {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.detail-hero .meta-tag {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
color: var(--text-tertiary);
background: var(--bg-hover);
padding: 4px 10px;
border-radius: var(--radius-full);
}
.detail-hero .price-block { text-align: right; }
.detail-hero .current-price {
font-size: 36px;
font-weight: 700;
font-family: var(--font-mono);
letter-spacing: -0.02em;
line-height: 1;
margin-bottom: 4px;
}
.detail-hero .price-change {
font-size: 14px;
font-weight: 600;
font-family: var(--font-mono);
}
.price-change.positive { color: var(--positive); }
.price-change.negative { color: var(--negative); }
/* Chart */
.chart-section {
background: var(--bg-card);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 20px;
margin-bottom: 24px;
}
.chart-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 12px;
}
.chart-toolbar h3 {
font-size: 14px;
font-weight: 600;
}
.period-btns {
display: flex;
gap: 4px;
background: var(--bg-input);
padding: 3px;
border-radius: var(--radius-sm);
}
.period-btn {
padding: 5px 12px;
font-size: 12px;
font-weight: 500;
color: var(--text-tertiary);
background: transparent;
border: none;
border-radius: 6px;
cursor: pointer;
transition: all var(--duration) var(--ease);
font-family: var(--font-sans);
}
.period-btn:hover { color: var(--text-secondary); }
.period-btn.active { background: var(--bg-active); color: var(--text-primary); }
#chart-container {
height: 420px;
border-radius: var(--radius-sm);
overflow: hidden;
}
/* Models Grid */
.models-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin-bottom: 24px;
}
@media (max-width: 1100px) { .models-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .models-grid { grid-template-columns: 1fr; } }
.model-card {
background: var(--bg-card);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 24px;
transition: all var(--duration) var(--ease);
position: relative;
overflow: hidden;
}
.model-card:hover {
border-color: rgba(148,163,184,0.12);
box-shadow: var(--shadow-md);
}
.model-card .card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 16px;
}
.model-card .card-title {
font-size: 12px;
font-weight: 600;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.model-card .card-badge {
font-size: 10px;
font-weight: 600;
padding: 2px 8px;
border-radius: var(--radius-full);
}
/* Score Ring (SVG) */
.score-ring-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.score-ring {
position: relative;
width: 120px;
height: 120px;
}
.score-ring svg {
width: 120px;
height: 120px;
transform: rotate(-90deg);
}
.score-ring .ring-bg {
fill: none;
stroke: var(--bg-active);
stroke-width: 8;
}
.score-ring .ring-fill {
fill: none;
stroke-width: 8;
stroke-linecap: round;
stroke-dasharray: 326.73;
stroke-dashoffset: 326.73;
transition: stroke-dashoffset 1.5s var(--ease);
}
.score-ring .ring-value {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.score-ring .ring-number {
font-size: 28px;
font-weight: 700;
font-family: var(--font-mono);
letter-spacing: -0.02em;
}
.score-ring .ring-label {
font-size: 10px;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* Horizontal bars */
.bar-list { display: flex; flex-direction: column; gap: 10px; }
.bar-item {
display: flex;
align-items: center;
gap: 10px;
}
.bar-label {
font-size: 11px;
font-weight: 500;
color: var(--text-secondary);
width: 50px;
flex-shrink: 0;
text-align: right;
}
.bar-track {
flex: 1;
height: 6px;
background: var(--bg-active);
border-radius: 3px;
overflow: hidden;
}
.bar-fill {
height: 100%;
border-radius: 3px;
transition: width 1s var(--ease);
}
.bar-value {
font-size: 11px;
font-weight: 600;
font-family: var(--font-mono);
color: var(--text-secondary);
width: 36px;
text-align: right;
flex-shrink: 0;
}
/* IV Breakdown */
.iv-display {
text-align: center;
margin-bottom: 16px;
}
.iv-big {
font-size: 36px;
font-weight: 700;
font-family: var(--font-mono);
letter-spacing: -0.02em;
}
.iv-mos {
font-size: 14px;
font-weight: 600;
margin-top: 4px;
}
.iv-models-list {
display: flex;
flex-direction: column;
gap: 8px;
}
.iv-model-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 0;
border-bottom: 1px solid var(--border-subtle);
font-size: 12px;
}
.iv-model-row:last-child { border-bottom: none; }
.iv-model-name { color: var(--text-secondary); }
.iv-model-value {
font-weight: 600;
font-family: var(--font-mono);
}
/* Metrics Grid */
.metrics-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
}
@media (max-width: 900px) { .metrics-grid { grid-template-columns: repeat(2, 1fr); } }
.metric-card {
background: var(--bg-card);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 16px;
}
.metric-label {
font-size: 11px;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 4px;
}
.metric-value {
font-size: 18px;
font-weight: 600;
font-family: var(--font-mono);
letter-spacing: -0.01em;
}
/* ---------- Deep Dive Tabs ---------- */
.deep-dive {
margin-bottom: 24px;
margin-top: 8px;
}
.deep-dive-header {
margin-bottom: 0;
}
.deep-dive-nav {
display: flex;
gap: 10px;
}
.dd-tab {
flex: 1;
display: flex;
align-items: center;
gap: 12px;
padding: 16px 20px;
background: var(--bg-card);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--border);
border-bottom: none;
border-radius: var(--radius-md) var(--radius-md) 0 0;
cursor: pointer;
transition: all 0.25s var(--ease);
font-family: var(--font-sans);
position: relative;
overflow: hidden;
}
.dd-tab::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: transparent;
transition: background 0.25s var(--ease);
}
.dd-tab:hover {
background: var(--slate-card-80);
}
.dd-tab.active {
background: var(--bg-card);
border-color: var(--border);
z-index: 2;
}
.dd-tab.active::before {
background: linear-gradient(90deg, var(--accent), var(--purple));
}
.dd-tab.active::after {
content: '';
position: absolute;
bottom: -1px;
left: 0; right: 0;
height: 1px;
background: var(--bg-card);
}
.dd-tab:not(.active) {
opacity: 0.55;
}
.dd-tab:not(.active):hover {
opacity: 0.8;
}
.dd-tab-icon {
width: 36px;
height: 36px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: rgba(59, 130, 246, 0.06);
border: 1px solid rgba(59, 130, 246, 0.08);
transition: all 0.25s var(--ease);
}
.dd-tab.active .dd-tab-icon {
background: rgba(59, 130, 246, 0.12);
border-color: rgba(59, 130, 246, 0.2);
}
.dd-tab-icon svg {
stroke: var(--text-muted);
transition: stroke 0.25s var(--ease);
}
.dd-tab.active .dd-tab-icon svg {
stroke: var(--accent-light);
}
.dd-tab-text {
display: flex;
flex-direction: column;
text-align: left;
}
.dd-tab-label {
font-size: 14px;
font-weight: 600;
color: var(--text-tertiary);
transition: color 0.25s var(--ease);
line-height: 1.2;
}
.dd-tab.active .dd-tab-label {
color: var(--text-primary);
}
.dd-tab-sub {
font-size: 11px;
color: var(--text-muted);
font-weight: 400;
letter-spacing: 0.02em;
}
/* Tab Panels */
.tab-panel {
display: none;
padding: 28px;
background: var(--bg-card);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--border);
border-top: none;
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
animation: ddFadeIn 0.35s var(--ease);
}
.tab-panel.active { display: block; }
@keyframes ddFadeIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
/* Loading state */
.dd-loading {
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
padding: 56px 20px;
color: var(--text-muted);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.02em;
}
.dd-loading-pulse {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--accent);
animation: ddPulse 1.2s ease-in-out infinite;
}
@keyframes ddPulse {
0%, 100% { opacity: 0.3; transform: scale(0.8); }
50% { opacity: 1; transform: scale(1.2); }
}
/* ---------- Placeholder (News / Trends) ---------- */
.dd-placeholder {
display: flex;
gap: 40px;
align-items: center;
min-height: 240px;
}
.dd-placeholder-visual {
flex-shrink: 0;
width: 200px;
height: 200px;
border-radius: var(--radius-lg);
background: var(--slate-card-50);
border: 1px solid var(--border-subtle);
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
}
/* Animated placeholder lines for News */
.dd-ph-line {
position: absolute;
left: 24px;
right: 24px;
height: 6px;
border-radius: 3px;
background: linear-gradient(90deg, rgba(59,130,246,0.08) 0%, rgba(59,130,246,0.15) 40%, rgba(59,130,246,0.05) 100%);
animation: ddShimmer 3s ease-in-out infinite;
}
.dd-ph-line-1 { top: 48px; animation-delay: 0s; }
.dd-ph-line-2 { top: 72px; right: 48px; animation-delay: 0.4s; }
.dd-ph-line-3 { top: 96px; right: 64px; animation-delay: 0.8s; }
.dd-ph-dot {
position: absolute;
bottom: 36px;
left: 24px;
width: 32px;
height: 32px;
border-radius: 8px;
background: rgba(139, 92, 246, 0.08);
border: 1px solid rgba(139, 92, 246, 0.12);
animation: ddPulse 2.5s ease-in-out infinite;
}
@keyframes ddShimmer {
0%, 100% { opacity: 0.4; }
50% { opacity: 1; }
}
/* Trends wave SVG */
.dd-trends-wave {
width: 160px;
height: 60px;
}
.dd-placeholder-content {
flex: 1;
min-width: 0;
}
.dd-soon-pill {
display: inline-block;
font-size: 10px;
font-weight: 700;
padding: 4px 12px;
border-radius: var(--radius-full);
background: linear-gradient(135deg, rgba(139,92,246,0.15), rgba(59,130,246,0.15));
color: #c4b5fd;
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 14px;
}
.dd-placeholder-content h3 {
font-size: 22px;
font-weight: 700;
color: var(--text-primary);
letter-spacing: -0.02em;
margin-bottom: 8px;
}
.dd-placeholder-content p {
font-size: 14px;
color: var(--text-tertiary);
line-height: 1.6;
margin-bottom: 24px;
max-width: 460px;
}
.dd-placeholder-content p strong {
color: var(--accent-light);
font-family: var(--font-mono);
font-weight: 600;
}
.dd-feature-grid {
display: flex;
flex-direction: column;
gap: 14px;
}
.dd-feature-item {
display: flex;
align-items: flex-start;
gap: 14px;
}
.dd-feature-num {
font-size: 11px;
font-weight: 700;
font-family: var(--font-mono);
color: var(--accent);
opacity: 0.5;
padding-top: 1px;
flex-shrink: 0;
}
.dd-feature-text {
font-size: 13px;
color: var(--text-secondary);
line-height: 1.4;
}
/* ---------- Sector Comparison (inside tab) ---------- */
.sc-layout {
display: grid;
grid-template-columns: 1fr 340px;
gap: 24px;
min-height: 0;
}
/* Left column: rank + comparison bars */
.sc-main { min-width: 0; }
.sc-top {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 24px;
padding-bottom: 20px;
border-bottom: 1px solid var(--border);
flex-wrap: wrap;
}
.sc-rank-circle {
width: 64px;
height: 64px;
border-radius: 50%;
border: 2.5px solid;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: var(--slate-card-60);
}
.sc-rank-num {
font-size: 22px;
font-weight: 800;
font-family: var(--font-mono);
line-height: 1;
}
.sc-rank-unit {
font-size: 8px;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-top: 1px;
}
.sc-rank-text { flex: 1; min-width: 180px; }
.sc-rank-headline {
font-size: 18px;
font-weight: 700;
letter-spacing: -0.01em;
margin-bottom: 2px;
}
.sc-rank-detail {
font-size: 13px;
color: var(--text-secondary);
}
.sc-rank-detail strong { color: var(--text-primary); }
.sc-rank-sub {
font-size: 11px;
color: var(--text-muted);
margin-top: 2px;
}
.sc-tags {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.sc-tag {
font-size: 11px;
font-weight: 600;
padding: 4px 12px;
border-radius: var(--radius-full);
letter-spacing: 0.02em;
}
.sc-tag--sector {
background: rgba(139, 92, 246, 0.1);
color: #c4b5fd;
}
.sc-tag--industry {
background: rgba(6, 182, 212, 0.08);
color: #67e8f9;
}
/* Legend */
.sc-legend {
display: flex;
gap: 20px;
margin-bottom: 16px;
}
.sc-legend-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 11px;
color: var(--text-muted);
font-weight: 500;
}
.sc-legend-swatch {
width: 10px;
height: 4px;
border-radius: 2px;
}
.sc-legend-swatch--sector { background: rgba(139, 92, 246, 0.7); }
.sc-legend-swatch--industry { background: rgba(6, 182, 212, 0.6); }
/* Comparison Rows */
.sc-comp-rows {
display: flex;
flex-direction: column;
gap: 1px;
}
.sc-row {
display: grid;
grid-template-columns: 180px 1fr 80px;
align-items: center;
gap: 16px;
padding: 11px 14px;
border-radius: var(--radius-sm);
transition: background 0.15s var(--ease);
}
.sc-row:hover { background: rgba(148, 163, 184, 0.03); }
.sc-row--primary {
background: rgba(59, 130, 246, 0.04);
border: 1px solid rgba(59, 130, 246, 0.06);
margin-bottom: 4px;
}
.sc-row-info { display: flex; flex-direction: column; gap: 1px; }
.sc-row-name {
font-size: 13px;
font-weight: 500;
color: var(--text-secondary);
}
.sc-row--primary .sc-row-name {
font-weight: 600;
color: var(--text-primary);
}
.sc-row-pctile {
font-size: 10px;
font-weight: 600;
font-family: var(--font-mono);
}
/* Bar track with markers */
.sc-row-bar { position: relative; }
.sc-bar-track {
height: 8px;
background: rgba(51, 65, 85, 0.2);
border-radius: 4px;
position: relative;
overflow: visible;
}
.sc-bar-fill {
height: 100%;
border-radius: 4px;
transition: width 0.8s var(--ease);
position: relative;
z-index: 1;
}
.sc-marker {
position: absolute;
top: -4px;
width: 2px;
height: 16px;
border-radius: 1px;
z-index: 3;
transform: translateX(-1px);
cursor: default;
}
.sc-marker--sector { background: rgba(139, 92, 246, 0.8); }
.sc-marker--industry { background: rgba(6, 182, 212, 0.7); }
.sc-marker-tip {
display: none;
position: absolute;
bottom: calc(100% + 4px);
left: 50%;
transform: translateX(-50%);
font-size: 10px;
color: var(--text-secondary);
background: var(--bg-card-solid);
border: 1px solid var(--border);
padding: 2px 8px;
border-radius: 4px;
white-space: nowrap;
pointer-events: none;
}
.sc-marker:hover .sc-marker-tip { display: block; }
/* Values column */
.sc-row-vals {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 1px;
}
.sc-val-main {
font-size: 14px;
font-weight: 600;
font-family: var(--font-mono);
color: var(--text-primary);
}
.sc-val-delta {
font-size: 11px;
font-weight: 600;
font-family: var(--font-mono);
}
/* Right column: Peer List */
.sc-peers {
background: var(--slate-card-40);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
display: flex;
flex-direction: column;
max-height: 500px;
}
.sc-peers-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 16px;
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.sc-peers-title {
font-size: 12px;
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.sc-peers-count {
font-size: 11px;
font-weight: 600;
font-family: var(--font-mono);
color: var(--text-muted);
background: var(--bg-hover);
padding: 2px 8px;
border-radius: var(--radius-full);
}
.sc-peers-list {
overflow-y: auto;
flex: 1;
scrollbar-width: thin;
scrollbar-color: var(--text-muted) transparent;
}
.sc-peer-row {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
cursor: pointer;
transition: background 0.15s var(--ease);
border-bottom: 1px solid var(--border-subtle);
}
.sc-peer-row:last-child { border-bottom: none; }
.sc-peer-row:hover { background: var(--bg-hover); }
.sc-peer-rank {
font-size: 10px;
font-weight: 600;
font-family: var(--font-mono);
color: var(--text-muted);
width: 20px;
text-align: center;
flex-shrink: 0;
}
.sc-peer-dot {
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
}
.sc-peer-sym {
font-size: 13px;
font-weight: 600;
color: var(--accent-light);
min-width: 50px;
flex-shrink: 0;
}
.sc-peer-name {
font-size: 11px;
color: var(--text-muted);
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sc-peer-score {
font-size: 12px;
font-weight: 600;
font-family: var(--font-mono);
padding: 2px 8px;
border-radius: var(--radius-full);
flex-shrink: 0;
}
/* Enrichment prompt */
.peer-enrich-prompt {
text-align: center;
padding: 48px 20px;
color: var(--text-tertiary);
font-size: 13px;
}
@media (max-width: 1100px) {
.sc-layout { grid-template-columns: 1fr; }
.sc-peers { max-height: 360px; }
}
@media (max-width: 900px) {
.dd-placeholder { flex-direction: column; text-align: center; }
.dd-placeholder-visual { width: 160px; height: 120px; }
.dd-placeholder-content p { max-width: 100%; }
.dd-feature-grid { align-items: center; }
.sc-row { grid-template-columns: 120px 1fr 60px; gap: 10px; }
}
@media (max-width: 700px) {
.deep-dive-nav { flex-direction: column; gap: 6px; }
.dd-tab { border-radius: var(--radius-md); border-bottom: 1px solid var(--border); }
.dd-tab.active::after { display: none; }
.tab-panel { border-radius: var(--radius-md); border-top: 1px solid var(--border); margin-top: 6px; }
.sc-row { grid-template-columns: 100px 1fr 56px; gap: 8px; padding: 8px 10px; }
.sc-row-name { font-size: 11px; }
.sc-top { gap: 12px; }
}
/* ---------- Loading Skeleton ---------- */
.skeleton {
background: linear-gradient(90deg, var(--bg-hover) 25%, var(--bg-active) 50%, var(--bg-hover) 75%);
background-size: 200% 100%;
animation: shimmer 1.5s infinite;
border-radius: var(--radius-sm);
}
@keyframes shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
.skeleton-row { height: 48px; margin-bottom: 2px; }
.skeleton-card { height: 100px; }
.skeleton-chart { height: 420px; border-radius: var(--radius-md); }
/* ---------- Empty State ---------- */
.empty-state {
text-align: center;
padding: 60px 20px;
color: var(--text-tertiary);
}
.empty-state .empty-icon {
font-size: 48px;
margin-bottom: 16px;
opacity: 0.3;
}
.empty-state p {
font-size: 14px;
max-width: 400px;
margin: 0 auto;
}
/* ---------- Tooltip ---------- */
[data-tooltip] {
position: relative;
}
[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 6px);
left: 50%;
transform: translateX(-50%);
padding: 4px 10px;
background: var(--bg-card-solid);
border: 1px solid var(--border);
border-radius: 6px;
font-size: 11px;
color: var(--text-secondary);
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity var(--duration) var(--ease);
z-index: 50;
}
[data-tooltip]:hover::after { opacity: 1; }
/* ---------- Responsive ---------- */
@media (max-width: 600px) {
.app { padding: 0 12px; }
.hero h2 { font-size: 24px; }
.stats-grid { grid-template-columns: 1fr 1fr; }
.detail-hero { flex-direction: column; }
.detail-hero .price-block { text-align: left; }
.models-grid { grid-template-columns: 1fr; }
.metrics-grid { grid-template-columns: 1fr 1fr; }
}
/* ---------- Portfolio View ---------- */
.portfolio-empty-state {
display: flex;
align-items: center;
justify-content: center;
min-height: 60vh;
}
.portfolio-init-card {
text-align: center;
max-width: 520px;
padding: 60px 40px;
background: var(--bg-card);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
position: relative;
overflow: hidden;
}
.portfolio-init-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--accent), var(--purple), var(--cyan));
}
.portfolio-init-icon {
margin-bottom: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 80px;
height: 80px;
border-radius: 50%;
background: rgba(59, 130, 246, 0.06);
border: 1px solid rgba(59, 130, 246, 0.1);
}
.portfolio-init-card h2 {
font-size: 24px;
font-weight: 700;
letter-spacing: -0.02em;
margin-bottom: 12px;
background: linear-gradient(135deg, var(--text-primary), var(--accent-light));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.portfolio-init-card > p {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.6;
margin-bottom: 28px;
}
.portfolio-init-details {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 28px;
text-align: left;
}
.init-detail {
display: flex;
justify-content: space-between;
padding: 10px 16px;
background: var(--slate-card-40);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
font-size: 13px;
color: var(--text-secondary);
}
.init-detail-label {
font-weight: 600;
color: var(--text-tertiary);
text-transform: uppercase;
font-size: 11px;
letter-spacing: 0.04em;
}
/* Portfolio summary cards */
.pf-summary-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: 16px;
margin-bottom: 20px;
}
@media (max-width: 1000px) { .pf-summary-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .pf-summary-grid { grid-template-columns: 1fr; } }
.pf-summary-card {
background: var(--bg-card);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 20px;
position: relative;
overflow: hidden;
transition: all var(--duration) var(--ease);
}
.pf-summary-card:hover {
border-color: rgba(148,163,184,0.12);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.pf-summary-hero {
background: linear-gradient(135deg, var(--slate-card-80), rgba(30,41,59,0.6));
border-color: rgba(59,130,246,0.15);
}
.pf-summary-hero::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, var(--accent), var(--purple));
}
.pf-summary-label {
font-size: 11px;
font-weight: 500;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 8px;
}
.pf-summary-value {
font-size: 28px;
font-weight: 700;
font-family: var(--font-mono);
letter-spacing: -0.02em;
line-height: 1;
margin-bottom: 6px;
}
.pf-summary-pl {
font-size: 14px;
font-weight: 600;
font-family: var(--font-mono);
margin-bottom: 4px;
}
.pf-summary-sub {
font-size: 12px;
color: var(--text-tertiary);
}
.pf-stat-icon {
position: absolute;
top: 16px;
right: 16px;
width: 36px;
height: 36px;
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
font-weight: 800;
font-family: var(--font-mono);
opacity: 0.8;
}
/* Portfolio main grid (charts) */
.pf-main-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
@media (max-width: 900px) { .pf-main-grid { grid-template-columns: 1fr; } }
.pf-chart-card {
background: var(--bg-card);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 24px;
}
.pf-donut-wrap {
position: relative;
height: 300px;
}
.pf-bar-wrap {
position: relative;
height: 300px;
}
/* P&L badge in table */
.pf-pl-badge {
display: inline-flex;
align-items: center;
padding: 3px 10px;
border-radius: var(--radius-full);
font-size: 12px;
font-weight: 600;
font-family: var(--font-mono);
white-space: nowrap;
}
/* Sector tag in table */
.pf-sector-tag {
display: inline-block;
font-size: 10px;
font-weight: 600;
padding: 3px 8px;
border-radius: var(--radius-full);
background: rgba(139, 92, 246, 0.08);
color: #c4b5fd;
letter-spacing: 0.02em;
white-space: nowrap;
max-width: 140px;
overflow: hidden;
text-overflow: ellipsis;
}
/* Portfolio table footer */
#pfTableFoot tr {
background: var(--slate-card-40);
}
#pfTableFoot td {
padding: 12px 16px;
font-size: 13px;
}
/* ============================================================
BRIEFING VIEW — Dorsey Aesthetic
============================================================ */
/* ---------- Briefing Header ---------- */
.brief-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 32px 0 24px;
}
.brief-ts {
font-size: 11px;
color: var(--text-muted);
font-family: var(--font-mono);
letter-spacing: 0.02em;
}
/* ---------- Section Labels ---------- */
/* ===== Portfolio picker (intermediary landing for the Portfolio tab) ===== */
.pf-picker { max-width: 920px; margin: 8px auto 0; }
.pf-picker-head { margin-bottom: 22px; }
.pf-picker-head h2 {
font-family: var(--font-serif); font-weight: 500; font-size: 26px;
letter-spacing: -0.01em; color: var(--text-primary); margin: 0 0 6px;
}
.pf-picker-head p { font-size: 14px; color: var(--text-secondary); margin: 0; }
.pf-picker-grid {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px;
}
@media (max-width: 720px) { .pf-picker-grid { grid-template-columns: 1fr; } }
.pf-picker-card {
position: relative; text-align: left; display: flex; flex-direction: column;
gap: 8px; padding: 22px; min-height: 200px;
background: var(--bg-card-solid); border: 1px solid var(--border);
border-radius: var(--radius-lg); cursor: pointer; font-family: inherit;
transition: transform 0.15s var(--ease), border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.pf-picker-card:hover {
transform: translateY(-3px); border-color: var(--border-accent);
box-shadow: 0 12px 34px rgba(0,0,0,0.22);
}
.pf-picker-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pf-picker-icon {
width: 44px; height: 44px; border-radius: 12px; display: flex;
align-items: center; justify-content: center; margin-bottom: 4px;
background: var(--accent-dim); color: var(--accent-light);
}
.pf-picker-card h3 { font-size: 16px; font-weight: 700; color: var(--text-primary); margin: 0; }
.pf-picker-card > p { font-size: 13px; line-height: 1.5; color: var(--text-secondary); margin: 0; flex: 1; }
.pf-picker-badge {
position: absolute; top: 16px; right: 16px; font-size: 10px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 9px;
border-radius: 999px; background: var(--accent-dim); color: var(--accent-light);
}
.pf-picker-cta {
display: inline-flex; align-items: center; gap: 6px; margin-top: 6px;
font-size: 13px; font-weight: 600; color: var(--accent-light);
}
.pf-picker-cta--muted { color: var(--text-muted); }
.pf-picker-card--soon { cursor: default; opacity: 0.6; }
.pf-picker-card--soon:hover { transform: none; border-color: var(--border); box-shadow: none; }
.pf-picker-card--soon .pf-picker-icon { background: var(--bg-hover); color: var(--text-muted); }
.pf-picker-ribbon {
position: absolute; top: 16px; right: 16px; font-size: 10px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 9px;
border-radius: 999px; background: var(--bg-hover); color: var(--text-muted);
border: 1px solid var(--border);
}
/* Back-header above the model-portfolio content */
.pf-model-back { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.pf-model-back-btn {
display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
font-size: 13px; font-weight: 500; font-family: inherit; cursor: pointer;
color: var(--text-secondary); background: var(--bg-card-solid);
border: 1px solid var(--border); border-radius: var(--radius-md, 10px);
transition: color 0.15s, border-color 0.15s;
}
.pf-model-back-btn:hover { color: var(--text-primary); border-color: var(--border-accent); }
.pf-model-back-title { font-size: 13px; font-weight: 600; color: var(--text-muted); }
/* ===== Basic-tier model-portfolio teaser ("ad") ===== */
.pf-locked { max-width: 640px; margin: 0 auto; }
.pf-locked-card {
position: relative; margin-top: 8px; padding: 30px 28px 26px; text-align: center;
background: var(--bg-card-solid); border: 1px solid var(--border-accent);
border-radius: var(--radius-lg); box-shadow: 0 16px 44px rgba(0,0,0,0.22);
}
.pf-locked-badge {
display: inline-flex; align-items: center; gap: 6px; margin-bottom: 18px;
font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
padding: 4px 12px; border-radius: 999px; background: var(--accent-dim); color: var(--accent-light);
}
.pf-locked-perf { display: flex; flex-direction: column; gap: 2px; margin-bottom: 18px; }
.pf-locked-perf-value {
font-family: var(--font-mono); font-size: 46px; font-weight: 800; line-height: 1;
letter-spacing: -0.03em; color: var(--text-primary); font-variant-numeric: tabular-nums;
}
.pf-locked-perf-value.pos { color: var(--positive); }
.pf-locked-perf-value.neg { color: var(--negative); }
.pf-locked-perf-label { font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
/* Clear (un-blurred) equity curve inside the unlock card: this portfolio vs the
index since inception — the public performance hook for guests. */
.pf-locked-chart { margin: 2px auto 20px; max-width: 560px; }
.pf-locked-chart:empty { display: none; }
.pf-locked-chart svg { width: 100%; height: auto; display: block; }
.pf-locked-title { font-size: 19px; font-weight: 700; color: var(--text-primary); margin: 0 0 6px; }
.pf-locked-sub { font-size: 13.5px; color: var(--text-secondary); line-height: 1.5; margin: 0 auto 16px; max-width: 440px; }
.pf-locked-list { list-style: none; margin: 0 auto 22px; padding: 0; max-width: 380px; text-align: left; display: flex; flex-direction: column; gap: 8px; }
.pf-locked-list li { position: relative; padding-left: 26px; font-size: 13px; color: var(--text-secondary); line-height: 1.4; }
.pf-locked-list li::before {
content: ""; position: absolute; left: 0; top: 2px; width: 16px; height: 16px;
background: var(--accent-dim); border-radius: 50%;
-webkit-mask: url("data:image/svg+xml;utf8,") center / 11px no-repeat;
mask: url("data:image/svg+xml;utf8,") center / 11px no-repeat;
background-color: var(--accent-light);
}
.pf-locked-cta {
display: block; width: 100%; padding: 13px; font-size: 14px; font-weight: 600;
color: #fff; background: var(--accent); border: none; border-radius: var(--radius-md, 10px);
cursor: pointer; transition: opacity 0.15s;
}
.pf-locked-cta:hover { opacity: 0.9; }
.pf-locked-link {
display: block; width: 100%; margin-top: 8px; padding: 6px; font-size: 13px; font-weight: 500;
color: var(--accent-light); background: none; border: none; cursor: pointer;
}
.pf-locked-link:hover { text-decoration: underline; }
/* ===== Strategies section (Portfolio picker) ===== */
.strat-section { margin-top: 46px; }
.strat-head { margin-bottom: 4px; }
.strat-group { display: flex; align-items: center; gap: 10px; margin: 24px 0 12px; }
.strat-group-label {
font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--text-tertiary); white-space: nowrap;
}
.strat-group::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.strat-tier-pill {
font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
padding: 3px 9px; border-radius: 999px; background: var(--accent-dim);
color: var(--accent-light); white-space: nowrap;
}
.strat-tier-pill--premium { background: var(--warning-dim); color: #d9b23a; }
:root[data-theme="light"] .strat-tier-pill--premium { color: #8a6d1d; }
.pf-picker-badge--premium { background: var(--warning-dim); color: #d9b23a; }
:root[data-theme="light"] .pf-picker-badge--premium { color: #8a6d1d; }
.pf-picker-icon--fs { background: var(--warning-dim); color: #d9b23a; }
:root[data-theme="light"] .pf-picker-icon--fs { color: #8a6d1d; }
/* Pro-tier pill/badge (accent blue) + swing book chrome */
.strat-tier-pill--pro { background: var(--accent-dim); color: var(--accent-light); }
.pf-picker-badge--pro { background: var(--accent-dim); color: var(--accent-light); }
.pf-picker-icon--swing { background: var(--accent-dim); color: var(--accent); }
/* Research-tier pill/badge (teal, off the --cyan token). Research is the entry
paid tier, so it loses the neutral hairline like every other paid tier but
sits a hue short of Pro's accent blue — one step up from basic grey, one step
below Pro. Every strategy row is Pro+ today, so these are keyed-but-unused;
they exist so a Research-tier book does not silently render as Pro. */
.strat-tier-pill--research { background: rgba(6, 182, 212, 0.13); color: #5cc2d6; }
.pf-picker-badge--research { background: rgba(6, 182, 212, 0.13); color: #5cc2d6; }
:root[data-theme="light"] .strat-tier-pill--research { color: #0e7490; }
:root[data-theme="light"] .pf-picker-badge--research { color: #0e7490; }
.swing-form {
display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
margin-top: 18px; padding: 14px 0 16px; border-top: 1px solid var(--border);
border-bottom: 1px solid var(--border);
}
.swing-form .sw-field { display: flex; flex-direction: column; gap: 4px; }
.swing-form .sw-field--wide { flex: 1 1 180px; }
.swing-form .sw-field--exit label { color: var(--accent-light, var(--accent)); }
.swing-form .sw-opt {
font-size: 8px; font-weight: 700; letter-spacing: 0.06em;
padding: 1px 5px; border-radius: 999px; margin-left: 4px;
background: var(--accent-dim); color: var(--accent-light, var(--accent));
vertical-align: middle;
}
.swing-form label {
font-size: 10px; font-weight: 600; text-transform: uppercase;
letter-spacing: 0.06em; color: var(--text-muted);
}
.swing-form input, .swing-form select {
background: var(--bg-input, var(--bg)); color: var(--text);
border: 1px solid var(--border); border-radius: 8px;
padding: 7px 10px; font-size: 13px; width: 110px;
}
.swing-form .sw-field--wide input { width: 100%; }
.swing-form input:focus, .swing-form select:focus { outline: none; border-color: var(--accent); }
.swing-table .sw-empty { color: var(--text-muted); font-size: 13px; padding: 14px 8px; }
.swing-table .sw-admin-col { text-align: right; }
.sw-dir {
font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
padding: 2px 8px; border-radius: 999px;
}
.sw-dir--long { background: var(--positive-dim, rgba(34,197,94,0.12)); color: var(--positive); }
.sw-dir--short { background: var(--negative-dim, rgba(239,68,68,0.12)); color: var(--negative); }
.sw-chip-target { color: var(--positive); }
.sw-chip-stop { color: var(--negative); }
.sw-reason {
font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
padding: 2px 8px; border-radius: 999px; background: var(--accent-dim); color: var(--accent-light);
}
.sw-reason--target { background: var(--positive-dim, rgba(34,197,94,0.12)); color: var(--positive); }
.sw-reason--stop { background: var(--negative-dim, rgba(239,68,68,0.12)); color: var(--negative); }
/* Implied-move bands anchor toggle (Options tab) */
.im-anchor-toggle { display: inline-flex; align-items: center; gap: 4px; }
.im-anchor-label {
font-size: 10px; font-weight: 500; text-transform: none; letter-spacing: 0.02em;
color: var(--text-muted); margin-right: 2px;
}
.im-anchor-btn {
font-size: 10px; font-weight: 600; letter-spacing: 0.03em; text-transform: none;
padding: 3px 9px; border-radius: 999px; cursor: pointer;
background: transparent; color: var(--text-muted);
border: 1px solid var(--border);
}
.im-anchor-btn:hover { border-color: var(--accent); color: var(--text); }
.im-anchor-btn.active {
background: var(--accent-dim); color: var(--accent-light, var(--accent));
border-color: var(--accent);
}
.fs-card-stats { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-tertiary); letter-spacing: 0.01em; }
#fsBookView .pf-locked, #pfModelLocked .pf-locked { margin-top: 8px; }
#fsBookView .fs-card, #pfModelLocked .fs-card { margin-top: 20px; }
/* Teaser mode (non-Premium): the upgrade ad sits on top and the tearsheet
behind it is blurred, inert, and its footer band hidden. */
.fs-card--teaser { pointer-events: none; user-select: none; -webkit-user-select: none; }
.fs-card--teaser .fs-tearsheet { filter: blur(7px) saturate(0.85); opacity: 0.75; }
.fs-card--teaser .fs-unlock { display: none; }
/* Model-portfolio ad: the live book with blurred names */
.mp-book { margin: 4px 0 16px; }
.mp-holdings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 760px) { .mp-holdings { grid-template-columns: 1fr; } }
.mp-pos {
padding: 12px 14px; background: rgba(148, 163, 184, 0.05);
border: 1px solid var(--ts-border); border-radius: 10px;
}
.mp-pos-top { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.mp-pos-rank { font-family: var(--font-mono); font-size: 10.5px; color: var(--ts-ink3); width: 18px; flex: none; }
.mp-pos-ticker {
font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: var(--ts-ink);
filter: blur(6px); user-select: none; -webkit-user-select: none; pointer-events: none;
}
.mp-pos-type {
font-size: 9px; font-weight: 600; letter-spacing: 0.06em; padding: 2px 6px;
border-radius: 6px; background: rgba(148, 163, 184, 0.08); color: var(--ts-ink3);
}
.mp-pos-weight { margin-left: auto; font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--ts-ink); }
.mp-pos-bar { height: 3px; border-radius: 2px; background: rgba(148, 163, 184, 0.12); margin-bottom: 9px; overflow: hidden; }
.mp-pos-bar i { display: block; height: 100%; background: var(--ts-green); border-radius: 2px; }
.mp-pos-thesis { font-size: 12px; line-height: 1.55; color: var(--ts-ink2); margin: 0 0 6px; }
.mp-pos-risk { font-size: 11.5px; line-height: 1.5; color: var(--ts-ink3); margin: 0; }
.mp-pos-risk > span {
color: var(--ts-red-t); font-weight: 600; text-transform: uppercase;
font-size: 9.5px; letter-spacing: 0.06em; margin-right: 6px;
}
/* ===== Book changes (consumer view of rebalances) ===== */
.bc-list { display: flex; flex-direction: column; gap: 10px; }
.bc-card { background: var(--bg-card-solid); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; }
.bc-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bc-date { font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); }
.bc-title { font-size: 13.5px; font-weight: 700; color: var(--text-primary); }
.bc-meta { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--text-tertiary); }
.bc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.bc-chip {
font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; padding: 3px 9px;
border-radius: 999px; background: var(--bg-hover); color: var(--text-secondary); border: 1px solid var(--border);
}
.bc-chip--buy { background: var(--positive-dim); color: var(--positive); border-color: transparent; }
.bc-chip--sell { background: var(--negative-dim); color: var(--negative); border-color: transparent; }
:root[data-theme="light"] .bc-chip--buy { color: #15803d; }
:root[data-theme="light"] .bc-chip--sell { color: #b91c1c; }
.bc-none { font-size: 12px; color: var(--text-muted); }
/* Benchmark toggle on the tracked equity-curve card */
.tracked-bench-toggle {
display: inline-flex; align-items: center; gap: 6px; margin-left: auto;
font-size: 12px; color: var(--text-secondary); cursor: pointer; user-select: none;
}
.tracked-bench-toggle input { accent-color: var(--accent); cursor: pointer; }
/* --- Futures tearsheet (the Premium ad). The sheet stays dark in both
themes — it reads as a captured trading screen. --- */
.fs-card {
border: 1px solid var(--border-accent); border-radius: var(--radius-lg);
overflow: hidden; background: var(--bg-card-solid);
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.25);
}
.fs-tearsheet {
--ts-ink: #f1f5f9; --ts-ink2: #94a3b8; --ts-ink3: #667690;
--ts-grid: #182233; --ts-border: rgba(148, 163, 184, 0.12);
--ts-green: #22c55e; --ts-green-t: #4ade80;
--ts-red: #ef4444; --ts-red-t: #f87171; --ts-gold-t: #facc15;
background: linear-gradient(180deg, #0c1220 0%, #0a0f1c 30%, #070b15 100%);
padding: 26px 26px 20px;
}
.fs-ts-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 18px; flex-wrap: wrap; }
.fs-ts-title { font-family: var(--font-mono); font-size: 19px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--ts-ink); }
.fs-ts-sub { font-size: 12.5px; color: var(--ts-ink2); margin-top: 4px; line-height: 1.5; max-width: 520px; }
.fs-ts-oos {
display: inline-flex; align-items: center; gap: 7px;
font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase;
color: var(--ts-green-t); padding: 5px 11px; border: 1px solid rgba(74, 222, 128, 0.25);
border-radius: 999px; background: rgba(34, 197, 94, 0.07); white-space: nowrap;
}
.fs-oos-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ts-green); box-shadow: 0 0 8px rgba(34, 197, 94, 0.9); }
.fs-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 20px; }
@media (max-width: 760px) { .fs-tiles { grid-template-columns: repeat(2, 1fr); } }
.fs-tile { background: rgba(148, 163, 184, 0.05); border: 1px solid var(--ts-border); border-radius: 10px; padding: 11px 13px; }
.fs-tile-l { font-size: 9.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ts-ink3); margin-bottom: 5px; }
.fs-tile-v { font-family: var(--font-mono); font-size: 19px; font-weight: 700; letter-spacing: -0.01em; color: var(--ts-ink); line-height: 1; }
.fs-tile-v--pos { color: var(--ts-green-t); }
.fs-tile-v--neg { color: var(--ts-red-t); }
.fs-tile-v--gold { color: var(--ts-gold-t); }
.fs-tile-s { font-family: var(--font-mono); font-size: 10px; color: var(--ts-ink3); margin-top: 4px; }
.fs-chart { margin-bottom: 16px; position: relative; /* tooltip anchor — survives the <=640px scroll wrap */ }
.fs-chart-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; flex-wrap: wrap; }
.fs-chart-label { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ts-ink2); }
.fs-chart-note { font-family: var(--font-mono); font-size: 10.5px; color: var(--ts-ink3); }
.fs-legend { display: flex; gap: 16px; flex-wrap: wrap; }
.fs-key { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ts-ink2); }
.fs-key-line { width: 16px; height: 0; border-top: 2px solid var(--ts-green); border-radius: 1px; }
.fs-key-line--bench { border-top-style: dashed; border-top-color: var(--ts-ink2); }
.fs-svgwrap { position: relative; }
.fs-svgwrap svg { display: block; width: 100%; height: auto; }
.fs-svgwrap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.fs-grid { stroke: var(--ts-grid); stroke-width: 1; }
.fs-baseline { stroke: #243044; stroke-width: 1; }
.fs-tick { fill: var(--ts-ink3); font-family: var(--font-mono); font-size: 10px; font-variant-numeric: tabular-nums; }
.fs-book { fill: none; stroke: var(--ts-green); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(34, 197, 94, 0.35)); }
.fs-area { fill: url(#fsAreaGrad); stroke: none; }
.fs-bench { fill: none; stroke: var(--ts-ink2); stroke-width: 1.6; stroke-dasharray: 5 4; opacity: 0.75; }
.fs-edot { stroke: #0a0f1c; stroke-width: 2; }
.fs-edot--book { fill: var(--ts-green); }
.fs-edot--bench { fill: var(--ts-ink2); }
.fs-endlab { fill: var(--ts-ink); font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; }
.fs-endlab--dim { fill: var(--ts-ink2); font-weight: 500; font-size: 11px; }
.fs-ddot { fill: var(--ts-red); }
.fs-note { fill: var(--ts-ink3); font-family: var(--font-mono); font-size: 10.5px; paint-order: stroke; stroke: #0a0f1c; stroke-width: 3px; stroke-linejoin: round; }
.fs-xhair { stroke: rgba(148, 163, 184, 0.35); stroke-width: 1; }
.fs-hdot { stroke: #0a0f1c; stroke-width: 2; }
.fs-hdot--book { fill: var(--ts-green); }
.fs-hdot--bench { fill: var(--ts-ink2); }
.fs-ddarea { fill: rgba(239, 68, 68, 0.14); }
.fs-ddline { fill: none; stroke: var(--ts-red); stroke-width: 1.5; stroke-linejoin: round; }
.fs-bar--pos { fill: var(--ts-green); }
.fs-bar--neg { fill: var(--ts-red); }
.fs-barlab { fill: var(--ts-ink2); font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; }
.fs-tip {
position: absolute; pointer-events: none; z-index: 5;
background: #111a2c; border: 1px solid rgba(148, 163, 184, 0.2); border-radius: 8px;
padding: 7px 10px; font-family: var(--font-mono); font-size: 11px; line-height: 1.5;
color: #f1f5f9; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
transform: translate(-50%, -100%); white-space: nowrap;
}
.fs-tip .pos { color: #4ade80; }
.fs-tip .neg { color: #f87171; }
.fs-tip .dim { color: #94a3b8; }
.fs-ts-foot { font-size: 10.5px; line-height: 1.6; color: var(--ts-ink3); border-top: 1px solid var(--ts-border); padding-top: 12px; margin-top: 4px; }
.fs-unlock {
display: flex; align-items: center; justify-content: space-between; gap: 18px;
padding: 16px 26px; background: var(--bg-card-solid);
border-top: 1px solid var(--border); flex-wrap: wrap;
}
.fs-unlock-copy { display: flex; flex-direction: column; gap: 3px; min-width: 220px; flex: 1; }
.fs-unlock-title { font-size: 14.5px; font-weight: 700; color: var(--text-primary); display: flex; align-items: center; gap: 8px; }
.fs-unlock-title svg { color: var(--accent-light); flex: none; }
.fs-unlock-sub { font-size: 12.5px; color: var(--text-secondary); line-height: 1.5; }
.fs-unlock-cta {
padding: 12px 22px; font-size: 14px; font-weight: 600; font-family: inherit;
color: #fff; background: var(--accent); border: none; border-radius: var(--radius-md, 10px);
cursor: pointer; transition: opacity 0.15s; white-space: nowrap;
}
.fs-unlock-cta:hover { opacity: 0.9; }
.fs-unlock-cta:disabled { cursor: default; }
.fs-unlock-cta--owned { background: var(--positive-dim); color: var(--positive); }
:root[data-theme="light"] .fs-unlock-cta--owned { color: #15803d; }
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
@media (max-width: 640px) {
.fs-tearsheet { padding: 18px 14px 14px; }
.fs-ts-head { flex-direction: column; }
.fs-unlock { padding: 14px 16px; }
.fs-unlock-cta { width: 100%; }
/* Keep chart text legible: the charts scroll sideways instead of shrinking. */
.fs-svgwrap { overflow-x: auto; }
.fs-svgwrap svg { min-width: 640px; }
}
/* ===== Plans / pricing page ===== */
/* Widened from 1040 for the fourth plan (Free / Research / Pro / Premium):
1240 is about as far as this can go before the pricing table out-runs every
other view — .app is 1440 with 24px gutters, so 1392 is the hard ceiling. */
.plans-wrap { max-width: 1240px; margin: 0 auto; }
.plans-head { text-align: center; margin-bottom: 30px; }
.plans-head h2 {
font-family: var(--font-serif); font-weight: 500; font-size: 30px;
letter-spacing: -0.01em; color: var(--text-primary); margin: 0 0 8px;
}
.plans-head p { font-size: 14.5px; color: var(--text-secondary); margin: 0; }
/* Monthly / yearly billing toggle */
.plans-toggle {
display: inline-flex; margin: 0 auto 26px; padding: 4px; gap: 4px;
border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
}
.plans-wrap .plans-toggle { display: flex; width: fit-content; }
.plans-toggle-btn {
display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
font-size: 13px; font-weight: 600; padding: 7px 18px; border-radius: 999px;
border: 0; background: transparent; color: var(--text-secondary);
transition: background .15s, color .15s;
}
.plans-toggle-btn:hover { color: var(--text); }
.plans-toggle-btn.active { background: var(--accent); color: #fff; }
.plans-save {
font-size: 10px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
padding: 2px 7px; border-radius: 999px;
background: var(--positive-dim, rgba(34,197,94,0.15)); color: var(--positive);
}
.plans-toggle-btn.active .plans-save { background: rgba(255,255,255,0.22); color: #fff; }
.plan-annual-note { font-size: 11.5px; color: var(--text-muted); margin: -2px 0 4px; }
/* 4-up: ~296px a card at full width. Gap trimmed 20 -> 18 to buy that back. */
.plans-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
/* 4 -> 2, never 3: an odd column count strands the fourth card alone on a
second row. 720px keeps the 2x2 cards near the width they have at 4-up
instead of letting two cards stretch across the whole shell. */
@media (max-width: 1100px) { .plans-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; margin: 0 auto; } }
@media (max-width: 860px) { .plans-grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }
.plan-card {
position: relative; display: flex; flex-direction: column;
padding: 26px 24px; background: var(--bg-card-solid);
border: 1px solid var(--border); border-radius: var(--radius-lg);
}
/* Against three siblings a single accent hairline stopped reading as "this one",
so the border is doubled with a 1px ring. A ring rather than a scale/padding
bump: the four cards keep one shared baseline and .plan-flag stays pinned to
an edge that has not moved. */
.plan-card--featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 14px 40px rgba(0,0,0,0.20); }
.plan-card--current { border-color: var(--border-accent); }
.plan-flag {
position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
padding: 4px 12px; border-radius: 999px; background: var(--accent); color: #fff; white-space: nowrap;
}
.plan-yours {
position: absolute; top: 14px; right: 14px; font-size: 10px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 9px; border-radius: 999px;
background: var(--accent-dim); color: var(--accent-light);
}
.plan-name { font-size: 15px; font-weight: 700; color: var(--text-primary); margin-bottom: 8px; }
.plan-price { display: flex; align-items: baseline; gap: 3px; margin-bottom: 4px; }
.plan-amount { font-family: var(--font-mono); font-size: 34px; font-weight: 800; letter-spacing: -0.03em; color: var(--text-primary); }
.plan-period { font-size: 14px; color: var(--text-muted); }
.plan-sub { font-size: 12.5px; color: var(--text-secondary); line-height: 1.4; margin-bottom: 18px; min-height: 34px; }
.plan-features { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.plan-features li { position: relative; padding-left: 24px; font-size: 13px; color: var(--text-secondary); line-height: 1.4; }
.plan-features li strong { color: var(--text-primary); font-weight: 600; }
.plan-features li::before {
content: ""; position: absolute; left: 0; top: 1px; width: 15px; height: 15px;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
background-color: var(--accent-light);
}
.plan-soon {
display: inline-block; margin-left: 4px; font-size: 10px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.04em; padding: 1px 6px; border-radius: 6px;
background: var(--bg-hover); color: var(--text-muted); border: 1px solid var(--border);
}
.plan-cta {
padding: 12px; font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer;
color: var(--text-secondary); background: var(--bg-hover);
border: 1px solid var(--border); border-radius: var(--radius-md, 10px);
transition: opacity 0.15s, background 0.15s;
}
.plan-cta--primary { color: #fff; background: var(--accent); border-color: var(--accent); }
.plan-cta--primary:hover { opacity: 0.9; }
.plan-cta:disabled { cursor: default; opacity: 0.6; }
.plans-msg {
margin: 18px auto 0; max-width: 520px; text-align: center; font-size: 13px;
color: var(--text-secondary); background: var(--accent-dim);
border: 1px solid var(--border-accent); border-radius: var(--radius-md, 10px); padding: 10px 14px;
}
.plans-foot { margin-top: 20px; text-align: center; font-size: 12px; color: var(--text-muted); }
.brief-section {
margin-bottom: 48px;
}
.brief-section--hero {
margin-bottom: 56px;
}
.brief-section-label {
display: block;
font-size: 10px;
font-weight: 500;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 16px;
}
.briefing-loading {
padding: 48px;
text-align: center;
color: var(--text-muted);
font-size: 12px;
}
.briefing-empty {
padding: 32px;
text-align: center;
color: var(--text-muted);
font-size: 12px;
}
/* ---------- Market Tape ---------- */
.tape {
display: flex;
flex-wrap: wrap;
gap: 0;
margin-bottom: 48px;
border-bottom: 1px solid var(--border);
padding-bottom: 32px;
}
.tape-tile {
flex: 1 1 auto;
min-width: 120px;
padding: 12px 20px;
display: flex;
flex-direction: column;
gap: 2px;
}
.tape-name {
font-size: 10px;
font-weight: 500;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.tape-price {
font-size: 22px;
font-weight: 700;
font-family: var(--font-mono);
color: var(--text-primary);
letter-spacing: -0.02em;
line-height: 1.2;
}
.tape-chg {
font-size: 12px;
font-family: var(--font-mono);
font-weight: 600;
}
.tape-chg.positive { color: var(--positive); }
.tape-chg.negative { color: var(--negative); }
.tape-chg.neutral { color: var(--text-muted); }
@media (max-width: 700px) {
.tape-tile { min-width: 100px; padding: 10px 14px; }
.tape-price { font-size: 18px; }
}
/* ---------- NQ Intraday Correlations ---------- */
.brief-section-sub {
font-size: 9px;
font-weight: 400;
letter-spacing: 0.02em;
text-transform: none;
color: var(--text-muted);
margin-left: 10px;
font-family: var(--font-mono);
}
.nq-corr {
display: flex;
flex-direction: column;
}
.nqc-row {
display: grid;
grid-template-columns: 1.5fr 1.1fr 1.1fr 0.9fr;
align-items: center;
gap: 12px;
padding: 11px 4px;
border-bottom: 1px solid var(--border);
}
.nqc-row:last-child { border-bottom: none; }
.nqc-head {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-muted);
}
.nqc-peer {
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
}
.nqc-head .nqc-peer,
.nqc-head .nqc-col {
font-size: 10px;
font-weight: 500;
color: var(--text-muted);
}
.nqc-col {
font-family: var(--font-mono);
font-size: 13px;
display: flex;
align-items: baseline;
gap: 8px;
}
.nqc-rho { font-weight: 700; }
.nqc-rho.positive { color: var(--positive); }
.nqc-rho.negative { color: var(--negative); }
.nqc-rho.neutral { color: var(--text-secondary); }
.nqc-tag {
font-family: inherit;
font-size: 9px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.nqc-tag.positive { color: var(--positive); }
.nqc-tag.negative { color: var(--negative); }
.nqc-tag.neutral { color: var(--text-muted); }
.nqc-na { color: var(--text-muted); }
.nqc-last { text-transform: capitalize; }
.nqc-last.positive { color: var(--positive); }
.nqc-last.negative { color: var(--negative); }
.nqc-arrow { font-family: var(--font-mono); }
@media (max-width: 700px) {
.nqc-row { grid-template-columns: 1.3fr 1fr 1fr 0.8fr; gap: 6px; }
.nqc-tag { display: none; }
.nqc-col { font-size: 12px; }
.nqc-peer { font-size: 12px; }
}
/* ---------- Sector Heatmap (Hero) ---------- */
.heatmap {
min-height: 200px;
}
.heatmap-grid {
display: flex;
flex-wrap: wrap;
gap: 2px;
}
.hm-sector {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-width: 180px;
}
.hm-sector-label {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 6px 10px;
font-size: 10px;
font-weight: 500;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.hm-sector-pct {
font-family: var(--font-mono);
font-weight: 700;
font-size: 11px;
}
.hm-sector-pct.positive { color: var(--positive); }
.hm-sector-pct.negative { color: var(--negative); }
.hm-sector-pct.neutral { color: var(--text-muted); }
.hm-cells {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
gap: 2px;
flex: 1;
}
.hm-cell {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 14px 8px;
min-height: 64px;
border-radius: 4px;
cursor: default;
transition: opacity 150ms ease;
}
.hm-cell:hover {
opacity: 0.75;
}
.hm-sym {
font-size: 13px;
font-weight: 700;
color: #fff;
text-shadow: 0 1px 3px rgba(0,0,0,0.6);
line-height: 1;
margin-bottom: 3px;
}
.hm-pct {
font-size: 11px;
font-family: var(--font-mono);
font-weight: 600;
color: rgba(255,255,255,0.85);
text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
/* ---------- Bottom Two-Column ---------- */
.brief-bottom {
display: grid;
grid-template-columns: 3fr 2fr;
gap: 48px;
margin-bottom: 48px;
}
@media (max-width: 800px) {
.brief-bottom { grid-template-columns: 1fr; gap: 32px; }
}
/* ---------- News ---------- */
.brief-news {
max-height: 520px;
overflow-y: auto;
}
.brief-news-item {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 16px;
padding: 10px 0;
border-bottom: 1px solid var(--border-subtle);
text-decoration: none;
transition: color 150ms ease;
}
.brief-news-item:hover .brief-news-title {
color: var(--text-primary);
}
.brief-news-title {
font-size: 13px;
color: var(--text-secondary);
line-height: 1.5;
flex: 1;
}
.brief-news-time {
font-size: 11px;
color: var(--text-muted);
font-family: var(--font-mono);
white-space: nowrap;
flex-shrink: 0;
}
/* ---------- Calendar ---------- */
.brief-cal {
max-height: 520px;
overflow-y: auto;
}
.brief-cal-date-header {
font-size: 11px;
font-weight: 600;
color: var(--text-tertiary);
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 12px 0 6px;
border-bottom: 1px solid var(--border);
margin-top: 4px;
}
.brief-cal-date-header:first-child { margin-top: 0; }
.brief-cal-item {
display: flex;
align-items: flex-start;
gap: 10px;
padding: 8px 0;
border-bottom: 1px solid var(--border-subtle);
}
.brief-cal-time {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-muted);
white-space: nowrap;
min-width: 48px;
padding-top: 1px;
}
.brief-cal-detail {
flex: 1;
min-width: 0;
}
.brief-cal-event {
font-size: 13px;
color: var(--text-primary);
font-weight: 500;
display: block;
}
.brief-cal-values {
display: flex;
gap: 4px;
align-items: center;
margin-top: 3px;
flex-wrap: wrap;
}
.cal-val {
font-size: 10px;
font-family: var(--font-mono);
font-weight: 500;
padding: 1px 5px;
border-radius: 3px;
}
.cal-actual { background: var(--positive-dim); color: var(--positive); }
.cal-forecast { background: var(--accent-dim); color: var(--accent-light); }
.cal-previous { background: var(--bg-hover); color: var(--text-secondary); }
.cal-sep {
font-size: 9px;
color: var(--text-muted);
opacity: 0.4;
}
.brief-cal-country {
font-size: 10px;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
flex-shrink: 0;
padding-top: 2px;
}
/* Impact dots */
.impact-dot {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
flex-shrink: 0;
}
.impact-dot.impact-high { background: var(--negative); }
.impact-dot.impact-medium { background: var(--warning); }
.impact-dot.impact-low { background: var(--text-muted); }
/* ============================================================
PREDICTION MARKETS (Polymarket)
============================================================ */
.polymarket-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 10px;
}
.pm-card {
background: var(--bg-secondary);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 12px 14px;
display: flex;
flex-direction: column;
gap: 8px;
}
.pm-card-header {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 8px;
}
.pm-question {
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
text-decoration: none;
line-height: 1.35;
}
.pm-question:hover { color: var(--accent-light); }
.pm-outcomes {
display: flex;
flex-direction: column;
gap: 4px;
}
.pm-outcome {
display: flex;
align-items: center;
gap: 6px;
}
.pm-bar-track {
width: 60px;
min-width: 60px;
height: 6px;
background: var(--bg-hover);
border-radius: 3px;
overflow: hidden;
flex-shrink: 0;
}
.pm-bar-fill {
height: 100%;
border-radius: 3px;
transition: width 0.4s ease;
}
.pm-outcome-pct {
font-size: 11px;
font-weight: 700;
font-family: var(--font-mono);
color: var(--text-primary);
width: 32px;
text-align: right;
flex-shrink: 0;
}
.pm-outcome-label {
font-size: 11px;
color: var(--text-secondary);
line-height: 1.3;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pm-volume {
font-size: 10px;
color: var(--text-muted);
font-family: var(--font-mono);
flex-shrink: 0;
white-space: nowrap;
}
/* ============================================================
AI COMMENTARY — Briefing.com Style
============================================================ */
/* ---------- AI Snapshot Bar ---------- */
.ai-snapshot {
background: var(--bg-card-solid);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 20px 24px;
margin-bottom: 32px;
}
.ai-snapshot-summary {
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
line-height: 1.5;
margin-bottom: 6px;
}
.ai-snapshot-breadth {
font-size: 13px;
color: var(--text-secondary);
line-height: 1.5;
}
/* ---------- Industry Watch ---------- */
.iw-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
@media (max-width: 700px) { .iw-grid { grid-template-columns: 1fr; } }
.iw-col-header {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
padding-bottom: 10px;
margin-bottom: 8px;
border-bottom: 1px solid var(--border-subtle);
}
.iw-col-strong { color: var(--positive); }
.iw-col-weak { color: var(--negative); }
.iw-item {
display: grid;
grid-template-columns: 1fr auto 2fr;
gap: 12px;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid var(--border-subtle);
}
.iw-item:last-child { border-bottom: none; }
.iw-strong { border-left: 3px solid var(--positive); padding-left: 12px; }
.iw-weak { border-left: 3px solid var(--negative); padding-left: 12px; }
.iw-sector {
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
}
.iw-pct {
font-size: 12px;
font-weight: 600;
font-family: var(--font-mono);
}
.iw-pct.positive { color: var(--positive); }
.iw-pct.negative { color: var(--negative); }
.iw-reason {
font-size: 12px;
color: var(--text-secondary);
line-height: 1.4;
}
/* ---------- Moving the Market ---------- */
.ai-mover-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 10px 0;
border-bottom: 1px solid var(--border-subtle);
}
.ai-mover-item:last-child { border-bottom: none; }
.ai-mover-bullet {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--accent);
flex-shrink: 0;
margin-top: 6px;
}
.ai-mover-text {
font-size: 14px;
color: var(--text-primary);
line-height: 1.5;
}
/* ---------- Market Commentary Prose ---------- */
.ai-commentary-prose {
max-width: 800px;
}
.ai-prose-para {
font-size: 15px;
line-height: 1.75;
color: var(--text-secondary);
margin-bottom: 16px;
}
.ai-prose-para:last-child { margin-bottom: 0; }
/* ---------- Skeleton for AI loading ---------- */
.ai-skeleton-bar {
border-radius: var(--radius-md);
}
/* ============================================================
AI DEBATE — Multi-Model Analysis
============================================================ */
/* ---------- Debate Header ---------- */
.debate-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 0;
margin-bottom: 16px;
border-bottom: 1px solid var(--border);
flex-wrap: wrap;
gap: 12px;
}
.debate-title {
font-size: 18px;
font-weight: 700;
color: var(--text-primary);
letter-spacing: -0.01em;
}
.debate-subtitle {
font-size: 12px;
color: var(--text-muted);
display: block;
margin-top: 2px;
}
/* "Updated …" stamp next to Market Commentary + AI Debate headers */
.brief-updated {
font-size: 11px;
color: var(--text-muted);
font-style: italic;
white-space: nowrap;
}
.brief-updated:empty { display: none; }
.debate-header-right {
display: flex;
align-items: center;
gap: 12px;
}
.debate-cost-note {
font-size: 11px;
color: var(--text-muted);
font-family: var(--font-mono);
}
/* ---------- Model Selector ---------- */
.model-selector-panel {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 16px;
margin-bottom: 16px;
}
.model-selector-header {
display: flex;
align-items: baseline;
gap: 12px;
margin-bottom: 12px;
}
.model-selector-title {
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
}
.model-selector-hint {
font-size: 11px;
color: var(--text-muted);
}
.model-selector-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: 8px;
}
.model-chip {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
background: var(--bg-surface);
border: 1.5px solid var(--border);
border-radius: var(--radius-sm);
cursor: pointer;
transition: border-color 0.15s, background 0.15s;
user-select: none;
}
.model-chip:hover {
border-color: var(--text-muted);
}
.model-chip.selected {
border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 8%, var(--bg-surface));
}
.model-chip-dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
.model-chip-name {
font-size: 12px;
font-weight: 500;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.model-chip-check {
margin-left: auto;
width: 14px;
height: 14px;
color: var(--accent);
opacity: 0;
transition: opacity 0.15s;
}
.model-chip.selected .model-chip-check {
opacity: 1;
}
/* ---------- Debate Rounds ---------- */
.debate-round {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
margin-bottom: 8px;
overflow: hidden;
}
.debate-round-header {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 20px;
cursor: pointer;
transition: background var(--duration) var(--ease);
}
.debate-round-header:hover {
background: var(--bg-hover);
}
.debate-round-label {
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
flex: 1;
}
.debate-round-status {
font-size: 11px;
font-weight: 600;
font-family: var(--font-mono);
padding: 2px 8px;
border-radius: var(--radius-full);
background: var(--bg-hover);
color: var(--text-muted);
}
.debate-status-active {
background: var(--accent-dim);
color: var(--accent-light);
}
.debate-status-done {
background: var(--positive-dim);
color: var(--positive);
}
.debate-round-chevron {
transition: transform var(--duration) var(--ease);
color: var(--text-muted);
}
.debate-round-expanded .debate-round-chevron {
transform: rotate(180deg);
}
.debate-round-body {
display: none;
padding: 0 20px 20px;
}
.debate-round-expanded .debate-round-body {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: stretch;
gap: 12px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* ---------- Model Cards ---------- */
.debate-model-card {
flex: 1 1 0;
min-width: 240px;
box-sizing: border-box;
background: var(--slate-card-50);
border: 1px solid var(--border);
border-top: 3px solid var(--text-muted);
border-radius: var(--radius-md);
padding: 16px;
animation: fadeSlideIn 0.3s var(--ease);
}
.debate-card-header {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.debate-model-badge {
font-size: 11px;
font-weight: 600;
padding: 3px 10px;
border-radius: var(--radius-full);
}
.debate-stance {
font-size: 11px;
font-weight: 700;
padding: 3px 10px;
border-radius: var(--radius-full);
letter-spacing: 0.05em;
}
.stance-bull { background: var(--positive-dim); color: var(--positive); }
.stance-bear { background: var(--negative-dim); color: var(--negative); }
.stance-neutral { background: var(--bg-hover); color: var(--text-secondary); }
.debate-conviction {
font-size: 11px;
color: var(--text-muted);
font-family: var(--font-mono);
margin-left: auto;
}
.debate-thesis {
font-size: 13px;
color: var(--text-secondary);
line-height: 1.6;
margin-bottom: 10px;
}
.debate-sp-target {
font-size: 12px;
color: var(--text-tertiary);
font-family: var(--font-mono);
margin-bottom: 8px;
}
.debate-sp-target strong {
color: var(--accent-light);
}
.debate-sectors {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 8px;
}
.debate-sector-tag {
font-size: 10px;
font-weight: 600;
padding: 3px 8px;
border-radius: var(--radius-full);
letter-spacing: 0.02em;
}
.debate-sector-overweight { background: var(--positive-dim); color: var(--positive); }
.debate-sector-underweight { background: var(--negative-dim); color: var(--negative); }
.debate-sector-neutral { background: var(--bg-hover); color: var(--text-secondary); }
.debate-risks {
font-size: 12px;
color: var(--text-tertiary);
}
.debate-risks ul { margin: 4px 0 0 16px; }
.debate-risks li { margin-bottom: 2px; }
/* Round 2 specific */
.debate-factchecks {
margin-bottom: 12px;
font-size: 12px;
}
.debate-factchecks > strong {
display: block;
margin-bottom: 6px;
color: var(--text-secondary);
}
.debate-factcheck {
padding: 8px 0;
border-bottom: 1px solid var(--border-subtle);
font-size: 12px;
}
.debate-factcheck:last-child { border-bottom: none; }
.debate-critiques {
margin-bottom: 12px;
}
.debate-critique {
padding: 8px 0;
border-bottom: 1px solid var(--border-subtle);
font-size: 12px;
}
.debate-critique:last-child { border-bottom: none; }
.debate-critique-target {
font-weight: 600;
color: var(--accent-light);
}
.debate-critique-point {
color: var(--text-muted);
font-style: italic;
}
.debate-critique-counter {
display: block;
margin-top: 4px;
color: var(--text-secondary);
line-height: 1.5;
}
.debate-concessions {
font-size: 12px;
color: var(--text-tertiary);
margin-top: 8px;
}
.debate-concessions ul { margin: 4px 0 0 16px; }
.debate-concession { color: var(--positive); }
/* Round 3 specific */
.debate-probabilities {
display: flex;
gap: 8px;
margin-bottom: 12px;
}
.debate-prob {
flex: 1;
text-align: center;
padding: 10px 8px;
border-radius: var(--radius-sm);
}
.debate-prob-bull { background: rgba(34,197,94,0.08); }
.debate-prob-base { background: rgba(59,130,246,0.08); }
.debate-prob-bear { background: rgba(239,68,68,0.08); }
.debate-prob-val {
display: block;
font-size: 20px;
font-weight: 700;
font-family: var(--font-mono);
letter-spacing: -0.02em;
}
.debate-prob-bull .debate-prob-val { color: var(--positive); }
.debate-prob-base .debate-prob-val { color: var(--accent-light); }
.debate-prob-bear .debate-prob-val { color: var(--negative); }
.debate-prob-label {
font-size: 10px;
font-weight: 600;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.debate-risk-highlight {
font-size: 12px;
color: var(--warning);
padding: 8px 12px;
background: var(--warning-dim);
border-radius: var(--radius-sm);
margin-top: 8px;
}
.debate-top-pick {
font-size: 12px;
color: var(--text-tertiary);
margin-top: 6px;
}
.debate-top-pick strong { color: var(--accent-light); }
/* ---------- Consensus Panel ---------- */
.consensus-panel {
background: var(--bg-card-solid);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 28px;
margin-top: 16px;
position: relative;
overflow: hidden;
scroll-margin-top: 80px;
}
.consensus-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.consensus-header h3 {
font-size: 18px;
font-weight: 700;
color: var(--text-primary);
}
.consensus-badge {
font-size: 10px;
font-weight: 600;
padding: 4px 12px;
border-radius: var(--radius-full);
background: var(--accent-dim);
color: var(--accent-light);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.consensus-most-likely {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.6;
margin-bottom: 20px;
padding: 12px 16px;
background: rgba(59,130,246,0.06);
border-radius: var(--radius-sm);
border-left: 3px solid var(--accent);
}
.consensus-most-likely strong {
color: var(--text-primary);
}
.consensus-fallback,
.consensus-summary-fallback {
font-size: 13px;
color: var(--text-secondary);
line-height: 1.6;
margin-bottom: 16px;
padding: 12px 16px;
background: var(--slate-card-50);
border-radius: var(--radius-sm);
border: 1px solid var(--border-subtle);
}
.consensus-raw-fallback {
margin-top: 12px;
padding: 12px;
font-size: 11px;
font-family: var(--font-mono);
color: var(--text-muted);
background: var(--bg-hover);
border-radius: var(--radius-sm);
overflow-x: auto;
white-space: pre-wrap;
word-break: break-word;
max-height: 240px;
}
/* Scenarios grid */
.scenarios-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
margin-bottom: 24px;
}
@media (max-width: 800px) { .scenarios-grid { grid-template-columns: 1fr; } }
.scenario-card {
background: var(--slate-card-60);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 20px;
text-align: center;
}
.scenario-bull { border-top: 3px solid var(--positive); }
.scenario-base { border-top: 3px solid var(--accent); }
.scenario-bear { border-top: 3px solid var(--negative); }
.scenario-prob {
font-size: 32px;
font-weight: 800;
font-family: var(--font-mono);
letter-spacing: -0.03em;
line-height: 1;
margin-bottom: 4px;
}
.scenario-bull .scenario-prob { color: var(--positive); }
.scenario-base .scenario-prob { color: var(--accent-light); }
.scenario-bear .scenario-prob { color: var(--negative); }
.scenario-name {
font-size: 14px;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 4px;
}
.scenario-target {
font-size: 12px;
font-weight: 600;
font-family: var(--font-mono);
color: var(--text-secondary);
margin-bottom: 10px;
}
.scenario-desc {
font-size: 12px;
color: var(--text-tertiary);
line-height: 1.5;
margin-bottom: 10px;
}
.scenario-drivers {
display: flex;
flex-wrap: wrap;
gap: 4px;
justify-content: center;
}
.scenario-driver {
font-size: 10px;
font-weight: 500;
padding: 3px 8px;
border-radius: var(--radius-full);
background: var(--bg-hover);
color: var(--text-secondary);
}
/* Sector implications table */
.consensus-sectors {
margin-bottom: 20px;
}
.consensus-sectors h4 {
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 10px;
}
.sector-impl-table {
width: 100%;
border-collapse: collapse;
}
.sector-impl-table thead th {
background: transparent;
position: static;
font-size: 10px;
padding: 8px 12px;
}
.sector-impl-table tbody td {
padding: 8px 12px;
font-size: 13px;
border-bottom: 1px solid var(--border-subtle);
}
.rec-badge {
font-size: 10px;
font-weight: 600;
padding: 3px 8px;
border-radius: var(--radius-full);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.rec-over { background: var(--positive-dim); color: var(--positive); }
.rec-under { background: var(--negative-dim); color: var(--negative); }
.rec-neutral { background: var(--bg-hover); color: var(--text-secondary); }
.rec-reason {
color: var(--text-tertiary);
font-size: 12px;
}
/* Risks & horizon */
.consensus-risks {
margin-bottom: 16px;
}
.consensus-risks h4 {
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 8px;
}
.consensus-risks ul {
margin: 0 0 0 16px;
color: var(--text-secondary);
font-size: 13px;
}
.consensus-risks li { margin-bottom: 4px; }
.consensus-horizon {
font-size: 12px;
color: var(--text-muted);
text-align: right;
}
.consensus-horizon strong { color: var(--text-secondary); }
.consensus-shift,
.consensus-risk-update {
font-size: 13px;
color: var(--text-secondary);
padding: 8px 12px;
margin-top: 8px;
background: var(--accent-dim);
border-left: 3px solid var(--accent);
border-radius: 0 var(--radius) var(--radius) 0;
}
.consensus-shift strong,
.consensus-risk-update strong {
color: var(--accent);
}
/* ---------- Compare View ---------- */
.cmp-header { margin-bottom: 24px; }
.cmp-header h2 {
font-size: 20px; font-weight: 700; color: var(--text-primary); margin-bottom: 12px;
}
.cmp-input-row { display: flex; gap: 10px; max-width: 600px; }
.cmp-input-row .input { flex: 1; }
.cmp-table-wrap { overflow-x: auto; }
.cmp-table {
width: 100%; border-collapse: collapse; font-size: 13px;
}
.cmp-table thead { position: sticky; top: 0; z-index: 2; }
.cmp-table th {
background: var(--bg-secondary); padding: 16px 14px 12px; text-align: center;
border-bottom: 2px solid var(--border);
}
.cmp-label-col { width: 160px; min-width: 140px; text-align: left !important; }
.cmp-data-col { min-width: 150px; }
.cmp-th-symbol { font-size: 18px; font-weight: 700; color: var(--text-primary); font-family: var(--font-mono); }
.cmp-th-name { font-size: 11px; color: var(--text-muted); margin: 2px 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.cmp-pos { color: var(--positive); font-size: 12px; font-weight: 600; }
.cmp-neg { color: var(--negative); font-size: 12px; font-weight: 600; }
.cmp-table td {
padding: 8px 14px; border-bottom: 1px solid var(--border-subtle); text-align: center;
color: var(--text-secondary);
}
.cmp-label {
text-align: left !important; color: var(--text-muted); font-weight: 500; white-space: nowrap;
}
.cmp-val.cmp-best { color: var(--positive); font-weight: 600; }
.cmp-divider td {
padding: 12px 14px 6px; border-bottom: 1px solid var(--border);
text-align: left !important; font-size: 11px; font-weight: 600; text-transform: uppercase;
letter-spacing: 0.05em; color: var(--accent-light);
}
.cmp-table tbody tr:hover { background: rgba(59, 130, 246, 0.04); }
.cmp-chart-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 12px;
}
.cmp-chart-header h3 {
font-size: 15px; font-weight: 600; color: var(--text-primary); margin: 0;
}
.cmp-period-btns { display: flex; gap: 4px; }
.cmp-period-btn {
background: var(--bg-tertiary); color: var(--text-muted); border: 1px solid var(--border-subtle);
border-radius: var(--radius); padding: 4px 12px; font-size: 11px; font-weight: 600;
cursor: pointer; transition: all 0.15s;
}
.cmp-period-btn:hover { color: var(--text-secondary); border-color: var(--border); }
.cmp-period-btn.active {
background: var(--accent); color: #fff; border-color: var(--accent);
}
.cmp-chart-wrap {
background: var(--bg-secondary); border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg); padding: 16px; margin-bottom: 24px; height: 380px;
}
@media (max-width: 800px) {
.cmp-input-row { flex-direction: column; }
.cmp-label-col { width: 120px; min-width: 100px; }
.cmp-data-col { min-width: 120px; }
.cmp-chart-wrap { height: 280px; }
.cmp-chart-header { flex-direction: column; gap: 8px; }
}
/* ---------- Trading Model Guidance ---------- */
.tm-section { margin: 20px 0 24px; }
.tm-section h4 {
font-size: 13px; font-weight: 600; color: var(--text-primary);
text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 12px;
}
.tm-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px;
}
.tm-card {
background: var(--slate-card-60); border-radius: var(--radius);
padding: 14px 16px; border-left: 3px solid var(--border-subtle);
}
.tm-card.tm-run { border-left-color: var(--positive); }
.tm-card.tm-caution { border-left-color: var(--warning); }
.tm-card.tm-avoid { border-left-color: var(--negative); }
.tm-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.tm-instrument {
font-size: 15px; font-weight: 700; color: var(--text-primary);
font-family: var(--font-mono);
}
.tm-instrument-name { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }
.tm-dir {
font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
}
.tm-dir.tm-long { color: var(--positive); }
.tm-dir.tm-short { color: var(--negative); }
.tm-rec-badge {
margin-left: auto; font-size: 10px; font-weight: 600;
padding: 3px 10px; border-radius: var(--radius-full);
text-transform: uppercase; letter-spacing: 0.04em;
}
.tm-rec-badge.tm-run { background: var(--positive-dim); color: var(--positive); }
.tm-rec-badge.tm-caution { background: var(--warning-dim); color: var(--warning); }
.tm-rec-badge.tm-avoid { background: var(--negative-dim); color: var(--negative); }
.tm-reasoning { font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
@media (max-width: 800px) { .tm-grid { grid-template-columns: 1fr; } }
/* ---------- Options View ---------- */
.options-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 32px;
}
.options-header h2 {
font-size: 20px;
font-weight: 700;
color: var(--text-primary);
}
.options-input-row {
display: flex;
gap: 8px;
align-items: center;
}
.options-input-row .input {
width: 120px;
text-transform: uppercase;
font-family: var(--font-mono);
}
.options-summary-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-bottom: 32px;
}
.options-stat {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 20px;
}
.options-stat-label {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
margin-bottom: 6px;
}
.options-stat-value {
font-size: 24px;
font-weight: 700;
font-family: var(--font-mono);
color: var(--text-primary);
}
.options-stat-sub {
font-size: 11px;
color: var(--text-secondary);
margin-top: 4px;
}
.options-charts-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-bottom: 32px;
}
.options-chart-wrap {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 20px;
position: relative;
}
.options-chart-wrap canvas {
width: 100% !important;
height: 280px !important;
}
.options-chart-wide canvas {
height: 350px !important;
}
.options-section {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 20px;
margin-bottom: 32px;
}
.options-section-label {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--accent);
margin-bottom: 16px;
}
/* Lightweight Charts wrapper — kept separate from .options-chart-wrap so the
global `.options-chart-wrap canvas` sizing rule never touches LWC canvases. */
.options-lwc-wrap {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 12px;
position: relative;
}
.options-band-summary {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-top: 16px;
font-size: 12px;
color: var(--text-secondary);
}
.options-band-summary .label {
color: var(--text-muted);
margin-right: 6px;
}
.options-band-summary .val {
font-family: var(--font-mono);
color: var(--text-primary);
}
.gex-levels {
display: flex;
gap: 24px;
margin-top: 16px;
flex-wrap: wrap;
}
.gex-level-item {
display: flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-secondary);
}
.gex-level-dot {
width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
}
.options-bottom-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
margin-bottom: 32px;
}
.options-greeks-table {
overflow-x: auto;
}
.options-greeks-table table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
font-family: var(--font-mono);
}
.options-greeks-table th {
text-align: left;
padding: 8px 10px;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-muted);
border-bottom: 1px solid var(--border);
}
.options-greeks-table td {
padding: 6px 10px;
color: var(--text-secondary);
border-bottom: 1px solid rgba(148, 163, 184, 0.04);
}
.options-greeks-table tr:hover td {
background: rgba(59, 130, 246, 0.04);
}
.options-greeks-table .call-row { color: var(--positive); }
.options-greeks-table .put-row { color: var(--negative); }
.options-second-order {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.options-insight-card {
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 16px;
}
.options-insight-title {
font-size: 13px;
font-weight: 700;
color: var(--accent);
margin-bottom: 8px;
}
.options-insight-value {
font-family: var(--font-mono);
font-size: 18px;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 8px;
}
.options-insight-text {
font-size: 12px;
color: var(--text-secondary);
line-height: 1.6;
}
.options-loading {
text-align: center;
padding: 80px 20px;
}
.options-error {
text-align: center;
padding: 40px;
color: var(--negative);
font-size: 13px;
}
/* Expiry selector bar */
.options-expiry-bar {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 12px 16px;
margin-bottom: 24px;
}
.options-expiry-filters {
display: flex;
gap: 4px;
margin-bottom: 10px;
}
.options-expiry-filter {
background: transparent;
border: 1px solid var(--border);
border-radius: var(--radius-full);
color: var(--text-secondary);
font-size: 11px;
font-weight: 600;
padding: 4px 12px;
cursor: pointer;
transition: all 0.15s;
}
.options-expiry-filter:hover { border-color: var(--accent); color: var(--text-primary); }
.options-expiry-filter.active {
background: var(--accent);
border-color: var(--accent);
color: #fff;
}
.options-expiry-list {
display: flex;
flex-wrap: wrap;
gap: 6px;
max-height: 120px;
overflow-y: auto;
}
.options-expiry-btn {
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text-secondary);
font-size: 11px;
font-family: var(--font-mono);
padding: 5px 10px;
cursor: pointer;
transition: all 0.15s;
display: flex;
align-items: center;
gap: 6px;
}
.options-expiry-btn:hover { border-color: var(--accent); color: var(--text-primary); }
.options-expiry-btn.active {
background: rgba(59, 130, 246, 0.12);
border-color: var(--accent);
color: var(--accent);
}
.expiry-dte { color: var(--text-muted); font-size: 10px; }
.expiry-type-tag {
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 1px 5px;
border-radius: var(--radius-sm);
background: rgba(148, 163, 184, 0.1);
color: var(--text-muted);
}
.expiry-weekly .expiry-type-tag, .expiry-type-tag.expiry-weekly { background: rgba(59, 130, 246, 0.12); color: #60a5fa; }
.expiry-monthly .expiry-type-tag, .expiry-type-tag.expiry-monthly { background: rgba(139, 92, 246, 0.12); color: #a78bfa; }
.expiry-quarterly .expiry-type-tag, .expiry-type-tag.expiry-quarterly { background: rgba(234, 179, 8, 0.12); color: #eab308; }
.expiry-leaps .expiry-type-tag, .expiry-type-tag.expiry-leaps { background: rgba(34, 197, 94, 0.12); color: #22c55e; }
.options-expiry-badge {
font-size: 12px;
color: var(--text-secondary);
margin-bottom: 20px;
padding: 8px 14px;
background: var(--bg-input);
border-radius: var(--radius-sm);
border: 1px solid var(--border);
display: inline-block;
}
.options-expiry-badge strong { color: var(--text-primary); }
/* Greeks educational guide */
.options-guide {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 20px;
margin-bottom: 24px;
}
.options-guide-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
font-size: 14px;
font-weight: 700;
color: var(--accent);
}
.options-guide-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.options-guide-card {
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 14px 16px;
}
.options-guide-card-wide { grid-column: 1 / -1; }
.options-guide-card-title {
font-size: 13px;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 8px;
}
.options-guide-card-body {
font-size: 12px;
color: var(--text-secondary);
line-height: 1.65;
}
.options-guide-card-body strong { color: var(--text-primary); }
.options-guide-card-body em { color: var(--accent); font-style: normal; }
/* Spot price display */
.options-spot-row {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.options-spot-price {
display: flex;
align-items: baseline;
gap: 10px;
}
.options-spot-ticker {
font-size: 14px;
font-weight: 700;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.options-spot-val {
font-size: 28px;
font-weight: 800;
font-family: var(--font-mono);
color: var(--text-primary);
}
/* Signal Scorecard */
.scorecard-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.scorecard-card {
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 14px 16px;
}
.scorecard-card-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.scorecard-card-name {
font-size: 13px;
font-weight: 700;
color: var(--text-primary);
}
.scorecard-card-verdict {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
display: flex;
align-items: center;
gap: 6px;
}
.scorecard-sig-badge {
font-size: 9px;
background: rgba(234, 179, 8, 0.15);
color: var(--warning);
padding: 1px 5px;
border-radius: var(--radius-sm);
font-weight: 600;
}
.scorecard-bar-row {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 8px;
}
.scorecard-bar-bg {
flex: 1;
height: 6px;
background: rgba(148, 163, 184, 0.1);
border-radius: 3px;
overflow: hidden;
}
.scorecard-bar-fill {
height: 100%;
border-radius: 3px;
transition: width 0.4s ease;
}
.scorecard-pct {
font-size: 16px;
font-weight: 800;
font-family: var(--font-mono);
min-width: 40px;
text-align: right;
}
.scorecard-card-desc {
font-size: 11px;
color: var(--text-muted);
line-height: 1.5;
margin-bottom: 4px;
}
.scorecard-card-meta {
font-size: 11px;
color: var(--text-secondary);
font-family: var(--font-mono);
}
.scorecard-breakdown {
margin-top: 6px;
display: flex;
flex-wrap: wrap;
gap: 6px 12px;
}
.scorecard-bd-item {
font-size: 10px;
color: var(--text-secondary);
font-family: var(--font-mono);
}
.scorecard-bd-label {
color: var(--text-muted);
font-weight: 600;
}
/* ===== Implied-Move Rolling Context & Outsized-Day Stats ===== */
.im-stats-toggle {
display: flex;
align-items: center;
gap: 6px;
font-weight: 400;
text-transform: none;
letter-spacing: 0;
}
.im-stats-toggle-label {
font-size: 11px;
color: var(--text-muted);
margin-right: 2px;
}
.im-stats-toggle-btn {
font-size: 11px;
font-family: var(--font-mono);
color: var(--text-secondary);
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 4px 10px;
cursor: pointer;
transition: all 0.15s ease;
}
.im-stats-toggle-btn:hover { color: var(--text-primary); border-color: var(--text-muted); }
.im-stats-toggle-btn.active {
background: rgba(59, 130, 246, 0.15);
border-color: rgba(59, 130, 246, 0.5);
color: var(--text-primary);
font-weight: 600;
}
.im-stats-today {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 16px;
font-size: 13px;
color: var(--text-secondary);
}
.im-stats-today:empty { display: none; }
.im-stats-today strong { color: var(--text-primary); font-family: var(--font-mono); }
.im-stats-pill {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.05em;
padding: 3px 10px;
border-radius: var(--radius-sm);
text-transform: uppercase;
}
.im-stats-pill.im-wide { background: rgba(239, 68, 68, 0.15); color: var(--negative); }
.im-stats-pill.im-narrow { background: rgba(59, 130, 246, 0.15); color: #60a5fa; }
.im-stats-pill.im-normal { background: rgba(148, 163, 184, 0.12); color: var(--text-secondary); }
.im-stats-asof { font-size: 11px; color: var(--text-muted); }
.im-stats-table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
}
.im-stats-table th,
.im-stats-table td {
padding: 8px 12px;
text-align: right;
border-bottom: 1px solid var(--border);
}
.im-stats-table th {
font-size: 11px;
font-weight: 700;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.03em;
vertical-align: bottom;
}
.im-stats-table th span {
display: block;
font-size: 10px;
font-weight: 400;
text-transform: none;
letter-spacing: 0;
color: var(--text-muted);
font-family: var(--font-mono);
}
.im-stats-table th:first-child,
.im-stats-table td.im-stats-metric { text-align: left; }
.im-stats-table td {
font-family: var(--font-mono);
color: var(--text-primary);
}
.im-stats-table td.im-stats-metric {
font-family: var(--font-sans, inherit);
color: var(--text-secondary);
font-weight: 500;
}
.im-stats-table tbody tr:first-child td { color: var(--text-muted); }
.im-stats-table tbody tr:hover td { background: rgba(148, 163, 184, 0.04); }
.im-d-bear { color: var(--negative); }
.im-d-bull { color: var(--positive); }
.im-d-flat { color: var(--text-muted); }
.im-v-pos { color: var(--positive); }
.im-v-neg { color: var(--negative); }
.im-stats-note-ref { color: var(--text-muted); font-size: 9px; vertical-align: super; margin-left: 2px; }
.im-stats-note { font-size: 10px; color: var(--text-muted); margin-top: 10px; line-height: 1.5; }
.im-stats-lown {
font-size: 11px;
color: var(--warning);
background: rgba(234, 179, 8, 0.1);
border: 1px solid rgba(234, 179, 8, 0.25);
border-radius: var(--radius-sm);
padding: 6px 10px;
margin-bottom: 12px;
}
.im-stats-empty {
color: var(--text-secondary);
font-size: 12px;
line-height: 1.6;
padding: 20px;
text-align: center;
}
@media (max-width: 768px) {
.options-summary-grid { grid-template-columns: repeat(2, 1fr); }
.options-charts-grid,
.options-bottom-grid { grid-template-columns: 1fr; }
.options-second-order { grid-template-columns: 1fr; }
.options-header { flex-direction: column; gap: 12px; align-items: flex-start; }
.options-guide-grid { grid-template-columns: 1fr; }
.options-expiry-list { max-height: 200px; }
.scorecard-grid { grid-template-columns: 1fr; }
}
/* ---------- Portfolio Allocation Debate ---------- */
.pf-debate-blurb {
font-size: 13px;
color: var(--text-secondary);
background: rgba(139, 92, 246, 0.06);
border: 1px solid rgba(139, 92, 246, 0.18);
border-left: 3px solid var(--purple, #8b5cf6);
border-radius: var(--radius-md);
padding: 12px 16px;
margin: 12px 0 16px;
line-height: 1.5;
}
.pf-debate-blurb strong { color: var(--text-primary); }
.pf-debate-regime {
font-size: 13px;
color: var(--text-secondary);
margin: 6px 0 10px;
padding: 8px 12px;
background: rgba(59, 130, 246, 0.06);
border-radius: var(--radius-sm, 4px);
}
.pf-debate-regime strong { color: var(--text-primary); }
.pf-debate-meta {
font-size: 12.5px;
color: var(--text-secondary);
margin: 6px 0;
line-height: 1.5;
}
.pf-debate-meta strong { color: var(--text-primary); }
.pf-debate-meta ul { margin: 4px 0 0 18px; padding: 0; }
.pf-debate-meta ul li { margin: 2px 0; }
.pf-debate-subhead {
margin: 12px 0 6px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-secondary);
font-weight: 600;
}
.pf-alloc-table-wrap {
overflow-x: auto;
margin: 8px 0;
border-radius: var(--radius-sm, 4px);
border: 1px solid var(--border);
}
.pf-alloc-table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
background: var(--slate-card-40);
}
.pf-alloc-table thead th {
text-align: left;
padding: 8px 10px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-secondary);
background: var(--slate-card-50);
border-bottom: 1px solid var(--border);
white-space: nowrap;
}
.pf-alloc-table tbody td {
padding: 8px 10px;
border-bottom: 1px solid rgba(148, 163, 184, 0.08);
vertical-align: top;
color: var(--text-primary);
line-height: 1.45;
}
.pf-alloc-table tbody tr:last-child td { border-bottom: none; }
.pf-alloc-table tfoot td {
padding: 8px 10px;
font-size: 12px;
border-top: 1px solid var(--border);
background: var(--slate-card-40);
color: var(--text-primary);
}
.pf-alloc-tkr {
font-family: var(--font-mono);
font-weight: 600;
white-space: nowrap;
}
.pf-alloc-w {
font-family: var(--font-mono);
font-weight: 600;
text-align: right;
white-space: nowrap;
}
.pf-alloc-edge { color: var(--positive, #22c55e); }
.pf-alloc-risk { color: var(--negative, #ef4444); }
.pf-alloc-type {
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.pf-alloc-stock { background: rgba(59, 130, 246, 0.12); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.25); }
.pf-alloc-etf { background: rgba(245, 158, 11, 0.12); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.25); }
.pf-alloc-empty { font-size: 12px; color: var(--text-secondary); padding: 8px 0; }
/* ---------- Universe Scoring (Phase 0) ---------- */
.pf-scoring-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
padding: 10px 12px;
margin: 0 0 12px;
background: var(--slate-card-40);
border: 1px solid var(--border);
border-radius: var(--radius-md);
}
.pf-scoring-label {
font-size: 12px;
color: var(--text-secondary);
font-weight: 600;
}
.pf-scoring-select {
background: var(--slate-card-60);
color: var(--text-primary);
border: 1px solid var(--border);
border-radius: var(--radius-sm, 4px);
padding: 6px 10px;
font-size: 12.5px;
font-family: inherit;
min-width: 200px;
}
.pf-scoring-hint {
font-size: 11.5px;
color: var(--text-secondary);
opacity: 0.75;
}
.pf-scoring-progress {
margin: 0 0 14px;
padding: 12px 14px;
background: rgba(59, 130, 246, 0.06);
border: 1px solid rgba(59, 130, 246, 0.18);
border-radius: var(--radius-md);
}
.pf-sp-header {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
margin-bottom: 8px;
}
.pf-sp-label {
font-size: 11.5px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-secondary);
font-weight: 600;
}
.pf-sp-status {
font-size: 12.5px;
color: var(--text-primary);
font-weight: 500;
}
.pf-sp-bar {
height: 6px;
background: rgba(148, 163, 184, 0.12);
border-radius: 999px;
overflow: hidden;
}
.pf-sp-fill {
height: 100%;
width: 0%;
background: linear-gradient(90deg, #3b82f6, #8b5cf6);
transition: width 0.3s ease;
}
.pf-sp-tail {
font-size: 11.5px;
color: var(--text-secondary);
margin-top: 6px;
font-family: var(--font-mono);
opacity: 0.85;
}
.pf-macro-report,
.pf-top-firms {
margin: 0 0 12px;
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--slate-card-40);
overflow: hidden;
}
.pf-macro-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 10px 14px;
cursor: pointer;
user-select: none;
background: var(--slate-card-50);
transition: background 0.15s ease;
}
.pf-macro-header:hover { background: var(--bg-card); }
.pf-macro-label {
font-size: 12.5px;
font-weight: 600;
color: var(--text-primary);
letter-spacing: 0.02em;
}
.pf-macro-chevron { transition: transform 0.2s ease; opacity: 0.6; }
.pf-macro-expanded .pf-macro-chevron { transform: rotate(180deg); }
.pf-macro-body {
display: none;
padding: 14px 16px;
font-size: 13px;
color: var(--text-primary);
line-height: 1.55;
}
.pf-macro-expanded .pf-macro-body { display: block; }
.pf-macro-body p { margin: 0 0 10px; }
.pf-macro-body p:last-child { margin-bottom: 0; }
.pf-topfirms-table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
}
.pf-topfirms-table thead th {
text-align: left;
padding: 6px 10px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-secondary);
border-bottom: 1px solid var(--border);
}
.pf-topfirms-table tbody td {
padding: 6px 10px;
border-bottom: 1px solid rgba(148, 163, 184, 0.07);
color: var(--text-primary);
}
.pf-topfirms-table tbody tr:last-child td { border-bottom: none; }
/* ---------- Deep Research (Exhibit 2D) ---------- */
.pf-deep-research { border-color: rgba(245, 158, 11, 0.25); }
.pf-deep-research .pf-macro-header {
background: rgba(245, 158, 11, 0.07);
}
.pf-deep-research .pf-macro-header:hover {
background: rgba(245, 158, 11, 0.12);
}
.pf-dr-header { gap: 8px; }
.pf-dr-stamp {
font-size: 11px;
color: var(--text-secondary);
font-family: var(--font-mono);
white-space: nowrap;
opacity: 0.8;
}
.pf-dr-section-h {
margin: 14px 0 6px;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-secondary);
font-weight: 600;
}
.pf-dr-section-h:first-child { margin-top: 0; }
.pf-dr-table-wrap {
overflow-x: auto;
border: 1px solid var(--border);
border-radius: var(--radius-sm, 4px);
}
.pf-dr-table {
width: 100%;
border-collapse: collapse;
font-size: 12px;
background: var(--slate-card-40);
}
.pf-dr-table thead th {
text-align: left;
padding: 7px 10px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-secondary);
background: var(--slate-card-60);
border-bottom: 1px solid var(--border);
white-space: nowrap;
}
.pf-dr-table tbody td {
padding: 7px 10px;
border-bottom: 1px solid rgba(148, 163, 184, 0.07);
vertical-align: top;
color: var(--text-primary);
line-height: 1.45;
}
.pf-dr-table tbody tr:last-child td { border-bottom: none; }
.pf-dr-metric { font-weight: 600; white-space: nowrap; }
.pf-dr-model { color: #fbbf24; }
.pf-dr-market { color: #60a5fa; }
.pf-dr-rationale { font-size: 11.5px; color: var(--text-secondary); }
.pf-dr-footer {
margin-top: 12px;
font-size: 11px;
color: var(--text-secondary);
opacity: 0.7;
}
.pf-dr-footer code {
font-family: var(--font-mono);
background: rgba(148, 163, 184, 0.08);
padding: 2px 6px;
border-radius: 3px;
}
.pf-dr-consensus-badge {
display: inline-block;
font-family: var(--font-mono);
font-size: 9.5px;
font-weight: 700;
letter-spacing: 0.06em;
color: #f59e0b;
background: rgba(245, 158, 11, 0.12);
border: 1px solid rgba(245, 158, 11, 0.3);
padding: 1px 6px;
border-radius: 3px;
margin-right: 6px;
vertical-align: middle;
}
.pf-dr-disagree {
margin: 0;
padding: 10px 14px 10px 28px;
border: 1px solid rgba(245, 158, 11, 0.25);
border-left: 3px solid #f59e0b;
border-radius: var(--radius-sm, 4px);
background: rgba(245, 158, 11, 0.05);
font-size: 12px;
line-height: 1.5;
color: var(--text-primary);
}
.pf-dr-disagree li { margin: 3px 0; }
.pf-dr-warn {
margin: 0 0 12px;
padding: 8px 12px;
border: 1px solid rgba(239, 68, 68, 0.3);
border-left: 3px solid #ef4444;
border-radius: var(--radius-sm, 4px);
background: rgba(239, 68, 68, 0.06);
font-size: 12px;
color: var(--text-secondary);
}
/* ---------- Sector Intelligence cards ---------- */
.pf-sec-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 10px;
}
.pf-sec-card {
border: 1px solid var(--border);
border-radius: var(--radius-sm, 4px);
background: var(--slate-card-40);
padding: 10px 12px;
}
.pf-sec-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 6px;
}
.pf-sec-name { font-weight: 600; font-size: 13px; color: var(--text-primary); }
.pf-sec-summary { font-size: 12px; line-height: 1.45; color: var(--text-secondary); margin-bottom: 6px; }
.pf-sec-sub {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-secondary);
opacity: 0.75;
margin-top: 6px;
}
.pf-sec-list { margin: 2px 0 0; padding-left: 16px; font-size: 11.5px; line-height: 1.4; color: var(--text-primary); }
.pf-sec-list li { margin: 1px 0; }
.pf-sec-risks { color: #fca5a5; }
.pf-sec-rationale {
font-size: 11.5px;
line-height: 1.45;
color: var(--text-secondary);
font-style: italic;
border-left: 2px solid var(--border);
padding-left: 8px;
margin: 0 0 6px;
}
.pf-sec-card-degraded { opacity: 0.7; border-style: dashed; }
.pf-dr-empty {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 14px 16px;
margin: 0 0 12px;
border: 1px dashed rgba(245, 158, 11, 0.35);
background: rgba(245, 158, 11, 0.04);
border-radius: var(--radius-md);
}
.pf-dr-empty-text {
font-size: 12.5px;
color: var(--text-secondary);
line-height: 1.5;
}
.pf-dr-empty-text strong { color: var(--text-primary); display: block; margin-bottom: 4px; }
.pf-sec-badge {
display: inline-block;
padding: 3px 10px;
border-radius: 999px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
white-space: nowrap;
}
.pf-sec-over { background: rgba(34, 197, 94, 0.14); color: #22c55e; border: 1px solid rgba(34, 197, 94, 0.3); }
.pf-sec-under { background: rgba(239, 68, 68, 0.14); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.3); }
.pf-sec-neutral{ background: rgba(148, 163, 184, 0.14); color: #94a3b8; border: 1px solid rgba(148, 163, 184, 0.3); }
.pf-sec-degraded{ background: rgba(245, 158, 11, 0.12); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.3); }
.pf-sec-cat {
display: inline-block;
margin: 1px 4px 1px 0;
padding: 2px 8px;
border-radius: 4px;
font-size: 11px;
background: rgba(59, 130, 246, 0.1);
color: #93c5fd;
border: 1px solid rgba(59, 130, 246, 0.2);
}
/* ---------- Research view ---------- */
#research-view { padding: 24px; max-width: 1200px; margin: 0 auto; }
.rs-header {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 20px;
margin-bottom: 20px;
}
.rs-input-row {
display: flex;
gap: 10px;
align-items: center;
}
.rs-input-row input {
flex: 1;
padding: 10px 14px;
background: rgba(0, 0, 0, 0.25);
border: 1px solid var(--border);
border-radius: 6px;
color: var(--text-primary);
font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 14px;
outline: none;
transition: border-color 200ms, box-shadow 200ms;
}
.rs-input-row input:focus {
border-color: var(--accent);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}
.rs-input-row .btn-primary { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.rs-hint {
margin-top: 10px;
font-size: 12px;
color: var(--text-muted);
}
.rs-results { display: flex; flex-direction: column; gap: 16px; }
.rs-section {
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 20px;
}
.rs-section-title {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--accent);
margin-bottom: 12px;
}
.rs-meta { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
.rs-empty { color: var(--text-muted); font-size: 13px; padding: 8px 0; }
.rs-skeleton { color: var(--text-muted); font-size: 13px; padding: 8px 0; opacity: 0.7; }
.rs-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 12px;
}
.rs-stat {
background: rgba(0, 0, 0, 0.18);
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px 12px;
}
.rs-stat-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.rs-stat-value { font-size: 16px; font-weight: 600; color: var(--text-primary); margin-top: 2px; font-family: var(--font-mono, ui-monospace, monospace); }
.rs-stat-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.rs-na { color: var(--text-muted); font-style: italic; }
.rs-pos { color: var(--positive, #22c55e); }
.rs-neg { color: var(--negative, #ef4444); }
.rs-tag {
display: inline-block;
padding: 1px 8px;
border-radius: 999px;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
border: 1px solid transparent;
}
.rs-tag-pos { background: rgba(34, 197, 94, 0.12); color: var(--positive, #22c55e); border-color: rgba(34, 197, 94, 0.3); }
.rs-tag-neg { background: rgba(239, 68, 68, 0.12); color: var(--negative, #ef4444); border-color: rgba(239, 68, 68, 0.3); }
.rs-tag-neutral{ background: rgba(148, 163, 184, 0.12); color: var(--text-muted); border-color: rgba(148, 163, 184, 0.25); }
.rs-warn {
margin-top: 12px;
padding: 10px 12px;
background: rgba(234, 179, 8, 0.1);
border: 1px solid rgba(234, 179, 8, 0.4);
border-radius: 6px;
color: #facc15;
font-size: 13px;
}
.rs-news-item {
padding: 10px 0;
border-bottom: 1px solid var(--border);
}
.rs-news-item:last-child { border-bottom: none; }
.rs-news-head { display: flex; gap: 10px; align-items: center; font-size: 11px; color: var(--text-muted); margin-bottom: 4px; }
.rs-news-date { font-family: var(--font-mono, monospace); }
.rs-news-source { color: var(--text-secondary); }
.rs-news-title { font-size: 14px; line-height: 1.4; }
.rs-news-title a { color: var(--text-primary); text-decoration: none; border-bottom: 1px dotted var(--text-muted); }
.rs-news-title a:hover { color: var(--accent); border-bottom-color: var(--accent); }
.rs-news-summary { margin-top: 4px; font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.rs-md { font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); }
.rs-md-h { font-size: 13px; font-weight: 600; color: var(--text-primary); margin: 14px 0 6px; text-transform: uppercase; letter-spacing: 0.04em; }
.rs-md-h:first-child { margin-top: 0; }
.rs-md-p { margin: 6px 0; }
.rs-md-ul { margin: 6px 0 6px 20px; padding: 0; }
.rs-md-ul li { margin: 4px 0; }
.rs-status .rs-section-title { margin-bottom: 8px; }
.rs-status-line {
font-family: var(--font-mono, monospace);
font-size: 11.5px;
color: var(--text-muted);
padding: 2px 0;
}
.rs-status-line::before { content: '› '; opacity: 0.6; }
.rs-status-err { color: var(--negative, #ef4444); }
.rs-spinner {
display: inline-block;
width: 12px;
height: 12px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top-color: #fff;
border-radius: 50%;
animation: rsSpin 700ms linear infinite;
vertical-align: -2px;
}
@keyframes rsSpin { to { transform: rotate(360deg); } }
/* ---------- Light theme — final patches for cases not covered by tokens ---------- */
:root[data-theme="light"] body::before {
background:
radial-gradient(ellipse 80% 60% at 20% 10%, rgba(59,130,246,0.08) 0%, transparent 60%),
radial-gradient(ellipse 60% 50% at 80% 30%, rgba(139,92,246,0.06) 0%, transparent 50%),
radial-gradient(ellipse 70% 50% at 50% 90%, rgba(6,182,212,0.05) 0%, transparent 50%);
}
[data-theme="light"] .nav-brand h1 {
color: var(--text-primary);
}
[data-theme="light"] .hero h2 {
background: linear-gradient(135deg, #0f172a 0%, #475569 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Score chips read fine on light surfaces but the text was tuned for dark — bump weight */
[data-theme="light"] .score-excellent { color: #15803d; }
[data-theme="light"] .score-good { color: #16a34a; }
[data-theme="light"] .score-fair { color: #a16207; }
[data-theme="light"] .score-poor { color: #b91c1c; }
/* Research view cards used rgba(0,0,0,*) for inner zebra — invert to subtle slate */
[data-theme="light"] .rs-input-row input { background: #f8fafc; }
[data-theme="light"] .rs-stat { background: #f8fafc; }
/* Tape / heatmap inner cells that used black-shadow text-stroke for legibility */
[data-theme="light"] .heatmap-cell,
[data-theme="light"] .tape-item { text-shadow: none; }
/* Briefing text-shadow in news titles (white text on photos) — keep, but only when needed */
/* (no override; original `text-shadow: 0 1px 3px rgba(0,0,0,0.6)` is harmless on either bg) */
/* Theme toggle button styling */
.theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
background: var(--bg-hover);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text-secondary);
cursor: pointer;
transition: color var(--duration) var(--ease), background var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.theme-toggle:hover {
color: var(--text-primary);
border-color: var(--border-accent);
}
.theme-toggle .theme-icon-sun { display: none; }
.theme-toggle .theme-icon-moon { display: block; }
[data-theme="light"] .theme-toggle .theme-icon-sun { display: block; }
[data-theme="light"] .theme-toggle .theme-icon-moon { display: none; }
/* ---------- Print ---------- */
@media print {
body::before { display: none; }
.nav, .input-section, .back-btn, .chart-toolbar { display: none; }
.stat-card, .model-card, .table-section { break-inside: avoid; }
}
/* ===================== Portfolio Assistant (floating chat) ===================== */
.assistant-fab {
position: fixed;
right: 28px;
bottom: 28px;
width: 56px;
height: 56px;
border-radius: 50%;
border: none;
background: var(--accent);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: var(--shadow-lg);
z-index: 900;
transition: transform 0.15s ease, background 0.15s ease;
}
.assistant-fab:hover { transform: translateY(-2px) scale(1.04); }
.assistant-fab--active { background: var(--accent-light); }
.assistant-panel {
position: fixed;
right: 28px;
bottom: 28px;
width: 380px;
max-width: calc(100vw - 32px);
height: 560px;
max-height: calc(100vh - 56px);
background: var(--bg-card-solid);
border: 1px solid var(--border);
border-radius: 16px;
box-shadow: var(--shadow-lg);
display: flex;
flex-direction: column;
overflow: hidden;
z-index: 901;
}
.assistant-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
border-bottom: 1px solid var(--border);
background: var(--bg-secondary);
}
.assistant-title {
display: flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
}
.assistant-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--positive);
box-shadow: 0 0 0 3px var(--positive-dim);
}
.assistant-head-controls { display: flex; align-items: center; gap: 6px; }
.assistant-model {
background: var(--bg-input);
color: var(--text-secondary);
border: 1px solid var(--border);
border-radius: 8px;
font-size: 11px;
padding: 4px 6px;
max-width: 130px;
cursor: pointer;
}
.assistant-close {
background: transparent;
border: none;
color: var(--text-muted);
cursor: pointer;
display: flex;
padding: 4px;
border-radius: 6px;
}
.assistant-close:hover { background: var(--bg-hover); color: var(--text-primary); }
.assistant-conditions {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 10px 14px;
border-bottom: 1px solid var(--border);
background: var(--bg-primary);
}
.assistant-cond-muted { font-size: 11px; color: var(--text-muted); }
.assistant-chip {
font-size: 10px;
font-family: var(--font-mono);
font-weight: 600;
padding: 3px 8px;
border-radius: 999px;
background: var(--bg-input);
color: var(--text-secondary);
border: 1px solid var(--border);
}
.assistant-chip.positive { color: var(--positive); border-color: var(--positive-dim); }
.assistant-chip.negative { color: var(--negative); border-color: var(--negative-dim); }
.assistant-chip.neutral { color: var(--text-muted); }
.assistant-messages {
flex: 1;
overflow-y: auto;
padding: 14px;
display: flex;
flex-direction: column;
gap: 10px;
}
.assistant-msg {
font-size: 13px;
line-height: 1.5;
padding: 9px 12px;
border-radius: 12px;
max-width: 85%;
word-wrap: break-word;
overflow-wrap: anywhere;
}
.assistant-msg--user {
align-self: flex-end;
background: var(--accent);
color: #fff;
border-bottom-right-radius: 4px;
}
.assistant-msg--user .assistant-msg-content { white-space: pre-wrap; }
.assistant-msg--assistant {
align-self: flex-start;
background: var(--bg-secondary);
color: var(--text-primary);
border: 1px solid var(--border);
border-bottom-left-radius: 4px;
}
.assistant-msg--streaming .assistant-msg-content::after {
content: '▋';
animation: assistantBlink 1s steps(2) infinite;
color: var(--text-muted);
margin-left: 1px;
}
@keyframes assistantBlink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
/* ---- Rendered markdown inside assistant messages ---- */
.assistant-msg-content > *:first-child { margin-top: 0; }
.assistant-msg-content > *:last-child { margin-bottom: 0; }
.assistant-msg-content p { margin: 0 0 8px; }
.assistant-msg-content .assistant-h {
margin: 12px 0 6px;
font-size: 13px;
font-weight: 700;
line-height: 1.3;
color: var(--text-primary);
}
.assistant-msg-content h4.assistant-h { font-size: 13.5px; }
.assistant-msg-content .assistant-list { margin: 4px 0 8px; padding-left: 18px; }
.assistant-msg-content .assistant-list li { margin: 2px 0; }
.assistant-msg-content .assistant-list li::marker { color: var(--text-muted); }
.assistant-msg-content strong { font-weight: 700; color: var(--text-primary); }
.assistant-msg-content em { font-style: italic; }
.assistant-msg-content a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.assistant-msg-content .assistant-inline-code {
font-family: var(--font-mono);
font-size: 11.5px;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 5px;
padding: 1px 5px;
}
.assistant-msg-content .assistant-code {
font-family: var(--font-mono);
font-size: 11.5px;
line-height: 1.45;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 8px;
padding: 8px 10px;
margin: 6px 0;
overflow-x: auto;
white-space: pre;
}
.assistant-msg-content .assistant-code code { background: none; border: none; padding: 0; }
.assistant-msg-content .assistant-quote {
margin: 6px 0;
padding: 4px 0 4px 10px;
border-left: 3px solid var(--border);
color: var(--text-secondary);
}
.assistant-msg-content .assistant-hr {
border: none;
border-top: 1px solid var(--border);
margin: 10px 0;
}
/* ---- Per-message actions (TTS) ---- */
.assistant-msg-actions {
display: flex;
justify-content: flex-end;
gap: 6px;
margin-top: 6px;
}
.assistant-tts {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
padding: 0;
border: 1px solid var(--border);
border-radius: 7px;
background: var(--bg-input);
color: var(--text-muted);
cursor: pointer;
transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.assistant-tts:hover { color: var(--text-primary); border-color: var(--text-muted); }
.assistant-tts--active {
color: var(--accent);
border-color: var(--accent);
background: var(--accent-dim, var(--bg-hover));
animation: assistantTtsPulse 1.4s ease-in-out infinite;
}
@keyframes assistantTtsPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
/* ---- Header auto-speak toggle ---- */
.assistant-tts-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid transparent;
color: var(--text-muted);
cursor: pointer;
padding: 4px;
border-radius: 6px;
}
.assistant-tts-toggle:hover { background: var(--bg-hover); color: var(--text-primary); }
.assistant-tts-toggle--active {
color: var(--accent);
border-color: var(--accent);
background: var(--accent-dim, var(--bg-hover));
}
.assistant-input {
display: flex;
gap: 8px;
padding: 12px 14px;
border-top: 1px solid var(--border);
background: var(--bg-secondary);
}
.assistant-input input {
flex: 1;
background: var(--bg-input);
border: 1px solid var(--border);
border-radius: 10px;
padding: 9px 12px;
font-size: 13px;
color: var(--text-primary);
outline: none;
}
.assistant-input input:focus { border-color: var(--accent); }
.assistant-send {
background: var(--accent);
color: #fff;
border: none;
border-radius: 10px;
width: 38px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.assistant-send:hover { background: var(--accent-light); }
.assistant-send:disabled { opacity: 0.5; cursor: default; }
@media (max-width: 480px) {
.assistant-panel { right: 8px; bottom: 8px; width: calc(100vw - 16px); height: calc(100vh - 80px); }
.assistant-fab { right: 16px; bottom: 16px; }
}
/* ===== Risk Monitor ===== */
.nav-tab-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 16px;
height: 16px;
margin-left: 6px;
padding: 0 5px;
font-size: 10px;
font-weight: 700;
line-height: 1;
border-radius: var(--radius-full);
background: #f59e0b;
color: #1a1206;
}
.nav-tab-badge--critical { background: var(--negative); color: #fff; }
.risk-scan-at { font-size: 11px; color: var(--text-secondary); }
.risk-empty { padding: 14px 0; color: var(--text-secondary); font-size: 13px; }
.risk-alert-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
padding: 12px 14px;
margin-bottom: 8px;
background: var(--bg-card);
border: 1px solid var(--border);
border-left: 3px solid var(--text-secondary);
border-radius: var(--radius-md);
}
.risk-alert-row.risk-sev-critical { border-left-color: var(--negative); }
.risk-alert-row.risk-sev-warn { border-left-color: #f59e0b; }
.risk-alert-row.risk-sev-info { border-left-color: var(--accent-light); }
.risk-alert-row.risk-acked { opacity: 0.6; }
.risk-alert-main { min-width: 0; flex: 1; }
.risk-alert-top { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.risk-sev-pill {
font-size: 9px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 2px 7px;
border-radius: var(--radius-full);
}
.risk-sev-pill-critical { background: rgba(239, 68, 68, 0.18); color: var(--negative); }
.risk-sev-pill-warn { background: rgba(245, 158, 11, 0.18); color: #f59e0b; }
.risk-sev-pill-info { background: var(--accent-dim); color: var(--accent-light); }
.risk-alert-cat {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-secondary);
}
.risk-alert-title { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.risk-alert-detail { margin-top: 5px; font-size: 12px; color: var(--text-secondary); line-height: 1.45; }
.risk-alert-tags { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.risk-tag {
font-size: 10px;
font-weight: 600;
padding: 1px 6px;
border-radius: var(--radius-sm);
background: var(--bg-input);
color: var(--text-secondary);
}
.risk-alert-evidence {
margin: 6px 0 0;
padding-left: 16px;
font-size: 11px;
color: var(--text-secondary);
line-height: 1.4;
}
.risk-alert-evidence li { list-style: disc; }
.risk-alert-actions { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; align-items: flex-end; }
.risk-acked-label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--positive);
padding: 4px 0;
}
/* ===== Rebalance Proposal ===== */
.btn-rebal { color: var(--accent-light); }
.rebal-overlay {
position: fixed;
top: 0; right: 0; bottom: 0; left: 0;
width: 100%; height: 100%;
z-index: 1000;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 48px 16px;
background: rgba(2, 6, 23, 0.62);
backdrop-filter: blur(4px);
overflow-y: auto;
}
.rebal-proposal-card {
width: 100%;
max-width: 720px;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 22px 24px;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.rebal-proposal-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.rebal-proposal-title { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.rebal-proposal-sub { margin-top: 2px; font-size: 12px; color: var(--text-secondary); }
.rebal-proposal-summary {
margin: 12px 0 4px;
font-size: 13px;
line-height: 1.5;
color: var(--text-secondary);
}
.rebal-loading, .rebal-error { padding: 28px 4px; font-size: 13px; color: var(--text-secondary); }
.rebal-error { color: var(--negative); }
.rebal-alts { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.rebal-alt {
border: 1px solid var(--border);
border-left: 3px solid var(--accent-light);
border-radius: var(--radius-md);
padding: 14px 16px;
background: var(--bg-input);
}
.rebal-alt-replace { border-left-color: #f59e0b; }
.rebal-alt-derisk { border-left-color: var(--positive); }
.rebal-alt-hold { border-left-color: var(--text-secondary); }
.rebal-alt-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rebal-kind-badge {
font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
padding: 2px 8px; border-radius: var(--radius-full);
background: var(--accent-dim); color: var(--accent-light);
}
.rebal-kind-replace { background: rgba(245, 158, 11, 0.18); color: #f59e0b; }
.rebal-kind-derisk { background: rgba(34, 197, 94, 0.18); color: var(--positive); }
.rebal-kind-hold { background: rgba(148, 163, 184, 0.16); color: var(--text-secondary); }
.rebal-alt-title { font-size: 14px; font-weight: 600; color: var(--text-primary); }
.rebal-alt-rationale { margin-top: 6px; font-size: 12px; color: var(--text-secondary); line-height: 1.45; }
.rebal-alt-changes { margin: 8px 0 0; padding-left: 18px; font-size: 12px; color: var(--text-primary); line-height: 1.5; }
.rebal-alt-changes li { list-style: disc; }
.rebal-alt-impact { margin-top: 8px; font-size: 11px; color: var(--text-secondary); font-style: italic; }
.rebal-alloc { margin-top: 10px; }
.rebal-alloc summary { font-size: 11px; color: var(--accent-light); cursor: pointer; }
.rebal-alloc-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
gap: 4px 12px; margin-top: 8px;
}
.rebal-alloc-row { font-size: 11px; color: var(--text-secondary); }
.rebal-alloc-row b { color: var(--text-primary); }
.rebal-alt-actions { margin-top: 12px; display: flex; justify-content: flex-end; }
.rebal-apply-btn {
background: var(--accent);
color: #fff;
border: 1px solid var(--accent);
}
.rebal-apply-btn:hover { background: var(--accent-light); border-color: var(--accent-light); }
/* ---------- Portfolio debate hardening (quorum / validation / ledger banners) ---------- */
.pf-track-toggle {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 11px;
color: var(--text-secondary);
cursor: pointer;
white-space: nowrap;
user-select: none;
}
.pf-track-toggle input { accent-color: var(--accent); cursor: pointer; }
.pf-run-banner {
margin: 10px 0 0;
padding: 8px 12px;
border: 1px solid var(--border);
border-left-width: 3px;
border-radius: var(--radius-sm, 4px);
font-size: 12px;
line-height: 1.5;
color: var(--text-secondary);
background: var(--bg-hover);
}
.pf-run-banner ul { margin: 6px 0 0 18px; padding: 0; }
.pf-run-banner-error {
background: var(--negative-dim);
border-color: rgba(239, 68, 68, 0.35);
border-left-color: var(--negative);
color: var(--negative);
}
.pf-run-banner-warn {
background: var(--warning-dim);
border-color: rgba(234, 179, 8, 0.35);
border-left-color: var(--warning);
}
.pf-run-banner-ok {
background: var(--positive-dim);
border-color: rgba(34, 197, 94, 0.3);
border-left-color: var(--positive);
}
.pf-run-banner-info { border-left-color: var(--text-muted); }
.pf-chip-invalid {
display: inline-block;
margin-left: 6px;
padding: 1px 6px;
border-radius: 3px;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.4px;
background: var(--negative-dim);
color: var(--negative);
white-space: nowrap;
}
.pf-chip-unpriced {
display: inline-block;
padding: 1px 6px;
border-radius: 3px;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.4px;
background: var(--bg-hover);
color: var(--text-muted);
white-space: nowrap;
}
.pf-consensus-stamp {
margin-left: 12px;
margin-right: auto;
font-size: 11px;
font-weight: 600;
color: var(--warning);
}
.pf-quorum-note {
margin-right: 12px;
font-size: 11px;
color: var(--text-secondary);
}
/* Pre-trade risk vet verdict chips (same pattern as pf-chip-invalid/unpriced) */
.pf-chip-redflag {
display: inline-block;
margin-left: 4px;
padding: 1px 6px;
border-radius: 3px;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.4px;
background: var(--negative-dim);
color: var(--negative);
white-space: nowrap;
}
.pf-chip-caution {
display: inline-block;
margin-left: 4px;
padding: 1px 6px;
border-radius: 3px;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.4px;
background: var(--warning-dim);
color: var(--warning);
white-space: nowrap;
}
.pf-chip-unvetted {
display: inline-block;
margin-left: 4px;
padding: 1px 6px;
border-radius: 3px;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.4px;
background: var(--bg-hover);
color: var(--text-muted);
white-space: nowrap;
}
/* Tracked holdings: persistent per-position thesis/risk column (click to expand) */
.tracked-thesis-th { min-width: 220px; }
.tracked-thesis-cell {
max-width: 340px;
font-size: 11px;
line-height: 1.35;
color: var(--text-secondary);
cursor: pointer;
vertical-align: top;
}
.tracked-thesis-cell .tracked-thesis,
.tracked-thesis-cell .tracked-edge,
.tracked-thesis-cell .tracked-risk {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.tracked-thesis-cell .tracked-edge { color: var(--text-muted); -webkit-line-clamp: 1; }
.tracked-thesis-cell .tracked-risk { color: var(--warning, #d97706); -webkit-line-clamp: 1; margin-top: 2px; }
.tracked-thesis-cell.expanded .tracked-thesis,
.tracked-thesis-cell.expanded .tracked-edge,
.tracked-thesis-cell.expanded .tracked-risk { -webkit-line-clamp: unset; display: block; }
/* Tracked ledger: persistent consensus context (themes / key risks / triggers) */
.tracked-ctx {
border: 1px solid var(--border);
border-radius: 8px;
padding: 12px 14px;
background: var(--bg-secondary, rgba(127,127,127,0.04));
font-size: 12px;
}
.tracked-ctx-head { margin-bottom: 8px; }
.tracked-ctx-regime { display: block; color: var(--text-secondary); margin-bottom: 4px; }
.tracked-ctx-meta { color: var(--text-muted); font-size: 11px; }
.tracked-ctx-block { margin-top: 6px; color: var(--text-secondary); }
.tracked-ctx-block ul { margin: 4px 0 0 18px; padding: 0; }
.tracked-ctx-block li { margin-bottom: 2px; }
.tracked-ctx-risks li { color: var(--warning, #d97706); }
.tracked-ctx-triggers li { color: var(--text-secondary); }
/* Tracked holdings table: force a real minimum width so the 10 columns
overflow into the scrollable .table-wrap instead of being crushed to fit
(width:100% + table-layout:auto never overflows, so nothing scrolled). */
.tracked-table { min-width: 1080px; }
.tracked-table th, .tracked-table td { white-space: nowrap; }
.tracked-table .tracked-thesis-cell { white-space: normal; min-width: 260px; }
/* ===== Dashboard Overview: Seeking-Alpha-style grouped section cards ===== */
.dash-mode {
display: flex;
gap: 6px;
margin-bottom: 18px;
}
.dash-mode-btn {
background: transparent;
color: var(--text-secondary);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 7px 18px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.15s var(--ease);
}
.dash-mode-btn:hover { color: var(--text-primary); border-color: var(--border-accent); }
.dash-mode-btn.active {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
.ov-section {
background: var(--bg-card-solid);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 18px 22px 20px;
margin-bottom: 16px;
}
.ov-section-head { margin-bottom: 14px; }
.ov-section-head h3 {
font-size: 12.5px;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text-primary);
margin: 0;
}
.ov-section-head p {
font-size: 12px;
color: var(--text-tertiary);
margin: 2px 0 0;
}
.ov-cols {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px 28px;
}
@media (max-width: 940px) { .ov-cols { grid-template-columns: 1fr; } }
.ov-col-head {
display: flex;
align-items: baseline;
justify-content: space-between;
padding: 0 6px 6px;
border-bottom: 1px solid var(--border);
margin-bottom: 4px;
}
.ov-col-title {
font-size: 12px;
font-weight: 600;
color: var(--text-secondary);
}
.ov-col-rating {
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-muted);
}
.ov-row {
display: grid;
grid-template-columns: 62px minmax(0, 1fr) auto;
align-items: center;
gap: 8px;
padding: 6px;
border-radius: 6px;
cursor: pointer;
transition: background 0.12s var(--ease);
}
.ov-row:hover { background: var(--bg-hover); }
.ov-tkr {
font-size: 12px;
font-weight: 600;
color: var(--accent-light);
}
.ov-name {
font-size: 12px;
color: var(--text-secondary);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ov-badge {
justify-self: end;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.ov-mos {
font-size: 12px;
font-weight: 600;
font-family: var(--font-mono);
}
.ov-empty {
font-size: 12px;
color: var(--text-muted);
padding: 10px 6px;
}
/* ===== Market hero: search + live markets/chart + latest news ===== */
.market-hero { margin: 4px 0 26px; }
/* Search bar */
.mh-search {
display: flex;
align-items: center;
gap: 12px;
background: var(--bg-card-solid);
border: 1px solid var(--border);
border-radius: var(--radius-full);
padding: 12px 12px 12px 18px;
box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.04));
margin-bottom: 20px;
transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.mh-search:focus-within { border-color: var(--border-accent); box-shadow: 0 0 0 3px var(--accent-dim); }
.mh-search-icon { color: var(--accent); flex-shrink: 0; }
.mh-search input {
flex: 1;
background: transparent;
border: none;
outline: none;
color: var(--text-primary);
font-size: 16px;
font-weight: 500;
}
.mh-search input::placeholder { color: var(--text-muted); font-weight: 400; }
.mh-search-go {
flex-shrink: 0;
width: 38px; height: 38px;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--border);
background: var(--bg-hover);
color: var(--text-secondary);
border-radius: var(--radius-full);
cursor: pointer;
transition: all 0.15s var(--ease);
}
.mh-search-go:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
/* Detail-page quick search — narrower than the hero bar, sits above the back link. */
.detail-search { max-width: 520px; margin: 0 0 14px; }
.detail-search input { font-size: 15px; }
/* Grid: markets (left) + news (right). align-items:stretch (grid default) makes
both columns equal height; the news column caps to the markets height and its
list scrolls internally (see .mh-news / .mh-news-list min-height:0 below). */
.mh-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 22px; align-items: stretch; }
@media (max-width: 940px) { .mh-grid { grid-template-columns: 1fr; } }
.mh-markets { min-width: 0; }
.mh-tabs {
display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
border-bottom: 1px solid var(--border);
margin-bottom: 10px;
}
.mh-tab {
background: transparent; border: none; cursor: pointer;
color: var(--text-tertiary);
font-size: 13px; font-weight: 600;
padding: 8px 10px;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: color 0.12s var(--ease);
}
.mh-tab:hover { color: var(--text-secondary); }
.mh-tab.active { color: var(--text-primary); border-bottom-color: #f59e0b; }
.mh-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 18px; align-items: start; }
@media (max-width: 640px) { .mh-panel { grid-template-columns: 1fr; } }
/* Index list */
.mh-list { min-width: 0; }
.mh-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto auto auto;
align-items: baseline;
gap: 10px;
padding: 8px 8px 8px 10px;
border-radius: 7px;
cursor: pointer;
border-left: 2px solid transparent;
transition: background 0.12s var(--ease);
}
.mh-row:hover { background: var(--bg-hover); }
.mh-row.selected { background: var(--bg-hover); border-left-color: #f59e0b; }
.mh-row-name { font-size: 13px; font-weight: 600; color: var(--accent-light); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mh-premkt { margin-left: 6px; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--warning, #eab308); background: var(--warning-dim, rgba(234,179,8,0.12)); padding: 1px 5px; border-radius: 5px; vertical-align: 1px; }
.mh-row-price { font-size: 13px; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.mh-row-chg, .mh-row-pct { font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; }
.mh-row-pct { min-width: 62px; }
.mh-row-chg { min-width: 68px; }
.mh-row-chg.pos, .mh-row-pct.pos { color: #16a34a; }
.mh-row-chg.neg, .mh-row-pct.neg { color: #dc2626; }
/* Mini chart */
.mh-chartwrap { min-width: 0; }
.mh-ranges { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px; margin-bottom: 6px; }
.mh-range {
background: transparent; border: none; cursor: pointer;
color: var(--text-tertiary); font-size: 11.5px; font-weight: 600;
padding: 3px 8px; border-radius: 5px;
transition: all 0.12s var(--ease);
}
.mh-range:hover { color: var(--text-primary); background: var(--bg-hover); }
.mh-range.active { color: #b45309; background: rgba(245,158,11,0.14); }
.mh-chart { width: 100%; height: 200px; }
/* Latest news */
.mh-news { min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.mh-news-head {
flex: 0 0 auto;
display: flex; align-items: baseline; justify-content: space-between;
border-bottom: 1px solid var(--border);
padding: 8px 2px 9px;
margin-bottom: 6px;
}
.mh-news-head span { font-size: 14px; font-weight: 700; color: var(--text-primary); }
/* Fill the remaining (markets-matched) height and scroll internally. The
min-height:0 lets this flex child shrink below its content so the news list
never forces the grid row taller than the markets column. */
.mh-news-list { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; overflow-y: auto; padding-right: 4px; }
.mh-news-item {
display: grid;
grid-template-columns: 44px minmax(0, 1fr);
gap: 10px;
align-items: baseline;
padding: 9px 4px;
border-bottom: 1px solid var(--border-subtle);
text-decoration: none;
}
.mh-news-item:last-child { border-bottom: none; }
.mh-news-item:hover .mh-news-title { color: var(--accent); }
.mh-news-time { font-size: 11.5px; font-weight: 600; color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mh-news-body { min-width: 0; }
.mh-news-title { display: block; font-size: 13px; font-weight: 500; color: var(--accent-light); line-height: 1.35; }
.mh-news-pub { display: block; font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.mh-loading { font-size: 12.5px; color: var(--text-muted); padding: 14px 6px; }
/* ===== Per-stock News tab (individual stock page) ===== */
.dd-news-head {
display: flex; align-items: baseline; justify-content: space-between;
gap: 12px; flex-wrap: wrap;
padding-bottom: 12px; margin-bottom: 6px;
border-bottom: 1px solid var(--border);
}
.dd-news-head h3 { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.dd-news-source { font-size: 11px; color: var(--text-muted); }
.dd-news-list { display: flex; flex-direction: column; }
.dd-news-item {
display: block;
padding: 13px 6px;
border-bottom: 1px solid var(--border-subtle);
text-decoration: none;
transition: background 0.12s var(--ease);
border-radius: 6px;
}
.dd-news-item:last-child { border-bottom: none; }
.dd-news-item:hover { background: var(--bg-hover); }
.dd-news-title {
display: block;
font-size: 14px; font-weight: 500; line-height: 1.4;
color: var(--text-primary);
transition: color 0.12s var(--ease);
}
.dd-news-item:hover .dd-news-title { color: var(--accent); }
.dd-news-meta {
display: block; margin-top: 4px;
font-size: 12px; color: var(--text-muted);
}
.dd-empty { padding: 28px 6px; font-size: 13px; color: var(--text-muted); text-align: center; }
/* ===== Search Trends tab (individual stock page) ===== */
.trends-stats {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
margin: 16px 0 6px;
}
@media (max-width: 640px) { .trends-stats { grid-template-columns: repeat(2, 1fr); } }
.trends-stat {
background: var(--bg-hover);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
padding: 12px 14px;
}
.trends-stat-label {
font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted);
}
.trends-stat-value {
font-size: 20px; font-weight: 700; color: var(--text-primary);
font-variant-numeric: tabular-nums; margin-top: 4px;
}
.trends-stat-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.trends-chart { width: 100%; height: 240px; margin-top: 10px; }
.trends-meta { font-size: 12px; color: var(--text-muted); margin-top: 10px; line-height: 1.5; }
/* ===== Options-implied tab (individual stock page) ===== */
.opt-stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin: 16px 0 4px;
}
@media (max-width: 640px) { .opt-stats { grid-template-columns: repeat(2, 1fr); } }
.opt-stat {
background: var(--bg-hover);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-sm);
padding: 12px 14px;
}
.opt-stat-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.opt-stat-value { font-size: 19px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; margin-top: 4px; }
.opt-stat-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.opt-insight {
margin-top: 16px;
background: var(--bg-card-solid);
border: 1px solid var(--border);
border-left: 3px solid var(--accent);
border-radius: var(--radius-sm);
padding: 14px 16px;
}
.opt-insight-head {
font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
color: var(--text-secondary); margin-bottom: 8px;
}
.opt-insight-model { font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text-muted); }
.opt-insight-body { font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); }
.opt-insight-body p { margin: 0 0 8px; }
.opt-insight-body p:last-child { margin-bottom: 0; }
.opt-insight-body ul { margin: 0; padding-left: 18px; }
.opt-insight-body li { margin-bottom: 6px; }
.opt-insight-muted { color: var(--text-muted); font-size: 13px; border-left-color: var(--border); }
.opt-insight-muted code { background: var(--bg-hover); padding: 1px 5px; border-radius: 4px; font-size: 12px; }
/* ===== Options volatility-surface heatmap ===== */
.opt-surface { margin: 20px 0 4px; }
.opt-surface-head {
display: flex; align-items: baseline; justify-content: space-between;
flex-wrap: wrap; gap: 8px; margin-bottom: 10px;
}
.opt-surface-title {
font-size: 12px; font-weight: 700; letter-spacing: .04em;
color: var(--text-primary); text-transform: uppercase;
}
.opt-surface-sub { font-size: 11.5px; color: var(--text-muted); }
.ovs-grid { display: grid; gap: 3px; }
.ovs-cell {
display: flex; align-items: center; justify-content: center;
min-height: 28px; font-size: 11px; font-variant-numeric: tabular-nums;
border-radius: 3px;
}
.ovs-iv { font-weight: 600; cursor: default; transition: transform 0.08s var(--ease); }
.ovs-iv:hover { transform: scale(1.09); position: relative; z-index: 2; box-shadow: 0 2px 10px rgba(0,0,0,0.3); }
.ovs-empty { background: var(--bg-hover); color: var(--text-muted); }
.ovs-mlabel, .ovs-dte, .ovs-corner { font-size: 10.5px; color: var(--text-muted); background: transparent; }
.ovs-dte, .ovs-corner { justify-content: flex-end; padding-right: 6px; }
.ovs-corner { font-weight: 600; }
.ovs-atm { box-shadow: inset 0 0 0 1.5px rgba(148,163,184,0.55); }
.ovs-mlabel.ovs-atm { box-shadow: none; color: var(--text-secondary); font-weight: 700; }
.ovs-legend { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ovs-legend-bar { width: 160px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #280b54, #7a1c6d, #b73779, #ed6860, #fba060, #fcfdbf); }
.ovs-legend-note { color: var(--text-muted); }
/* 3D volatility surface (Plotly) container */
.opt-surface-3d { width: 100%; height: 380px; min-height: 380px; }
/* ============ Auth: login gate, user menu, role gating ============ */
#loginOverlay {
position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 9999;
display: flex; align-items: center; justify-content: center;
background: var(--bg-primary, #0b0e14);
}
.login-card {
width: min(380px, 90vw);
background: var(--bg-card-solid, #151a23);
border: 1px solid var(--border, #232a36);
border-radius: var(--radius-lg, 16px);
padding: 32px 28px;
box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.login-brand { text-align: center; margin-bottom: 22px; }
.login-logo {
width: 48px; height: auto; margin: 0 auto 14px;
display: flex; align-items: center; justify-content: center;
color: var(--accent-light);
}
.login-logo svg { width: 100%; height: auto; display: block; }
.login-brand h1 { font-family: var(--font-serif); font-weight: 500; font-size: 23px; letter-spacing: -0.01em; margin: 0 0 5px; color: var(--text-primary); }
.login-sub { font-size: 13px; color: var(--text-muted); margin: 0; }
#loginForm { display: flex; flex-direction: column; gap: 12px; }
#loginForm input {
padding: 11px 14px; font-size: 14px;
background: var(--bg-hover, #1c2230); color: var(--text-primary);
border: 1px solid var(--border, #232a36); border-radius: var(--radius-md, 10px);
outline: none; transition: border-color 0.15s;
}
#loginForm input:focus { border-color: var(--accent, #8b5cf6); }
.login-error {
font-size: 13px; color: var(--negative, #f87171);
background: rgba(248,113,113,0.08); border-radius: 8px; padding: 8px 10px;
}
.login-submit {
margin-top: 4px; padding: 11px; font-size: 14px; font-weight: 600;
color: #fff; background: var(--accent, #8b5cf6);
border: none; border-radius: var(--radius-md, 10px); cursor: pointer;
transition: opacity 0.15s;
}
.login-submit:hover { opacity: 0.9; }
.login-submit:disabled { opacity: 0.6; cursor: default; }
.login-hint {
font-size: 12px; color: var(--text-secondary); line-height: 1.4;
background: var(--accent-dim); border-radius: 8px; padding: 8px 10px;
}
.login-switch {
margin-top: 6px; text-align: center;
font-size: 12.5px; color: var(--text-muted);
}
.login-switch-btn {
background: none; border: none; padding: 0 0 0 4px;
font-size: 12.5px; font-weight: 600; color: var(--accent-light);
cursor: pointer;
}
.login-switch-btn:hover { color: var(--accent); text-decoration: underline; }
/* ===== Basic-tier Dashboard paywall (teased Overview) ===== */
.tier-upsell {
display: flex; align-items: center; gap: 14px;
padding: 14px 18px; margin-bottom: 20px;
background: var(--accent-dim);
border: 1px solid var(--border-accent);
border-radius: var(--radius-md, 10px);
}
.tier-upsell-icon {
flex: none; width: 38px; height: 38px; border-radius: 10px;
display: flex; align-items: center; justify-content: center;
background: var(--accent); color: #fff;
}
.tier-upsell-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tier-upsell-text strong { font-size: 13.5px; color: var(--text-primary); }
.tier-upsell-text span { font-size: 12.5px; color: var(--text-secondary); line-height: 1.4; }
.tier-upsell-btn {
flex: none; margin-left: auto; padding: 9px 16px;
font-size: 13px; font-weight: 600; color: #fff;
background: var(--accent); border: none; border-radius: var(--radius-md, 10px);
cursor: pointer; transition: opacity 0.15s; white-space: nowrap;
}
.tier-upsell-btn:hover { opacity: 0.9; }
@media (max-width: 640px) {
.tier-upsell { flex-wrap: wrap; }
.tier-upsell-btn { margin-left: 0; width: 100%; }
}
/* A blurred, non-interactive Overview row — the top-ranked picks Basic can't see. */
.ov-row-locked {
filter: blur(5px);
opacity: 0.55;
cursor: default;
pointer-events: none;
user-select: none;
}
.ov-row-locked:hover { background: none; }
/* Soft veil at the head of a teased column to reinforce the "more above" cue. */
.ov-col-teased { position: relative; }
.ov-col-teased::before {
content: ""; position: absolute; left: 0; right: 0; top: 28px; height: 40px;
background: linear-gradient(var(--bg-primary), transparent);
pointer-events: none; z-index: 1;
}
/* ===== Profile dropdown (account menu in the nav) ===== */
.user-menu { position: relative; display: flex; align-items: center; }
.profile-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 32px; height: 32px; padding: 0;
background: none; border: none; border-radius: 50%; cursor: pointer;
}
.profile-btn:hover .profile-avatar { border-color: var(--border-accent); }
.profile-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.profile-avatar {
width: 28px; height: 28px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 12.5px; font-weight: 700; user-select: none;
background: var(--accent-dim); color: var(--accent-light);
border: 1px solid var(--border);
transition: border-color var(--duration) var(--ease);
}
/* Variants are keyed off the tier name (renderUserMenu builds the class from
tierKey), so every tier that can reach a user needs one. Research is teal:
below Pro's accent blue in the hierarchy, above basic's untinted default. */
.profile-avatar--research { background: rgba(6, 182, 212, 0.13); color: #5cc2d6; }
.profile-avatar--premium { background: var(--warning-dim); color: #d9b23a; }
.profile-avatar--admin { background: rgba(139, 92, 246, 0.14); color: #c4b5fd; }
:root[data-theme="light"] .profile-avatar--research { color: #0e7490; }
:root[data-theme="light"] .profile-avatar--premium { color: #8a6d1d; }
:root[data-theme="light"] .profile-avatar--admin { color: #6d28d9; }
.profile-menu {
position: absolute; top: calc(100% + 10px); right: 0; z-index: 300;
min-width: 224px; padding: 6px;
background: var(--bg-card-solid); border: 1px solid var(--border);
border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
}
.profile-menu-head { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px 9px; }
.profile-menu-email {
font-size: 12.5px; font-weight: 600; color: var(--text-primary);
max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.profile-menu-tier {
align-self: flex-start; font-size: 10px; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.05em;
padding: 2px 8px; border-radius: 999px;
background: var(--bg-hover); color: var(--text-tertiary); border: 1px solid var(--border);
}
.profile-menu-tier--research { background: rgba(6, 182, 212, 0.13); color: #5cc2d6; border-color: transparent; }
.profile-menu-tier--pro { background: var(--accent-dim); color: var(--accent-light); border-color: transparent; }
.profile-menu-tier--premium { background: var(--warning-dim); color: #d9b23a; border-color: transparent; }
.profile-menu-tier--admin { background: rgba(139, 92, 246, 0.14); color: #c4b5fd; border-color: transparent; }
:root[data-theme="light"] .profile-menu-tier--research { color: #0e7490; }
:root[data-theme="light"] .profile-menu-tier--premium { color: #8a6d1d; }
:root[data-theme="light"] .profile-menu-tier--admin { color: #6d28d9; }
.profile-menu-sep { height: 1px; background: var(--border); margin: 2px 6px 4px; }
.profile-menu-item {
display: flex; align-items: center; gap: 9px; width: 100%;
padding: 8px 10px; font-size: 13px; font-weight: 500; font-family: inherit;
color: var(--text-secondary); background: none; border: none;
border-radius: 8px; cursor: pointer; text-align: left;
transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.profile-menu-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.profile-menu-item svg { flex: none; opacity: 0.75; }
.profile-menu-item--upgrade { color: var(--accent-light); font-weight: 600; }
.profile-menu-item--upgrade:hover { color: var(--accent-light); }
/* Belt-and-suspenders for dynamically-rendered admin controls that carry the
class (JS also removes id-based ones outright for consumers). */
body.role-consumer .admin-only { display: none !important; }
.opt-quota-chip {
float: right; font-size: 11px; font-weight: 500;
color: var(--text-muted); background: var(--bg-hover, #1c2230);
padding: 2px 8px; border-radius: 999px;
}
.brief-pending {
font-size: 13px; color: var(--text-secondary);
background: rgba(139,92,246,0.06); border: 1px solid rgba(139,92,246,0.14);
border-radius: var(--radius-md, 10px); padding: 12px 16px; margin-bottom: 16px;
}
/* ===== Sector Outlook card (stock-detail page; sector deep-research) ===== */
.sector-outlook {
margin: 18px 0 4px; background: var(--bg-card-solid);
border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
}
.so-head {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; padding: 14px 18px; cursor: pointer; user-select: none;
}
.so-head:hover { background: var(--bg-hover, #1c2230); }
.so-title { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 650; color: var(--text-primary); }
.sector-outlook.so-stance-pos { border-left: 3px solid var(--positive); }
.sector-outlook.so-stance-neg { border-left: 3px solid var(--negative); }
.sector-outlook.so-stance-neu { border-left: 3px solid rgba(148,163,184,0.40); }
.so-head-right { display: flex; align-items: center; gap: 12px; }
.so-badge {
font-size: 11.5px; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap;
padding: 4px 10px; border-radius: 999px; border: 1px solid transparent;
}
.so-badge.so-pos { color: var(--positive); background: rgba(34,197,94,0.12); border-color: rgba(34,197,94,0.25); }
.so-badge.so-neg { color: var(--negative); background: rgba(239,68,68,0.12); border-color: rgba(239,68,68,0.25); }
.so-badge.so-neu { color: var(--text-secondary); background: rgba(148,163,184,0.12); border-color: rgba(148,163,184,0.22); }
.so-toggle { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-light); font-size: 12px; font-weight: 650; white-space: nowrap; }
.so-toggle-txt::before { content: 'Show details'; }
.sector-outlook.open .so-toggle-txt::before { content: 'Hide details'; }
.so-chevron {
width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
transform: rotate(45deg) translateY(-1px); transition: transform 0.18s ease;
}
.sector-outlook.open .so-chevron { transform: rotate(-135deg) translateY(1px); }
.so-head:hover .so-toggle { color: var(--accent); }
.so-head:hover .so-toggle-txt { text-decoration: underline; }
.so-body { padding: 0 18px 16px; }
.so-summary { font-size: 13.5px; line-height: 1.55; color: var(--text-secondary); margin: 2px 0 0; }
.so-expand { display: none; margin-top: 12px; }
.sector-outlook.open .so-expand { display: block; }
.so-sub { margin-top: 12px; }
.so-sub h5 { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin: 0 0 6px; }
.so-list { margin: 0; padding-left: 18px; }
.so-list li { font-size: 13px; line-height: 1.5; color: var(--text-secondary); margin-bottom: 4px; }
.so-list.so-cat li::marker { color: var(--positive); }
.so-list.so-risk li::marker { color: var(--negative); }
.so-meta { font-size: 11px; color: var(--text-muted); margin-top: 12px; }
/* teaser (basic tier) */
.so-blur { filter: blur(4px); user-select: none; pointer-events: none; }
.so-upgrade {
margin-top: 12px; display: inline-block; cursor: pointer; font-size: 12.5px; font-weight: 650;
color: var(--accent-light); background: var(--accent-dim); border: 1px solid var(--border-accent);
border-radius: 8px; padding: 8px 14px;
}
.so-upgrade:hover { background: var(--accent); color: #fff; }
/* ===== Admin Site Analytics view ===== */
.an-wrap { max-width: 1100px; margin: 0 auto; padding: 8px 0 40px; }
.an-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.an-head h2 { margin: 0; font-size: 20px; color: var(--text-primary); }
.an-sub { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-left: 10px; font-weight: 600; }
.an-range { background: var(--bg-card-solid); color: var(--text-primary); border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; font-size: 13px; }
.an-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.an-kpi { background: var(--bg-card-solid); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
.an-kpi-val { font-size: 26px; font-weight: 700; color: var(--text-primary); line-height: 1.1; }
.an-kpi-label { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.an-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.an-card { background: var(--bg-card-solid); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; }
.an-card h3 { margin: 0 0 12px; font-size: 12px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.04em; }
.an-row { margin-bottom: 9px; }
.an-row-top { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; margin-bottom: 3px; }
.an-row-label { color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-row-val { color: var(--text-muted); white-space: nowrap; }
.an-bar { height: 6px; background: var(--bg-hover, #1c2230); border-radius: 999px; overflow: hidden; }
.an-bar-fill { height: 100%; background: var(--accent); border-radius: 999px; }
.an-empty { font-size: 12.5px; color: var(--text-muted); padding: 4px 0; }
.an-note { font-size: 12px; color: var(--text-muted); margin-top: 18px; line-height: 1.5; }
.an-section-h { font-size: 13px; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin: 26px 0 12px; }
.an-section-h:first-of-type { margin-top: 4px; }
/* Accounts / recent-signups list */
.acct-list { display: flex; flex-direction: column; max-height: 420px; overflow-y: auto; }
.acct-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 2px; border-bottom: 1px solid var(--border-subtle); }
.acct-row:last-child { border-bottom: none; }
.acct-email { font-size: 13px; color: var(--text-primary); font-family: var(--font-mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-meta { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.acct-date { font-size: 11.5px; color: var(--text-muted); font-variant-numeric: tabular-nums; min-width: 92px; text-align: right; }
.acct-badge { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 7px; border-radius: 999px; background: var(--bg-hover); color: var(--text-tertiary); border: 1px solid var(--border); }
/* Admin accounts list builds this class from u.tier, so a Research subscriber
renders acct-badge--research — without it the badge falls back to the neutral
base and a paying account reads as free. */
.acct-badge--research { background: rgba(6, 182, 212, 0.13); color: #5cc2d6; border-color: transparent; }
.acct-badge--pro { background: var(--accent-dim); color: var(--accent-light); border-color: transparent; }
.acct-badge--premium { background: var(--warning-dim); color: #d9b23a; border-color: transparent; }
:root[data-theme="light"] .acct-badge--research { color: #0e7490; }
:root[data-theme="light"] .acct-badge--premium { color: #8a6d1d; }
.acct-badge--admin { background: rgba(139, 92, 246, 0.14); color: #c4b5fd; border-color: transparent; }
:root[data-theme="light"] .acct-badge--admin { color: #6d28d9; }
.acct-badge--off { background: var(--negative-dim); color: var(--negative); border-color: transparent; }
/* Subscribers panel: All / Active / Unsubscribed segmented filter */
.sub-filter { display: inline-flex; gap: 4px; }
.sub-filter-btn { font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 999px; cursor: pointer;
background: transparent; color: var(--text-tertiary); border: 1px solid var(--border);
transition: color var(--duration) var(--ease), background var(--duration) var(--ease), border-color var(--duration) var(--ease); }
.sub-filter-btn:hover { color: var(--text-secondary); border-color: var(--border-accent, var(--border)); }
.sub-filter-btn.active { background: var(--bg-active); color: var(--text-primary); border-color: transparent; }
@media (max-width: 720px) { .an-kpis { grid-template-columns: repeat(2, 1fr); } .an-grid { grid-template-columns: 1fr; } }
/* ===== Login recovery (forgot password / magic sign-in link) ===== */
.login-recover { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.login-recover-sep { color: var(--text-muted); font-size: 12px; }
.login-link-btn { background: none; border: none; color: var(--accent-light); font-size: 12.5px; cursor: pointer; padding: 2px 4px; }
.login-link-btn:hover { text-decoration: underline; color: var(--accent); }
.login-error.login-info { color: var(--text-secondary); background: var(--accent-dim); border: 1px solid var(--border-accent); }
/* ===== Guest daily-briefing opt-in modal ===== */
.bopt-overlay { position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(2,6,15,.66); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.bopt-card { position: relative; max-width: 420px; width: 100%; background: var(--bg-card-solid, #0f172a); border: 1px solid var(--border, rgba(148,163,184,.14)); border-radius: 16px; padding: 34px 30px; box-shadow: 0 30px 80px -20px rgba(0,0,0,.6); text-align: center; }
.bopt-x { position: absolute; top: 12px; right: 14px; background: none; border: none; color: var(--text-muted, #64748b); font-size: 22px; line-height: 1; cursor: pointer; }
.bopt-eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--accent-light, #7ea6e6); font-weight: 600; margin-bottom: 10px; }
.bopt-title { font-size: 22px; font-weight: 700; color: var(--text-primary, #e2e8f0); margin: 0 0 8px; }
.bopt-sub { font-size: 14px; color: var(--text-secondary, #94a3b8); line-height: 1.5; margin: 0 0 20px; }
.bopt-form { display: flex; flex-direction: column; gap: 10px; }
.bopt-form input { width: 100%; padding: 12px 14px; border-radius: 9px; border: 1px solid var(--border, rgba(148,163,184,.2)); background: var(--bg-input, #0b1019); color: var(--text-primary, #e2e8f0); font-size: 14px; }
.bopt-submit { padding: 12px 14px; border-radius: 9px; border: none; background: var(--accent, #5b8ad6); color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; }
.bopt-submit:hover { background: var(--accent-light, #7ea6e6); }
.bopt-msg { font-size: 14px; color: var(--positive, #46be8e); line-height: 1.5; padding: 8px 0; }
.bopt-skip { margin-top: 14px; background: none; border: none; color: var(--text-muted, #64748b); font-size: 13px; cursor: pointer; }
.bopt-skip:hover { color: var(--text-secondary, #94a3b8); text-decoration: underline; }
/* ── Jump-model regime overlay banner (1-month portfolio) ─────────────────
The overlay scales every target weight by a net-exposure multiplier and
parks the remainder in cash. Left invisible, that made the book's weights
look like they disagreed with the debate that set them. */
.pf-regime {
margin-top: 16px;
padding: 14px 16px;
background: var(--bg-card);
border: 1px solid var(--border);
border-left: 3px solid var(--text-muted);
border-radius: var(--radius-md);
}
.pf-regime.is-on { border-left-color: var(--positive); }
.pf-regime.is-neutral { border-left-color: var(--warning); }
.pf-regime.is-off { border-left-color: var(--negative); }
.pf-regime.is-degraded { border-left-color: var(--negative); background: var(--negative-dim); }
.pf-regime-head {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 10px;
}
.pf-regime-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: currentColor;
align-self: center;
flex: none;
}
.pf-regime.is-on .pf-regime-dot { background: var(--positive); }
.pf-regime.is-neutral .pf-regime-dot { background: var(--warning); }
.pf-regime.is-off .pf-regime-dot,
.pf-regime.is-degraded .pf-regime-dot { background: var(--negative); }
.pf-regime-state { font-weight: 650; font-size: 14px; }
.pf-regime-mult {
font-variant-numeric: tabular-nums;
font-size: 13px;
font-weight: 600;
color: var(--text-muted);
}
.pf-regime-meta {
margin-left: auto;
font-size: 12px;
color: var(--text-muted);
}
.pf-regime-detail { margin-top: 6px; font-size: 12.5px; color: var(--text-muted); }
.pf-regime-drift { margin-top: 6px; font-size: 12.5px; color: var(--warning); }
@media (max-width: 640px) {
.pf-regime-meta { margin-left: 0; flex-basis: 100%; }
}
/* ============================================================
TOOLKITS — downloadable code repositories
Three surfaces, one visual language:
.repo-section Research view, expandable cards (paid + admin)
.repo-teaser Dashboard, locked teaser (Basic only)
.repo-admin upload / edit / publish / delete (admin only)
All colour comes from the shared tokens, so light mode follows
automatically; only the hand-picked danger/gold hues are re-stated
under :root[data-theme="light"].
============================================================ */
.repo-section { margin-top: 46px; }
.repo-head { margin-bottom: 14px; }
.repo-head h3 {
font-family: var(--font-serif); font-weight: 500; font-size: 21px;
letter-spacing: -0.01em; color: var(--text-primary); margin: 0 0 4px;
}
.repo-head p { font-size: 13px; color: var(--text-secondary); margin: 0; }
.repo-list { display: flex; flex-direction: column; gap: 12px; }
/* ---------- The card ---------- */
.repo-card {
background: var(--bg-card-solid);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
transition: border-color var(--duration) var(--ease);
}
.repo-card:hover { border-color: var(--border-accent); }
.repo-card--open { border-color: var(--border-accent); }
.repo-card-top {
display: flex; align-items: center; gap: 16px;
padding: 16px 18px; flex-wrap: wrap;
}
/* The whole header is the expand target; the download link lives outside it so
a click on "Download" never also toggles the card. */
.repo-card-head {
display: flex; align-items: center; gap: 12px;
flex: 1 1 320px; min-width: 0; cursor: pointer; user-select: none;
}
.repo-card-head:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--radius-sm); }
.repo-chev {
flex: none; color: var(--text-muted);
transition: transform var(--duration) var(--ease), color var(--duration) var(--ease);
}
.repo-card-head:hover .repo-chev { color: var(--text-secondary); }
.repo-card--open .repo-chev { transform: rotate(90deg); color: var(--accent-light); }
.repo-card-copy { min-width: 0; flex: 1; }
.repo-card-title {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
font-size: 14.5px; font-weight: 700; color: var(--text-primary); margin-bottom: 3px;
}
/* Collapsed: two lines max, so a long README paragraph cannot turn the closed
card into a wall of text (and, on a narrow screen, cannot squeeze the title
column down to one word per line). Expanded: the whole summary. */
.repo-card-sum {
font-size: 12.5px; color: var(--text-secondary); line-height: 1.5;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.repo-card--open .repo-card-sum { display: block; -webkit-line-clamp: none; overflow: visible; }
.repo-card-chips { display: flex; gap: 6px; flex: none; flex-wrap: wrap; }
.repo-chip {
font-family: var(--font-mono); font-size: 10.5px; font-weight: 500;
padding: 3px 9px; border-radius: 999px; white-space: nowrap;
background: var(--bg-hover); color: var(--text-tertiary);
border: 1px solid var(--border);
}
.repo-draft-pill {
font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
padding: 3px 9px; border-radius: 999px;
background: var(--warning-dim); color: #d9b23a;
}
:root[data-theme="light"] .repo-draft-pill { color: #8a6d1d; }
/* ---------- Download / locked action ---------- */
.repo-card-action { flex: none; margin-left: auto; }
.repo-dl {
display: inline-flex; align-items: center; gap: 9px;
padding: 10px 18px; font-size: 13px; font-weight: 600;
color: #fff; background: var(--accent); border-radius: var(--radius-md, 10px);
text-decoration: none; transition: opacity 0.15s;
}
.repo-dl:hover { opacity: 0.9; }
.repo-dl svg { flex: none; }
.repo-locked { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* Same neutral "not yours yet" treatment as .plan-soon / .nav-tab-locked. */
.repo-lock-chip {
display: inline-flex; align-items: center; gap: 5px;
font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em;
padding: 4px 10px; border-radius: 999px; white-space: nowrap;
background: var(--bg-hover); color: var(--text-muted); border: 1px solid var(--border);
}
.repo-unlock-btn {
padding: 10px 18px; font-size: 13px; font-weight: 600; font-family: inherit;
color: #fff; background: var(--accent); border: none;
border-radius: var(--radius-md, 10px); cursor: pointer;
transition: opacity 0.15s; white-space: nowrap;
}
.repo-unlock-btn:hover { opacity: 0.9; }
/* ---------- Expanded body ---------- */
.repo-card-body {
padding: 4px 18px 18px;
border-top: 1px solid var(--border-subtle);
}
.repo-desc {
font-size: 13px; line-height: 1.6; color: var(--text-secondary);
white-space: pre-wrap; margin: 14px 0 0;
}
.repo-exts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.repo-ext {
display: inline-flex; align-items: baseline; gap: 6px;
font-family: var(--font-mono); font-size: 10.5px;
padding: 3px 9px; border-radius: 6px;
background: var(--bg-hover); color: var(--text-tertiary); border: 1px solid var(--border);
}
.repo-ext b { color: var(--text-secondary); font-weight: 600; }
.repo-tree-wrap { margin-top: 16px; }
.repo-tree-label {
font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
color: var(--text-muted); margin-bottom: 6px;
}
.repo-tree-label span { font-weight: 500; letter-spacing: 0.04em; opacity: 0.75; }
/* Its own scroll box: a 2,000-file archive must not stretch the card. */
.repo-tree {
max-height: 260px; overflow: auto;
background: var(--bg-hover); border: 1px solid var(--border);
border-radius: var(--radius-sm); padding: 6px 0;
}
.repo-tree-row {
display: flex; align-items: center; gap: 10px;
padding: 2px 12px 2px 12px;
font-family: var(--font-mono); font-size: 11.5px; line-height: 1.7;
color: var(--text-secondary);
}
.repo-tree-row--root { color: var(--text-primary); font-weight: 600; }
.repo-tree-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.repo-tree-name--dir { color: var(--accent-light); }
.repo-tree-here { font-size: 10px; color: var(--text-muted); white-space: nowrap; }
.repo-tree-n {
margin-left: auto; flex: none; font-size: 10.5px;
color: var(--text-tertiary); font-variant-numeric: tabular-nums;
}
.repo-integrity {
margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-subtle);
font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); line-height: 1.7;
word-break: break-word;
}
@media (max-width: 760px) {
.repo-card-top { gap: 12px; }
.repo-card-action { margin-left: 0; width: 100%; }
.repo-dl, .repo-unlock-btn { width: 100%; justify-content: center; text-align: center; }
/* Chips drop onto their own line (indented past the chevron) instead of
competing with the title for a 340px row. */
.repo-card-head { flex-wrap: wrap; }
.repo-card-copy { flex: 1 1 180px; }
.repo-card-chips { flex: 1 0 100%; padding-left: 27px; }
.repo-locked { width: 100%; }
}
/* ============================================================
Dashboard teaser (Basic only). Sits directly above the Overview's
.tier-upsell banner and borrows its accent-dim frame so the two
read as one upsell block rather than two competing ones.
============================================================ */
.repo-teaser {
margin-bottom: 12px; padding: 16px 18px;
background: var(--accent-dim);
border: 1px solid var(--border-accent);
border-radius: var(--radius-md, 10px);
}
.repo-teaser-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.repo-teaser-eyebrow {
display: inline-flex; align-items: center; gap: 6px;
font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
color: var(--text-primary);
}
.repo-teaser-eyebrow svg { color: var(--accent-light); }
.repo-teaser-sub { font-size: 12.5px; color: var(--text-secondary); line-height: 1.4; }
.repo-teaser-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px;
}
.repo-teaser-card {
display: flex; flex-direction: column; gap: 6px;
padding: 13px 14px; background: var(--bg-card-solid);
border: 1px solid var(--border); border-radius: var(--radius-md, 10px);
}
.repo-teaser-title { font-size: 13.5px; font-weight: 700; color: var(--text-primary); }
.repo-teaser-summary {
font-size: 12px; color: var(--text-secondary); line-height: 1.45; flex: 1;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.repo-teaser-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.repo-teaser-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 7px;
margin-top: 4px; padding: 9px 12px; width: 100%;
font-size: 12.5px; font-weight: 600; font-family: inherit;
color: #fff; background: var(--accent); border: none;
border-radius: var(--radius-md, 10px); cursor: pointer; transition: opacity 0.15s;
}
.repo-teaser-btn:hover { opacity: 0.9; }
/* ============================================================
Admin panel
============================================================ */
.repo-admin {
margin-bottom: 18px; padding: 16px 18px;
background: var(--bg-card-solid);
border: 1px dashed var(--border-accent);
border-radius: var(--radius-lg);
}
.repo-admin-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.repo-admin-title {
font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
color: var(--text-tertiary);
}
/* The Render disk is 2 GB TOTAL and shared with users.sqlite — this number is
deliberately at the top of the panel, not buried in a tooltip. */
.repo-admin-disk {
margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary);
}
.repo-admin-meter {
height: 4px; margin: 8px 0 14px; border-radius: 999px;
background: var(--bg-hover); overflow: hidden;
}
.repo-admin-meter > span { display: block; height: 100%; background: var(--accent); border-radius: 999px; }
.repo-admin-meter.is-tight > span { background: var(--negative); }
.repo-admin-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.repo-admin-field { display: flex; flex-direction: column; gap: 4px; }
.repo-admin-field label {
font-size: 10px; font-weight: 600; text-transform: uppercase;
letter-spacing: 0.06em; color: var(--text-muted);
}
.repo-admin-field input[type="text"] {
width: 220px; padding: 7px 10px; font-size: 13px; font-family: var(--font-mono);
background: var(--bg-input); color: var(--text-primary);
border: 1px solid var(--border); border-radius: 8px;
}
.repo-admin-field input[type="text"]:focus { outline: none; border-color: var(--accent); }
.repo-admin-field input.is-bad { border-color: var(--negative); }
.repo-admin-field--file { flex: 1 1 260px; }
.repo-admin-field input[type="file"] {
font-size: 12px; color: var(--text-secondary);
padding: 6px 0; max-width: 100%;
}
.repo-admin-field input[type="file"]::file-selector-button {
margin-right: 10px; padding: 6px 12px; font-size: 12px; font-weight: 600; font-family: inherit;
color: var(--text-secondary); background: var(--bg-hover);
border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
}
.repo-admin-field input[type="file"]::file-selector-button:hover { color: var(--text-primary); }
.repo-admin-msg {
display: flex; flex-direction: column; gap: 7px;
margin-top: 12px; padding: 9px 12px; border-radius: var(--radius-sm);
font-size: 12.5px; line-height: 1.5;
background: var(--bg-hover); color: var(--text-secondary); border: 1px solid var(--border);
}
.repo-admin-msg--ok { background: var(--positive-dim); border-color: rgba(34,197,94,0.25); color: var(--text-primary); }
.repo-admin-msg--err { background: var(--negative-dim); border-color: rgba(239,68,68,0.28); color: var(--text-primary); }
.repo-admin-msg--busy { background: var(--accent-dim); border-color: var(--border-accent); color: var(--text-primary); }
/* Indeterminate: fetch() cannot report upload progress, so this says "working"
rather than lying about a percentage. */
.repo-admin-bar { position: relative; display: block; height: 3px; border-radius: 999px; background: var(--bg-hover); overflow: hidden; }
.repo-admin-bar i { position: absolute; top: 0; bottom: 0; width: 35%; border-radius: 999px; background: var(--accent); animation: repoBarSlide 1.1s var(--ease) infinite; }
@keyframes repoBarSlide { from { left: -35%; } to { left: 100%; } }
/* ---------- Sensitive-content refusal ---------- */
.repo-sensitive {
margin-top: 12px; padding: 14px 16px; border-radius: var(--radius-md, 10px);
background: var(--negative-dim); border: 1px solid rgba(239,68,68,0.35);
}
.repo-sens-head { font-size: 13.5px; font-weight: 700; color: var(--negative); margin-bottom: 10px; }
:root[data-theme="light"] .repo-sens-head { color: #b91c1c; }
.repo-sens-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.repo-sens-list li {
display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
font-size: 12.5px; color: var(--text-secondary); line-height: 1.5;
}
.repo-sens-list code {
font-family: var(--font-mono); font-size: 11.5px; font-weight: 600;
padding: 2px 7px; border-radius: 6px;
background: var(--bg-card-solid); color: var(--text-primary); border: 1px solid var(--border);
}
.repo-sens-why { color: var(--text-secondary); }
.repo-sens-ex {
font-family: var(--font-mono); font-size: 11px; color: var(--text-muted);
word-break: break-all;
}
.repo-sens-hint { font-size: 12px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 8px; }
.repo-sens-warn { font-size: 12.5px; font-weight: 600; color: var(--text-primary); line-height: 1.5; margin-bottom: 12px; }
.repo-sens-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.repo-sens-force, .repo-danger {
background: var(--negative); color: #fff; border: 1px solid var(--negative);
}
.repo-sens-force:hover, .repo-danger:hover { filter: brightness(1.08); }
.repo-danger-ghost { color: var(--negative); }
/* ---------- Edit form ---------- */
.repo-edit {
margin-top: 12px; padding: 14px 16px; border-radius: var(--radius-md, 10px);
background: var(--bg-hover); border: 1px solid var(--border);
}
.repo-edit-head { font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 12px; }
.repo-edit-head code { font-family: var(--font-mono); color: var(--accent-light); }
.repo-edit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.repo-edit-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.repo-edit-field--wide { grid-column: span 1; }
.repo-edit-field--full { grid-column: 1 / -1; }
.repo-edit-field > span, .repo-edit-check > span {
font-size: 10px; font-weight: 600; text-transform: uppercase;
letter-spacing: 0.06em; color: var(--text-muted);
}
.repo-edit-field em, .repo-edit-check em {
font-style: normal; text-transform: none; letter-spacing: 0; opacity: 0.8;
}
.repo-edit-field input, .repo-edit-field select, .repo-edit-field textarea {
width: 100%; padding: 8px 10px; font-size: 13px; font-family: inherit;
background: var(--bg-input); color: var(--text-primary);
border: 1px solid var(--border); border-radius: 8px; resize: vertical;
}
.repo-edit-field input:focus, .repo-edit-field select:focus, .repo-edit-field textarea:focus {
outline: none; border-color: var(--accent);
}
.repo-edit-check { display: flex; align-items: center; gap: 8px; align-self: end; padding-bottom: 8px; }
.repo-edit-check input { accent-color: var(--accent); cursor: pointer; }
.repo-edit-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }
.repo-edit-msg { margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: var(--text-secondary); }
.repo-edit-msg--err { color: var(--negative); }
@media (max-width: 640px) { .repo-edit-grid { grid-template-columns: 1fr; } }
/* ---------- Existing toolkits (admin list; includes unpublished) ---------- */
.repo-admin-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.repo-admin-empty { font-size: 12.5px; color: var(--text-muted); padding: 6px 0; }
.repo-admin-row-item {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
padding: 10px 12px; border-radius: var(--radius-sm);
background: var(--bg-hover); border: 1px solid var(--border);
}
.repo-admin-row-item.is-armed { border-color: rgba(239,68,68,0.45); background: var(--negative-dim); }
.repo-admin-item-copy { min-width: 0; flex: 1 1 240px; }
.repo-admin-item-title {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 3px;
}
.repo-admin-item-meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.repo-admin-item-meta code { color: var(--text-secondary); }
.repo-admin-item-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; }
.repo-confirm { font-size: 12.5px; color: var(--text-primary); }
.repo-confirm b { font-family: var(--font-mono); }
.repo-state {
font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
padding: 2px 8px; border-radius: 999px;
}
.repo-state--live { background: var(--positive-dim); color: var(--positive); }
.repo-state--draft { background: var(--bg-active); color: var(--text-muted); }
:root[data-theme="light"] .repo-state--live { color: #15803d; }
@media (max-width: 640px) {
.repo-admin-field input[type="text"] { width: 100%; }
.repo-admin-field { flex: 1 1 100%; }
.repo-admin-item-actions { margin-left: 0; width: 100%; }
}
/* ---------- Signup nudge (logged-out, after a few stock views) ----------
Deliberately an inline strip, not a modal: it replaced a hard 3-view wall, and
the whole point is that it never blocks the thing the visitor came to read. */
.signup-nudge {
display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
margin: 0 0 18px; padding: 14px 18px;
border: 1px solid var(--border-accent); border-radius: var(--radius-md, 10px);
background: linear-gradient(180deg, var(--bg-secondary), var(--bg-card-solid));
}
.signup-nudge .nudge-body { flex: 1; min-width: 260px; font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); }
.signup-nudge .nudge-body b { color: var(--text-primary); font-weight: 600; }
.signup-nudge .nudge-actions { display: flex; align-items: center; gap: 8px; }
.signup-nudge .nudge-x {
background: none; border: none; color: var(--text-muted); font-size: 20px;
line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 6px;
}
.signup-nudge .nudge-x:hover { color: var(--text-primary); background: var(--bg-hover); }