/* === RESET & BASE === */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 13px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg-primary); color: var(--text-primary); min-height: 100vh; display: flex; flex-direction: column; } /* === COLORS === * Theme tokens — R2 (theme system, 2026-06-23). * Universal tokens (brand accent, signal colors, fonts) live in :root. * Surface/text/border tokens are scoped to :root[data-theme="dark"] and * :root[data-theme="light"]. The boot script in index.html sets the * data-theme attribute on before stylesheets load to avoid FOUC. * Defaults to dark when no attribute is set (back-compat). */ :root { /* Verra brand accent — locked by user for the R1 rebrand (2026-06-23). */ --accent: #1E7BFF; --accent-dim: #0E5BD0; --green: #22c55e; --green-dim: rgba(34,197,94,0.12); --red: #ef4444; --red-dim: rgba(239,68,68,0.12); --yellow: #eab308; --yellow-dim: rgba(234,179,8,0.12); --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Mono', monospace; --font-sans: 'Inter', -apple-system, sans-serif; /* Dark theme defaults — used when no data-theme attribute is present * on . This preserves the pre-R2 look for anyone whose boot * script hasn't run (e.g., during a stale-cache load). */ --bg-primary: #0a0e17; --bg-surface: #111827; --bg-surface-alt: #151b2b; --bg-hover: #1a2035; --bg-header: #0d1220; --text-primary: #e5e7eb; --text-secondary: #9ca3af; --text-muted: #6b7280; --border: #1e293b; --border-light: #374151; } :root[data-theme="dark"] { --bg-primary: #0a0e17; --bg-surface: #111827; --bg-surface-alt: #151b2b; --bg-hover: #1a2035; --bg-header: #0d1220; --text-primary: #e5e7eb; --text-secondary: #9ca3af; --text-muted: #6b7280; --border: #1e293b; --border-light: #374151; } :root[data-theme="light"] { --bg-primary: #ffffff; --bg-surface: #f8fafc; --bg-surface-alt: #f1f5f9; --bg-hover: #e2e8f0; --bg-header: #ffffff; --text-primary: #0f172a; --text-secondary: #475569; --text-muted: #94a3b8; --border: #e2e8f0; --border-light: #cbd5e1; } /* === HEADER === */ .app-header { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; background: var(--bg-header); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; gap: 16px; flex-shrink: 0; } .header-left { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .logo-text { font-family: var(--font-mono); font-weight: 700; font-size: 15px; color: var(--accent); letter-spacing: -0.5px; } .add-ticker-group { display: flex; align-items: center; gap: 6px; } .add-ticker-group input { background: var(--bg-primary); border: 1px solid var(--border); color: var(--text-primary); font-family: var(--font-sans); font-size: 12px; padding: 6px 10px; border-radius: 3px; width: 220px; outline: none; transition: border-color 0.15s; } .add-ticker-group input:focus { border-color: var(--accent); } .add-ticker-group input::placeholder { color: var(--text-muted); } .btn-sm { background: var(--accent); color: #fff; border: none; font-family: var(--font-sans); font-size: 11px; font-weight: 600; padding: 5px 12px; border-radius: 3px; cursor: pointer; white-space: nowrap; transition: background 0.15s; } .btn-sm:hover { background: var(--accent-dim); } /* === SEARCH AUTOCOMPLETE === */ .search-wrapper { position: relative; } .search-wrapper input { width: 220px; } .search-dropdown { display: none; position: absolute; top: calc(100% + 2px); left: 0; width: 320px; max-height: 280px; overflow-y: auto; background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: 4px; z-index: 200; box-shadow: 0 8px 24px rgba(0,0,0,0.5); } .search-dropdown.active { display: block; } .search-dropdown-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; cursor: pointer; transition: background 0.1s; border-bottom: 1px solid var(--border); } .search-dropdown-item:last-child { border-bottom: none; } .search-dropdown-item:hover, .search-dropdown-item.active { background: var(--bg-hover); } .search-dropdown-symbol { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--accent); min-width: 52px; } .search-dropdown-name { font-size: 11px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; } .search-dropdown-exchange { font-size: 10px; color: var(--text-muted); flex-shrink: 0; } .search-dropdown-action { font-size: 10px; font-weight: 600; color: var(--accent); flex-shrink: 0; white-space: nowrap; } .search-dropdown-action-add { color: var(--text-muted); } .search-dropdown-empty { padding: 10px; font-size: 11px; color: var(--text-muted); text-align: center; } .search-dropdown-loading { padding: 10px; font-size: 11px; color: var(--text-muted); text-align: center; } .header-right { flex-shrink: 0; } .header-meta { display: flex; align-items: center; gap: 14px; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); } .total-mcap { color: var(--text-secondary); font-weight: 500; } .refresh-timer { color: var(--accent); } /* === TAB BAR === */ .tab-bar { display: flex; align-items: center; gap: 0; background: var(--bg-header); border-bottom: 1px solid var(--border); position: sticky; top: 41px; /* header height */ z-index: 90; padding: 0 12px; flex-shrink: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .tab-bar::-webkit-scrollbar { display: none; } .tab-btn { display: flex; align-items: center; gap: 6px; padding: 10px 16px; background: none; border: none; border-bottom: 2px solid transparent; color: var(--text-muted); font-family: var(--font-sans); font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap; transition: color 0.15s, border-color 0.15s; position: relative; } .tab-btn svg { flex-shrink: 0; opacity: 0.6; transition: opacity 0.15s; } .tab-btn:hover { color: var(--text-secondary); } .tab-btn:hover svg { opacity: 0.8; } .tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); } .tab-btn.active svg { opacity: 1; } /* === TAB PANES === */ .tab-pane { display: none; } .tab-pane.active { display: block; } /* === MAIN CONTENT === */ .main-content { flex: 1; padding: 0; position: relative; } .table-wrapper { overflow-x: auto; overflow-y: auto; -webkit-overflow-scrolling: touch; /* Fill remaining viewport height so thead sticks inside this container */ max-height: calc(100vh - var(--table-top-offset, 130px)); max-height: calc(100dvh - var(--table-top-offset, 130px)); } .table-wrapper::-webkit-scrollbar { height: 6px; width: 6px; } .table-wrapper::-webkit-scrollbar-track { background: var(--bg-primary); } .table-wrapper::-webkit-scrollbar-thumb { background: var(--border-light); border-radius: 3px; } /* === TABLE === */ .watchlist-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; table-layout: fixed; min-width: 1360px; } .watchlist-table thead th { position: sticky; top: 0; background: var(--bg-header); border-bottom: 2px solid var(--border); padding: 6px 8px; text-align: left; font-family: var(--font-sans); font-weight: 600; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); white-space: nowrap; cursor: default; user-select: none; z-index: 10; } .watchlist-table thead th.num { text-align: right; } .watchlist-table thead th.sortable { cursor: pointer; } .watchlist-table thead th.sortable:hover { color: var(--accent); } .watchlist-table thead th .sort-arrow { font-size: 9px; margin-left: 2px; opacity: 0.6; } .watchlist-table thead th.sort-active { color: var(--accent); } .watchlist-table thead th.sort-active .sort-arrow { opacity: 1; } /* Column widths */ .col-ticker { width: 72px; min-width: 72px; } .col-name { width: 150px; } .col-subsector { width: 130px; } .col-price { width: 68px; } .col-mcap { width: 74px; } .col-ev { width: 68px; } .col-ev-sales { width: 76px; } .col-ev-fcf { width: 76px; } .col-perf { width: 66px; } .col-remove { width: 24px; } /* Pinned first column (Ticker) */ .watchlist-table:not(.private-table) thead th.col-ticker, .watchlist-table:not(.private-table) tbody td.cell-ticker { position: sticky; left: 0; z-index: 5; } .watchlist-table:not(.private-table) thead th.col-ticker { z-index: 15; /* above both sticky-top headers and sticky-left cells */ background: var(--bg-header); } .watchlist-table:not(.private-table) tbody td.cell-ticker { background: var(--bg-primary); } .watchlist-table:not(.private-table) tbody tr:nth-child(even) td.cell-ticker { background: var(--bg-surface-alt); /* theme-aware even-row tint for sticky ticker cell */ } .watchlist-table:not(.private-table) tbody tr:hover td.cell-ticker { background: var(--bg-hover); } /* Subtle right border on pinned column to show separation when scrolled */ .watchlist-table:not(.private-table) thead th.col-ticker, .watchlist-table:not(.private-table) tbody td.cell-ticker { border-right: 1px solid var(--border); } /* Pinned first column (Company Name) — private table */ .private-table thead th.col-company, .private-table tbody td.private-name-cell { position: sticky; left: 0; z-index: 5; } .private-table thead th.col-company { z-index: 15; background: var(--bg-header); } .private-table tbody td.private-name-cell { background: var(--bg-primary); } .private-table tbody tr:nth-child(even) td.private-name-cell { background: var(--bg-surface-alt); } .private-table tbody tr:hover td.private-name-cell { background: var(--bg-hover); } .private-table thead th.col-company, .private-table tbody td.private-name-cell { border-right: 1px solid var(--border); } /* Private subsector header — pin label cell */ .private-table .subsector-header td:first-child { position: sticky; left: 0; z-index: 6; background: var(--bg-surface-alt); } /* Subsector header row — label cell pinned to left */ .watchlist-table:not(.private-table) .subsector-header .subsector-label-cell { position: sticky; left: 0; z-index: 6; white-space: nowrap; overflow: visible; } .watchlist-table:not(.private-table) .subsector-header .subsector-fill-cell { /* inherits background from .subsector-header td rule */ } /* Body rows */ .watchlist-table tbody tr { border-bottom: 1px solid var(--border); transition: background 0.1s; } .watchlist-table tbody tr:nth-child(even) { background: rgba(17,24,39,0.4); } .watchlist-table tbody tr:hover { background: var(--bg-hover); } .watchlist-table tbody td { padding: 5px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: middle; } .watchlist-table tbody td.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums lining-nums; font-size: 11.5px; letter-spacing: -0.2px; } /* Ticker cell */ td.cell-ticker { font-family: var(--font-mono); font-weight: 700; color: var(--accent); cursor: pointer; font-size: 12px; } td.cell-ticker:hover { text-decoration: underline; } /* Company name */ td.cell-name { color: var(--text-secondary); font-size: 11px; vertical-align: middle; } .cell-name-text { display: block; line-height: 1.3; } .public-hq { display: block; font-size: 10px; color: var(--text-muted); font-weight: 400; margin-top: 1px; letter-spacing: 0.2px; } /* Subsector badge */ .subsector-badge { display: inline-block; background: rgba(59,130,246,0.1); color: var(--accent); font-size: 10px; font-weight: 500; padding: 1px 6px; border-radius: 2px; cursor: pointer; border: 1px solid rgba(59,130,246,0.2); transition: background 0.15s; } .subsector-badge:hover { background: rgba(59,130,246,0.2); } /* Performance colors */ .val-pos { color: var(--green); } .val-neg { color: var(--red); } .val-neutral { color: var(--text-muted); } /* Remove button */ .remove-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 14px; opacity: 0; transition: opacity 0.15s, color 0.15s; padding: 0 4px; line-height: 1; } tr:hover .remove-btn { opacity: 1; } .remove-btn:hover { color: var(--red); } /* === SUBSECTOR GROUP HEADER === */ .subsector-header td { padding: 7px 8px 5px; background: var(--bg-surface-alt) !important; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 11px; color: var(--text-secondary); letter-spacing: 0.3px; } .subsector-header:hover td { background: var(--bg-surface-alt) !important; } .subsector-toggle { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; background: none; border: none; color: inherit; font: inherit; padding: 0; } .subsector-toggle .chevron { display: inline-block; font-size: 9px; transition: transform 0.2s; color: var(--text-muted); width: 10px; } .subsector-toggle .chevron.collapsed { transform: rotate(-90deg); } .subsector-count { font-weight: 400; color: var(--text-muted); font-size: 10px; margin-left: 4px; } /* Hidden rows in collapsed groups */ .row-hidden { display: none; } /* === CONTEXT MENU (long-press) === */ .context-menu { position: fixed; z-index: 2000; background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: 4px; box-shadow: 0 8px 32px rgba(0,0,0,0.5); padding: 4px 0; min-width: 180px; font-family: var(--font-sans); font-size: 12px; animation: ctxFadeIn 0.12s ease-out; } @keyframes ctxFadeIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } } .context-menu-item { display: flex; align-items: center; gap: 8px; padding: 7px 14px; cursor: pointer; color: var(--text-secondary); transition: background 0.1s, color 0.1s; white-space: nowrap; user-select: none; } .context-menu-item:hover { background: var(--bg-hover); color: var(--text-primary); } .context-menu-item.danger { color: var(--red); } .context-menu-item.danger:hover { background: rgba(239,68,68,0.12); color: var(--red); } .context-menu-item .ctx-icon { font-size: 14px; width: 18px; text-align: center; flex-shrink: 0; } .context-menu-divider { height: 1px; background: var(--border); margin: 4px 0; } /* Subsector picker dropdown */ .subsector-picker { position: fixed; z-index: 2001; background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: 4px; box-shadow: 0 8px 32px rgba(0,0,0,0.5); padding: 4px 0; min-width: 190px; max-width: 240px; max-height: 360px; overflow-y: auto; font-family: var(--font-sans); font-size: 12px; animation: ctxFadeIn 0.12s ease-out; } .subsector-picker-header { padding: 6px 12px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); font-weight: 600; border-bottom: 1px solid var(--border); margin-bottom: 2px; } .subsector-picker-item { display: flex; align-items: center; gap: 6px; padding: 6px 12px; cursor: pointer; color: var(--text-secondary); transition: background 0.1s, color 0.1s; white-space: nowrap; user-select: none; } .subsector-picker-item:hover { background: var(--bg-hover); color: var(--text-primary); } .subsector-picker-item.active { color: var(--accent); font-weight: 500; } .subsector-picker-check { width: 14px; font-size: 11px; text-align: center; flex-shrink: 0; color: var(--accent); } .subsector-picker-divider { height: 1px; background: var(--border); margin: 4px 0; } .subsector-picker-custom { color: var(--text-muted); font-style: italic; } .subsector-picker-input-row { display: flex; align-items: center; gap: 4px; padding: 4px 8px; } .subsector-picker-input { flex: 1; background: var(--bg-surface-alt); border: 1px solid var(--border-light); border-radius: 3px; color: var(--text-primary); font-size: 11px; padding: 4px 8px; outline: none; font-family: var(--font-sans); } .subsector-picker-input:focus { border-color: var(--accent); } .subsector-picker-confirm { background: var(--accent); border: none; border-radius: 3px; color: #fff; font-size: 12px; padding: 4px 8px; cursor: pointer; font-weight: 600; line-height: 1; } .subsector-picker-confirm:hover { opacity: 0.85; } /* Long-press visual feedback */ tr.long-pressing { background: var(--bg-hover) !important; outline: 1px solid var(--accent); outline-offset: -1px; } /* === LOADING === */ .loading-overlay { padding: 12px 16px; display: none; } .loading-overlay.active { display: block; } .skeleton-row { height: 28px; background: linear-gradient(90deg, var(--bg-surface) 25%, var(--bg-surface-alt) 50%, var(--bg-surface) 75%); background-size: 200% 100%; border-radius: 3px; margin-bottom: 4px; animation: shimmer 1.5s infinite; animation-delay: calc(var(--i) * 0.08s); } @keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* === PUBLIC COMPANIES SECTION === */ .public-section { border-bottom: none; } /* === PRIVATE COMPANIES INLINE ADD === */ .add-private-group { display: flex; align-items: center; gap: 6px; } .add-private-group input { background: var(--bg-primary); border: 1px solid var(--border); color: var(--text-primary); font-family: var(--font-sans); font-size: 12px; padding: 6px 10px; border-radius: 3px; width: 220px; outline: none; transition: border-color 0.15s; } .add-private-group input:focus { border-color: var(--accent); } .add-private-group input::placeholder { color: var(--text-muted); } .add-private-group input:disabled { opacity: 0.5; cursor: not-allowed; } /* === PRIVATE COMPANIES === */ .private-section { margin-top: 12px; padding: 0 0 8px; border-top: 2px solid var(--border); } .section-header-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px 6px; } .section-header-bar h2 { font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--text-secondary); letter-spacing: 0.3px; } .private-table { min-width: 1050px; } .private-table thead th { top: 0; position: relative; } /* Private company name cell with HQ */ .private-name-cell { vertical-align: middle; } .private-name-wrapper { display: flex; align-items: center; gap: 6px; } .private-hq { display: block; font-size: 10px; color: var(--text-muted); font-weight: 400; margin-top: 1px; letter-spacing: 0.2px; } /* Status badges for public/IPO companies */ .private-status-badge { display: inline-block; font-size: 9px; font-weight: 600; letter-spacing: 0.5px; padding: 1px 5px; border-radius: 3px; vertical-align: middle; white-space: nowrap; font-family: var(--font-mono); } .status-public { background: rgba(34, 197, 94, 0.15); color: #4ade80; border: 1px solid rgba(34, 197, 94, 0.3); } .status-ipo { background: rgba(251, 191, 36, 0.15); color: #fbbf24; border: 1px solid rgba(251, 191, 36, 0.3); } /* Stage 1 PR-D — Private Companies section folded into Coverage tab. * Adds vertical breathing room below the public watchlist. */ .coverage-private-section { margin-top: 28px; } /* Stage 1 PR-D — full 4-state pill set for the unified Coverage tab. */ .status-private { background: rgba(148, 163, 184, 0.14); color: #cbd5e1; border: 1px solid rgba(148, 163, 184, 0.30); } .status-s1 { background: rgba(59, 130, 246, 0.16); color: #60a5fa; border: 1px solid rgba(59, 130, 246, 0.35); } .status-public { cursor: pointer; } .status-public:hover { background: rgba(34, 197, 94, 0.28); } /* M&A status pills — ACQ (closed/pending/announced), BID (unsolicited), RUMOR * (4-gate verified). Reuses .private-status-badge sizing rules. */ .status-acq { background: rgba(168, 85, 247, 0.16); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.35); } .status-bid { background: rgba(244, 114, 182, 0.16); color: #f472b6; border: 1px solid rgba(244, 114, 182, 0.35); } .status-rumor { background: rgba(249, 115, 22, 0.16); color: #fb923c; border: 1px solid rgba(249, 115, 22, 0.35); /* Subtle pulse so the user notices rumor flags — fades in 1.4s loop */ animation: maRumorPulse 2.6s ease-in-out infinite; } @keyframes maRumorPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0); } 50% { box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.18); } } .ma-status-pill { margin-left: 6px; cursor: help; } .ma-status-pill--compact { font-size: 8px; padding: 0 4px; } /* Deal blurb panel — replaces earnings note slot for ACQ-status tickers. */ .ma-deal-blurb { padding: 16px 20px 20px; color: var(--text-primary); font-size: 13px; line-height: 1.5; } .ma-blurb-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border, rgba(255,255,255,0.08)); } .ma-blurb-headline { font-size: 16px; font-weight: 600; color: var(--text-primary); } .ma-blurb-status-badge { display: inline-block; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.6px; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; } .ma-blurb-status-closed, .ma-blurb-status-pending, .ma-blurb-status-announced { background: rgba(168, 85, 247, 0.16); color: #c084fc; border: 1px solid rgba(168, 85, 247, 0.35); } .ma-blurb-status-bid { background: rgba(244, 114, 182, 0.16); color: #f472b6; border: 1px solid rgba(244, 114, 182, 0.35); } .ma-blurb-status-rumor { background: rgba(249, 115, 22, 0.16); color: #fb923c; border: 1px solid rgba(249, 115, 22, 0.35); } .ma-blurb-line { margin-bottom: 4px; color: var(--text-secondary); font-size: 13px; } .ma-blurb-line strong { color: var(--text-primary); } .ma-blurb-timeline { font-family: var(--font-mono); font-size: 12px; } .ma-blurb-section { margin-top: 14px; } .ma-blurb-section h4 { margin: 0 0 6px; font-size: 11px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-muted, #888); } .ma-blurb-list { margin: 0; padding-left: 18px; } .ma-blurb-list li { margin-bottom: 4px; } .ma-blurb-pros li::marker { color: #4ade80; } .ma-blurb-cons li::marker { color: #f87171; } .ma-blurb-comp-table { width: 100%; border-collapse: collapse; font-size: 12px; } .ma-blurb-comp-table td { padding: 4px 8px 4px 0; vertical-align: top; } .ma-blurb-comp-ticker { font-family: var(--font-mono); font-weight: 600; width: 60px; color: var(--text-primary); } .ma-blurb-sources { margin: 0; padding-left: 18px; font-size: 12px; } .ma-blurb-sources li { margin-bottom: 3px; } .ma-blurb-sources a { color: var(--accent, #60a5fa); text-decoration: none; } .ma-blurb-sources a:hover { text-decoration: underline; } .ma-blurb-tier { display: inline-block; font-family: var(--font-mono); font-size: 9px; padding: 1px 4px; margin-left: 4px; border-radius: 3px; background: rgba(96, 165, 250, 0.12); color: #93c5fd; letter-spacing: 0.4px; } .ma-blurb-footer { margin-top: 16px; padding-top: 10px; border-top: 1px solid var(--border, rgba(255,255,255,0.08)); font-size: 11px; color: var(--text-muted, #888); font-style: italic; } /* Lead investors column */ .private-investors { color: var(--text-secondary); font-size: 11px; max-width: 180px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* === POPUP / MODAL === */ .popup-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.75); z-index: 1000; align-items: flex-start; justify-content: center; padding: 24px 16px; overflow-y: auto; } .popup-overlay.active { display: flex; } .popup-modal { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 6px; max-width: 1100px; width: 100%; position: relative; padding: 24px; box-shadow: 0 24px 80px rgba(0,0,0,0.5); } .popup-close { position: absolute; top: 12px; right: 16px; background: none; border: none; color: var(--text-muted); font-size: 22px; cursor: pointer; z-index: 10; transition: color 0.15s; line-height: 1; } .popup-close:hover { color: var(--text-primary); } .popup-content { min-height: 200px; } /* Popup sections */ .popup-header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--border); } .popup-ticker { font-family: var(--font-mono); font-size: 22px; font-weight: 700; color: var(--accent); } .popup-company { font-size: 14px; color: var(--text-secondary); } .popup-price-group { margin-left: auto; text-align: right; } .popup-price { font-family: var(--font-mono); font-size: 20px; font-weight: 600; color: var(--text-primary); } .popup-change { font-family: var(--font-mono); font-size: 13px; margin-left: 8px; } .popup-change-tf { display: inline-block; margin-left: 4px; padding: 1px 5px; font-family: var(--font-sans); font-size: 9px; font-weight: 600; letter-spacing: 0.5px; color: var(--text-muted, #9ca3af); background: rgba(148, 163, 184, 0.12); border: 1px solid rgba(148, 163, 184, 0.25); border-radius: 3px; vertical-align: middle; text-transform: uppercase; } .popup-section { margin-bottom: 24px; } .popup-section-title { font-family: var(--font-sans); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); margin-bottom: 10px; padding-bottom: 4px; border-bottom: 1px solid var(--border); } .popup-chart-container { background: var(--bg-primary); border-radius: 4px; padding: 12px; border: 1px solid var(--border); margin-bottom: 8px; } .chart-period-btns { display: flex; gap: 4px; margin-bottom: 10px; } .chart-period-btn { background: var(--bg-surface-alt); border: 1px solid var(--border); color: var(--text-muted); font-family: var(--font-mono); font-size: 10px; padding: 3px 8px; border-radius: 2px; cursor: pointer; transition: all 0.15s; } .chart-period-btn:hover { color: var(--text-primary); border-color: var(--text-muted); } .chart-period-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); } /* Metrics grid */ .metrics-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; } .metric-card { background: var(--bg-primary); border: 1px solid var(--border); border-radius: 4px; padding: 8px 10px; } .metric-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 2px; } .metric-value { font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; } /* 4-column metrics grid */ .metrics-grid-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 700px) { .metrics-grid-4 { grid-template-columns: repeat(2, 1fr); } } .metric-sub { font-size: 10px; color: var(--text-muted); margin-top: 1px; font-family: var(--font-mono); } /* Guidance table */ .guide-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-bottom: 12px; } .guide-table th { background: var(--bg-primary); border: 1px solid var(--border); padding: 6px 10px; text-align: right; font-weight: 500; text-transform: uppercase; font-size: 10px; letter-spacing: 0.3px; color: var(--text-muted); } .guide-table th:first-child { text-align: left; } .guide-table td { border: 1px solid var(--border); padding: 6px 10px; text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-primary); } .guide-table .guide-metric { text-align: left; font-weight: 600; color: var(--text-secondary); font-family: var(--font-sans); } /* Signal badges */ .signal-above { color: var(--green); font-weight: 600; font-size: 11px; } .signal-below { color: var(--red); font-weight: 600; font-size: 11px; } .signal-high { color: var(--green); font-size: 11px; opacity: 0.85; } .signal-low { color: var(--yellow); font-size: 11px; opacity: 0.85; } .signal-mid { color: var(--text-muted); font-size: 11px; } /* Revision momentum */ .revision-section { margin-top: 4px; } .revision-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; } .revision-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; color: var(--text-muted); font-weight: 500; } .revision-direction { font-family: var(--font-mono); font-size: 12px; font-weight: 600; } .revision-track { display: flex; justify-content: space-between; gap: 4px; } .revision-point { flex: 1; text-align: center; padding: 6px 4px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 4px; } .revision-current { border-color: var(--accent); background: rgba(0, 200, 255, 0.05); } .revision-val { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; } .revision-label { font-size: 9px; color: var(--text-muted); text-transform: uppercase; margin-top: 2px; } .revision-counts { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: 11px; font-family: var(--font-mono); } .revision-up { color: var(--green); font-weight: 600; } .revision-down { color: var(--red); font-weight: 600; } .revision-period { color: var(--text-muted); font-size: 10px; margin-left: auto; } .revision-bar { flex: 1; height: 4px; background: var(--red); border-radius: 2px; overflow: hidden; max-width: 120px; } .revision-bar-fill { display: block; height: 100%; background: var(--green); border-radius: 2px; } /* Revenue estimate range table */ .rev-range-table td strong { color: var(--accent); } /* Spread dispersion badges */ .spread-tight { color: var(--green); font-family: var(--font-mono); font-size: 11px; font-weight: 600; } .spread-tight small { font-weight: 400; opacity: 0.8; } .spread-normal { color: var(--text-secondary); font-family: var(--font-mono); font-size: 11px; } .spread-wide { color: var(--yellow); font-family: var(--font-mono); font-size: 11px; font-weight: 600; } .spread-wide small { font-weight: 400; opacity: 0.8; } /* Narrative text */ .narrative-text { font-size: 12px; line-height: 1.65; color: var(--text-secondary); padding: 8px 0; } /* Events list */ .events-list { list-style: none; } .events-list li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 12px; } .event-date { font-family: var(--font-mono); color: var(--accent); font-size: 11px; min-width: 90px; } .event-type { color: var(--text-secondary); } /* Popup loading */ .popup-loading { display: flex; align-items: center; justify-content: center; min-height: 300px; color: var(--text-muted); font-family: var(--font-mono); font-size: 13px; } .popup-loading::after { content: ''; width: 20px; height: 20px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; margin-left: 10px; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Private modal form */ .private-modal { max-width: 500px; } .private-form { display: flex; flex-direction: column; gap: 10px; } .private-form label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--text-muted); font-weight: 500; } .private-form input { background: var(--bg-primary); border: 1px solid var(--border); color: var(--text-primary); font-family: var(--font-sans); font-size: 12px; padding: 6px 10px; border-radius: 3px; outline: none; } .private-form input:focus { border-color: var(--accent); } .btn-primary { background: var(--accent); color: #fff; border: none; font-family: var(--font-sans); font-size: 12px; font-weight: 600; padding: 8px 16px; border-radius: 3px; cursor: pointer; margin-top: 6px; transition: background 0.15s; } .btn-primary:hover { background: var(--accent-dim); } .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; } .btn-primary:disabled:hover { background: var(--accent); } .btn-spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,0.3); border-top-color: #fff; border-radius: 50%; animation: spin 0.7s linear infinite; vertical-align: middle; margin-left: 6px; } .private-form-hint { font-size: 11px; color: var(--text-muted); line-height: 1.4; padding: 2px 0 4px; } .lookup-status { margin-top: 12px; padding: 10px 12px; border-radius: 4px; font-size: 11px; line-height: 1.5; } .lookup-status.status-loading { background: rgba(59,130,246,0.1); border: 1px solid rgba(59,130,246,0.3); color: var(--accent); } .lookup-status.status-success { background: rgba(34,197,94,0.1); border: 1px solid rgba(34,197,94,0.3); color: var(--green); } .lookup-status.status-error { background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); color: var(--red); } /* === FOOTER === */ /* === NEWS (lean 3-section redesign) === */ .surface-news .surface-header { position: relative; } .news-status { font-size: 10px; color: var(--text-muted); font-family: var(--font-mono); } .news-feed { display: flex; flex-direction: column; gap: 8px; padding: 8px 0 4px; } .news-loading { padding: 18px 16px; text-align: center; color: var(--text-muted); font-size: 11px; } .news-empty { padding: 16px; color: var(--text-muted); font-size: 12px; font-style: italic; } .news-section { padding: 4px 0 8px; } .news-section + .news-section { border-top: 1px solid var(--border); margin-top: 4px; } .news-section-title { margin: 0; padding: 10px 16px 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-secondary); } .news-list { display: flex; flex-direction: column; } /* --- Subsector filter chip bar (PR C) --- Wrapping row of filter chips above Watchlist Headlines (All / Macro / per-subsector). The bar is hidden when only one chip ("All") would render — see news.js renderFilterBar(). */ .news-filter-bar { /* PR (2026-06-18): wrap chips onto multiple rows instead of forcing the user to scroll horizontally. row-gap is a touch larger than column-gap so the rows feel visually distinct without looking sparse. */ display: flex; flex-wrap: wrap; column-gap: 6px; row-gap: 7px; padding: 8px 16px 12px; } .news-filter-bar:empty { display: none; } .news-filter-chip { flex: 0 0 auto; font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--text-secondary); background: transparent; border: 1px solid var(--border); padding: 4px 10px; border-radius: 999px; letter-spacing: 0.2px; cursor: pointer; white-space: nowrap; transition: background 0.12s, color 0.12s, border-color 0.12s; } .news-filter-chip:hover { color: var(--text-primary); border-color: var(--accent); } .news-filter-chip--active { color: #fff; background: var(--accent); border-color: var(--accent); } .news-filter-chip-count { display: inline-block; margin-left: 5px; font-size: 10px; font-weight: 500; opacity: 0.75; } /* --- Cards (shared) --- */ .news-card { padding: 11px 16px; border-bottom: 1px solid var(--border); } .news-card:last-child { border-bottom: none; } .news-card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; } .news-card-time { margin-left: auto; font-size: 10px; color: var(--text-muted); font-family: var(--font-mono); white-space: nowrap; } .news-card-headline { display: block; font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--text-primary); } a.news-card-link { text-decoration: none; color: var(--text-primary); transition: color 0.12s; } a.news-card-link:hover { color: var(--accent); text-decoration: underline; } .news-card-foot { margin-top: 6px; font-size: 11px; } .news-source { color: var(--text-muted); text-decoration: none; } a.news-source:hover { color: var(--accent); text-decoration: underline; } /* --- Ticker chips --- */ .news-chips { display: inline-flex; gap: 4px; flex-wrap: wrap; } .news-chip { font-family: var(--font-mono); font-size: 10px; font-weight: 600; color: var(--accent); background: rgba(59, 130, 246, 0.12); padding: 2px 7px; border-radius: 3px; letter-spacing: 0.3px; cursor: pointer; transition: background 0.12s; } .news-chip:hover { background: rgba(59, 130, 246, 0.25); } .news-chip--macro { color: var(--text-secondary); background: rgba(148, 163, 184, 0.14); cursor: default; } .news-chip--macro:hover { background: rgba(148, 163, 184, 0.14); } /* --- Earnings cards using news-headline layout (post-2026-06-18) --- */ /* When an earnings card adopts the news-card layout, suppress the news-card default padding + bottom border (the .earnings-card wrapper already owns its own padding, border, border-radius and color-coded left edge). */ .earnings-card.news-card { padding: 12px; } .earnings-card.news-card:not(:last-child) { border-bottom: 1px solid #1e293b; } .news-card-headline--empty { color: var(--text-muted); font-style: italic; font-weight: 400; } .news-source--muted { color: var(--text-muted); opacity: 0.75; } /* Earnings-note-derived card source label (distinct from raw news source). */ .news-source--note { color: var(--text-secondary); font-weight: 500; letter-spacing: 0.2px; } /* Direction-coded post-earnings card headline. Mirrors the reaction_pct color logic from screener / earnings.js so a 0% / +0.x% / -0.x% / +5%+ / -5%+ move is visually obvious at a glance. */ .earnings-card-headline { /* Slightly heavier than the default news headline to emphasize that this is a structured, deterministic summary rather than a raw news title. */ font-weight: 600; } .earnings-card-headline--up { color: #34d399; /* emerald-400 */ } .earnings-card-headline--up-strong { color: #10b981; /* emerald-500 */ text-shadow: 0 0 8px rgba(16, 185, 129, 0.18); } .earnings-card-headline--down { color: #f87171; /* red-400 */ } .earnings-card-headline--down-strong { color: #ef4444; /* red-500 */ text-shadow: 0 0 8px rgba(239, 68, 68, 0.18); } .earnings-card-headline--flat { color: var(--text-primary); } /* Inline reaction-prefix coloring for post-earnings cards (PR #64). Renders the ``Stock +X.X%.`` prefix in the same direction-coded palette as the prior whole-headline tint, but keeps the qualitative blurb in the default body color so the thesis sentence reads naturally. */ .earnings-card-reaction { font-weight: 700; letter-spacing: 0.1px; margin-right: 4px; } .earnings-card-reaction--up { color: #34d399; } .earnings-card-reaction--up-strong { color: #10b981; text-shadow: 0 0 8px rgba(16, 185, 129, 0.18); } .earnings-card-reaction--down { color: #f87171; } .earnings-card-reaction--down-strong { color: #ef4444; text-shadow: 0 0 8px rgba(239, 68, 68, 0.18); } .earnings-card-reaction--flat { color: var(--text-muted); } .earnings-context-chip { font-family: var(--font-mono); font-size: 10px; font-weight: 600; color: var(--text-muted); background: rgba(148, 163, 184, 0.10); padding: 2px 7px; border-radius: 3px; letter-spacing: 0.2px; white-space: nowrap; } /* Suppress the old metric/header/reaction blocks if any stale markup slips through (defensive — current code path no longer emits these inside .earnings-card.news-card, but a cached client may briefly). */ .earnings-card.news-card .earnings-card-header, .earnings-card.news-card .earnings-card-metrics, .earnings-card.news-card .earnings-card-reaction-row, .earnings-card.news-card .earnings-card-countdown, .earnings-card.news-card .earnings-card-fq { display: none; } /* --- M&A cards --- */ .news-ma-status { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.5px; padding: 2px 7px; border-radius: 3px; } .news-ma-status-rumor { color: #fdba74; background: rgba(249, 115, 22, 0.18); } .news-ma-status-confirmed { color: #86efac; background: rgba(34, 197, 94, 0.16); } .news-ma-conf { font-size: 10px; font-family: var(--font-mono); color: var(--text-secondary); } .news-ma-buyer { margin-top: 4px; font-size: 11.5px; color: var(--text-secondary); } .news-ma-label { color: var(--text-muted); } .news-ma-sep { color: var(--text-muted); margin: 0 2px; } /* --- Earnings note cards (grid) --- */ .news-notes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; padding: 4px 16px 8px; } .news-note-card { border: 1px solid var(--border); border-bottom: 1px solid var(--border); border-radius: 6px; padding: 10px 12px; cursor: pointer; transition: border-color 0.12s, background 0.12s; } .news-note-card:hover { border-color: var(--border-light); background: var(--bg-hover); } .news-note-type { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.5px; padding: 2px 6px; border-radius: 3px; } .news-note-type-post { color: #93c5fd; background: rgba(59, 130, 246, 0.16); } .news-note-type-pre { color: #c4b5fd; background: rgba(139, 92, 246, 0.16); } .news-note-line { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11.5px; } .news-note-name { font-size: 12px; margin-bottom: 4px; } .news-note-company { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Headline line — earnings context summary */ .news-note-headline { font-size: 11.5px; color: #94a3b8; /* slate-400 — neutral default */ line-height: 1.4; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 6px; } /* Significant positive move: |pct| >= 5 and positive */ .news-note-headline--up { color: #34d399; /* emerald-400 */ font-weight: 600; } /* Significant negative move: |pct| >= 5 and negative */ .news-note-headline--down { color: #fb7185; /* rose-400 */ font-weight: 600; } .news-note-footer { display: flex; justify-content: flex-end; margin-top: 4px; } .news-note-open { color: var(--accent); font-size: 11px; white-space: nowrap; flex-shrink: 0; } .app-footer { text-align: center; padding: 10px; border-top: 1px solid var(--border); flex-shrink: 0; } .app-footer a { font-size: 10px; color: var(--text-muted); text-decoration: none; } .app-footer a:hover { color: var(--text-secondary); } /* === SEE MORE / DEEP DIVE === */ .see-more-wrapper { text-align: center; padding: 16px 0 8px; border-top: 1px solid var(--border); margin-top: 8px; } .see-more-btn { background: var(--bg-surface-alt); border: 1px solid var(--border-light); color: var(--text-secondary); font-family: var(--font-sans); font-size: 12px; font-weight: 600; padding: 8px 28px; border-radius: 4px; cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; gap: 8px; letter-spacing: 0.3px; } .see-more-btn:hover { background: var(--bg-hover); border-color: var(--accent); color: var(--text-primary); } .see-more-arrow { font-size: 10px; transition: transform 0.25s ease; } .see-more-arrow.rotated { transform: rotate(180deg); } .deep-dive-container { border-top: 1px solid var(--border); margin-top: 12px; padding-top: 16px; } .deep-dive-section { margin-bottom: 28px; } .deep-dive-loading { min-height: 200px; } /* Quant Factor Scorecard */ .quant-subtitle { font-size: 11px; color: var(--text-muted); margin-bottom: 12px; } .quant-composite { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; padding: 10px 12px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 4px; } .composite-label { font-family: var(--font-sans); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); } .composite-score { font-family: var(--font-mono); font-size: 24px; font-weight: 700; } .quant-factors-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 20px; } .factor-row { display: flex; flex-direction: column; gap: 3px; padding: 8px 0; border-bottom: 1px solid rgba(30,41,59,0.4); } .factor-name { font-family: var(--font-sans); font-size: 11px; font-weight: 500; color: var(--text-secondary); } .factor-bar-wrapper { display: flex; align-items: center; gap: 8px; } .factor-bar-track { flex: 1; height: 6px; background: var(--bg-primary); border-radius: 3px; overflow: hidden; border: 1px solid var(--border); } .factor-bar-fill { height: 100%; border-radius: 3px; transition: width 0.6s ease-out; min-width: 2px; } .factor-score { font-family: var(--font-mono); font-size: 12px; font-weight: 600; min-width: 28px; text-align: right; } .factor-label { font-family: var(--font-mono); font-size: 10px; color: var(--text-muted); } /* Short Interest */ .short-interest-metrics { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 12px; } .si-big-number { min-width: 140px; padding: 12px 16px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 4px; text-align: center; } .si-value { font-family: var(--font-mono); font-size: 28px; font-weight: 700; color: var(--text-primary); line-height: 1.2; } .si-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; margin-top: 4px; } .si-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; flex: 1; } .short-interest-chart-area { background: var(--bg-primary); border: 1px solid var(--border); border-radius: 4px; padding: 12px; margin-bottom: 8px; height: 200px; } .si-context { margin-top: 4px; } /* S&P 500 Outperformance */ .outperf-chart-block { margin-bottom: 4px; } .outperf-header { margin-bottom: 12px; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .outperf-big-number { padding: 12px 16px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 4px; display: inline-block; } .outperf-value { font-family: var(--font-mono); font-size: 32px; font-weight: 700; line-height: 1.1; } .outperf-unit { font-size: 16px; opacity: 0.7; } .outperf-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; margin-top: 4px; } .outperf-approx { font-size: 9px; color: var(--text-muted); font-style: italic; margin-top: 2px; } .outperf-chart-container { background: var(--bg-primary); border: 1px solid var(--border); border-radius: 4px; padding: 12px; height: 310px; } /* Lookback toggle buttons */ .outperf-lookback-toggle { display: flex; gap: 2px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 4px; padding: 2px; flex-shrink: 0; margin-top: 4px; } .lookback-btn { font-family: var(--font-mono); font-size: 10px; font-weight: 600; padding: 4px 10px; border: none; border-radius: 3px; background: transparent; color: var(--text-muted); cursor: pointer; transition: all 0.15s ease; letter-spacing: 0.3px; } .lookback-btn:hover { color: var(--text-primary); background: rgba(255,255,255,0.05); } .lookback-btn.active { background: rgba(59,130,246,0.2); color: #60a5fa; } /* Cross-Sector Comps Table */ .comps-subtitle { font-size: 11px; color: var(--text-muted); margin-bottom: 12px; letter-spacing: 0.2px; } .comps-table-wrapper { overflow-x: auto; border: 1px solid var(--border); border-radius: 4px; background: var(--bg-primary); scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .comps-table-wrapper::-webkit-scrollbar { height: 6px; } .comps-table-wrapper::-webkit-scrollbar-track { background: transparent; } .comps-table-wrapper::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } .comps-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 11px; white-space: nowrap; min-width: 900px; } .comps-table thead th { background: var(--bg-surface-alt); color: var(--text-muted); font-family: var(--font-sans); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 2; } .comps-table thead th.num { text-align: right; } .comps-table tbody td { padding: 7px 10px; color: var(--text-secondary); border-bottom: 1px solid rgba(255,255,255,0.03); } .comps-table tbody td.num { text-align: right; font-variant-numeric: tabular-nums; } .comps-table tbody tr:hover { background: rgba(255,255,255,0.02); } .comps-table tbody tr:last-child td { border-bottom: none; } /* Target row highlight */ .comps-target-row { background: rgba(34,211,238,0.04); } .comps-target-row td { color: var(--text-primary); font-weight: 500; border-bottom: 1px solid rgba(34,211,238,0.15); } /* Sticky company column */ .comps-sticky-col { position: sticky; left: 0; z-index: 1; background: inherit; min-width: 160px; } thead .comps-sticky-col { z-index: 3; background: var(--bg-surface-alt); } .comps-target-row .comps-sticky-col { background: rgba(10, 14, 23, 0.97); } tbody tr:hover .comps-sticky-col { background: rgba(10, 14, 23, 0.97); } /* Ticker + name layout in first column */ .comps-ticker { color: var(--accent); font-weight: 600; font-size: 11px; margin-right: 6px; } .comps-name { color: var(--text-muted); font-size: 10px; font-family: var(--font-sans); } .comps-sector-cell { font-family: var(--font-sans); font-size: 10px; color: var(--text-muted); } /* Match badges */ .comps-target-badge { display: inline-block; font-family: var(--font-sans); font-size: 9px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; padding: 2px 6px; border-radius: 3px; background: rgba(34,211,238,0.12); color: var(--accent); border: 1px solid rgba(34,211,238,0.25); } .comps-sim-badge { display: inline-block; font-family: var(--font-mono); font-size: 10px; font-weight: 600; padding: 2px 6px; border-radius: 3px; } /* Narrative under comps table */ .comps-narrative { margin-top: 10px; } /* ===== EARNINGS SECTION ===== */ .earnings-section { margin-top: 24px; } .earnings-header-controls { display: flex; align-items: center; gap: 12px; } .earnings-status { font-size: 11px; color: #6b7280; font-family: 'JetBrains Mono', monospace; } .btn-ghost { background: transparent; border: 1px solid #1e293b; color: #94a3b8; font-size: 11px; padding: 4px 10px; border-radius: 4px; cursor: pointer; transition: all 0.15s; } .btn-ghost:hover { border-color: #3b82f6; color: #e5e7eb; } .earnings-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 12px; } .earnings-panel { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 8px; padding: 14px; } .earnings-panel-title { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; color: #94a3b8; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 12px 0; } .earnings-empty { font-size: 12px; color: #4b5563; padding: 16px 0; text-align: center; } /* --- Earnings Cards --- */ .earnings-cards { display: flex; flex-direction: column; gap: 8px; } .earnings-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 6px; padding: 12px; transition: border-color 0.15s; } .earnings-card:hover { border-color: #374151; } .earnings-card.reported { border-left: 3px solid #3b82f6; } .earnings-card.upcoming { border-left: 3px solid #f59e0b; } .earnings-card-header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; } .earnings-card-ticker { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 13px; color: #e5e7eb; } .earnings-card-name { font-size: 12px; color: #9ca3af; } .earnings-card-date { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #6b7280; margin-left: auto; } .earnings-card-metrics { display: flex; gap: 16px; margin-bottom: 6px; } .earnings-metric { display: flex; align-items: center; gap: 6px; } .metric-label { font-size: 10px; color: #6b7280; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; } .metric-value { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #e5e7eb; font-weight: 500; } .metric-tag { font-size: 10px; padding: 1px 5px; border-radius: 3px; font-family: 'JetBrains Mono', monospace; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .metric-tag.beat { background: rgba(34, 197, 94, 0.15); color: #22c55e; } .metric-tag.miss { background: rgba(239, 68, 68, 0.15); color: #ef4444; } .metric-tag.inline { background: rgba(107, 114, 128, 0.15); color: #9ca3af; } /* --- Beat/miss surprise % on post-earnings REV / EPS rows --- */ .metric-surprise { font-size: 10px; font-weight: 600; font-family: 'JetBrains Mono', monospace; white-space: nowrap; } .metric-surprise.beat { color: #22c55e; } .metric-surprise.miss { color: #ef4444; } .metric-surprise.inline { color: #9ca3af; } .metric-surprise.neutral { color: #4b5563; } /* --- FY / Next Q guide row on post-earnings cards --- */ /* Split FY guidance: revenue + profitability metric-specific pills. The row must wrap cleanly on narrow screens (mobile Safari) so two pills never overflow the card. */ .earnings-guide-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: 11px; margin-bottom: 4px; font-family: 'JetBrains Mono', monospace; } .guide-label { font-size: 10px; color: #6b7280; text-transform: uppercase; min-width: 62px; } .guide-metric { font-size: 11px; font-weight: 600; display: inline-flex; align-items: baseline; gap: 3px; white-space: nowrap; } .guide-metric .guide-metric-label { color: #9ca3af; font-weight: 500; } .guide-metric .guide-metric-direction { font-size: 10px; text-transform: lowercase; opacity: 0.8; } .guide-metric .guide-basis-hint { font-size: 9px; color: #6b7280; font-weight: 400; font-style: italic; } .guide-metric.guide-positive { color: #22c55e; } .guide-metric.guide-positive .guide-metric-label { color: #4ade80; } .guide-metric.guide-negative { color: #ef4444; } .guide-metric.guide-negative .guide-metric-label { color: #f87171; } .guide-metric.guide-neutral { color: #9ca3af; } .guide-sep { color: #4b5563; margin: 0 2px; } @media (max-width: 480px) { /* On narrow screens let the label sit on its own line and pills wrap below so neither guidance pill overflows the card. */ .earnings-guide-row { gap: 4px 8px; } .guide-label { flex: 0 0 100%; min-width: 0; } } .earnings-card-fq { font-size: 10px; color: #6b7280; margin-bottom: 4px; } /* --- Stock reaction row (pct + narrative) on post-earnings cards --- */ .earnings-card-reaction-row { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; } .reaction-pct { font-family: 'JetBrains Mono', monospace; font-size: 1.05rem; font-weight: 700; line-height: 1.3; } .reaction-pct.positive { color: #22c55e; } .reaction-pct.negative { color: #ef4444; } .reaction-pct.neutral { color: #4b5563; } .reaction-text { font-size: 11px; color: #9ca3af; font-family: 'JetBrains Mono', monospace; line-height: 1.4; } .reaction-text.muted { color: #4b5563; } .earnings-card-countdown { font-size: 12px; color: #f59e0b; margin-bottom: 8px; } .earnings-note-btn { background: transparent; border: 1px solid #1e293b; color: #60a5fa; font-size: 11px; padding: 4px 10px; border-radius: 4px; cursor: pointer; transition: all 0.15s; font-family: 'Inter', sans-serif; } .earnings-note-btn:hover { background: rgba(59, 130, 246, 0.1); border-color: #3b82f6; } /* --- Next Up (15-45 day preview) --- */ .earnings-next-up { margin-top: 12px; padding-top: 12px; border-top: 1px solid #1e293b; } .earnings-next-up-title { font-size: 11px; color: #6b7280; font-weight: 600; margin: 0 0 8px 0; } .earnings-next-up-list { display: flex; flex-direction: column; gap: 4px; } .earnings-next-up-item { display: grid; grid-template-columns: 56px 1fr 90px 40px; gap: 8px; font-size: 11px; padding: 4px 6px; border-radius: 3px; align-items: center; } .earnings-next-up-item:hover { background: var(--bg-hover); } .nui-ticker { font-family: 'JetBrains Mono', monospace; font-weight: 600; color: #e5e7eb; } .nui-name { color: #9ca3af; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nui-date { font-family: 'JetBrains Mono', monospace; color: #6b7280; text-align: right; } .nui-days { font-family: 'JetBrains Mono', monospace; color: #f59e0b; text-align: right; } /* --- Earnings Note Modal --- */ .earnings-note-modal { max-width: 720px; width: 90vw; max-height: 85vh; overflow-y: auto; } .earnings-note-content { font-family: 'Inter', sans-serif; font-size: 13px; line-height: 1.65; color: #d1d5db; } .earnings-note-content h2 { font-size: 18px; color: #f3f4f6; margin: 0 0 12px 0; font-weight: 700; } .earnings-note-content h3 { font-size: 14px; color: #e5e7eb; margin: 20px 0 8px 0; font-weight: 600; } .earnings-note-content h4 { font-size: 12px; color: #9ca3af; margin: 16px 0 6px 0; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; } .earnings-note-content p { margin: 0 0 8px 0; } .earnings-note-content strong { color: #e5e7eb; } .earnings-note-content ul { margin: 4px 0 12px 0; padding-left: 18px; } .earnings-note-content li { margin-bottom: 4px; } .earnings-note-content hr { border: none; border-top: 1px solid #1e293b; margin: 16px 0; } .earnings-note-content a { color: #60a5fa; text-decoration: none; } .earnings-note-content a:hover { text-decoration: underline; } .earnings-md-table { width: 100%; border-collapse: collapse; margin: 8px 0 16px 0; font-size: 12px; } .earnings-md-table th, .earnings-md-table td { padding: 6px 10px; border: 1px solid #1e293b; text-align: left; } .earnings-md-table th { background: var(--bg-surface); color: var(--text-primary); font-weight: 600; } .earnings-md-table td { color: #d1d5db; } .earnings-note-loading, .earnings-note-error { text-align: center; padding: 40px 20px; color: #6b7280; font-size: 13px; } /* --- Earnings Archive Modal --- */ .earnings-archive-modal { max-width: 800px; width: 95vw; max-height: 85vh; overflow-y: auto; } .archive-section { margin-bottom: 24px; } .archive-section-title { font-size: 12px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin: 0 0 10px 0; padding-bottom: 6px; border-bottom: 1px solid var(--border); } .archive-notes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; } .archive-note-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 6px; padding: 12px 14px; cursor: pointer; transition: border-color 0.15s, background 0.15s; } .archive-note-card:hover { border-color: var(--accent); background: var(--bg-hover); } .archive-note-card.archived { opacity: 0.7; } .archive-note-card.archived:hover { opacity: 1; } .archive-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .archive-card-ticker { font-family: var(--font-mono); font-weight: 700; font-size: 13px; color: var(--accent); } .archive-card-name { font-size: 12px; color: var(--text-secondary); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .archive-card-type { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; padding: 1px 6px; border-radius: 3px; } .archive-card-type.post { color: var(--green); background: var(--green-dim); } .archive-card-type.pre { color: var(--accent); background: rgba(59,130,246,0.1); } .archive-card-date { font-size: 11px; color: var(--text-muted); margin-bottom: 6px; } .archive-card-headline { font-size: 11px; color: var(--text-primary); line-height: 1.4; margin-bottom: 6px; } .archive-card-metrics { display: flex; gap: 10px; margin-bottom: 6px; } .archive-metric { font-family: var(--font-mono); font-size: 10px; color: var(--text-secondary); padding: 2px 6px; background: rgba(255,255,255,0.03); border-radius: 3px; } .archive-metric.positive { color: var(--green); } .archive-metric.negative { color: var(--red); } .archive-card-cta { font-size: 11px; color: var(--accent); font-weight: 500; } /* === WEEKLY BRIEFING === */ .weekly-briefing-section { margin-top: 32px; } .weekly-briefing-content { padding: 0 4px; } .wb-empty { color: #6b7280; font-size: 0.875rem; padding: 24px 0; text-align: center; } .wb-status { color: #6b7280; font-size: 0.75rem; } .wb-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 0 8px; border-bottom: 1px solid #1e2433; flex-wrap: wrap; gap: 8px; } .wb-date { font-family: 'JetBrains Mono', monospace; font-size: 0.9rem; font-weight: 600; color: #e5e7eb; } .wb-indices { display: flex; gap: 16px; } .wb-index { font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; font-weight: 500; padding: 3px 8px; border-radius: 4px; background: rgba(255,255,255,0.03); } .wb-index.positive { color: #22c55e; } .wb-index.negative { color: #ef4444; } .wb-narrative { color: #9ca3af; font-size: 0.85rem; line-height: 1.5; padding: 12px 0 16px; } .wb-section { margin: 20px 0; } .wb-section-title { font-size: 0.95rem; font-weight: 600; color: #e5e7eb; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; } .wb-section-title .wb-icon { color: #3b82f6; font-size: 1.1rem; } .wb-section-title .wb-subtitle { font-weight: 400; color: #6b7280; font-size: 0.8rem; margin-left: 4px; } .wb-sub-header { font-size: 0.8rem; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 8px; } /* --- Cards grid --- */ .wb-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; } .wb-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; position: relative; transition: border-color 0.15s; } .wb-card:hover { border-color: #2d3748; } .wb-value-card { border-left: 3px solid #3b82f6; } .wb-momentum-card { border-left: 3px solid #22c55e; } .wb-card-rank { position: absolute; top: 10px; right: 12px; font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; font-weight: 700; color: #4b5563; } .wb-card-header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; } .wb-card-ticker { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 1rem; color: #e5e7eb; } .wb-card-name { font-size: 0.8rem; color: #9ca3af; } .wb-card-price { font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; color: #d1d5db; margin-left: auto; } .wb-card-stats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .wb-stat { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; padding: 2px 7px; border-radius: 3px; background: rgba(255,255,255,0.04); color: #9ca3af; } .wb-stat.positive { color: #22c55e; background: rgba(34,197,94,0.08); } .wb-stat.negative { color: #ef4444; background: rgba(239,68,68,0.08); } .wb-card-thesis, .wb-card-bull { font-size: 0.8rem; color: #d1d5db; line-height: 1.45; margin-bottom: 6px; } /* --- Per-stock primer expander on each value/momentum card --- */ .wb-card-primer { margin-top: 10px; border-top: 1px solid #1e2433; padding-top: 10px; } .wb-card-primer > summary.wb-primer-toggle { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #9ca3af; padding: 3px 8px; border-radius: 3px; background: rgba(255,255,255,0.04); transition: color 0.12s ease, background 0.12s ease; user-select: none; } .wb-card-primer > summary.wb-primer-toggle::-webkit-details-marker { display: none; } .wb-card-primer > summary.wb-primer-toggle:hover, .wb-card-primer > summary.wb-primer-toggle:focus-visible { color: #e5e7eb; background: rgba(255,255,255,0.07); outline: none; } .wb-card-primer > summary.wb-primer-toggle:focus-visible { box-shadow: 0 0 0 2px rgba(59,130,246,0.6); } .wb-primer-toggle-caret { display: inline-block; transition: transform 0.15s ease; font-size: 0.7rem; line-height: 1; } .wb-card-primer[open] > summary.wb-primer-toggle .wb-primer-toggle-caret { transform: rotate(90deg); } .wb-primer-body { margin-top: 10px; padding-top: 4px; animation: wb-primer-fade 0.18s ease; display: flex; flex-direction: column; gap: 10px; } .wb-primer-part { padding: 8px 10px; background: rgba(255,255,255,0.015); border-left: 2px solid #1e2a3a; border-radius: 3px; } .wb-primer-part-head { margin-bottom: 4px; } .wb-primer-headline { margin: 0 0 6px 0; font-size: 0.82rem; line-height: 1.45; color: #e5e7eb; font-weight: 500; } .wb-primer-bullets { margin: 0; padding-left: 18px; list-style: disc; } .wb-primer-bullets li { font-size: 0.76rem; line-height: 1.5; color: #9ca3af; margin-bottom: 3px; } .wb-value-card .wb-primer-part { border-left-color: #22c55e; } .wb-momentum-card .wb-primer-part { border-left-color: #3b82f6; } /* Bear-case "Why it could go lower": orange/red accent to contrast bull-case green. */ .wb-value-card .wb-primer-part--bear, .wb-primer-part--bear { border-left-color: #f97316; } .wb-primer-part--bear .wb-label { color: #f97316; } .wb-primer-placeholder { color: #6b7280; font-style: italic; font-weight: 400; } .wb-drawer-section--bear .wb-drawer-sectionhead { color: #f97316; } .wb-primer-footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 4px; padding-top: 8px; border-top: 1px dashed #1e2433; } .wb-primer-openfull { background: rgba(59,130,246,0.12); border: 1px solid rgba(59,130,246,0.35); color: #93c5fd; font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; padding: 5px 10px; border-radius: 3px; cursor: pointer; transition: background 0.12s ease, color 0.12s ease; } .wb-primer-openfull:hover { background: rgba(59,130,246,0.22); color: #dbeafe; } .wb-primer-share { font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; color: #6b7280; text-decoration: none; letter-spacing: 0.04em; text-transform: uppercase; } .wb-primer-share:hover { color: #9ca3af; } /* Expand-all section toggle */ .wb-expand-all { margin-left: auto; background: transparent; border: 1px solid #2a3444; color: #9ca3af; font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 4px 10px; border-radius: 3px; cursor: pointer; transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease; } .wb-expand-all:hover { color: #e5e7eb; border-color: #3b82f6; background: rgba(59,130,246,0.08); } /* --- Primer drawer (side panel for full narrative) --- */ .wb-drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.55); opacity: 0; transition: opacity 0.2s ease; z-index: 9998; pointer-events: none; } .wb-drawer-overlay.active { opacity: 1; pointer-events: auto; } .wb-drawer { position: fixed; top: 0; right: 0; width: min(560px, 100vw); height: 100vh; background: var(--bg-primary); border-left: 1px solid var(--border); box-shadow: -10px 0 40px rgba(0,0,0,0.6); transform: translateX(100%); transition: transform 0.22s ease; z-index: 9999; display: flex; flex-direction: column; overflow: hidden; } .wb-drawer.active { transform: translateX(0); } body.wb-drawer-open { overflow: hidden; } .wb-drawer-header { padding: 20px 22px 14px; border-bottom: 1px solid #1e2433; background: linear-gradient(180deg, #111827 0%, #0b1019 100%); } .wb-drawer-titlerow { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .wb-drawer-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .wb-drawer-ticker { font-family: 'JetBrains Mono', monospace; font-size: 1.35rem; font-weight: 700; color: #e5e7eb; letter-spacing: 0.03em; } .wb-drawer-name { font-size: 0.85rem; color: #9ca3af; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 440px; } .wb-drawer-close { background: transparent; border: none; color: #9ca3af; font-size: 1.6rem; line-height: 1; padding: 2px 8px; cursor: pointer; border-radius: 3px; transition: color 0.12s ease, background 0.12s ease; } .wb-drawer-close:hover { color: #e5e7eb; background: rgba(255,255,255,0.06); } .wb-drawer-kind { margin-top: 4px; font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; color: #6b7280; letter-spacing: 0.04em; text-transform: uppercase; } .wb-drawer-stats { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; } .wb-drawer-actions { margin-top: 12px; display: flex; gap: 8px; } .wb-drawer-share { background: rgba(255,255,255,0.04); border: 1px solid #2a3444; color: #9ca3af; font-family: 'JetBrains Mono', monospace; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 5px 10px; border-radius: 3px; cursor: pointer; } .wb-drawer-share:hover { color: #e5e7eb; border-color: #3b82f6; } .wb-drawer-body { flex: 1; overflow-y: auto; padding: 18px 22px 32px; } .wb-drawer-section { margin-bottom: 22px; padding-bottom: 18px; border-bottom: 1px dashed #1e2433; } .wb-drawer-section:last-child { border-bottom: none; } .wb-drawer-sectionhead { margin: 0 0 10px 0; font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #3b82f6; } .wb-value-card ~ .wb-drawer .wb-drawer-sectionhead, .wb-drawer[aria-label*="value"] .wb-drawer-sectionhead { color: #22c55e; } .wb-drawer-subsection { margin-bottom: 14px; padding: 10px 14px; background: rgba(255,255,255,0.02); border-left: 2px solid #1e2a3a; border-radius: 3px; } .wb-drawer-subhead { font-size: 0.78rem; font-weight: 600; color: #e5e7eb; margin-bottom: 6px; } .wb-drawer-body p { margin: 0 0 10px 0; font-size: 0.85rem; line-height: 1.6; color: #d1d5db; } .wb-drawer-body p:last-child { margin-bottom: 0; } @media (max-width: 640px) { .wb-drawer { width: 100vw; } .wb-drawer-name { max-width: 60vw; } } @keyframes wb-primer-fade { from { opacity: 0; transform: translateY(-2px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .wb-primer-body { animation: none; } .wb-primer-toggle-caret { transition: none; } .wb-drawer { transition: none; } .wb-drawer-overlay { transition: none; } } .wb-label { font-weight: 600; font-size: 0.72rem; color: #6b7280; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; } /* --- Trends & Risks lists --- */ .wb-list { display: flex; flex-direction: column; gap: 8px; } .wb-list-item { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 6px; padding: 10px 14px; } .wb-list-title { font-weight: 600; font-size: 0.85rem; color: #e5e7eb; margin-bottom: 4px; } .wb-list-detail { font-size: 0.8rem; color: #9ca3af; line-height: 1.45; } .wb-risk-item { border-left: 3px solid #f59e0b; } /* --- Watchlist updates --- */ .wb-updates-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; } .wb-update-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 6px; padding: 12px 14px; } .wb-update-card.wb-up { border-left: 3px solid #22c55e; } .wb-update-card.wb-down { border-left: 3px solid #ef4444; } .wb-update-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .wb-update-ticker { font-family: 'JetBrains Mono', monospace; font-weight: 700; font-size: 0.9rem; color: #e5e7eb; } .wb-update-perfs { display: flex; gap: 8px; } .wb-perf { font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; padding: 2px 6px; border-radius: 3px; } .wb-perf.positive { color: #22c55e; background: rgba(34,197,94,0.08); } .wb-perf.negative { color: #ef4444; background: rgba(239,68,68,0.08); } .wb-perf.neutral { color: #9ca3af; background: rgba(156,163,175,0.08); } .wb-update-card.wb-neutral { border-left-color: #4b5563; } .wb-update-headline { font-weight: 600; font-size: 0.8rem; color: #d1d5db; margin-bottom: 4px; } .wb-update-detail { font-size: 0.78rem; color: #9ca3af; line-height: 1.4; } .wb-updates-compact { display: flex; flex-direction: column; gap: 4px; } .wb-compact-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: #111827; border: 1px solid #1e2433; border-radius: 4px; font-size: 0.78rem; } .wb-compact-ticker { font-family: 'JetBrains Mono', monospace; font-weight: 600; color: #e5e7eb; min-width: 48px; } .wb-compact-headline { color: #9ca3af; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wb-headline-missing { color: #6b7280; font-style: italic; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wb-news-positive { color: #34d399; text-decoration: none; border-bottom: 1px dotted rgba(52, 211, 153, 0.35); transition: color 0.15s ease; } .wb-news-positive:hover { color: #6ee7b7; border-bottom-color: rgba(110, 231, 183, 0.65); } .wb-news-negative { color: #f87171; text-decoration: none; border-bottom: 1px dotted rgba(248, 113, 113, 0.35); transition: color 0.15s ease; } .wb-news-negative:hover { color: #fca5a5; border-bottom-color: rgba(252, 165, 165, 0.65); } .wb-news-neutral { color: #cbd5e1; text-decoration: none; border-bottom: 1px dotted rgba(203, 213, 225, 0.35); } .wb-30d-pill { display: inline-flex; align-items: baseline; padding: 1px 6px; margin-left: 6px; font-family: 'JetBrains Mono', monospace; font-size: 0.72rem; font-weight: 600; border-radius: 3px; background: rgba(148, 163, 184, 0.12); color: #cbd5e1; } .wb-30d-pill.up { color: #34d399; background: rgba(52, 211, 153, 0.10); } .wb-30d-pill.down { color: #f87171; background: rgba(248, 113, 113, 0.10); } .wb-perf-caret { display: inline-block; margin-right: 2px; font-size: 0.65rem; line-height: 1; transform: translateY(-1px); } .wb-archive-link { margin-top: 20px; text-align: center; } /* === EARNINGS CALENDAR === */ .earnings-calendar-section { padding: 0 16px 16px; } .earnings-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; margin-top: 8px; } .ecal-day-header { background: var(--bg-header); padding: 6px 4px; text-align: center; font-family: var(--font-sans); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); } .ecal-cell { background: var(--bg-primary); min-height: 72px; padding: 4px; position: relative; } .ecal-cell.ecal-today { background: rgba(59,130,246,0.06); } .ecal-cell.ecal-other-month { opacity: 0.35; } .ecal-date { font-size: 10px; font-weight: 500; color: var(--text-muted); margin-bottom: 2px; padding: 0 2px; } .ecal-today .ecal-date { color: var(--accent); font-weight: 700; } .ecal-tickers { display: flex; flex-wrap: wrap; gap: 2px; } .ecal-ticker-chip { font-family: var(--font-mono); font-size: 9px; font-weight: 600; padding: 1px 4px; border-radius: 3px; cursor: pointer; transition: background 0.1s; } .ecal-ticker-chip.ecal-pre { color: var(--accent); background: rgba(59,130,246,0.1); } .ecal-ticker-chip.ecal-pre:hover { background: rgba(59,130,246,0.2); } .ecal-ticker-chip.ecal-post { color: var(--green); background: var(--green-dim); } .ecal-ticker-chip.ecal-post:hover { background: rgba(34,197,94,0.2); } .ecal-nav { display: flex; align-items: center; gap: 12px; } .ecal-nav-btn { background: none; border: 1px solid var(--border); color: var(--text-secondary); font-size: 12px; padding: 3px 10px; border-radius: 4px; cursor: pointer; transition: border-color 0.15s, color 0.15s; } .ecal-nav-btn:hover { border-color: var(--accent); color: var(--accent); } .ecal-month-label { font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: var(--text-secondary); min-width: 120px; text-align: center; } /* === RESPONSIVE === */ @media (max-width: 900px) { .header-meta { flex-direction: column; gap: 2px; align-items: flex-end; } .search-wrapper input { width: 140px; } .search-dropdown { width: 260px; } .quant-factors-grid { grid-template-columns: 1fr; } .short-interest-metrics { flex-direction: column; } .si-cards { grid-template-columns: 1fr; } .comps-table { min-width: 700px; } .earnings-panels { grid-template-columns: 1fr; } .tab-btn { padding: 8px 12px; font-size: 11px; } .tab-btn svg { width: 12px; height: 12px; } .earnings-calendar-grid { grid-template-columns: repeat(7, 1fr); } .ecal-cell { min-height: 56px; } .ecal-ticker-chip { font-size: 8px; } } /* ===== MACRO TAB ===== */ .macro-content { padding: 0; } .macro-loading, .macro-empty { padding: 40px 20px; text-align: center; color: var(--text-muted); font-size: 13px; } /* Regime Banner */ .macro-regime-banner { background: var(--bg-surface); padding: 14px 18px; margin: 12px 16px; border-radius: 6px; } .regime-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .regime-label-group { display: flex; align-items: center; gap: 8px; } .regime-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .regime-label { font-family: var(--font-mono); font-size: 16px; font-weight: 700; color: var(--text-primary); } .regime-updated { font-size: 11px; color: var(--text-muted); } .regime-desc { font-size: 12px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 8px; } .regime-tilts { display: flex; gap: 8px; flex-wrap: wrap; } .tilt-tag { font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 3px; font-family: var(--font-mono); } .tilt-favor { background: var(--green-dim); color: var(--green); } .tilt-avoid { background: var(--red-dim); color: var(--red); } /* Leaning regime variant — dashed left border + amber LEANING badge */ .macro-regime-banner-leaning { border-left-style: dashed !important; } .regime-label-leaning { font-style: normal; letter-spacing: 0.2px; } .regime-tier-badge { font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.5px; padding: 2px 6px; border-radius: 3px; background: rgba(234, 179, 8, 0.18); color: #eab308; border: 1px solid rgba(234, 179, 8, 0.35); margin-left: 4px; } /* Today's tactical tilt line (under regime banner) */ .macro-todays-tilt { margin-top: 10px; padding-top: 8px; border-top: 1px dashed rgba(255,255,255,0.08); font-size: 11px; color: var(--text-secondary); line-height: 1.5; font-family: var(--font-mono); } .tilt-line-label { font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; font-size: 10px; margin-right: 6px; color: var(--text-muted); } .tilt-line-risk-on .tilt-line-label { color: var(--green); } .tilt-line-risk-off .tilt-line-label { color: var(--red); } .tilt-line-mixed .tilt-line-label { color: #eab308; } .tilt-line-body { color: var(--text-primary); } /* Recent rotation alert chips (under banner, above pillars) */ .macro-recent-rotations-placeholder { padding: 0 16px; } .macro-recent-rotations { margin: -4px 0 12px; padding: 8px 12px; background: var(--bg-surface); border-radius: 6px; border: 1px solid rgba(255,255,255,0.04); } .recent-rotations-label { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); margin-bottom: 6px; font-family: var(--font-mono); } .recent-rotations-chips { display: flex; flex-wrap: wrap; gap: 6px; } .rotation-chip { font-family: var(--font-mono); font-size: 10px; padding: 3px 8px; border-radius: 3px; border: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.03); color: var(--text-secondary); white-space: nowrap; } .rotation-chip-up { background: var(--green-dim); color: var(--green); border-color: rgba(34,197,94,0.25); } .rotation-chip-down { background: var(--red-dim); color: var(--red); border-color: rgba(239,68,68,0.25); } /* Pillar Tiles */ .macro-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 0 16px 12px; } .macro-pillar-tile { background: var(--bg-surface); border-radius: 6px; padding: 12px 14px; min-width: 0; } .pillar-header { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; } .pillar-icon { font-size: 14px; } .pillar-header h4 { font-size: 12px; font-weight: 600; color: var(--text-primary); flex: 1; } .pillar-badge { font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 3px; font-family: var(--font-mono); letter-spacing: 0.02em; } .pillar-na { font-size: 11px; color: var(--text-muted); } /* Score bar */ .pillar-score-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .score-track { flex: 1; height: 4px; background: var(--bg-primary); border-radius: 2px; position: relative; } .score-fill { position: absolute; top: 0; height: 100%; border-radius: 2px; transition: width 0.3s; } .score-center { position: absolute; top: -2px; left: 50%; transform: translateX(-50%); width: 2px; height: 8px; background: var(--text-muted); border-radius: 1px; } .score-val { font-family: var(--font-mono); font-size: 10px; color: var(--text-secondary); min-width: 34px; text-align: right; } /* Pillar signals */ .pillar-signals { border-top: 1px solid var(--border); padding-top: 6px; } .pillar-signal { display: flex; align-items: center; gap: 4px; padding: 3px 0; font-size: 10px; white-space: nowrap; } .pillar-signal-header { color: var(--text-muted); font-weight: 600; font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 1px solid var(--border); padding-bottom: 3px; margin-bottom: 2px; } .signal-name { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1 1 80px; min-width: 80px; } .signal-price { font-family: var(--font-mono); text-align: right; color: var(--text-primary); min-width: 46px; flex-shrink: 0; } .signal-dir { text-align: center; font-size: 11px; min-width: 20px; flex-shrink: 0; } .signal-chg { font-family: var(--font-mono); text-align: right; font-size: 10px; min-width: 40px; flex-shrink: 0; } /* Indices Bar */ .macro-indices-bar { display: flex; gap: 8px; padding: 0 16px 12px; flex-wrap: wrap; } .index-chip { background: var(--bg-surface); padding: 6px 12px; border-radius: 4px; display: flex; align-items: center; gap: 8px; font-size: 11px; flex: 1; min-width: 140px; } .index-name { color: var(--text-secondary); font-weight: 500; } .index-price { font-family: var(--font-mono); color: var(--text-primary); font-weight: 600; } .index-chg { font-family: var(--font-mono); font-size: 10px; margin-left: auto; } .vix-high { border-left: 3px solid var(--red); } .vix-elevated { border-left: 3px solid var(--yellow); } .vix-low { border-left: 3px solid var(--green); } /* Two-column layout */ .macro-grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 16px 16px; } .macro-col { display: flex; flex-direction: column; gap: 12px; } /* Macro card */ .macro-card { background: var(--bg-surface); border-radius: 6px; padding: 14px; } .macro-card-title { font-size: 12px; font-weight: 700; color: var(--text-primary); margin-bottom: 10px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; } /* Heatmap rows */ .hm-header, .hm-row { display: flex; align-items: center; gap: 6px; white-space: nowrap; } .hm-header { padding: 0 0 4px; border-bottom: 1px solid var(--border); margin-bottom: 4px; font-size: 9px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; } .hm-row { padding: 4px 0; border-bottom: 1px solid rgba(30,41,59,0.4); font-size: 11px; } .hm-row:last-child { border-bottom: none; } .hm-ticker { font-family: var(--font-mono); font-weight: 600; color: var(--text-primary); font-size: 10px; min-width: 36px; flex-shrink: 0; } .hm-name { color: var(--text-secondary); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 70px; flex: 1 1 70px; } .hm-tag { font-size: 8px; font-weight: 700; padding: 1px 4px; border-radius: 2px; font-family: var(--font-mono); letter-spacing: 0.05em; flex-shrink: 0; } .hm-favor { background: var(--green-dim); color: var(--green); } .hm-avoid { background: var(--red-dim); color: var(--red); } /* Diverging momentum bar — centered at 0, extends left (red) or right (green) */ .hm-diverge-wrap { position: relative; height: 22px; background: rgba(17,24,39,0.6); border-radius: 3px; min-width: 120px; flex: 1 1 120px; overflow: hidden; } .hm-diverge-center { position: absolute; left: 50%; top: 2px; bottom: 2px; width: 1px; background: var(--border-light); } .hm-diverge-bar { position: absolute; top: 3px; bottom: 3px; border-radius: 2px; transition: width 0.4s ease; opacity: 0.75; } .hm-diverge-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: var(--font-mono); font-size: 9px; font-weight: 600; text-shadow: 0 0 4px rgba(0,0,0,0.8); z-index: 1; } .hm-header .hm-diverge-wrap { background: none; height: auto; text-align: center; font-size: 9px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; display: flex; align-items: center; justify-content: center; } .hm-val { font-family: var(--font-mono); font-size: 10px; text-align: right; min-width: 42px; flex-shrink: 0; } /* Stock Ideas */ .ideas-section { margin-bottom: 12px; } .ideas-section:last-child { margin-bottom: 0; } .ideas-heading { font-size: 11px; font-weight: 700; padding: 4px 0; margin-bottom: 4px; border-bottom: 1px solid var(--border); } .ideas-own-heading { color: var(--green); } .ideas-avoid-heading { color: var(--red); } .idea-row { display: grid; grid-template-columns: 54px 1fr auto; gap: 6px; padding: 5px 0; font-size: 11px; border-bottom: 1px solid rgba(30,41,59,0.3); } .idea-row:last-child { border-bottom: none; } .idea-ticker { font-family: var(--font-mono); font-weight: 700; color: var(--text-primary); } .idea-name { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .idea-subsector { font-size: 9px; color: var(--text-muted); font-family: var(--font-mono); } .idea-reason { grid-column: 1 / -1; font-size: 10px; color: var(--text-muted); line-height: 1.4; } .idea-own { border-left: 2px solid var(--green); padding-left: 8px; } .idea-avoid { border-left: 2px solid var(--red); padding-left: 8px; } /* Rich idea rows (idea engine output) */ .idea-row-rich { display: flex; flex-direction: column; gap: 4px; padding: 7px 0 8px; font-size: 11px; border-bottom: 1px solid rgba(30,41,59,0.3); } .idea-row-rich:last-child { border-bottom: none; } .idea-row-rich.idea-own { border-left: 2px solid var(--green); padding-left: 8px; } .idea-row-rich.idea-avoid { border-left: 2px solid var(--red); padding-left: 8px; } .idea-row-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .idea-row-head .idea-ticker { font-size: 12px; } .idea-row-head .idea-name { flex: 1; min-width: 0; font-size: 11px; } .idea-row-head .idea-subsector { white-space: nowrap; } .idea-score-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; padding: 2px 6px; border-radius: 10px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; background: rgba(100,116,139,0.15); color: var(--text-secondary); border: 1px solid rgba(100,116,139,0.3); } .idea-score-pill.val-pos { background: rgba(34,197,94,0.12); color: var(--green); border-color: rgba(34,197,94,0.35); } .idea-score-pill.val-neg { background: rgba(239,68,68,0.12); color: var(--red); border-color: rgba(239,68,68,0.35); } .idea-score-pill.val-neutral { background: rgba(100,116,139,0.12); color: var(--text-secondary); border-color: rgba(100,116,139,0.3); } .idea-row-body { display: flex; flex-direction: column; gap: 5px; } .idea-reason-bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: 10.5px; line-height: 1.4; color: var(--text-secondary); } .idea-reason-bullets li { position: relative; padding-left: 12px; } .idea-reason-bullets li::before { content: '•'; position: absolute; left: 2px; top: 0; color: var(--text-muted); } .idea-reason-bullets li.val-pos { color: var(--green); } .idea-reason-bullets li.val-pos::before { color: var(--green); } .idea-reason-bullets li.val-neg { color: var(--red); } .idea-reason-bullets li.val-neg::before { color: var(--red); } .idea-reason-bullets li.val-neutral { color: var(--text-secondary); } .idea-tag-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; } .idea-tag { display: inline-flex; align-items: center; padding: 1px 7px; border-radius: 8px; font-size: 9.5px; font-weight: 500; background: rgba(56,189,248,0.10); color: var(--text-secondary); border: 1px solid rgba(56,189,248,0.25); white-space: nowrap; } /* Commodities & Rates */ .commodity-header, .commodity-row { display: flex; align-items: center; gap: 6px; white-space: nowrap; } .commodity-header { padding: 0 0 4px; border-bottom: 1px solid var(--border); margin-bottom: 4px; font-size: 9px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; } .commodity-row { padding: 4px 0; font-size: 11px; border-bottom: 1px solid rgba(30,41,59,0.3); } .commodity-row:last-child { border-bottom: none; } .commodity-name { color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 80px; flex: 1 1 80px; } .commodity-price { font-family: var(--font-mono); font-weight: 600; color: var(--text-primary); text-align: right; min-width: 56px; flex-shrink: 0; } .commodity-chg { font-family: var(--font-mono); font-size: 10px; text-align: right; min-width: 42px; flex-shrink: 0; } /* Horizontal scroll wrappers — each section scrolls its own content */ .pillar-signals { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(148, 163, 184, 0.25) transparent; } .pillar-signals .pillar-signal { min-width: 480px; } .hm-scroll-wrap, .commodity-scroll-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(148, 163, 184, 0.25) transparent; } /* Slim, aesthetic scrollbars for macro panel horizontal overflow */ .pillar-signals::-webkit-scrollbar, .hm-scroll-wrap::-webkit-scrollbar, .commodity-scroll-wrap::-webkit-scrollbar { height: 6px; width: 6px; background: transparent; } .pillar-signals::-webkit-scrollbar-track, .hm-scroll-wrap::-webkit-scrollbar-track, .commodity-scroll-wrap::-webkit-scrollbar-track { background: transparent; margin: 0 4px; } .pillar-signals::-webkit-scrollbar-thumb, .hm-scroll-wrap::-webkit-scrollbar-thumb, .commodity-scroll-wrap::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.22); border-radius: 999px; border: 1px solid transparent; background-clip: padding-box; transition: background 0.18s ease; } .pillar-signals:hover::-webkit-scrollbar-thumb, .hm-scroll-wrap:hover::-webkit-scrollbar-thumb, .commodity-scroll-wrap:hover::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.45); } .pillar-signals::-webkit-scrollbar-thumb:hover, .hm-scroll-wrap::-webkit-scrollbar-thumb:hover, .commodity-scroll-wrap::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.65); } .pillar-signals::-webkit-scrollbar-button, .hm-scroll-wrap::-webkit-scrollbar-button, .commodity-scroll-wrap::-webkit-scrollbar-button { display: none; width: 0; height: 0; } .pillar-signals::-webkit-scrollbar-corner, .hm-scroll-wrap::-webkit-scrollbar-corner, .commodity-scroll-wrap::-webkit-scrollbar-corner { background: transparent; } /* Mobile responsive */ @media (max-width: 900px) { .macro-pillars { grid-template-columns: 1fr 1fr; } .macro-grid-2col { grid-template-columns: 1fr; } } @media (max-width: 600px) { .macro-pillars { grid-template-columns: 1fr; } .macro-indices-bar { flex-direction: column; } .index-chip { min-width: unset; } } /* =================================================================== NOTE ENHANCEMENT STYLES 1. Confidence / quality header 2. Note tab bar (Note | Comps | Transcript) 3. Peer comps panel 4. Transcript panel 5. Note search modal 6. Utility: .pos / .neg / .neutral =================================================================== */ /* --- Utility color classes --- */ .pos { color: var(--green); } .neg { color: var(--red); } .neutral { color: var(--text-muted); } /* =================================================================== 1. CONFIDENCE HEADER =================================================================== */ .note-confidence-header { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px; border-radius: 6px; margin-bottom: 12px; font-size: 12px; border: 1px solid; } .note-confidence-header.conf-tier-high { background: rgba(34, 197, 94, 0.08); border-color: rgba(34, 197, 94, 0.25); } .note-confidence-header.conf-tier-medium { background: rgba(234, 179, 8, 0.08); border-color: rgba(234, 179, 8, 0.25); } .note-confidence-header.conf-tier-low { background: rgba(239, 68, 68, 0.07); border-color: rgba(239, 68, 68, 0.22); } .conf-main { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .conf-tier-badge { font-size: 10px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; white-space: nowrap; } .conf-tier-badge.conf-tier-high { background: rgba(34, 197, 94, 0.18); color: var(--green); } .conf-tier-badge.conf-tier-medium { background: rgba(234, 179, 8, 0.18); color: var(--yellow); } .conf-tier-badge.conf-tier-low { background: rgba(239, 68, 68, 0.15); color: var(--red); } .conf-freshness { color: var(--text-muted); font-size: 11px; } .conf-pills { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; } .conf-pill { font-size: 10px; padding: 2px 6px; border-radius: 3px; background: var(--bg-tertiary); color: var(--text-secondary); border: 1px solid var(--border); } .conf-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; } .conf-flag { font-size: 10px; padding: 2px 7px; border-radius: 3px; background: rgba(234, 179, 8, 0.12); color: var(--yellow); border: 1px solid rgba(234, 179, 8, 0.25); } /* =================================================================== 2. NOTE TAB BAR =================================================================== */ .note-tab-bar { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 16px; padding-bottom: 0; } .note-tab { background: none; border: none; border-bottom: 2px solid transparent; padding: 7px 14px 8px; font-size: 12px; font-weight: 500; color: var(--text-muted); cursor: pointer; margin-bottom: -1px; transition: color 0.15s, border-color 0.15s; letter-spacing: 0.02em; } .note-tab:hover { color: var(--text-primary); } .note-tab.active { color: var(--accent); border-bottom-color: var(--accent); } .note-panel { display: none; } .note-panel.active { display: block; } .note-panel-loading { color: var(--text-muted); font-size: 13px; padding: 24px 0; text-align: center; } .note-panel-empty { color: var(--text-muted); font-size: 13px; padding: 24px 0; text-align: center; } /* =================================================================== 3. PEER COMPS PANEL =================================================================== */ .note-comps-panel { display: flex; flex-direction: column; gap: 20px; } .note-comps-header { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .note-comps-title { font-size: 14px; font-weight: 600; color: var(--text-primary); } .note-comps-subsector { font-size: 11px; color: var(--text-muted); padding: 2px 8px; background: var(--bg-tertiary); border-radius: 3px; border: 1px solid var(--border); } /* Narrative paragraphs */ .comps-narrative { display: flex; flex-direction: column; gap: 10px; line-height: 1.55; } .comps-para { font-size: 13px; color: var(--text-secondary); margin: 0; } .comps-para-label { font-weight: 700; color: var(--text-primary); margin-right: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; } .comps-para-standout { border-left: 2px solid var(--accent); padding-left: 10px; background: rgba(59, 130, 246, 0.04); border-radius: 0 4px 4px 0; padding-top: 6px; padding-bottom: 6px; } /* Bar charts section */ .comps-bars-section { display: flex; flex-direction: column; gap: 14px; } .comps-bars-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: -4px; } .comp-metric-block { display: flex; flex-direction: column; gap: 5px; } .comp-metric-label { font-size: 11px; font-weight: 600; color: var(--text-secondary); margin-bottom: 2px; text-transform: uppercase; letter-spacing: 0.04em; } .comp-bar-row { display: flex; align-items: center; gap: 8px; height: 22px; } .comp-bar-row-target { /* slightly highlighted */ } .comp-bar-ticker { font-size: 10px; font-family: var(--font-mono); color: var(--text-muted); min-width: 36px; flex-shrink: 0; } .comp-bar-row-target .comp-bar-ticker { color: var(--accent); font-weight: 700; } .comp-bar-track { flex: 1; height: 7px; background: var(--bg-tertiary); border-radius: 3px; overflow: hidden; } .comp-bar { height: 100%; border-radius: 3px; transition: width 0.4s ease; } .comp-bar.bar-target { background: var(--accent); } .comp-bar.bar-good { background: var(--green); } .comp-bar.bar-neutral { background: var(--text-muted); opacity: 0.5; } .comp-bar-val { font-size: 10px; font-family: var(--font-mono); color: var(--text-muted); min-width: 42px; text-align: right; flex-shrink: 0; } .comp-bar-val.target-val { color: var(--accent); font-weight: 700; } /* Comps reference table */ .comps-table-details { border: 1px solid var(--border); border-radius: 6px; overflow: hidden; } .comps-table-summary { padding: 8px 12px; font-size: 12px; font-weight: 500; color: var(--text-muted); cursor: pointer; user-select: none; background: var(--bg-secondary); list-style: none; } .comps-table-summary::-webkit-details-marker { display: none; } .comps-table-summary::before { content: '▶ '; font-size: 9px; margin-right: 4px; display: inline-block; transition: transform 0.2s; } .comps-table-details[open] .comps-table-summary::before { transform: rotate(90deg); } .comps-table-summary:hover { color: var(--text-primary); } .note-comps-table-wrapper { max-height: 260px; overflow-y: auto; } .comps-unavailable { font-size: 13px; color: var(--text-muted); padding: 16px 0; text-align: center; } /* =================================================================== 4. TRANSCRIPT PANEL =================================================================== */ .note-transcript-panel { display: flex; flex-direction: column; gap: 14px; } .transcript-header { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .transcript-title { font-size: 14px; font-weight: 600; color: var(--text-primary); } .transcript-period { font-size: 11px; color: var(--text-muted); } .transcript-note { font-size: 12px; color: var(--text-muted); margin: 0; line-height: 1.5; } .transcript-links { display: flex; flex-direction: column; gap: 8px; } .transcript-link { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg-secondary); text-decoration: none; color: var(--text-primary); transition: border-color 0.15s, background 0.15s; } .transcript-link:hover { border-color: var(--accent); background: var(--bg-tertiary); } .transcript-link-icon { color: var(--accent); font-size: 14px; flex-shrink: 0; } .transcript-link-body { display: flex; flex-direction: column; gap: 2px; flex: 1; } .transcript-link-name { font-size: 13px; font-weight: 600; } .transcript-link-desc { font-size: 11px; color: var(--text-muted); } .transcript-link-arrow { color: var(--text-muted); font-size: 14px; flex-shrink: 0; } .transcript-qa-hint { font-size: 11px; color: var(--text-muted); background: var(--bg-tertiary); border-radius: 5px; padding: 8px 12px; line-height: 1.5; border: 1px solid var(--border); } .transcript-qa-hint strong { color: var(--text-secondary); } /* =================================================================== 5. NOTE SEARCH MODAL =================================================================== */ .note-search-modal { width: min(680px, 94vw); max-height: min(600px, 90vh); display: flex; flex-direction: column; overflow: hidden; padding: 0; } .note-search-header { padding: 20px 24px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; } .note-search-header h2 { font-size: 16px; font-weight: 700; margin: 0 0 4px 0; color: var(--text-primary); } .note-search-subtitle { font-size: 12px; color: var(--text-muted); margin: 0 0 12px 0; } .note-search-input-row { display: flex; align-items: center; gap: 8px; background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: 7px; padding: 2px 10px 2px 4px; transition: border-color 0.15s; } .note-search-input-row:focus-within { border-color: var(--accent); } .note-search-input { flex: 1; background: none; border: none; outline: none; font-size: 14px; color: var(--text-primary); padding: 8px 6px; font-family: var(--font-sans); } .note-search-input::placeholder { color: var(--text-muted); } .note-search-kbd { font-size: 10px; font-family: var(--font-mono); color: var(--text-muted); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 3px; padding: 2px 5px; flex-shrink: 0; } .note-search-results { flex: 1; overflow-y: auto; padding: 8px 12px 12px; } .note-search-results::-webkit-scrollbar { width: 4px; } .note-search-results::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; } .note-search-empty { font-size: 13px; color: var(--text-muted); padding: 24px 0; text-align: center; } .note-search-result { padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; margin-bottom: 6px; cursor: pointer; transition: border-color 0.12s, background 0.12s; } .note-search-result:hover { border-color: var(--accent); background: var(--bg-tertiary); } .search-result-header { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 4px; } .search-result-ticker { font-size: 13px; font-weight: 700; font-family: var(--font-mono); color: var(--text-primary); } .search-result-type { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; padding: 1px 5px; border-radius: 3px; } .search-result-type.pre { background: rgba(59, 130, 246, 0.15); color: var(--accent); } .search-result-type.post { background: rgba(34, 197, 94, 0.13); color: var(--green); } .search-result-date { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); } .search-result-archived { font-size: 10px; padding: 1px 5px; border-radius: 3px; background: var(--bg-tertiary); color: var(--text-muted); border: 1px solid var(--border); } .search-result-excerpt { font-size: 12px; color: var(--text-muted); line-height: 1.45; } mark.search-highlight { background: rgba(234, 179, 8, 0.25); color: var(--yellow); border-radius: 2px; padding: 0 1px; font-style: normal; } /* =================================================================== NOTE BODY WRAPPER (preserves existing note content styles) =================================================================== */ .note-body-content { /* Inherits whatever styles are on the note content container */ } /* Mobile adjustments for note tabs */ @media (max-width: 600px) { .note-tab { padding: 6px 10px 7px; font-size: 11px; } .comp-bar-ticker { min-width: 28px; } .note-search-modal { width: 100vw; max-height: 100vh; border-radius: 0; } .transcript-link { padding: 10px 12px; } } /* =================================================================== PRIVATE COMPANY DETAIL POPUP =================================================================== */ /* --- Modal sizing --- */ .private-detail-modal { width: min(820px, 96vw); max-height: min(700px, 92vh); display: flex; flex-direction: column; padding: 0; overflow: hidden; } /* --- Header --- */ .private-detail-header { padding: 20px 24px 0; flex-shrink: 0; } .pd-header-top { margin-bottom: 14px; } .pd-header-name-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; } .pd-company-name { font-size: 20px; font-weight: 700; color: var(--text-primary); margin: 0; } .pd-status-badge { font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; padding: 2px 8px; border-radius: 4px; } .pd-status-private { background: rgba(59, 130, 246, 0.15); color: var(--accent); border: 1px solid rgba(59, 130, 246, 0.3); } .pd-status-public { background: rgba(34, 197, 94, 0.13); color: var(--green); border: 1px solid rgba(34, 197, 94, 0.3); } .pd-status-ipo { background: rgba(234, 179, 8, 0.15); color: var(--yellow); border: 1px solid rgba(234, 179, 8, 0.3); } .pd-stage-tag { font-size: 10px; color: var(--text-muted); background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: 3px; padding: 2px 7px; } .pd-header-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .pd-subsector-tag { font-size: 11px; color: var(--text-secondary); background: var(--bg-tertiary); border-radius: 3px; padding: 2px 7px; border: 1px solid var(--border); } .pd-hq { font-size: 11px; color: var(--text-muted); } /* --- Header stats bar --- */ .pd-header-stats { display: flex; gap: 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); margin: 0 -24px; padding: 0 24px; background: var(--bg-secondary); flex-wrap: wrap; } .pd-stat { display: flex; flex-direction: column; padding: 10px 16px 10px 0; min-width: 120px; flex: 1; } .pd-stat-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); margin-bottom: 3px; } .pd-stat-value { font-size: 12px; font-weight: 600; color: var(--text-primary); } .pd-stat-funding, .pd-stat-investors { font-weight: 400; color: var(--text-secondary); font-size: 11px; } /* --- Tab bar --- */ .private-detail-tab-bar { display: flex; gap: 2px; border-bottom: 1px solid var(--border); padding: 0 24px; flex-shrink: 0; background: var(--bg-primary); } .pd-tab { background: none; border: none; border-bottom: 2px solid transparent; padding: 10px 14px 11px; font-size: 12px; font-weight: 500; color: var(--text-muted); cursor: pointer; margin-bottom: -1px; transition: color 0.15s, border-color 0.15s; letter-spacing: 0.02em; } .pd-tab:hover { color: var(--text-primary); } .pd-tab.active { color: var(--accent); border-bottom-color: var(--accent); } /* --- Body / scroll area --- */ .private-detail-body { flex: 1; overflow-y: auto; padding: 20px 24px 24px; min-height: 0; } .private-detail-body::-webkit-scrollbar { width: 4px; } .private-detail-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; } /* --- Sections --- */ .pd-section { margin-bottom: 24px; } .pd-section-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); margin-bottom: 10px; } .pd-bull-title { color: var(--green); } .pd-bear-title { color: var(--red); } /* Subheading inside a long drilldown section (>300 words). Bold, a notch smaller than .section-title, with top margin to break up walls of prose. */ .subsection-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-primary); margin-top: 24px; margin-bottom: 8px; } .pd-description { font-size: 13px; color: var(--text-secondary); line-height: 1.6; margin: 0; } /* --- KV grid for context fields --- */ .pd-kv-grid { display: flex; flex-direction: column; gap: 8px; } .pd-kv-row { display: flex; gap: 12px; align-items: baseline; } .pd-kv-label { font-size: 11px; font-weight: 600; color: var(--text-muted); min-width: 110px; flex-shrink: 0; text-transform: uppercase; letter-spacing: 0.04em; } .pd-kv-value { font-size: 12px; color: var(--text-secondary); line-height: 1.4; } /* --- Metric cards --- */ .pd-metrics-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; } .pd-metric-card { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 7px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; } .pd-metric-value { font-size: 14px; font-weight: 700; color: var(--text-primary); font-family: var(--font-mono); } .pd-metric-label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; } /* --- Research links --- */ .pd-links-row { display: flex; gap: 8px; flex-wrap: wrap; } .pd-link-btn { font-size: 11px; font-weight: 500; padding: 6px 12px; border-radius: 5px; border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-secondary); text-decoration: none; transition: border-color 0.12s, color 0.12s; } .pd-link-btn:hover { border-color: var(--accent); color: var(--accent); } /* --- Comps table --- */ .pd-comps-note { font-size: 11px; color: var(--text-muted); margin: -6px 0 12px; } .pd-comps-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 7px; margin-bottom: 20px; } .pd-comps-table { width: 100%; border-collapse: collapse; font-size: 12px; } .pd-comps-table thead th { background: var(--bg-secondary); color: var(--text-muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 600; padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; } .pd-comps-table thead th.num { text-align: right; } .pd-comps-table tbody td { padding: 8px 12px; border-bottom: 1px solid var(--border); color: var(--text-secondary); vertical-align: middle; } .pd-comps-table tbody tr:last-child td { border-bottom: none; } .pd-comps-table tbody td.num { text-align: right; font-family: var(--font-mono); font-size: 11px; } .pd-comp-row { cursor: pointer; transition: background 0.12s; } .pd-comp-row:hover { background: var(--bg-tertiary); } .pd-comp-median-row { background: rgba(148, 163, 184, 0.08); border-top: 1px solid rgba(148, 163, 184, 0.25); font-weight: 600; } .pd-comp-median-row td { color: var(--text-primary); } .pd-fund-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--accent); background: rgba(0, 229, 255, 0.12); border: 1px solid rgba(0, 229, 255, 0.3); border-radius: 3px; vertical-align: middle; } .pd-comp-name-cell { display: flex; flex-direction: column; gap: 1px; } .pd-comp-ticker { font-size: 12px; font-weight: 700; font-family: var(--font-mono); color: var(--text-primary); } .pd-comp-name { font-size: 10px; color: var(--text-muted); } /* Recommendation badge */ .pd-rec { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 2px 5px; border-radius: 3px; } .pd-rec-buy, .pd-rec-strong-buy { background: rgba(34,197,94,.15); color: var(--green); } .pd-rec-hold, .pd-rec-neutral { background: rgba(234,179,8,.12); color: var(--yellow); } .pd-rec-sell, .pd-rec-underperform { background: rgba(239,68,68,.12); color: var(--red); } /* Comps narrative */ .pd-narrative { display: flex; flex-direction: column; gap: 10px; } .pd-narrative-para { font-size: 13px; color: var(--text-secondary); line-height: 1.55; margin: 0; } .pd-narrative-label { font-weight: 700; color: var(--text-primary); margin-right: 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; } /* --- Landscape tab --- */ .pd-landscape-group-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-muted); font-weight: 600; margin-bottom: 8px; } .pd-competitor-card { border: 1px solid var(--border); border-radius: 7px; padding: 12px 14px; margin-bottom: 8px; background: var(--bg-secondary); } .pd-comp-private { border-left: 3px solid var(--accent); } .pd-comp-public { border-left: 3px solid var(--green); } .pd-competitor-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; } .pd-competitor-name { font-size: 13px; font-weight: 600; color: var(--text-primary); } .pd-comp-type-badge { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 1px 6px; border-radius: 3px; } .pd-comp-type-private { background: rgba(59,130,246,.12); color: var(--accent); } .pd-comp-type-public { background: rgba(34,197,94,.12); color: var(--green); } .pd-comp-ticker-btn { font-size: 10px; font-family: var(--font-mono); font-weight: 700; color: var(--accent); background: rgba(59,130,246,.1); border: 1px solid rgba(59,130,246,.25); border-radius: 3px; padding: 2px 6px; cursor: pointer; transition: background 0.12s; } .pd-comp-ticker-btn:hover { background: rgba(59,130,246,.2); } .pd-competitor-note { font-size: 12px; color: var(--text-muted); line-height: 1.5; margin: 0; } /* Differentiator grid */ .pd-diff-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .pd-diff-card { border-radius: 7px; padding: 12px 14px; border: 1px solid; } .pd-diff-moat { background: rgba(34,197,94,.05); border-color: rgba(34,197,94,.2); } .pd-diff-threat { background: rgba(239,68,68,.05); border-color: rgba(239,68,68,.2); } .pd-diff-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 6px; } .pd-diff-moat .pd-diff-label { color: var(--green); } .pd-diff-threat .pd-diff-label { color: var(--red); } .pd-diff-content { font-size: 12px; color: var(--text-secondary); line-height: 1.5; } /* --- Thesis tab --- */ .pd-thesis-para { font-size: 13px; line-height: 1.6; margin: 0; padding: 12px 14px; border-radius: 7px; border: 1px solid; } .pd-bull-para { background: rgba(34,197,94,.05); border-color: rgba(34,197,94,.18); color: var(--text-secondary); } .pd-bear-para { background: rgba(239,68,68,.05); border-color: rgba(239,68,68,.18); color: var(--text-secondary); } .pd-catalysts-risks-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .pd-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; } .pd-list li { font-size: 12px; color: var(--text-secondary); line-height: 1.45; padding-left: 14px; position: relative; } .pd-list li::before { position: absolute; left: 0; font-size: 10px; } .pd-list-catalyst li::before { content: '↑'; color: var(--green); } .pd-list-risk li::before { content: '⚠'; color: var(--yellow); font-size: 9px; } /* IPO callout */ .pd-ipo-callout { display: flex; align-items: baseline; gap: 12px; padding: 12px 16px; background: rgba(59,130,246,.07); border: 1px solid rgba(59,130,246,.2); border-radius: 7px; flex-wrap: wrap; } .pd-ipo-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--accent); flex-shrink: 0; } .pd-ipo-text { font-size: 12px; color: var(--text-secondary); line-height: 1.4; } /* --- Loading / empty states --- */ .pd-loading, .pd-empty { font-size: 13px; color: var(--text-muted); padding: 32px 0; text-align: center; } /* --- Mobile --- */ @media (max-width: 680px) { .private-detail-modal { max-height: 100vh; border-radius: 0; width: 100vw; } .pd-header-stats { flex-wrap: wrap; } .pd-stat { min-width: 50%; } .pd-diff-grid, .pd-catalysts-risks-grid { grid-template-columns: 1fr; } .pd-metrics-grid { grid-template-columns: repeat(2, 1fr); } .pd-tab { padding: 8px 10px 9px; font-size: 11px; } } /* ===== SCREENER ===== */ .screener-bar { padding: 0 16px; } .screener-controls { display: flex; align-items: center; gap: 8px; padding: 6px 0; flex-wrap: wrap; } .screener-toggle { display: flex; align-items: center; gap: 5px; } .screener-toggle.active { background: rgba(59,130,246,0.15); color: var(--accent); } .screener-panel { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 6px; padding: 12px; margin: 4px 0 10px; } .screener-add-row { margin-bottom: 8px; } .screener-col-select { background: var(--bg-primary); border: 1px solid var(--border); color: var(--text-primary); font-family: var(--font-sans); font-size: 12px; padding: 5px 8px; border-radius: 3px; outline: none; cursor: pointer; } .screener-col-select:focus { border-color: var(--accent); } .screener-filter-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.04); } .screener-filter-row:last-child { border-bottom: none; } .screener-filter-label { font-size: 12px; font-weight: 500; color: var(--text-secondary); min-width: 140px; flex-shrink: 0; } .screener-range-inputs { display: flex; align-items: center; gap: 6px; } .screener-input { background: var(--bg-primary); border: 1px solid var(--border); color: var(--text-primary); font-family: var(--font-mono); font-size: 12px; padding: 4px 8px; border-radius: 3px; width: 100px; outline: none; } .screener-input:focus { border-color: var(--accent); } .screener-range-to { color: var(--text-muted); font-size: 11px; } .screener-remove-filter { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 16px; line-height: 1; padding: 2px 6px; border-radius: 3px; transition: color 0.15s, background 0.15s; } .screener-remove-filter:hover { color: var(--red); background: var(--red-dim); } .screener-checkboxes { display: flex; flex-wrap: wrap; gap: 4px 12px; max-height: 120px; overflow-y: auto; } .screener-checkbox-label { font-size: 11px; color: var(--text-secondary); display: flex; align-items: center; gap: 4px; cursor: pointer; white-space: nowrap; } .screener-checkbox { accent-color: var(--accent); } .screener-active-pills { display: flex; gap: 6px; flex-wrap: wrap; } .screener-pill { display: inline-flex; align-items: center; gap: 4px; background: rgba(59,130,246,0.12); color: var(--accent); font-size: 11px; font-weight: 500; padding: 3px 8px; border-radius: 12px; white-space: nowrap; } .pill-close { cursor: pointer; font-size: 13px; line-height: 1; opacity: 0.6; transition: opacity 0.15s; } .pill-close:hover { opacity: 1; } .screener-clear-all { background: none; border: none; color: var(--text-muted); font-size: 11px; cursor: pointer; padding: 2px 6px; text-decoration: underline; text-underline-offset: 2px; } .screener-clear-all:hover { color: var(--red); } .screener-results-count { margin-top: 8px; font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); } .screener-hidden { display: none !important; } .screener-highlight td:first-child { box-shadow: inset 3px 0 0 var(--accent); } /* ===== ALERTS ===== */ .alert-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; background: var(--red); color: #fff; font-size: 10px; font-weight: 700; border-radius: 8px; padding: 0 4px; margin-left: 4px; } .alerts-section { padding: 16px; } .alerts-description { font-size: 12px; color: var(--text-muted); margin: 8px 0 16px; line-height: 1.5; } .alerts-active { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; } .alerts-empty { grid-column: 1 / -1; text-align: center; padding: 32px 16px; color: var(--text-muted); font-size: 12px; } .alert-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 6px; padding: 12px; } .alert-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .alert-card-ticker { font-family: var(--font-mono); font-weight: 700; font-size: 14px; color: var(--accent); } .alert-card-current { font-family: var(--font-mono); font-size: 12px; color: var(--text-secondary); } .alert-card-condition { font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; } .alert-card-condition strong { color: var(--text-primary); } .alert-card-actions { display: flex; justify-content: flex-end; } .alert-delete-btn { background: none; border: none; color: var(--text-muted); font-size: 11px; cursor: pointer; padding: 2px 8px; border-radius: 3px; transition: color 0.15s, background 0.15s; } .alert-delete-btn:hover { color: var(--red); background: var(--red-dim); } .alert-modal .alert-form { display: flex; flex-direction: column; gap: 12px; } .alert-modal .alert-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--text-secondary); font-weight: 500; } .alert-input { background: var(--bg-primary); border: 1px solid var(--border); color: var(--text-primary); font-family: var(--font-sans); font-size: 13px; padding: 8px 10px; border-radius: 4px; outline: none; width: 100%; } .alert-input:focus { border-color: var(--accent); } .alert-value-row { display: flex; align-items: center; gap: 6px; } .alert-value-unit { font-family: var(--font-mono); font-size: 14px; color: var(--text-muted); width: 16px; flex-shrink: 0; } .alert-submit { background: var(--accent); color: #fff; border: none; font-size: 13px; font-weight: 600; padding: 10px 16px; border-radius: 4px; cursor: pointer; transition: background 0.15s; margin-top: 4px; } .alert-submit:hover { background: var(--accent-dim); } .alerts-history-section { margin-top: 24px; } .alerts-history-title { font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 8px; } .alert-history-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,0.04); font-size: 12px; } .alert-unseen { background: rgba(59,130,246,0.05); } .alert-history-ticker { font-family: var(--font-mono); font-weight: 600; color: var(--accent); min-width: 50px; } .alert-history-msg { color: var(--text-secondary); flex: 1; } .alert-history-time { color: var(--text-muted); font-family: var(--font-mono); font-size: 11px; } .alert-toast { position: fixed; top: 60px; right: 16px; z-index: 9999; background: var(--bg-surface); border: 1px solid var(--accent); border-radius: 8px; padding: 12px 16px; min-width: 260px; max-width: 360px; box-shadow: 0 8px 32px rgba(0,0,0,0.5); transform: translateX(120%); transition: transform 0.3s ease; } .alert-toast.show { transform: translateX(0); } .alert-toast-header { display: flex; align-items: center; gap: 6px; color: var(--accent); font-size: 13px; margin-bottom: 4px; } .alert-toast-msg { font-size: 12px; color: var(--text-secondary); line-height: 1.4; } /* ===== EXPORT ===== */ .export-btn { display: flex; align-items: center; gap: 5px; position: relative; } .export-dropdown { position: absolute; top: 100%; right: 0; margin-top: 4px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 6px; min-width: 200px; z-index: 200; box-shadow: 0 8px 32px rgba(0,0,0,0.5); overflow: hidden; } .export-dropdown-item { padding: 8px 14px; font-size: 12px; color: var(--text-secondary); cursor: pointer; transition: background 0.15s, color 0.15s; } .export-dropdown-item:hover { background: var(--bg-hover); color: var(--text-primary); } .export-dropdown-divider { height: 1px; background: var(--border); margin: 2px 0; } /* ===== PERFORMANCE VIZ ===== */ .perfviz-section { padding: 16px; margin-top: 8px; } .perfviz-controls { display: flex; gap: 8px; } .perfviz-select { background: var(--bg-primary); border: 1px solid var(--border); color: var(--text-primary); font-family: var(--font-sans); font-size: 12px; padding: 4px 8px; border-radius: 3px; outline: none; cursor: pointer; } .perfviz-select:focus { border-color: var(--accent); } .perfviz-container { margin-top: 12px; min-height: 200px; } .perfviz-loading { text-align: center; padding: 32px; color: var(--text-muted); font-size: 12px; } /* Heatmap */ .heatmap-grid { display: flex; flex-direction: column; gap: 8px; } .heatmap-group { } .heatmap-group-label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; padding-left: 2px; } .heatmap-tiles { display: flex; flex-wrap: wrap; gap: 3px; } .heatmap-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 62px; height: 50px; border-radius: 4px; cursor: pointer; transition: transform 0.1s, box-shadow 0.15s; padding: 2px 6px; flex: 0 0 auto; } .heatmap-tile:hover { transform: scale(1.08); box-shadow: 0 4px 16px rgba(0,0,0,0.4); z-index: 2; } .heatmap-ticker { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.3px; } .heatmap-perf { font-family: var(--font-mono); font-size: 10px; font-weight: 500; opacity: 0.9; } .heatmap-legend { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 12px; padding: 8px 0; } .heatmap-legend-label { font-size: 10px; color: var(--text-muted); font-family: var(--font-mono); } .heatmap-legend-bar { width: 200px; height: 8px; border-radius: 4px; background: linear-gradient(to right, rgb(180,40,40), rgb(80,30,30), rgb(30,30,30), rgb(20,80,40), rgb(34,197,94)); } /* Scatter */ .scatter-legend { display: flex; gap: 16px; justify-content: center; padding: 6px 0; } .scatter-legend-item { font-size: 11px; color: var(--text-muted); } .perfviz-container canvas { border-radius: 6px; display: block; margin: 0 auto; max-width: 100%; } /* Ghost button variant */ .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: var(--border-light); } /* Mobile responsive adjustments for new features */ @media (max-width: 768px) { .screener-filter-label { min-width: 100px; font-size: 11px; } .screener-input { width: 75px; } .heatmap-tile { min-width: 50px; height: 42px; } .heatmap-ticker { font-size: 9px; } .heatmap-perf { font-size: 9px; } .alerts-active { grid-template-columns: 1fr; } .export-dropdown { right: -8px; } } /* ================================================================ POPUP TABS — Overview vs. Earnings Intel ================================================================ */ .popup-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 18px; padding-bottom: 0; position: sticky; top: 0; background: var(--bg-surface); z-index: 5; } .popup-tab { background: none; border: none; color: var(--text-secondary); font-size: 13px; font-weight: 600; padding: 10px 16px; cursor: pointer; border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s; font-family: var(--font-sans); letter-spacing: 0.02em; display: inline-flex; align-items: center; gap: 6px; } .popup-tab:hover { color: var(--text-primary); } .popup-tab.active { color: var(--accent); border-bottom-color: var(--accent); } .popup-tab-pill { display: inline-block; font-size: 9px; font-weight: 700; letter-spacing: 0.08em; padding: 2px 6px; border-radius: 3px; text-transform: uppercase; } .popup-tab-pill-pre { background: rgba(59,130,246,0.18); color: var(--accent); } .popup-tab-pill-post { background: rgba(34,197,94,0.18); color: var(--green); } .popup-tab-panel { display: none; animation: popup-fade-in 0.18s ease-out; } .popup-tab-panel.active { display: block; } @keyframes popup-fade-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } } /* ================================================================ EARNINGS INTEL MODULE ================================================================ */ .ei-root { color: var(--text-primary); font-family: var(--font-sans); line-height: 1.55; } .ei-loading, .ei-error, .ei-empty { padding: 60px 24px; text-align: center; color: var(--text-muted); } .ei-empty-icon { font-size: 28px; margin-bottom: 12px; color: var(--text-muted); } .ei-empty-title { color: var(--text-primary); font-weight: 600; font-size: 15px; margin-bottom: 6px; } .ei-empty-body { max-width: 420px; margin: 0 auto; font-size: 13px; color: var(--text-secondary); } /* Markdown-note fallback (when structured earnings_intel.json has no entry but a generated note exists on disk). The fallback hydrates async after the placeholder renders. */ .ei-empty-loading { padding: 60px 24px; text-align: center; color: var(--text-muted); font-size: 13px; } .ei-note-banner { display: flex; align-items: center; gap: 12px; padding: 10px 14px; margin: 0 0 16px 0; background: var(--surface-2, rgba(255,255,255,0.04)); border: 1px solid var(--border-light, rgba(255,255,255,0.08)); border-radius: 8px; font-size: 12px; } .ei-note-badge { flex: 0 0 auto; padding: 3px 8px; border-radius: 4px; font-weight: 600; font-size: 11px; letter-spacing: 0.4px; text-transform: uppercase; } .ei-note-banner-meta { color: var(--text-secondary); font-size: 12px; line-height: 1.4; } .ei-note-body { padding: 0 4px; line-height: 1.6; color: var(--text-primary); } .ei-note-body h2 { font-size: 18px; margin: 22px 0 8px; } .ei-note-body h3 { font-size: 15px; margin: 18px 0 6px; color: var(--text-primary); } .ei-note-body h4 { font-size: 13px; margin: 14px 0 4px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.3px; } .ei-note-body ul { margin: 6px 0 12px; padding-left: 22px; } .ei-note-body li { margin: 4px 0; font-size: 13px; } .ei-note-body p { font-size: 13px; margin: 6px 0; } .ei-note-body strong { color: var(--text-primary); } .ei-note-body hr { border: 0; border-top: 1px solid var(--border-light, rgba(255,255,255,0.08)); margin: 16px 0; } /* Header strip */ .ei-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 18px; background: linear-gradient(180deg, var(--bg-surface-alt) 0%, var(--bg-surface) 100%); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 20px; } .ei-header-left { display: flex; align-items: center; gap: 14px; min-width: 0; } .ei-header-meta { min-width: 0; } .ei-company-line { display: flex; align-items: center; gap: 10px; font-size: 16px; margin-bottom: 4px; } .ei-company-line strong { color: var(--text-primary); font-weight: 600; } .ei-state-pill { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 8px; border-radius: 3px; background: var(--bg-header); color: var(--text-secondary); border: 1px solid var(--border); } .ei-state-pre_earnings { color: var(--accent); border-color: rgba(59,130,246,0.4); background: rgba(59,130,246,0.08); } .ei-state-post_earnings { color: var(--green); border-color: rgba(34,197,94,0.4); background: rgba(34,197,94,0.08); } .ei-header-sub { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--text-secondary); } .ei-header-sub strong { color: var(--text-primary); font-weight: 600; } .ei-header-right { text-align: right; flex-shrink: 0; } .ei-updated-label { font-size: 10px; letter-spacing: 0.1em; color: var(--text-muted); text-transform: uppercase; } .ei-updated-value { font-size: 14px; font-weight: 600; color: var(--text-primary); margin: 2px 0; } .ei-refresh-reason { font-size: 10px; color: var(--text-muted); text-transform: capitalize; font-family: var(--font-mono); } /* Inflection badge */ .ei-inflection { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 0.1em; padding: 5px 10px; border-radius: 5px; min-width: 48px; text-align: center; border: 1px solid transparent; } .inflection-pre { background: rgba(59,130,246,0.18); color: var(--accent); border-color: rgba(59,130,246,0.4); } .inflection-mid { background: rgba(234,179,8,0.18); color: var(--yellow); border-color: rgba(234,179,8,0.4); } .inflection-post { background: rgba(34,197,94,0.18); color: var(--green); border-color: rgba(34,197,94,0.4); } .inflection-none { background: var(--bg-header); color: var(--text-muted); border-color: var(--border); } /* Post-earnings review module */ .ei-review { background: linear-gradient(135deg, rgba(34,197,94,0.06) 0%, rgba(34,197,94,0.02) 100%); border: 1px solid rgba(34,197,94,0.25); border-radius: 10px; padding: 18px 20px; margin-bottom: 22px; } .ei-review-badge { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green); background: rgba(34,197,94,0.15); padding: 4px 10px; border-radius: 3px; margin-bottom: 14px; } .ei-review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } @media (max-width: 720px) { .ei-review-grid { grid-template-columns: 1fr; gap: 18px; } .ei-header { flex-direction: column; align-items: flex-start; } .ei-header-right { text-align: left; } } .ei-review-col .ei-subhead, .ei-section-label { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; } .ei-headline { font-size: 14px; font-weight: 600; color: var(--text-primary); line-height: 1.4; margin-bottom: 8px; } .ei-bullets { list-style: none; padding: 0; margin: 0; } .ei-bullets li { position: relative; padding-left: 18px; margin: 6px 0; font-size: 13px; color: var(--text-secondary); line-height: 1.5; } .ei-bullets li::before { content: ''; position: absolute; left: 5px; top: 9px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); } .ei-stock-reaction { margin-top: 12px; font-size: 13px; font-weight: 600; } .ei-prev-bl { margin-top: 16px; padding: 10px 12px; background: var(--bg-header); border-radius: 6px; border: 1px solid var(--border); } .ei-prev-bl summary { font-size: 11px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; } .ei-prev-bl-body { margin-top: 8px; font-size: 12px; color: var(--text-secondary); line-height: 1.5; } .ei-signal-changes { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); } .ei-changes { list-style: none; padding: 0; margin: 6px 0 0 0; font-size: 12px; color: var(--text-secondary); } .ei-changes li { margin: 4px 0; } .ei-change-signal { color: var(--text-primary); font-weight: 600; text-transform: capitalize; } .ei-arrow { color: var(--text-muted); margin: 0 4px; } /* Sections */ .ei-section { padding: 16px 18px; background: var(--bg-surface-alt); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 18px; } .ei-bottom-line .ei-bl-body { font-size: 14px; line-height: 1.6; color: var(--text-primary); } /* Bull / Base / Bear cases */ .ei-cases { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-bottom: 18px; } @media (max-width: 900px) { .ei-cases { grid-template-columns: 1fr; } } .ei-case { padding: 16px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-surface-alt); border-top-width: 3px; } .ei-case-bull { border-top-color: var(--green); } .ei-case-base { border-top-color: var(--accent); } .ei-case-bear { border-top-color: var(--red); } .ei-case-title { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 10px; } .ei-case-bull .ei-case-title { color: var(--green); } .ei-case-base .ei-case-title { color: var(--accent); } .ei-case-bear .ei-case-title { color: var(--red); } .ei-case-headline { font-size: 13px; font-weight: 600; color: var(--text-primary); line-height: 1.4; margin-bottom: 8px; } .ei-case-pattern { font-size: 12px; font-style: italic; color: var(--text-secondary); margin-bottom: 10px; } .ei-push-block { margin-top: 10px; } .ei-push-label { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 4px; } .ei-push-higher { color: var(--green); } .ei-push-lower { color: var(--red); } .ei-push-block .ei-bullets li { font-size: 12px; } /* Signal Scorecard */ .ei-scorecard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; } .ei-signal { padding: 12px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg-surface); border-left-width: 3px; } .ei-signal-watching { border-left-color: var(--accent); } .ei-signal-confirmed { border-left-color: var(--green); } .ei-signal-failed { border-left-color: var(--red); } .ei-signal-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; } .ei-signal-label { font-size: 13px; font-weight: 600; color: var(--text-primary); text-transform: capitalize; } .ei-status { font-size: 9px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 7px; border-radius: 3px; } .ei-status-watching { background: rgba(59,130,246,0.18); color: var(--accent); } .ei-status-confirmed { background: rgba(34,197,94,0.18); color: var(--green); } .ei-status-failed { background: rgba(239,68,68,0.18); color: var(--red); } .ei-signal-note { font-size: 12px; color: var(--text-secondary); line-height: 1.5; margin-bottom: 8px; } .ei-signal-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11px; color: var(--text-muted); } .ei-signal-meta strong { color: var(--text-secondary); } .ei-threshold { font-size: 11px; } /* Split: Guidance + Tone */ .ei-split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; } @media (max-width: 720px) { .ei-split { grid-template-columns: 1fr; } } .ei-split-col { padding: 16px 18px; background: var(--bg-surface-alt); border: 1px solid var(--border); border-radius: 10px; } .ei-guide-grid { display: grid; grid-template-columns: 1fr; gap: 6px; font-size: 12px; } .ei-guide-grid > div { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed var(--border); } .ei-guide-grid > div:last-child { border-bottom: none; } .ei-guide-k { color: var(--text-secondary); } .ei-guide-v { color: var(--text-primary); font-weight: 600; font-family: var(--font-mono); font-size: 11px; } .ei-tone-chips { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .ei-tone-chip { padding: 6px 12px; border-radius: 20px; font-size: 12px; font-weight: 500; text-transform: capitalize; border: 1px solid var(--border); } .ei-tone-prior { background: var(--bg-header); color: var(--text-muted); } .ei-tone-current { background: rgba(59,130,246,0.12); color: var(--accent); border-color: rgba(59,130,246,0.35); } .ei-tone-arrow { color: var(--text-muted); font-size: 14px; } .ei-tone-notes { font-size: 12px; color: var(--text-secondary); line-height: 1.5; } /* Theme lifecycle */ .ei-themes { display: flex; flex-wrap: wrap; gap: 8px; } .ei-theme { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 6px; font-size: 12px; } .ei-theme-name { color: var(--text-primary); font-weight: 500; } .ei-theme-stage { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 2px 6px; border-radius: 3px; background: var(--bg-header); color: var(--text-muted); } .ei-theme-emerging .ei-theme-stage { color: var(--accent); background: rgba(59,130,246,0.15); } .ei-theme-active .ei-theme-stage { color: var(--yellow); background: rgba(234,179,8,0.15); } .ei-theme-chronic .ei-theme-stage { color: var(--red); background: rgba(239,68,68,0.12); } .ei-theme-fading .ei-theme-stage { color: var(--text-muted); } .ei-theme-since { font-size: 11px; color: var(--text-muted); } /* Inflection library */ .ei-inflections { display: flex; flex-direction: column; gap: 8px; } .ei-inflection-item { display: grid; grid-template-columns: 90px 1fr auto; align-items: center; gap: 14px; padding: 10px 12px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 6px; } .ei-inflection-date { font-size: 11px; color: var(--text-muted); font-family: var(--font-mono); } .ei-inflection-type { font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 2px; } .ei-inflection-headline { font-size: 12px; color: var(--text-primary); line-height: 1.4; } .ei-inflection-react { font-size: 13px; font-weight: 600; font-family: var(--font-mono); } /* Sources */ .ei-sources-list { list-style: none; padding: 0; margin: 0; } .ei-sources-list li { padding: 4px 0; font-size: 12px; } .ei-sources-list a { color: var(--accent); text-decoration: none; } .ei-sources-list a:hover { text-decoration: underline; } .ei-legacy-link { color: var(--text-muted); font-style: italic; font-size: 11px; } /* Earnings card upgrades (inflection badges in card footer) */ .earnings-card-footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); flex-wrap: wrap; } .earnings-card-inflection-slot { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; } .earnings-card-signals { font-family: var(--font-mono); font-size: 10px; color: var(--text-secondary); padding: 2px 6px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 3px; } .earnings-card-updated { font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; padding: 2px 6px; background: rgba(34,197,94,0.1); color: var(--green); border-radius: 3px; } .earnings-intel-btn { background: var(--accent); color: white; border: none; padding: 6px 12px; border-radius: 4px; font-size: 11px; font-weight: 600; cursor: pointer; font-family: var(--font-sans); letter-spacing: 0.02em; transition: background 0.15s; } .earnings-intel-btn:hover { background: var(--accent-dim); } /* ===== April 22 UX batch additions ===== */ /* ─── Briefing header: skeleton pill, date picker ─── */ .wb-header-left { display: flex; align-items: center; gap: 8px; } .wb-date-row { display: flex; align-items: center; gap: 6px; } .wb-date-label { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--border, #1e2433); border-radius: 6px; background: rgba(255,255,255,0.02); } .wb-date-prefix { font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.05em; } .wb-week-input { background: transparent; color: #e5e7eb; border: none; outline: none; font-family: 'JetBrains Mono', monospace; font-size: 0.85rem; font-weight: 600; padding: 0; cursor: pointer; color-scheme: dark; } .wb-week-prev, .wb-week-next { background: rgba(255,255,255,0.03); border: 1px solid var(--border, #1e2433); color: #9ca3af; width: 26px; height: 26px; border-radius: 6px; cursor: pointer; font-size: 18px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s, color 0.15s; } .wb-week-prev:hover, .wb-week-next:hover { background: rgba(255,255,255,0.07); color: #e5e7eb; } .wb-week-prev:disabled, .wb-week-next:disabled { opacity: 0.35; cursor: not-allowed; } .wb-index-label { color: #9ca3af; margin-right: 4px; } .wb-skeleton-pill { display: inline-block; width: 64px; height: 14px; border-radius: 4px; background: rgba(255,255,255,0.05); animation: wb-pulse 1.6s ease-in-out infinite; vertical-align: middle; } .wb-index-skeleton { display: inline-flex; align-items: center; gap: 4px; } @keyframes wb-pulse { 0%,100% { opacity: 0.4; } 50% { opacity: 0.9; } } .wb-loading { opacity: 0.6; transition: opacity 0.2s; } /* ─── Briefing TL;DR block ─── */ .wb-tldr { margin: 16px 0 8px; padding: 14px 16px; background: rgba(59, 130, 246, 0.05); border-left: 3px solid var(--accent, #3b82f6); border-radius: 4px; } .wb-tldr-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; } .wb-tldr-label { font-family: 'JetBrains Mono', monospace; font-size: 0.7rem; font-weight: 700; color: var(--accent, #3b82f6); letter-spacing: 0.1em; text-transform: uppercase; } .wb-tldr-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; } .wb-tldr-chip { display: inline-block; padding: 2px 8px; font-size: 0.68rem; font-weight: 600; border-radius: 10px; background: rgba(59, 130, 246, 0.15); color: var(--accent, #3b82f6); text-transform: uppercase; letter-spacing: 0.04em; } .wb-tldr-headline { margin: 0 0 10px; padding: 8px 12px; border: 1px solid rgba(59, 130, 246, 0.45); border-radius: 8px; background: rgba(59, 130, 246, 0.08); color: var(--accent, #3b82f6); font-family: 'JetBrains Mono', monospace; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; line-height: 1.4; text-transform: uppercase; } .wb-tldr-list { margin: 0; padding-left: 20px; list-style: disc; color: #d1d5db; font-size: 0.85rem; line-height: 1.55; } .wb-tldr-list li { margin: 4px 0; } @media (max-width: 640px) { .wb-header { flex-direction: column; align-items: flex-start; } .wb-indices { width: 100%; flex-wrap: wrap; gap: 8px; } } /* ─── Watchlist scroll-shadow on sticky ticker column ─── */ .table-wrapper, #table-wrapper { position: relative; } #table-wrapper.has-scroll-shadow .watchlist-table:not(.private-table) thead th.col-ticker, #table-wrapper.has-scroll-shadow .watchlist-table:not(.private-table) tbody td.cell-ticker { box-shadow: inset -8px 0 8px -8px rgba(0,0,0,0.55); } /* ─── Macro Stock Ideas — rationale info button + popover ─── */ .idea-reason { position: relative; padding-right: 20px; } .idea-info-btn { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-left: 4px; background: transparent; border: none; color: var(--accent, #3b82f6); cursor: pointer; font-size: 13px; padding: 0; opacity: 0.7; vertical-align: middle; } .idea-info-btn:hover { opacity: 1; } .idea-pop { display: none; position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 240px; max-width: 320px; padding: 10px 12px; background: var(--bg-surface, #1a1f2e); border: 1px solid var(--border, #1e2433); border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,0.4); color: #d1d5db; font-size: 0.78rem; line-height: 1.4; font-family: var(--font-sans); } .idea-pop.open { display: block; } .idea-pop-title { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #9ca3af; margin-bottom: 8px; } .idea-pop-row { display: grid; grid-template-columns: 72px 1fr auto; gap: 8px; align-items: center; margin: 4px 0; font-family: var(--font-mono); font-size: 0.72rem; } .idea-pop-k { color: #9ca3af; } .idea-pop-bar { display: inline-block; position: relative; height: 6px; background: rgba(255,255,255,0.05); border-radius: 3px; overflow: hidden; } .idea-pop-fill { position: absolute; left: 0; top: 0; bottom: 0; } .idea-pop-fill.val-pos { background: var(--green, #22c55e); } .idea-pop-fill.val-neg { background: var(--red, #ef4444); } .idea-pop-fill.val-neutral { background: var(--yellow, #eab308); } .idea-pop-v { text-align: right; color: #d1d5db; } /* ─── Earnings Intel: skeleton body ─── */ .ei-skeleton-block { opacity: 0.85; } .ei-skeleton-lines { display: flex; flex-direction: column; gap: 6px; } .ei-skeleton-line { height: 12px; width: 100%; border-radius: 4px; background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.09) 50%, rgba(255,255,255,0.04) 100%); background-size: 200% 100%; animation: ei-shimmer 1.4s ease-in-out infinite; } .ei-skeleton-line-short { width: 60%; } @keyframes ei-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .ei-section-error { padding: 16px; text-align: center; color: #ef4444; background: rgba(239, 68, 68, 0.06); border: 1px solid rgba(239, 68, 68, 0.2); border-radius: 6px; margin: 12px 0; } .ei-section-error .btn-sm { margin-top: 8px; } /* ─── Alerts tab ─── */ .alerts-section { padding: 8px 0; } .alerts-empty { padding: 48px 24px; text-align: center; max-width: 720px; margin: 0 auto; } .alerts-empty-head { font-size: 1.25rem; font-weight: 600; color: #e5e7eb; margin-bottom: 8px; } .alerts-empty-sub { color: #9ca3af; font-size: 0.9rem; margin-bottom: 24px; } .alerts-template-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-bottom: 28px; } .alerts-template-btn { display: flex; flex-direction: column; gap: 4px; padding: 14px 14px; background: rgba(255,255,255,0.02); border: 1px solid var(--border, #1e2433); border-radius: 6px; cursor: pointer; text-align: left; transition: border-color 0.15s, background 0.15s; font-family: var(--font-sans); } .alerts-template-btn:hover { border-color: var(--accent, #3b82f6); background: rgba(59, 130, 246, 0.05); } .alerts-template-title { font-size: 0.85rem; font-weight: 600; color: #e5e7eb; } .alerts-template-sub { font-size: 0.75rem; color: #6b7280; } .alerts-footer { color: #6b7280; font-size: 0.78rem; text-align: center; margin-top: 16px; } .alerts-list { display: flex; flex-direction: column; gap: 6px; max-width: 720px; margin: 16px auto 0; } .alert-card { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: rgba(255,255,255,0.02); border: 1px solid var(--border, #1e2433); border-radius: 6px; color: #d1d5db; font-family: var(--font-mono); font-size: 0.82rem; } .alert-remove { background: transparent; border: none; color: #6b7280; cursor: pointer; font-size: 18px; line-height: 1; padding: 0 6px; } .alert-remove:hover { color: #ef4444; } /* ─── Alerts page redesign (Subscriptions + Triggered + Activity) ─── */ .alerts-page { display: flex; flex-direction: column; gap: 24px; max-width: 880px; margin: 0 auto; padding: 4px 0 32px; } .alerts-section-block { background: rgba(255,255,255,0.015); border: 1px solid var(--border, #1e2433); border-radius: 8px; padding: 18px 20px 16px; } .alerts-block-header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border, #1e2433); flex-wrap: wrap; } .alerts-block-header h3 { margin: 0; font-size: 0.95rem; font-weight: 600; color: #e5e7eb; letter-spacing: 0.2px; } .alerts-block-sub { color: #6b7280; font-size: 0.78rem; flex: 1; } .alerts-empty-inline { padding: 18px 4px; color: #6b7280; font-size: 0.85rem; text-align: center; } /* Feed Subscriptions */ .alerts-sub-account { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 10px 12px; background: rgba(255,255,255,0.02); border: 1px solid var(--border, #1e2433); border-radius: 6px; } .alerts-sub-account-label { color: #9ca3af; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; } .alerts-sub-account-input { flex: 1; background: transparent; border: none; color: #e5e7eb; font-family: var(--font-mono); font-size: 0.86rem; outline: none; padding: 2px 4px; } .alerts-sub-account-input:focus { background: rgba(96, 165, 250, 0.06); border-radius: 3px; } .alerts-sub-group { margin-bottom: 14px; } .alerts-sub-group:last-child { margin-bottom: 0; } .alerts-sub-group-title { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #6b7280; margin-bottom: 6px; padding: 0 2px; } .alerts-sub-row { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 6px; transition: background 0.15s; } .alerts-sub-row:hover { background: rgba(255,255,255,0.025); } .alerts-sub-toggle { position: relative; display: inline-block; width: 36px; height: 20px; cursor: pointer; } .alerts-sub-toggle input { opacity: 0; width: 0; height: 0; margin: 0; } .alerts-sub-toggle-track { position: absolute; inset: 0; background: rgba(255,255,255,0.08); border-radius: 12px; transition: background 0.15s; } .alerts-sub-toggle-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; background: #6b7280; border-radius: 50%; transition: transform 0.15s, background 0.15s; } .alerts-sub-toggle input:checked + .alerts-sub-toggle-track { background: rgba(59, 130, 246, 0.5); } .alerts-sub-toggle input:checked + .alerts-sub-toggle-track::after { transform: translateX(16px); background: #60a5fa; } .alerts-sub-body { min-width: 0; } .alerts-sub-title { color: #e5e7eb; font-size: 0.86rem; font-weight: 500; line-height: 1.3; } .alerts-sub-detail { color: #6b7280; font-size: 0.76rem; margin-top: 2px; line-height: 1.4; } .alerts-sub-channels { display: flex; gap: 4px; } .alerts-channel-chip { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.3px; padding: 3px 8px; border-radius: 4px; background: transparent; border: 1px solid var(--border, #1e2433); color: #6b7280; cursor: pointer; transition: all 0.12s; } .alerts-channel-chip:hover:not(:disabled) { color: #9ca3af; border-color: rgba(59, 130, 246, 0.3); } .alerts-channel-chip.on { background: rgba(59, 130, 246, 0.14); border-color: rgba(59, 130, 246, 0.5); color: #93c5fd; } .alerts-channel-chip:disabled { opacity: 0.35; cursor: not-allowed; } /* Activity feed */ .alerts-activity-list { display: flex; flex-direction: column; gap: 6px; } .alerts-activity-clear { margin-left: auto; } .alerts-activity-row { padding: 10px 12px; border-radius: 6px; background: rgba(255,255,255,0.02); border: 1px solid var(--border, #1e2433); border-left-width: 3px; } .alerts-activity-row.sev-warn { border-left-color: #fbbf24; } .alerts-activity-row.sev-alert { border-left-color: #f87171; } .alerts-activity-row.sev-info { border-left-color: #60a5fa; } .alerts-activity-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; } .alerts-activity-type { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; color: #9ca3af; background: rgba(255,255,255,0.04); padding: 2px 6px; border-radius: 3px; } .alerts-activity-ticker { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: #e5e7eb; } .alerts-activity-when { color: #6b7280; font-size: 0.75rem; margin-left: auto; } .alerts-activity-summary { color: #d1d5db; font-size: 0.85rem; line-height: 1.45; } .alerts-activity-link { color: #60a5fa; font-size: 0.78rem; margin-left: 6px; } .alerts-activity-link:hover { text-decoration: underline; } /* New Alert modal */ .alert-modal { max-width: 440px; } .alert-form { display: flex; flex-direction: column; gap: 12px; } .alert-form label { display: flex; flex-direction: column; gap: 4px; } .alert-label { font-size: 0.72rem; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.05em; } .alert-form input, .alert-form select { background: rgba(255,255,255,0.03); border: 1px solid var(--border, #1e2433); color: #e5e7eb; padding: 7px 10px; border-radius: 4px; font-family: var(--font-mono); font-size: 0.85rem; outline: none; } .alert-form input:focus, .alert-form select:focus { border-color: var(--accent, #3b82f6); } .alert-thresh-row, .alert-days-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .alert-modal-footer { margin-top: 12px; font-size: 0.75rem; color: #6b7280; text-align: center; } /* ===== Weekly Briefing - Export PDF controls & toast (April 22, 2026) ===== */ .wb-header-controls { display:flex; align-items:center; gap:12px; } .wb-export-pdf { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; background:rgba(34,197,94,0.1); border:1px solid var(--green,#22c55e); color:var(--green,#22c55e); border-radius:4px; font-size:0.8rem; cursor:pointer; font-family:var(--font-sans); transition:background 0.15s; } .wb-export-pdf:hover { background:rgba(34,197,94,0.18); } .wb-export-pdf:disabled { opacity:0.6; cursor:wait; } .wb-export-pdf svg { width:14px; height:14px; } .wb-toast { position:fixed; bottom:24px; right:24px; padding:10px 18px; background:var(--bg-surface); border:1px solid var(--border); color:var(--text-primary); font-size:0.85rem; border-radius:6px; box-shadow:0 6px 20px rgba(0,0,0,0.4); z-index:10000; opacity:0; transform:translateY(10px); transition:opacity 0.25s, transform 0.25s; pointer-events:none; } .wb-toast.visible { opacity:1; transform:translateY(0); } .wb-toast-success { border-color:var(--green,#22c55e); } .wb-toast-error { border-color:var(--red,#ef4444); } /* ========================================================================= */ /* ===== SignalStack AI — Major Upgrade CSS (April 22, 2026) ===== */ /* ===== Snapshot banner · Pin-cols · Heat cells · Compare · ===== */ /* ===== Private trajectory · Earnings urgency ===== */ /* ========================================================================= */ /* ===== Snapshot source banner (shown when R2/local fetch degraded) ===== */ .snapshot-banner { display: flex; align-items: center; gap: 10px; padding: 8px 16px; background: linear-gradient(90deg, rgba(239,68,68,0.12), rgba(239,68,68,0.06)); border-bottom: 1px solid rgba(239,68,68,0.35); color: #fecaca; font-size: 12px; font-family: var(--font-sans); position: sticky; top: 0; z-index: 500; } .snapshot-banner[hidden] { display: none !important; } .snapshot-banner-dot { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 0 rgba(239,68,68,0.6); animation: snapshot-banner-pulse 1.6s ease-out infinite; flex-shrink: 0; } @keyframes snapshot-banner-pulse { 0% { box-shadow: 0 0 0 0 rgba(239,68,68,0.6); } 70% { box-shadow: 0 0 0 8px rgba(239,68,68,0); } 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); } } #snapshot-banner-text { flex: 1 1 auto; } .snapshot-banner-retry, .snapshot-banner-dismiss { background: transparent; border: 1px solid rgba(252,165,165,0.4); color: #fecaca; padding: 3px 10px; font-size: 11px; border-radius: 3px; cursor: pointer; font-family: var(--font-sans); transition: background 0.15s, color 0.15s; } .snapshot-banner-retry:hover { background: rgba(239,68,68,0.2); color: #fff; } .snapshot-banner-dismiss { border: none; font-size: 16px; line-height: 1; padding: 2px 8px; } .snapshot-banner-dismiss:hover { color: #fff; } /* ===== Pin-col system for public watchlist rows ===== .pin-col-1 (ticker), .pin-col-2 (company), .pin-col-3 (price) Mounted via JS in app.js row render. Sticky left; backgrounds preserve striped+hover states. z-index < subsector-header (which is 6). */ .watchlist-table:not(.private-table) tbody td.pin-col { position: sticky; z-index: 3; background: var(--bg-primary); } .watchlist-table:not(.private-table) tbody tr:nth-child(even) td.pin-col { background: var(--bg-surface-alt); } .watchlist-table:not(.private-table) tbody tr:hover td.pin-col { background: var(--bg-hover); } .watchlist-table:not(.private-table) tbody td.pin-col-1 { left: 0; } .watchlist-table:not(.private-table) tbody td.pin-col-2 { left: 72px; } .watchlist-table:not(.private-table) tbody td.pin-col-3 { left: 222px; border-right: 1px solid var(--border); } /* Subsector header must sit above pin-col rows */ .watchlist-table:not(.private-table) .subsector-header td { z-index: 4; } .watchlist-table:not(.private-table) .subsector-header .subsector-label-cell { z-index: 7; } /* ===== Heat cells — magnitude encoding on return columns ===== Background gradient driven by inline style; foreground must stay legible. */ .heat-cell { position: relative; } .heat-cell.val-pos, .heat-cell.val-neg { /* slight text shadow helps legibility over saturated backgrounds */ text-shadow: 0 1px 1px rgba(0,0,0,0.35); } /* ===== Compare module ===== */ /* Toolbar button state */ #compare-toggle-btn { white-space: nowrap; } #compare-toggle-btn.active { background: rgba(59,130,246,0.18); border-color: var(--accent); color: var(--accent); } /* Compare checkbox column (toggled on/off dynamically) */ .col-compare { width: 32px; min-width: 32px; } .watchlist-table thead th.col-compare, .watchlist-table tbody td.col-compare { padding: 4px 6px; text-align: center; vertical-align: middle; } .compare-th-label { font-size: 10px; color: var(--text-muted); letter-spacing: 0.5px; } .compare-checkbox { width: 14px; height: 14px; accent-color: var(--accent); cursor: pointer; vertical-align: middle; } /* Compare tray — floating bottom bar */ .compare-tray { position: fixed; left: 50%; bottom: -100px; transform: translateX(-50%); min-width: 540px; max-width: calc(100vw - 32px); background: var(--bg-surface); border: 1px solid var(--accent); border-radius: 10px; box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(59,130,246,0.15); padding: 10px 14px; z-index: 900; opacity: 0; pointer-events: none; transition: bottom 0.28s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s; font-family: var(--font-sans); } .compare-tray.visible { bottom: 20px; opacity: 1; pointer-events: auto; } .compare-tray-inner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .compare-tray-left { display: flex; align-items: center; gap: 10px; flex: 1 1 auto; min-width: 0; } .compare-tray-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .compare-tray-label { color: var(--text-secondary); font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; font-weight: 600; } .compare-tray-chips { display: flex; gap: 6px; flex-wrap: wrap; } .compare-tray-hint { color: var(--text-muted); font-size: 11px; font-style: italic; } .compare-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 8px; background: rgba(59,130,246,0.15); border: 1px solid rgba(59,130,246,0.35); border-radius: 4px; color: var(--accent); font-size: 11px; font-family: var(--font-mono); font-weight: 600; } .compare-chip-x { background: none; border: none; color: var(--text-muted); cursor: pointer; padding: 0 4px; font-size: 14px; line-height: 1; } .compare-chip-x:hover { color: var(--red); } /* Shake animation when user tries to pick a 5th (max 4) */ @keyframes compare-shake { 0%,100% { transform: translateX(-50%) translateY(0); } 15%,45%,75% { transform: translateX(calc(-50% - 6px)) translateY(0); } 30%,60%,90% { transform: translateX(calc(-50% + 6px)) translateY(0); } } .compare-tray.shake { animation: compare-shake 0.4s ease; } /* Compare popup overlay (uses .popup-overlay base, wider modal) */ .compare-popup-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.78); z-index: 1050; align-items: flex-start; justify-content: center; padding: 24px 16px; overflow-y: auto; } .compare-popup-overlay.active { display: flex; } .compare-modal { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 8px; max-width: 1300px; width: 100%; position: relative; padding: 22px 28px 28px; box-shadow: 0 30px 90px rgba(0,0,0,0.6); } .compare-header { margin-bottom: 14px; } .compare-header h2 { margin: 0; font-size: 20px; font-weight: 600; color: var(--text-primary); font-family: var(--font-sans); } .compare-subtitle { color: var(--text-secondary); font-size: 12px; margin-top: 4px; font-family: var(--font-mono); } .compare-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 18px; } .compare-tab { background: transparent; border: none; padding: 9px 16px; color: var(--text-muted); font-size: 12px; font-weight: 500; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; font-family: var(--font-sans); transition: color 0.15s, border-color 0.15s; } .compare-tab:hover { color: var(--text-primary); } .compare-tab.active { color: var(--accent); border-bottom-color: var(--accent); } .compare-body { min-height: 360px; } /* Compare sections */ .cmp-section { margin-bottom: 26px; } .cmp-section-head { font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); font-weight: 600; margin-bottom: 10px; font-family: var(--font-sans); } .cmp-subtle { color: var(--text-muted); font-size: 11px; } /* Overview chart + range/benchmark controls */ .cmp-chart-wrap { position: relative; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 6px; padding: 14px; height: 340px; } .cmp-chart-controls { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; } .cmp-range-toggle { display: inline-flex; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; } .cmp-range-btn { background: var(--bg-primary); border: none; color: var(--text-secondary); padding: 4px 10px; font-size: 11px; cursor: pointer; font-family: var(--font-mono); border-right: 1px solid var(--border); transition: background 0.15s, color 0.15s; } .cmp-range-btn:last-child { border-right: none; } .cmp-range-btn:hover { color: var(--text-primary); } .cmp-range-btn.active { background: rgba(59,130,246,0.2); color: var(--accent); } .cmp-benchmark-select { background: var(--bg-primary); border: 1px solid var(--border); color: var(--text-primary); padding: 4px 8px; font-size: 11px; border-radius: 4px; font-family: var(--font-sans); } .cmp-chart-loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 12px; background: rgba(10,14,23,0.7); } /* Overview fundamentals table */ .cmp-fund-wrap { overflow-x: auto; } .cmp-fund-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; font-family: var(--font-mono); background: var(--bg-primary); border: 1px solid var(--border); border-radius: 6px; } .cmp-fund-table th, .cmp-fund-table td { padding: 7px 10px; text-align: right; border-bottom: 1px solid var(--border); white-space: nowrap; } .cmp-fund-table th:first-child, .cmp-fund-table td:first-child { text-align: left; font-family: var(--font-sans); color: var(--text-secondary); } .cmp-fund-table thead th { background: var(--bg-header); color: var(--text-muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; font-family: var(--font-sans); font-weight: 600; } .cmp-fund-table tbody tr:last-child td { border-bottom: none; } .cmp-fund-table tbody tr:hover { background: var(--bg-hover); } .cmp-fund-metric { color: var(--text-secondary); } .cmp-winner { color: var(--green) !important; font-weight: 600; background: rgba(34,197,94,0.08); } /* North-star metric chip in the Forward-estimates rows. Reuses the dark terminal tokens — no new color invention. */ .cmp-metric-chip { display: inline-block; font-family: var(--font-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; color: var(--text-muted); background: var(--bg-header); border: 1px solid var(--border); border-radius: 3px; padding: 1px 5px; margin-right: 5px; vertical-align: middle; } .cmp-ns-val { font-family: var(--font-mono); vertical-align: middle; } .cmp-winner .cmp-metric-chip { color: var(--green); border-color: rgba(34,197,94,0.4); } .cmp-pct-flagged { color: var(--amber, #f59e0b); cursor: help; border-bottom: 1px dotted rgba(245, 158, 11, 0.6); } .cmp-pct-flagged sup { font-size: 9px; margin-left: 2px; color: var(--amber, #f59e0b); } /* AI Diff */ .cmp-aidiff { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; } .cmp-aidiff-block { background: var(--bg-primary); border: 1px solid var(--border); border-radius: 6px; padding: 14px 16px; } .cmp-aidiff-block h4 { margin: 0 0 10px; font-size: 12px; color: var(--accent); font-family: var(--font-mono); letter-spacing: 0.3px; } .cmp-aidiff-prose { color: var(--text-secondary); font-size: 12px; line-height: 1.55; margin: 0 0 8px; } .cmp-aidiff-list { margin: 0; padding-left: 18px; color: var(--text-secondary); font-size: 12px; line-height: 1.5; } .cmp-aidiff-list li { margin-bottom: 4px; } .cmp-aidiff-risks li { color: #fca5a5; } .cmp-aidiff-footer { color: var(--text-muted); font-size: 10.5px; font-style: italic; margin-top: 14px; grid-column: 1 / -1; } .cmp-winner-tag { display: inline-block; background: rgba(34,197,94,0.15); color: var(--green); font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 3px; margin-left: 6px; text-transform: uppercase; letter-spacing: 0.4px; } /* Scorecard */ .cmp-scorecard { width: 100%; } .cmp-scorecard-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; } .cmp-scorecard-table th, .cmp-scorecard-table td { padding: 9px 12px; text-align: center; border-bottom: 1px solid var(--border); } .cmp-scorecard-table thead th { background: var(--bg-header); color: var(--text-muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; font-family: var(--font-sans); font-weight: 600; } .cmp-scorecard-table th:first-child, .cmp-scorecard-table td:first-child { text-align: left; } .cmp-pillar-name { color: var(--text-primary); font-weight: 500; } .cmp-pillar-weight, .cmp-weight { color: var(--text-muted); font-size: 10px; font-family: var(--font-mono); } .cmp-weight-note { color: var(--text-muted); font-size: 10.5px; font-style: italic; margin-bottom: 8px; } .cmp-score-cell { min-width: 120px; padding: 6px 10px !important; } .cmp-score-val { font-family: var(--font-mono); font-weight: 600; color: var(--text-primary); font-size: 12px; display: block; margin-bottom: 3px; } .cmp-score-reason { display: block; color: var(--text-muted); font-size: 10px; line-height: 1.3; margin-top: 2px; } .cmp-score-bar { display: block; height: 4px; background: rgba(255,255,255,0.05); border-radius: 2px; overflow: hidden; margin-top: 3px; } .cmp-score-fill { display: block; height: 100%; border-radius: 2px; transition: width 0.35s ease; } .cmp-score-1 { width: 20%; background: #ef4444; } .cmp-score-2 { width: 40%; background: #f59e0b; } .cmp-score-3 { width: 60%; background: #eab308; } .cmp-score-4 { width: 80%; background: #84cc16; } .cmp-score-5 { width: 100%; background: var(--green); } .cmp-score-total-row { background: rgba(59,130,246,0.06); font-weight: 600; } .cmp-score-total-row td { border-top: 2px solid var(--border); } .cmp-score-total { color: var(--accent); font-family: var(--font-mono); font-weight: 700; font-size: 13px; } .cmp-scorecard-legend { color: var(--text-muted); font-size: 10.5px; margin-top: 8px; font-style: italic; } /* Radar */ .cmp-radar-wrap { position: relative; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 6px; padding: 18px; height: 480px; } .cmp-radar-note { color: var(--text-muted); font-size: 11px; margin-top: 8px; font-style: italic; text-align: center; } /* ===== Private trajectory cell in main private table ===== */ .pd-trajectory-cell { font-family: var(--font-mono); font-size: 11px; font-weight: 500; white-space: nowrap; text-align: right; } .pd-tone-up { color: var(--green); } .pd-tone-down { color: var(--red); } .pd-tone-flat { color: var(--text-muted); } /* ===== Private popup: new tabs (Funding History / Peer Trajectory / Returns) ===== */ .pd-funding-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 6px; overflow: hidden; } .pd-funding-table th, .pd-funding-table td { padding: 8px 12px; text-align: right; border-bottom: 1px solid var(--border); font-family: var(--font-mono); } .pd-funding-table th:first-child, .pd-funding-table td:first-child { text-align: left; font-family: var(--font-sans); color: var(--text-secondary); } .pd-funding-table thead th { background: var(--bg-header); color: var(--text-muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; font-family: var(--font-sans); font-weight: 600; } .pd-funding-table tbody tr:last-child td { border-bottom: none; } .pd-funding-table tbody tr:hover { background: var(--bg-hover); } .pd-peer-chart-wrap { position: relative; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 6px; padding: 14px; height: 360px; } .pd-peer-chart-wrap-large { height: 460px; } .pd-peer-mode-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; } .pd-peer-summary { color: var(--text-secondary); font-size: 12px; line-height: 1.55; margin: 10px 0 0; } .pd-peer-hint { color: var(--text-muted); font-size: 11px; font-style: italic; margin-top: 6px; } .pd-return-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; } .pd-return-card { background: var(--bg-primary); border: 1px solid var(--border); border-radius: 6px; padding: 16px 18px; } .pd-return-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-muted); font-weight: 600; margin-bottom: 6px; font-family: var(--font-sans); } .pd-return-value { font-family: var(--font-mono); font-size: 20px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.3px; } .pd-return-value.val-pos { color: var(--green); } .pd-return-value.val-neg { color: var(--red); } .pd-return-value.val-neutral { color: var(--text-secondary); } .pd-return-note { font-size: 10.5px; color: var(--text-muted); margin-top: 5px; line-height: 1.4; } .pd-empty { color: var(--text-muted); font-style: italic; font-size: 12px; padding: 24px; text-align: center; background: var(--bg-primary); border: 1px dashed var(--border); border-radius: 6px; } /* ===== Earnings: watchlist star + implied/historical urgency badge ===== */ .earnings-card.is-watchlist { border-left: 2px solid var(--accent); } .earnings-watch-star { color: #fbbf24; font-size: 13px; margin-right: 4px; text-shadow: 0 0 6px rgba(251,191,36,0.4); } .earnings-urgency-badge { display: inline-block; font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 3px; margin-left: 6px; letter-spacing: 0.3px; font-family: var(--font-mono); vertical-align: middle; } .earnings-urgency-badge.urg-hot { background: rgba(239,68,68,0.15); color: #fca5a5; border: 1px solid rgba(239,68,68,0.35); } .earnings-urgency-badge.urg-cold { background: rgba(59,130,246,0.12); color: #93c5fd; border: 1px solid rgba(59,130,246,0.3); } .earnings-urgency-badge.urg-flat { background: rgba(107,114,128,0.12); color: var(--text-secondary); border: 1px solid var(--border-light); } /* ===== Screener regime preset packs ===== */ .screener-regime-packs { margin-bottom: 10px; padding: 8px 12px; background: var(--bg-surface-alt); border: 1px solid var(--border); border-radius: 6px; } .regime-packs-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; } .regime-packs-title { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-muted); } .regime-packs-current { font-size: 10px; color: var(--text-muted); font-style: italic; } .regime-packs-row { display: flex; flex-wrap: wrap; gap: 6px; } .regime-pack-btn { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 6px 10px; min-width: 160px; max-width: 220px; text-align: left; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 4px; color: var(--text-primary); font-size: 11px; font-weight: 500; cursor: pointer; transition: background 0.12s, border-color 0.12s, transform 0.12s; font-family: var(--font-sans); } .regime-pack-blurb { font-size: 10px; color: var(--text-muted); font-weight: 400; white-space: normal; line-height: 1.3; } .regime-pack-btn:hover { background: var(--bg-surface); border-color: var(--text-muted); transform: translateY(-1px); } .regime-pack-btn.suggested { border-color: rgba(34,197,94,0.55); box-shadow: 0 0 0 1px rgba(34,197,94,0.25) inset; } .regime-pack-btn.suggested:hover { background: rgba(34,197,94,0.08); } .regime-pack-badge { display: inline-block; padding: 1px 5px; font-size: 8.5px; font-weight: 700; letter-spacing: 0.4px; background: rgba(34,197,94,0.18); color: var(--green); border-radius: 3px; } .regime-pack-name { white-space: nowrap; font-weight: 600; } /* ===== Screener macro-signal cells / earnings-momentum pills ===== */ .screener-mvp-table .screener-sig-cell { font-variant-numeric: tabular-nums; color: var(--text-secondary); } .earn-mom-pill { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; } .earn-mom-tailwind { background: rgba(34,197,94,0.16); color: var(--green); } .earn-mom-inflecting { background: rgba(59,130,246,0.16); color: #3b82f6; } .earn-mom-watching { background: rgba(234,179,8,0.16); color: #ca8a04; } .earn-mom-neutral { background: rgba(107,114,128,0.16); color: var(--text-muted); } .earn-mom-headwind { background: rgba(249,115,22,0.16); color: #ea580c; } .earn-mom-breaking { background: rgba(239,68,68,0.16); color: var(--red); } /* ===== Screener save/load toolbar ===== */ .screener-save-bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--bg-surface-alt); border: 1px solid var(--border); border-radius: 6px; margin-bottom: 10px; font-size: 12px; flex-wrap: wrap; } .screener-save-bar label { color: var(--text-muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600; } .screener-save-select { background: var(--bg-primary); border: 1px solid var(--border); color: var(--text-primary); padding: 4px 8px; font-size: 11px; border-radius: 4px; min-width: 200px; font-family: var(--font-sans); } .screener-save-input { background: var(--bg-primary); border: 1px solid var(--border); color: var(--text-primary); padding: 4px 8px; font-size: 11px; border-radius: 4px; min-width: 160px; font-family: var(--font-sans); } .screener-save-status { color: var(--text-muted); font-size: 10.5px; font-style: italic; margin-left: auto; } /* ===== Minor utility: btn-ghost (used by Compare toggle & tray) ===== */ .btn-ghost { background: transparent; border: 1px solid var(--border-light); color: var(--text-secondary); padding: 4px 10px; font-size: 11px; border-radius: 4px; cursor: pointer; font-family: var(--font-sans); transition: background 0.15s, color 0.15s, border-color 0.15s; } .btn-ghost:hover { color: var(--text-primary); border-color: var(--text-muted); background: var(--bg-hover); } .btn-primary { background: var(--accent); border: 1px solid var(--accent); color: #fff; padding: 4px 12px; font-size: 11px; border-radius: 4px; cursor: pointer; font-family: var(--font-sans); font-weight: 500; transition: background 0.15s; } .btn-primary:hover:not(:disabled) { background: var(--accent-dim); } .btn-primary:disabled { opacity: 0.45; cursor: not-allowed; } /* ===== PRIVATE COMPANY — FUNDING ROUNDS FORM (modal) ===== */ .private-modal { max-width: 720px; } .private-rounds-fieldset { border: 1px solid var(--border, #334155); border-radius: 8px; padding: 14px 16px; margin: 14px 0 10px; background: var(--bg-surface-alt, rgba(15, 23, 42, 0.4)); } .private-rounds-fieldset legend { font-size: 12px; font-weight: 600; color: var(--text-primary, #e5e7eb); text-transform: uppercase; letter-spacing: 0.6px; padding: 0 6px; } .private-rounds-hint { font-size: 12px; color: var(--text-muted, #94a3b8); margin-bottom: 12px; line-height: 1.5; } .private-rounds-list { display: flex; flex-direction: column; gap: 12px; } .private-round-row { position: relative; background: var(--bg-surface, rgba(30, 41, 59, 0.5)); border: 1px solid var(--border, #334155); border-radius: 8px; padding: 12px 38px 12px 12px; } .private-round-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 12px; } .private-round-grid .pr-field { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--text-muted, #94a3b8); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; } .private-round-grid .pr-field input { background: var(--bg-page, #0f172a); color: var(--text-primary, #e5e7eb); border: 1px solid var(--border, #334155); border-radius: 6px; padding: 7px 9px; font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: 0; } .private-round-grid .pr-field input:focus { border-color: var(--accent, #3b82f6); outline: none; } .pr-field-round, .pr-field-source { grid-column: span 1; } .pr-field-lead { grid-column: span 2; } .pr-field-co { grid-column: span 2; } @media (max-width: 540px) { .private-round-grid { grid-template-columns: 1fr; } .pr-field-lead, .pr-field-co { grid-column: span 1; } } .pr-remove-btn { position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--border, #334155); background: transparent; color: var(--text-muted, #94a3b8); cursor: pointer; font-size: 16px; line-height: 1; display: flex; align-items: center; justify-content: center; } .pr-remove-btn:hover { background: rgba(239, 68, 68, 0.15); border-color: #ef4444; color: #ef4444; } .private-add-round-btn { margin-top: 12px; background: transparent; border: 1px dashed var(--border, #334155); color: var(--text-secondary, #cbd5e1); padding: 8px 14px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; } .private-add-round-btn:hover { border-color: var(--accent, #3b82f6); color: var(--accent, #3b82f6); } /* ===== PRIVATE POPUP — FUNDING SUMMARY CARD ===== */ .pd-fund-summary-card { background: var(--bg-surface, rgba(30, 41, 59, 0.5)); border: 1px solid var(--border, #334155); border-radius: 10px; padding: 16px 18px; margin-bottom: 16px; } .pd-fund-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px 22px; } .pd-fund-summary-item { display: flex; flex-direction: column; gap: 2px; } .pd-fund-summary-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted, #94a3b8); font-weight: 600; } .pd-fund-summary-value { font-size: 16px; font-weight: 600; color: var(--text-primary, #e5e7eb); } /* ======================================================================== Quality Score + Debate Intensity badges Tier colors derive from existing palette: Quality: Elite=teal-deep, High=teal, Moderate=gold, Low=orange, Weak=red Debate: High=amber, Active=gold, Moderate=neutral, Low=muted ======================================================================== */ .ss-score-badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; font-family: var(--font-mono); letter-spacing: 0.2px; border: 1px solid transparent; background: var(--bg-surface-alt); color: var(--text-secondary); cursor: default; white-space: nowrap; position: relative; vertical-align: middle; } .ss-score-badge .ss-score-num { font-size: 12px; font-weight: 700; } .ss-score-badge .ss-score-sep { color: var(--text-muted); margin: 0 1px; } .ss-score-compact { padding: 1px 6px; gap: 2px; font-size: 10px; } .ss-score-compact .ss-score-num { font-size: 11px; } /* Quality tiers */ .ss-score-quality.ss-score-elite { background: rgba(13, 148, 136, 0.18); color: #5eead4; border-color: rgba(20, 184, 166, 0.40); } .ss-score-quality.ss-score-high { background: rgba(20, 184, 166, 0.12); color: #2dd4bf; border-color: rgba(20, 184, 166, 0.30); } .ss-score-quality.ss-score-moderate { background: rgba(234, 179, 8, 0.12); color: #facc15; border-color: rgba(234, 179, 8, 0.30); } .ss-score-quality.ss-score-low { background: rgba(249, 115, 22, 0.14); color: #fb923c; border-color: rgba(249, 115, 22, 0.30); } .ss-score-quality.ss-score-weak { background: rgba(239, 68, 68, 0.10); color: #f87171; border-color: rgba(239, 68, 68, 0.28); } /* Debate tiers */ .ss-score-debate.ss-score-high { background: rgba(245, 158, 11, 0.18); color: #fbbf24; border-color: rgba(245, 158, 11, 0.40); } .ss-score-debate.ss-score-active { background: rgba(234, 179, 8, 0.12); color: #facc15; border-color: rgba(234, 179, 8, 0.28); } .ss-score-debate.ss-score-moderate { background: rgba(148, 163, 184, 0.12); color: #cbd5e1; border-color: rgba(148, 163, 184, 0.28); } .ss-score-debate.ss-score-low { background: rgba(107, 114, 128, 0.12); color: var(--text-secondary); border-color: rgba(107, 114, 128, 0.24); } /* N/A */ .ss-score-na, .ss-score-badge.ss-score-na { background: transparent; color: var(--text-muted); border-color: rgba(107, 114, 128, 0.20); } /* Rich (non-compact) badge with hover tooltip card */ .ss-score-rich { cursor: help; outline: none; } .ss-score-tip { position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%); z-index: 1100; display: none; pointer-events: none; } .ss-score-rich:hover .ss-score-tip, .ss-score-rich:focus .ss-score-tip, .ss-score-rich:focus-within .ss-score-tip { display: block; } .ss-bd-card { width: 320px; background: var(--bg-surface); border: 1px solid var(--border-light); border-radius: 6px; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.40); padding: 12px; text-align: left; font-family: var(--font-sans); letter-spacing: 0; } .ss-bd-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--border); padding-bottom: 6px; margin-bottom: 8px; } .ss-bd-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-secondary); } .ss-bd-headline { font-size: 12px; font-weight: 700; color: var(--text-primary); font-family: var(--font-mono); } .ss-bd-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 5px 0; border-bottom: 1px dashed var(--border); } .ss-bd-row:last-child { border-bottom: none; } .ss-bd-row-skip { opacity: 0.55; } .ss-bd-label { font-size: 12px; font-weight: 600; color: var(--text-primary); } .ss-bd-meta { grid-column: 1 / 2; font-size: 11px; color: var(--text-muted); } .ss-bd-score { grid-column: 2 / 3; grid-row: 1 / 3; align-self: center; font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--text-primary); } .ss-bd-skip { grid-column: 2 / 3; grid-row: 1 / 3; align-self: center; font-size: 10px; color: var(--text-muted); font-style: italic; } .ss-bd-foot { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--border); font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; } /* Watchlist row score cells */ .watchlist-table td.cell-quality, .watchlist-table td.cell-debate { padding: 4px 6px; } .watchlist-table th.col-quality, .watchlist-table th.col-debate { white-space: nowrap; } /* Popup header score row */ .popup-header { flex-wrap: wrap; } .popup-score-row { display: flex; gap: 8px; margin-left: auto; padding-left: 12px; border-left: 1px solid var(--border); align-items: center; } /* Drilldown masthead score stat \u2014 align badge next to the label */ .dd-mast-stat-score { align-items: flex-start; } .dd-mast-stat-score .ss-score-badge { margin-top: 2px; } /* ── Watchlist column-group header row ────────────────────────────────── Lightweight super-header above the main thead row. Visually labels the Performance and AI Signals column ranges without affecting any sort or filter logic on the row below it. */ .watchlist-table thead tr.col-group-row > th { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); border-bottom: none; padding-bottom: 0; font-weight: 600; background: transparent; text-align: center; cursor: default; } .watchlist-table thead tr.col-group-row > th.col-group-signals { color: var(--accent); font-weight: 700; } .watchlist-table thead tr.col-group-row > th.col-group-perf { color: var(--text-secondary); } /* ===== Compare redesign — v20260512a ===== */ /* --- Flash + header --- */ .cmp-flash-note, .cmp-flash-error { font-size: 11px; padding: 4px 8px; border-radius: 4px; border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text-secondary); } .cmp-flash-error { border-color: rgba(239,68,68,0.45); color: #fca5a5; background: rgba(239,68,68,0.08); } .compare-header-main { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .compare-header-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .compare-header-actions .btn-link { font-size: 11px; padding: 4px 8px; border-radius: 4px; border: 1px solid var(--border); background: transparent; color: var(--text-secondary); cursor: pointer; } .compare-header-actions .btn-link:hover { color: var(--text-primary); background: var(--bg-hover); } /* --- Overview hero --- */ .cmp-hero { margin-bottom: 18px; } .cmp-hero-grid-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; } .cmp-hero-ticker { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; } .cmp-hero-name { font-size: 11px; color: var(--text-muted); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cmp-hero-price { font-size: 18px; font-weight: 600; margin-bottom: 8px; color: var(--text-primary); } .cmp-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; } .cmp-hero-k { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.04em; } .cmp-hero-v { font-size: 12px; color: var(--text-primary); font-variant-numeric: tabular-nums; text-align: right; } .cmp-up { color: var(--green); } .cmp-down { color: var(--red); } /* --- Benchmark legend --- */ .cmp-benchmark-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; font-size: 11px; color: var(--text-secondary); } .cmp-bench-bit { display: inline-flex; align-items: center; gap: 6px; } .cmp-bench-bit::before { content: ""; width: 10px; height: 2px; background: currentColor; display: inline-block; } /* --- Trends tab --- */ .cmp-trends-section { margin-bottom: 26px; } .cmp-perf-table { width: 100%; border-collapse: collapse; font-size: 12px; } .cmp-perf-table th, .cmp-perf-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: right; } .cmp-perf-table th:first-child, .cmp-perf-table td:first-child { text-align: left; } .cmp-perf-table thead th { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); background: var(--bg-elevated); } .cmp-perf-ticker { font-weight: 600; color: var(--text-primary); } .cmp-perf-cell { position: relative; min-width: 80px; } .cmp-perf-bar { position: relative; height: 4px; background: var(--bg-hover); border-radius: 2px; margin-top: 4px; } .cmp-perf-fill { position: absolute; top: 0; left: 50%; height: 100%; background: var(--accent); border-radius: 2px; } .cmp-perf-fill.neg { background: var(--red); } .cmp-perf-fill.pos { background: var(--green); } .cmp-perf-val { font-variant-numeric: tabular-nums; font-weight: 500; } .cmp-reactions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; } .cmp-react-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px; padding: 12px; } .cmp-react-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; font-weight: 600; color: var(--text-primary); } .cmp-react-body { font-size: 11px; color: var(--text-secondary); margin-bottom: 8px; } .cmp-react-cadence { font-variant-numeric: tabular-nums; color: var(--text-muted); } .cmp-react-bars { display: flex; flex-direction: column; gap: 3px; } .cmp-react-bar { display: flex; align-items: center; gap: 6px; height: 14px; position: relative; font-size: 10px; } .cmp-react-bar.up { color: var(--green); } .cmp-react-bar.down { color: var(--red); } .cmp-react-bar-label { flex: 0 0 64px; color: var(--text-muted); font-variant-numeric: tabular-nums; } .cmp-react-bar::after { content: ""; position: absolute; left: 70px; right: 50px; height: 4px; border-radius: 2px; background: currentColor; opacity: 0.4; width: var(--bar, 0%); } .cmp-react-empty { color: var(--text-muted); font-size: 11px; font-style: italic; } .cmp-snap-table { width: 100%; border-collapse: collapse; font-size: 12px; } .cmp-snap-table th, .cmp-snap-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: right; } .cmp-snap-table th:first-child, .cmp-snap-table td:first-child { text-align: left; } .cmp-snap-metric { color: var(--text-secondary); font-weight: 500; } .cmp-snap-cell { position: relative; } .cmp-snap-bar { height: 4px; background: var(--bg-hover); border-radius: 2px; margin-top: 4px; position: relative; } .cmp-snap-fill { height: 100%; background: var(--accent); border-radius: 2px; } .cmp-snap-val { font-variant-numeric: tabular-nums; } /* --- Fundamentals groups --- */ .cmp-fund-group td { background: var(--bg-elevated); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); font-weight: 600; padding: 6px 10px; } /* --- Scorecard abs tier chips --- */ .cmp-abs-chip { display: inline-block; padding: 1px 6px; border-radius: 8px; font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums; border: 1px solid transparent; } .cmp-abs-1 { background: rgba(239,68,68,0.15); color: #fca5a5; border-color: rgba(239,68,68,0.35); } .cmp-abs-2 { background: rgba(245,158,11,0.15); color: #fcd34d; border-color: rgba(245,158,11,0.35); } .cmp-abs-3 { background: rgba(234,179,8,0.12); color: #fde68a; border-color: rgba(234,179,8,0.3); } .cmp-abs-4 { background: rgba(132,204,22,0.15); color: #bef264; border-color: rgba(132,204,22,0.35); } .cmp-abs-5 { background: rgba(34,197,94,0.18); color: #86efac; border-color: rgba(34,197,94,0.4); } .cmp-abs-na { background: transparent; color: var(--text-muted); border-color: var(--border); } .cmp-score-chips { display: flex; gap: 4px; margin: 4px 0; flex-wrap: wrap; } .cmp-score-abs-total { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; } /* --- Radar toolbar + winner strip --- */ .cmp-radar-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; } .cmp-radar-mode { display: inline-flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; } .cmp-radar-mode-btn { font-size: 11px; padding: 4px 10px; background: transparent; border: none; color: var(--text-secondary); cursor: pointer; border-right: 1px solid var(--border); } .cmp-radar-mode-btn:last-child { border-right: none; } .cmp-radar-mode-btn.active { background: rgba(59,130,246,0.18); color: var(--accent); } .cmp-radar-mode-hint { font-size: 11px; color: var(--text-muted); } .cmp-winner-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px; margin: 12px 0; } .cmp-winner-cell { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; } .cmp-winner-pillar { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .cmp-winner-name { font-weight: 600; color: var(--text-primary); font-size: 13px; margin-top: 2px; } .cmp-winner-score { font-size: 11px; color: var(--text-secondary); font-variant-numeric: tabular-nums; } .cmp-radar-detail { margin-top: 12px; } .cmp-radar-detail-table { width: 100%; border-collapse: collapse; font-size: 12px; } .cmp-radar-detail-table th, .cmp-radar-detail-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: center; } .cmp-radar-detail-table th:first-child, .cmp-radar-detail-table td:first-child { text-align: left; } .cmp-radar-cell { vertical-align: top; } .cmp-radar-score { font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-primary); } .cmp-radar-plain { font-size: 11px; color: var(--text-muted); margin-top: 2px; } /* --- Earnings Intel tab --- */ .cmp-intel-shell { display: flex; flex-direction: column; gap: 22px; } .cmp-intel-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; } .cmp-intel-strip-cell { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; } .cmp-intel-strip-tick { font-weight: 600; color: var(--text-primary); margin-bottom: 4px; } .cmp-intel-strip-state { display: inline-block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; padding: 1px 6px; border-radius: 4px; margin-bottom: 6px; } .cmp-intel-state-pre { background: rgba(245,158,11,0.15); color: #fcd34d; } .cmp-intel-state-post { background: rgba(59,130,246,0.15); color: var(--accent); } .cmp-intel-state-idle { background: var(--bg-hover); color: var(--text-muted); } .cmp-intel-strip-detail { font-size: 11px; color: var(--text-secondary); } .cmp-intel-reactions { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; } .cmp-intel-react-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px; padding: 12px; } .cmp-intel-react-tick { font-weight: 600; color: var(--text-primary); display: flex; justify-content: space-between; align-items: baseline; } .cmp-intel-react-move { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 13px; } .cmp-intel-react-headline { font-size: 12px; color: var(--text-secondary); margin: 6px 0 6px; line-height: 1.4; } .cmp-intel-bullets { list-style: disc; padding-left: 18px; margin: 0; font-size: 11px; color: var(--text-secondary); } .cmp-intel-bullets li { margin-bottom: 3px; } .cmp-intel-bottomline { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; } .cmp-intel-bl-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px; padding: 12px; } .cmp-intel-bl-tick { font-weight: 600; color: var(--text-primary); margin-bottom: 4px; } .cmp-intel-bl-text { font-size: 12px; color: var(--text-secondary); line-height: 1.45; margin-bottom: 6px; } .cmp-intel-bl-tone { font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); } .cmp-intel-cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; } .cmp-intel-case-head { font-weight: 600; color: var(--text-primary); margin-bottom: 6px; font-size: 12px; } .cmp-intel-case-list { list-style: none; padding: 0; margin: 0; font-size: 11px; color: var(--text-secondary); display: flex; flex-direction: column; gap: 6px; } .cmp-intel-case-list li { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; } .cmp-intel-empty { background: var(--bg-elevated); border: 1px dashed var(--border); border-radius: 8px; padding: 24px; text-align: center; } .cmp-intel-empty-msg { color: var(--text-muted); font-size: 12px; } /* --- AI Read tab --- */ .cmp-ai-shell { display: flex; flex-direction: column; gap: 14px; } .cmp-ai-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 10px; border-bottom: 1px solid var(--border); } .cmp-ai-toolbar .btn-link { font-size: 12px; padding: 6px 12px; border-radius: 6px; border: 1px solid var(--border); background: transparent; color: var(--text-secondary); cursor: pointer; } .cmp-ai-toolbar .btn-link:hover { color: var(--text-primary); background: var(--bg-hover); } .cmp-ai-status { font-size: 11px; color: var(--text-muted); } .cmp-ai-status-ok { color: var(--green); } .cmp-ai-status-error { color: #fca5a5; } .cmp-ai-paste-row { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; background: var(--bg-elevated); } .cmp-ai-paste-details > summary { cursor: pointer; font-size: 12px; color: var(--text-secondary); font-weight: 500; list-style: none; } .cmp-ai-paste-details > summary::-webkit-details-marker { display: none; } .cmp-ai-paste-details[open] > summary { margin-bottom: 8px; } .cmp-ai-paste { width: 100%; min-height: 100px; resize: vertical; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; background: var(--bg-primary); color: var(--text-primary); border: 1px solid var(--border); border-radius: 6px; padding: 8px; } .cmp-ai-paste-actions { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; } .cmp-ai-paste-hint { font-size: 11px; color: var(--text-muted); } .cmp-ai-paste-hint.ok { color: var(--green); } .cmp-ai-paste-hint.error { color: #fca5a5; } .cmp-ai-paste-hint.warn { color: #fcd34d; } .cmp-ai-content { min-height: 120px; } .cmp-ai-empty { color: var(--text-muted); font-size: 12px; font-style: italic; padding: 20px; text-align: center; } .cmp-ai-saved-meta { font-size: 10px; color: var(--text-muted); margin-bottom: 8px; } .cmp-ai-result { display: flex; flex-direction: column; gap: 14px; } .cmp-ai-block { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; } .cmp-ai-block h4 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin: 0 0 6px; } .cmp-ai-strongest { font-size: 14px; color: var(--text-primary); font-weight: 600; } .cmp-ai-risk { font-size: 13px; color: var(--text-secondary); } .cmp-ai-pill { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; background: var(--bg-hover); color: var(--text-primary); margin-right: 6px; } .cmp-ai-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; } .cmp-ai-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px; padding: 12px; } .cmp-ai-card-head { font-weight: 600; color: var(--text-primary); margin-bottom: 6px; } .cmp-ai-bull { border-left: 3px solid var(--green); } .cmp-ai-bear { border-left: 3px solid var(--red); } .cmp-ai-watch { border-left: 3px solid #f59e0b; } .cmp-ai-raw { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; color: var(--text-muted); background: var(--bg-primary); border: 1px solid var(--border); border-radius: 6px; padding: 10px; white-space: pre-wrap; word-break: break-word; max-height: 300px; overflow: auto; } .cmp-ai-loading { display: flex; align-items: center; gap: 10px; padding: 16px; color: var(--text-secondary); font-size: 13px; } .cmp-ai-spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--border); border-top-color: var(--accent, #60a5fa); border-radius: 50%; animation: spin 0.8s linear infinite; } .cmp-ai-error-block { border: 1px solid #fca5a5; background: rgba(248, 113, 113, 0.08); border-radius: 6px; padding: 12px; color: #fca5a5; font-size: 13px; } .cmp-ai-error-block p { margin: 0 0 10px 0; } .cmp-ai-citations ol { margin: 6px 0 0 0; padding-left: 20px; } .cmp-ai-citations li { font-size: 12px; margin-bottom: 4px; word-break: break-all; } .cmp-ai-footer { display: flex; justify-content: flex-end; gap: 8px; } .btn-link { font-size: 11px; padding: 4px 10px; border-radius: 4px; border: 1px solid var(--border); background: transparent; color: var(--text-secondary); cursor: pointer; } .btn-link:hover { color: var(--text-primary); background: var(--bg-hover); } /* ===== Compare v3 enhancements ===== */ /* Enhancement 1 — Beat-rate strip (Earnings Intel) */ .cmp-beat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 0 0 16px; } .cmp-beat-cell { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; } .cmp-beat-label { font-weight: 600; font-size: 12px; color: var(--text-primary); margin-bottom: 6px; } .cmp-beat-bar { height: 8px; border-radius: 4px; background: var(--bg-hover); overflow: hidden; } .cmp-beat-fill { height: 100%; border-radius: 4px; background: var(--text-muted); transition: width 0.3s ease; } .cmp-beat-fill.positive { background: var(--green); } .cmp-beat-fill.negative { background: var(--red); } .cmp-beat-fill.cmp-beat-mid { background: #f59e0b; } .cmp-beat-fill.cmp-na { background: var(--text-muted); } .cmp-beat-count { margin-top: 6px; font-size: 11px; color: var(--text-secondary); } /* Enhancement 2 — AI Read per-ticker accordion */ .cmp-ai-per-ticker { display: flex; flex-direction: column; gap: 8px; } .cmp-ai-ticker-details { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px; padding: 4px 12px; } .cmp-ai-ticker-details > summary { cursor: pointer; list-style: none; padding: 8px 0; font-size: 12px; color: var(--text-secondary); } .cmp-ai-ticker-details > summary::-webkit-details-marker { display: none; } .cmp-ai-summary-tick { font-weight: 600; color: var(--text-primary); } .cmp-ai-row { font-size: 12px; color: var(--text-secondary); padding: 6px 8px; margin: 4px 0; border-radius: 4px; background: var(--bg-primary); } .cmp-ai-row.cmp-ai-bull { border-left: 3px solid var(--green); } .cmp-ai-row.cmp-ai-bear { border-left: 3px solid var(--red); } .cmp-ai-row.cmp-ai-watch { border-left: 3px solid #f59e0b; } .cmp-ai-per-ticker-hint { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; } .cmp-ai-summary-snip { color: var(--text-secondary); font-weight: 400; } .cmp-ai-summary-arrow { display: inline-block; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--text-muted); vertical-align: middle; margin: 0 4px; transition: transform 0.15s ease; } .cmp-ai-ticker-details[open] > summary .cmp-ai-summary-arrow { transform: rotate(180deg); } /* Enhancement 3 — Alpha badge on hero cards */ .cmp-hero-alpha { margin-top: 8px; font-size: 11px; font-weight: 600; color: var(--text-secondary); } .cmp-hero-alpha.cmp-up { color: var(--green); } .cmp-hero-alpha.cmp-down { color: var(--red); } .cmp-hero-alpha:empty { display: none; } /* Enhancement 5 — "+ Compare" button in ticker popup */ .popup-add-compare { margin-left: auto; } .popup-add-compare-on { border-color: var(--green); color: var(--green); } /* Enhancement 6 — Quarterly sparklines (Trends) */ .cmp-sparklines { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; } .cmp-spark-col { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: 8px; padding: 12px; } .cmp-spark-tick { font-weight: 600; font-size: 12px; color: var(--text-primary); margin-bottom: 8px; } .cmp-spark-metric { display: flex; align-items: center; gap: 8px; padding: 5px 0; } .cmp-spark-label { flex: 1; font-size: 11px; color: var(--text-secondary); } .cmp-spark-svg { width: 120px; height: 60px; flex: 0 0 auto; } .cmp-spark-last { flex: 0 0 auto; font-size: 11px; font-weight: 600; color: var(--text-primary); min-width: 48px; text-align: right; } .cmp-spark-na { font-size: 11px; color: var(--text-muted); } /* ===== API Settings modal — v20260512c ===== */ .api-settings-btn { background: var(--bg-elevated); color: var(--text-secondary); border: 1px solid var(--border); border-radius: 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; padding: 4px 10px; cursor: pointer; margin-left: 8px; } .api-settings-btn:hover { color: var(--text-primary); background: var(--bg-hover); } .api-settings-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 16px; } .api-settings-card { width: 100%; max-width: 560px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 10px; padding: 18px 22px 22px; max-height: 88vh; overflow: auto; box-shadow: 0 10px 32px rgba(0,0,0,0.5); } .api-settings-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .api-settings-head h3 { margin: 0; font-size: 16px; color: var(--text-primary); } .api-settings-close { background: transparent; border: none; color: var(--text-muted); font-size: 22px; cursor: pointer; line-height: 1; } .api-settings-close:hover { color: var(--text-primary); } .api-settings-intro { font-size: 12px; color: var(--text-secondary); margin: 0 0 14px; line-height: 1.45; } .api-settings-intro a { color: var(--accent); } .api-settings-row { margin-bottom: 14px; } .api-settings-row label, .api-settings-col label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 4px; } .api-settings-row input, .api-settings-col select { width: 100%; background: var(--bg-elevated); color: var(--text-primary); border: 1px solid var(--border); border-radius: 6px; padding: 7px 10px; font-size: 13px; font-family: ui-monospace, "SF Mono", Menlo, monospace; } .api-settings-row input:focus, .api-settings-col select:focus { outline: none; border-color: var(--accent); } .api-settings-hint { font-size: 11px; margin-top: 4px; } .api-status-ok { color: var(--green); } .api-status-warn { color: #fcd34d; } .api-status-error { color: #fca5a5; } .api-status-info { color: var(--text-secondary); } .api-settings-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-bottom: 14px; } @media (max-width: 540px) { .api-settings-grid { grid-template-columns: 1fr; } } .api-settings-actions { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--border); padding-top: 12px; } .api-settings-actions-right { display: flex; gap: 8px; } .api-settings-actions .btn-primary { background: var(--accent); color: white; border: none; border-radius: 6px; padding: 6px 14px; font-size: 12px; font-weight: 600; cursor: pointer; } .api-settings-actions .btn-primary:hover { filter: brightness(1.1); } .api-settings-test-out { font-size: 12px; margin-top: 10px; min-height: 18px; } .api-settings-cost { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 10px; } .api-settings-cost summary { cursor: pointer; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); } .api-settings-cost ul { font-size: 12px; color: var(--text-secondary); padding-left: 18px; margin: 8px 0; } .api-settings-cost li { margin-bottom: 3px; } .api-settings-cost-note { font-size: 11px; color: var(--text-muted); margin: 6px 0 0; } /* ============================================================ M&A Rumor Pending Review (News tab) ============================================================ */ .ma-pending-section { margin-bottom: 24px; padding: 16px; border: 1px solid rgba(255, 165, 0, 0.25); border-radius: 12px; background: rgba(255, 165, 0, 0.04); } .ma-pending-section .section-header-bar h2 { display: flex; align-items: center; gap: 10px; font-size: 16px; } .badge.badge-pending { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 8px; border-radius: 11px; background: #ff8c00; color: #fff; font-size: 12px; font-weight: 700; } .ma-pending-list { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 12px; } .ma-pending-card { border: 1px solid var(--border, rgba(255, 255, 255, 0.08)); border-radius: 10px; background: var(--surface, rgba(255, 255, 255, 0.02)); padding: 14px 16px; } .ma-pending-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .ma-pending-title { display: flex; align-items: baseline; gap: 8px; } .ma-pending-title strong { font-size: 17px; letter-spacing: 0.4px; } .ma-pending-company { font-size: 13px; color: var(--muted, rgba(255, 255, 255, 0.6)); } .ma-pending-meta { display: flex; align-items: center; gap: 10px; font-size: 12px; } .ma-pending-conf { padding: 2px 8px; border-radius: 999px; font-weight: 600; } .ma-pending-conf.high { background: rgba(46, 160, 67, 0.18); color: #4ac26b; } .ma-pending-conf.mid { background: rgba(255, 165, 0, 0.18); color: #ff9d2b; } .ma-pending-conf.low { background: rgba(255, 80, 80, 0.18); color: #ff7676; } .ma-pending-move { font-variant-numeric: tabular-nums; color: var(--muted, rgba(255, 255, 255, 0.7)); } .ma-pending-when { color: var(--muted, rgba(255, 255, 255, 0.55)); } .ma-pending-body { font-size: 13px; line-height: 1.5; } .ma-pending-headline { font-weight: 600; margin-bottom: 4px; } .ma-pending-rationale { color: var(--muted, rgba(255, 255, 255, 0.75)); margin-bottom: 8px; } .ma-pending-buyer { margin-bottom: 8px; } .ma-pending-label { color: var(--muted, rgba(255, 255, 255, 0.55)); margin-right: 4px; } .ma-pending-sep { margin: 0 8px; color: var(--muted, rgba(255, 255, 255, 0.35)); } .ma-pending-gates { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .ma-gate { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; } .ma-gate.pass { background: rgba(46, 160, 67, 0.16); color: #4ac26b; } .ma-gate.fail { background: rgba(255, 80, 80, 0.16); color: #ff7676; } .ma-pending-sources { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; } .ma-pending-source { font-size: 12px; text-decoration: none; color: var(--accent, #6ea8ff); background: rgba(110, 168, 255, 0.1); padding: 2px 8px; border-radius: 6px; } .ma-pending-source:hover { background: rgba(110, 168, 255, 0.2); } .ma-pending-actions { display: flex; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border, rgba(255, 255, 255, 0.06)); } .ma-pending-actions .btn { padding: 6px 14px; border-radius: 6px; border: 1px solid transparent; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.15s, border-color 0.15s; } .ma-pending-actions .btn:disabled { opacity: 0.6; cursor: progress; } .btn-approve { background: rgba(255, 165, 0, 0.18); color: #ff9d2b; border-color: rgba(255, 165, 0, 0.35); } .btn-approve:hover { background: rgba(255, 165, 0, 0.28); } .btn-reject { background: transparent; color: var(--muted, rgba(255, 255, 255, 0.7)); border-color: var(--border, rgba(255, 255, 255, 0.15)); } .btn-reject:hover { background: rgba(255, 255, 255, 0.05); } /* --- Peer ticker links in earnings-intel drilldown --- */ .peer-ticker-link { color: #60a5fa; text-decoration: none; cursor: pointer; font-weight: 600; } .peer-ticker-link:hover { text-decoration: underline; color: #93bbfc; } /* Live-quotes row update flash */ @keyframes row-flash-anim { 0% { background-color: rgba(110, 168, 255, 0.18); } 100% { background-color: transparent; } } .row-flash { animation: row-flash-anim 0.6s ease-out 1; } /* Search "Open overview" jump: longer, more prominent flash than the * live-quotes update so the user can locate the row they searched for. */ @keyframes row-flash-search-anim { 0% { background-color: rgba(110, 168, 255, 0.32); } 60% { background-color: rgba(110, 168, 255, 0.20); } 100% { background-color: transparent; } } .row-flash-search { animation: row-flash-search-anim 1.2s ease-out 1; } /* "n/a" placeholder for cells where a metric is not meaningful for the row's * subsector (e.g. Enterprise Value for banks). Subdued styling so it reads as * "intentionally not applicable" rather than "missing data". */ .cell-na { color: var(--text-muted, #6b7280); font-style: italic; opacity: 0.75; } /* ===== Weekly Briefing: Upcoming Catalysts ===== */ .wb-catalysts-list { display: flex; flex-direction: column; gap: 10px; } .wb-catalyst-item { background: rgba(255,255,255,0.03); border: 1px solid var(--border, #1e2433); border-radius: 6px; padding: 12px; } .wb-catalyst-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; flex-wrap: wrap; } .wb-catalyst-date { font-size: 0.8rem; color: var(--text-muted, #6b7280); font-family: var(--font-mono, monospace); } .wb-catalyst-ticker { font-size: 0.85rem; font-weight: 600; color: var(--accent, #6366f1); } .wb-catalyst-type { font-size: 0.75rem; background: rgba(99,102,241,0.12); color: #a5b4fc; padding: 2px 6px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.04em; } .wb-catalyst-importance { font-size: 0.7rem; padding: 2px 6px; border-radius: 4px; font-weight: 600; letter-spacing: 0.05em; } .wb-catalyst-high { background: rgba(239,68,68,0.15); color: #f87171; } .wb-catalyst-medium { background: rgba(245,158,11,0.15); color: #fbbf24; } .wb-catalyst-low { background: rgba(107,114,128,0.15); color: #9ca3af; } .wb-catalyst-event { font-size: 0.85rem; color: var(--text, #e5e7eb); font-weight: 500; margin-bottom: 4px; } .wb-catalyst-context { font-size: 0.8rem; color: var(--text-muted, #6b7280); line-height: 1.5; } /* ===== Weekly Briefing: Sector Summary ===== */ .wb-sector-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; } .wb-sector-item { background: rgba(255,255,255,0.03); border: 1px solid var(--border, #1e2433); border-radius: 6px; padding: 12px; } .wb-sector-name { font-size: 0.8rem; font-weight: 700; color: var(--accent, #6366f1); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; } .wb-sector-detail { font-size: 0.8rem; color: var(--text-muted, #9ca3af); line-height: 1.55; } /* ===== Weekly Briefing: Market Intel (Workstream D) ===== */ .wb-mi-block { display: flex; flex-direction: column; gap: 6px; } .wb-mi-row { font-size: 0.8rem; line-height: 1.5; color: var(--text-muted, #9ca3af); } .wb-mi-label { font-weight: 600; color: var(--text, #e5e7eb); margin-right: 4px; } .wb-mi-val { color: var(--text, #e5e7eb); } .wb-mi-source { font-size: 0.72rem; color: var(--accent, #6366f1); margin-left: 4px; opacity: 0.75; text-decoration: none; } .wb-mi-source:hover { opacity: 1; text-decoration: underline; } .wb-mi-callout { font-size: 0.8rem; background: rgba(99,102,241,0.08); border-left: 3px solid var(--accent, #6366f1); padding: 8px 12px; border-radius: 0 6px 6px 0; color: var(--text-muted, #9ca3af); margin-bottom: 12px; line-height: 1.55; } .wb-mi-callout a { color: var(--accent, #6366f1); text-decoration: none; } .wb-mi-callout a:hover { text-decoration: underline; } .wb-mi-cagr-tag { font-size: 0.72rem; background: rgba(99,102,241,0.12); color: #a5b4fc; padding: 1px 5px; border-radius: 4px; margin-right: 4px; } .wb-mi-cagr-tag a { color: #a5b4fc; text-decoration: none; } .wb-mi-cagr-tag a:hover { text-decoration: underline; } .wb-drawer-section--industry { border-top: 1px solid rgba(255,255,255,0.06); margin-top: 8px; } /* ============================================================ WATCHLIST PILL BAR — PR VIII (Multi-watchlist UI) Secondary bar that slots below the global topbar. Lets the user switch the active watchlist, star one as featured, or promote one to default. Hidden when WatchlistSync has no lists (signed out / pre-bootstrap). ============================================================ */ .watchlist-pillbar { background: var(--bg-header); border-bottom: 1px solid var(--border); padding: 6px 16px; } .watchlist-pillbar[hidden] { display: none; } .wl-pillbar-inner { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .wl-pillbar-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); } .wl-pillbar-pills { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .wl-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px 3px 8px; border-radius: 999px; background: var(--bg-surface); border: 1px solid var(--border); font-size: 12px; color: var(--text-secondary); transition: background 120ms ease, border-color 120ms ease, color 120ms ease; } .wl-pill:hover { background: var(--bg-hover); } .wl-pill-active { background: var(--accent-dim); border-color: var(--accent); color: #fff; } .wl-pill-active:hover { background: var(--accent); } .wl-pill-switch { background: transparent; border: none; color: inherit; font: inherit; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } .wl-pill-name { white-space: nowrap; max-width: 160px; overflow: hidden; text-overflow: ellipsis; } .wl-pill-visibility { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 1px 5px; border-radius: 4px; background: rgba(255,255,255,0.07); color: var(--text-secondary); } .wl-pill-visibility-public { background: rgba(34,197,94,0.18); color: #86efac; } .wl-pill-visibility-friends { background: rgba(234,179,8,0.18); color: #fde68a; } .wl-pill-star { background: transparent; border: none; color: var(--text-muted); font-size: 13px; line-height: 1; cursor: pointer; padding: 0 2px; } .wl-pill-star[aria-pressed="true"] { color: #fbbf24; } .wl-pill-star:hover { color: var(--text-primary); } .wl-pill-active .wl-pill-star { color: rgba(255,255,255,0.7); } .wl-pill-active .wl-pill-star[aria-pressed="true"] { color: #fbbf24; } .wl-pill-make-default, .wl-pill-default-badge { font-size: 10px; padding: 1px 6px; border-radius: 4px; background: rgba(255,255,255,0.06); color: var(--text-muted); border: none; cursor: pointer; white-space: nowrap; } .wl-pill-make-default:hover { color: var(--text-primary); background: rgba(255,255,255,0.12); } .wl-pill-default-badge { background: rgba(59,130,246,0.18); color: var(--accent); cursor: default; } .wl-pill-active .wl-pill-default-badge { background: rgba(255,255,255,0.15); color: #fff; } /* Create form */ .wl-pill-create { display: inline-flex; align-items: center; gap: 6px; margin-left: 6px; } .wl-pill-create-btn { background: var(--bg-surface); border: 1px dashed var(--border-light); color: var(--text-secondary); font-size: 12px; padding: 3px 10px; border-radius: 999px; cursor: pointer; } .wl-pill-create-btn:hover { color: var(--text-primary); border-color: var(--accent); } .wl-pill-create-form { display: inline-flex; align-items: center; gap: 6px; } .wl-pill-create-form[hidden] { display: none; } .wl-pill-create-input { background: var(--bg-surface); border: 1px solid var(--border-light); color: var(--text-primary); font-size: 12px; padding: 4px 8px; border-radius: 4px; width: 180px; } .wl-pill-create-input:focus { outline: none; border-color: var(--accent); } .wl-pill-create-submit, .wl-pill-create-cancel { background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-secondary); font-size: 11px; padding: 3px 8px; border-radius: 4px; cursor: pointer; } .wl-pill-create-submit:hover { color: var(--accent); border-color: var(--accent); } .wl-pill-create-submit:disabled { opacity: 0.5; cursor: progress; } .wl-pill-create-error { font-size: 11px; color: var(--red); } .wl-pill-create-error[hidden] { display: none; } /* ============================================================ CSV IMPORT MODAL — PR IX (Import CSV for watchlists) ============================================================ */ .csv-import-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; } .csv-import-backdrop { position: absolute; inset: 0; background: rgba(10, 14, 23, 0.78); backdrop-filter: blur(2px); } .csv-import-dialog { position: relative; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 8px; width: 100%; max-width: 560px; max-height: 92vh; display: flex; flex-direction: column; box-shadow: 0 25px 60px rgba(0,0,0,0.6); } .csv-import-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); } .csv-import-title { margin: 0; font-size: 15px; font-weight: 600; color: var(--text-primary); } .csv-import-close { background: transparent; border: none; color: var(--text-muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px; } .csv-import-close:hover { color: var(--text-primary); } .csv-import-body { padding: 16px 18px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; } .csv-import-section { display: flex; flex-direction: column; gap: 6px; } .csv-import-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); } .csv-import-source { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .csv-import-file { color: var(--text-secondary); font-size: 12px; } .csv-import-or { color: var(--text-muted); font-size: 11px; } .csv-import-textarea { width: 100%; background: var(--bg-primary); border: 1px solid var(--border-light); border-radius: 4px; color: var(--text-primary); font-family: var(--font-mono); font-size: 12px; padding: 8px 10px; resize: vertical; min-height: 100px; } .csv-import-textarea:focus { outline: none; border-color: var(--accent); } .csv-import-target { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; } .csv-import-radio { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: 12px; cursor: pointer; min-width: 140px; } .csv-import-name, .csv-import-select { flex: 1; background: var(--bg-primary); border: 1px solid var(--border-light); color: var(--text-primary); font-size: 12px; padding: 5px 8px; border-radius: 4px; } .csv-import-name:focus, .csv-import-select:focus { outline: none; border-color: var(--accent); } .csv-import-name:disabled, .csv-import-select:disabled { opacity: 0.5; cursor: not-allowed; } .csv-import-preview { background: var(--bg-primary); border: 1px solid var(--border); border-radius: 4px; padding: 8px; min-height: 48px; max-height: 160px; overflow-y: auto; display: flex; flex-wrap: wrap; gap: 4px; } .csv-import-chip { display: inline-flex; align-items: center; background: rgba(59, 130, 246, 0.15); color: var(--accent); font-family: var(--font-mono); font-size: 11px; padding: 2px 8px; border-radius: 999px; } .csv-import-preview-empty { color: var(--text-muted); font-size: 12px; align-self: center; } .csv-import-counts { font-size: 11px; color: var(--text-muted); } .csv-import-counts[hidden] { display: none; } .csv-import-error { background: rgba(239, 68, 68, 0.12); border: 1px solid rgba(239, 68, 68, 0.35); border-radius: 4px; padding: 6px 10px; font-size: 12px; color: #fecaca; } .csv-import-error[hidden] { display: none; } .csv-import-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--border); } .csv-import-cancel, .csv-import-submit { font-size: 12px; padding: 6px 14px; border-radius: 4px; cursor: pointer; border: 1px solid var(--border); } .csv-import-cancel { background: var(--bg-surface); color: var(--text-secondary); } .csv-import-cancel:hover { color: var(--text-primary); } .csv-import-submit { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 600; } .csv-import-submit:hover { background: var(--accent-dim); } .csv-import-submit:disabled { opacity: 0.5; cursor: not-allowed; background: var(--accent-dim); } /* Pill bar Import button */ .wl-pill-import-btn { background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-secondary); font-size: 12px; padding: 3px 10px; border-radius: 999px; cursor: pointer; margin-left: 4px; } .wl-pill-import-btn:hover { color: var(--text-primary); border-color: var(--accent); } /* ============================================================ * PR X — coverage-tier chip styling for csv-import preview * ============================================================ */ .csv-import-chip { display: inline-flex; align-items: center; gap: 6px; } .csv-import-chip-quotes { background: rgba(180, 140, 60, 0.10); border-color: rgba(180, 140, 60, 0.40); color: var(--text-secondary, #c9c9c9); } .csv-import-chip-tier { font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(220, 180, 100, 0.90); background: rgba(180, 140, 60, 0.18); padding: 1px 6px; border-radius: 3px; } .csv-import-coverage-banner { margin-top: 10px; padding: 10px 12px; border: 1px solid rgba(180, 140, 60, 0.35); background: rgba(180, 140, 60, 0.08); border-radius: 4px; color: var(--text-secondary, #c9c9c9); font-size: 12px; line-height: 1.5; } /* ============================================================ * PR X — Onboarding wizard * ============================================================ */ .onb-modal { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; font-family: var(--font-sans, system-ui, sans-serif); } .onb-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.78); backdrop-filter: blur(6px); } .onb-dialog { position: relative; width: min(720px, 92vw); max-height: 92vh; overflow-y: auto; background: var(--bg-surface, #16181d); border: 1px solid var(--border, #2a2d34); border-radius: 8px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); display: flex; flex-direction: column; } .onb-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px 0; } .onb-progress { display: flex; gap: 8px; } .onb-progress-dot { width: 28px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.12); } .onb-progress-dot.done { background: var(--accent, #4f8cff); } .onb-progress-dot.active { background: var(--accent, #4f8cff); box-shadow: 0 0 0 2px rgba(79, 140, 255, 0.18); } .onb-skip { background: transparent; border: none; color: var(--text-secondary, #9aa0a8); font-size: 12px; cursor: pointer; padding: 4px 6px; } .onb-skip:hover { color: var(--text-primary, #e7e8ea); text-decoration: underline; } .onb-body { padding: 22px 26px 24px; } .onb-title { font-size: 22px; font-weight: 600; margin: 4px 0 8px; color: var(--text-primary, #e7e8ea); } .onb-lede { font-size: 13px; line-height: 1.55; color: var(--text-secondary, #b1b6bd); margin: 0 0 18px; } .onb-roadmap { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 8px; } .onb-roadmap li { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--text-primary, #e7e8ea); } .onb-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(79, 140, 255, 0.15); color: var(--accent, #4f8cff); font-size: 11px; font-weight: 600; } .onb-edit-row { margin-bottom: 22px; } .onb-edit-profile { background: transparent; border: 1px dashed var(--border, #2a2d34); color: var(--text-secondary, #b1b6bd); padding: 8px 12px; border-radius: 4px; font-size: 12px; cursor: pointer; } .onb-edit-profile:hover { border-color: var(--accent, #4f8cff); color: var(--text-primary, #e7e8ea); } .onb-radio-grid { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; } .onb-radio { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid var(--border, #2a2d34); border-radius: 5px; cursor: pointer; transition: border-color 0.12s, background 0.12s; } .onb-radio:hover { border-color: var(--accent, #4f8cff); } .onb-radio input[type="radio"] { margin-top: 3px; accent-color: var(--accent, #4f8cff); } .onb-radio-body { display: flex; flex-direction: column; gap: 4px; } .onb-radio-label { font-size: 13px; font-weight: 600; color: var(--text-primary, #e7e8ea); } .onb-radio-sub { font-size: 12px; line-height: 1.5; color: var(--text-secondary, #9aa0a8); } .onb-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border, #2a2d34); margin-bottom: 16px; } .onb-tab { background: transparent; border: none; color: var(--text-secondary, #9aa0a8); padding: 8px 14px; font-size: 13px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; } .onb-tab.active { color: var(--text-primary, #e7e8ea); border-bottom-color: var(--accent, #4f8cff); } .onb-tab:hover { color: var(--text-primary, #e7e8ea); } .onb-pane { min-height: 200px; margin-bottom: 12px; } .onb-template-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .onb-template { background: transparent; border: 1px solid var(--border, #2a2d34); border-radius: 5px; padding: 12px 14px; text-align: left; cursor: pointer; transition: border-color 0.12s, background 0.12s; color: var(--text-primary, #e7e8ea); } .onb-template:hover { border-color: var(--accent, #4f8cff); } .onb-template.active { border-color: var(--accent, #4f8cff); background: rgba(79, 140, 255, 0.06); } .onb-template-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 4px; } .onb-template-name { font-size: 13px; font-weight: 600; } .onb-template-count { font-size: 11px; color: var(--text-secondary, #9aa0a8); } .onb-template-desc { font-size: 12px; color: var(--text-secondary, #b1b6bd); margin-bottom: 8px; line-height: 1.45; } .onb-template-chips { display: flex; flex-wrap: wrap; gap: 4px; } .onb-tmpl-chip { font-family: var(--font-mono, monospace); font-size: 10px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border, #2a2d34); padding: 1px 5px; border-radius: 3px; color: var(--text-secondary, #c9c9c9); } .onb-paste-textarea { width: 100%; background: var(--bg-input, rgba(0, 0, 0, 0.20)); border: 1px solid var(--border, #2a2d34); border-radius: 4px; padding: 10px 12px; color: var(--text-primary, #e7e8ea); font-family: var(--font-mono, monospace); font-size: 12px; resize: vertical; box-sizing: border-box; } .onb-paste-textarea:focus { outline: none; border-color: var(--accent, #4f8cff); } .onb-paste-counts { font-size: 11px; color: var(--text-secondary, #9aa0a8); margin-top: 6px; } .onb-paste-preview { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 10px; min-height: 28px; } .onb-paste-chip { font-family: var(--font-mono, monospace); font-size: 11px; background: rgba(79, 140, 255, 0.10); border: 1px solid rgba(79, 140, 255, 0.30); color: var(--text-primary, #e7e8ea); padding: 2px 7px; border-radius: 3px; display: inline-flex; align-items: center; gap: 5px; } .onb-paste-chip.quotes-only { background: rgba(180, 140, 60, 0.10); border-color: rgba(180, 140, 60, 0.40); } .onb-chip-tier { font-size: 9px; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(220, 180, 100, 0.90); } .onb-paste-empty { font-size: 12px; color: var(--text-secondary, #9aa0a8); } .onb-search-row { display: flex; gap: 8px; margin-bottom: 10px; } .onb-search-input { flex: 1; background: var(--bg-input, rgba(0, 0, 0, 0.20)); border: 1px solid var(--border, #2a2d34); border-radius: 4px; padding: 8px 12px; color: var(--text-primary, #e7e8ea); font-family: var(--font-mono, monospace); font-size: 13px; text-transform: uppercase; } .onb-search-input:focus { outline: none; border-color: var(--accent, #4f8cff); } .onb-search-add { background: var(--accent, #4f8cff); border: none; color: white; padding: 8px 16px; border-radius: 4px; cursor: pointer; font-size: 13px; } .onb-search-results { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; min-height: 28px; } .onb-search-result { background: transparent; border: 1px solid var(--border, #2a2d34); color: var(--text-secondary, #b1b6bd); font-family: var(--font-mono, monospace); font-size: 11px; padding: 3px 8px; border-radius: 3px; cursor: pointer; } .onb-search-result:hover { border-color: var(--accent, #4f8cff); color: var(--text-primary, #e7e8ea); } .onb-search-result-none { font-size: 11px; color: var(--text-secondary, #9aa0a8); padding: 4px 0; } .onb-search-picked { display: flex; flex-wrap: wrap; gap: 4px; min-height: 28px; padding-top: 6px; border-top: 1px dashed var(--border, #2a2d34); } .onb-search-chip { font-family: var(--font-mono, monospace); font-size: 11px; background: rgba(79, 140, 255, 0.12); border: 1px solid rgba(79, 140, 255, 0.35); color: var(--text-primary, #e7e8ea); padding: 2px 6px; border-radius: 3px; display: inline-flex; align-items: center; gap: 6px; } .onb-search-chip-x { background: transparent; border: none; color: var(--text-secondary, #9aa0a8); font-size: 14px; line-height: 1; padding: 0; cursor: pointer; } .onb-search-chip-x:hover { color: var(--text-primary, #e7e8ea); } .onb-search-empty { font-size: 12px; color: var(--text-secondary, #9aa0a8); } .onb-coverage-banner { margin: 12px 0 14px; padding: 10px 12px; border: 1px solid rgba(180, 140, 60, 0.40); background: rgba(180, 140, 60, 0.08); border-radius: 4px; color: var(--text-secondary, #c9c9c9); font-size: 12px; line-height: 1.5; } .onb-name-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; } .onb-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary, #9aa0a8); } .onb-name-input { background: var(--bg-input, rgba(0, 0, 0, 0.20)); border: 1px solid var(--border, #2a2d34); border-radius: 4px; padding: 8px 12px; color: var(--text-primary, #e7e8ea); font-size: 13px; } .onb-name-input:focus { outline: none; border-color: var(--accent, #4f8cff); } .onb-done-tips { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; } .onb-done-tip { font-size: 12px; color: var(--text-secondary, #b1b6bd); padding: 8px 12px; border-left: 2px solid var(--accent, #4f8cff); background: rgba(79, 140, 255, 0.05); } .onb-done-tip strong { color: var(--text-primary, #e7e8ea); font-weight: 600; } .onb-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 6px; border-top: 1px dashed var(--border, #2a2d34); margin-top: 6px; padding-top: 14px; } .onb-footer-right { display: flex; align-items: center; gap: 12px; } .onb-back { background: transparent; border: 1px solid var(--border, #2a2d34); color: var(--text-secondary, #b1b6bd); padding: 8px 16px; border-radius: 4px; cursor: pointer; font-size: 13px; } .onb-back:hover { border-color: var(--accent, #4f8cff); color: var(--text-primary, #e7e8ea); } .onb-skip-step { background: transparent; border: none; color: var(--text-secondary, #9aa0a8); font-size: 12px; cursor: pointer; text-decoration: underline; } .onb-skip-step:hover { color: var(--text-primary, #e7e8ea); } .onb-next { background: var(--accent, #4f8cff); border: none; color: white; padding: 8px 18px; border-radius: 4px; cursor: pointer; font-size: 13px; font-weight: 600; } .onb-next:hover { filter: brightness(1.1); } .onb-next:disabled { background: rgba(255, 255, 255, 0.10); color: var(--text-secondary, #6c7079); cursor: not-allowed; } .onb-error { margin-top: 12px; padding: 8px 12px; background: rgba(255, 90, 90, 0.10); border: 1px solid rgba(255, 90, 90, 0.40); color: #ff9696; border-radius: 4px; font-size: 12px; } @media (max-width: 640px) { .onb-template-grid { grid-template-columns: 1fr; } .onb-dialog { width: 96vw; max-height: 96vh; } .onb-body { padding: 18px 18px 20px; } .onb-title { font-size: 18px; } } /* PR X — Settings: Re-run onboarding button row */ .settings-profile-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 6px; } .settings-profile-secondary { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); color: var(--text-primary, #e7e8ea); } .settings-profile-secondary:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--accent, #4f8cff); } .settings-profile-secondary:disabled { opacity: 0.55; cursor: not-allowed; } .settings-profile-help-secondary { margin-top: 10px; font-size: 12px; color: var(--text-secondary, #9aa0a8); line-height: 1.5; } /* ============================================================ PR XIII — Settings page build-out ============================================================ */ .surface-settings { min-height: 100%; background: var(--bg-primary); color: var(--text-primary); } .settings-shell { max-width: 1080px; margin: 0 auto; padding: 32px 24px 80px; } .settings-shell-header { margin-bottom: 28px; } .settings-shell-title { margin: 0 0 6px; font-family: var(--font-sans); font-size: 28px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-primary); } .settings-shell-subtitle { margin: 0; font-size: 14px; color: var(--text-secondary); line-height: 1.5; } .settings-shell-body { display: grid; grid-template-columns: 240px 1fr; gap: 32px; align-items: start; } /* Sidebar nav */ .settings-nav { display: flex; flex-direction: column; gap: 4px; position: sticky; top: 16px; } .settings-nav-item { display: block; padding: 10px 14px; border-radius: 8px; border-left: 2px solid transparent; color: var(--text-secondary); text-decoration: none; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .settings-nav-item:hover { background: var(--bg-hover); color: var(--text-primary); } .settings-nav-item-active { background: var(--bg-hover); color: var(--text-primary); border-left-color: var(--accent); } .settings-nav-label { display: block; font-size: 14px; font-weight: 500; line-height: 1.3; } .settings-nav-hint { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; line-height: 1.4; } .settings-nav-item-active .settings-nav-hint { color: var(--text-secondary); } /* Back-compat: the old _renderHeader shim wraps nav in .settings-tabs. Make sure it does not break the new sidebar layout. */ .settings-tabs { display: contents; } /* Panel */ .settings-panel { min-width: 0; } .settings-loading { padding: 32px; text-align: center; color: var(--text-secondary); font-size: 14px; } /* Section card */ .settings-section { background: var(--bg-surface); border: 1px solid var(--border); border-radius: 12px; padding: 24px; margin-bottom: 16px; } .settings-section-header { margin-bottom: 18px; } .settings-section-title { margin: 0 0 4px; font-size: 18px; font-weight: 600; color: var(--text-primary); } .settings-section-help { margin: 0; font-size: 13px; color: var(--text-secondary); line-height: 1.5; } .settings-section-empty { padding: 24px; text-align: center; color: var(--text-secondary); font-size: 13px; border: 1px dashed var(--border-light); border-radius: 8px; background: var(--bg-surface-alt); } /* Banners */ .settings-banner { padding: 10px 14px; border-radius: 8px; border: 1px solid transparent; font-size: 13px; margin-bottom: 14px; line-height: 1.5; } .settings-banner-error { background: var(--red-dim); border-color: rgba(239, 68, 68, 0.35); color: #fecaca; } .settings-banner-success { background: var(--green-dim); border-color: rgba(34, 197, 94, 0.35); color: #bbf7d0; } .settings-banner-info { background: rgba(59, 130, 246, 0.1); border-color: rgba(59, 130, 246, 0.3); color: #bfdbfe; } /* Form primitives */ .settings-form, .settings-form-stacked { display: flex; flex-direction: column; gap: 18px; } .settings-inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; } .settings-inline-form .settings-input { flex: 1 1 240px; min-width: 0; } .settings-field { display: flex; flex-direction: column; gap: 6px; } .settings-fieldset { border: none; padding: 0; margin: 0; } .settings-field-label { font-size: 13px; font-weight: 500; color: var(--text-primary); } .settings-field-optional { font-weight: 400; color: var(--text-muted); font-size: 12px; } .settings-field-hint { margin: 0; font-size: 12px; color: var(--text-secondary); line-height: 1.4; } .settings-field-input-wrap { position: relative; display: flex; align-items: center; } .settings-field-prefix { position: absolute; left: 12px; color: var(--text-muted); font-size: 14px; pointer-events: none; } .settings-input, .settings-textarea { background: var(--bg-surface-alt); border: 1px solid var(--border-light); border-radius: 8px; color: var(--text-primary); font-family: var(--font-sans); font-size: 14px; padding: 10px 12px; width: 100%; box-sizing: border-box; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .settings-input:focus, .settings-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); } .settings-input-with-prefix { padding-left: 28px; } .settings-textarea { resize: vertical; min-height: 72px; font-family: var(--font-sans); line-height: 1.5; } .settings-form-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 4px; } .settings-section-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border-light); } .settings-section-meta { font-size: 12px; color: var(--text-secondary); margin: 0; } .settings-link-btn { background: transparent; border: none; padding: 0; font-family: var(--font-sans); font-size: 12px; color: var(--text-secondary); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; transition: color 0.15s ease; } .settings-link-btn:hover:not(:disabled) { color: var(--accent); } .settings-link-btn:disabled { opacity: 0.5; cursor: not-allowed; } /* Buttons */ .settings-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 16px; font-family: var(--font-sans); font-size: 13px; font-weight: 500; border-radius: 8px; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease; white-space: nowrap; } .settings-btn:disabled { opacity: 0.5; cursor: not-allowed; } .settings-btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); } .settings-btn-primary:hover:not(:disabled) { background: var(--accent-dim); border-color: var(--accent-dim); } .settings-btn-secondary { background: var(--bg-surface-alt); color: var(--text-primary); border-color: var(--border-light); } .settings-btn-secondary:hover:not(:disabled) { background: var(--bg-hover); border-color: var(--accent); } .settings-btn-ghost { background: transparent; color: var(--text-secondary); border-color: transparent; } .settings-btn-ghost:hover:not(:disabled) { background: var(--bg-hover); color: var(--text-primary); } .settings-btn-danger { background: transparent; color: #fca5a5; border-color: rgba(239, 68, 68, 0.45); } .settings-btn-danger:hover:not(:disabled) { background: rgba(239, 68, 68, 0.12); color: #fecaca; } /* Avatar */ .settings-avatar-row { display: flex; align-items: center; gap: 16px; } .settings-avatar-wrap { flex-shrink: 0; } .settings-avatar-preview { display: block; width: 80px; height: 80px; border-radius: 50%; background: var(--bg-surface-alt); border: 1px solid var(--border-light); object-fit: cover; } .settings-avatar-placeholder { display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 600; color: var(--text-secondary); } .settings-avatar-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } /* Radio rows */ .settings-radio-group { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; } .settings-radio-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-surface-alt); cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } .settings-radio-row:hover { border-color: var(--border-light); } .settings-radio-row input[type="radio"] { accent-color: var(--accent); margin: 0; } .settings-radio-label { font-size: 13px; color: var(--text-primary); } /* Sub-cards (within a section) */ .settings-card { background: var(--bg-surface-alt); border: 1px solid var(--border); border-radius: 10px; padding: 18px; margin-bottom: 14px; } .settings-card:last-child { margin-bottom: 0; } .settings-card-danger { border-color: rgba(239, 68, 68, 0.35); background: rgba(239, 68, 68, 0.04); } .settings-card-title { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--text-primary); } .settings-card-help { margin: 0 0 12px; font-size: 12px; color: var(--text-secondary); line-height: 1.5; } /* Toggle list */ .settings-toggle-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .settings-toggle-row { display: flex; align-items: center; gap: 16px; padding: 12px 14px; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 8px; } .settings-toggle-text { flex: 1 1 auto; min-width: 0; } .settings-toggle-label { font-size: 13px; font-weight: 500; color: var(--text-primary); } .settings-toggle-hint { font-size: 12px; color: var(--text-secondary); margin-top: 2px; line-height: 1.4; } .settings-toggle { position: relative; display: inline-block; width: 38px; height: 22px; flex-shrink: 0; } .settings-toggle input[type="checkbox"] { opacity: 0; width: 0; height: 0; } .settings-toggle-track { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--border-light); border-radius: 999px; transition: background 0.18s ease; cursor: pointer; } .settings-toggle-thumb { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; background: #fff; border-radius: 50%; transition: transform 0.18s ease; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } .settings-toggle input[type="checkbox"]:checked + .settings-toggle-track { background: var(--accent); } .settings-toggle input[type="checkbox"]:checked + .settings-toggle-track .settings-toggle-thumb { transform: translateX(16px); } .settings-toggle input[type="checkbox"]:disabled + .settings-toggle-track { opacity: 0.5; cursor: not-allowed; } .settings-toggle input[type="checkbox"]:focus-visible + .settings-toggle-track { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.4); } /* Identities list */ .settings-identity-list, .settings-identity-available-list, .settings-discover-results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .settings-identity-row, .settings-identity-available, .settings-discover-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: var(--bg-surface-alt); border: 1px solid var(--border); border-radius: 8px; } .settings-identity-icon { width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; background: var(--bg-hover); display: inline-block; } .settings-identity-text { flex: 1 1 auto; min-width: 0; } .settings-identity-label { font-size: 13px; font-weight: 500; color: var(--text-primary); } .settings-identity-email, .settings-identity-date { font-size: 12px; color: var(--text-secondary); line-height: 1.4; } .settings-identity-unlink { flex-shrink: 0; } .settings-identity-available-header { margin: 18px 0 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); } /* Discover */ .settings-discover-toggle-row { display: flex; align-items: center; gap: 16px; } .settings-discover-status { font-size: 12px; color: var(--text-secondary); padding: 6px 0; } .settings-discover-avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; background: var(--bg-hover); object-fit: cover; } .settings-discover-name { font-size: 13px; font-weight: 500; color: var(--text-primary); text-decoration: none; } .settings-discover-name:hover { color: var(--accent); } .settings-discover-username { font-size: 12px; color: var(--text-secondary); } .settings-discover-bio { font-size: 12px; color: var(--text-secondary); margin-top: 4px; line-height: 1.4; } /* Mobile */ @media (max-width: 768px) { .settings-shell { padding: 20px 16px 64px; } .settings-shell-body { grid-template-columns: 1fr; gap: 16px; } .settings-nav { position: static; flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; -webkit-overflow-scrolling: touch; } .settings-nav-item { flex-shrink: 0; border-left: none; border-bottom: 2px solid transparent; border-radius: 999px; padding: 8px 14px; } .settings-nav-item-active { border-left-color: transparent; border-bottom-color: transparent; background: var(--accent); color: #fff; } .settings-nav-item-active .settings-nav-hint { display: none; } .settings-nav-hint { display: none; } .settings-section { padding: 18px 16px; } .settings-avatar-row { flex-direction: column; align-items: flex-start; } .settings-shell-title { font-size: 22px; } } /* =========================================================================== PR XIV — Alerts panel inside Settings -> Notifications The alerts panel (Feed Subscriptions + Triggered Alerts + Recent Activity) is mounted via renderAlertsTab("settings-alerts-content"). Existing .alerts-* styles from the old surface still apply because the rendered markup is the same; the wrappers below only fix spacing inside the settings card and give the card header a + New alert affordance. =========================================================================== */ .settings-alerts-card .settings-card-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; } .settings-alerts-card .settings-card-title { margin: 0; } .settings-alerts-new-btn { flex: 0 0 auto; } .settings-alerts-content { margin-top: 8px; } .settings-alerts-content .alerts-section-block { margin-top: 16px; } .settings-alerts-content .alerts-section-block:first-child { margin-top: 4px; } .settings-alerts-content .alerts-loading { padding: 18px 4px; font-size: 13px; color: var(--text-secondary); } @media (max-width: 720px) { .settings-alerts-card .settings-card-header { flex-direction: column; align-items: flex-start; gap: 8px; } }