/* =====================================================================
redesign.css — SignalStack AI Milestone 1 shell
Scope: global top bar, surface navigation, mode toggle, coverage
ribbon, summary strip, coverage layout, right context panel, more
surface sub-tabs. Keeps legacy tab-bar hidden. Does NOT override
any existing table/modal/tab-pane styling in styles.css.
===================================================================== */
/* ----- Legacy tab-bar: hide safely (kept in DOM for code paths) ----- */
.tab-bar.legacy-hidden,
#tab-bar.legacy-hidden {
display: none !important;
}
/* ----- GLOBAL TOP BAR -------------------------------------------- */
.global-topbar {
position: sticky;
top: 0;
z-index: 50;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 18px;
padding: 10px 14px;
background: var(--bg-header);
border-bottom: 1px solid var(--border);
font-family: var(--font-sans);
color: var(--text-primary);
}
.topbar-brand {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.topbar-brand .brand-link {
display: inline-flex;
align-items: center;
text-decoration: none;
color: inherit;
line-height: 0;
flex: 0 0 auto;
}
.topbar-brand .brand-link:focus-visible {
outline: 2px solid var(--accent, #3b82f6);
outline-offset: 3px;
border-radius: 4px;
}
.topbar-brand .logo-wordmark {
display: block;
height: 22px;
width: auto;
user-select: none;
-webkit-user-drag: none;
}
@media (max-width: 640px) {
.topbar-brand .logo-wordmark { height: 20px; }
}
/* Theme-conditional wordmark swap. Default (no data-theme attribute) keeps the
* dark variant so a stale-cache load still ships the pre-R2 look. */
.topbar-brand .logo-wordmark--light { display: none; }
:root[data-theme="light"] .topbar-brand .logo-wordmark--dark { display: none; }
:root[data-theme="light"] .topbar-brand .logo-wordmark--light { display: block; }
.topbar-brand .logo { flex: 0 0 auto; }
.topbar-brand .brand-text {
font-weight: 700;
font-size: 14px;
letter-spacing: 0.2px;
color: var(--text-primary);
white-space: nowrap;
}
/* ----- Surface nav ----------------------------------------------- */
/* Wrapper: provides relative positioning for the right-edge scroll-fade. */
.surface-nav {
position: relative;
display: flex;
align-items: center;
gap: 2px;
overflow-x: auto;
/* C12 FIX: hide the phantom horizontal scrollbar that appeared under the nav
even when the strip didn't actually overflow. The `::after` gradient still
hints that the strip is horizontally scrollable when content exceeds width. */
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE / legacy Edge */
}
.surface-nav::-webkit-scrollbar { height: 0; width: 0; display: none; }
.surface-nav::-webkit-scrollbar-thumb { background: transparent; }
/* Right-edge fade affordance — hints the strip is scrollable. */
.surface-nav::after {
content: '';
position: sticky;
right: 0;
flex: 0 0 24px;
align-self: stretch;
margin-left: -24px;
background: linear-gradient(to right, transparent, var(--bg-surface, #0a0d12) 80%);
pointer-events: none;
}
.surface-btn {
appearance: none;
background: transparent;
color: var(--text-secondary);
border: 1px solid transparent;
padding: 7px 12px 6px; /* trim bottom 1px so .active border-bottom doesn't shift the row */
font-size: 13px;
font-weight: 500;
font-family: var(--font-sans);
border-radius: 6px;
cursor: pointer;
white-space: nowrap;
position: relative;
transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.surface-btn:hover {
color: var(--text-primary);
background: var(--bg-hover);
}
.surface-btn.active {
color: var(--text-primary);
background: var(--bg-surface-alt);
border-color: var(--border-light);
}
/* Stronger active indicator: accent underline so the current surface
pops at a glance even with the muted bg-surface-alt fill. */
.surface-btn.active::after {
content: '';
position: absolute;
left: 8px;
right: 8px;
bottom: -1px;
height: 2px;
background: var(--accent, #4f9eff);
border-radius: 2px 2px 0 0;
}
.surface-btn-muted {
color: var(--text-muted);
font-weight: 500;
}
.surface-btn-muted.active { color: var(--text-primary); }
/* ----- Top-bar actions ------------------------------------------- */
.topbar-actions {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.topbar-search {
position: relative;
width: 180px;
}
.topbar-search input {
width: 100%;
background: var(--bg-surface);
color: var(--text-primary);
border: 1px solid var(--border);
border-radius: 6px;
padding: 7px 10px;
font-size: 12px;
font-family: var(--font-sans);
outline: none;
transition: border-color 0.12s ease;
/* C13 FIX: prevent the placeholder from visually wrapping / appearing
mid-truncated. text-overflow on placeholders requires the input itself
to be a single-line text-overflow context. */
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.topbar-search input::placeholder {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.topbar-search input:focus {
border-color: var(--accent);
}
.topbar-search .search-dropdown {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 6px;
z-index: 60;
max-height: 320px;
overflow-y: auto;
display: none;
}
.topbar-search .search-dropdown.active { display: block; }
.topbar-action {
appearance: none;
background: var(--bg-surface);
color: var(--text-primary);
border: 1px solid var(--border);
padding: 7px 11px;
font-size: 12px;
font-weight: 500;
border-radius: 6px;
cursor: pointer;
white-space: nowrap;
font-family: var(--font-sans);
transition: background 0.12s ease, border-color 0.12s ease;
}
.topbar-action:hover {
background: var(--bg-hover);
border-color: var(--border-light);
}
/* "Save view" — disabled-but-discoverable style. Keeps visual weight so the
user sees it's intentional (not broken) while we ship the real feature. */
.topbar-action.topbar-action-soon {
color: var(--text-secondary);
background: transparent;
border-style: dashed;
cursor: default;
}
.topbar-action.topbar-action-soon:hover {
background: var(--bg-surface);
}
/* C13 FIX: align the SOON badge perfectly with the "Save view" label by
making the parent button a flex row, so the small badge centers against
the larger label glyph cap-height instead of riding the inline baseline. */
.topbar-action.topbar-action-soon {
display: inline-flex;
align-items: center;
gap: 6px;
}
.topbar-badge-soon {
display: inline-flex;
align-items: center;
margin-left: 0; /* gap handles spacing now */
padding: 1px 5px 2px;
font-size: 9px;
line-height: 1;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-tertiary, var(--text-secondary));
border: 1px solid var(--border);
border-radius: 3px;
position: relative;
top: 0; /* explicit — don't drift on font-metric hosts */
}
@keyframes topbar-action-soon-flash {
0%, 100% { border-color: var(--border); }
50% { border-color: var(--accent, #4f9eff); }
}
.topbar-action.topbar-action-soon-flash {
animation: topbar-action-soon-flash 0.7s ease;
}
/* PR XII — settings gear icon. Square, icon-only variant of .topbar-action.
Also used by the glossary help icon (a.topbar-action.topbar-action-icon),
so we reset text-decoration so anchor underlines never leak in. */
.topbar-action.topbar-action-icon {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 7px 8px;
width: 32px;
height: 32px;
color: var(--text-secondary);
line-height: 0;
text-decoration: none;
}
.topbar-action.topbar-action-icon:hover {
color: var(--text-primary);
}
.topbar-action.topbar-action-icon svg {
width: 18px;
height: 18px;
display: block;
}
.topbar-action.topbar-action-icon:focus-visible {
outline: 2px solid var(--accent, #4f9eff);
outline-offset: 1px;
}
/* Light/dark toggle (#topbar-theme). The icon shows the mode you would
switch to: sun while dark (click → light), moon while light (click →
dark). The attribute drives the swap; the boot script
guarantees it is set before first paint. Missing attribute = dark. */
#topbar-theme .theme-icon-moon { display: none; }
html[data-theme="light"] #topbar-theme .theme-icon-sun { display: none; }
html[data-theme="light"] #topbar-theme .theme-icon-moon { display: block; }
/* "+ Add" flash — visible feedback when the user clicks the topbar Add
button while Coverage is already the active surface. */
@keyframes topbar-input-flash {
0% { box-shadow: 0 0 0 0 var(--accent, #4f9eff); }
35% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent, #4f9eff) 45%, transparent); }
100% { box-shadow: 0 0 0 0 transparent; }
}
.topbar-flash {
animation: topbar-input-flash 1.1s ease;
}
/* Mode toggle (HF / LO) — removed. Quality and Debate are unified columns now. */
/*
.topbar-mode {
display: inline-flex;
border: 1px solid var(--border);
background: var(--bg-surface);
border-radius: 6px;
overflow: hidden;
}
.topbar-mode .mode-btn {
appearance: none;
background: transparent;
color: var(--text-secondary);
border: none;
padding: 7px 11px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.4px;
cursor: pointer;
font-family: var(--font-mono);
transition: background 0.12s ease, color 0.12s ease;
}
.topbar-mode .mode-btn:hover { color: var(--text-primary); }
.topbar-mode .mode-btn.active {
background: var(--accent);
color: #0a0e17;
}
*/
.topbar-meta {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--text-muted);
font-size: 11px;
font-family: var(--font-mono);
white-space: nowrap;
}
.topbar-meta .refresh-timer,
.topbar-meta .total-mcap {
display: inline-block;
}
/* ----- Coverage column hiding ------------------------------------ */
/* Customize-columns toggles add .col-hidden to the header | and every
matching body | (stamped via data-col in app.js). This rule is what
actually removes them from layout — without it the class was inert and
every "hidden" column still rendered. Applies to header, body, and the
super-header band cells so a hidden column collapses cleanly. */
.watchlist-table th.col-hidden,
.watchlist-table td.col-hidden { display: none !important; }
/* ----- Surface container ----------------------------------------- */
.surface {
padding: 18px 18px 32px;
}
.surface[hidden] { display: none !important; }
.surface-header {
padding: 6px 2px 14px;
}
.surface-header h2 {
margin: 0 0 4px;
font-size: 18px;
color: var(--text-primary);
font-weight: 700;
}
.surface-header .surface-sub {
margin: 0;
color: var(--text-secondary);
font-size: 13px;
max-width: 780px;
}
.surface-placeholder {
margin-top: 8px;
border: 1px dashed var(--border-light);
background: var(--bg-surface);
border-radius: 8px;
padding: 22px;
color: var(--text-secondary);
max-width: 780px;
}
.surface-placeholder .placeholder-title {
color: var(--text-primary);
font-weight: 600;
margin-bottom: 6px;
}
.surface-placeholder .placeholder-body {
color: var(--text-secondary);
font-size: 13px;
line-height: 1.5;
margin-bottom: 12px;
}
/* ----- Coverage ribbon ------------------------------------------- */
.coverage-ribbon {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px 12px;
margin-bottom: 12px;
}
.ribbon-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px;
row-gap: 10px;
}
.ribbon-group {
display: inline-flex;
align-items: center;
gap: 8px;
min-width: 0;
}
.ribbon-group-end { margin-left: auto; }
.ribbon-label {
font-size: 10px;
letter-spacing: 0.6px;
text-transform: uppercase;
color: var(--text-muted);
font-weight: 600;
}
.ribbon-select {
appearance: none;
background: var(--bg-surface-alt);
color: var(--text-primary);
border: 1px solid var(--border);
padding: 6px 28px 6px 10px;
font-size: 12px;
border-radius: 6px;
font-family: var(--font-sans);
cursor: pointer;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 8px center;
}
.ribbon-select:hover { border-color: var(--border-light); }
.ribbon-pills {
display: inline-flex;
border: 1px solid var(--border);
background: var(--bg-surface-alt);
border-radius: 6px;
overflow: hidden;
}
.ribbon-pill {
appearance: none;
background: transparent;
color: var(--text-secondary);
border: none;
padding: 6px 10px;
font-size: 11px;
font-weight: 600;
font-family: var(--font-mono);
cursor: pointer;
letter-spacing: 0.4px;
}
.ribbon-pill:hover { color: var(--text-primary); }
.ribbon-pill.active {
background: var(--accent);
color: #0a0e17;
}
.ribbon-group-flags { flex-wrap: wrap; }
.ribbon-flag {
appearance: none;
background: var(--bg-surface-alt);
color: var(--text-secondary);
border: 1px solid var(--border);
padding: 5px 9px;
font-size: 11px;
border-radius: 4px;
cursor: pointer;
font-family: var(--font-sans);
}
.ribbon-flag:hover { color: var(--text-primary); border-color: var(--border-light); }
.ribbon-flag.active {
color: #0a0e17;
background: var(--yellow);
border-color: var(--yellow);
font-weight: 600;
}
.ribbon-btn {
appearance: none;
background: var(--bg-surface-alt);
color: var(--text-secondary);
border: 1px solid var(--border);
padding: 6px 12px;
font-size: 12px;
border-radius: 6px;
cursor: pointer;
font-family: var(--font-sans);
}
.ribbon-btn:hover {
color: var(--text-primary);
border-color: var(--border-light);
}
/* ----- Summary strip --------------------------------------------- */
.summary-strip {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 10px;
margin-bottom: 14px;
}
.summary-tile {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px 12px;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 64px;
}
.summary-tile .summary-label {
font-size: 10px;
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--text-muted);
font-weight: 600;
margin-bottom: 3px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.summary-tile .summary-value {
font-size: 18px;
color: var(--text-primary);
font-family: var(--font-mono);
font-weight: 600;
line-height: 1.1;
}
.summary-tile .summary-sub {
font-size: 11px;
color: var(--text-secondary);
margin-top: 2px;
}
.summary-tile-mode {
border-color: rgba(59,130,246,0.4);
}
/* ----- Coverage layout (main table + right context) -------------- */
.coverage-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 300px;
gap: 14px;
align-items: start;
}
.coverage-main {
min-width: 0;
}
.coverage-context {
position: sticky;
top: 76px;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 14px;
min-height: 320px;
max-height: calc(100vh - 96px);
overflow-y: auto;
font-size: 13px;
}
/* 2026-07-09: .ctx-empty / .ctx-empty-hint removed — placeholder eliminated
from the coverage context panel per user request. */
/* 2026-07-09 (follow-up): when no ticker is selected, coverage-controller.js
sets #ctx-content [hidden]. Collapse the entire aside so its grid track
is reclaimed by the watchlist table (instead of showing an empty box).
The Discover rail (grid-column: 1 / -1 by default) still lays out below
the table. Uses :has() — supported in all evergreen browsers. */
.coverage-layout:has(> .coverage-context > .ctx-content[hidden]) {
grid-template-columns: minmax(0, 1fr);
}
.coverage-layout:has(> .coverage-context > .ctx-content[hidden]) > .coverage-context {
display: none;
}
.ctx-header {
display: flex;
align-items: center;
gap: 8px;
padding-bottom: 10px;
border-bottom: 1px solid var(--border);
margin-bottom: 10px;
}
/* Collapse control for the context panel — mirrors .discover-collapse-toggle. */
.ctx-collapse-toggle {
flex-shrink: 0;
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid var(--border, #1e293b);
border-radius: 6px;
cursor: pointer;
color: var(--text-secondary, #9ca3af);
padding: 0;
}
.ctx-collapse-toggle:hover { border-color: var(--accent, #1E7BFF); color: var(--text-primary, #e5e7eb); }
.ctx-chevron {
width: 7px;
height: 7px;
border-left: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
margin-left: 2px;
}
/* Collapsed context panel: hide all body sections, keep a slim strip whose
only affordance is the toggle. The ticker label rotates into the strip so
the user still knows which name is loaded. Mirrors the Discover rail. */
.coverage-context[data-collapsed="true"] {
min-height: 0;
}
.coverage-context[data-collapsed="true"] .ctx-content {
overflow: hidden;
}
.coverage-context[data-collapsed="true"] .ctx-section,
.coverage-context[data-collapsed="true"] .ctx-name,
.coverage-context[data-collapsed="true"] .ctx-drilldown-btn {
display: none;
}
.coverage-context[data-collapsed="true"] .ctx-header {
flex-direction: column;
align-items: center;
gap: 10px;
border-bottom: none;
padding-bottom: 0;
margin-bottom: 0;
}
.coverage-context[data-collapsed="true"] .ctx-ticker {
writing-mode: vertical-rl;
font-size: 13px;
letter-spacing: 0.04em;
}
.coverage-context[data-collapsed="true"] .ctx-chevron {
transform: rotate(-135deg);
margin-left: 0;
}
.ctx-ticker {
font-family: var(--font-mono);
font-size: 16px;
font-weight: 700;
color: var(--text-primary);
}
.ctx-name {
font-size: 12px;
color: var(--text-secondary);
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ctx-drilldown-btn {
appearance: none;
background: var(--bg-surface-alt);
color: var(--text-primary);
border: 1px solid var(--border);
padding: 4px 8px;
font-size: 11px;
border-radius: 4px;
cursor: pointer;
}
.ctx-drilldown-btn:hover { border-color: var(--accent); }
.ctx-section { margin-bottom: 12px; }
.ctx-section-title {
font-size: 10px;
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--text-muted);
font-weight: 600;
margin-bottom: 4px;
}
.ctx-section-body {
font-size: 12px;
color: var(--text-secondary);
line-height: 1.5;
}
/* Coverage header bar (inside coverage-main) slight tweak to spacing */
.coverage-header-bar { margin-top: 2px; }
/* ----- More surface sub-tabs ------------------------------------- */
.more-subtabs {
display: flex;
gap: 2px;
border-bottom: 1px solid var(--border);
margin-bottom: 14px;
}
.more-subtab {
appearance: none;
background: transparent;
color: var(--text-secondary);
border: none;
border-bottom: 2px solid transparent;
padding: 8px 14px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
font-family: var(--font-sans);
margin-bottom: -1px;
}
.more-subtab:hover { color: var(--text-primary); }
.more-subtab.active {
color: var(--text-primary);
border-bottom-color: var(--accent);
}
.more-pane { display: none; }
.more-pane.active { display: block; }
/* ----- Private input quick-select dropdown ----------------------
* REMOVED 2026-08-13 along with #private-input / #private-input-dropdown and
* shell.js's initPrivateInputDropdown(). Private companies now render as rows
* inside the one universal #search-dropdown; their styles live next to the
* public row styles in styles.css (.search-dropdown-item-private). */
/* ----- Responsive ------------------------------------------------ */
@media (max-width: 1560px) {
.topbar-meta { display: none; }
}
@media (max-width: 1360px) {
.topbar-action { padding: 6px 8px; font-size: 11px; }
.topbar-search { width: 140px; }
}
@media (max-width: 1200px) {
.topbar-search { width: 120px; }
.topbar-action { padding: 6px 6px; }
}
@media (max-width: 1200px) {
.coverage-layout { grid-template-columns: minmax(0, 1fr) 260px; }
.summary-strip { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.summary-tile { padding: 8px 10px; }
.summary-tile .summary-value { font-size: 16px; }
}
@media (max-width: 960px) {
.global-topbar {
grid-template-columns: 1fr;
row-gap: 8px;
}
.surface-nav { order: 2; }
.topbar-actions { order: 3; flex-wrap: wrap; }
.topbar-search { width: 100%; }
.coverage-layout { grid-template-columns: minmax(0, 1fr); }
.coverage-context { position: static; max-height: none; }
.summary-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.summary-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
.surface { padding: 12px; }
}
/* ===== Coverage Controller (v20260430) ====================== */
/* Selected coverage row highlight */
#watchlist-table tbody tr.row-selected td {
background: rgba(59, 130, 246, 0.08);
box-shadow: inset 3px 0 0 #3b82f6;
}
/* Context panel KV pairs */
.ctx-kv {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: 4px 0;
font-size: 12px;
color: var(--text-secondary);
border-bottom: 1px dashed var(--border, rgba(148, 163, 184, 0.10));
}
.ctx-kv:last-child { border-bottom: none; }
.ctx-kv strong { color: var(--text-primary); font-weight: 600; font-variant-numeric: tabular-nums; }
.ctx-bullet { font-size: 12px; color: var(--text-secondary); padding: 3px 0; line-height: 1.45; }
.ctx-note {
font-size: 12px;
color: var(--text-secondary);
padding: 4px 0;
border-bottom: 1px dashed var(--border, rgba(148, 163, 184, 0.10));
}
.ctx-note-date { color: var(--text-muted); font-size: 11px; margin-right: 6px; }
.ctx-note-kind {
display: inline-block;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-secondary);
background: rgba(148, 163, 184, 0.12);
border: 1px solid rgba(148, 163, 184, 0.18);
border-radius: 3px;
padding: 1px 6px;
margin-right: 6px;
vertical-align: 1px;
}
/* Compare MVP */
.compare-mvp { padding: 16px 24px 32px; }
.compare-mvp-toolbar {
display: flex; align-items: center; gap: 12px;
margin-bottom: 14px;
}
.compare-mvp-hint { color: #94a3b8; font-size: 12px; flex: 1; }
.compare-mvp-table-wrap {
border: 1px solid #1f2937;
border-radius: 8px;
overflow-x: auto;
background: #0b1220;
}
.compare-mvp-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.compare-mvp-table thead th {
background: #0f172a;
color: #e2e8f0;
text-align: left;
padding: 10px 14px;
border-bottom: 1px solid #1f2937;
font-weight: 600;
white-space: nowrap;
}
.compare-mvp-table .compare-th-ticker { font-size: 14px; font-weight: 700; color: #3b82f6; }
.compare-mvp-table .compare-th-name { font-size: 11px; color: #94a3b8; font-weight: 400; }
.compare-mvp-table tbody th {
text-align: left;
padding: 8px 14px;
color: #94a3b8;
font-weight: 500;
background: #0f172a;
border-bottom: 1px solid rgba(31, 41, 55, 0.6);
white-space: nowrap;
}
.compare-mvp-table tbody td {
padding: 8px 14px;
border-bottom: 1px solid rgba(31, 41, 55, 0.6);
font-variant-numeric: tabular-nums;
color: #cbd5e1;
text-align: right;
}
.compare-mvp-table .compare-best {
background: rgba(34, 197, 94, 0.10);
color: #4ade80;
font-weight: 600;
}
.compare-mvp-table.is-suggestion {
opacity: 0.72;
}
.compare-mvp-table.is-suggestion thead th {
border-bottom-color: #1e293b;
}
/* Compare MVP - In-tab picker */
.compare-mvp-picker {
margin-bottom: 14px;
}
.cmp-picker-row {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.cmp-chips {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
min-height: 32px;
padding: 4px 0;
}
.cmp-chip {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(59, 130, 246, 0.14);
border: 1px solid rgba(59, 130, 246, 0.45);
color: #93c5fd;
font-weight: 600;
font-size: 13px;
letter-spacing: 0.02em;
padding: 4px 4px 4px 10px;
border-radius: 999px;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.cmp-chip-tk { font-family: inherit; }
.cmp-chip-x {
appearance: none;
border: 0;
background: rgba(15, 23, 42, 0.6);
color: #cbd5e1;
font-size: 11px;
font-weight: 700;
width: 18px; height: 18px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
line-height: 1;
padding: 0;
}
.cmp-chip-x:hover {
background: rgba(239, 68, 68, 0.25);
color: #fecaca;
}
.cmp-chip-empty {
color: #64748b;
font-size: 12px;
font-style: italic;
}
.cmp-search-wrap {
position: relative;
flex: 1;
min-width: 220px;
max-width: 360px;
}
.cmp-search {
width: 100%;
background: #0b1220;
border: 1px solid #1f2937;
color: #e2e8f0;
font-size: 13px;
padding: 8px 12px;
border-radius: 6px;
outline: none;
transition: border-color 0.15s ease;
}
.cmp-search:focus {
border-color: #3b82f6;
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}
.cmp-search:disabled {
opacity: 0.55;
cursor: not-allowed;
}
.cmp-search::placeholder { color: #64748b; }
.cmp-suggest {
position: absolute;
top: calc(100% + 4px);
left: 0;
right: 0;
background: #0b1220;
border: 1px solid #1f2937;
border-radius: 6px;
z-index: 50;
max-height: 320px;
overflow-y: auto;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
}
.cmp-suggest-item {
display: flex;
align-items: baseline;
gap: 10px;
width: 100%;
text-align: left;
background: transparent;
border: 0;
color: #e2e8f0;
padding: 8px 12px;
font-size: 13px;
cursor: pointer;
border-bottom: 1px solid rgba(31, 41, 55, 0.5);
}
.cmp-suggest-item:last-child { border-bottom: 0; }
.cmp-suggest-item.is-active,
.cmp-suggest-item:hover {
background: rgba(59, 130, 246, 0.14);
}
.cmp-suggest-item.is-picked {
opacity: 0.55;
}
.cmp-suggest-item.is-picked:hover {
background: rgba(239, 68, 68, 0.12);
}
.cmp-suggest-tk {
font-weight: 700;
color: #93c5fd;
min-width: 56px;
font-variant-numeric: tabular-nums;
}
.cmp-suggest-name {
color: #94a3b8;
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cmp-suggest-tag {
font-size: 10px;
text-transform: uppercase;
color: #fbbf24;
letter-spacing: 0.06em;
padding: 2px 6px;
background: rgba(251, 191, 36, 0.12);
border-radius: 4px;
}
.cmp-btn-open {
background: #2563eb;
border: 1px solid #2563eb;
color: #ffffff;
font-weight: 600;
}
.cmp-btn-open:hover:not(:disabled) {
background: #1d4ed8;
border-color: #1d4ed8;
}
.cmp-btn-open:disabled {
background: rgba(37, 99, 235, 0.35);
border-color: rgba(37, 99, 235, 0.35);
cursor: not-allowed;
opacity: 0.7;
}
.cmp-btn-clear:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.cmp-picker-status {
margin-top: 8px;
color: #94a3b8;
font-size: 12px;
}
/* Screener surface.
Themed off the shared tokens rather than a pinned dark palette: the control
chrome above it (packs panel) always used vars, so a hardcoded table left
the surface half light and half dark in the light theme. */
.screener-mvp { padding: 16px 24px 32px; }
.screener-mvp-toolbar {
display: flex; align-items: flex-end; flex-wrap: wrap; gap: 14px;
padding: 12px 14px;
background: var(--bg-surface-alt);
border: 1px solid var(--border);
border-radius: 8px;
margin-bottom: 14px;
}
.screener-mvp-field {
display: flex; flex-direction: column; gap: 4px;
font-size: 11px; color: var(--text-secondary); font-weight: 500;
}
.screener-mvp-field input,
.screener-mvp-field select {
background: var(--bg-surface);
border: 1px solid var(--border);
color: var(--text-primary);
padding: 6px 8px;
border-radius: 6px;
font-size: 13px;
min-width: 130px;
}
.screener-mvp-field input:focus,
.screener-mvp-field select:focus { outline: none; border-color: var(--accent); }
.screener-mvp-count { color: var(--green); font-size: 12px; font-weight: 500; }
.screener-mvp-empty { color: var(--text-secondary); padding: 32px; text-align: center; font-size: 13px; }
.screener-mvp-table-wrap {
border: 1px solid var(--border);
border-radius: 8px;
overflow-x: auto;
background: var(--bg-surface);
}
.screener-mvp-table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.screener-mvp-table thead th {
background: var(--bg-surface-alt);
color: var(--text-primary);
text-align: left;
padding: 10px 14px;
border-bottom: 1px solid var(--border);
font-weight: 600;
}
.screener-mvp-table th.num { text-align: right; }
.screener-mvp-table tbody td {
padding: 8px 14px;
border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
color: var(--text-primary);
}
.screener-mvp-table tbody td.num { text-align: right; font-variant-numeric: tabular-nums; }
.screener-mvp-table tbody tr { cursor: pointer; transition: background 100ms; }
.screener-mvp-table tbody tr:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.screener-cell-ticker { color: var(--accent); font-weight: 600; }
.screener-mvp-more { padding: 12px 14px; color: var(--text-muted); font-size: 12px; text-align: center; }
/* --- Screener ribbon, filter classes, env bar (2026-08-18 rebuild) --------
The surface renders from screener-catalog.js, so these styles are keyed on
structure (a filter row, a class heading, a chip) rather than on any one
filter — adding a field to the catalog must not need a new rule here. */
.screener-ribbon {
display: flex; align-items: flex-start; justify-content: space-between;
gap: 14px; flex-wrap: wrap;
padding: 10px 14px;
background: var(--bg-surface-alt);
border: 1px solid var(--border);
border-radius: 8px;
margin-bottom: 10px;
}
.screener-ribbon-left {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex: 1 1 420px;
}
.screener-ribbon-right {
display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.screener-add-select {
background: var(--bg-surface); border: 1px solid var(--border); color: var(--text-primary);
padding: 6px 10px; border-radius: 6px; font-size: 13px; min-width: 150px;
}
.screener-add-select:focus { outline: none; border-color: var(--accent); }
.screener-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.screener-pill {
display: inline-flex; align-items: center; gap: 6px;
background: color-mix(in srgb, var(--accent) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
color: var(--accent); font-size: 11px; font-weight: 500;
padding: 3px 8px; border-radius: 999px;
}
.screener-pill .pill-close { cursor: pointer; opacity: 0.7; font-size: 13px; line-height: 1; }
.screener-pill .pill-close:hover { opacity: 1; }
/* Environment bar — the validated ENV1 tilt, stated plainly. */
.screener-envbar {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
padding: 8px 14px; margin-bottom: 10px;
background: var(--bg-surface); border: 1px solid var(--border); border-radius: 8px;
font-size: 12px;
}
.screener-env-name { color: var(--text-primary); font-weight: 600; }
.screener-env-tilt {
color: var(--green); font-weight: 500;
background: color-mix(in srgb, var(--green) 12%, transparent); padding: 2px 8px; border-radius: 999px;
}
.screener-env-tilt.avoid { color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); }
.screener-env-tilt.none { color: var(--text-secondary); background: color-mix(in srgb, var(--text-muted) 14%, transparent); }
.screener-env-copy { color: var(--text-secondary); flex: 1 1 320px; }
.screener-env-note { color: var(--text-muted); font-size: 11px; font-style: italic; }
/* Filter rows, grouped by class */
.screener-filter-group { margin-bottom: 10px; }
.screener-filter-groupname {
font-size: 10px; font-weight: 600; text-transform: uppercase;
letter-spacing: 0.4px; color: var(--text-muted); margin: 0 0 4px 2px;
}
.screener-filter-row {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
padding: 8px 12px; margin-bottom: 4px;
background: var(--bg-surface); border: 1px solid var(--border); border-radius: 6px;
}
.screener-filter-label {
font-size: 12px; color: var(--text-primary); font-weight: 500; min-width: 170px;
}
.screener-filter-hint { color: var(--text-muted); font-size: 12px; padding: 10px 2px; }
.screener-range-inputs { display: flex; align-items: center; gap: 6px; }
.screener-range-inputs input {
background: var(--bg-surface-alt); border: 1px solid var(--border); color: var(--text-primary);
padding: 5px 8px; border-radius: 6px; font-size: 12px; width: 92px;
}
.screener-range-inputs input:focus { outline: none; border-color: var(--accent); }
.screener-range-to { color: var(--text-muted); font-size: 11px; }
.screener-envfit { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.screener-envfit select {
background: var(--bg-surface-alt); border: 1px solid var(--border); color: var(--text-primary);
padding: 5px 8px; border-radius: 6px; font-size: 12px;
}
.screener-envfit select:disabled { opacity: 0.5; cursor: not-allowed; }
.screener-checkboxes {
display: flex; flex-wrap: wrap; gap: 4px 12px; flex: 1 1 auto; max-height: 96px; overflow-y: auto;
}
.screener-checkbox-label {
display: inline-flex; align-items: center; gap: 5px;
font-size: 11px; color: var(--text-secondary); cursor: pointer;
}
.screener-remove-filter {
margin-left: auto; background: none; border: none; color: var(--text-muted);
font-size: 17px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.screener-remove-filter:hover { color: var(--red); }
/* Sortable result headers */
.screener-mvp-table thead th.screener-th { cursor: pointer; user-select: none; white-space: nowrap; }
.screener-mvp-table thead th.screener-th:hover { color: var(--text-primary); }
.screener-mvp-table thead th.sort-active { color: var(--accent); }
.screener-mvp-table .sort-arrow { font-size: 9px; opacity: 0.85; }
/* Missing-data disclosure — a name dropped for a null is not a name that
failed the test, and silence there is what makes an empty screen read as
a broken one. */
.screener-excluded {
color: var(--text-muted); font-size: 11px; font-style: italic;
padding: 8px 2px 0; display: none;
}
/* Pack classes */
#screener-pack-classes { display: block; }
.regime-packs-class { margin-bottom: 8px; }
.regime-packs-classname {
font-size: 10px; font-weight: 600; text-transform: uppercase;
letter-spacing: 0.4px; color: var(--text-muted); margin: 0 0 4px 2px;
}
.regime-pack-btn.applied { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.regime-pack-badge.applied { background: var(--accent); color: #0a0d12; }
.ribbon-cols-groupname {
font-size: 10px; font-weight: 600; text-transform: uppercase;
letter-spacing: 0.4px; color: var(--text-muted); padding: 10px 12px 4px;
}
.ribbon-cols-row { display: flex; align-items: center; gap: 8px; padding: 5px 12px; cursor: pointer; }
.ribbon-cols-row span { font-size: 12px; color: var(--text-primary); }
/* Drilldown MVP */
.drilldown-mvp { padding: 16px 24px 32px; }
.drilldown-mvp-header {
display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
padding: 16px 18px;
background: #0f172a;
border: 1px solid #1f2937;
border-radius: 10px;
margin-bottom: 16px;
flex-wrap: wrap;
}
.drilldown-mvp-ticker { font-size: 24px; font-weight: 700; color: #3b82f6; letter-spacing: 0.5px; }
.drilldown-mvp-name { font-size: 13px; color: #94a3b8; margin-top: 2px; }
.drilldown-mvp-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.drilldown-mvp-actions input {
background: #0b1220;
border: 1px solid #1f2937;
color: #e2e8f0;
padding: 6px 8px;
border-radius: 6px;
font-size: 13px;
width: 130px;
}
.drilldown-mvp-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 14px;
}
.drilldown-mvp-card {
background: #0f172a;
border: 1px solid #1f2937;
border-radius: 10px;
padding: 14px 16px;
}
.dd-card-title {
font-size: 11px;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.6px;
margin-bottom: 10px;
font-weight: 600;
}
/* ===== RESEARCH SURFACE (PR C) ===== */
/* Segmented sub-toggle for Stocks / Industries views. */
.research-subnav {
display: inline-flex;
gap: 2px;
padding: 3px;
margin: 14px 22px 0;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 8px;
}
.research-subnav-btn {
appearance: none;
border: 0;
background: transparent;
color: var(--text-secondary);
font: 600 13px/1 var(--font-sans);
padding: 7px 16px;
border-radius: 6px;
cursor: pointer;
}
.research-subnav-btn:hover { color: var(--text-primary); }
.research-subnav-btn.active {
background: var(--accent);
color: #fff;
}
/* Industries card grid. */
.industry-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 14px;
padding: 18px 22px 32px;
}
.industry-grid-empty,
.industry-grid-loading {
grid-column: 1 / -1;
padding: 32px 0;
text-align: center;
color: var(--text-muted);
font-size: 14px;
}
.industry-card {
display: flex;
flex-direction: column;
gap: 6px;
padding: 16px 18px;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 10px;
}
.industry-card-name {
font-size: 16px;
font-weight: 700;
color: var(--text-primary);
line-height: 1.25;
}
.industry-card-slug {
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-secondary);
}
.industry-card-refreshed {
font-size: 12px;
color: var(--text-muted);
}
.industry-card-actions {
margin-top: 8px;
}
/* ===== DRILLDOWN SURFACE ===== */
.drilldown-root {
display: flex;
flex-direction: column;
gap: 18px;
padding: 18px 22px 32px;
color: var(--text-primary);
}
/* --- Masthead --- */
.dd-mast {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 24px;
padding: 18px 20px;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 12px;
flex-wrap: wrap;
}
.dd-mast-left { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dd-mast-ticker {
font-size: 28px;
font-weight: 700;
letter-spacing: 0.5px;
color: var(--text-primary);
}
.dd-mast-name {
font-size: 14px;
color: var(--text-secondary);
}
.dd-mast-stats {
display: flex;
gap: 22px;
margin-top: 12px;
flex-wrap: wrap;
}
.dd-mast-stat {
display: flex;
flex-direction: column;
gap: 2px;
}
.dd-mast-stat span {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.6px;
color: var(--text-muted);
}
.dd-mast-stat strong {
font-size: 16px;
color: var(--text-primary);
font-weight: 600;
}
.dd-mast-right {
display: flex;
flex-direction: column;
gap: 10px;
align-items: flex-end;
min-width: 280px;
}
.dd-mast-input {
display: flex;
gap: 8px;
}
.dd-mast-input input {
background: var(--bg-surface-alt);
color: var(--text-primary);
border: 1px solid var(--border);
border-radius: 6px;
padding: 6px 10px;
font-size: 13px;
width: 180px;
}
.dd-mast-input input:focus { border-color: var(--accent); outline: none; }
.dd-mast-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: flex-end;
}
/* --- Empty state --- */
.dd-empty {
display: flex;
flex-direction: column;
gap: 18px;
}
.dd-empty-card {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 32px;
display: flex;
flex-direction: column;
gap: 12px;
}
.dd-empty-eyebrow {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.8px;
color: var(--accent);
font-weight: 600;
}
.dd-empty-title {
font-size: 22px;
font-weight: 700;
color: var(--text-primary);
line-height: 1.3;
}
.dd-empty-body {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.6;
max-width: 720px;
}
.dd-empty-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 8px;
}
.dd-empty-actions input {
flex: 1 1 280px;
background: var(--bg-surface-alt);
color: var(--text-primary);
border: 1px solid var(--border);
border-radius: 6px;
padding: 9px 12px;
font-size: 14px;
}
.dd-empty-actions input:focus { border-color: var(--accent); outline: none; }
.dd-empty-row {
padding: 22px;
color: var(--text-muted);
text-align: center;
font-size: 13px;
}
/* --- Run panel --- */
.dd-run-panel {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 12px;
padding: 22px;
display: flex;
flex-direction: column;
gap: 20px;
}
.dd-run-step {
display: flex;
gap: 16px;
align-items: flex-start;
}
.dd-step-num {
flex-shrink: 0;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--accent);
color: #fff;
font-weight: 700;
font-size: 13px;
display: flex;
align-items: center;
justify-content: center;
}
.dd-step-body { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dd-step-title { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.dd-step-sub {
font-size: 13px;
color: var(--text-secondary);
line-height: 1.5;
}
.dd-step-sub strong { color: var(--text-primary); font-weight: 600; }
.dd-step-sub em { font-style: normal; color: var(--accent, #4f9eff); font-weight: 500; }
.dd-run-step-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dd-run-fallback {
margin-top: 8px;
font-size: 11px;
color: var(--text-secondary);
}
.dd-run-fallback a {
color: var(--accent, #4f9eff);
text-decoration: underline;
text-underline-offset: 2px;
cursor: pointer;
}
.dd-run-fallback a:hover { color: var(--text-primary); }
.dd-run-status {
margin-top: 10px;
padding: 8px 10px;
border-radius: 6px;
font-size: 12px;
line-height: 1.4;
}
.dd-run-status:empty { display: none; }
.dd-run-status-info {
background: rgba(79, 158, 255, 0.08);
color: var(--text-primary);
border: 1px solid rgba(79, 158, 255, 0.25);
}
.dd-run-status-ok {
background: rgba(46, 204, 113, 0.10);
color: var(--text-primary);
border: 1px solid rgba(46, 204, 113, 0.30);
}
.dd-run-status-error {
background: rgba(231, 76, 60, 0.10);
color: var(--text-primary);
border: 1px solid rgba(231, 76, 60, 0.30);
}
.dd-spinner {
display: inline-block;
width: 11px;
height: 11px;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
vertical-align: -2px;
margin-right: 6px;
animation: dd-spin 0.7s linear infinite;
}
@keyframes dd-spin { to { transform: rotate(360deg); } }
.btn-loading { opacity: 0.85; cursor: progress; }
.dd-merge-row { background: rgba(79, 158, 255, 0.05); }
.dd-merge-row td { font-style: italic; color: var(--text-secondary); }
.dd-html-input {
width: 100%;
background: var(--bg-surface-alt);
color: var(--text-primary);
border: 1px solid var(--border);
border-radius: 6px;
padding: 10px 12px;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 12px;
resize: vertical;
min-height: 120px;
}
.dd-html-input:focus { border-color: var(--accent); outline: none; }
.dd-run-meta {
display: flex;
gap: 12px;
align-items: center;
flex-wrap: wrap;
margin-top: 4px;
}
.dd-run-meta label {
display: flex;
flex-direction: column;
gap: 4px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.6px;
color: var(--text-muted);
font-weight: 600;
}
.dd-run-meta select {
background: var(--bg-surface-alt);
color: var(--text-primary);
border: 1px solid var(--border);
border-radius: 6px;
padding: 6px 8px;
font-size: 13px;
min-width: 160px;
text-transform: none;
letter-spacing: 0;
}
.dd-run-meta select:focus { border-color: var(--accent); outline: none; }
/* --- Cards (versions / library) --- */
.dd-card {
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
}
.dd-card-head {
padding: 16px 20px;
border-bottom: 1px solid var(--border);
display: flex;
flex-direction: column;
gap: 4px;
}
.dd-card-title {
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
}
.dd-card-sub {
font-size: 12px;
color: var(--text-muted);
}
.dd-versions, .dd-library {
width: 100%;
border-collapse: collapse;
font-size: 13px;
}
.dd-versions th, .dd-library th {
padding: 10px 14px;
text-align: left;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.6px;
color: var(--text-muted);
font-weight: 600;
background: var(--bg-surface-alt);
border-bottom: 1px solid var(--border);
}
.dd-versions td, .dd-library td {
padding: 11px 14px;
border-bottom: 1px solid var(--border);
color: var(--text-primary);
}
.dd-versions tr:last-child td, .dd-library tr:last-child td { border-bottom: 0; }
.dd-versions tr[data-dd-ver]:hover, .dd-library tr[data-dd-ticker]:hover {
background: var(--bg-hover);
cursor: pointer;
}
.dd-versions th.num, .dd-versions td.num,
.dd-library th.num, .dd-library td.num { text-align: right; font-variant-numeric: tabular-nums; }
.dd-row-actions {
display: flex;
gap: 6px;
justify-content: flex-end;
}
.dd-library-foot {
display: flex;
gap: 8px;
padding: 12px 16px;
border-top: 1px solid var(--border);
background: var(--bg-surface-alt);
}
/* --- Trigger pills --- */
.dd-trigger {
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
border: 1px solid var(--border-light);
background: var(--bg-surface-alt);
color: var(--text-secondary);
}
.dd-trigger-manual { color: var(--text-secondary); border-color: var(--border-light); }
.dd-trigger-refresh {
color: var(--accent);
border-color: var(--accent);
background: rgba(59, 130, 246, 0.08);
}
.dd-trigger-earnings_alert {
color: #f59e0b;
border-color: #d97706;
background: rgba(245, 158, 11, 0.08);
}
/* --- Viewer --- */
.dd-viewer-card { display: flex; flex-direction: column; }
.dd-viewer-head {
padding: 16px 20px;
border-bottom: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
flex-wrap: wrap;
}
.dd-viewer-eyebrow {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.6px;
color: var(--accent);
font-weight: 600;
}
.dd-viewer-title {
font-size: 15px;
font-weight: 600;
color: var(--text-primary);
margin-top: 2px;
}
.dd-viewer-sub {
font-size: 12px;
color: var(--text-muted);
margin-top: 4px;
}
.dd-viewer-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: flex-end;
}
.dd-viewer-frame {
height: 80vh;
width: 100%;
border: 0;
/* Theme token, not hardcoded #fff: the iframe background shows through
* during srcdoc load and behind any transparent regions of the note. A
* hardcoded white here produced the white-patch flash in dark mode. */
background: var(--bg-primary);
}
/* --- Macro Stance panel (drilldown) --- */
.dd-macro-panel {
background: var(--bg-surface);
border: 1px solid var(--border-light);
border-radius: 12px;
overflow: hidden;
margin: 12px 0;
color: var(--text-primary);
}
.dd-macro-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 14px;
border-bottom: 1px solid var(--border-light);
background: var(--bg-surface-alt);
}
.dd-macro-title {
font-size: 12px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--text-muted);
}
.dd-macro-meta {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.dd-macro-regime-pill {
font-size: 11px;
font-weight: 600;
padding: 2px 8px;
border-radius: 999px;
border: 1px solid var(--border-light);
color: var(--text-primary);
background: var(--bg-surface);
}
.dd-macro-ts {
font-size: 11px;
color: var(--text-muted);
}
.dd-macro-dual {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
}
.dd-macro-side {
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 8px;
}
.dd-macro-side + .dd-macro-side {
border-left: 1px solid var(--border-light);
}
.dd-macro-side-eyebrow {
font-size: 11px;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text-muted);
}
.dd-macro-side-head {
display: flex;
align-items: center;
gap: 10px;
}
.dd-macro-score-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
height: 28px;
padding: 0 6px;
border-radius: 999px;
font-size: 13px;
font-weight: 700;
color: #0b1220;
}
.dd-macro-label {
font-size: 14px;
font-weight: 600;
color: var(--text-primary);
}
.dd-macro-drivers {
list-style: none;
padding: 0;
margin: 4px 0 0 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.dd-macro-drivers li {
font-size: 12px;
color: var(--text-muted);
padding-left: 12px;
position: relative;
line-height: 1.45;
}
.dd-macro-drivers li::before {
content: '\00b7';
position: absolute;
left: 4px;
top: -2px;
font-weight: 700;
color: var(--text-muted);
}
.dd-macro-drivers-empty {
font-size: 12px;
color: var(--text-muted);
font-style: italic;
margin-top: 4px;
}
.dd-macro-watch {
font-size: 12px;
color: var(--text-muted);
margin-top: 4px;
}
.dd-macro-watch-label,
.dd-macro-conviction-label {
font-weight: 600;
color: var(--text-primary);
margin-right: 4px;
}
.dd-macro-watch-chip {
display: inline-block;
font-size: 11px;
padding: 2px 8px;
border-radius: 999px;
border: 1px solid var(--border-light);
background: var(--bg-surface);
color: var(--text-primary);
}
.dd-macro-conviction {
font-size: 12px;
color: var(--text-muted);
margin-top: 4px;
}
.dd-macro-conviction em {
color: var(--text-primary);
font-style: italic;
}
.dd-macro-footer {
padding: 12px 16px;
border-top: 1px solid var(--border-light);
background: var(--bg-surface-alt);
display: flex;
flex-direction: column;
gap: 6px;
}
.dd-macro-footer-head {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.dd-macro-stance-pill {
font-size: 12px;
font-weight: 700;
padding: 3px 10px;
border-radius: 999px;
letter-spacing: 0.02em;
}
.dd-macro-headline {
font-size: 13px;
font-weight: 600;
color: var(--text-primary);
}
.dd-macro-explanation {
font-size: 12px;
color: var(--text-muted);
line-height: 1.5;
}
.dd-macro-exposure-wrap {
border-top: 1px solid var(--border-light);
}
.dd-macro-exposure-toggle {
display: flex;
align-items: center;
gap: 6px;
width: 100%;
padding: 10px 16px;
background: transparent;
border: 0;
color: var(--text-muted);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
cursor: pointer;
text-align: left;
}
.dd-macro-exposure-toggle:hover {
color: var(--text-primary);
}
.dd-macro-exposure-chev {
display: inline-block;
width: 12px;
color: var(--text-muted);
}
.dd-macro-exposure {
display: none;
padding: 6px 16px 14px 16px;
flex-direction: column;
gap: 6px;
}
.dd-macro-exposure-wrap.is-open .dd-macro-exposure {
display: flex;
}
.dd-macro-exposure-head,
.dd-macro-exposure-row {
display: grid;
grid-template-columns: 180px 110px 1fr 1fr;
gap: 12px;
align-items: start;
padding: 6px 0;
font-size: 12px;
}
.dd-macro-exposure-head {
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 11px;
border-bottom: 1px dashed var(--border-light);
}
.dd-macro-exposure-row + .dd-macro-exposure-row {
border-top: 1px solid var(--border-light);
}
.dd-macro-exp-dim {
font-weight: 600;
color: var(--text-primary);
}
.dd-macro-exp-tact,
.dd-macro-exp-strat {
color: var(--text-muted);
line-height: 1.45;
}
.dd-macro-exp-label {
font-weight: 600;
color: var(--text-primary);
margin-right: 4px;
}
.dd-macro-assess-badge {
display: inline-block;
font-size: 10px;
font-weight: 700;
padding: 2px 8px;
border-radius: 999px;
letter-spacing: 0.05em;
}
.dd-macro-empty .dd-macro-empty-body {
padding: 14px 16px;
font-size: 12px;
color: var(--text-muted);
}
.dd-macro-skel-line {
height: 10px;
border-radius: 4px;
background: var(--bg-surface-alt);
margin: 4px 0;
width: 100%;
max-width: 240px;
animation: dd-macro-pulse 1.4s ease-in-out infinite;
}
.dd-macro-skel-badge {
width: 28px;
height: 28px;
border-radius: 999px;
background: var(--bg-surface-alt);
animation: dd-macro-pulse 1.4s ease-in-out infinite;
}
@keyframes dd-macro-pulse {
0%, 100% { opacity: 0.55; }
50% { opacity: 0.95; }
}
/* --- Responsive --- */
@media (max-width: 760px) {
.dd-mast { flex-direction: column; }
.dd-mast-right { align-items: stretch; min-width: 0; }
.dd-mast-input input { width: 100%; }
.dd-mast-actions { justify-content: flex-start; }
.dd-versions th:nth-child(4), .dd-versions td:nth-child(4),
.dd-versions th:nth-child(5), .dd-versions td:nth-child(5) { display: none; }
.dd-library th:nth-child(5), .dd-library td:nth-child(5),
.dd-library th:nth-child(6), .dd-library td:nth-child(6) { display: none; }
.dd-macro-dual { grid-template-columns: 1fr; }
.dd-macro-side + .dd-macro-side { border-left: 0; border-top: 1px solid var(--border-light); }
.dd-macro-exposure-head,
.dd-macro-exposure-row { grid-template-columns: 1fr; gap: 4px; }
.dd-macro-exposure-head { display: none; }
}
/* === Pipeline observability: quarantine badge, health pill, modal ========= */
/* Surfaced by automation/pipeline (quarantine.json + pipeline_status.json). */
.quarantine-badge {
display: inline-block;
margin-left: 6px;
padding: 1px 6px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
color: #7a2e0e;
background: #fde2c8;
border: 1px solid #f0a868;
border-radius: 4px;
vertical-align: middle;
cursor: help;
}
.pipeline-health-pill {
display: inline-flex;
align-items: center;
gap: 2px;
margin-left: 12px;
padding: 2px 4px 2px 8px;
font-size: 11px;
font-weight: 600;
color: var(--text-secondary, #475569);
/* --surface-2 is not a defined token; the real one is --bg-surface-alt.
* The stale name fell back to an opaque light gray (white patch in dark). */
background: var(--bg-surface-alt, #151b2b);
border: 1px solid var(--border-light, #e2e8f0);
border-radius: 999px;
vertical-align: middle;
}
.pipeline-health-pill.has-quarantine {
color: #7a2e0e;
background: #fde2c8;
border-color: #f0a868;
}
.pipeline-health-pill .php-main {
background: none;
border: 0;
font: inherit;
color: inherit;
cursor: pointer;
padding: 0;
}
.pipeline-health-pill .php-dismiss {
background: none;
border: 0;
color: inherit;
cursor: pointer;
font-size: 13px;
line-height: 1;
opacity: 0.6;
padding: 0 2px;
}
.pipeline-health-pill .php-dismiss:hover { opacity: 1; }
.pipeline-modal-overlay {
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(15, 23, 42, 0.45);
display: flex;
align-items: center;
justify-content: center;
}
.pipeline-modal {
width: min(640px, 92vw);
max-height: 80vh;
overflow: auto;
/* --surface is not a defined token; the real one is --bg-surface. The stale
* name fell back to #fff, painting the modal white in dark mode. */
background: var(--bg-surface, #111827);
border-radius: 10px;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}
.pipeline-modal-head {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 18px;
font-weight: 700;
border-bottom: 1px solid var(--border-light, #e2e8f0);
}
.pipeline-modal-close {
background: none;
border: 0;
font-size: 20px;
line-height: 1;
cursor: pointer;
color: var(--text-secondary, #475569);
}
.pipeline-modal-body { padding: 14px 18px; }
.pipeline-modal-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.pipeline-modal-table th,
.pipeline-modal-table td {
text-align: left;
padding: 6px 8px;
border-bottom: 1px solid var(--border-light, #eef2f7);
vertical-align: top;
}
.pipeline-modal-table .pm-ticker { font-weight: 700; white-space: nowrap; }
.pipeline-modal-table .pm-missing { color: #7a2e0e; }
.pipeline-modal .pm-clean { color: var(--text-secondary, #475569); margin: 0; }
/* =================================================================== */
/* sig-help: (?) icon + popover */
/* =================================================================== */
/* The (?) icon itself.
Visual diameter: 14px. Click/hover target expanded to ~26px via padding
+ negative margin so users can grab it easily without bloating layout. */
.sig-help-icon {
appearance: none;
background: rgba(148, 163, 184, 0.10);
border: 1px solid rgba(148, 163, 184, 0.30);
color: var(--text-secondary, #9ca3af);
width: 14px;
height: 14px;
min-width: 14px;
border-radius: 999px;
/* Lowercase serif italic 'i' reads as the canonical info glyph. */
font: italic 700 10.5px/1 'Georgia', 'Times New Roman', serif;
padding: 0;
margin: -6px 0 -6px 6px;
cursor: help;
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
position: relative;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.sig-help-icon > span {
/* Optical center the 'i' — serif italic glyph sits slightly off-center. */
display: inline-block;
transform: translate(0.5px, -0.5px);
}
/* Invisible hit area so cursor-on-the-label works too. */
.sig-help-icon::before {
content: '';
position: absolute;
inset: -7px;
border-radius: 999px;
}
.sig-help-icon:hover,
.sig-help-icon:focus-visible,
.sig-help-icon[aria-expanded="true"] {
background: rgba(59, 130, 246, 0.18);
border-color: rgba(59, 130, 246, 0.55);
color: #cbd5e1;
outline: none;
transform: translateY(-0.5px);
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.10);
}
.sig-help-icon:focus { outline: none; }
.sig-help-icon-missing {
opacity: 0.4;
cursor: not-allowed;
}
.sig-help-icon-inline {
position: relative;
top: -0.5px;
}
/* When the [data-help] element has its own text (e.g. a label/sentence), it
acts as a trigger too — hover anywhere on the label opens the popover.
Empty placeholder hooks (e.g. next to a header) get
no decoration; only the (?) icon is interactive. */
[data-help-parent-trigger] {
cursor: help;
text-decoration-line: underline;
text-decoration-style: dotted;
text-decoration-color: rgba(148, 163, 184, 0.35);
text-underline-offset: 3px;
text-decoration-thickness: from-font;
transition: text-decoration-color 0.15s ease, color 0.15s ease;
}
[data-help-parent-trigger]:hover,
[data-help-parent-trigger].sig-help-active {
text-decoration-color: rgba(59, 130, 246, 0.7);
color: var(--text-primary, #e5e7eb);
}
button[data-help-parent-trigger],
a[data-help-parent-trigger],
input[data-help-parent-trigger] {
text-decoration: none;
}
/* Popover */
.sig-help-pop {
position: absolute;
z-index: 9999;
max-width: 340px;
min-width: 240px;
background: linear-gradient(180deg, #1a2035 0%, #151b2b 100%);
border: 1px solid rgba(59, 130, 246, 0.28);
border-radius: 10px;
box-shadow:
0 24px 48px -12px rgba(0, 0, 0, 0.6),
0 0 0 1px rgba(15, 23, 42, 0.4),
inset 0 1px 0 rgba(255, 255, 255, 0.04);
color: var(--text-primary, #e5e7eb);
font-family: 'Inter', system-ui, sans-serif;
font-size: 12.5px;
line-height: 1.5;
padding: 12px 14px 13px;
pointer-events: auto;
opacity: 0;
transform: translateY(4px);
transition: opacity 0.14s ease, transform 0.14s ease;
}
.sig-help-pop.sig-help-pop-open {
opacity: 1;
transform: translateY(0);
}
.sig-help-pop.sig-help-pop-above {
transform: translateY(-4px);
}
.sig-help-pop.sig-help-pop-above.sig-help-pop-open {
transform: translateY(0);
}
.sig-help-pop[hidden] { display: none; }
.sig-help-pop-arrow {
position: absolute;
top: -6px;
width: 10px;
height: 10px;
background: #1a2035;
border-left: 1px solid rgba(59, 130, 246, 0.28);
border-top: 1px solid rgba(59, 130, 246, 0.28);
transform: rotate(45deg);
border-top-left-radius: 2px;
}
.sig-help-pop.sig-help-pop-above .sig-help-pop-arrow {
top: auto;
bottom: -6px;
background: #151b2b;
border-left: 0;
border-top: 0;
border-right: 1px solid rgba(59, 130, 246, 0.28);
border-bottom: 1px solid rgba(59, 130, 246, 0.28);
border-top-left-radius: 0;
border-bottom-right-radius: 2px;
}
.sig-help-pop-body { position: relative; }
.sig-help-pop-title {
font-size: 13px;
font-weight: 600;
color: #f1f5f9;
letter-spacing: -0.005em;
margin: 0 0 5px;
}
.sig-help-pop-oneliner {
color: #cbd5e1;
margin: 0 0 10px;
}
.sig-help-pop-howto-label {
font-size: 9.5px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #64748b;
margin: 8px 0 4px;
padding-top: 8px;
border-top: 1px solid rgba(148, 163, 184, 0.10);
}
.sig-help-pop-howto {
color: #94a3b8;
font-size: 12px;
line-height: 1.55;
margin: 0;
}
/* =================================================================== */
/* Compare tab surface (Rich Compare as a tab) */
/* =================================================================== */
.cmp-surface {
display: flex;
flex-direction: column;
gap: 14px;
min-height: 0;
}
.cmp-surface-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 16px;
padding: 0 4px 4px;
border-bottom: 1px solid var(--border, #1e293b);
margin-bottom: 4px;
}
.cmp-surface-title {
min-width: 0;
flex: 1;
}
.cmp-surface-title-main {
margin: 0 0 4px;
font: 600 18px/1.2 'Inter', system-ui, sans-serif;
letter-spacing: -0.01em;
color: var(--text-primary, #e5e7eb);
}
.cmp-surface-title-main .cmp-vs {
color: var(--text-muted, #6b7280);
font-weight: 400;
font-size: 14px;
margin: 0 4px;
}
.cmp-surface-subtitle {
font: 400 12px/1.4 'Inter', system-ui, sans-serif;
color: var(--text-secondary, #9ca3af);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cmp-surface-header-actions {
display: flex;
gap: 6px;
flex-shrink: 0;
}
.cmp-surface-grid {
display: grid;
grid-template-columns: 168px 1fr;
gap: 16px;
min-height: 0;
}
.cmp-surface-rail {
display: flex;
flex-direction: column;
gap: 2px;
padding: 4px 0;
border-right: 1px solid var(--border, #1e293b);
align-self: start;
position: sticky;
top: 0;
}
.cmp-rail-tab {
appearance: none;
background: transparent;
border: 0;
border-left: 2px solid transparent;
color: var(--text-secondary, #9ca3af);
font: 500 13px/1.3 'Inter', system-ui, sans-serif;
text-align: left;
padding: 9px 14px 9px 12px;
margin-right: -1px; /* overlap the rail border so active state aligns */
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
border-radius: 0;
transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.cmp-rail-tab:hover {
background: rgba(148, 163, 184, 0.06);
color: var(--text-primary, #e5e7eb);
}
.cmp-rail-tab.active {
background: rgba(59, 130, 246, 0.08);
border-left-color: var(--accent, #3b82f6);
color: var(--text-primary, #e5e7eb);
font-weight: 600;
}
.cmp-rail-tab.active:hover {
background: rgba(59, 130, 246, 0.12);
}
.cmp-rail-tab-label { flex: 1; min-width: 0; }
.cmp-surface-body {
min-width: 0;
min-height: 200px;
}
/* Narrow viewport: collapse rail to horizontal scroller */
@media (max-width: 720px) {
.cmp-surface-grid {
grid-template-columns: 1fr;
}
.cmp-surface-rail {
flex-direction: row;
overflow-x: auto;
border-right: 0;
border-bottom: 1px solid var(--border, #1e293b);
padding: 0 0 2px;
position: static;
}
.cmp-rail-tab {
border-left: 0;
border-bottom: 2px solid transparent;
padding: 8px 12px;
white-space: nowrap;
}
.cmp-rail-tab.active {
border-left-color: transparent;
border-bottom-color: var(--accent, #3b82f6);
}
.cmp-surface-header {
flex-direction: column;
align-items: flex-start;
}
.cmp-surface-header-actions {
flex-wrap: wrap;
}
}
/* =================================================================== */
/* Compare empty state — quick-start chips (placeholder; Sprint 2b */
/* enriches this into full suggestion baskets) */
/* =================================================================== */
.cmp-empty-state {
padding: 18px 4px 8px;
}
.cmp-empty-hint {
font: 600 14px/1.4 'Inter', system-ui, sans-serif;
color: var(--text-primary, #e5e7eb);
margin-bottom: 4px;
}
.cmp-empty-subhint {
font: 400 12px/1.4 'Inter', system-ui, sans-serif;
color: var(--text-secondary, #9ca3af);
margin-bottom: 12px;
}
.cmp-empty-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.cmp-empty-chip {
appearance: none;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 12px;
background: var(--bg-surface, #111827);
border: 1px solid var(--border, #1e293b);
border-radius: 999px;
cursor: pointer;
font: 500 12px/1.2 'Inter', system-ui, sans-serif;
color: var(--text-primary, #e5e7eb);
transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease, transform 0.06s ease;
}
.cmp-empty-chip:hover {
background: var(--bg-surface-alt, #151b2b);
border-color: var(--accent, #3b82f6);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}
.cmp-empty-chip:active { transform: translateY(1px); }
.cmp-empty-chip-tk {
font-weight: 700;
letter-spacing: 0.01em;
}
.cmp-empty-chip-name {
color: var(--text-secondary, #9ca3af);
max-width: 160px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cmp-empty-chip-change {
font-variant-numeric: tabular-nums;
font-weight: 600;
}
.cmp-empty-chip-change.pos { color: var(--green, #22c55e); }
.cmp-empty-chip-change.neg { color: var(--red, #ef4444); }
/* =================================================================== */
/* Compare suggestion baskets (Sprint 2b) */
/* =================================================================== */
.cmp-baskets {
padding: 14px 2px 8px;
}
.cmp-baskets-intro {
font: 400 12.5px/1.5 'Inter', system-ui, sans-serif;
color: var(--text-secondary, #9ca3af);
margin-bottom: 14px;
}
.cmp-baskets-empty {
font: 400 13px/1.5 'Inter', system-ui, sans-serif;
color: var(--text-muted, #6b7280);
padding: 24px 4px;
text-align: center;
}
.cmp-baskets-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.cmp-basket-card {
background: var(--bg-surface, #111827);
border: 1px solid var(--border, #1e293b);
border-radius: 10px;
padding: 12px 14px 14px;
min-width: 0;
}
.cmp-basket-card.is-empty {
opacity: 0.7;
}
.cmp-basket-empty {
display: flex;
align-items: center;
gap: 6px;
font: 400 12.5px/1.4 'Inter', system-ui, sans-serif;
color: var(--text-muted, #6b7280);
}
.cmp-basket-empty-dash {
font-variant-numeric: tabular-nums;
color: var(--text-secondary, #9ca3af);
}
.cmp-basket-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
}
.cmp-basket-title {
font: 600 13px/1.3 'Inter', system-ui, sans-serif;
color: var(--text-primary, #e5e7eb);
display: flex;
align-items: center;
gap: 4px;
min-width: 0;
}
.cmp-basket-action {
flex-shrink: 0;
white-space: nowrap;
}
.cmp-basket-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
/* Basket chip — pill button. Shares change/name colors with the empty-state
chips above; adds picked + muted states and an inline-meta variant for the
M&A basket (buyer + confidence in place of the change %). */
.cmp-basket-chip {
appearance: none;
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 7px 12px;
background: var(--bg-surface-alt, #151b2b);
border: 1px solid var(--border, #1e293b);
border-radius: 999px;
cursor: pointer;
font: 500 12px/1.2 'Inter', system-ui, sans-serif;
color: var(--text-primary, #e5e7eb);
transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease, transform 0.06s ease, opacity 0.12s ease;
}
.cmp-basket-chip:hover {
border-color: var(--accent, #3b82f6);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
transform: translateY(-1px);
}
.cmp-basket-chip:active { transform: translateY(0); }
.cmp-basket-chip-tk { font-weight: 700; letter-spacing: 0.01em; }
.cmp-basket-chip-name {
color: var(--text-secondary, #9ca3af);
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cmp-basket-chip-change {
font-variant-numeric: tabular-nums;
font-weight: 600;
}
.cmp-basket-chip-change.pos { color: var(--green, #22c55e); }
.cmp-basket-chip-change.neg { color: var(--red, #ef4444); }
.cmp-basket-chip-meta {
color: var(--text-muted, #6b7280);
font-size: 11px;
}
/* "picked" badge — hidden by default, revealed on the picked state. The
leading check is a pure-CSS glyph (no emoji). */
.cmp-basket-chip-picked {
display: none;
align-items: center;
gap: 4px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--accent, #3b82f6);
}
.cmp-basket-chip-picked::before {
content: '';
display: inline-block;
width: 6px;
height: 10px;
border: solid var(--accent, #3b82f6);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
margin-bottom: 2px;
}
.cmp-basket-chip.is-picked {
background: rgba(59, 130, 246, 0.12);
border-color: var(--accent, #3b82f6);
}
.cmp-basket-chip.is-picked .cmp-basket-chip-picked { display: inline-flex; }
.cmp-basket-chip.is-muted {
opacity: 0.5;
cursor: not-allowed;
}
.cmp-basket-chip.is-muted:hover {
transform: none;
box-shadow: none;
border-color: var(--border, #1e293b);
}
@media (max-width: 720px) {
.cmp-baskets-grid {
grid-template-columns: 1fr;
}
}
/* ---- section-grouped baskets (PR: compare suggestions v2) ---- */
.cmp-baskets-section {
margin-bottom: 20px;
}
.cmp-baskets-section:last-child {
margin-bottom: 0;
}
.cmp-baskets-section-header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin: 0 0 10px 2px;
padding-bottom: 6px;
border-bottom: 1px solid var(--border, #1e293b);
}
.cmp-baskets-section-title {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--fg-muted, #94a3b8);
margin: 0;
}
.cmp-baskets-section-sub {
font-size: 0.7rem;
color: var(--fg-muted, #94a3b8);
opacity: 0.7;
}
.cmp-basket-card.is-pair {
border-color: rgba(59, 130, 246, 0.35);
background: linear-gradient(180deg, rgba(59, 130, 246, 0.04) 0%, transparent 60%);
}
.cmp-basket-card.is-pair .cmp-basket-title {
color: var(--accent, #3b82f6);
}
.cmp-basket-card.is-theme .cmp-basket-title {
color: var(--fg, #e2e8f0);
}
/* ============================================================
DISCOVER — right-rail suggestion baskets + onboarding modal
------------------------------------------------------------
Layout tiers (deliberate, to avoid squeezing the existing
coverage-context panel at common laptop widths):
>= 1441px : true 3rd sticky column (main | context | discover)
961-1440 : full-width horizontal card strip below the table
<= 960px : off-canvas right drawer, opened via the Discover pill
============================================================ */
.discover-rail {
grid-column: 1 / -1; /* strip mode: full width below table */
background: transparent;
min-width: 0;
}
.discover-rail[hidden] { display: none; }
.discover-rail-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin: 4px 0 10px;
}
.discover-rail-title {
font: 700 13px/1.3 'Inter', system-ui, sans-serif;
letter-spacing: 0.02em;
color: var(--text-primary, #e5e7eb);
text-transform: uppercase;
}
.discover-collapse-toggle {
flex-shrink: 0;
width: 26px;
height: 26px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 1px solid var(--border, #1e293b);
border-radius: 6px;
cursor: pointer;
color: var(--text-secondary, #9ca3af);
}
.discover-collapse-toggle:hover { border-color: var(--accent, #1E7BFF); color: var(--text-primary, #e5e7eb); }
.discover-chevron {
width: 8px;
height: 8px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(-45deg);
}
.discover-rail-body {
display: flex;
flex-direction: row;
gap: 12px;
overflow-x: auto;
padding-bottom: 6px;
/* Match the watchlist table scroller (styles.css .table-wrapper) so the
Discover rail's horizontal scrollbar has the same slim 6px look instead
of the browser default chunky bar. */
}
.discover-rail-body > .discover-card { flex: 0 0 300px; }
/* Card — mirrors .cmp-basket-card with a distinct left accent stripe. */
.discover-card {
position: relative;
background: var(--bg-surface, #111827);
border: 1px solid var(--border, #1e293b);
border-left: 3px solid var(--accent, #1E7BFF);
border-radius: 10px;
padding: 12px 14px 14px;
min-width: 0;
}
.discover-card-head { margin-bottom: 10px; }
.discover-card-title {
font: 600 13px/1.3 'Inter', system-ui, sans-serif;
color: var(--text-primary, #e5e7eb);
}
.discover-card-sub {
font: 400 11.5px/1.35 'Inter', system-ui, sans-serif;
color: var(--text-muted, #6b7280);
margin-top: 2px;
}
.discover-card-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 10px;
}
.discover-chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 9px;
border: 1px solid var(--border, #1e293b);
border-radius: 999px;
background: transparent;
color: var(--text-primary, #e5e7eb);
font: 600 11.5px/1 'Inter', system-ui, sans-serif;
cursor: pointer;
}
.discover-chip:hover { border-color: var(--accent, #1E7BFF); }
.discover-chip.is-owned {
cursor: default;
opacity: 0.6;
border-style: dashed;
}
.discover-chip-owned {
font-weight: 400;
font-size: 10px;
color: var(--text-muted, #6b7280);
}
/* Private-company chips: no symbol, so a small kind tag carries the asset
kind (same convention as the unified search dropdown's PRIVATE badge) and
the company name takes the ticker slot. */
.discover-chip-private .discover-chip-tk {
font-weight: 500;
font-style: italic;
}
.discover-chip-kind {
font-size: 8px;
font-weight: 700;
letter-spacing: 0.06em;
color: var(--text-muted, #6b7280);
background: rgba(148, 163, 184, 0.14);
border: 1px solid rgba(148, 163, 184, 0.3);
border-radius: 3px;
padding: 1px 3px;
line-height: 1.2;
flex-shrink: 0;
}
.discover-card-actions {
display: flex;
gap: 8px;
align-items: center;
}
.discover-btn {
padding: 5px 12px;
border-radius: 6px;
font: 600 12px/1 'Inter', system-ui, sans-serif;
cursor: pointer;
border: 1px solid transparent;
white-space: nowrap;
}
.discover-btn-primary {
background: var(--accent, #1E7BFF);
color: #fff;
}
.discover-btn-primary:disabled {
background: transparent;
color: var(--text-muted, #6b7280);
border-color: var(--border, #1e293b);
cursor: default;
}
.discover-btn-ghost {
background: transparent;
color: var(--text-secondary, #9ca3af);
border-color: var(--border, #1e293b);
}
.discover-btn-ghost:hover { border-color: var(--accent, #1E7BFF); color: var(--text-primary, #e5e7eb); }
.discover-why-toggle {
margin-top: 8px;
padding: 0;
background: none;
border: none;
color: var(--accent, #1E7BFF);
font: 500 11.5px/1.3 'Inter', system-ui, sans-serif;
cursor: pointer;
}
.discover-why {
margin-top: 6px;
font: 400 11.5px/1.45 'Inter', system-ui, sans-serif;
color: var(--text-muted, #6b7280);
}
/* Mobile pill trigger — hidden until small screens. */
.discover-pill { display: none; }
/* --- >= 1441px: promote to a true sticky right column --- */
@media (min-width: 1441px) {
/* 2026-07-10: Cap the coverage SURFACE to the viewport so the page itself
never scrolls. This is the root fix for two coupled bugs:
(a) Sticky thead slid under the app-header — thead sticks to the
table-wrapper's top (top:0), and when the page scrolled, the wrapper
top rose above the viewport and dragged the thead under the header.
(b) Black void below the Discover rail — the grid row was as tall as the
uncapped table (~6000px), so the short rail left a huge unfilled track.
With the surface capped + overflow:hidden, the table-wrapper becomes the
sole vertical scroll container (thead pins to a fixed viewport position),
and the grid row is viewport-bounded so the rail stretches to fill it.
--app-header-height is set by app.js (setTableTopOffset IIFE). */
.surface-coverage:not([hidden]) {
height: calc(100dvh - var(--app-header-height, 54px));
max-height: calc(100dvh - var(--app-header-height, 54px));
overflow: hidden;
display: flex;
flex-direction: column;
}
.surface-coverage:not([hidden]) > .coverage-ribbon,
.surface-coverage:not([hidden]) > .summary-strip { flex-shrink: 0; }
.coverage-layout {
grid-template-columns: minmax(0, 1fr) 300px 320px;
grid-template-rows: minmax(0, 1fr);
align-items: stretch;
flex: 1 1 0;
min-height: 0;
}
.coverage-main {
min-height: 0;
display: flex;
flex-direction: column;
}
.coverage-main > .section-header-bar,
.coverage-main > .coverage-header-bar { flex-shrink: 0; }
.coverage-main > .table-wrapper {
flex: 1 1 0;
min-height: 0;
/* Let the flex chain drive height; the JS-measured max-height from
styles.css is now redundant and could leave a gap if the offset is
slightly stale. */
max-height: none;
}
/* When no ticker context is populated at wide widths, drop back to a
2-col layout (main + discover) so the watchlist reclaims the middle
track instead of leaving a blank column where the context aside was. */
.coverage-layout:has(> .coverage-context > .ctx-content[hidden]) {
grid-template-columns: minmax(0, 1fr) 320px;
}
.coverage-layout:has(> .coverage-context > .ctx-content[hidden]) > .discover-rail {
grid-column: 2;
}
/* 2026-07-09: when the discover rail is collapsed to its vertical strip,
shrink its grid track so the watchlist reclaims the space (was leaving a
~275px dead-black column beside the narrow rail). Handles both the 3-col
(context visible) and 2-col (context hidden) cases. */
.coverage-layout:has(> .discover-rail[data-collapsed="true"]) {
grid-template-columns: minmax(0, 1fr) 300px 48px;
}
.coverage-layout:has(> .coverage-context > .ctx-content[hidden]):has(> .discover-rail[data-collapsed="true"]) {
grid-template-columns: minmax(0, 1fr) 48px;
}
/* 2026-07-10: context panel collapsed to a slim strip — shrink its 300px
track to 48px so the watchlist reclaims the space. Combined with the
rail-collapsed cases below so both strips can coexist without dead space. */
.coverage-layout:has(> .coverage-context[data-collapsed="true"] > .ctx-content:not([hidden])) {
grid-template-columns: minmax(0, 1fr) 48px 320px;
}
.coverage-layout:has(> .coverage-context[data-collapsed="true"] > .ctx-content:not([hidden])):has(> .discover-rail[data-collapsed="true"]) {
grid-template-columns: minmax(0, 1fr) 48px 48px;
}
/* 2026-08-23: the aside must not spill out of its grid row. Same reasoning
as .discover-rail below — the surface is viewport-capped, so the row is
bounded and align-items:stretch already sizes this item. The base rule's
min-height:320px does not know that: with the Performance Map expanded
the row can compute shorter than 320px, and the aside then overflows its
grid area and hangs down over the map (it is positioned, so it also
painted on top of it). max-height:calc(100vh - 96px) is measuring the
wrong box for the same reason — the row is the cap here, and overflow-y
on the base rule already gives the panel its own scroll. */
.coverage-context {
position: relative;
top: auto;
min-height: 0;
max-height: none;
align-self: stretch;
}
/* Collapsed context aside: cap width to the strip, stretch to fill the row. */
.coverage-context[data-collapsed="true"] {
max-width: 48px;
min-width: 0;
padding: 8px 4px;
overflow: hidden;
}
.discover-rail {
grid-column: 3;
/* Surface is now viewport-capped + overflow:hidden (see above), so the
page no longer scrolls — sticky positioning is unnecessary and was the
cause of the unfilled track below the rail. Stretch to fill the
bounded grid row instead. */
position: relative;
top: auto;
max-height: none;
align-self: stretch;
overflow-y: auto;
}
.discover-rail[data-collapsed="true"] {
/* Collapsed rail is a narrow strip; cap width so it never bleeds past the
48px track and never re-inflates via inner content. */
max-width: 48px;
min-width: 0;
padding: 8px 4px;
}
.discover-rail-body {
flex-direction: column;
overflow-x: visible;
}
.discover-rail-body > .discover-card { flex: 1 1 auto; }
.discover-rail[data-collapsed="true"] { overflow: hidden; }
.discover-rail[data-collapsed="true"] .discover-rail-body { display: none; }
.discover-rail[data-collapsed="true"] .discover-rail-header {
flex-direction: column;
gap: 8px;
writing-mode: vertical-rl;
height: 140px;
margin: 0;
}
.discover-rail[data-collapsed="true"] .discover-chevron { transform: rotate(135deg); }
}
/* --- <= 960px: off-canvas drawer opened by the Discover pill --- */
@media (max-width: 960px) {
.discover-pill { display: inline-flex; }
.discover-rail {
position: fixed;
top: 0;
right: 0;
height: 100vh;
width: min(340px, 88vw);
z-index: 1200;
background: var(--bg-surface, #111827);
border-left: 1px solid var(--border, #1e293b);
padding: 14px;
transform: translateX(100%);
transition: transform 0.24s ease;
overflow-y: auto;
}
.discover-rail[data-drawer-open="true"] { transform: none; box-shadow: -12px 0 30px rgba(0,0,0,0.35); }
.discover-rail-body { flex-direction: column; overflow-x: visible; }
}
/* Onboarding modal */
.discover-onb-modal {
border: none;
background: transparent;
padding: 0;
max-width: 560px;
width: calc(100vw - 32px);
}
.discover-onb-modal[hidden] { display: none; }
.discover-onb-modal::backdrop { background: rgba(0,0,0,0.55); }
.discover-onb-card {
background: var(--bg-surface, #111827);
border: 1px solid var(--border, #1e293b);
border-radius: 12px;
padding: 22px 24px 20px;
}
.discover-onb-title {
margin: 0 0 4px;
font: 700 18px/1.25 'Inter', system-ui, sans-serif;
color: var(--text-primary, #e5e7eb);
}
.discover-onb-subtitle {
margin: 0 0 16px;
font: 400 13px/1.45 'Inter', system-ui, sans-serif;
color: var(--text-muted, #6b7280);
}
.discover-onb-tiles {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-bottom: 18px;
}
.discover-onb-tile {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 10px 12px;
border: 1px solid var(--border, #1e293b);
border-radius: 8px;
cursor: pointer;
}
.discover-onb-tile:hover { border-color: var(--accent, #1E7BFF); }
.discover-onb-check { margin-top: 3px; }
.discover-onb-tile-title {
display: block;
font: 600 12.5px/1.3 'Inter', system-ui, sans-serif;
color: var(--text-primary, #e5e7eb);
}
.discover-onb-tile-preview {
display: block;
margin-top: 2px;
font: 400 11px/1.35 'Inter', system-ui, sans-serif;
color: var(--text-muted, #6b7280);
}
.discover-onb-actions {
display: flex;
justify-content: flex-end;
gap: 10px;
}
/* Toast (self-contained; no global toast helper ships today) */
.discover-toast-host {
position: fixed;
left: 50%;
bottom: 24px;
transform: translateX(-50%);
z-index: 1400;
display: flex;
flex-direction: column;
gap: 8px;
pointer-events: none;
}
.discover-toast {
background: var(--bg-surface, #111827);
color: var(--text-primary, #e5e7eb);
border: 1px solid var(--border, #1e293b);
border-left: 3px solid var(--accent, #1E7BFF);
border-radius: 8px;
padding: 9px 14px;
font: 500 12.5px/1.3 'Inter', system-ui, sans-serif;
box-shadow: 0 8px 24px rgba(0,0,0,0.35);
opacity: 0;
transform: translateY(8px);
transition: opacity 0.24s ease, transform 0.24s ease;
}
.discover-toast.is-visible { opacity: 1; transform: none; }
@media (max-width: 640px) {
.discover-onb-tiles { grid-template-columns: minmax(0, 1fr); }
}
/* ============================================================
FIND FRIENDS (PR FF) — surface, sub-tabs, rows, suggested,
and the shared profile drawer.
============================================================ */
.friends-title { margin: 0; }
.ff-subtabs {
display: flex;
gap: 6px;
margin: 12px 0 16px;
border-bottom: 1px solid var(--border);
}
.ff-subtab {
appearance: none;
background: transparent;
border: none;
border-bottom: 2px solid transparent;
color: var(--text-secondary);
font: inherit;
font-weight: 500;
padding: 8px 14px;
cursor: pointer;
margin-bottom: -1px;
}
.ff-subtab:hover { color: var(--text-primary); }
.ff-subtab.active {
color: var(--text-primary);
border-bottom-color: var(--accent, #4f9eff);
}
.ff-subtab:focus-visible { outline: 2px solid var(--accent, #4f9eff); outline-offset: 2px; }
.ff-body { min-height: 200px; }
.ff-muted { color: var(--text-muted, var(--text-secondary)); font-size: 13px; }
.ff-empty { color: var(--text-muted, var(--text-secondary)); padding: 24px 4px; }
.ff-section-label {
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--text-secondary);
margin: 0 0 8px;
}
/* --- Discover: suggested row + search --- */
.ff-suggested { margin-bottom: 24px; }
.ff-suggested-row {
display: flex;
gap: 12px;
overflow-x: auto;
padding-bottom: 4px;
}
.ff-suggest-card {
flex: 0 0 auto;
width: 140px;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
text-align: center;
padding: 16px 10px;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 10px;
cursor: pointer;
color: var(--text-primary);
}
.ff-suggest-card:hover { border-color: var(--border-light); background: var(--bg-surface-alt); }
.ff-suggest-name { font-weight: 600; font-size: 13px; }
.ff-suggest-handle { color: var(--text-secondary); font-size: 12px; }
.ff-suggest-sub { color: var(--text-muted, var(--text-secondary)); font-size: 11px; margin-top: 2px; }
/* Find Friends cold-start: seed follows + connect contacts (PR FF-2) */
.ff-seed { margin-bottom: 24px; }
.ff-connect { margin-bottom: 24px; }
.ff-connect-consent {
color: var(--text-secondary);
font-size: 12px;
line-height: 1.5;
margin: 0 0 12px;
max-width: 620px;
}
.ff-connect-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.ff-connect-status { font-size: 12px; margin-top: 10px; color: var(--text-secondary); }
.ff-connect-status:empty { margin-top: 0; }
.ff-connect-status-error { color: var(--danger, #f87171); }
.ff-connect-status-ok { color: var(--success, #34d399); }
.ff-connect-results { margin-top: 12px; }
.ff-connect-group { margin-top: 16px; }
.ff-connect-group-label {
font-size: 12px;
font-weight: 600;
color: var(--text-secondary);
margin-bottom: 6px;
}
.ff-invite-row .ff-row-meta { gap: 8px; }
.ff-search-input {
width: 100%;
box-sizing: border-box;
background: var(--bg-surface);
color: var(--text-primary);
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px 12px;
font: inherit;
}
.ff-search-input:focus { outline: none; border-color: var(--accent, #4f9eff); }
.ff-search-results { margin-top: 8px; }
/* --- List rows (search results / following / followers) --- */
.ff-sortbar { display: flex; gap: 6px; margin: 0 0 12px; }
.ff-sort {
appearance: none;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 999px;
color: var(--text-secondary);
font: inherit;
font-size: 12px;
padding: 4px 12px;
cursor: pointer;
}
.ff-sort:hover { color: var(--text-primary); border-color: var(--border-light); }
.ff-sort.active { color: var(--text-primary); background: var(--bg-surface-alt); border-color: var(--accent, #4f9eff); }
.ff-list { display: flex; flex-direction: column; }
.ff-row {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 4px;
border-bottom: 1px solid var(--border);
}
.ff-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.ff-row-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ff-row-handle { color: var(--text-secondary); font-size: 12px; }
.ff-row-badges { display: inline-flex; gap: 6px; margin-top: 2px; }
.ff-row-meta { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.ff-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
background: var(--bg-surface-alt);
color: var(--text-secondary);
font-weight: 600;
font-size: 14px;
flex: 0 0 auto;
}
.ff-avatar-lg { width: 64px; height: 64px; font-size: 20px; }
.ff-badge {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
padding: 2px 6px;
border-radius: 4px;
background: var(--bg-surface-alt);
color: var(--text-secondary);
}
.ff-badge-mutual { color: var(--accent, #4f9eff); }
.ff-overlap-chip {
font-size: 12px;
color: var(--text-secondary);
white-space: nowrap;
}
/* --- Buttons --- */
.ff-btn {
appearance: none;
font: inherit;
font-size: 13px;
font-weight: 500;
padding: 6px 14px;
border-radius: 8px;
cursor: pointer;
border: 1px solid var(--border);
background: var(--bg-surface);
color: var(--text-primary);
}
.ff-btn:hover { border-color: var(--border-light); background: var(--bg-surface-alt); }
.ff-btn:disabled { opacity: 0.6; cursor: default; }
.ff-btn-primary { background: var(--accent, #4f9eff); border-color: var(--accent, #4f9eff); color: #fff; }
.ff-btn-primary:hover { filter: brightness(1.05); background: var(--accent, #4f9eff); }
.ff-btn-ghost { background: transparent; }
.ff-btn-more { width: 100%; margin-top: 12px; }
/* --- Shared profile drawer --- */
.ff-drawer {
border: none;
padding: 0;
background: transparent;
color: var(--text-primary);
max-width: none;
max-height: none;
}
.ff-drawer::backdrop { background: rgba(0, 0, 0, 0.55); }
.ff-drawer-inner {
position: fixed;
top: 0;
right: 0;
width: 480px;
max-width: 100vw;
height: 100vh;
overflow-y: auto;
background: var(--bg-surface);
border-left: 1px solid var(--border);
box-shadow: -8px 0 24px rgba(0, 0, 0, 0.35);
padding: 20px;
box-sizing: border-box;
}
.ff-drawer-close {
position: absolute;
top: 12px;
right: 16px;
background: transparent;
border: none;
color: var(--text-secondary);
font-size: 26px;
line-height: 1;
cursor: pointer;
}
.ff-drawer-close:hover { color: var(--text-primary); }
.ff-drawer-loading { color: var(--text-muted, var(--text-secondary)); padding: 24px 0; }
.ff-drawer-overlap { margin: 16px 0; }
.ff-overlap-line { font-size: 13px; color: var(--text-primary); }
.ff-overlap-label { color: var(--text-secondary); margin-right: 4px; }
.ff-overlap-tickers { font-weight: 600; }
.ff-drawer-actions {
display: flex;
gap: 10px;
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--border);
}
.ff-drawer-actions .ff-btn { flex: 1 1 auto; text-align: center; text-decoration: none; }
/* Mobile: drawer becomes a bottom sheet. */
@media (max-width: 960px) {
.ff-drawer-inner {
top: auto;
bottom: 0;
right: 0;
left: 0;
width: 100%;
height: auto;
max-height: 88vh;
border-left: none;
border-top: 1px solid var(--border);
border-radius: 14px 14px 0 0;
box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35);
}
}
/* ============================================================
AUTH — header chip + sign-in modal (PR A: Supabase auth)
============================================================ */
.auth-chip {
display: inline-flex;
align-items: center;
}
.auth-signin-btn {
appearance: none;
background: var(--accent, #4f9eff);
color: #fff;
border: 1px solid var(--accent, #4f9eff);
padding: 7px 14px;
font-size: 12px;
font-weight: 600;
border-radius: 6px;
cursor: pointer;
white-space: nowrap;
font-family: var(--font-sans);
transition: filter 0.12s ease;
}
.auth-signin-btn:hover { filter: brightness(1.08); }
.auth-chip-wrap { position: relative; display: inline-flex; }
.auth-chip-btn {
appearance: none;
display: inline-flex;
align-items: center;
gap: 7px;
background: var(--bg-surface);
color: var(--text-primary);
border: 1px solid var(--border);
padding: 5px 10px 5px 5px;
border-radius: 18px;
cursor: pointer;
font-family: var(--font-sans);
font-size: 12px;
max-width: 200px;
}
.auth-chip-btn:hover { background: var(--bg-hover); border-color: var(--border-light); }
.auth-chip-avatar {
width: 22px;
height: 22px;
border-radius: 50%;
object-fit: cover;
flex: 0 0 auto;
}
.auth-chip-avatar-initial {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--accent, #4f9eff);
color: #fff;
font-weight: 600;
font-size: 11px;
}
.auth-chip-email {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.auth-chip-menu {
position: absolute;
top: calc(100% + 6px);
right: 0;
min-width: 140px;
background: var(--bg-card, var(--bg-surface));
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
padding: 4px;
z-index: 1200;
}
.auth-chip-menu-item {
appearance: none;
display: block;
width: 100%;
text-align: left;
background: transparent;
color: var(--text-primary);
border: none;
padding: 8px 10px;
border-radius: 6px;
cursor: pointer;
font-family: var(--font-sans);
font-size: 12px;
}
.auth-chip-menu-item:hover { background: var(--bg-hover); }
/* ----- Modal ----- */
.auth-modal {
border: none;
background: transparent;
padding: 0;
max-width: 420px;
width: 92%;
}
.auth-modal::backdrop {
background: rgba(8, 11, 18, 0.62);
backdrop-filter: blur(4px);
}
.auth-modal-card {
position: relative;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 14px;
padding: 28px 26px 22px;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
font-family: var(--font-sans);
color: var(--text-primary);
}
.auth-modal-close {
position: absolute;
top: 12px;
right: 14px;
background: transparent;
border: none;
color: var(--text-secondary);
font-size: 24px;
line-height: 1;
cursor: pointer;
}
.auth-modal-close:hover { color: var(--text-primary); }
.auth-modal-title {
margin: 0 0 6px;
font-size: 18px;
font-weight: 700;
}
.auth-modal-subtitle {
margin: 0 0 20px;
font-size: 13px;
color: var(--text-secondary);
}
.auth-google-btn {
appearance: none;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
background: #fff;
color: #1f2329;
border: 1px solid #dadce0;
padding: 11px 14px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
font-family: var(--font-sans);
}
.auth-google-btn:hover { background: #f7f8f8; }
/* Stacked social sign-in buttons (Google + LinkedIn) have no intrinsic
* margin, so consecutive ones render flush. Add a consistent gap. */
.auth-google-btn + .auth-google-btn { margin-top: 10px; }
.auth-google-logo { flex: 0 0 auto; }
.auth-divider {
display: flex;
align-items: center;
gap: 12px;
margin: 18px 0;
color: var(--text-secondary);
font-size: 12px;
}
.auth-divider::before,
.auth-divider::after {
content: "";
flex: 1;
height: 1px;
background: var(--border);
}
.auth-magic-form { display: flex; flex-direction: column; gap: 8px; }
/* Labels must stack above their inputs on their own line. Previously we
* relied on the parent flex container turning label + input into vertical
* siblings, but when the signup-only fields sit inside a wrapper
* (#login-signup-fields), labels default back to inline HTML behaviour and
* end up next to their inputs. Force block + full-width on both. */
.auth-field-label {
display: block;
width: 100%;
font-size: 12px;
color: var(--text-secondary);
margin: 0 0 4px;
}
.auth-email-input {
display: block;
width: 100%;
box-sizing: border-box;
appearance: none;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: 8px;
padding: 10px 12px;
color: var(--text-primary);
font-size: 14px;
font-family: var(--font-sans);
}
/* The signup-only field wrapper needs to stack its label/input pairs with
* the same rhythm as the parent auth-magic-form, so vertical gap is applied
* via flex column layout rather than relying on default block spacing. */
#login-signup-fields {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
}
.auth-email-input:focus {
outline: none;
border-color: var(--accent, #4f9eff);
}
.auth-magic-submit {
appearance: none;
background: var(--bg-surface);
color: var(--text-primary);
border: 1px solid var(--border-light, var(--border));
border-radius: 8px;
padding: 10px 14px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
font-family: var(--font-sans);
margin-top: 2px;
}
.auth-magic-submit:hover { background: var(--bg-hover); }
.auth-magic-submit:disabled { opacity: 0.6; cursor: default; }
.auth-error {
margin: 4px 0 0;
font-size: 12px;
color: #f87171;
}
.auth-magic-success {
font-size: 14px;
color: var(--text-primary);
padding: 6px 0;
}
.auth-reassurance {
margin: 18px 0 0;
text-align: center;
font-size: 11px;
color: var(--text-secondary);
}
/* PR P1-P6 (2026-06-23) — supplemental classes for the optional
password field in the sign-in modal + standalone /login page. */
.auth-field-optional {
font-weight: 400;
color: var(--text-muted, var(--text-secondary));
margin-left: 4px;
font-size: 11px;
}
.auth-field-hint {
margin: 2px 0 0;
font-size: 11px;
color: var(--text-secondary);
line-height: 1.45;
}
.auth-password-hint {
margin-top: 4px;
}
/* ----- Profile Setup (PR II) ----- */
.profile-setup-modal {
max-width: 460px;
}
.profile-setup-card {
padding-top: 26px;
}
.profile-optional {
color: var(--text-secondary);
font-weight: 400;
margin-left: 4px;
font-size: 11px;
}
.profile-username-wrap {
position: relative;
display: flex;
align-items: center;
}
.profile-username-prefix {
position: absolute;
left: 12px;
color: var(--text-secondary);
font-size: 14px;
font-family: var(--font-sans);
pointer-events: none;
}
.profile-username-input {
padding-left: 26px;
width: 100%;
}
.profile-username-hint {
margin: 6px 0 0;
font-size: 12px;
color: var(--text-secondary);
}
.profile-username-hint-error { color: #f87171; }
.profile-username-hint-ok { color: #4ade80; }
.profile-setup-submit {
margin-top: 18px;
}
.profile-setup-submit:disabled {
opacity: 0.55;
cursor: not-allowed;
}
/* ----- Avatar Picker (PR III) ----- */
.avatar-picker {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
margin: 4px 0 18px;
}
.avatar-picker-label {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
cursor: pointer;
text-align: center;
}
.avatar-preview {
display: inline-block;
width: 96px;
height: 96px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.04);
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
border: 1px dashed rgba(255, 255, 255, 0.18);
position: relative;
transition: border-color 120ms ease, background-color 120ms ease;
}
.avatar-preview::after {
content: "Add photo";
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
color: var(--text-secondary);
letter-spacing: 0.02em;
text-transform: uppercase;
pointer-events: none;
}
.avatar-preview.avatar-preview-has-image {
border-style: solid;
border-color: rgba(255, 255, 255, 0.24);
background-color: transparent;
}
.avatar-preview.avatar-preview-has-image::after {
content: "";
}
.avatar-picker-label:hover .avatar-preview {
border-color: rgba(255, 255, 255, 0.36);
}
.avatar-picker-cta {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
}
.avatar-picker-title {
font-size: 13px;
color: var(--text-primary);
font-weight: 500;
}
.avatar-picker-hint {
font-size: 11px;
color: var(--text-secondary);
}
.avatar-remove-btn {
background: transparent;
border: 1px solid rgba(255, 255, 255, 0.16);
color: var(--text-secondary);
font-size: 11px;
padding: 4px 10px;
border-radius: 12px;
cursor: pointer;
transition: border-color 120ms ease, color 120ms ease;
}
.avatar-remove-btn:hover {
border-color: rgba(255, 255, 255, 0.32);
color: var(--text-primary);
}
.avatar-picker-error {
margin: 2px 0 0;
font-size: 12px;
color: #f87171;
text-align: center;
}
/* ============================================================
MOBILE TOP-NAV + RIBBON FIX (PR mobile-topnav-ribbon)
============================================================
Problem A (headers): `.surface-nav { display: none }` lives in styles.css
@media (max-width: 900px), but redesign.css loads AFTER styles.css and its
base `.surface-nav { display: flex }` rule wins source order at equal
specificity. Result: on iPhone the cramped horizontal-scroll top tab
strip (Coverage / Compare / Screener / Earnings / Research / Briefing /
Macro / News) renders ON TOP of the bottom-bar nav and shows overlapping
labels because flex items shrink below their min-content. Fix: re-state
the hide inside redesign.css so it actually applies.
Problem B (watchlist below fold): the watchlist pillbar + coverage
ribbon eat ~600px of vertical space on mobile with no compaction, so on
a 700-850px iPhone viewport the table sits entirely below the fold.
Fix: tighter padding, smaller fonts, horizontal-scroll the ribbon row,
hide the always-secondary Customize-columns control. Functionality is
preserved — every control is still reachable.
============================================================ */
@media (max-width: 900px) {
/* A — 2026-06-27 REVERSAL: the swipeable top .surface-nav is now the
primary nav surface on phones (the fixed bottom 5-icon bar was retired
in this PR). Force it visible, full-width, horizontally swipeable, and
compact so all 8 surfaces (Coverage / Compare / Screener / Earnings /
Research / Briefing / Macro / News) are reachable with a finger swipe. */
.surface-nav {
display: flex !important;
width: 100%;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x proximity;
flex-wrap: nowrap;
gap: 4px;
padding: 4px 6px;
margin: 0;
border-top: 1px solid var(--border, rgba(255,255,255,0.08));
border-bottom: 1px solid var(--border, rgba(255,255,255,0.08));
background: var(--bg-header, var(--bg-surface, #0a0d12));
}
.surface-nav .surface-btn {
flex: 0 0 auto;
scroll-snap-align: start;
font-size: 13px;
padding: 8px 12px;
/* Override the PR M1 44x44 min-height rule from styles.css — the nav
buttons are wide enough horizontally to remain easy to tap without
being giant vertical chips. */
min-height: 36px;
min-width: 0;
}
/* Hide the right-edge fade affordance on mobile — it overlaps the last
button ("News") and visually looks like a broken chip. iOS already
supplies its own scroll bounce affordance. */
.surface-nav::after { display: none; }
/* B1 — compact watchlist switcher pillbar. */
.watchlist-pillbar {
padding: 4px 10px;
}
.wl-pillbar-inner {
gap: 6px;
}
.wl-pillbar-label {
font-size: 10px;
}
.wl-pillbar-pills {
gap: 4px;
}
/* B2 — compact coverage ribbon: single horizontally-scrollable row
instead of wrap-to-many-rows. Each group stays inline and the row
scrolls left/right with iOS momentum if it overflows. */
.coverage-ribbon {
padding: 6px 8px;
margin-bottom: 8px;
}
.ribbon-row {
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
gap: 10px;
row-gap: 0;
padding-bottom: 2px;
}
.ribbon-row::-webkit-scrollbar { display: none; }
.ribbon-group {
flex: 0 0 auto;
gap: 6px;
}
.ribbon-group-flags {
flex-wrap: nowrap;
}
/* Drop the Customize-columns button on mobile — column layout is fixed
by the responsive table rules anyway and the button just steals
horizontal space. Still accessible from desktop. */
.ribbon-group-end {
display: none;
}
}
/* ============================================================
INBOX (PR #149 / PR 1) — in-app alert inbox + topbar bell badge
============================================================ */
/* Topbar bell wraps the icon button so the badge can absolute-position. */
.topbar-action.topbar-inbox {
position: relative;
}
/* Unread badge — small pill in the top-right corner of the bell. */
.inbox-badge {
position: absolute;
top: 1px;
right: 1px;
min-width: 16px;
height: 16px;
padding: 0 4px;
border-radius: 8px;
background: var(--accent, #4f9eff);
color: #fff;
font-size: 10px;
font-weight: 600;
line-height: 16px;
text-align: center;
pointer-events: none;
box-shadow: 0 0 0 2px var(--bg-primary, #0f1419);
letter-spacing: 0;
}
/* ----- Inbox surface ----- */
.surface-inbox {
padding: 24px 20px 64px;
max-width: 920px;
margin: 0 auto;
}
.inbox-header {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
margin-bottom: 16px;
}
.inbox-title {
font-size: 22px;
font-weight: 600;
color: var(--text-primary);
margin: 0;
}
.inbox-actions {
display: flex;
align-items: center;
gap: 8px;
}
.inbox-mark-all,
.inbox-refresh {
background: transparent;
border: 1px solid var(--border, #2a3038);
color: var(--text-secondary, #aab2bd);
padding: 6px 12px;
border-radius: 6px;
font-size: 12px;
cursor: pointer;
transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}
.inbox-mark-all:hover,
.inbox-refresh:hover {
color: var(--text-primary);
border-color: var(--accent, #4f9eff);
}
.inbox-mark-all:disabled { opacity: 0.5; cursor: progress; }
.inbox-refresh { padding: 6px 10px; }
.inbox-status {
color: var(--text-secondary, #aab2bd);
font-size: 13px;
padding: 24px 0;
text-align: center;
}
.inbox-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
/* Row — severity dot + body + open link. Click anywhere to mark read. */
.inbox-row {
display: grid;
grid-template-columns: 8px 1fr auto;
gap: 12px;
align-items: flex-start;
padding: 12px 14px;
background: var(--bg-secondary, #161a20);
border: 1px solid var(--border, #2a3038);
border-radius: 8px;
cursor: pointer;
transition: background 0.12s ease, border-color 0.12s ease;
}
.inbox-row:hover {
border-color: var(--accent, #4f9eff);
}
.inbox-row-dot {
width: 8px;
height: 8px;
border-radius: 50%;
margin-top: 7px;
background: var(--text-tertiary, #555);
}
.inbox-row--info .inbox-row-dot { background: #4f9eff; }
.inbox-row--warn .inbox-row-dot { background: #f5a623; }
.inbox-row--alert .inbox-row-dot { background: #ef4444; }
.inbox-row--critical .inbox-row-dot { background: #ef4444; }
.inbox-row-body {
min-width: 0;
}
.inbox-row-meta {
display: flex;
align-items: center;
gap: 10px;
font-size: 11px;
color: var(--text-secondary, #aab2bd);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 4px;
}
.inbox-row-type {
font-weight: 600;
color: var(--text-primary);
}
.inbox-row-ticker {
font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
color: var(--accent, #4f9eff);
font-size: 11px;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
}
.inbox-row-time {
margin-left: auto;
font-weight: 400;
letter-spacing: 0;
text-transform: none;
}
.inbox-row-summary {
color: var(--text-primary);
font-size: 13px;
line-height: 1.45;
/* Two-line clamp so a long body doesn't push the row layout. */
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.inbox-row-link {
align-self: center;
font-size: 12px;
font-weight: 500;
color: var(--accent, #4f9eff);
text-decoration: none;
padding: 4px 10px;
border-radius: 5px;
border: 1px solid transparent;
transition: background 0.12s ease, border-color 0.12s ease;
}
.inbox-row-link:hover {
border-color: var(--accent, #4f9eff);
background: color-mix(in srgb, var(--accent, #4f9eff) 10%, transparent);
}
/* Unread/read visual states. */
.inbox-row.is-unread {
background: color-mix(in srgb, var(--accent, #4f9eff) 6%, var(--bg-secondary, #161a20));
}
.inbox-row.is-unread .inbox-row-type {
color: var(--text-primary);
}
.inbox-row.is-read {
opacity: 0.75;
}
.inbox-row.is-read .inbox-row-summary {
color: var(--text-secondary, #aab2bd);
}
/* Mobile: collapse to single column, hide Open button label for breathing room. */
@media (max-width: 640px) {
.surface-inbox { padding: 16px 12px 48px; }
.inbox-row { padding: 10px 12px; gap: 10px; }
.inbox-row-meta { font-size: 10px; gap: 8px; }
.inbox-row-summary { font-size: 12px; }
.inbox-row-link { padding: 4px 8px; font-size: 11px; }
}
/* ============================================================
2026-08-13 mobile-fix: hard visibility floor for the active surface
============================================================
Symptom: after tapping "Not now" on the tour invite strip, the
Coverage surface on iPhone was rendering as a blank area below the
topbar with only the fixed "Tour" pill visible in the corner.
Root causes addressed here (paired with the tutorial.js dismiss fix):
1. iOS Safari fires a synthetic ghost click ~300ms after the tap that
removed the strip. Whatever ribbon chip now sits at the tap
coordinates receives it. Handled in tutorial.js (preventDefault +
stopPropagation on the dismiss click).
2. The layout that measured --table-top-offset while the strip was in
flow is now stale, which the resize dispatch in tutorial.js fixes.
3. Defensive floor: no matter what happens, the currently-active
surface must have visible content area on phones. If the router
somehow ends up with every [data-surface] set to hidden, or if a
descendant collapses to 0 height, this rule guarantees the visible
surface at least fills the viewport under the topbar.
============================================================ */
@media (max-width: 900px) {
.surface:not([hidden]) {
min-height: calc(100dvh - var(--app-header-height, 54px) - 96px);
}
}
|